나는 종종 글을 쓰면 주제의 본질을 벗어나는 경향이 있다. 이전에 쓴 이력서 유지보수 하는 썰의 글이 그랬다. '이력서를 어떻게 유지보수 했는지' 보다 '재미있어 보이는 글(사실 재미 없는 것)'을 쓰는 것에 집중을 한다. 그렇게 나온 글은 별로 영양가 높지 않다. 이번에는 꼭, '주제'에 집중해서 글을 써야겠다.

로켓펀치, 원티드 같은 채용 플랫폼에서 이력서를 관리해도 좋다고 생각했다. 그러다가 작년에 지금의 회사로 이직할 때, 그래도 웹 프론트앤드 개발자인데 웹으로 이력서를 만들면 좋지 않을까? 생각이 들었다. '깃헙에 코드로 관리되는 이력서가 있다면...' 여러모로 좋은 점이 많은 듯 하여 급히 만들었다.

image.png

생각보다 관리는 잘 되지 않았다. 이직 후에는 이력서에 손을 댈 생각을 하지 않았다. 자연스럽게 내 이력서는 낡아갔다. 빠른 개발을 위해 리액트를 사용하지 않고 템플릿 엔진으로 구현을 했던게 발목을 잡았다. 이력서를 갱신해야지 하고 마음을 먹고 프로젝트를 열면 이내 닫기 십상이었다.

그렇게 대충 7개월 정도가 지났다. 이직한 지금의 회사에서 어느정도 시간이 지나고 나니 조금의 여유가 생겼다. 커밋 로그를 훑어보면서 무엇을 했나 보던 중, 만들어 둔 이력서가 생각이 났다. 내 개인적인 시간을 투자할 수 있는건 지금이 유일한 적기라는 생각이 들었다.

디자인

먼저 디자인을 구상했다. 스케치를 사용하고 싶었지만 지금의 회사에서는 개발자라서 스케치 라이센스를 받지 못했다. 대신 피그마를 사용 해 보기로 했다. 사용해 본 결과 프로토타이핑 이상으로, 스케치와 동일한 결과물을 낼 수 있다고 생각했다... 같은 평가를 2019년에 다시 내리는건 의미가 없다. 덕분에 스케치를 구매하지 않고 무료로 UI 를 그려낼 수 있었다.

image.png

디자인의 영감은 깃헙의 마크다운 스타일에서 받았다. 이전에 만들었던 것에 비해서 좀 더 읽고싶은 이력서를 만들고 싶은 나의 욕구가 반영된 결과물이었다.

애니메이션 (lottie)

사실 디자인 이전 단계에서부터 '이번에 새로 작업하면 로티를 써봐야지' 하고 생각했다. 애프터 이펙트로 만든 애니메이션을 웹에서 재생할 수 있다니. 메인 로고가 만들어지자마자 애프터 이펙트를 설치했다. 한 번도 써본 적 없었지만 유투브 강의를 찾아보면서 만들 수 있었다.

애펙으로 작업 할 때 주의할 점은 애펙의 언어를 영어로 써야 했다. 언어가 한글이면 애니메이션을 만들고 bodymovin 으로 export 를 해서 데모를 실행하면 정상적으로 작동하지 않는다. 브레이크 포인트를 걸어 확인해보니 대충 컴포지션, 레이어 등의 이름 부분에 한글 인코딩이 깨지면서 뭔가 잘 안된 듯 했다. 영어로 바꾸고 나니 정말 잘 된다. 어도비는 한글로 쓰는거 아니라고 했던게 기억이 났다.

애니메이션 작업을 하면서 로고를 많이 다듬었다. 폰트와 배치, 애니메이션에 대해 디자이너인 여자친구가 많은 도움을 줬다.

2019-06-03 18-11-11.2019-06-03 18_11_37.gif

lottie-web 에 타입스크립트 타이핑 파일이 포함되어 있던게 소소하게 행복했다.

구현

리액트와 타입스크립트를 사용하여 구현했다. 이력서 특성상 컴포넌트화 할 부분이 많지는 않았지만 최대한 재사용할 수 있고, 리액트의 데이터 바인딩의 장점을 십분 살린 이력서가 되었으면 했다.

image.png

프로필은 마크업을 그대로 작성했지만, 최근 사용한 기술이나 경력 사항을 컴포넌트화 하여 위와 같은 데이터를 표시하도록 구현했다. 소소하지만 그런 것에 대한 작은 테스트 케이스도 작성했다.

배포 및 도메인 연결

이번에 처음으로 Netlify 를 사용했다. 이야기는 많이 들었는데 오픈소스를 운영하는 사람한테 좋겠다 하고 지나쳤었다. 사용해 보니 정말 편리하다. 깃헙 저장소를 연결하는 정도면 기본적인 설정이 끝나고, 마스터 브랜치를 자동으로 빌드하여 배포해준다. 이력서 때문에 S3 에 올리던 방식보다 만족스럽다.

도메인은 resume.imch.dev 로 연결했다. DNS 설정에서 생성된 xxx.netlify.com 주소를 CNAME 으로 추가하면 끝이다. 도메인이 정상적으로 붙으니 Let's Encrypt 을 통해 HTTPS 까지 지원해줬다. 마스터 브랜치에 푸시를 하면 자동으로 빌드 후 배포가 진행된다. 기존의 이력서 관리 방법에서 배포 항목이 빠진 셈이다.

image.png

각 잡고 제대로 이력서를 만들어 보면서 겪은 것들을 정리했다. 나처럼 '웹 프론트엔드 개발자라면...' 같은 생각을 하는 누군가에게는 도움이 되었으면 한다. 작업한 피그마 주소와 깃헙 링크를 올리면서 마무리한다.

이력서 / Figma / GitHub