[ 자기소개 포트폴리오 : 유리창 너머의 세계] 기획 및 디자인

포트폴리오 제작의 계기

• 때는 바야흐로 9월의 어느 날, 어느정도 자바스크립트 개발자로서 자신이 붙어서, 이제 슬슬 취업 생각이 들던 참이었다.

• 자바스크립트는 물론 React에도 자신이 붙고, 타입스크립트나 Next.js, Recoil 등 최신 기술은 물론 Redux도 내가 원하는대로 자유자재로 다룰 수 있었다. 무엇보다 나는 CSS도 자바스크립트만큼이나 자유롭게, 또 빠르게 쓸 수 있어서 이 또한 강점이라고 생각했다.

• 문제는 아직까지도 제대로 된 포트폴리오가 없다는 점이었다.

• 사실 이전에 만든 포트폴리오와, Nest.js + 타입스크립트로 구현한 백엔드 포트폴리오가 있긴 하다. 백엔드는 제대로 각 잡고 배운 게 아니라 그럴저럭. 어느정도 만족할 수 있었지만, 프론트엔드 개발자는 도무지 만족이 되지 않았다.

• 그도 그럴 게, 디자인도 별로거니와 아무리 잘 봐줘도 남의 포트폴리오의 카피캣(Copycat) 이라는 생각밖에 들지 않았다.

• 그냥 개발자가 아닌, '실력있는' 프론트엔드 개발자를 목표로 한 이상 누가 봐도 와, 소리가 나올 정도의 포트폴리오가 없으면 안 된다고 판단했다.

• 다만 또다시 문제에 직면했다.

• 나는 디자인에 그야말로 문외한이었다. (아마 대다수의 개발자가 나와 같다고 생각한다.)

• 디자인적인 요소는 아무리 신경써도 디자이너기 아닌 이상 한계가 있다고 생각했다. 그렇지만 개발자로서 다양한 효과와 이펙트, 기술이 들어간 최신 트렌드 디자인을 따르면 그럴저럭 부족한 디자인을 커버할 수 있지 않을까.. 라는 생각이 들었다.

• 결론적으로는 디자인 실력 부족을 각종 효과와 트렌디한 디자인, 애니메이션 효과로 어느 정도 커버한 것 같다.

• 기술의 경우 처음부터 Next.js와 recoil으로 정해두었다.

• 각각 React와 Redux의 한계를 극복하고자 나온 기술이고, 이전에 포트폴리오를 제작하면서 느꼈던 좌절을 해결해줄 것 같았다.

• 이 또한 결론적으로 옳은 결정이었다고 생각한다. 자세한 내용은 아래에서.

• 애초에 신입이 경력 개발자보다 유리한 유일한 점은 처음부터 최신 기술로 중무장하고 필드에 뛰어들 수 있다는 점뿐이니, 신기술을 배우는 건 당연하다고 생각했다.

• 아래는 내가 디자인과 기술을 선정한 과정이다.

디자인

최신 트렌드의 디자인

• 우선, 일반적인 디자인으로는 도저히 승부가 나지 않을거라고 판단했다. (이미 잘하는 사람들 너무 많다)

• 그러던 중 "아예 최신 디자인 트렌드를 따르면 어떨까?" 라는 생각이 들었다. 아무래도 영어권이 이런 트렌드에 민감하니, 기존의 한국형 모던한 디자인과 확실히 차별점이 될 것 같았다.

• 그러던 중 [(유튜브) 2021 프론트엔드 최신 디자인]((https://youtu.be/5RluSnRPRbI?t=53) 이라는 영상을 접하게 되었다!!

• 그야말로 신세계였다. 내가 저걸 만들 수 있을까? 싶은 생각이 들 정도로 정말 기발한 트렌드가 한가득이었다.

• 그 중에 내 눈을 사로잡은 것은 글래스모피즘이었다.

• 위의 블로그에 따르면 글래스모피즘의 정의는 다음과 같다.

  • 투명도: 배경 흐림을 사용한 반투명 유리 효과
  • 물체가 떠 있는 다층 접근 망식
  • 흐릿한 투명도를 강조하는 생생한 색깔
  • 반투명 물체의 미묘하고 밝은 테두리

• 글래스모피즘을 사용한 사이트 예시는 다음과 같다.

• 내가 당시 판단하기에는 전부, css만으로도 충분히 구현이 가능한 내용이었다. 배경에 애니메이션을 넣으면 정말 예쁘게 비치겠다는 생각도 들었다.

• 결국 나는 글래스모피즘으로 주요 UI 구현하기 + CSS로 애니메이션 효과 구현하기 를 목표로 삼았다.

• 예시 1: 글래스모피즘을 사용한 15개의 웹디자인
  

• 예시 2: 글래스모피즘을 사용한 15개의 웹디자인
  

• 예시 3: '글래스모피즘' 구글 검색결과
  

• 예시 4: Decimal 웹사이트
  

기술

Next.js

• 위에도 언급했다시피 기술의 경우 처음부터 Next.js와 recoil, 그리고 타입스크립트로 정해두었으며, 그 이유는 각각 React와 Redux의 한계를 극복하고자 나온 기술이기 때문이었다.

• 감상을 간단하게 말하자면, Next.js는 확실히 React보다 개발하기 편했고, SSR도 알아서 해 줬으며, 타입스크립트와의 궁합이 React보다 좋다는 느낌을 확실히 받았다.

Recoil

• Recoil은 마치 useState훅을 쓰는 것만큼 너무너무 간편하고 쉬웠다.

• 이번 포트폴리오와 다음 고양이 게임에도 Recoil을 사용했는데, 불변성을 지켜주는 건 물론이고 간편하기까지 하니 쓰지 않을 이유가 없다고 생각했다.

• 여담이지만 나는 Next.js를 사용한 두 프로젝트(자기소개 포트폴리오, 고양이 게임) 에서 전적으로 Recoil의 state 기능만 사용했다. 그렇게까지 복잡한 상태관리가 필요없다고 판단했기 때문이다.

• 자기소개 포트폴리오에서는 이게 맞지만, 확실히 자바스크립트로 게임을 만드려니 로직이 복잡해져서 selector를 사용하는 게 맞겠다는 생각이 들었다(하지만 깨달았을 때는 너무 늦어버림)

• 다음 프로젝트 주제는 'Recoil을 제대로 사용한' + Nest.js로 단단한 백엔드 로직을 만든..! 이 되지 않을까 싶다 ㅎㅎ

Vercel

• Next.js를 만든 회사에서 나온 서버리스 배포 툴.

• 간단함이 장점이고, 무엇보다 공짜!! 라서 너무 좋았다.

• 빌드 과정에서 자잘한 에러가 있었지만 전부 내 잘못 or 제대로 refresh되지 않은 github 잘못이었고, 에러메시지도 친절해서 고치는 데 어렵지 않았다.

• 다음에는 구체적인 기능 위주로 포스팅을 해보려고 한다.