01. 개인 포트폴리오 프로젝트 구상 시작하기

 

•  2번째 포트폴리오

 

이전에도 제 포트폴리오 웹사이트를 만들어본 적은 있는데 당시 완성도가 마음에 들지 않았기에 과감하게 삭제했었습니다. 이번에는 이전보다 본격적이고 체계적으로 포트폴리오를 제작해보려고 합니다. 

 

 

•  다른 개발자들의 포트폴리오는?

 

다른 프론트엔드 개발자들은 포트폴리오를 어떻게 만들었는지가 궁금해서 찾아보았습니다. 당연한 이야기지만 구글링을 통해 나온 포트폴리오(SEO에 상당히 신경 썼겠죠)들은 대부분 퀄리티가 좋았습니다. 정말 감탄이 나오는 포트폴리오도 적지 않더군요. 이렇게 전반적으로 쓱 훑어보니 최근의 프론트엔드 개발자 포트폴리오 트렌드는 어떠한 것인지도 감이 왔습니다. 

 

• 한 페이지에서 다 보여줌
• 상단 및 사이드 네비게이션 바를 통한 부드러운 섹션 이동
• 좌우 여백을 충분히 줘서 중앙 컨텐츠에 집중
• 디자인과 애니메이션에 공들인 경우도 多

 

그리고 가장 좋은 포트폴리오는 여러 가지 의미로 친절한 포트폴리오인 것 같다는 생각이 들었습니다. 

 

 

•  피그마로 디자인 구체화

 

이전에 만들어보았던 포트폴리오는 구체적인 도안 없이 곧바로 개발을 시작했었습니다. "즉흥"과 "감"에 맡긴 거죠. 그런데 디자인과 UI를 확정하지 않은 채로 개발을 시작하니까 시각적으로 마음에 들지 않는 부분이 많았고, 개발하면서 이를 하나하나 조절해서 맞춰보는 것이 굉장히 비효율적이라는 생각이 들었습니다. 그래서 이번에는 그냥 피그마로 아예 모든 화면을 구체화하고 확정한 후에 개발을 시작하려고 합니다.

 

 

•  진행 상황

 

일단 각 카테고리에 어떤 요소들이 필수적으로 들어가야 하는지 파악해야 합니다. 그래서 디자인적 요소는 배제하고 전체적 틀부터 잡기 시작했습니다.

 

 

 

마치 대학 다닐 때 급조한 PPT를 보는듯한 느낌이 듭니다.

물론 계속 수정되고 추가되겠지만 현 상황에서는 개선할 부분이 정말 많다고 느껴집니다. 

 

사실 프론트엔드 개발자의 업무 영역은 UI/UX의 관점이 아니라면 순수한 심미적 요소만을 위한 디자인의 영역까지 현업에서 다룰 일은 드물 거라고 생각하는데요. (물론 디자인 감각까지 있으면 시너지 효과로 개인의 역량 자체는 크게 높아질 것입니다.) 저는 디자인적으로 심미적인 무언가를 보는 것을 정말 좋아하는데 그러한 걸 만들어내는 감각은 그 정도가 아닌 것 같아 디자인도 취미 삼아 가볍게 배워볼까 고민했던 시기도 있습니다.

 

개인적으로 직접 깎아 쓰는 것을 더 선호하는데(그게 제 포트폴리오라면 더더욱) 전문적으로 디자인된 요소들을 손쉽게 활용할 수 있고 사람들 또한 그 방향으로 많이 간다면 제가 너무 돌아가는 것 아닌가 싶기도 하고..  하지만 포트폴리오의 특성상 이런 방향이 좀 더 의미가 있다고 생각하기에 이번까지는 이렇게 하겠습니다.😉

 

그리고 피그마에서도 리액트에서와 같이 컴포넌트 기반 설계를 하면 더 효율적일 것 같습니다. 이 부분은 제가 포트폴리오를 만들어가면서 알아봐야겠지요. 

 

 

 

+) 기술 스택 로고에 대한 이야기

포트폴리오에 넣으려다가 알게 된 기술 스택 로고 관련 이야기들입니다. 

 

1. CSS 로고

 

 

최근 새로 리뉴얼된 CSS의 공식 로고입니다. 개인적으로는 이전 로고보다 훨씬 마음에 드는군요.

기존의 JS, TS 로고와의 시각적인 통일성도 어느 정도 고려한 느낌이 납니다.

 

이 보라색(#663399)에는 슬픈 사연이 있습니다. 저명한 CSS 전문가인 에릭 마이어의 딸 레베카가 지병으로 인해 어린 나이에 세상을 떠났고, 그녀가 생전에 가장 좋아했던 이 색은 그녀를 기리기 위해 CSS에 공식적으로 rebeccapurple이라는 색상명으로 등록되었습니다. 이번 공식 CSS 로고 메인 컬러로 채택된 이 색에는 이러한 사연이 담겨 있습니다.

 

 

 

 

에릭 마이어의 개인 웹사이트입니다. 저 3번째 책의 표지에는 굉장히 많은 의미가 담겨있을 것 같군요. 감정이란 것은 때로는 이성만으로는 도달할 수 없는 중요한 가치를 창출하는 것 같습니다. 

 

2. CSS Modules 로고(?)

 

 

... 이 로고는 아무리 봐도 누군가가 장난으로 만든 거 같은데 공식 로고인 줄 착각하고 있는 사람들이 적지 않은 것 같습니다. 그 이유는 레딧에서의 한 유저가 재미로 작성한 글 때문일 가능성이 높습니다. 본문에는 이 로고 이미지만 올려놓고 제목은 "The Official CSS Modules Logo"로 써놓았더라고요.🙄

 

3. Javascript 로고(???)

 

 

로고를 보자마자 무언가 위화감을 느끼셨나요? 그렇습니다. 사실 저 로고는 자바의 로고이죠.

 

이 이미지는 전에 재밌어 보여서 저장했었던 것인데 이번에 피그마로 디자인 구상할 때 기술 스택 페이지에 넣을 뻔했습니다. 어쩐지 계속 묘한 위화감이 느껴지더라고요. 다행인 건 바로 알아채고 기존의 자바스크립트 로고로 수정했습니다.