이 글은 이전하기 전 블로그에 2022년 01월 26일 작성한 글을 재작성한 것입니다.

---

인턴에 지원하고 싶어 웹 이력서를 만들게 되었다. 물론 pdf 이력서는 있지만, pdf 채로 옮겨 넣는 것은 용납할 수 없었다. 파일 다운로드도 아니고! 그래서 만들기로 결정했고 어제까지는 블로그 정비를 했다. 오늘의 Today-I-Made라고 하기엔 자정을 넘어 날이 바뀌었지만, 기록으로 남긴다. 나의 이력서! CSS를 이렇게 많이 활용해본 게 처음이다! 당연한 일이다. CSS를 적용한 웹 페이지를 0에서부터 구성하는 것 자체가 처음이기 때문이다. 아래는 짧은 시연 영상! 제목 hoover 효과 부분은 영상에서 잘렸다.

12시간의 코딩 이전의 자신...

• html과 css에 대해서 아는 내용은 대충 css는 디자인, html은 내용이라는 점과 각각 코드 생김새 정도였다.

• jekyll 블로그를 해보면서 익숙해진 점은 있었다. 글쓰기는 전부 마크다운이었지만 직접 index.html 정도는 건드려봤다는 자신감!

• 이미 pdf 제출이 가능한 이력서가 있었기에 내용 면에서는 정리는 되어있었고 눈에 띄는 그래픽 요소에 어떤 것을 넣을 지가 고민이었다.

• 풍부한 인터넷! Codepen이라는 사이트를 알게 되어 자료를 얻을 곳이 있었다. (더해서 여러가지 웹 개발 시 참고할만한 사이트를 알고 있었다.)

• 대충 구상된 디자인과 미리 생성해둔 Github page! 깃허브 페이지에 보니 테마를 선택할 수 있는 기능이 있어 둘러봤고 여백의 미에 대한 영감 이 떠올랐다.

12시간의 코딩 그 시작

뻔뻔한 생각일 수 있지만, 구체적인 디자인이 있었으면 12시간도 안걸렸겠다는 생각이 들었다. 하지만, 디자인 면에서 생각해 둔 건 '모바일에서도 겹쳐지는 글자와 그림이 없고 화면을 엄청나게 늘려도 가독성 좋은 여백을 가지면 좋겠다' 뿐이었다. 앱 개발에서는 매일 체계적이게 스토리보드부터 예상 사용 경로까지 생각해보고 만드는데 좀 급한 마음도 있었고 정적 페이지니까 '대충 이런 걸 넣으면 되겠지?'라고 생각했던 것 같다. 다음에 만드는 웹 페이지는 디자인부터 확정하고 해봐야겠다.

아무튼 중요한 건 나를 소개하는 멋진 인트로(도입부)를 만드는 것이었다. 이러저러 취업 관련해서 알아보고 세미나를 들어보니 이력서만 봐도 나의 모든 것을 다 알게 하는 것 자체가 말이 안된다 는 생각이 들었고 웹에서 만나는 나의 첫인상일테니 내가 어떤 분위기인지 보여주는 것이 더 중요하다고 생각했다. 그래서 처음 한 일은 내가 사용할 글꼴 고르기! Google Fonts에서 원하는 글꼴을 찾아보았다. 일단 한국어 이력서를 만들 것이기 때문에 한국어와 영어가 같은 분위기로 적용되어야 하고 웹 가독성이 좋은 것을 택했다. 세련되고 감각있는 개발자의 이미지이고 싶어 깔끔하지만 약간의 곡선이 있는 서체를 골랐다. 본문에 쓰인 서체는 Gowun Dodum이고 제목은 일부러 매우 도전적이며 시선을 끄는 Gugi를 사용했다. Google Font를 이용한 이유는 웹에 import하여 사용할 수 있기 때문이다.

참고: @import하여 CSS에 적용할 경우 Windows 브라우저에서 오류가 생길 수 있다. 그래서 head 부분에 link하여 넣어주도록 한다.

사실 난 이 시작부만 하더라도 스타일시트 적용하는 법을 몰랐다... 그래서 html에 css 적용하기 같은 것들을 검색해서 css 파일을 href로 불러온다는 것도 처음 알았다. (이래서 전공 수업은 빠짐없이 듣는게 중요한 것 같다.) 디자인 요소를 만드는데 도움을 받은 곳이 W3Schools다. 예전부터 알고 있었는데 역시나 도움이 되었다. 예시와 설명 전부 잘 되어있어 도움을 많이 받았다.

