2강. 프로젝트 준비: 폴더 구조, 파일 이름, 브라우저 실행 방법

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

파일이 흩어지고 이름에 공백·대소문자가 섞이면 이미지와 스크립트 경로가 배포 후 깨지기 쉽습니다. 한 프로젝트 루트와 일관된 이름 규칙을 만듭니다.

✓2. 학습 목표

✓이번 강의를 마치면

• HTML, CSS, JavaScript와 이미지 폴더를 구분합니다.
• 상대 경로를 프로젝트 루트 기준으로 설명합니다.
• 파일 직접 열기와 로컬 HTTP 실행의 차이를 확인합니다.

◇3. 핵심 개념

경로 ./css/style.css의 .은 현재 HTML 파일이 있는 폴더입니다. 웹 경로는 /를 사용하고 파일명은 영문 소문자와 하이픈을 권장합니다. Windows에서 우연히 동작한 대소문자 불일치가 GitHub Pages에서 실패할 수 있습니다.

✎4. 단계별 실습

PowerShell · 실행 위치: D:\Projects

New-Item -ItemType Directory -Force .\game-dev-portfolio\css | Out-Null
New-Item -ItemType Directory -Force .\game-dev-portfolio\js | Out-Null
New-Item -ItemType Directory -Force .\game-dev-portfolio\assets\images | Out-Null
New-Item -ItemType Directory -Force .\game-dev-portfolio\docs | Out-Null
Get-ChildItem .\game-dev-portfolio

예상 결과: assets, css, docs, js 폴더가 보입니다. 관리자 권한은 필요하지 않습니다. 1강의 세 파일을 알맞은 위치에 저장합니다.

프로젝트 구조

game-dev-portfolio/
├─ index.html
├─ css/style.css
├─ js/app.js
├─ assets/images/
└─ docs/

선택적으로 Node.js가 이미 설치되어 있다면 프로젝트 루트에서 다음을 실행합니다.

npx.cmd --yes serve .

패키지와 실행 방식은 바뀔 수 있으므로 현재 공식 문서를 확인하고, 설치를 원치 않으면 index.html을 직접 엽니다. 개발자 도구 확인: Network에서 style.css, app.js가 상태 200인지 확인합니다.

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

브라우저는 HTML의 상대 URL을 현재 문서 주소와 결합합니다. 로컬 서버는 파일을 HTTP 주소로 제공해 GitHub Pages와 더 비슷한 경로 환경을 만듭니다.

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

!자주 하는 실수

• Style.css와 style.css 혼용: 실제 파일명과 참조 대소문자를 맞춥니다.
• PC 절대 경로 사용: D:\... 대신 ./assets/... 상대 URL을 씁니다.
• 모든 파일을 루트에 저장: 역할별 폴더로 분리합니다.
• 출처를 모르는 전역 패키지 설치: 이미 있는 도구만 사용하거나 공식 문서를 먼저 확인합니다.

✎7. 직접 실습

✎직접 실습

위 폴더를 만들고 세 파일을 연결하세요. CSS 파일명을 일부러 틀려 Network의 404를 확인한 뒤 올바르게 고칩니다.

?8. 이해 점검 질문 3개

?이해 점검

1. 상대 경로를 사용하면 배포에서 어떤 장점이 있나요?
2. Windows에서 경로 대소문자 오류를 놓칠 수 있는 이유는 무엇인가요?
3. Network 패널의 404는 무엇을 의미하나요?

■9. 핵심 요약

■핵심 요약

한 프로젝트 루트 아래 역할별 폴더와 소문자 파일명을 사용합니다. 상대 경로와 Network 결과를 확인하면 배포 경로 오류를 일찍 찾을 수 있습니다.