20강. 최종 실습: 게임 개발자 포트폴리오 사이트 완성하기

?1. 이번 강의에서 해결할 문제

각 기능이 따로 동작해도 데이터와 상태가 충돌하거나 모바일·오류 상황에서 깨질 수 있습니다. 전체 포트폴리오를 하나의 결과물로 통합하고 완료 기준으로 검증합니다.

✓2. 학습 목표

✓최종 실습을 마치면

• 홈, 소개, 프로젝트와 연락처를 시맨틱 구조로 완성합니다.
• 3개 이상의 데이터 카드, 필터, 상세 모달과 로컬 테마를 연결합니다.
• 접근성·오류·반응형·성능·배포 체크리스트를 통과합니다.

◇3. 핵심 개념

최종 구조의 책임은 다음과 같습니다.

• HTML: 랜드마크, 제목, 메뉴, 필터 버튼, 모달과 폼의 의미·기본 동작
• CSS: 색상 토큰, 타이포그래피, 카드 Grid, 모바일 우선 레이아웃과 초점 표시
• JavaScript: 프로젝트 데이터 렌더, 필터 상태, 모달 내용, 폼 UI 검증과 테마 저장

React 같은 프론트엔드 프레임워크는 이 상태·렌더 구조를 컴포넌트로 확장하고, 백엔드 API는 문의 전송과 동적 데이터를 담당하는 후속 단계입니다.

✎4. 단계별 실습

4-1. 최종 파일 구조

game-dev-portfolio/
├─ index.html
├─ css/style.css
├─ js/app.js
├─ assets/images/
│  ├─ parcel-rush.webp
│  ├─ last-arena.webp
│  ├─ ai-patrol.webp
│  └─ project-placeholder.webp
├─ docs/test-checklist.md
└─ README.md

4-2. 프로젝트 데이터 완료

JavaScript · 파일 경로: js/app.js

game-dev-portfolio/js/app.js

const projects = [
  {id: 'parcel-rush', type: 'unity', title: 'Parcel Rush', tech: ['Unity', 'C#'], description: '2D 택배 분류 게임', image: './assets/images/parcel-rush.webp', url: 'https://example.com/parcel-rush'},
  {id: 'last-arena', type: 'unreal', title: 'Last Arena', tech: ['Unreal Engine', 'C++'], description: '적 추적과 체력 시스템을 구현한 생존 게임', image: './assets/images/last-arena.webp', url: 'https://example.com/last-arena'},
  {id: 'ai-patrol', type: 'unreal', title: 'AI Patrol Lab: 긴 제목 레이아웃 확인용 프로젝트', tech: ['Unreal Engine', 'Behavior Tree'], description: '순찰·추적·공격 상태 실험', image: './assets/images/ai-patrol.webp', url: 'https://example.com/ai-patrol'},
];

각 카드 렌더 함수에 이미지, 제목, 기술, 설명, 상세 버튼과 외부 링크를 포함하고 10~15강의 함수들을 연결합니다. 외부 링크는 실제 공개 가능한 프로젝트 주소로 바꾸고 없는 주소는 링크를 숨깁니다.

4-3. 문의 폼 한계 표시

HTML · 연락처 섹션 안내

game-dev-portfolio/index.html

<p class="notice">이 폼은 입력 형식 확인용입니다. 정적 사이트이므로 실제 메시지는 전송되지 않습니다.</p>

4-4. 테스트 체크리스트

Markdown · 파일 경로: docs/test-checklist.md

game-dev-portfolio/docs/test-checklist.md

# 포트폴리오 최종 점검

- [ ] 일반 화면: 홈·소개·카드 3개·연락처가 표시된다.
- [ ] 작은 모바일: 320px에서 가로 스크롤과 겹침이 없다.
- [ ] 이미지 누락: 404 뒤 대체 이미지와 alt가 보인다.
- [ ] JavaScript 비활성·오류: 기본 콘텐츠와 섹션 링크를 읽을 수 있다.
- [ ] 긴 프로젝트 제목: 카드 밖으로 넘치지 않는다.
- [ ] 필터: Unity·Unreal·빈 결과의 수와 상태가 맞다.
- [ ] 모달: Tab으로 열고 Escape로 닫으며 초점이 돌아온다.
- [ ] 테마: 새로 고침 뒤 복원되고 저장 삭제 시 기본값이다.
- [ ] 폼: 필수 값·이메일 형식을 검사하며 Network 전송은 없다.
- [ ] 공개 URL: CSS·JS·이미지에 404가 없다.

4-5. 최종 실행 점검

PowerShell · 실행 위치: D:\Projects\game-dev-portfolio

Get-Location
Get-ChildItem -Recurse -File | Select-Object FullName, Length
git status --short
git diff --check

예상 결과: 세 핵심 웹 파일, 네 이미지와 문서가 보이고 공백 오류가 없습니다. 개발자 도구 확인: 320px와 넓은 화면, Elements 접근성 트리, Console 오류, Network 404·전송량, Application의 테마 값까지 순서대로 확인합니다.

4-6. 다음 확장 아이디어

• 프론트엔드 프레임워크: 프로젝트 카드·모달을 React 컴포넌트로 분리, Router 상세 페이지, TypeScript 데이터 타입
• 백엔드 API: 서버 검증을 갖춘 문의 전송, 프로젝트 목록 API, 관리자 인증은 후속 과정에서 구현
• 게임 포트폴리오: 플레이 영상·빌드 링크, 개발 회고·기술 문제 해결 글, Unity·Unreal 과정별 태그와 필터

→5. 코드가 동작하는 이유

한 프로젝트 배열에서 카드와 상세 정보를 만들고 activeFilter와 테마처럼 최소 상태만 저장합니다. HTML의 기본 링크·폼·dialog 동작을 JavaScript가 보강하므로 일부 스크립트가 실패해도 핵심 콘텐츠를 읽을 수 있습니다.

!6. 자주 하는 실수와 해결법

!자주 하는 실수

• 모든 화면을 div와 JavaScript로 생성: 핵심 구조와 콘텐츠는 시맨틱 HTML에 둡니다.
• 인라인 스타일과 DOM 전체 재검색: CSS 클래스와 저장된 컨테이너 참조를 사용합니다.
• 원본 이미지를 그대로 업로드: 표시 크기와 용량을 줄이고 누락도 테스트합니다.
• 정적 폼이 전송된다고 표시: UI 검증만 구현하고 한계를 명확히 씁니다.
• localStorage에 문의나 토큰 저장: 민감·개인 정보는 저장하지 않습니다.

✎7. 직접 실습

✎직접 실습

자신의 게임 3개 이상으로 데이터를 바꾸고 모든 체크리스트를 수행하세요. HTML·CSS·JavaScript의 책임 설명, 측정 조건, 실패와 수정 기록, Pages 공개 URL과 다음 확장 아이디어를 README에 정리합니다.

?8. 이해 점검 질문 3개

?이해 점검

1. JavaScript가 실패해도 핵심 콘텐츠를 읽을 수 있게 만드는 구조는 무엇인가요?
2. 프로젝트 데이터와 UI 상태를 분리하면 React 과정에서 어떤 도움이 되나요?
3. 문의 전송을 추가하려면 정적 HTML 검증 외에 무엇이 필요한가요?

■9. 핵심 요약

■핵심 요약

시맨틱 HTML, 반응형 CSS와 최소 JavaScript 상태를 결합해 배포 가능한 게임 개발자 포트폴리오를 완성했습니다. 접근성·오류·성능·배포를 실제 조건에서 검증하고 프레임워크와 백엔드로 확장할 기반을 만들었습니다.