← All Posts
Vibe Coding개선 중2026.06.04
Project Sail 제작기 01: 개인 프로젝트 블로그를 만들기로 한 이유
단순한 포트폴리오를 넘어, 만들고 배우고 실패한 과정을 그대로 기록하는 공간을 만들기로 했다.
박혁기 · 소요 약 3일 · 난이도 어려움
#Vibe Coding#Next.js#MDX#Project Sail
왜 또 블로그인가
포트폴리오는 결과만 남는다. 잘된 것만 골라 보기 좋게 다듬은 화면들. 정작 그 사이에서 무엇을 고민했고 어디서 막혔는지는 사라진다.
Project Sail은 그 사라지는 부분을 남기려고 만든 공간이다. 완성된 결과물보다 만드는 과정에 무게를 둔다.
무엇을 기록할까
- 직접 만든 프로젝트의 기획과 구현 과정
- 바이브코딩으로 실험한 것들과 그 결과
- 실패한 시도와 그때 배운 것
- 참고한 자료와 도구
첫 번째 기술 선택
1차 버전은 백엔드 없이 간다. 글은 MDX로 직접 쓰고, 이미지는 폴더로 관리한다.
| 항목 | 선택 |
|---|---|
| 프레임워크 | Next.js App Router |
| 스타일 | Tailwind CSS |
| 콘텐츠 | MDX 파일 |
| 배포 | Vercel |
복잡한 인프라는 글이 쌓인 다음에 고민해도 늦지 않다.
글 로딩 방식
content/posts 폴더의 .mdx를 읽어 frontmatter만 파싱한다.
export function getAllPosts(): Post[] {
return getPostFileNames()
.map(parsePostFile)
.sort((a, b) => b.date.localeCompare(a.date));
}
지금은 이 정도면 충분하다. 일단 글부터 쓰자.
