사이트를 Narrative Authority 디자인으로 재설계했습니다

왜 재설계했나

기존 사이트는 깔끔했지만 평면적이었습니다. 방문자가 들어오면 "아 블로그구나" 하고 끝나는 구조였습니다. 11년간의 IT 경력, 50회 이상의 발표, 다양한 커뮤니티 활동이 있음에도 그 깊이가 전달되지 않았습니다.

목표는 두 가지였습니다:

• 스토리텔링 (50%) — 이 사람은 어떤 여정을 걸어왔는가
• 전문성 어필 (50%) — 구체적으로 어떤 성과와 활동이 있는가

Narrative Authority 접근법

"내러티브 + 권위"를 결합한 디자인 방향을 선택했습니다.

홈페이지

Impact Bar의 숫자들은 콘텐츠에서 동적으로 계산됩니다. 세미나를 추가하면 발표 수가 자동으로 올라가고, 해가 바뀌면 경력 연수가 자동 갱신됩니다.

About 페이지

가장 큰 변화가 있었습니다:

• 내러티브 인트로 — 한 문단으로 여정 요약
• 역할 카드 3개 — 엔지니어 / 겸임교수 / 커뮤니티 리더
• 커뮤니티 활동 — CloudBro, OPA, OPDC
• 멘토링 이력 — K-PaaS 공모전, eGovFrame 컨트리뷰션 멘토링 등 9건
• 전문가 활동 — NIA 자문회의, SaaS 과제조정위 등 7건
• 수상 이력 — 행정안전부장관 표창장부터 OPA Awards까지 12건
• 연구보고서 — NIA 의뢰 5편
• 컨퍼런스 월 — 발표했던 행사 배지 자동 추출
• 오픈소스 기여 — OpenMetadata, KakaoCloud Terraform Provider

Speaking 페이지

단순 연도별 리스트에서 타임라인 UI로 변경했습니다. 상단에 Summary Stats, 주요 발표를 Highlights로 강조합니다.

Work 페이지

Projects/Forks 구분을 제거하고 태그 필터 + 케이스 스터디 카드 구조로 변경했습니다. 주요 프로젝트는 "문제 | 해결" 2컬럼으로 맥락을 전달합니다.

Blog 페이지

태그 필터, 추천글 상단 고정, 읽기 시간 표시를 추가했습니다.

기술적 변경사항

새로 추가된 패키지

• rehype-pretty-code + shiki — 코드 블록 구문 하이라이트
• remark-gfm — GFM 테이블 지원
• mermaid — 아키텍처 다이어그램 렌더링

공통 컴포넌트

3개의 재사용 가능한 컴포넌트를 추출했습니다:

• ImpactStats — 숫자 통계 바 (홈, Speaking에서 공유)
• TagFilter — 태그 필터 칩 (Work, Blog에서 공유)
• FeaturedCard — 에메랄드 보더 강조 카드 (홈, Blog, Speaking에서 공유)

디자인 시스템 통일

모든 페이지에서 하드코딩된 Tailwind 컬러 클래스(text-gray-900 등)를 CSS 변수 기반 디자인 토큰(var(--text), var(--accent) 등)으로 통일했습니다.

MDX 개선

• Mermaid 커스텀 컴포넌트로 다이어그램 지원
• rehype-pretty-code로 코드 블록에 github-light 테마 적용
• remark-gfm으로 마크다운 테이블 정상 렌더링

AI와 함께 만들었습니다

이 재설계는 Claude Code와의 협업으로 진행했습니다. 브레인스토밍부터 디자인 스펙 작성, 구현 계획, 병렬 에이전트 실행까지 전 과정을 AI와 함께했습니다.

특히 병렬 서브에이전트를 활용해 5개 페이지를 동시에 재설계하는 방식이 효과적이었습니다.