사이트를 만들게 된 이유

프론트엔드 개발자로서 기술을 정리하고 경험을 기록할 수 있는 개인 사이트를 만들어 보고 싶었습니다.

이 사이트는 단순한 기술 블로그를 넘어 포트폴리오로 활용 가능한 공간을 목표로 했습니다.
또한, 프로젝트 과정에서의 기술적 성장과 배운 점을 기록하고 사용자 피드백을 통해 지속적으로 개선할 수 있는 플랫폼을 직접 운영해 보고자 했습니다.

기획

개인 사이트 제작을 위해 기획부터 시작했습니다.
이 사이트를 통해 기술 역량을 어필할 수 있는 구조를 만들고자 했고, 이를 위해 크게 메인 페이지, 블로그 페이지, 포트폴리오 페이지로 나누어 기획했습니다.

• 메인 페이지: 메인 페이지는 방문자가 사이트에 들어왔을 때 가장 먼저 보게 되는 곳입니다.
  따라서 사이트의 전반적인 내용을 쉽게 파악할 수 있도록 최신 글과 인기 글을 한눈에 볼 수 있는 구조로 설계했습니다.
  또한 스크롤을 통해 포트폴리오의 주요 내용을 간단히 확인할 수 있도록 구성하여, 사용자가 탐색을 시작하면서 자연스럽게 콘텐츠에 관심을 가질 수 있도록 유도했습니다.

• 블로그 페이지: 블로그 페이지에서는 마크다운으로 글을 작성해 사용자가 접근하기 쉽고 직관적인 UI를 유지하려 했습니다.
  Velog와 같은 플랫폼을 참고하여, 글 작성이 간편하고 정돈된 페이지 구성을 목표로 했습니다.
  또한 블로그에서 필요한 카테고리와 태그 기능을 추가하여 특정 주제에 따라 글을 찾을 수 있게 했고, 제목을 초성으로 검색할 수 있는 기능도 기획했습니다.
  이 기능은 사용자가 특정 글을 빠르게 찾을 수 있도록 돕기 위해 추가했으며, 보다 사용자 친화적인 검색 경험을 제공하기 위함입니다.

• 포트폴리오 페이지: 포트폴리오 페이지는 제가 지금까지 진행한 프로젝트를 소개하는 공간입니다.
  이 페이지에서는 각 프로젝트마다 사용한 기술, 그 과정에서 직면한 문제와 해결 접근법을 기록하고 있습니다.
  이와 같은 구체적인 설명을 통해 프로젝트에서의 기여와 개발자로서의 역량을 명확히 드러내고자 했습니다.
  이를 통해 기술적 성장을 한눈에 볼 수 있는 공간을 구성하고자 했습니다.

고민

사이트를 기획하면서 가장 먼저 고민한 점 중 하나는 백엔드 구조였습니다. 백엔드를 서버리스로 구성할지, 직접 서버를 구축할지에 대해 여러 가지 고려가 필요했습니다.

서버리스는 빠른 배포와 높은 확장성을 제공한다는 점에서 매력적이었습니다.
이전에 서버리스를 사용하여 배포한 경험이 있었지만, 이번 프로젝트에서는 백엔드 서버를 직접 구축함으로써 데이터베이스와 API 연동에 대한 경험을 쌓아 보고 싶었습니다.
또한 직접 서버를 관리하고 모니터링하는 방법을 배우기 위해 직접 서버를 구축하는 방향으로 결정했습니다.

기술 선정

사이트 제작에 있어 동적 페이지와 정적 페이지를 모두 활용할 필요가 있었기 때문에 Next.js를 선택했습니다.
Next.js는 SSR(Server-Side Rendering)을 지원하여 SEO가 중요한 블로그나 포트폴리오 소개 페이지를 정적으로 생성할 수 있고, 사용자 맞춤형 콘텐츠는 동적으로 처리할 수 있어 이번 프로젝트에 매우 적합했습니다.

Tailwind CSS는 스타일링에서 일관성을 유지하고 빠르게 개발할 수 있는 점에서 자주 사용해 왔기 때문에 이번 프로젝트에서도 자연스럽게 선택하게 되었습니다.

또한 백엔드 개발이 처음이었기 때문에, 데이터베이스와 API를 관리하기 위해 Prisma를 사용했습니다. Prisma는 데이터베이스와의 연동을 간편하게 만들어 주어 데이터 모델링 및 API 설계에 큰 도움을 주었습니다. 그리고 Render를 사용해 PostgreSQL과 API를 안정적으로 운영하는 것을 목표로 기획했습니다