Resume 1차 레이아웃 완성

해당 시리즈는 엔지니어의 Resume를 생성하는 과정을 공유합니다.

레이아웃 설계

이전 글에서 결정한 요구조건은 다음과 같다.

PDF로 내보내기 위해서는 한 페이지에 모든 내용을 볼 수 있어야 한다.
Header에 애니메이션이 가미된 배경을 사용하여 생동감을 살리고 Navbar에 section을 연동시키자.
반응형에서도 문제없도록 심플한 구조로 작성하자.
구체적인 설명을 최대한 압축해서 작성하자.
PDF에서도 해당 웹페이지로 들어올 수 있도록 링크를 걸어두자.

이를 바탕으로 설계를 시작하였으며, 먼저 단락을 어떻게 나눌지 고민하였다.

섹션 나누기

어떤 내용이 들어가야 할까? 처음 떠오른 것들은 기본적인 개인정보, 간단한 소개글, 학력, 경력, 프로젝트, 블로그, 깃허브 등 이었다. 이를 몇 개의 섹션으로, 또 어떤 순서로 배열하는게 좋을까? 고민하다가 읽는 이가 자연스럽게 나에 대한 정보를 쌓아갈 수 있으면 좋을 것 같다는 생각이 들었다. 그 결과 순서는 다음과 같다.

개인정보 & 간단한 소개
기술스택
블로그 & 깃허브
경력
프로젝트
학력

이렇게 나열한 이유는 아직 엔지니어로 일을 시작한지 1년도 안되었기 때문이다. 경력보다는 기술 스택이나 개인적으로 운영하는 블로그 & 깃허브가 나를 표현하는 데 있어 좋은 방식이라고 생각했다. 그러면 경력은 왜 프로젝트보다 앞으로 배치했을까? 바로 차후에 진행되는 프로젝트들도 경력과 연관되어 있을 가능성이 99%기 때문이다. 즉, 내가 어떤 직무를 맡았을 때 했던 프로젝트인지를 연계하고자 경력을 먼저 언급하고 이후에 프로젝트의 세부적인 내용들을 제시한 것이다. 학력의 경우 사실 비전공자에 컴퓨터와는 전혀 상관이 없으므로 메리트 있는 요소는 아니라고 생각하여 맨 마지막에 배치하였다.

이제 위 섹션들의 이름을 정할 차례이다. 섹션 제목의 경우 한글보다는 영어로 작성하는 것이 단어의 길이가 짧아서 인식되기 쉬울 것으로 예상하였다. 결정한 제목들은 다음과 같다.

섹션제목	설명
About	개인정보 & 간단한 소개
Skills	기술스택
Archiving	블로그 & 깃허브
Experience	경력
Project	프로젝트
Education	학력

이제 디자인적인 요소들을 확인해보자.

테마 설정하기

자 어려운 문제에 도착하였다. 먼저 크게 3가지 정도를 결정해보기로 하였다.

테마 컬러
글씨체
Header 배경

먼저 테마 컬러이다. 사실 색상의 경우 “블로그와 컬러감이 유지 될 것”이라는 제한조건이 있었다. 그리하여 블로그 색상을 그래도 가져왔다. 색상은 크게 3가지이고 검정색, 회베이지색, 흰색이다. 검정색의 경우 부트스트랩에서 제공하는 dark 색상을 사용하였다.

그다음 글씨체이다. 처음에는 예쁜 글씨체를 다운받아서 사용하려고 했으나 이력서 특성 상 너무 가벼워보이면 안될 것 같아 제공된 고딕체를 사용하였다.

Header 배경은 정말 고민이 많았다. 웹페이지라는 부분을 살리고 싶어 애니메이션이 가미되었으면 좋겠다고 생각했는데, 화려한 애니메이션들은 생각보다 정신이 없었다. 그래서 배경화면은 “개발자스러운 표현, 컬러는 3개 이하, 흰색 또는 검은색 글씨가 오버레이 되어도 잘 보일 것”으로 제한을 걸고 찾아보았다. 그 결과 영화 매트릭스에 등장하는 검은색 배경에 숫자가 내려오는 애니메이션이 선택되었다.

언어 설정하기

이전 페이지는 한글과 영어를 같이 써두었다가 나중에는 영어만 남겨두었다. 하지만 국내에서 이직을 할 때 사용하려면 한국어 버전도 필요하였다. 처음에는 번역처럼 한글 아래에 영어를 작성하려고 하였으나 가독성도 좋지 못했고, 글이 너무 많아져서 해당 방법은 포기하였다. 어떻게 할까 하다가 상단 바에 언어를 선택할 수 있는 폼을 추가하였다. 이렇게 하면 나중에 이력서를 PDF로 만들어서 제출할 때도 언어에 따라서 제출할 수도 있고, 글도 추가되지 않는다.

일단 완성된 이력서는 해당 링크에서 확인할 수 있다. 완성된 페이지는 이미 각 섹션 별로 레이아웃이 잡혀있고 글도 채워져 있다. 다음 글에서는 섹션 별 레이아웃과 내용 정리 등에 대해서 이야기해보고자 한다.