# 역할 너는 모바일 게임 전문 시니어 개발자이자 테크니컬 아티스트이자 UI 디자이너이자 QA 엔지니어야. ...

Prompt

# 역할 너는 모바일 게임 전문 시니어 개발자이자 테크니컬 아티스트이자 UI 디자이너이자 QA 엔지니어야. Cities: Skylines II와 최대한 비슷한 화면과 조작감의 도시 건설 시뮬레이션을, 스마트폰/태블릿 터치 화면을 1순위로 설계한 "단일 HTML 파일"(HTML+CSS+JavaScript, 외부 이미지/모델/폰트 파일 없음, Three.js만 CDN에서 버전 고정 로드 예: r160)로 만들어 줘. 데스크톱과 크롬북(마우스/키보드)도 지원하지만 모든 결정은 "모바일에서 먼저 쾌적한가"를 기준으로 해. # 절대 규칙 (가장 중요) 1. 나에게 질문하지 마. 모호한 부분은 스스로 합리적으로 결정하고 코드 주석에 기록해. 2. 중간에 멈추지 마. "다음 단계 진행할까요?", "여기까지입니다" 같은 말 금지. 한 번에 최종 완성본까지 가. 3. 생략 금지. "...", "기존 코드 유지", "TODO", 빈 함수, 가짜 더미 기능 금지. 모든 함수는 실제로 동작해야 해. 4. 분량이 부족하면 기능을 빼지 말고 단순화해서 전부 구현해. 단순화한 기능도 화면에서 실제로 작동하고 UI에서 접근 가능해야 해. 5. 출력 한도에 걸릴 것 같으면 코드를 줄이는 쪽으로 설계해(데이터 주도, 공용 헬퍼). 불가피하게 끊기면 "[이어서 계속]"이라고만 쓰고, 내가 "계속"이라고 하면 끊긴 바로 그 줄부터 중복 없이 이어서 출력해. 6. 최종 출력은 완성된 코드 전체 1개(코드블록 하나) + 짧은 조작법 설명만. 중간 초안, 검토 과정 전체, 사과문은 출력하지 마. # 작업 절차 (내부에서 반드시 수행, 결과만 출력) [1단계: 설계] 파일 구조, 데이터 구조(타일, 도로 그래프, 건물/시민/차량 풀), 시뮬레이션 틱, 렌더 구조, 입력 구조, UI 구조를 확정. 성능 예산(드로우콜, 에이전트 수, 프레임당 ms)을 정해. [2단계: 구현] 아래 사양 전체를 구현해. [3단계: 검토 1차 - 문법/실행 오류] 변수 미선언, 오타, 괄호 불일치, 정의되지 않은 함수, 초기화 순서, CDN/전역 이름 불일치를 처음부터 끝까지 읽으며 수정. [4단계: 검토 2차 - 기능 체크리스트] 사양의 모든 항목이 "UI에서 접근 가능하고 실제로 동작하는가" 대조하고 빠진 것은 구현. [5단계: 검토 3차 - 시뮬레이션 논리] 도로 설치 → 구역 지정 → 건물 생성 → 전기/수도 → 시민 입주 → 출퇴근 → 세금 정산 → 마일스톤 시나리오를 머릿속으로 실행. NaN, 무한 루프, 0 나누기, null 참조, 길찾기 실패, 음수 돈, 에이전트 누수 방어. [6단계: 검토 4차 - 모바일/성능/UI] 터치 충돌(건설 vs 카메라), 회전, 안전영역, 프레임당 new, dispose, 에이전트 상한, 자동 품질, 백그라운드 일시정지, 패널 겹침과 터치 크기를 점검. [7단계: 검토 5차 - 최종 정독] 남은 오류, 중복, 죽은 코드 정리. 시작 시 크래시가 없고 첫 화면에서 바로 플레이 가능한지 확인. 각 검토에서 발견한 문제는 수정한 뒤 다음으로 가. 형식적으로 "문제 없음" 처리 금지. 검토가 끝난 최종 코드만 출력해. # 방어적 구현 원칙 - 게임 루프 전체를 try/catch로 감싸 오류가 나도 멈추지 않게 하고, 오류는 작은 디버그 토스트와 console에 표시. - localStorage는 try/catch, 저장 데이터에 버전 필드, 실패 시 새 게임으로 안전하게 시작. - WebGL 미지원/컨텍스트 소실 시 복구 또는 안내. 길찾기 실패 시 시민이 멈추지 않게 처리. 에이전트 수 상한과 풀링. - 모든 수치는 클램프, 저장/불러오기 시 NaN 검사. - 실행 즉시 보이는 상태(시작 도로 몇 개, 시작 자금, 강과 숲이 있는 지형)로 시작해 빈 화면이 되지 않게 해. # 목표 화면 (레퍼런스: Cities: Skylines II 스크린샷) 아래 UI와 연출을 최대한 비슷하게 재현해. 색과 배치는 이 사양을 따르고, 모바일 크기에 맞게 크기만 조정해. ## V1. 전체 UI 스타일 - 색: 짙은 남색 반투명 패널(약 #16294d, 불투명도 90%), 라운드 코너 6~10px, 얇은 밝은 경계선. 강조/선택색은 밝은 하늘색(약 #3db8f5). 흰색 텍스트, 비용은 초록 돈 아이콘 + "¢1,440" 형식(통화 기호 ¢). - 아이콘은 모두 SVG/CSS로 직접 그려서 사용(도로, 번개, 물방울, 쓰레기 재활용, 학교 모자, 소방, 경찰, 버스, 나무, 말풍선, 불도저 등 도구별로 구분되는 단순하고 선명한 아이콘). 외부 이미지 금지. - 한국어 UI 문구, 숫자는 K/M 축약, 글자 최소 14px. ## V2. 하단 메인 바 (화면 맨 아래, 가로 전체) - 왼쪽 끝: 지도 타일(맵 확장) 아이콘 → 트로피 + 현재 마일스톤 이름(예: "MEGALOPOLIS" 스타일, 한글/영문 병기) → 인구 아이콘 + 3색 가로 수요 막대(주거 초록, 상업 파랑 또는 보라, 공업 노랑). 막대 탭 시 수요 상세. - 가운데: 도구 아이콘 한 줄. 구성: 구역 지정 아이콘 3종(구역/지구/자원 느낌) | 도로, 전기, 상수, 쓰레기, 교육, 소방, 경찰, 대중교통, 공원, Chirper 느낌의 말풍선, 지형 도구, 불도저(철거). 선택된 도구는 둥근 하늘색 원 배경으로 강조. - 오른쪽: 설정/공유 느낌 아이콘, 지도(미니맵), 통계 그래프, 정책/지구 아이콘, 스크린샷 버튼. - 모바일 세로 화면에서는 아이콘이 많으므로 가로 스크롤 또는 "더보기"로 접고, 선택 중인 도구는 항상 보이게 고정. 모든 버튼 44px 이상. - 상단에는 얇은 정보바(자금, 주간 수입/지출, 날짜/시간, 속도 일시정지/1x/2x/3x)를 따로 둬서 하단 바가 복잡해지지 않게 함. ## V3. 도구 패널 (하단 바 바로 위로 올라오는 패널) - 도구를 탭하면 하단 바 위에 패널이 올라옴. 위쪽에 서브 카테고리 탭 줄(예: 도로 → 기본 도로/고속도로/교차로 부품/회전교차로/주차/정비 등, 대중교통 → 버스/지하철/기차/택시/배/항공 등)이 있고, 오른쪽 위에 닫기 X 버튼. - 아래에 아이템 격자 카드(아이콘 중심, 선택된 카드는 하늘색 배경). 카드를 길게 누르면 이름, 비용, 유지비, 용량, 속도 설명 툴팁. - 패널은 아래로 스와이프해서 닫을 수 있고, 모바일 세로에서는 화면 높이의 40% 이하, 카드 가로 스크롤. - 잠긴 항목은 회색 + 자물쇠 + 해금 조건 표시. ## V4. 왼쪽 도구 옵션 패널 (건설 도구 선택 시에만 표시) - 하단 패널 왼쪽 위에 작은 패널로 표시하며, 모바일에서는 "옵션" 버튼으로 접고 펼침. - 항목: 1) 도구 모드: 직선 / 단순 곡선 / 복합 곡선 / 연속 곡선 / 격자 / 교체(업그레이드) 아이콘 6개. 2) 고도: ▼ [0m / 5m / 10m / 15m] ▲ 버튼과 현재 고도 표시. 고도가 0보다 크면 도로가 공중에 떠서 교각(기둥)이 땅까지 내려옴. 고도 눈금 아이콘으로 지면 고도/상대 고도 전환. 3) 평행 모드: 토글(도로를 평행하게 한 줄 더 설치). 4) 스냅: 아이콘 토글들(모두, 도로 가장자리, 구역 격자, 직각, 길이 단위, 각도, 격자 등). 5) 지형(Topography): 지형에 맞춤 / 평탄화 토글. - 고도, 교각, 평행 모드는 단순화해도 되지만 화면에서 실제로 보이고 작동해야 해. ## V5. 도로 설치 시각 연출 - 시작점부터 커서까지 흰색 굵은 가이드선(실선), 이어지는 연장선은 흰색 점선(대시) 표시. 시작점과 끝점에 흰색 원(노드 마커). - 설치 구간은 하늘색 반투명 하이라이트(가장자리 글로우). 설치 불가 구간은 빨간색. - 측정 라벨(반투명 어두운 둥근 칩): 각도(예: "∠ 180°"), 길이(예: "↔ 70 m"), 경사(예: "▲ -7 %"). 곡선에서는 각 구간마다 표시. - 비용 라벨: 초록 돈 아이콘 + "¢1,440". 라벨 아래에 안내 칩 2개("설치", "취소"). 모바일에서는 손가락이 가리지 않게 위쪽에 띄우고, 큰 "✓ 확정 / ✕ 취소" 버튼을 화면 하단 중앙에 표시. - 기존 도로/교량과 충돌하거나 문제가 있으면 주황색 마름모 경고 아이콘(공사/주의 표지)을 해당 지점에 띄움. - 교차로 설치 전에는 교차 지점에 흰 원 표시, 완성된 도로에는 차선 점선/실선, 방향 화살표, 속도 숫자(예: 55) 노면 표시, 횡단보도, 정지선이 보여야 함. ## V6. 오른쪽 가장자리 세로 원형 버튼 - 오른쪽 가장자리에 둥근 파란 버튼 3~4개 세로 배치: Chirper(파랑 새), 시민/인구 정보, 알림/보고서, 도시 통계. 각 버튼 탭 시 해당 패널이 열림. 안읽은 알림은 작은 점 표시. ## V7. 구역 표시 - 구역은 반투명 색 오버레이(주거 초록, 상업 파랑, 공업 노랑, 사무 보라)로 도로 옆 칸에 표시. 사무 건물은 보라빛 유리 외벽(반사되는 창 격자 패턴)으로, 상업은 파란 유리, 주거는 밝은 벽과 지붕 등 구역 색이 건물에서도 느껴지게. - 정보 보기에서는 건물과 지형이 색 히트맵으로 바뀌고 도로는 흰색 선으로 단순화. ## V8. 3D 장면 연출 (레퍼런스의 분위기) - 낮 장면: 따뜻한 햇빛(약간 노란 태양광), 길고 부드러운 그림자, 푸른 물 표면에 하늘/건물 반사, 먼 곳은 옅은 안개로 푸른 기운. 물가에 숲, 나무는 활엽수/침엽수/가을색 변형. - 도로 인프라: 고가 고속도로, 입체 교차로, 램프(원형 진입로), 교각 기둥, 현수교(주탑 + 케이블) 1종 이상, 가드레일, 방음벽, 가로등. 도로 노면은 아스팔트 질감 + 노란 중앙선(고속도로), 흰 차선, 연석. - 항공 시점(탑뷰)에서 보면 차선, 화살표, 차량이 선명하게 보이고, 가까이 확대하면 차량 종류(승용/트럭/버스)와 그림자가 구분됨. 물 위에 배(크루즈선 모양) 1종이 떠다님. - 굴뚝 연기, 먼 곳 건물 실루엣, 공원 숲 등으로 풍부한 분위기 연출. 모바일에서는 품질 프리셋에 따라 단계적으로 줄임. # 사양 ## A. 모바일 우선 원칙 - viewport: width=device-width, initial-scale=1, viewport-fit=cover, user-scalable=no. env(safe-area-inset-*) 적용. 세로/가로 지원, 회전 시 즉시 재배치. - 터치 대상 최소 44x44px, 간격 8px 이상, 중요한 UI는 엄지 닿는 아래쪽. hover 의존 금지(툴팁은 길게 누르기). - Pointer Events 통합, 캔버스 touch-action:none, 기본 제스처(당겨서 새로고침, 더블탭 확대, 길게 눌러 메뉴) 차단. - 첫 터치에서 AudioContext 활성화, 전체화면 버튼, 진동 피드백(설정에서 끔), visibilitychange/pagehide 시 일시정지 + 자동 저장. - 첫 실행 튜토리얼 3~4장(건너뛰기 가능). 건설 중 도구 사용법 힌트 칩 표시. ## B. 조작 - 카메라: 한 손가락 드래그 이동(관성), 핀치 확대/축소, 두 손가락 비틀기 회전, 두 손가락 위아래로 기울기(쿼터뷰↔탑뷰). 데스크톱: 마우스 드래그, 휠, 우클릭/Q·E 회전. 모든 움직임 보간. - 건설 도구 선택 시 한 손가락=건설, 두 손가락=카메라로 자동 전환. 도구 해제 X 버튼 항상 표시. - 도로: 시작점 탭 → 끝점 드래그 미리보기 → "확정 ✓ / 취소 ✕". 곡선은 제어점 드래그. 그리드/각도(15°) 스냅, 기존 도로 끝점 자동 스냅(스냅 반경 넉넉히). 고도 변경은 옵션 패널의 ▲▼. - 구역: 칠하듯 드래그, 붓 크기 3단계, 사각형 채우기 모드. 철거(불도저): 탭 또는 영역 선택 후 확정. - Undo/Redo 버튼 항상 표시. 건물/시민/차량 탭하면 정보 패널(터치 허용 반경 넉넉히). 길게 누르기 = 빠른 메뉴. ## C. 정보 패널과 기타 UI - 정보/예산/세율/정책/지구/설정/통계는 같은 남색 패널 스타일의 바텀 시트 또는 전체 모달(세로에서 높이 60% 이하). 슬라이더는 두껍고 손잡이는 크게. - 정보 보기(전력, 수도, 오염, 땅값, 교통, 행복도)는 하단 바 오른쪽 아이콘에서 선택. - Chirper 스타일 토스트(탭하면 해당 위치로 카메라 이동). 미니맵 + 전체 보기. - 설정: 그래픽 품질, 절전 모드, 소리/음악/진동, 조작 감도, 왼손잡이 모드, UI 크기, 언어(한국어 기본). ## D. 그래픽 기술 기준 (모바일 GPU) - 렌더러: sRGB, ACESFilmic, DPR 상한 1.5(자동 시 1.0까지), 가벼운 AA(렌더 스케일/FXAA). - 재질: 기본 Lambert 또는 가벼운 Standard, 고품질에서만 PBR/환경맵/물 반사. 그림자: 단일 DirectionalLight 1024 그림자맵 + 보이는 범위 추적, 낮음에서는 블롭 그림자. - 포스트 프로세싱: 모바일 기본 꺼짐, 높음에서만 약한 블룸/비네트/색보정. - 절차적 하늘(그라데이션+태양/달+별+구름), 낮밤 순환(색온도 변화), 밤에 창문/가로등/헤드라이트 발광, 거리 안개(하늘색과 일치). - 지형: 높이별 버텍스 컬러 + 작은 Canvas 텍스처(256~512px, 밉맵). 물: 가벼운 셰이더(노멀 스크롤+프레넬+수심색+하늘 반사), 오염 시 색 변화. 날씨(맑음/흐림/비) 단순 파티클. - 건물: 종류별 절차적 생성기(주택/아파트/상점/공장/오피스), 창문 아틀라스 공유, 레벨별 디테일, 랜덤 변형, 먼 건물은 박스 LOD. 건설 중 비계/크레인, 폐허, 화재(파티클+불빛). - 풍력 날개 회전, 굴뚝 연기, 서비스 차량 사이렌 점멸. 파티클 상한과 풀링. ## E. 성능과 배터리 - 프리셋: 절전/낮음/중간/높음/자동(모바일 기본 자동, 시작은 중간). 조절 항목: 렌더 스케일, DPR, 그림자, 포스트, 나무 밀도, 에이전트 표시 수, 파티클 수, 목표 FPS(30/60). - 자동 품질: 평균 프레임 시간으로 단계적 하향(렌더 스케일 → 그림자 → 포스트 → 나무 → 에이전트), 여유 시 천천히 상향(히스테리시스). - 절전 모드: 30fps, 낮은 스케일, 그림자/포스트 끔. 일시정지/무입력 시 렌더 빈도 감소. - InstancedMesh(건물, 나무, 차량, 보행자, 가로등), 정적 지오메트리 병합, 재사용, 프러스텀 컬링, 프레임당 new 금지, TypedArray. - 시뮬레이션/렌더 루프 분리(고정 타임스텝), 에이전트와 길찾기는 프레임당 ms 예산으로 분산(필요 시 Blob URL Web Worker). 먼 시민은 통계 처리. ## F. 게임 시스템 (전부 구현) 1. 맵: 타일 격자, 시작 9칸(3x3) 건설 가능, 마일스톤으로 최대 25칸 확장(잠긴 타일은 반투명+자물쇠). 시드 기반 노이즈로 평지/강/언덕/숲/광물·석유. 2. 도로: 골목길/2차선/큰길(4차선)/고속도로(건설비·유지비·용량·속도·구역 폭 차등), 직선·곡선, 고도(지상/고가/교량)와 교각, 자동 교차로, 램프, 철거. 도로에 붙은 칸만 구역 지정 가능. 3. 구역: 주거/상업/공업/사무. 건물 자동 건설(1x1~4x4), 레벨 1~5 성장·하락(땅값, 교육, 서비스 범위, 오염/소음), 폐허와 화재. 4. 수요(RCI): 일자리, 인구, 빈 건물, 세율, 만족도로 실시간 계산. 5. 시민: 개별 객체(집/직장/학교/쇼핑, 나이 4단계, 교육 수준), 출퇴근/쇼핑/등하교, 출생·사망·이주, 행복도 → 이주 반영. 6. 기반 시설: 전기(석탄/풍력/태양광, 전선 또는 도로 인접 공급, 부족 시 정전+아이콘), 상수/하수(양수장, 배출구, 강 하류 오염 흐름, 오염 시 질병), 쓰레기(매립장/소각장, 수거 트럭, 방치 시 문제). 건설비/유지비/용량. 7. 서비스: 소방서, 경찰서, 병원(구급차), 화장장/묘지, 초등/중등/대학, 공원/광장/스포츠. 영향 반경 링 표시, 서비스 차량이 실제 도로로 출동. 8. 교통(최우선): 시민과 차량 개별 에이전트, A*/다익스트라, 용량 초과 시 정체와 속도 저하, 교통 흐름 보기(초록-노랑-빨강), 정지/양보/신호등/로터리, 차선 유지와 차간 거리, 버스 노선(정류장을 순서대로 탭해 생성)과 지하철/기차 최소 1노선(이용 시 도로 교통량 감소), 보행자, 공업→상업 화물 트럭. 9. 경제: 시작 자금과 대출, 주간 정산(세금/유지비/이자), 구역별 세율 슬라이더, 서비스별 예산 슬라이더(80~150%), 파산 시 건설 불가 경고, 수입/지출 패널과 간단한 그래프. 10. 마일스톤: 인구 기준 13단계(Little Hamlet → Megalopolis), 단계 상승 시 새 건물/서비스/도로/정책/타일 해금과 알림 연출. 하단 바의 마일스톤 이름이 갱신됨. 11. 지구와 정책: 손가락으로 지구를 그려 이름 붙이기, 정책(대형 트럭 금지, 무료 대중교통, 고층 제한, 소음 규제 등)에 비용과 효과, 경계는 색 윤곽선. 12. 재난/이벤트: 화재, 홍수, 지진(화면 흔들림 약하게, 설정에서 끔)과 대응 시설, Chirper 시민 메시지. 13. 저장: localStorage 다중 슬롯 + 자동 저장(주기적, 백그라운드 진입 시, 큰 변화 시), 실패 시 안내. 효과음/배경음악은 Web Audio로 간단 생성, 음소거 버튼 상시 접근. # 코드 구조 - 섹션 주석: 상수/설정, 유틸, 입력/터치, 카메라, 렌더러/품질, 하늘/지형/물, 도로(고도 포함), 구역, 건물 생성기, 시민, 교통, 기반 시설, 서비스, 경제, 마일스톤/정책/지구, 재난, UI(하단 바/패널/옵션/오버레이 라벨), 저장, 메인 루프. - 모델은 기본 도형과 절차적 생성, 텍스처는 Canvas. 콘텐츠 수치는 데이터 테이블로 정의. 주석은 간결하게. # 최종 출력 형식 1. (한 줄) 완성 안내 2. 완성된 전체 코드 (코드블록 1개, 처음부터 끝까지) 3. 조작법 요약 (터치/마우스 각각 5줄 이내) 4. 알려진 한계 (있다면 3줄 이내) 검토 과정 로그는 출력하지 마. 마지막에 "검토 5회 완료, 수정한 주요 오류 수"만 한 줄로 알려줘. 이제 질문 없이 바로 시작해서 끝까지 완성해.

A system prompt was added to support web rendering