블로그 홈을 파일트리로 다시 그린 이유

2026년 3월 5일

블로그에 글이 쌓일수록 이상하게 느껴지는 게 있었다.

방문자 입장에서 봤을 때, 이 사람이 뭘 만드는 사람인지 바로 알 수가 없었다. 글 목록이 있고, 태그가 있고, 날짜가 있는데 그게 전부였다.

프로덕트 엔지니어라는 정체성을 블로그에서 읽을 방법이 없었다.

1. 문제 상황

홈 페이지는 최근 글 목록이었다. 글을 클릭하면 읽고, 뒤로 가면 다시 목록. 흔한 구조였다.

불편한 건 아니었다. 그런데 어느 순간 깨달았다.

블로그에 글이 40개를 넘어가면서, 이걸 처음 보는 사람이 어떤 맥락을 얻어가는지 상상해봤다.

드래그 앤 드롭 글, 번역 글, 면접 시뮬레이터 글, 한스푼 글. 날짜 순으로 쌓여 있을 뿐이다.

“이 사람이 뭘 만드는 사람이야?”

5초 안에 답이 안 나왔다.

그게 문제였다.

2. 내가 처음 한 생각

먼저 떠오른 건 태그 필터링이었다.

글마다 tags가 이미 있으니, 태그로 묶어서 필터 UI를 만들면 되지 않을까.

그런데 태그는 기술 스택이나 주제를 나타내는 거지, “어떤 프로젝트를 만들었는지”를 나타내지는 않는다. “드래그 앤 드롭”, “React”, “Canvas” 같은 태그들이 한스푼이라는 제품으로 모인다는 게 보이지 않는다.

다음으로 프로젝트 페이지를 별도로 만드는 방법을 생각했다. /projects 같은 페이지를 만들고 거기서 각 프로젝트를 소개한 뒤, 관련 글 링크를 달아두는 방식.

그런데 이건 관리 포인트가 두 군데가 된다. 글을 쓸 때마다 프로젝트 페이지도 업데이트해야 한다.

관리하기 귀찮으면 안 하게 된다. 결국 유명무실해진다.

3. 실제로 해 본 선택

홈을 VS Code 파일트리 스타일로 바꿨다.

▼ 📁 hanspoon
  ├── 📄 드래그 앤 드롭에서 요소가 튀는 이유
  ├── 📄 복잡한 동기화 시스템을 삭제하고 얻은 것들
  └── 📄 1인 개발자를 위한 Git 브랜치 전략
▶ 📁 interview-simulator
▶ 📁 translations
▶ 📁 archive

프로젝트 폴더 안에 관련 글이 들어있는 구조다. 폴더를 클릭하면 열리고, 파일을 클릭하면 글로 이동한다.

데이터 구조부터 잡았다.

src/data/projects.ts에 프로젝트 목록을 정의하고,

export const projects: Project[] = [
  { id: "hanspoon", name: "hanspoon", status: "active" },
  { id: "interview-simulator", name: "interview-simulator", status: "active" },
  { id: "na-jak-gil", name: "나작길", status: "active" },
  { id: "ddudungi", name: "뚜둥이", status: "active" },
  { id: "translations", name: "translations", status: "active" },
  { id: "archive", name: "archive", status: "archived" },
];

각 글의 frontmatter에 project 필드로 연결했다.

---
title: "드래그 앤 드롭에서 요소가 튀는 이유"
pubDate: "2025-01-01"
project: "hanspoon"
---

글을 쓸 때 project 한 줄만 추가하면 자동으로 해당 폴더 아래에 들어간다. 별도 관리 포인트가 없다.

FileTree 컴포넌트는 React로 만들었다.

폴더 열기/닫기 상태가 클라이언트에서 관리돼야 했다. Astro에서 글 데이터를 수집해 컴포넌트에 넘기고, 컴포넌트가 useState로 상태를 관리한다.

const [openFolders, setOpenFolders] = useState<Set<string>>(
  new Set([projects[0]?.id]),
);

기본값은 첫 번째 폴더가 열린 상태. 처음 들어왔을 때 아무것도 안 보이면 답답하니까.

/posts로 들어오는 경로는 홈으로 리다이렉트했다. 홈이 곧 글 목록이니까 /posts 페이지가 따로 필요없었다.

4. 결과

홈에 들어오면 이제 이게 보인다.

이 사람은 한스푼이라는 걸 만들고 있다
면접 시뮬레이터도 만들었다
번역 글을 따로 모아두고 있다
한스푼 폴더를 열면 관련 글이 나온다

“이 사람이 뭘 만드는 사람인지”가 5초 안에 읽힌다.

기술적으로 간단했다. project 필드 하나를 스키마에 추가하고, 컴포넌트 하나를 만들고, 홈을 갈아엎으면 됐다.

한 가지 아쉬운 점이 있었다. project 필드가 없는 글은 어느 폴더에도 나타나지 않는다. 초기에 작성된 글들 중 일부가 파일트리에서 사라진 셈이다.

당장 사용자에게 보이지 않는다는 게 아니라, 홈에서 동선이 끊긴다는 의미다. 글에 직접 링크로 들어오거나 다른 방법으로 찾아야 한다.

5. 지금 다시 해본다면?

글을 처음 쓸 때부터 project 필드를 챙겼을 것이다.

이번에는 나중에 소급해서 frontmatter를 수정했다. 글이 50개를 넘어가니 꽤 번거로웠다. 처음부터 컨벤션을 잡아뒀다면 이 작업이 없었다.

그리고 project 없는 글의 처리를 처음부터 설계했을 것이다. 지금은 홈에서 안 보이는데, 이게 의도된 건지 미완성인지 애매하다. “어느 프로젝트에도 속하지 않는 글” 폴더를 만드는 것도 방법이고, 검색 기능을 추가하는 것도 방법이다.

처음 설계할 때 “분류되지 않은 글은 어디 가나?”를 먼저 정했다면 더 깔끔하게 마무리됐을 것이다.