📚 서론

코딩온에서의 첫 팀프로젝트 [Beauty Lab - 화장품 추천 서비스] 가 종료되었다.

• Github repo
• Google Slide
• Velog 정리글

끝나고 회고도 마쳤으나 늦기전에 바로 앞으로 진행될 나의 프로젝트들을 포트폴리오로 정리할 수단을 만들어야겠다는 생각이 들었다. 그래서 개발자라면 한번씩은 진행해봤을 나만의 포트폴리오 개인 사이드 프로젝트를 진행하려고 한다.

📘 사전조사

포트폴리오는 나를 그저 알리는 수단보다 무엇을 개발해왔고 어떤 기술스택을 사용했고 어떤 경험들을 알리는 수단이다. 이를 명확히 표현하기 위해 사전조사부터 시작했다.

📗 포트폴리오 구성

1. 면접관 분들이 관심있어 할 내용을 우선적으로 배치하기 위해 Work (경력) - Project(프로젝트들) - Share(블로그, 유튜브) - Education(교육) 순서로 배치한 사례 (정현수님의 포트폴리오 관련 velog) 를 찾아봤다.

   해당 포스트에서는 포트폴리오 역시 다른 사람이 읽을 문서이기 때문에 다른 사람으로부터 피드백을 받는 것이 큰 도움이 된다고 한다.
   

2. 최덕경 웹 개발자 포트폴리오
   포트폴리오가 원페이지 웹사이트의 형식을 띄고 있고 헤더의 메뉴들이 본문의 특정 위치로 y값을 바꿔주는 것이 인상적이다. 반응형과 적절한 애니메이션들이 적용되어 있다.

   구성

   나를 소개하는 짧은 글 - About Me - Skills - Archiving(github, blog) - Projects(제목, 기간및 참여인원, 결과와 desc, Readme, 기능, 깃허브 레포주소, deploy 주소, 사용한 스택을 fe, be, db, deployment 측면에서 정리) - Career

   plus)

   최덕경 님의 포트폴리오를 개발자 모드로 확인중 클래스명이 앞은 인식할 수 있는 클래스명, 뒤는 해시값이 붙은 형태가 있는 것을 확인했다. react 컴포넌트 스타일링 방식에 Sass, CSS Module, styled-component 방식이 있는데 이런 방식을 통해 CSS 클래스가 중첩되는 것을 완벽히 방지할 수 있다. 그런데 최덕경 님도 중첩을 방지하는 조치를 취해서 뒤에 해시값이 붙은 것 같은데 어떤 방식을 사용한 것인지 궁금해져서 찾아봤다.

   

   현재 react 에서 styled-component 방식을 사용하여 컴포넌트를 불러와 사용시 나타나는 클래스명이다. 당연히 클래스 이름을 지정한 적이 없으니 같은 컴포넌트를 불러올 때마다 새로운 해시값이 클래스명으로 붙는 것 같다. 이 방식은 아니다.

   그러다 벨로퍼트와 함께하는 모던 리액트 에서 확인결과 최덕경 님은 CSS Module 을 사용하여 포트폴리오 페이지를 만들었고 CSS Module 를 사용하여 SectionTitle.moudle.css 를 임포트, .text 라는 클래스를 사용한 결과 SectionTitle_text__(해시값) 이 붙었음을 알게 되었다. 포트폴리오 내용을 참고해볼때 이 페이지는 CSS Module 과 sass 를 통해 만들어졌고 react 는 Next.js 를 통해 사용한 것으로 추측된다. 갑자기 궁금한 점이 생겨서 길이 샌 느낌이다. 그래도 모르는게 나오면 바로바로 찾아봐야 한다.

3. 박은지 프론트엔드 개발자 포트폴리오
   마찬가지로 소개글로 시작한다.
   본인에 대한 간략한 소개 - Skills(process bar) - Projects (프로젝트 이름, desc, period, tech, work, code, demo 표시)

4. 이보아 개발자 포트폴리오
   진짜 포트폴리오 끝판왕이라는 느낌이다. 어떻게 이렇게까지 만들수 있을지라는 생각이 들면서 디자인적인 능력도 굉장하신 것 같다.
   애니메이션, 인터렉션 기능에 굉장히 신경을 많이 쓴 포트폴리오이며 웹, 모바일, 사이드 프로젝트들을 분리하여 설명하고 있다.

5. 이정민 개발자 포트폴리오
   블로그, 포트폴리오 보느라 시간가는줄 몰랐다. 대박인데..
   구성을 둘째치고 모든 개발 프로세스, 대외활동을 기록하여 관리했다는 점이 눈에 띈다. 취뽀 이후 프로젝트는 회사에 관한 업무라서 그 이전까지 취준하던 중 수행했던 모든 프로젝트가 정리되어 있는 느낌이었다. 스크롤 인터렉션이 적용되어 있고 마찬가지로 구성이 나를 소개, Strength, Career, Activity , Projects 등의 구조로 이루어져 있다.
   

📗 특징

제로베이스에서 본 내용을 요약 정리한 내용이다

