Portfolio v2 - 3. 완성

어느 새 두 번째 글을 쓴 지 한 달이 되었다.

한달 동안 미국 여행을 하며 틈틈히 이것 저것 만든 결과 드디어 두 번째 버전의 포트폴리오가 완성되었다.

https://portfolio-dev-wann.vercel.app/

Seungwan Cho's Portfolio

확실히 첫 번째 포트폴리오 페이지에서보단 기본 틀을 잡아놓고 진행해서 그런지 완성도가 높게 나온 것 같다.

 

포트폴리오 페이지 구성

포트폴리오 페이지는 크게 Home, About, Project, Contact 네 파트로 구성되며 추가로 Resume 페이지가 있다.

- Home

직접 찍은 타이핑 영상에 react-type-animation을 사용해 애니메이션을 구현하였다.

단순히 영상을 재생하는 것에 그치지 않고 테마 색을 바꾸거나 언어를 바꿀 때 전환 애니메이션까지 구현하였다.

아쉬운 점은 이런 JS로 타이핑 효과를 주는 라이브러리는 setTimeout이나 setInterval 같은 비동기 호출을 기반으로 동작하기 때문에 영상과 타이핑의 타이밍이 매번 달라지게 되며 그로 인해 싱크가 매번 조금씩 다른 정도로 틀어지게 된다.

실제로 여러번 반복해서 재생해보면 타이핑되는 속도가 미묘하게 계속 달라지는 것을 확인할 수 있다.

 

사실 싱크를 맞추는 가장 확실한 방법은 영상 자체에 타이핑 하는 효과를 포함시키는 것이겠지만, 영상 편집은 전문 분야가 아니어서 일단은 이 방법은 사용하지 않기로 하였다.

그 외에 프로그래밍적으로 해결할만한 방법으로 생각한 것은 각 프레임마다 타이머 오차를 계산해 보정하는 방법이지만, 이번에는 외부 라이브러리를 가져와 사용하였으므로 보정 로직을 추가하기에는 공수가 너무 커져 굳이 그렇게 하지는 않았다. 다만 이후에 시간이 허락한다면 첫 번째 포트폴리오에서 직접 구현했던 타이핑 효과를 타이밍 보정 로직까지 넣어 적용시켜보고 싶다.

 

- About

About page는 마우스에 반응하는 효과를 몇 가지 넣어 만들었다.

그리고 이후 다른 페이지에서도 공통으로 적용되는 사항이지만 IntersectionObserver를 이용해 각 요소들이 viewport에 들어왔을 때 하나씩 나타나도록 구성하였다.

그리고 Resume 페이지 또한 이 페이지에서 접근할 수 있다.

Resume 페이지에는 다운로드와 프린트 버튼을 만들어두어 이 페이지에 방문하는 분들이 내 이력서를 편하게 가져갈 수 있도록 하였다.

 

- Project

프로젝트 페이지는 정보 전달의 용도로만 만들었기에 특별한 효과를 넣지는 않았다.

단순하게 컨텐츠와 오른편에 클릭하여 이동할 수 있는 버튼만 만들어두었다.

 

- Contact

컨택 페이지에는 이메일 링크드인 등과 연결되는 버튼과 직접 메세지를 보낼 수 있는 다이렉트 메세지 기능을 만들어뒀다.

다이렉트 메세지는 nodemailer를 통해 사용자가 작성한 메세지를 나에게 보내고 사용자는 auto-reply를 입력한 메일로 받아볼 수 있도록 해놓았다.

 

후기

저번에 포트폴리오를 만들 때에도 느꼈던 것이지만, 역시 이런 페이지를 만들 땐 실제 코딩하는 시간보다도 어떤 내용을 어떤 크기로 어떻게 배치해야 할 지 고민하는 시간이 더 오래 걸리는 것 같다. 역시 디자이너가 괜히 따로 있는게 아니야...

 

그래도 확실히 저번에 한 번 만들어봐둔 덕분에 그런지 채울 내용은 준비가 되어 있어서 여행 중에 틈틈히 하는 것 만으로도 완성을 해낼 수 있었던 것 같다.

 

이 다음 프로젝트로는 조금 더 상업적인 용도의 페이지를 만들어보며 더 다양한 경험을 해봐야겠다. 물론 포트폴리오 페이지도 다 만든 이상 1순위는 구직이기 때문에 언제 시작해서 얼마나 걸릴지는 알 수 없지만 적어도 구상은 지금부터 꾸준히 해놔야지!