포트폴리오 사이트 실전 제작 | 클로드로 디자인하기

이번 강에서 배울 것

포트폴리오 사이트의 필수 섹션과 구조
개인 브랜드 아이덴티티를 사이트에 녹이는 법
1~10강 기술 통합 실습 — 완성된 사이트 구현
배포 전 SEO, 성능, 접근성 체크리스트

포트폴리오 사이트 구조

포트폴리오 사이트는 채용 담당자의 "이 사람 다르네"를 끌어내는 움직이는 명함입니다. 구조가 명확해야 3초 안에 당신이 누구인지 전달됩니다.

섹션	역할	핵심 콘텐츠
Hero	강렬한 첫인상	이름, 직함, 한 줄 소개, CTA 버튼
About	나는 누구인가	스토리, 기술 스택, 강점 3가지
Work	프로젝트 쇼케이스	프로젝트 카드, 기술 배지, 링크
Skills	역량 시각화	기술 레벨 바 또는 아이콘 그리드
Contact	연락 유도	이메일 폼, SNS 링크

1단계 — 개인 브랜드 설정

실습 프롬프트 1

나의 포트폴리오 사이트를 위한 개인 브랜드를 설계해줘.

내 정보:
- 직업: 프론트엔드 개발자
- 강점: Claude와 함께 빠른 프로토타이핑, 디자인 시스템 구축
- 원하는 분위기: 모던하고 개성 있는
- 타겟: 스타트업 채용 담당자

설계해줄 내용:
1. 나를 표현하는 한 줄 태그라인 3가지
2. 개인 색상 팔레트 (Primary + Accent, HEX 포함)
3. 폰트 조합 추천 (제목 + 본문)
4. Hero 섹션 카피 (헤드라인 + 서브카피)

2단계 — 전체 HTML 구조 생성

실습 프롬프트 2

포트폴리오 사이트의 완전한 HTML + CSS를 만들어줘.

섹션: Hero, About, Work(3개 프로젝트), Skills, Contact
디자인 요구사항:
- CSS 변수 기반 색상 시스템
- 다크모드 지원 (localStorage 저장)
- 모바일 퍼스트 반응형
- 스크롤 등장 애니메이션 (Intersection Observer)
- 부드러운 스크롤 내비게이션

Work 섹션 프로젝트 카드:
- 프로젝트 이미지 (Unsplash 플레이스홀더)
- 프로젝트명, 설명(2줄), 기술 배지, GitHub/Live 버튼

최종 결과물: 단일 HTML 파일, 바로 브라우저에서 열 수 있는 형태

3단계 — Hero 섹션 강화

실습 프롬프트 3

Hero 섹션을 더 인상적으로 만들어줘.

추가 효과:
1. 타이핑 애니메이션: 개발자, 디자이너, 메이커 순서로 타이핑/삭제 반복
2. 배경: CSS 메쉬 그라디언트 (브랜드 색상 기반)
3. 프로필 이미지: 원형 + 회전하는 그라디언트 테두리 효과
4. CTA 버튼: 호버 시 ripple 효과
5. 스크롤 유도 화살표: bounce 애니메이션

배포 전 체크리스트

SEO
- title, meta description 작성
- og:image, og:title 설정
- 이미지 alt 속성 모두 작성

성능
- 이미지 lazy loading 적용 (loading=lazy)
- 폰트 preload 설정
- CSS 미사용 부분 제거

접근성
- 키보드 탭 내비게이션 확인
- focus-visible 스타일 확인
- 색상 대비율 확인 (WCAG AA 기준)
- prefers-reduced-motion 처리

테스트
- Chrome, Safari, Firefox 호환
- 모바일 실기기 확인
- 다크모드 전환 확인

포트폴리오 사이트는 완성이 없습니다. 새 프로젝트가 생길 때마다, 기술이 늘어날 때마다 업데이트하세요. Claude와 함께라면 섹션 하나 추가하는 데 10분이면 충분합니다.

강의 핵심 요약

포트폴리오 5섹션: Hero - About - Work - Skills - Contact
1~10강 기술 전체 통합 — 단일 HTML 파일로 완성
배포 전 SEO + 성능 + 접근성 3가지 반드시 점검
다음 강: 완성된 디자인을 개발자에게 전달하는 핸드오프

관련 검색어 · 포트폴리오 사이트 만들기, HTML 포트폴리오, 개발자 포트폴리오, Claude 웹사이트 제작, 포트폴리오 디자인