포트폴리오 사이트를 처음 만들기 시작한 건 2023년 6월이었습니다. 그리고 꽤 오래 멈춰 있었습니다.

이번에 다시 손을 대면서 화면만 있는 사이트가 아니라, 경력이나 글을 제가 직접 관리할 수 있는 사이트로 만들어 보기로 했습니다. 그러다 보니 프론트엔드에서 끝나지 않고 백엔드와 어드민까지 만들게 됐는데, 그 과정을 몇 편으로 나눠서 정리해 보려고 합니다.

1. 다시 시작하면서 구조 잡기 (이번 글)
2. 공개 사이트 화면과 스크롤 연출
3. Spring Boot로 백엔드 만들기
4. 어드민과 관리자 로그인
5. 하드코딩 데이터를 API로 옮기기

2023년에 멈춰 있던 프로젝트

처음에는 Next.js 13의 App Router로 프로젝트를 만들고, 배경에 파티클(tsparticles)을 깔고, 모바일 제스처를 위해 hammerjs를 붙이고, 쿠키로 로딩 화면을 한 번만 보여주는 것까지 만들었습니다.

그러다 취업을 하게 되면서 작업을 멈췄습니다. 그 뒤로는 가끔 들어와서 조금씩 건드리는 정도였고, 제대로 다시 시작한 건 2026년 9월입니다.

참고한 디자인

디자인은 프론트엔드 개발자 PHM님의 포트폴리오 사이트를 참고했습니다.

• https://www.h-creations.com/

전체적인 분위기와 구성을 참고하고, 페이지 구성과 연출은 제 사이트에 맞게 바꿔서 만들었습니다.

이번에는 뭘 만들지부터 정했다

예전에는 일단 화면부터 만들었는데, 이번에는 먼저 범위를 정했습니다.

• 공개 사이트: 프로필, 포트폴리오, 블로그, 방명록
• 어드민: 경력, 스킬, 프로젝트, 블로그, 댓글 관리
• 백엔드: 위 데이터를 저장하고 내려주는 API

순서는 화면 먼저, 백엔드는 나중으로 잡았습니다. 데이터는 일단 프론트 코드에 직접 넣어 두고, 화면 구성이 어느 정도 정해지면 그때 API로 바꾸기로 했습니다.

폴더 구조를 기능 단위로 바꿨다

화면이 하나둘 늘어나니까 컴포넌트, 데이터, 스타일이 한 폴더에 뒤섞이기 시작했습니다. 그래서 기능 단위로 폴더를 다시 나눴습니다.

src/
  app/          라우트 (페이지, 메타데이터)
  features/     기능별 컴포넌트와 데이터
    profile/
    portfolio/
    blog/
    guest/
    visual/
  components/   여러 기능에서 같이 쓰는 컴포넌트
  lib/          API 호출, 포맷 함수
  styles/       SCSS

라우트 파일은 데이터를 준비해서 넘기기만 하고, 실제 화면은 features 안에 둡니다. 이렇게 해두니 나중에 데이터를 API로 바꿀 때 라우트랑 변환 함수만 고치면 됐습니다. 이 부분은 마지막 편에서 다시 이야기하겠습니다.

SCSS 변수는 자동으로 불러오게

컴포넌트마다 변수 파일을 import 하는 게 번거로워서, next.config.js에서 모든 SCSS 파일에 변수와 믹스인이 자동으로 들어가게 했습니다.

sassOptions: {
  includePaths: [path.join(__dirname, "src/styles")],
  additionalData: `@use "sass:map"; @import "utils/_mixins.scss"; @import "utils/_variables.scss";`,
},

반응형 기준은 1024px, 768px, 500px 세 단계로 정했고, @include bp(lg)처럼 믹스인 하나로만 쓰도록 맞췄습니다.

다음 글에서는 메인 화면의 스크롤 연출과 공개 사이트 화면을 정리해 보겠습니다.