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

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

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

✓2. 학습 목표

✓최종 실습을 마치면

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

◇3. 핵심 개념

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

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

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

작은 수직 조각으로 통합하기

처음부터 카드 세 개, 필터, 모달, 테마와 폼을 동시에 연결하지 않습니다. projects의 한 항목 → 카드 렌더 → 상세 버튼 → dialog 내용 → 닫기와 초점 복원을 먼저 브라우저에서 끝까지 확인합니다. 그다음 두 항목과 필터를 확장하면 오류가 데이터, DOM 생성, 이벤트 중 어디에 있는지 좁힐 수 있습니다.

projects 데이터
  → renderProjects(activeFilter)
  → 카드와 상세 버튼
  → 선택한 project id
  → 모달 내용·열림 상태
  → Escape 닫기·원래 버튼으로 초점 복원

테마는 이 흐름과 별도인 저장값 읽기 → document 속성 반영 → 버튼 상태 갱신 책임이고, 문의 폼은 브라우저 형식 검증까지만 수행합니다.

✎4. 단계별 실습

시작 전 상태와 구현 순서

이전 강의의 index.html, css/style.css, js/app.js가 로컬 서버에서 열리고 Console 오류가 없어야 합니다. 기존 프로젝트 데이터와 이미지의 출처·공개 가능 여부를 확인하고 현재 Git 상태를 기록합니다.

1. 시맨틱 HTML만으로 홈·소개·프로젝트·연락처를 읽게 합니다.
2. 프로젝트 한 개의 카드와 모달 수직 조각을 완성합니다.
3. 세 개 이상 데이터와 필터·빈 결과를 확장합니다.
4. 이미지 실패, 긴 제목, 키보드 초점과 Escape를 검증합니다.
5. 테마 저장과 정적 폼 한계를 확인합니다.
6. 320px·데스크톱·공개 URL을 같은 체크리스트로 점검합니다.

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강의 함수들을 연결합니다. 외부 링크는 실제 공개 가능한 프로젝트 주소로 바꾸고 없는 주소는 링크를 숨깁니다.

첫 구현에서는 projects[0] 하나만 렌더해 제목 Parcel Rush, 기술 Unity·C#, 설명과 상세 버튼이 보이는지 확인합니다. 모달을 연 뒤 제목이 같은지, Escape로 닫힌 뒤 상세 버튼에 초점이 돌아오는지 검증한 다음 전체 배열로 넓힙니다.

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의 테마 값까지 순서대로 확인합니다.

브라우저에서 확인할 구체 결과

시나리오	조작	기대 결과·증거
기본 화면	새로고침	카드 3개, Console 오류 0
Unity 필터	Unity 선택	Parcel Rush만 표시, 선택 상태 텍스트·속성 제공
빈 결과	존재하지 않는 유형 적용	빈 결과 안내, 카드 영역이 조용히 비지 않음
모달	상세 버튼 → Tab → Escape	제목 일치, 초점 갇힘, 닫힌 뒤 시작 버튼으로 복귀
이미지 실패	한 image 경로를 임시 변경	대체 이미지와 프로젝트를 설명하는 alt
테마	변경 후 새로고침	테마 복원, 저장 삭제 후 기본값
폼	빈 값·잘못된 이메일	브라우저 오류 안내, Network 요청 0건
320px	긴 제목과 메뉴 확인	가로 스크롤·겹침 없음, 초점 표시 유지

실패 실험용 경로와 저장값은 테스트 뒤 원래 상태로 복구하고 다시 Console·Network를 확인합니다.

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

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

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

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

카드와 모달이 같은 배열 항목을 사용하므로 제목·기술 정보가 서로 어긋나지 않습니다. 필터는 원본 배열을 삭제하지 않고 표시 대상만 계산해야 전체 보기로 돌아갈 수 있습니다. HTML에 랜드마크와 기본 연락처를 남기면 JavaScript 오류가 있어도 프로젝트 목적과 이동 경로를 읽을 수 있습니다.

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

!자주 하는 실수

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

✎7. 직접 실습

✎직접 실습

실습 목표

게임 한 개의 카드·모달 수직 조각부터 시작해 세 프로젝트, 필터, 테마, 정적 폼을 통합하고 브라우저 증거로 검증합니다.

시작 전 상태

로컬 서버 주소, 브라우저 버전, 현재 Console·Network 결과와 Git 상태를 기록합니다. 프로젝트 URL과 이미지가 실제 공개 가능한지 확인합니다.

1단계: 따라 하기 — 한 프로젝트 닫기

자신의 게임 한 개로 카드와 상세 모달을 연결합니다. 제목·기술·설명이 데이터와 같고, 상세 버튼→모달→Escape→버튼 초점 순서가 동작하는지 확인합니다.

2단계: 값과 실패 바꿔 보기

긴 제목과 누락 이미지로 레이아웃·대체 표시를 확인합니다. 외부 URL을 빈 값으로 바꾸면 빈 링크가 아니라 링크 자체가 숨겨져야 합니다. 테스트 뒤 원래 값으로 복구합니다.

3단계: 직접 확장

게임을 세 개 이상으로 늘리고 Unity·Unreal·빈 결과 필터, 테마 저장과 문의 폼 형식 검증을 연결합니다. 정적 폼이 실제 전송된다고 표시하거나 Network 요청을 만들지 않습니다.

4단계: 스스로 확인

• HTML만으로 랜드마크와 핵심 콘텐츠를 읽을 수 있나요?
• 카드와 모달이 같은 데이터 항목을 사용하나요?
• 320px에서 가로 넘침 없이 키보드로 모두 조작하나요?
• Console 오류와 공개 URL의 CSS·JS·이미지 404가 없나요?
• README에 역할·검증 조건·실패 수정·한계를 기록했나요?

막혔을 때

증상	먼저 볼 증거	해결 방향
필터 뒤 전체 목록 복구 안 됨	원본 projects 배열	원본을 수정하지 말고 필터 결과만 렌더합니다.
모달 닫은 뒤 초점 소실	열기 버튼 참조	열기 전 버튼을 저장하고 닫을 때 focus를 돌립니다.
배포에서 자산 404	Network 요청 URL	HTML 기준 상대 경로와 파일명 대소문자를 확인합니다.
폼이 전송된 것처럼 보임	submit handler와 Network	UI 검증 전용임을 표시하고 성공 전송 문구를 제거합니다.

?8. 이해 점검 질문 3개

?이해 점검

1. JavaScript 오류 뒤 프로젝트 섹션과 연락처까지 모두 사라졌습니다. 어떤 내용을 HTML 기본 구조에 남기고 JS는 무엇만 보강해야 하나요?
2. 필터가 projects 원본 배열을 삭제해 전체 보기가 복구되지 않습니다. 데이터와 UI 상태를 어떻게 분리해야 하나요?
3. 정적 폼에서 “전송 완료”를 표시하고 있지만 Network 요청은 없습니다. 현재 한계를 어떻게 안내하고 실제 전송에는 무엇이 추가로 필요한가요?

■9. 핵심 요약

■핵심 요약

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