[Next14 + Netlify] 나를 소개하는 홈페이지 만들기 (2)

어설프게 만들고 싶지 않다. 하지만 할 수 있는 부분의 한계는 명확했기에 할 수 있는 부분과 하지 않은 부분을 명확하게 구분할 필요가 있었다.

 

1. 어느 기능까지 구현/표현할 것인가?

2. 디자인은 무엇을 참고할 것인가?

3. 호스팅은 무엇을 이용할 것인가?

 

'나를 소개하는 홈페이지를 만들기'를 주제로 나를 어디까지 소개할 것인가.

빠른 시간 안에 홈페이지를 완성하고 싶기 때문에 우선은 노션에 적어뒀던 개인 이력서를 옮기는 방향으로 목표를 정했다. 추후 필요하다면 기능을 추가하는 방식으로 정해도 되니, 1차부터 마무리 짓기 위한 선택이다.

 

노션에 적어뒀던 이력서를 보니, 세부 페이지 없이 한 페이지에 진행했던 프로젝트와 그 내용을 적어뒀었다. 세부 페이지를 뜯어서 만드는 것이 좋을까 고민 끝에 메인 페이지('/'), 소개 페이지('/about') 두 가지로 진행하기로 했다. 추후 블로그를 적건, 백엔드서버를 띄워서 실배포를 진행할 사항을 고려해 메인페이지를 소개 페이지로 반영하지 않았다.

 

얼추 기획이 되었으니 디자인을 생각해봐야하는데, 머리 속에서 페이지가 즉시 그려지지 않으니 레퍼런스를 찾아야했다. 토스, 당근, 카카오, 라인, 네이버 등의 기술 블로그를 보면서 전체적인 layout를 구상했다. 특히 이력서 페이지는 노션과 동일하게 진행하고 싶지 않아 핀터레스트에서 참고했다.

핀터레스트 - 이력서 디자인

 

다양한 이력서가 있었고, 제일 깔끔하고 맘에 드는 이력서를 참고하면 된다. 추가적으로 반응형 디자인도 고려해야하니 pc버전의 디자인만 생각하지 말고, 반응형으로 바꿀 수 있는 디자인으로 선택해야 한다.

나는 이 이력서를 선택하여 진행했다.

 

이 부분은 그냥 추가적인 부분인데, 어느 정도 레이아웃과 디자인이 그려졌으면 본인이 사용하고 싶은 색상을 정해서 얼추 맞는 생각을 고른다. 디자이너처럼 엄청난 디자인을 보여줄 필요는 없지만, 그래도 프론트엔드 개발자인데 기본적인 센스는 있어야 하지 않을까- 라는 생각에 조금 신경써봤다.

나는 초록색이 좋아서 그냥 이쁜 초록색을 정한 다음아래 사이트에서 정해주는 조합에 충실히 따랐다.

https://coolors.co/

 

 

마지막은 호스팅 부분인데 Netlify냐 Vercel이냐 고민이였다.

해당 내용에 대한 좋은 설명은 이 분이 잘 적어주셔서 해당 링크 공유한다.

https://www.taeny.dev/javascript/nextjs-with-deployment-platform

🚀 nextJS 뭘로 배포할까? (Netlify, Vercel, Github page)

물론 vercel로 시도해본 경험이 있어 그냥 netlify를 선택했으나, 추후 블로그 기능을 추가할 계획도 있기에 최대 12개까지 빌드가 가능한 vercel이 아닌 netlify로 적용하고자 했다.

 

혹시 유료 요금제로 사용할 의향이 있다면 2024년 6월부로 가격이 낮아진 요금제가 적용된다하니 참고하면 좋을 것 같다.

https://vercel.com/blog/improved-infrastructure-pricing

Improved infrastructure pricing – Vercel