1. 사이트명 : 본인의 이름 또는 닉네임으로 설정
   사례중 볼때 vercel 이라는 것도 netlify 처럼 배포를 도와주는 사이트로 보인다. netlify 를 계속 사용할 경우에도 마찬가지로 domain 변경이 가능했으니 이름을 설정하는 것이 어려워 보이지는 않는다.

2. 자기소개
   길 필요 없이 자신의 개발 철학, 목표등을 말하며 간단하게 끝낸다. 또한 웹페이지 내 본인의 캐릭터, 타이포그래피 등의 효과를 활용해 이목을 집중시킬 수 있다.

3. 프로젝트
   포폴의 큰 목적으로 프로젝트 소개가 있다. 포트폴리오 속 많은 경험을 토대로 면접이 진행될 수 있다.

   • 프로젝트 소개 : 목적, 내용, 기간, 주요 기능 상세히 기술, 흐름 및 회고까지 있을시 더 좋다.
     이번에 진행했던 화장품 추천 사이트 [Beauty Lab] 팀 프로젝트의 경우 흐름에 관해서는 정리를 하지 않았던 것 같다.
   • 기술 스택 : 기술을 선정한 이유 및 적용한 부분 필수로 기입. 기술 스택은 자바스크립트 같은 큰 기술 위주로 작성하고 세부적인 라이브러리, 프레임워크도 포함하는 경우가 많다고 한다.
     이번 프로젝트에서더 마찬가지로 sass 를 선정한 이유, 애니메이션을 적용한 각 요소별 JS 애니메이션과 css 애니메이션을 사용한 이유등을 되도록 설명하려고 노력했었다. 비슷한 느낌이라 생각한다.
     
   • 기여도 : 자신의 기여도를 퍼센트 및 그래프를 활용해 수치로 명확히 작성. 코드 작성 외에도 버그 수정, 기능 개선 등 프로젝트 전 과정에서 본인의 역할을 고려해 작성한다고 한다.

📗 주의점

• 웹사이트 디자인 신경쓸것
• 무료 서브 도메인 사용 자제
  • freenom.com / herokuapp.com 같은 무료 서브 도메인 사용을 비추천한다고 한다.
  • 원래 netlify 같은 사이트로 배포후 사용하려 했는데 악성코드같은 잠재적 위협과 언제든 회수될 수 있다는 단점이 있기에 커스텀 도메인을 구매해서 연결을 추천한다.
• 라이브 프로젝트 링크 버튼 필수로 추가

📘 디자인

피그마를 통해 하루에 걸쳐 포트폴리오 초안을 완성했다. 다른 크루님들과 리더님께 피드백을 요청하여 개선후 작업을 시작하려 한다.

초안	피드백 이후

다른 크루님들과 루나 리더님께 피드백을 받았다.

크루님들은 주로 디자인적인 측면에서, 리더님은 면접관의 입장에서 피드백을 주셨다.

전자의 경우 눈에 더 잘띄는 색상과 색의 조합, 구조, 가시성 측면에서의 의견과 프로젝트별 사용한 기술의 경우 영역에 따라 어떤 기술을 사용했는지 명시하는 것이 좋을 것 같다는 피드백을 받았고
후자의 경우 모바일 환경에서 볼 수 없는 css 가상 엘리먼트의 사용 자제, 프로젝트의 경우 전체적인 내용보다 자신이 프로젝트에 기여한 바를 분명히 명시, url 로 포트폴리오 웹 페이지 링크를 받지 않는 경우도 있으니 서류로 제출해야 하는 경우 어떻게 할 것인지 대처, 그리고 tech stack 의 경우 그냥 어떤 기술들을 쓸 수 있는지보단 이 기술들을 사용해서 무엇을 할 수 있는지 명시적으로 드러내는 편이 좋을 것 같다는 소중한 피드백을 받았다.

다시한번 피드백 주신 크루님들과 리더님께 감사한 마음이 든다. 확실히 혼자서는 생각하기 어려운 부분이었다. 적극적으로 피드백을 수용해서 포폴을 수정하고자 했다.

아직 Skills 에서 기술들을 사용해서 무엇을 할 수 있는지 반영하는 부분과 반응형을 적용했을때 나머지 태블릿, 모바일 환경에서 어떻게 화면을 구성할지와 Project 에서 본인이 프로젝트에 기여한 바를 분명히 표시하는 부분에 대한 피그마 작업은 하지 못한 상태이다.

📔 레퍼런스

정현수님의 포트폴리오 벨로그
신입 개발자를 위한 프론트엔드 포트폴리오 웹사이트 모음 - 제로베이스
벨로퍼트와 함께하는 모던 리액트
썸네일 메이커 - oneook.log

📓 결론

• 포트폴리오 작성시 전체적인 흐름은 자기소개 - Skill - Projects - Career - Education(Activity) 순서로 진행

• 웹 디자인 신경쓰고 프로젝트 완료시 추후 도메인 구입해서 사용 (도메인 자체 비용은 1년에 만원대도 나왔던 것 같다), 사이트명에 내 이름 넣기

• 프로젝트는 흐름, 자세한 설명, 시연 과정, 사용한 기술 스택, 라이브 링크 등을 첨부

• 추가로 oneook 님이 토이 프로젝트로 만드신 썸네일 메이커 링크 : https://wonkooklee.github.io/thumbnail_maker/