완전한 웹사이트 만들기

🔄 복습: 이 코스 전체에서 HTML 구조 만들기, CSS 스타일링, JavaScript 인터랙티비티 추가, 이슈 디버깅, 성능 최적화, SEO와 함께 배포하는 법을 배웠어요. 이제 모든 것을 사용해서 완전한 프로젝트를 만들어볼게요.

캡스톤 프로젝트: 포트폴리오 웹사이트 만들기

이 연습은 실제 배포 가능한 포트폴리오 웹사이트를 만드는 과정을 안내해요. 필요에 맞게 적용하세요 — 개인 포트폴리오, 비즈니스 랜딩 페이지, 프로젝트 쇼케이스가 될 수 있어요.

1단계: 계획

코드를 작성하기 전에, 무엇을 만들지 정의하세요:

Help me plan a portfolio website with these pages:

1. Homepage — Hero section, about preview, featured projects (3), testimonials, CTA
2. Projects — Grid of 6+ project cards with filtering by category
3. About — Bio, skills, experience timeline
4. Contact — Contact form with validation

Design constraints:
- Vanilla HTML, CSS, JavaScript (no frameworks)
- Mobile-first responsive design
- Dark mode support via system preference
- Target: Lighthouse 90+ on all scores

Create a file structure, component list, and build order.

✅ 확인 질문: 프롬프트하기 전에 계획을 세우는 이유는? 정확히 무엇이 필요한지 알면 AI가 더 나은 코드를 생성하기 때문이에요. 막연한 요청(“포트폴리오 만들어줘”)은 제네릭한 결과를 줘요. 구체적인 계획(“두 개의 CTA가 있는 히어로 섹션, 필터 가능한 프로젝트 그리드, 검증이 있는 연락처 폼”)은 집중적이고 검토 가능한 컴포넌트를 줘요.

2단계: HTML 구조

한 번에 하나의 컴포넌트씩 각 페이지의 HTML을 만드세요:

홈페이지 히어로 섹션:

Create the HTML for a homepage hero section:
- Large heading with name and title
- Brief tagline (1-2 sentences)
- Two CTA buttons: "View Projects" and "Contact Me"
- A subtle background element (will style with CSS later)

Semantic HTML, accessible, no CSS or JavaScript.

프로젝트 카드:

Create the HTML for a project showcase grid:
- 6 project cards with: image, title, description, technology tags, and "View Project" link
- Filter buttons above: All, Web, Design, App
- Each card is an article element inside a list

Include aria-labels for the filter buttons and proper heading hierarchy.

각 컴포넌트를 작업하면서, 다음으로 넘어가기 전에 HTML을 검토하세요.

3단계: CSS 스타일링

레슨 3에서 배운 디자인 시스템을 적용하세요:

Step 1: 디자인 토큰을 생성하세요 (색상, 간격, 타이포그래피를 위한 커스텀 프로퍼티).

Step 2: CSS Grid(페이지 구조)와 Flexbox(컴포넌트 내부)로 레이아웃을 스타일링하세요.

Step 3: 반응형 동작을 추가하세요:

Make this page responsive:

[paste your current CSS]

Breakpoints:
- Mobile: base styles (< 768px)
- Tablet: 768px (2-column project grid, side-by-side about layout)
- Desktop: 1024px (3-column project grid, max-width container)

Add dark mode using custom property overrides.

4단계: JavaScript 인터랙티비티

컴포넌트에 동작을 추가하세요:

프로젝트 필터링:

Write vanilla JavaScript to filter the project cards:
- Filter buttons: All, Web, Design, App
- Click a filter to show only matching cards
- "All" shows everything
- Smooth fade transition when cards show/hide
- Update URL with active filter (?category=web)
- Active filter button gets visual highlight

No dependencies.

연락처 폼 검증:

Write form validation for: Name (required), Email (required, valid format),
Subject (required), Message (required, 20+ characters).
Show errors below each field using textContent. Prevent submission until valid.
Include accessible error announcements.

모바일 내비게이션:

Write vanilla JavaScript for mobile hamburger menu:
- Toggle button shows/hides the nav
- Menu slides in from the right
- Overlay covers the background
- Escape key closes the menu
- Focus is trapped inside the open menu
- aria-expanded updates on toggle

