Project Sail
← All Posts
Vibe Coding개선 중2026.06.04

Project Sail 제작기 01: 개인 프로젝트 블로그를 만들기로 한 이유

단순한 포트폴리오를 넘어, 만들고 배우고 실패한 과정을 그대로 기록하는 공간을 만들기로 했다.

박혁기 · 소요 약 3일 · 난이도 어려움

#Vibe Coding#Next.js#MDX#Project Sail
Project Sail 제작기 01: 개인 프로젝트 블로그를 만들기로 한 이유

왜 또 블로그인가

포트폴리오는 결과만 남는다. 잘된 것만 골라 보기 좋게 다듬은 화면들. 정작 그 사이에서 무엇을 고민했고 어디서 막혔는지는 사라진다.

Project Sail은 그 사라지는 부분을 남기려고 만든 공간이다. 완성된 결과물보다 만드는 과정에 무게를 둔다.

무엇을 기록할까

  • 직접 만든 프로젝트의 기획과 구현 과정
  • 바이브코딩으로 실험한 것들과 그 결과
  • 실패한 시도와 그때 배운 것
  • 참고한 자료와 도구

첫 번째 기술 선택

1차 버전은 백엔드 없이 간다. 글은 MDX로 직접 쓰고, 이미지는 폴더로 관리한다.

항목선택
프레임워크Next.js App Router
스타일Tailwind CSS
콘텐츠MDX 파일
배포Vercel

복잡한 인프라는 글이 쌓인 다음에 고민해도 늦지 않다.

Project Sail 구조 스케치

글 로딩 방식

content/posts 폴더의 .mdx를 읽어 frontmatter만 파싱한다.

export function getAllPosts(): Post[] {
  return getPostFileNames()
    .map(parsePostFile)
    .sort((a, b) => b.date.localeCompare(a.date));
}

지금은 이 정도면 충분하다. 일단 글부터 쓰자.