12시간의 코딩 그리고 또 코딩하기

폰트도 골랐고 페이지에 쓸 index.html 파일도 있으니 내용을 쓰고 디자인을 적용하면 되지 않을까? 하는 생각이었다. 그래서 일단제목으로 내 이름을 적고 codepen에서 본 멋진 hover 효과를 적용했다. 만족스러운 적용! 그리고 뭔가 경계를 구분지어주는 선을 만들고 싶었다. 그래서 css로 간단하게 만들어 본 나의 코드.

.horizon{
  border-style: none none solid none;
  border-width: 1px;
  border-color: #363636;
}

문단에 사용되는 p에 이 클래스를 적용시켜 빈 문단이 경계선 역할을 하게 만들었다. 그리고 여백의 미 를 적용하기 위해서 각각의 요소를 section으로 구분하되 일정하게 padding을 가지도록 코드를 작성했다. max-width를 두어 아무리 넓이가 넓어지더라도 한 줄이 무제한적으로 길어지는 것을 막았다. 32인치 모니터에서 전체화면으로 봐도 눈이 피로하지 않게 한 것이다.

이 때 생겼던 문제가 창의 넓이를 어느정도 넓게 하는 순간부터 section이 왼쪽으로 쏠리기 시작했다. 그와 다르게 h2와 같은 태그들은 멀쩡하게 가운데 정렬되었다. 혼돈의 순간 역시나 구글링으로 해결법을 찾아냈다. 원래는 padding값만 있었는데 margin을 주는 것! margin은 auto로 설정했고 멋지게 가운데 정렬이 되었다.

그 다음에 핵심 능력이나 성과를 시각적으로 보여주고 싶었다. 그래서 카드나 캐러셀 형태의 소스를 codepen에서 찾아 추가했다. 사각형 카드인데 뒤집혀 상세 내용을 나타낼 수 있는 것이 마음에 들었다. 상세 내용도 1줄 정도의 간략한 내용이지만, 매력적인 가시성 때문에 이용해보았다. 원래 소스에서는 최소 너비도 없고 겹치는 문제가 발생해서 margin과 min-width 값을 추가해서 해결했다.

카드를 완성하고 나서 타임라인을 추가했다. 타임라인은 처음 가져온 코드에서 색상 변경만 한 수준이었다. 그런데 .circle이 이름 밑의 링크들에 해둔 버튼에서와 겹쳐 위쪽 것이 깨지길래 이름을 바꿔 해결했다. 그리고 원래 설명글만 있었지만 링크도 추가했다. 연락처 링크를 걸어둔 형식의 클래스를 활용했다. 역시 코드 재사용 짱!

그리고 내가 가진 능력들이 뭐가 있는지 알리기 위해 Skills 항목을 적었다. 내용 상으로 위에 시계열 위에 있는 것이 맞을 것 같았다. 간략하게 보여주고 싶은 것만 보여줘야 하는데 중요도를 따지면 기술 항목이 위에 있는게 맞다고 생각했다. Skills 항목은 3열의 불릿 형식으로 간단하게 나타냈다. 가독성을 따져도 시각적인 요소는 이미 많이 있다고 판단해서 이렇게 표현했다.

완성 후!

오늘 새벽에서야 완성한 것이기에 오전에 어머니께 이력서를 보여드리며 조언을 요청했다. 세세한 부분들을 고쳤고 완성했다. 의도한 게 나의 인트로였기 때문에 프로젝트 등에 대한 상세 설명은 링크를 통해 바로 갈 수 있게 해두었다. (pdf 이력서에는 다 설명해두었지만...) 앞으로도 고칠 부분이 있으면 꾸준히 고쳐나갈 것이다. 나의 이력서가 궁금하다면 강유진: 이력서에 직접 들어가보라!

(2024.01.05)

웹 이력서는 나중에 또 만들겠지만, 실시간 성장 중이라 모든 걸 웹에 가독성 좋게 표기하기엔 시간이 부족했다. 현재는 pdf 이력서에 집중 상태다.