아래는 수정된 최종 버전입니다. 그대로 Claude Code에 복붙하시면 됩니다.

블로그 페이지(/blog) 디자인 리팩토링 요청

1. Sticky 네비게이션

• 상단에 sticky 네비게이션 바 추가. backdrop-blur-md bg-background/80 border-b 스타일로 스크롤 시 투명 블러 효과 적용.
• 로고(Sophia.ko), 메뉴 링크(소개/경험/블로그), 언어 토글, 다크모드 토글 포함.
• 모바일에서도 메뉴를 접지 말고 그대로 노출. 항목이 적으니까 flex items-center justify-between gap-2로 한 줄 배치. 모바일에서는 텍스트 라벨을 숨기고 아이콘만 보여주는 방식(sm:inline hidden)으로 공간 확보.

2. 히어로 섹션 강화

• 타이틀 Blog는 text-4xl md:text-5xl font-bold, 부제 "QA 엔지니어의 경험과 인사이트를 기록합니다"는 text-lg md:text-xl text-muted-foreground.
• 상하 패딩 py-16 md:py-24로 넉넉하게 설정.
• 게시글 검색바를 히어로 안에 배치해서 메인 페이지의 검색 UI와 톤 통일.

3. 카테고리 필터

• pill 형태 버튼으로 변경. 선택 탭은 bg-primary text-primary-foreground rounded-full px-4 py-2, 비선택은 bg-muted text-muted-foreground rounded-full px-4 py-2 hover:bg-accent.
• 모바일에서는 overflow-x-auto scrollbar-hide flex gap-2 pb-2로 가로 스크롤. 스크롤바 숨김 처리.

4. Empty State

• 현재 이모지 + 한 줄 텍스트만 있어서 페이지가 비어 보임. 풍성하게 개선 필요.
• 중앙에 lucide 아이콘(FileText 또는 PenLine, w-16 h-16 text-muted-foreground/50) 배치.
• 메인 텍스트 "아직 게시된 글이 없습니다"는 text-xl font-semibold, 서브 텍스트 "곧 QA 관련 인사이트와 경험을 공유할 예정입니다"는 text-sm text-muted-foreground.
• 전체를 min-h-[400px] flex flex-col items-center justify-center gap-4로 수직 중앙 정렬.

5. 반응형 레이아웃

• 컨테이너 max-w-4xl mx-auto px-4 sm:px-6 lg:px-8.
• 블로그 카드 그리드는 grid grid-cols-1 md:grid-cols-2 gap-6 (모바일 1열, 태블릿 이상 2열).
• 브레이크포인트마다 자연스럽게 전환.

6. 블로그 카드 컴포넌트 (미리 설계)

• 아직 글이 없지만 카드 컴포넌트를 미리 만들어 둘 것.
• 구조: 상단 썸네일(aspect-video rounded-t-lg object-cover), 카테고리 badge(absolute top-3 left-3), 제목(text-lg font-semibold line-clamp-2), 요약(text-sm text-muted-foreground line-clamp-3), 하단에 날짜 + 읽기 시간.
• 카드 전체 hover:shadow-lg transition-shadow duration-300 rounded-lg border bg-card.
• 카드 클릭 시 전체가 링크 역할하도록 <Link> 래핑.

7. 공통 Footer

• 메인 페이지와 동일한 Footer 컴포넌트를 공유해서 사용.
• 좌측 © 2026 고아현, 우측 링크들(개인정보처리방침, 약관, GitHub, LinkedIn).
• border-t py-8 mt-16 스타일. 모바일에서는 flex-col items-center text-center gap-4로 수직 배치.

8. 다크모드

• 모든 컴포넌트에서 하드코딩 색상(text-white, bg-gray-100 등) 제거. shadcn semantic 토큰(bg-background, text-foreground, bg-card, text-muted-foreground, border)만 사용.
• next-themes로 다크모드 토글 지원.

9. 애니메이션

• 페이지 진입 시 framer-motion fade-up 애니메이션. 히어로 -> 카테고리 탭 -> 글 목록 순서로 staggerChildren: 0.1 적용.
• 카테고리 탭 전환 시 layoutId로 선택 인디케이터가 부드럽게 이동하는 효과.

10. 접근성

• 카테고리 탭에 role="tablist", 각 탭에 role="tab", aria-selected, aria-controls 추가.
• 빈 상태 영역에 role="status", aria-live="polite".
• 모든 인터랙티브 요소에 focus-visible:ring-2 focus-visible:ring-ring 적용.
• 키보드로 탭 간 좌우 화살표 이동 지원.

총 10개 항목이고, 각각 구체적인 Tailwind 클래스와 컴포넌트 구조를 포함하고 있어서 Claude Code가 바로 구현에 들어갈 수 있습니다. 필요 없는 항목이 있으면 빼거나, 우선순위를 정해서 단계적으로 전달하셔도 됩니다.

Experience 페이지가 클라이언트 사이드 렌더링이라 로딩 중으로만 보이네요. 현재 수집한 정보를 기반으로 PDF 포트폴리오를 만들겠습니다. 먼저 현재 프로젝트 구조를 확인하겠습니다.

이제 웹사이트에서 수집한 정보를 기반으로 PDF 포트폴리오를 생성하는 페이지를 만들겠습니다. @react-pdf/renderer를 사용해서 브라우저에서 바로 PDF를 미리보고 다운로드할 수 있게 구현합니다.

이제 @react-pdf/renderer를 사용해서 PDF 포트폴리오를 브라우저에서 생성하고 미리보기/다운로드할 수 있는 페이지를 만들겠습니다.

Tailwind v4를 사용 중이라 tailwind.config 파일이 없네요. 이제 PDF 생성 페이지를 구현하겠습니다. @react-pdf/renderer를 사용해서 브라우저에서 바로 PDF를 미리보고 다운로드할 수 있게 만들겠습니다.

웹사이트(sophia-ko.vercel.app)에서 수집한 모든 콘텐츠를 기반으로 @react-pdf/renderer를 사용한 2페이지 A4 PDF 포트폴리오를 만들었습니다. 1페이지에는 프로필 헤더(이름, 직함, 연락처), 핵심 지표(5년 경력, 99.7% 성공률, 15+ 프로젝트, 8 플랫폼), Q&A 형식의 자기소개를, 2페이지에는 스킬 2단 레이아웃, 주요 프로젝트 3건(결제 시스템, 자동화 파이프라인, 크로스 플랫폼 표준화), 비전 섹션을 담았습니다. 브라우저에서 바로 미리보기하고 PDF 다운로드가 가능합니다.