너는 모바일 게임 전문 개발자이자 테크니컬 아티스트야. Cities: Skylines(도시 건설 시뮬레이션)...

Prompt

너는 모바일 게임 전문 개발자이자 테크니컬 아티스트야. Cities: Skylines(도시 건설 시뮬레이션)와 최대한 비슷한 게임을 "스마트폰/태블릿 터치 화면을 1순위로 설계"해서, 브라우저에서 바로 실행되는 "단일 HTML 파일"(HTML+CSS+JavaScript, 외부 이미지/모델 파일 없음)로 만들어 줘. 렌더링은 Three.js(CDN, 버전 고정 예: r160)를 쓰고, UI는 HTML/CSS로 만들어 줘. 데스크톱(마우스/키보드)과 크롬북도 지원하지만, 모든 설계 결정은 "모바일에서 먼저 쾌적한가"를 기준으로 해 줘. 목표는 중급 스마트폰에서도 30fps 이상, 발열과 배터리 소모를 줄이면서 보기 좋은 비주얼. 코드는 생략 없이 끝까지 완성된 상태로 줘. ## 0. 모바일 우선 원칙 - <meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover, user-scalable=no"> 사용. 노치/홈바 영역은 env(safe-area-inset-*)로 피하기. - 세로(portrait)와 가로(landscape) 모두 지원. 화면 회전 시 UI와 캔버스 크기가 즉시 재배치됨. 기본 추천은 가로지만 세로에서도 모든 기능을 쓸 수 있어야 함. - 모든 터치 대상은 최소 44x44px, 버튼 사이 간격 8px 이상. 손가락으로 가리지 않도록 중요한 정보는 손이 닿는 아래쪽/가장자리에 배치(엄지 영역 고려). - hover에 의존하는 기능 금지(툴팁은 길게 누르기로 대체). 모든 기능은 터치만으로 가능해야 함. 키보드 단축키는 보너스. - 캔버스에 touch-action: none, 브라우저 기본 제스처(당겨서 새로고침, 더블탭 확대, 길게 눌러 메뉴) 차단. overscroll-behavior: none. - Pointer Events로 마우스/터치/펜 입력을 통합 처리. - 첫 터치 시 오디오 잠금 해제(AudioContext resume). 전체화면 버튼 제공. 진동 피드백(navigator.vibrate)은 지원되는 기기에서 짧게 사용하고 설정에서 끌 수 있게. - 탭이 백그라운드로 가면(visibilitychange/pagehide) 렌더/시뮬레이션 일시정지 + 즉시 자동 저장. - 첫 실행 시 터치 조작을 알려주는 짧은 튜토리얼(3~4장, 건너뛰기 가능). ## 1. 터치 조작 (카메라와 건설) - 카메라: 한 손가락 드래그 = 이동(관성 감속), 두 손가락 핀치 = 확대/축소, 두 손가락 비틀기 = 회전, 두 손가락 위아래 드래그 = 기울기(쿼터뷰↔탑뷰). 화면 한쪽에 회전/시점 전환/현재 위치 초기화 버튼도 제공. - 건설 모드와 카메라 조작 충돌 방지: 건설 도구를 선택하면 "한 손가락 = 건설", "두 손가락 = 카메라"로 자동 전환. 도구 선택 해제용 큰 X 버튼 항상 표시. - 도로 설치: 시작점을 탭 → 끝점을 드래그해 미리보기 → 하단의 "확정(✓) / 취소(✕)" 큰 버튼으로 설치. 손가락이 가리지 않도록 미리보기와 비용 라벨을 손가락 위쪽에 띄움. 곡선은 중간 제어점을 드래그해 조절. 그리드 스냅과 각도 스냅(15°) 옵션. - 구역 지정: 손가락으로 칠하듯 드래그. 붓 크기(작게/중간/크게) 버튼, "사각형으로 채우기" 모드 제공. - 철거: 탭 또는 드래그 영역 선택 후 확정. - 실행 취소(Undo)/다시 실행(Redo) 버튼을 항상 눈에 띄게 배치(실수 방지가 모바일에서는 핵심). - 건물/시민/차량 선택: 탭하면 정보 패널. 겹쳐 있어 누르기 어려운 대상은 터치 영역을 넉넉하게(레이캐스트 허용 반경 확대). - 길게 누르기: 해당 위치의 빠른 메뉴(철거, 정보, 구역 지정). ## 2. 모바일 UI 레이아웃 - 상단 바(얇게): 자금, 주간 수입/지출, 인구, 날짜, 속도(일시정지/1x/2x/3x) 컴팩트 표시. 자세한 내용은 탭하면 펼쳐지는 패널. - 왼쪽 위: RCI 수요 막대(작고 세로형). 탭하면 상세. - 하단 도구 모음: 메인 카테고리 아이콘 5~6개(도로, 구역, 전기/수도, 서비스, 교통, 더보기)를 한 줄로 배치. 카테고리를 탭하면 "바텀 시트"가 올라와 세부 도구를 가로 스크롤 카드로 표시(이름, 아이콘, 비용). 시트는 아래로 스와이프해 닫기. - 정보 패널(건물/시민 상세), 예산/세율, 정책, 지구, 설정은 모두 바텀 시트 또는 전체화면 모달로 표시. 세로 화면에서는 화면 높이의 60% 이하로 열어 맵이 보이게 하고, 슬라이더는 손가락으로 조작하기 쉬운 크기(두꺼운 트랙, 큰 손잡이). - 정보 보기(Info Views)는 우측 가장자리의 작은 버튼 하나에서 선택(전력, 수도, 오염, 땅값, 교통, 행복도). - 알림/Chirper는 상단에 작게 나타났다 자동으로 사라지는 토스트로 표시하고, 탭하면 해당 위치로 카메라 이동. - 글자 크기 최소 14px, 숫자는 읽기 쉽게 K/M 단위로 축약. 어두운 테마 기본, 야외에서도 보이도록 대비를 충분히. - 설치 전 미리보기(반투명 고스트)와 비용 표시, 설치 불가 시 빨간색과 사유 문구 표시. ## 3. 그래픽 (모바일 GPU 기준으로 설계) - 전체 스타일: 미니어처/디오라마 느낌, 부드러운 색감과 깔끔한 실루엣. 모바일에서는 "저비용 고효율" 표현을 우선(버텍스 컬러, 가벼운 셰이더, 베이크된 느낌의 조명). - 렌더러: sRGB 출력, ACESFilmic 톤매핑, devicePixelRatio는 모바일에서 최대 1.5(자동 조절 시 1.0까지). antialias는 끄고 가벼운 FXAA/SMAA 또는 렌더 스케일로 대체. powerPreference: "high-performance". - 재질: 기본은 MeshLambertMaterial 또는 가벼운 MeshStandardMaterial. 비싼 재질은 "높음" 이상 품질에서만. 환경맵은 작은 해상도(PMREM)로 한 번만 생성. - 그림자: 모바일 기본은 단일 DirectionalLight, 1024 해상도 그림자맵, 카메라가 보는 범위만 따라다니는 그림자 프러스텀. 확대(가까이)했을 때만 정밀하게. "낮음"에서는 그림자 끄고 건물 하단 블롭 그림자(원형 그라데이션 데칼)로 대체. - 포스트 프로세싱: 모바일 기본은 꺼짐 또는 가벼운 블룸 1패스(밤에만). 틸트시프트·비네트는 "높음" 이상에서만. - 하늘/낮밤: 절차적 하늘 셰이더(그라데이션 + 태양/달 + 별, 구름은 가벼운 레이어 몇 장). 밤에는 창문 emissive, 가로등, 헤드라이트. 새벽/노을 색온도 변화. 거리 기반 안개로 먼 곳은 단순하게. - 지형: 높이별 버텍스 컬러와 작은 타일링 텍스처 블렌딩(잔디→흙→바위→눈), 해안 모래색. 텍스처는 모두 Canvas로 절차적 생성하되 모바일은 256~512px 이하, 밉맵 사용. - 물: 가벼운 셰이더(노멀맵 스크롤 + 프레넬 + 수심 색). 모바일 낮음 설정에서는 단색 반투명 + UV 스크롤만. 오염된 물은 색 변화. - 날씨(맑음/흐림/비): 비 파티클은 수를 제한한 Points로, 젖은 도로 효과는 roughness만 조절. - 도로 비주얼: 아스팔트 텍스처, 차선/횡단보도, 연석, 가로수, 가로등. 고속도로는 가드레일. 지형에 맞춰 깔림. 도로 지오메트리는 청크 단위로 병합. - 건물: 종류별(주택/아파트/상점/공장/오피스) 절차적 생성기, 창문 텍스처 아틀라스 1장 공유, 레벨별 디테일 증가, 색/높이/지붕 변형. 멀리 있는 건물은 단순 박스 LOD. - 화재/연기/발전소 굴뚝 연기는 파티클 수 상한을 두고 오브젝트 풀링. ## 4. 성능과 배터리 (모바일 핵심) - 그래픽 품질 프리셋: 절전 / 낮음 / 중간 / 높음 / 자동. 모바일 감지(터치 지원 + 화면 크기 + 기기 메모리 힌트) 시 기본값은 "자동(시작은 중간)". 항목: 렌더 스케일, DPR 상한, 그림자 on/off·해상도·거리, 포스트 효과, 나무 밀도, 보행자·차량 표시 수, 파티클 수, 목표 FPS(30/60). - 자동 품질: 최근 몇 초의 평균 프레임 시간을 측정해 느리면 단계적으로(렌더 스케일 → 그림자 → 포스트 → 나무 밀도 → 에이전트 표시 수) 낮추고, 충분히 여유 있으면 천천히 올림(깜빡임 방지용 히스테리시스). - "절전 모드": 30fps 제한, 낮은 렌더 스케일, 그림자·포스트 끔. 일시정지 중이거나 입력이 없을 때는 렌더 빈도를 낮춤(필요할 때만 다시 그리기). - 건물, 나무, 차량, 보행자, 가로등은 InstancedMesh. 정적 지오메트리 병합, 재질/지오메트리 재사용, 프러스텀 컬링, 드로우콜 수 최소화. 매 프레임 객체 생성(new) 금지(GC 끊김 방지), 임시 벡터/행렬 재사용. - 시뮬레이션 루프와 렌더 루프를 분리(고정 타임스텝). 시민/차량/길찾기는 프레임당 예산(ms)을 정해 일부만 갱신하고 분산 처리. 화면 밖 에이전트는 단순화. - 메모리 절약: 텍스처 크기 제한, 사용하지 않는 리소스 dispose, 큰 배열은 TypedArray 사용. - WebGL 미지원/컨텍스트 소실(webglcontextlost) 시 복구 처리와 안내 메시지. ## 5. 맵과 지형 - 격자(타일) 기반 맵. 처음에는 9칸(3x3 타일 구역)만 건설 가능, 마일스톤을 달성하면 최대 25칸까지 확장. 모바일 화면에 맞게 맵 전체가 한눈에 보이는 "전체 보기" 버튼 제공(미니맵 포함, 탭하면 그 위치로 이동). - 지형: 평지, 강(물), 언덕, 숲, 광물/석유 자원을 시드 기반 노이즈로 자동 생성. 타일 경계는 화면에서 부드럽게 표시, 잠긴 타일은 반투명 + 자물쇠 아이콘. ## 6. 도로 시스템 - 도로 종류: 골목길, 2차선 도로, 큰길(4차선), 고속도로. 종류마다 건설비, 유지비, 차량 수용량, 속도, 주변 구역 폭이 다름. - 직선/곡선(베지어) 설치, 교차로 자동 생성, 철거 도구. 도로 양옆 일정 깊이까지만 구역 지정 가능. - 터치 편의: 도로 끝점이 기존 도로 근처면 자동 스냅(스냅 반경은 손가락 크기 고려해 넉넉하게). ## 7. 구역(Zoning)과 건물 - 초록 주거 / 파랑 상업 / 노랑 공업 / 보라(또는 하늘색) 사무 구역. 반투명 격자 오버레이로 표시. - 건물이 시간이 지나며 자동 건설(건설 중 비계/크레인 애니메이션). 건물 크기는 칸 수(1x1~4x4)에 맞춤. - 레벨 1~5 성장/하락(땅값, 교육, 서비스 범위, 오염/소음). 레벨이 오르면 더 크고 화려해짐. 폐허와 화재 상태 구현. ## 8. 수요(RCI)와 시민 - 일자리, 인구, 빈 건물, 세율, 만족도로 실시간 수요 계산. - 시민(Cims)을 개별 객체로 시뮬레이션: 집/직장/학교/쇼핑 장소, 나이(아이/청년/성인/노인), 교육 수준, 출퇴근·쇼핑·등하교. 출생, 사망, 이주, 행복도 계산. (모바일 성능을 위해 먼 곳의 시민은 통계 처리하고, 화면 근처만 개별 렌더) ## 9. 기반 시설 - 전기(발전소: 석탄/풍력/태양광, 전선 또는 도로 인접 공급, 부족 시 정전 + 아이콘), 상수/하수(양수장, 하수 배출구, 강 하류 오염 흐름, 오염 시 시민 질병), 쓰레기(매립장/소각장, 수거 트럭). 각각 건설비, 유지비, 용량. 풍력 날개 회전, 굴뚝 연기 등 움직이는 디테일. ## 10. 공공 서비스 - 소방서, 경찰서, 병원(구급차), 화장장/묘지, 초등/중등/대학, 공원/광장/스포츠 시설. 영향 범위를 선택 시 부드러운 링으로 표시. 서비스 차량이 사이렌 라이트를 깜빡이며 실제 출동. ## 11. 교통 시뮬레이션 (가장 중요) - 시민과 차량이 개별 에이전트로 A* 또는 다익스트라 길찾기. 길찾기는 Web Worker 또는 프레임 분산으로 처리해 끊김 방지(Worker는 Blob URL로 단일 파일 유지). - 도로 용량 초과 시 정체와 속도 저하. 교통 흐름 보기(초록-노랑-빨강). - 교차로: 정지/양보, 신호등(간단한 주기), 로터리. 차선 유지와 앞차 간격 유지. - 대중교통: 버스 노선(정류장 설치 + 노선 그리기, 터치로 정류장을 차례로 탭해서 노선 생성), 지하철/기차 노선 최소 하나. 보행자와 화물 트럭(공업→상업)도 존재. ## 12. 경제, 마일스톤, 지구/정책, 재난 - 경제: 시작 자금과 대출, 주간 정산(세금 수입, 유지비·이자 지출), 구역별 세율 슬라이더, 서비스별 예산 슬라이더, 파산 시 건설 불가 경고, 수입/지출 패널과 간단한 그래프. - 마일스톤: 인구 기준 13단계(Little Hamlet → Megalopolis). 단계 상승 시 새 건물/서비스/도로/정책/맵 타일 해금과 알림 연출. - 지구(Districts): 손가락으로 그려서 이름 붙이고 정책 적용(대형 트럭 금지, 무료 대중교통, 고층 제한, 소음 규제 등, 비용과 효과). 경계는 색 있는 윤곽선. - 재난: 화재, 홍수, 지진(화면 흔들림은 약하게 + 설정에서 끄기 가능)과 대응 시설. Chirper 스타일 짧은 시민 메시지. ## 13. 저장과 설정 - localStorage에 여러 슬롯 저장 + 자동 저장(일정 간격, 앱이 백그라운드로 갈 때, 도시 상태가 크게 바뀔 때). 저장 데이터는 압축/간소화해서 용량 제한을 넘지 않게 하고, 실패하면 안내 메시지. - 설정 패널: 그래픽 품질, 절전 모드, 소리/음악/진동 on-off, 조작 감도, 왼손잡이 모드(UI 좌우 반전), UI 크기(작게/보통/크게), 언어(한국어 기본). - 효과음/배경음악은 Web Audio API로 간단히 생성. 음소거 버튼은 항상 접근 가능하게. ## 14. 코드 구조 - 구역을 나눠 주석으로 설명(입력/터치, 카메라, 렌더러/품질, 맵/지형, 도로, 구역, 건물 생성기, 시민, 교통, 경제, UI, 저장). - 3D 모델은 외부 파일 없이 기본 도형 조합과 절차적 생성, 텍스처는 Canvas로 생성. ## 15. 작업 방식 - 단계별로 만들고, 각 단계가 모바일에서 바로 실행 가능한 상태로 끝나게 해 줘. 1) 터치 카메라 + 렌더러/품질 시스템 + 하늘/지형 + 도로(바텀 시트 UI 포함) → 2) 구역+건물 생성기+성장 → 3) 전기/수도 → 4) 시민+교통 → 5) 서비스 → 6) 경제/세금 → 7) 마일스톤/정책/지구 → 8) 재난/날씨/저장/설정/포스트 프로세싱 다듬기 - 매 단계가 끝날 때 넣은 기능과 "터치 조작법"을 짧게 설명해 줘. - 버그가 생기면 원인을 설명하고 고친 전체 코드를 다시 줘. 작업이 끝나면 검토 2번을 꼭 해. 무조건 게임을 끝까지 만들고 검토한 후 완성해서 작업을 끝내.

A system prompt was added to support web rendering