# 사용 기술
- typescript
- React
- Redux (redux/toolkit)
- Scroll Magic
- email js
# 소요 기간
약 5일, 초반 세팅(tsconfig, eslint, babel 설정 등)에 하루 정도 시간을 소요했고,
나머지 개발 관련 헬퍼(자주 사용하는 util 함수, 스타일 가이드라인, 개발에 필요한 커스텀 훅 등 미리 작성)구성에 약 하루 더 시간을 소요했다.
# 동기
먼저 어디 가서 보여줄 나만의 포트폴리오 사이트가 필요했다. 당시 내가 원했던 포트폴리오 사이트의 최소 스펙은,
1. 우선 나에 대해 잘 표현할 수 있고
2. 내가 지금껏 해온 프로젝트들을 포괄적으로 보여줄 수 있으며
3. 포트폴리오 사이트를 통해서 내게 컨택을 할 수 있는 정도였다.
여기에 개인적으로 스크롤 인터렉션이 있었으면 좋겠다는 생각이 들어, 그에 맞추어 개발 계획을 수립했다.
당시 나는 본업과 사이드잡 두가지 일에 바쁜 상황이었기 때문에 최소 스펙으로 잡고, 개발 기간은 최소화 해야 했다.
# 결과
약 5일동안 짬내서 만들어 완성도는 높지 않으나, 그래도 기반을 만들어 두었다 생각하고, 계속 디벨롭 시키면 포트폴리오 사이트로 나쁘지 않을 것 같다는 생각이 들었다. 아래는 그 결과물이다.
# 특징
내가 만들고자 했던 포트폴리오의 제일 주요한 특징은 스크롤 인터렉션이 일어난다는 것이었으며, 따라서 대부분의 페이지 컴포넌트들은
Scroll Magic 라이브러리의 Scene 과 Controller 를 이용하여 스크롤 이벤트를 처리하게끔 했다.
사실 스크롤 인터렉션은 보다 최근에 나온 Scroll trigger + gsap 조합이 더 핫하고, 직접 사용해 본 결과 제공하는 기능도 많고 성능도 괜찮았으나, 요구사항을 달성하기 위해서 scroll magic 라이브러리도 충분했기에 사용하지 않았다.
Scene 과 Controller 를 이용하면 스크롤 이벤트 마다 그 정도를 알려주는 progress 변수를 컴포넌트 내부에서 참조할 수 있는데, 이 progress 변수와 css transform 을 결합하여 parallax scroll, fake scroll 등을 구현하였다.
또 처음 개발할 때 컬러 관련해서 고민을 많이 했는데, 디자인 감각이 뛰어나 컬러 파레트를 만들 수 있는 것도 아니고 해서 Canva 라는 사이트를 이용하였다.
찾다 보니 마음에 드는 컬러 파레트가 많아서, 이를 모두 표현할 수 있도록 Redux 를 이용하여 테마 컬러를 선택할 수 있게 하였다.
사실 여러 컬러 파레트를 대응해야 하는게 쉽지만은 않았다. 어떤 컬러 파레트의 색 조합은 잘 어우러지지만, 다른 컬러 파레트에서의 색 조합은 어색한 경우가 잦았고, 폰트 컬러 또한 특정 컬러 파레트에서는 글씨 색이 아예 묻혀버리는 현상도 발생했었다.
괜히했다라는생각이들었다.
여러 시행 착오 끝에 그나마 볼 만한 색 조합을 구성하였고, 이를 커스텀 훅으로 묶어 개발 할 때는 신경 쓰지 않도록 작성하였다.
About 파트에서는 fake 스크롤링을 구현하여, 스크롤 할 때 마다 배경사진이 바뀌게 되는데, 하나의 img 태그에 src 를 변화시키는 방법으로 구현하니 최초 페이지 로드 시 이미지를 로딩하는 시간 때문에 원하는 타이밍에 이미지가 바뀌지 않는 문제가 발생했다.
개발자 도구의 Network 항목을 살펴보니 하나의 img 태그에 src 를 변경하는 방식으로 구현했기 때문에 src 가 바뀔 때 마다 이미지를 로드하는 비효율이 발생한 것을 확인할 수 있었다.
따라서 기존 이미지들을 먼저 로드 및 캐싱하고, 컴포넌트를 교체하는 방식으로 구현하였더니, 해당 이슈는 해결되었다.
Works 파트에서는 시간상 지금껏 해온 프로젝트들을 간략히 나열하는 정도로만 구현하였는데, 프로젝트를 동영상으로 촬영하여 업로드하고자 했던 경우 react-player 라는 라이브러리를 활용하였다.
마지막으로 contact 파트는 email js 를 연동하여 본인의 연락처와 내용을 입력하면 필자의 메일로 전송되도록 하였다.
# 느낀점
구글에서 해당 사이트 검색이 되지 않는다.
만든 지 일주일 가까이 지났는데, 아직 구글 봇이 크롤링을 하지 못한 것 같다.
나름 신경써서 메타태그들을 구성하고, search console에 제출도 되었기 때문에, 조금 더 기다려야 할 것 같다.
아니면 내가 놓치고 있는 부분이 있는지 seo 관련하여 더 알아봐야 할 것 같다.
우선 구글이 크롤링을 잘 하는 이 블로그에 링크를 남겨 두었으니, 조만간 크롤링이 되지 않을 까 싶다.
아무튼 짧은 시간이라도 일단 사이트를 만들 고 보니, 만들길 잘했다는 생각이 든다.
회사로 치자면 명함이 생긴 기분...(?)
더 어필할 수 있는 명함을 보여주기 위해 지속적으로 프로젝트를 발전시키려 한다.
'WEB > React' 카테고리의 다른 글
| [Scroll Magic] Failed to execute removeChild on Node 에러 해결 (0) | 2021.11.01 |
|---|
댓글