[Side Project <Portfolio Renewal>] #1. 고민의 흔적들(?)
포트폴리오 리뉴얼 작업을 하기 전에, 먼저 처음 포트폴리오 사이트를 만들 때 내가 고민했던 흔적들을 포인트로 집어서 하나씩 적어볼까 한다.
기술 스택
- Front-end : React, styled-components
- Routing : react-router, react-router-dom
- Transition : react-transition-group
리액트를 기반으로 당시에 가장 익숙했던 styled-components로 스타일 작업을 진행했다. 라우팅은 React와 항상 같이 사용하는 react-router를 사용했다. 마지막이 중요했는데, 라우팅 되는 과정에서 특정한 전환 애니메이션이 있으면 좋겠다는 생각이 들었다. 다양하게 찾아본 결과 react-transition-group이라는 라이브러리를 사용하면 특정 class 이름을 사용하여 라우팅 사이에 효과를 줄 수 있다는 것을 알게 되었고, 어렵게 이를 도입해서 나름의 차별점(?)을 만들어 보았다.
백엔드 없이 제작
백엔드의 필요성을 느끼지 못했다. 애초에 나의 결과물과 커리어와 같은 단순한 정보들만 있다 보니 다룰 데이터도 적었고, 백엔드 코드까지 작성할 시간이 되지 않았다. 대신 JS코드 자체가 나름의 DB와 백엔드 역할을 해주었는데, 이는 나의 다른 고민과도 연결되는 부분이어서 아래에 자세히 적어보도록 할 것이다.
스크롤 애니메이션 및 나름 직관적인 네비게이션 바
UI/UX적인 측면에서 특별함과 동시에 직관성을 넣고 싶었다. 그래서 처음 랜딩 했을 때는 나름의 압도적인 그라데이션 애니메이션을 주었고, 주 내용은 스크롤을 통해 볼 수 있도록, 약간은 커튼을 걷어서 공개하는 듯한 느낌의 새로운 경험을 만들고자 하였다. 하지만 그 이후에는 명확하게 분류된 내용을 볼 수 있게 네비게이션 바를 큰 글씨와 함께 제공하는 것이 포인트였다.
한/영 전환
나름 차별성을 집어넣은 또 다른 부분이다. 텍스트가 많은 Intro와 Projects에서 한/영 전환 버튼을 만들어 보았다. 다크모드 전환과 같은 느낌으로 제작해보았는데, 모든 본문 내용에 대해 두 가지 버전을 작성한 후 이를 모듈화 된 버튼에서 전환 가능하도록 만들었다.
코드상에서 신경 쓴 부분은, 각 페이지에서 한영 전환 State 관리를 다르게 할 수 있도록 커스텀 setLang 함수를 prop으로 넘길 수 있게 만든 부분이다.
또한 changeLang이라는 함수를 따로 export해서 lang state에 따라 jsx 내용이 바로바로 변환 될 수 있도록 제작했다.
기술 스택 시각화
이 포트폴리오 사이트에서 가장 신경을 많이 쓴 부분 중 하나이다. 한/영 변환과 더불어 모듈화에 가장 신경을 많이 쓴 부분이기도 했다. 아래 사진을 보면, 기술 스택을 보여주는 Skills 페이지에서 각 기술 스택이 숙련도와 아이콘을 보여주는 각각의 컴포넌트로 시각화 되고 있다. 이를 제작할 때 단순하게 기술 스택 리스트를 쭉 뽑고 한 파일에서 map 함수를 이용해 나타내기 보단, Skill 컴포넌트 provider 함수를 제작해서 원하는 스킬에 맞는 아이콘과 색깔로 자동으로 컴포넌트를 생성해줄 수 있도록 만들었다. 이렇게 제작하다보니 Skills 페이지에서만 이 컴포넌트를 사용하는 것이 아닌, Projects 페이지에서도 사용된 기술 스택을 보여줄 때 새롭게 생성할 수 있었다. 컴포넌트의 재사용 적인 측면에서 잘 작성된 코드였다고 생각한다.
가짜 DB/API
위에서 언급한 '백엔드를 없애는 것'을 대체하는 부분이다. 프로젝트 파일 중에서 Lists라는 폴더가 있는데, 나는 이 포트폴리오에 들어가는 대부분의 내용을 해당 폴더의 파일들 속에 JS 객체 Array 형태로 집어 넣었다. 그리고 API에서 json 객체를 전달하는 것과 비슷한 형식으로 각 객체를 구성하여 실제 서버에서 API를 불러오듯이 구현하였다. 이러한 방법의 장점은 내가 나중에 내용을 업데이트 할 때 오로지 List에 있는 파일들만 건드려도 된다는 점이었다.
실제 개발할 당시의 내 고민들을 하나씩 되짚어가면서 글을 적어보았다. 아키텍쳐와 디자인에 대한 나의 고민들을 다양하게 녹여내고자 노력한 결과이다보니, 단순히 디자인을 받아서, 혹은 클론 코딩으로 진행하던 이전의 개발 과정과는 확실히 차별화 된 프로세스가 있었던 것 같다. 물론 현업에서의 시스템이나, 훨씬 다양한 경험을 가진 개발자 분들의 고민과는 레벨 차이가 많이 있을 것이고, 앞으로 하나하나 제대로 배워가야 할 부분인 것 같다. 그래도 이 고민 과정은 나에게는 큰 의미가 있었음은 확실하다. 남은 부분을 이번에 새로 채워가면서 또 다양한 고민을 이 곳에 집어 넣어 볼 예정이다.
