Antropic City
폭풍 구름 위에 통째로 떠 있는 1939년 아르데코 도시를 둘러보는 브라우저 3D 디오라마입니다. 가운데 계단식 고층 타워 앞 광장에는 트렌치코트에 안경을 쓴 미니피규어 영웅이 서 있고, 걷기 모드로 내려가 광장을 직접 걸을 수 있습니다. 비를 내리면 젖은 바닥에 가로등과 창이 비치고, 번개가 구름 속에서 번쩍이며 섬을 밝힙니다. 한 번에 준 긴 프롬프트 하나로 만들었고, 그 원문을 아래에 그대로 실었습니다.
여기서 바로 해 보기
아래 버튼을 누르면 이 페이지 안에서 실행됩니다. 누르기 전에는 게임 데이터를 받지 않으므로, 소개만 읽고 가셔도 됩니다. 설치도 로그인도 없습니다.
누구에게 필요한가요
누아르 영화나 아르데코 건축 분위기의 작은 3D 세계를 설치 없이 둘러보고 싶은 사람, 떠 있는 섬 디오라마를 이리저리 돌려 보고 그 안을 걸어 보고 싶은 사람, AI 코딩 도우미에게 세 단계짜리 긴 요구를 한 번에 줬을 때 어디까지 만들어 내는지 궁금한 사람
주요 기능
- 처음 화면은 섬 전체를 낮은 각도에서 잡은 홈 뷰다. 끌면 돌고, 오른쪽 끌기로 옮기고, 휠은 커서가 가리키는 쪽으로 다가간다. 섬 아래로 살짝 내려가 지층이 드러난 바위 밑면을 올려다볼 수도 있다. Reset view 를 누르면 처음 구도로 날아 돌아온다
- 섬 위에는 건물 26동이 선다. 첨탑에서 붉은 빛줄기를 쏘는 안트로픽 타워, 금 동상을 올린 법원, 실제 시각을 가리키는 문자판 둘의 시계탑, 남색 돔, 급수탑, 구리 피라미드 지붕 탑, 굴뚝 달린 벽돌 연립주택, 붉은 3량 기차가 오가는 아치 고가가 있고, 순환도로에는 1940년대 자동차 일곱 대가 돈다. 창문 1,377개 가운데 약 70%에 불이 켜져 있다
- V 키나 Walk 단추를 누르면 카메라가 광장으로 날아 내려가 영웅 뒤에 붙는다. WASD 로 걷고 Shift 로 달리며, 마우스로 시점을 돌리고 휠로 거리를 바꾼다. 영웅은 광장과 그 보도만 걸을 수 있고 차도 · 섬 가장자리 · 벤치 · 분수 · 건물을 통과하지 않는다. 휴대폰에서는 화면 왼쪽을 끌어 걷고 오른쪽을 끌어 둘러본다
- R 키나 Rain 단추로 비를 1.5초에 걸쳐 내리고 걷는다. 빗줄기가 카메라 둘레에 떨어지고, 바닥에 물튀김 고리가 퍼지고, 광장에 웅덩이가 생긴다. 젖은 바닥에는 가로등 불빛이 번져 비치고 영웅의 코트도 반들거린다. 비가 오면 번개가 훨씬 자주 친다
- 하늘은 속에서 빛나는 갈색 · 호박색 폭풍 구름이고, 그 사이에 적운 70개와 작은 떠 있는 섬 여덟이 저마다 다른 박자로 떠다닌다. 작은 섬에는 이끼 낀 윗면, 나무, 불 켜진 폐허, 물보라로 흩어지는 폭포가 있다
- 영웅은 키 1.8m 로 키운 미니피규어다. 한쪽 눈썹을 치켜올린 비뚤어진 미소, 두꺼운 사각 안경, 곱슬 250개로 만든 머리, 크래클 가죽 트렌치코트와 모자이크 조끼를 입었다. 가만히 두면 숨 쉬고 두리번거리다가 몇 초마다 집게손을 머리 높이로 들며 씩 웃는다
- 왼쪽 위 The hero 링크는 영웅을 받침대 위에서 돌려 보는 턴테이블로 간다. 정지 · 걷기 · 달리기, 얼굴 클로즈업, 참고 사진을 겹쳐 눈 · 눈썹 · 입 위치를 맞춰 보는 비교 오버레이가 있다. The prompt 링크를 누르면 이 도시를 만든 프롬프트 원문이 열리고 복사할 수 있다
제품 방향
한 번에 긴 요구를 담은 프롬프트를 AI 코딩 도우미(Claude Opus 5.5)에게 그대로 주고 만든 결과물입니다. 프롬프트는 세 단계로 나뉩니다. 도시를 짓고(1단계), 영웅을 따로 만들어 턴테이블과 얼굴 비교 도구로 다듬고(2단계), 둘을 합쳐 카메라 두 가지와 비, 폭풍 하늘을 얹는 것(3단계)입니다. 번들러 없이 ES 모듈과 three.js 0.169 만 쓰고, 1 단위를 1미터로 맞췄습니다.
움직이지 않는 도시는 재질별로 한 덩어리로 합쳐 그리고, 가로등 · 나무 · 창문 · 난간 기둥처럼 되풀이되는 것은 인스턴스로 그립니다. 진짜 점광원은 광장 가로등 여덟 개뿐이고 나머지 불빛은 빛나는 재질과 빛 번짐 효과로 냅니다. 영웅과 카메라는 떠다니는 섬을 기준으로 한 좌표에서 움직이고, 화면에 그릴 때만 세계 좌표로 바꿉니다. 그래서 섬이 흔들려도 영웅은 광장 위에 그대로 붙어 있습니다.
만들면서 걸린 것이 셋 있었습니다. 처음 열 때 17초 가까이 걸렸는데, 셰이더를 미리 컴파일한 대상(화면)과 실제로 그리는 대상(후처리용 렌더 타깃)의 설정이 달라 첫 프레임에 전부 다시 컴파일하고 있었기 때문입니다. 같은 대상으로 미리 컴파일하게 바꿔 6초 안팎으로 줄였습니다. 비 오는 밤에는 차가운 림 조명이 젖은 바닥에 반사돼 화면 한가운데 커다란 흰 번쩍임을 만들었는데, 조명을 더 높은 각도로 올려 반사점이 발밑으로 가게 고쳤습니다. 뒤에서 본 곱슬머리가 밤송이처럼 보이던 것은, 곱슬을 두피에서 바깥으로 세우지 않고 아래로 흘러내리게 눕혀서 고쳤습니다.
적용한 프롬프트
1. Antropic City 프롬프트 (원문, 영어)
PROMPT
Build "Antropic City": a noir style floating island diorama in three.js with a LEGO minifigure superhero who walks around a plaza in front of the main tower. Use plain ES modules and three.js 0.169.0 through an importmap from jsDelivr. No bundler, no npm. 1 unit = 1 meter. The style is a stylized game asset, not photoreal: simple primitives, clean silhouettes, soft bevels, emissive windows with bloom, soft shadows. Target 60 FPS on an ordinary laptop. Batch static geometry and use InstancedMesh for anything repeated (lamps, trees, windows, raindrops). Never allocate objects per frame. The reference images are the standard. If a number in this prompt disagrees with a reference, match the reference.
STAGE 1. THE CITY
A floating island with a rounded square top (superellipse), shown corner on (rotated 45 degrees). Around the edge: a thick light concrete parapet, square console pylons every 8 m, and a thin wrought iron railing. Underneath: an inverted low poly "diamond" cone with large flat shaded facets and rock strata running dark graphite, then a wide warm brown band, then dark grey, then near black at the tip. Black pipes with elbow bends and glowing amber portholes along the rim. The island slowly hovers and sways.
Around the perimeter: a ring road with dashed markings, curbs and sidewalks. Inside: a grid of streets and cobblestone crossings. Instanced lamp posts, with only 6 to 10 real PointLights near the plaza. A few blocky 1940s cars drive the ring road.
About 25 to 30 stepped art deco buildings in dark graphite and brown stone, with procedural window grids where about 70% of the windows glow warm amber. The centerpiece is Antropic Tower, a stepped ziggurat skyscraper with glowing pilasters, a spire firing a pulsing red orange light beam into the sky, a grand entrance with stairs, and a flickering neon sign reading "ANTROPIC CITY". Around it: a neoclassical courthouse with a golden statue, a clock tower with two glowing dials, a navy blue dome with a gold finial, a water tower on lattice legs, a copper pyramid roof tower, dark conical roof towers with gold spires, low brick tenements with chimneys, an arched viaduct with a red three car train, and conical trees in square planters.
In front of the tower entrance: a perfectly flat walkable plaza, about 34 by 26 m. Art deco sunburst paving, a central statue or fountain, benches, 8 lamps casting warm pools of light, planter trees, and colliders on everything.
Lighting: a cold moonlight directional light with shadows, a hemisphere light and a cold rim light. Warm light comes mostly from windows and lamps. ACES tone mapping, GTAO, UnrealBloom. Keep emissive and bloom restrained so the city never turns into a glowing blur.
Camera: OrbitControls with a home view that frames the whole island. A narrow fov (about 28) and a low elevation (about 11 degrees) keep the rock underside visible below the front corner.
UI in a minimal luxury style: an ANTROPIC CITY title in a thin, widely tracked serif, a small caps subtitle "NOIR DISTRICT · FLOATING ISLAND · EST. 1939", dark translucent pill buttons in the top right, a controls hint in the bottom left, and a "BUILDING ANTROPIC CITY…" loader.
STAGE 2. THE HERO
A LEGO minifigure scaled to 1.8 m with the classic proportions: a rounded cylinder head, a trapezoid torso, slightly bent arms, glossy black C shaped claw hands, a hip block and rectangular legs. The face must be recognizable almost 100% against the reference. Start by building an overlay comparison tool. Calibrate it on a large frontal crop of the reference, then iterate with screenshots until the features line up.
Head: a wide, masculine rounded cylinder with a strong jaw, cheek volume and a sculpted nose bump. Glossy minifigure yellow plastic with clearcoat.
Face print: a high resolution procedural canvas texture with planar front UVs. Thick dark brown brows, one raised and arched for an ironic, confident look. Almond eyes with blue teal irises and a catchlight. A crooked, hooked smirk on the same side as the raised brow. No lashes, liner, blush or wrinkles.
Glasses are real 3D geometry: thick rectangular black frames as a swept rim tube bent onto the curve of the face, with a bridge and temples running under the hair. The lenses are fully transmissive so the eyes stay visible, plus a rainbow iridescent tint film on each side. Partial transmission makes them look milky.
Hair: about 250 tight conical helix curls in dark chocolate, as round tubes with strand ridges, over a satin base helmet. Tall voluminous top, ears left free, and the curls cast no shadows (hard speckles on the forehead look wrong).
Outfit: a long black crackle textured trench coat with a raised collar and wide lapels, and silver angular inserts. Coat panels that flare out as he walks. A cracked mosaic graphite vest with silver buttons and a pocket watch chain. A white shirt, a black tie with a silver diamond pin, black trousers with silver inserts, and block shoes.
Animation via update(dt, speed): idle, walk and run blend smoothly. Idle has breathing and head glances, plus a signature gesture every few seconds: a raised claw hand at head height with a smirk.
Make a turntable page with a dark podium, warm key and cold rim lights, Idle/Walk/Run buttons, a face close up and a Compare overlay.
STAGE 3. THE CITY, THE HERO, CAMERAS AND RAIN
Parent the hero to the floating island root so he hovers with it. Run the controller, colliders, camera occluders and walk camera in island local space, converting to world space only for rendering. Spawn him on the plaza. He walks the plaza and its sidewalks only: never onto the car road, never off the edge, never through benches, statues or buildings.
Two camera modes. Explore: orbit, pan and zoom to cursor with damping, starting from the home view and able to dip slightly below the island. Walk (V key or button): a smooth flight to a third person camera with its own wider fov (about 50), WASD relative to the camera, Shift to run, pointer lock mouse look, the wheel for distance, and anti clipping against tall buildings. Returning to Explore compensates the fov change with a dolly so nothing jumps. Reset view flies home.
Rain (R key or button) fades in and out over about 1.5 s. GPU wrapped streaks in a cylinder around the camera (double sided, or the quads get culled), expanding ring splashes near the camera, puddles on the plaza, and wet surfaces with lower roughness and darker color so lamps and windows reflect. Slightly lower exposure and a stronger cold rim. The hero's coat gets shinier.
Replace the studio background with a storm sky: a full screen shader of fbm billowing clouds in warm brown and amber tones, lit from inside. About 70 depth sorted cumulus puff sprites around and below the island for parallax, kept clear of the island in the home view. Branching amber lightning bolts that flash inside the clouds and briefly light the island. Lightning is rare in clear weather and frequent and bright in the rain. Add 6 to 9 small floating islets in the style of the main island (low poly strata cones, mossy tops, trees, tiny ruins with lit windows, waterfalls dissolving into spray), each hovering at its own phase, placed to match the storm reference composition. Fog applies only to the distant islets, never to the city or the hero.
Final UI: Walk/Explore, Rain and Reset view pills, and a controls hint that changes with the mode. Zero console errors, 60 FPS with rain on, and screenshots of the overview, the plaza with the hero, and walking in the rain.2. 위 프롬프트를 한국어로 정리한 것
1단계. 도시
· 둥근 사각형 섬을 45도 돌려 모서리가 앞을 향하게 놓는다. 가장자리에 밝은 콘크리트 난간벽, 8m 마다 사각 기둥, 가는 철제 난간. 아래는 큰 면으로 깎은 거꾸로 선 바위 원뿔(짙은 회흑, 넓은 갈색 띠, 짙은 회색, 끝은 거의 검정)과 검은 배관, 호박색 현창. 섬은 천천히 떠오르내리며 흔들린다.
· 가장자리 순환도로(점선 · 연석 · 보도)와 안쪽 격자 도로, 자갈 횡단보도. 가로등은 인스턴스로 그리고 진짜 점광원은 광장 근처 6~10개만. 1940년대 자동차 몇 대가 순환도로를 돈다.
· 계단식 아르데코 건물 25~30동, 창의 약 70%가 호박색으로 빛난다. 중심은 안트로픽 타워(빛나는 기둥, 붉은 빛줄기를 쏘는 첨탑, 대계단, 깜박이는 네온 간판). 주변에 금 동상의 법원, 문자판 둘의 시계탑, 남색 돔, 급수탑, 구리 피라미드 지붕 탑, 원뿔 지붕 탑, 굴뚝 달린 벽돌 연립주택, 붉은 3량 기차의 아치 고가, 화분 속 원뿔 나무.
· 타워 앞 약 34x26m 의 평평한 광장: 햇살 무늬 포장, 분수나 동상, 벤치, 따뜻한 빛 웅덩이를 만드는 가로등 8개, 화분 나무, 모든 것에 충돌체.
· 차가운 달빛(그림자) · 반구광 · 차가운 림 조명. 따뜻한 빛은 주로 창과 가로등에서. ACES 톤매핑, GTAO, 블룸은 도시가 번진 빛 덩어리가 되지 않게 절제해서.
· 홈 뷰는 화각 약 28도, 고도 약 11도로 섬 전체와 앞 모서리 아래 바위 밑면이 보이게. UI 는 얇고 자간 넓은 세리프 제목, 작은 대문자 부제, 오른쪽 위 반투명 알약 단추, 왼쪽 아래 조작 안내, 로딩 문구.
2단계. 영웅
· 키 1.8m 로 키운 고전 미니피규어 비율: 둥근 원기둥 머리, 사다리꼴 몸통, 살짝 굽은 팔, 광택 검정 C 자 집게손, 엉덩이 블록, 사각 다리. 얼굴은 참고 이미지와 거의 똑같아야 해서, 먼저 겹쳐 보는 비교 도구를 만들고 크게 자른 정면 사진으로 맞춘 뒤 스크린샷으로 되풀이해 다듬는다.
· 머리: 넓고 남성적인 둥근 원기둥, 강한 턱, 볼 볼륨, 깎아 낸 코 융기, 클리어코트 노란 플라스틱.
· 얼굴 프린트(정면 평면 투영 텍스처): 짙은 갈색 굵은 눈썹, 한쪽은 치켜올린 아치(빈정거리듯 자신만만하게). 청록 홍채와 반사광이 있는 아몬드 눈. 치켜올린 눈썹 쪽으로 비뚤어진 갈고리 미소. 속눈썹 · 아이라인 · 볼터치 · 주름은 없음.
· 안경은 진짜 3D: 얼굴 곡면을 따라 휜 두꺼운 검은 사각 테, 코다리, 머리카락 밑으로 들어가는 다리. 알은 완전히 투과해 눈이 보이고 양쪽에 무지개 막(덜 투과하면 뿌옇게 보인다).
· 머리카락: 짙은 초콜릿색 원뿔 나선 곱슬 약 250개(결이 있는 둥근 관)를 새틴 바탕 위에. 위로 풍성하게, 귀는 드러나게, 곱슬은 그림자를 드리우지 않게.
· 옷: 크래클 무늬 검은 롱 트렌치코트(세운 깃, 넓은 라펠, 은색 각진 장식), 걸을 때 펄럭이는 자락, 금 간 모자이크 조끼와 은 단추 · 회중시계 줄, 흰 셔츠, 은 다이아몬드 핀의 검은 넥타이, 은 장식 검은 바지, 블록 신발.
· update(dt, speed) 로 정지 · 걷기 · 달리기를 부드럽게 섞는다. 정지 중에는 숨쉬기와 두리번거림, 몇 초마다 집게손을 머리 높이로 들며 씩 웃는 제스처.
· 턴테이블 페이지: 어두운 받침대, 따뜻한 키 조명과 차가운 림 조명, Idle/Walk/Run 단추, 얼굴 클로즈업, 비교 오버레이.
3단계. 합치기, 카메라, 비
· 영웅을 섬의 뿌리에 붙여 함께 떠다니게. 조종 · 충돌체 · 카메라 가림막 · 걷기 카메라는 섬 좌표에서 돌리고 그릴 때만 세계 좌표로. 광장에서 시작해 광장과 그 보도만 걷는다(차도, 가장자리 밖, 벤치 · 동상 · 건물 통과 금지).
· 탐색 모드: 감속이 있는 돌리기 · 옮기기 · 커서 쪽 확대, 홈 뷰에서 시작하고 섬 아래로 살짝 내려갈 수 있게.
· 걷기 모드(V 키나 단추): 넓은 화각(약 50도)의 3인칭 카메라로 부드럽게 날아가기, 카메라 기준 WASD, Shift 달리기, 포인터 잠금 마우스 시점, 휠로 거리, 높은 건물에 카메라가 박히지 않게. 탐색으로 돌아올 때 화각 차이를 돌리로 보정해 화면이 튀지 않게. Reset view 는 홈으로 날아간다.
· 비(R 키나 단추)는 약 1.5초에 걸쳐 들고 난다: 카메라 둘레 원기둥에서 GPU 로 감기는 빗줄기(양면, 아니면 면이 잘린다), 카메라 가까이 퍼지는 물튀김 고리, 광장 웅덩이, 거칠기를 낮추고 색을 어둡게 해 가로등과 창이 비치는 젖은 표면. 노출은 조금 낮추고 차가운 림은 조금 세게, 영웅의 코트는 더 반들거리게.
· 배경은 폭풍 하늘: 속에서 빛나는 갈색 · 호박색 fbm 구름 전체 화면 셰이더, 섬 둘레와 아래에 깊이 정렬한 적운 약 70개(홈 뷰에서 섬을 가리지 않게), 구름 속에서 번쩍이며 섬을 잠깐 밝히는 가지 번개(맑을 때는 드물게, 비 올 때는 자주 밝게). 같은 양식의 작은 떠 있는 섬 6~9개(지층 원뿔, 이끼 낀 윗면, 나무, 불 켜진 작은 폐허, 물보라로 흩어지는 폭포)가 저마다 다른 박자로 떠다닌다. 안개는 먼 작은 섬에만, 도시와 영웅에는 절대 걸지 않는다.
· 마지막 UI: Walk/Explore · Rain · Reset view 단추와 모드에 따라 바뀌는 조작 안내. 콘솔 오류 0, 비를 켜도 60 FPS, 전경 · 광장의 영웅 · 빗속 걷기 스크린샷.3. 이어서 준 요청 (원문)
제공한 프롬프트와 함께 ntsapp.dev에 올려줘
→ 반영한 것: 게임은 /antropic/ 에, 이 소개 페이지에는 프롬프트 원문(1번)과 한국어 정리(2번)를 실었다.
게임 안에서도 왼쪽 위 The prompt 링크로 같은 원문을 열고 복사할 수 있다.
허브에서는 휴대폰으로도 들어오므로 터치 걷기(화면 왼쪽 끌기로 이동, 멀리 끌면 달리기, 오른쪽 끌기로 시점)를 더했다.
현재 상태
프로토타입 공개
- 개발 시작2026년 10월
플레이 안내
- 프롬프트는 참고 이미지가 기준이라고 하지만 그 이미지는 받지 못했습니다. 그래서 얼굴과 작은 섬들의 배치는 글에 적힌 특징대로만 만들었고, 원래 의도한 모습과 얼마나 닮았는지는 확인하지 못했습니다. 턴테이블의 비교 오버레이에 정면 사진을 넣으면 맞춰 볼 수 있습니다
- 성능은 개발용 컴퓨터(외장 GPU)의 화면 없는 크롬에서만 쟀습니다(1600x900 에서 비를 켜고 걸어도 초당 60프레임). 내장 그래픽만 있는 노트북, 사파리와 파이어폭스에서는 확인하지 못했습니다. 내장 그래픽으로 보이면 해상도와 그림자 효과를 낮춰 시작하고, 느리면 해상도를 저절로 줄입니다
- 휴대폰 화면 배치와 터치 걷기는 브라우저의 휴대폰 흉내 모드로만 시험했습니다. 실제 휴대폰에서는 돌려 보지 못했습니다
- 도시 안의 영웅 안경알은 진짜 빛 투과 대신 비슷하게 보이는 투명한 무지개 막으로 그립니다. 투과 재질은 영웅이 보이는 동안 도시 전체를 한 번 더 그려야 해서입니다. 턴테이블에서는 진짜 투과 재질입니다
- 처음 열 때 3D 라이브러리와 글꼴을 공개 CDN 에서 받습니다. 그림 파일은 하나도 없고 건물 · 하늘 · 얼굴 프린트까지 모두 코드로 그립니다. 소리는 없습니다
- 아무것도 서버로 보내지 않습니다. 턴테이블의 비교 오버레이에 넣은 사진과 맞춤 값만 이 브라우저에 기억합니다
바로가기
써 보셨나요?
좋았던 점, 불편했던 점, 버그, 바라는 기능을 남겨 주세요. 읽어 본 뒤 공개하고, 고치는 데 씁니다.