해당 시리즈는 엔지니어의 Resume를 생성하는 과정을 공유합니다.
시작
엔지니어로 커리어를 시작한지 3개월이 되었을 즈음, 시간이 남아 간단한 Resume 웹페이지를 만들었다. 막 수습 기간이 지나고 본격적으로 업무를 시작할 때라서 지금까지 해왔던 것들 또 앞으로 해나갈 것들을 한 페이지에 담아두고 싶었다. 또 이렇게 정리를 하다보면 스스로에 대한 메타인지도 향상되고 커리어 방향을 정하는 데 있어 도움이 될 것이라는 생각도 들었다. 그래서 부트스트랩에 있는 무료 템플릿 하나를 선택하여 커스터마이징 하였다. 사용된 템플릿 소스코드가 필요한 사람들은 해당 깃허브로 들어가서 가져오면 된다. (오픈소스이다)
처음에는 테마도 깔끔하고 소스 코드도 비교적 커스터마이징하기 좋아서 선택했고 만족했었다. 하지만 최근 resume 업데이트를 위해 이것저것 시도해보면서 Navbar가 옆쪽에 위치한 것이 불편하게 느껴졌고, 추가해야 할 내용도 생각보다 많았다. 그래서 결국 2021년이 가기 전에 resume를 완전히 바꿔보려고 한다.
레이아웃
배포방식은 이전과 동일하게 깃허브의 Pages 기능을 사용할 예정이며, 기본적인 HTML 레이아웃은 부트스트랩 예시를 가져올 것이다. 사용한 예시 소스코드는 홈페이지에 들어가면 받을 수 있다. 이번에 사용하는 코드의 경우 이전과 다르게 정말 레이아웃 코드만 들어있기 때문에 자유도가 높은 만큼 신경써야 할 것들이 많다. 예로 든다면 이전 페이지는 인스턴스 식품이라서 간단한 조리로도 먹을 수 있었지만 지금은 재료를 산 경우라서 직접 요리를 해 먹어야 하는 정도라고 볼 수 있을 것 같다.
설계
이번에는 Navbar를 상단에 두고 정보들을 아래 방향으로 나열하는 방식을 선택하였다. 또 이번 페이지에는 아래의 조건들을 모두 만족할 수 있는 구조로 설계를 시도하였다.
- PDF 파일로 내보내도 괜찮은 디자인이어야 한다.
- 웹페이지로 봤을 때 너무 정적이지 않았으면 좋겠다.
- 모바일이나 다른 기기에서도 볼 수 있는 반응형 웹이어야 한다.
- 이후 내용들을 추가해도 레이아웃 상 문제가 없어야 한다.
- simple is the best.
위 내용들을 바탕으로 고민한 결과 결정된 사항은 다음과 같다.
- PDF로 내보내기 위해서는 한 페이지에 모든 내용을 볼 수 있어야 한다.
- Header에 애니메이션을 배경으로 해서 생동감을 살리고 Navbar에 section을 연동시키자.
- 반응형에서도 문제없도록 심플한 구조로 작성하자.
- 구체적인 설명을 최대한 압축해서 작성하자.
- PDF에서도 해당 웹페이지로 들어올 수 있도록 링크를 걸어두자.
이제 해당 내용들을 바탕으로 하나씩 개발을 시작해보자.