개발자를 목표로 공부만하며 달려온지도 1년이란 기간이 넘어서고 있다.
공부하던 중에도 취업에 도전해볼까 했지만, 당장 웹이라는게 어떻게 작동하는지, 클라이언트와 서버간의 통신은 어떻게 이루어지는지도 모르는 데 과연 업무에 적응할 수 있을까라는 의문이 들었다. 그래서 내가 한없이 부족하다고만 느껴졌고, 부족한 지식을 채우기 급급했었다. 공부하는 도중 모르는 것을 학습하고, 부가적으로 또 모르는 것을 찾아 공부하고의 반복..!
그렇게 달려오다보니 웹과 한 발자국 가까워 짐을 느끼는 때가 있었다.
새로운 것을 배울 때마다 막막하기만 하던 내가, 현재는 새로운 강의를 듣는 게 즐거워 졌다. 이로써 이제는 취업에 도전해봐도 되겠다는 자신감이 생긴 것이다.
그래서 이제야 드디어 드디어 나의 PR을 할 수 있는 자기소개 포트폴리오 만들기를 시작하려고 한다.
#1 그래서 포트폴리오를 어떻게 만들지?
당장 포트폴리오 제작에 들어가려고 하니, 그동안 서치를 통해 다수의 개발자 포트폴리오를 스쳐가듯 봤었던 것이 생각났으나 막상 어떤 방식으로 직접 만들어야할지 막막했다.
깃허브나, 유튜브, 구글 등을 탐색한 결과 세 가지로 나뉘는 것 같았다.
PPT자기소개서, 직접 만드는 웹페이지형 자기소개, 노션.
일단 PPT자기소개서는 글로써 화려하게 풀어낼 경력이 없는 신입 개발자이기 때문에 패스.
직접 만든 웹페이지 또는 요즘 트렌디하게 사용되는 노션 중에 선택해야했다.
두 가지 방향으로 다른 개발자들이 만든 다수의 자기소개서 포트폴리오를 보던 중 느낀점은
1. 직접 만드는 웹페이지 - 아무래도 형식 없이 자유롭게 만들 수 있다보니 뭐를 어떻게, 뭐부터 봐야 할 지, 정리되지 않는 느낌이 강했다. 또 화려한 퍼블리싱을 하다보니 UI는 화려하지만 막상 내용은 별게 없어 허무한 느낌을 줄 수도 있겠다는 생각이 들었다.
2. 노션 - 형식이 갖춰져 있어 보기가 편했지만, 글씨체나 이벤트로 좀 더 가독성을 줄 수 있는 UI와 함께라면 좋을 거 같다는 생각이 들었다.
결론적으로, 노션과 웹페이지 모두 아쉬운 부분들이 있었기에 이를 보완하고자 노션의 장점을 살린 웹페이지를 만들어야겠다고 생각했다. 노션과 비슷한 테마로 친숙한 사용성과 형식을 갖추고 있으면서도, 가독성을 줄 수 있는 이벤트를 더한 웹페이지! (내 이름을 따 이름은 예션이다, 하하.)
#2 콘티를 만들어보자
일전에 기업소개 웹사이트 제작을 진행할 때 Figma툴을 이용해 콘티를 짰었다. 이번에도 피그마를 활용해 콘티를 만드려고 하는데 그 전에 아이패드로 대략적인 스케치를 해보았다.
(부끄러운 스케치이니 그만 알아보자.)
일단 필수적으로 들어가야할 항목을 추려보았다.
- 자기소개 글
- 프로필
- 보유 스킬 및 자격증
- 경력 및 외부활동
이러한 항목들을 바탕으로 서버가 따로 필요없는 정적인 웹페이지로써 심플하게 구축할 수 있다고 생각했다. 때문에 이번에 사용할 도구는 다음과 같다.
서비스 개발에는 Next.js 프레임워크,
반응형 웹을 위한 퍼블리싱은 TailwindCSS,
배포 및 호스팅은 Vercel,
콘티를 위한 디자인 툴은 Figma.
#3 피그마
사용할 도구와 내용이 정해졌으니, 피그마 툴을 이용하여 레이아웃을 제작해보려고 한다. 일단 이번 포트폴리오를 제작함에 있어 꼭 포함해야 하는 요소들을 아래와 같이 정리해보았다.
- 노션의 느낌을 낼 수 있는 테마
- 퍼블리싱을 이용하여 중요한 키워드, 보유 스킬 등을 강조하기
- 편의성을 위해 Nav bar를 만들어 스크롤 이벤트 추가하기
- 로고는 기존 노션 로고의 'N'자를 내 이름의 'Y'자로 수정하기
디자인 기획은 이렇게 완성되었다. 기술 스택 부분은 아이콘이 지저분하여 텍스트 형식으로 변경되었다.
#4 개발과 배포
개발 내용에서 특징적인 기능들과 함께 설명하자면 아래와 같다.
- Next.js로 개발했고, 다이내믹 라우팅을 이용하여 프로젝트의 상세 페이지와 연결했다.
- 상세페이지에는 gif 이미지를 통해 프로젝트의 기능을 한 눈에 볼 수 있도록 편의성을 높였다
- 마지막 단락에서는 키워드 대신 Keypicture(나를 표현할 수 있는 사진)를 포함시키면서 나의 장점을 이미지와 동시에 나타내려 했다.
- 배포는 Next.js의 짝꿍인 Vercel을 이용했고 배포도 손쉽게 진행되었다.
솔직히 포트폴리오는 기능 구현이 주가 아니었기에 어렵거나 막히는 부분이 없었다.
오히려 제일 어려웠던 것은 디자인이었다. tailwindCSS를 이용해서 간편하게 끝낼 수 있었지만,
반응형 디자인까지 계산하는 것은 역시나 힘든 일임을 한 번 더 느꼈다.
그래도 드디어 나의 포트폴리오가 완성되었다!
이제 남은 것은 마지막 과정인 "#5 취업".. 열심히 하겠슴다..❤️🔥
