Devfolio v3

프로젝트 소개

• 제작 인원: 1명 (기획, 개발, 디자인)
• 제작 기간: 2026.03 ~ 개발 중

v1에서 인터랙션 기본기를, v2에서 SSR 기반 SEO·성능 최적화를 경험한 뒤, v3에서는 “콘텐츠 중심의 정적 사이트”라는 방향으로 전환했습니다. 단순 이력 나열이 아닌 문제 해결 과정과 비즈니스 임팩트를 구조적으로 전달하는 경력 아카이브형 포트폴리오를 목표로 설계했습니다.

처음 사용해보는 Astro 프레임워크를 선택한 이유는 콘텐츠 중심 정적 사이트에 최적화된 구조와 Content Collections, MDX 지원, 뛰어난 빌드 성능 때문입니다. 그리고 기획 단계부터 구현까지 전 과정에서 여러 AI 도구를 목적에 맞게 조합하여, AI와 함께 개발하는 워크플로우를 직접 구축하고 검증한 프로젝트이기도 합니다.

주요 구현

Astro + Content Collections

Astro의 Content Collections를 활용해 경력, 아티클, 사이드 프로젝트 콘텐츠를 MDX로 관리하고, Zod 스키마로 프론트매터의 타입 안정성을 확보했습니다. 콘텐츠 조회 함수를 lib/content/에 모아 정렬, 필터, featured 여부 등을 일관되게 처리하는 래퍼 구조를 설계했습니다.

Tailwind CSS v4 + 모바일 퍼스트

Tailwind CSS v4를 적용하여 유틸리티 기반의 빠른 UI 개발 환경을 구성했습니다. 모바일 퍼스트 원칙으로 기본 스타일을 작성하고 md: / lg: 브레이크포인트로 확장하는 반응형 설계를 적용했습니다.

SEO + 시맨틱 마크업

시맨틱 HTML 태그를 기반으로 페이지 구조를 설계하고, 각 페이지에 고유한 메타 태그와 JSON-LD 구조화 데이터(Person, WebSite, WebPage, BreadcrumbList)를 적용했습니다. sitemap.xml과 robots.txt 자동 생성으로 검색엔진 크롤링을 최적화했습니다.

GSAP 애니메이션

과도한 인터랙션을 지양하고, 콘텐츠 전달에 집중하되 필요한 구간에만 GSAP을 활용한 최소한의 애니메이션을 적용했습니다. v1에서의 인터랙션 경험을 바탕으로, 시각적 임팩트와 콘텐츠 가독성 사이의 균형을 의식적으로 조절했습니다.

AI 활용 개발

이 프로젝트는 하나의 AI 도구에 국한되지 않고, 개발 단계별로 적합한 AI를 선택하여 활용했습니다.

기획 — Gemini

사이트 IA, 콘텐츠 구조, 페이지 구성안 등 기획 단계에서 Gemini를 활용했습니다. 아이디어를 빠르게 구체화하고, 기획 문서를 .claude/ 폴더에 체계적으로 정리하여 이후 구현 단계에서 AI가 참조할 수 있는 기반을 마련했습니다.

구현 — Claude Code

코드 구현 단계에서는 Claude Code를 중심으로 활용했습니다. CLAUDE.md에 코딩 컨벤션, 아키텍처 레이어 규칙, 브랜치 전략, 네이밍 규칙 등 프로젝트 전반의 지침을 정의하고 AI와 공유하여, 생성되는 코드가 일관된 품질 기준을 따르도록 유도했습니다.

반복되는 워크플로우를 자동화하기 위해 커스텀 슬래시 커맨드도 직접 설계했습니다.

• /create-pr — 현재 브랜치의 변경 사항을 분석하여 PR 템플릿에 맞는 Pull Request를 자동 생성
• /review-pr — PR에 달린 코드 리뷰 코멘트를 분석하고, 각 코멘트에 대해 동의/반박/수정 방안을 제시
• /reply-review — 리뷰 분석 결과를 기반으로 GitHub에 답글을 직접 작성

코드 리뷰 — Gemini Code Review

PR 기반의 브랜치 전략을 운영하면서, Gemini Code Review를 GitHub Actions에 연동하여 PR이 생성될 때마다 자동으로 코드 리뷰를 받는 워크플로우를 구성했습니다. Claude Code의 커스텀 커맨드(/review-pr, /reply-review)와 조합하여, AI 리뷰에 대한 분석과 대응까지 효율화했습니다.

도구 조합의 관점

특정 AI에 의존하는 것이 아니라, 각 도구의 강점에 맞게 역할을 분배하는 것이 핵심이었습니다. Gemini의 빠른 아이디어 구체화, Claude Code의 컨텍스트 기반 코드 생성, Gemini Code Review의 자동화된 품질 검증을 조합하여, 1인 개발에서도 체계적인 개발 프로세스를 유지할 수 있었습니다.

배운 점

• Astro의 Content Collections와 MDX 조합이 콘텐츠 중심 정적 사이트에 얼마나 효율적인지 직접 체감했습니다. 빌드 성능과 개발 경험 모두에서 만족스러운 결과를 얻었습니다.
• AI 활용에서 중요한 것은 프롬프트 작성 능력이 아니라, AI가 따라야 할 규칙과 컨텍스트를 체계적으로 구조화하는 능력이라는 점을 깨달았습니다.
• 여러 AI 도구를 단계별로 조합하는 경험을 통해, 도구의 특성을 파악하고 목적에 맞게 선택하는 판단력을 기를 수 있었습니다.

앞으로

AWS를 활용한 배포를 준비하고 있으며, 콘텐츠 추가와 SEO 최적화를 지속적으로 진행할 예정입니다. v1에서 v3까지 이어진 포트폴리오 시리즈를 통해 쌓아온 프론트엔드 역량과 AI 활용 경험을 이 사이트 자체로 증명하는 것이 최종 목표입니다.