huiseok.dev 개발 블로그

개발 과정에서 해결한 문제와 프로젝트 경험을 꾸준히 축적하기 위해 만든 개인 웹사이트입니다. 단순한 글 목록보다 기억에 남는 첫인상을 만들고 싶어 인터랙티브 북극곰 캐릭터를 메인 경험으로 구성했습니다.

문제 정의

기존의 메모는 여러 도구에 흩어져 있어 다시 찾기 어려웠고, 프로젝트 결과만 정리하면 실제로 어떤 판단을 거쳐 구현했는지 남지 않았습니다.

이 프로젝트에서는 두 가지 질문을 해결하고자 했습니다.

• 기술 기록을 부담 없이 계속 추가하려면 어떤 구조가 필요한가?
• 블로그와 포트폴리오를 하나의 일관된 경험으로 보여주려면 어떻게 해야 하는가?

목표

1. 마크다운 파일만으로 글과 프로젝트를 관리한다.
2. 정적 빌드로 배포 구조를 단순하게 유지한다.
3. 인터랙티브 요소가 콘텐츠 탐색을 방해하지 않게 한다.
4. 데스크톱과 모바일에서 동일한 정보 구조를 제공한다.

핵심 구현

마크다운 콘텐츠 시스템

gray-matter로 프론트매터를 읽고 remark로 본문을 HTML로 변환합니다. 글과 프로젝트는 각각 독립된 메타데이터를 사용하지만 같은 작성 흐름을 공유합니다.

const projects = getAllProjects();
const featured = projects.find((project) => project.featured);

인터랙티브 캐릭터

React Three Fiber 캔버스에서 북극곰 캐릭터가 포인터 위치에 반응하고, 시간에 따라 부드럽게 떠오르도록 구현했습니다. 캔버스 배경은 투명하게 유지해 페이지의 다크 테마와 자연스럽게 결합합니다.

정적 라우팅

빌드 시 마크다운 파일의 slug를 수집해 글과 프로젝트 상세 경로를 미리 생성합니다.

콘텐츠	목록 경로	상세 경로
블로그	/, /tags	/posts/[slug]
포트폴리오	/portfolio	/portfolio/[slug]

디자인 기준

• 배경과 헤더는 다크 토큰으로 통일했습니다.
• 블로그는 cyan, 포트폴리오는 violet을 강조색으로 사용합니다.
• 카드에는 제목, 요약, 상태, 기술 스택만 남겨 빠르게 훑을 수 있게 했습니다.
• 본문은 최대 폭을 제한해 긴 글의 가독성을 유지했습니다.

현재 결과

블로그 목록, 태그 검색, 글 상세, 포트폴리오 목록과 프로젝트 상세를 하나의 정적 사이트에서 관리할 수 있습니다. 새로운 콘텐츠는 파일을 추가하는 것만으로 빌드에 포함됩니다.

다음 개선

• 실제 프로젝트 기록 추가
• 프로젝트별 외부 서비스 링크 연결
• 콘텐츠가 늘어날 때 카테고리 필터 도입
• WebGL 렌더링 성능과 접근성 지속 점검