No dependencies.

5단계: 최적화와 SEO

배포 전에 모든 것을 최적화하세요:

Review my complete website for deployment readiness:

[describe your pages and features]

Audit:
1. Performance — Are images lazy-loaded? CSS/JS minified? Critical resources preloaded?
2. SEO — Does every page have unique title, description, OG tags?
3. Accessibility — Keyboard navigation, screen reader compatibility, contrast ratios?
4. Cross-browser — Any CSS/JS that might break in Safari or Firefox?
5. Security — Any user input handled unsafely?

Provide a prioritized fix list.

6단계: 배포

코드를 GitHub 리포지토리에 푸시하세요
Netlify 또는 Vercel에 연결하세요
커스텀 도메인을 설정하세요 (또는 무료 서브도메인을 사용하세요)
Google Search Console에 사이트맵을 제출하세요
네이버 서치어드바이저에도 등록하세요 (한국 검색 노출을 위해)
라이브 사이트에서 Lighthouse를 마지막으로 실행하세요

테스트 체크리스트

완료라고 부르기 전에:

테스트	방법	목표
모바일 레이아웃	Chrome DevTools 375px	모든 콘텐츠 읽기 가능, 가로 스크롤 없음
태블릿 레이아웃	DevTools 768px	그리드 조정, 내비게이션 사용 가능
데스크탑 레이아웃	전체 브라우저 창	max-width 컨테이너, 편안한 읽기 너비
키보드 내비게이션	마우스 없이 전체 사이트 탭	모든 인터랙티브 요소 접근 가능
스크린 리더	VoiceOver (Mac) 또는 NVDA (Windows)	랜드마크, 제목, 라벨 올바르게 읽힘
느린 네트워크	DevTools → Network → Slow 3G	5초 내 로드, 점진적 향상
크로스 브라우저	Chrome, Firefox, Safari에서 테스트	일관된 외관과 기능
Lighthouse	DevTools → Lighthouse → 모든 카테고리	성능, 접근성, SEO 각 90+

코스 리뷰

배운 모든 것이 연결돼요:

AI를 파트너로 (레슨 1) — 작은 프롬프트, 모든 것 검토, 반복
HTML 구조 (레슨 2) — 시맨틱 요소, 접근성, 폼
CSS 스타일링 (레슨 3) — 디자인 토큰, Grid/Flexbox, 반응형, 다크 모드
JavaScript (레슨 4) — DOM 조작, 이벤트, 검증, 보안
인터랙티브 기능 (레슨 5) — API, 검색/필터, 접근 가능한 컴포넌트
디버깅 (레슨 6) — 에러 진단, 성능 최적화, Core Web Vitals
배포 (레슨 7) — 호스팅, SEO 메타 태그, 구조화 데이터, 모니터링

핵심 정리

레이어 순서로 만드세요: HTML 구조 먼저, CSS 스타일링 둘째, JavaScript 동작 셋째, 최적화 마지막 — 각 레이어가 이전 것 위에 쌓여요
큰 프로젝트를 작은 컴포넌트로 나누고 AI에 한 번에 하나씩 프롬프트하세요 — 집중된 요청이 더 나은 코드를 만들어요
배포 전에 다양한 디바이스, 브라우저, 입력 방법(키보드, 스크린 리더)으로 테스트하세요 — 개발 환경이 사용자를 대표하지 않아요
모든 웹사이트에 필요한 것: 반응형 디자인, 키보드 접근성, 빠른 로딩, 적절한 메타 태그, 구조화 데이터
AI 우선 워크플로(계획 → 프롬프트 → 검토 → 테스트 → 반복)는 간단한 랜딩 페이지부터 복잡한 애플리케이션까지 모든 웹 프로젝트에 적용돼요
계속 학습하세요: React, Vue, Svelte 같은 프레임워크는 여기서 마스터한 바닐라 기초 위에 만들어져요

축하해요! AI를 개발 파트너로 활용해서 웹사이트를 만드는 법을 배웠어요. 연습한 기초 — 시맨틱 HTML, 반응형 CSS, 접근 가능한 JavaScript, 성능 최적화 — 는 프레임워크를 사용하든 안 하든 모든 웹 프로젝트의 기반이에요.