네온 골목, 새벽 두 시

비 오는 새벽 두 시, 노란 우산을 쓴 '우산 친구'와 한글 네온 골목을 걸으며 웅덩이에서 첨벙 뛰고, 잠든 간판을 깨우고, 빈 가게에 내 간판을 달아 엽서로 남기는 인터랙티브 야경이에요. ■ 이렇게 해 보세요 · 휴대폰: 좌우로 밀면 우산 친구가 걸어요(왼쪽으로 밀면 오른쪽으로). 바닥을 누르면 그리로 걸어가고, 웅덩이·잠든 간판·고양이·차양을 누르면 걸어가서 첨벙·깨우기·쓰다듬기·비 피하기를 해요. 우산 친구를 누르면 손 흔들기 → 우산 돌리기 → 깡충. 우산 친구 옆에 ◯ 버튼이 뜨면 눌러 보세요. · 컴퓨터: 끌기나 ← → 걷기, Space 멈춤, E 하기, ↑↓ 간판 고르기, J 반응, C 꾸미기, N 간판 달기, M 분위기, H 사진, G 골목, S 소리. 작품 화면을 한 번 누른 뒤에 키보드를 쓸 수 있어요. · 먼저 해 볼 것: 웅덩이 다섯 번 첨벙(음이 한 칸씩 올라가요), 잠든 간판('z') 밑에 서 있기, 고양이 쓰다듬기, 차양 밑에서 비 피하기. · [꾸미기]: 우산·옷·머리·소품으로 480가지 모습. 처음 화면을 누르면 머리 위에 우산 고르기 동그라미 넷이 잠깐 떠요. · [간판 달기]: 빈 가게('임대')에 내 문구(8자까지)를 달면 한 글자씩 불이 들어오고 골목 노래가 답해요. · [분위기]: 비 → 눈 → 맑음 → 새벽 5시. 눈이 오면 우산에 눈이 쌓이고, 새벽 5시엔 간판이 하나씩 꺼져요. · [사진]: 버튼이 사라지고 골목 번호·모습 번호와 우표만 남아요. 이때 캡처하면 엽서가 돼요. 우산 친구를 누르면 포즈가 바뀌어요. · 왼쪽 위 골목 번호를 누르면 다른 골목(0001~9999)으로 가요. 같은 번호면 누구에게나 같은 골목·간판·노래예요. ■ 엽서 추천 · 내 생일 골목 + 내 간판 + 고양이랑 · 눈 오는 날 우산에 쌓인 눈 · 새벽 5시 편의점 봉지 든 우산 친구 · 웅덩이 첨벙 뒤 브이 ■ 알아 두세요 · 소리는 화면을 누른 뒤에 나와요. 오른쪽 위 소리 버튼을 누르면 소리 크기 막대(처음 40)가 열리고, 한 번 더 누르면 소리가 꺼져요(마우스는 올리면 열리고 누르면 꺼져요). 꺼진 채로 막대를 움직이면 고른 크기로 다시 켜지고, 0으로 내리면 꺼져요. 키보드는 Tab으로 막대에 들어가 화살표로 고르고 Esc로 닫아요. 아이폰은 무음 모드면 소리가 나지 않아요. · 기기에서 '동작 줄이기'를 켜 두면 자동으로 걷기·화면 이동·튀는 움직임을 줄이고, 깜빡임은 1초에 3번 이하예요. · 이 사이트에서는 기록이 저장되지 않아요. 간판과 모습은 새로 고치면 사라지니 사진 모드로 남겨 두세요. · 위쪽 '전체화면'으로 크게 보면 엽서도 크게 남아요(맨 위 띠는 잘라 주세요). · 입력한 간판 문구는 이 화면에만 있고 어디로도 보내지 않아요. 간판에 달 수 없는 말은 달리지 않아요. · 간판 상호는 모두 지어낸 말이에요. 나올 수 있는 조합 1,110개를 알려진 상호 목록과 대조했어요. ■ 만든 과정 · Hotml 운영자가 Claude Code에게 예시 작품 3개의 기획서(PRD)를 쓰게 했고, 그대로 Claude Code가 코드를 만들었어요. 헤드리스 브라우저로 휴대폰 상자 6종과 화면 크기 8가지에서 조작을 시험하고 찍은 화면을 보며 고쳤어요. 작품 안에도 자체 시험이 90개 넘게 들어 있어요(주소 뒤 #test). · 2.0은 운영자의 요청(아래)을 받아 설계서를 새로 써서 다시 만들었어요. 우산 친구는 화면 높이의 17% 넘게, 윤곽선과 우산 밑 작은 불빛으로 늘 눈에 띄게 그렸어요. · 골목은 폭 480짜리 조각으로 끝없이 이어지고, 골목 번호를 난수의 씨앗으로 써서 같은 번호면 같은 골목이 나와요. · 간판은 폭 480 안에 많아야 둘, 하나하나에 제 음과 빛을 줬어요. 조각마다 평균 1.1개로, 1.x(창문 글씨까지 7.6개)보다 크게 줄였어요. · 소리는 전부 Web Audio로 합성했어요. 우산 위에 톡톡 떨어지는 빗소리, 골목 번호로 정해지는 느린 자장가(네 곡 중 하나, 우산 친구가 걸을 때만 흐르고 멈추면 쉬어요), 우산 친구의 작은 콧노래로 이루어져 있어요. 모든 음은 그 골목 노래의 음계 안에서만 나고, 높은 소리는 부드럽게 깎되 휴대폰 스피커로도 들리게 가운데 음역을 살렸어요. · 이미지·음악 파일과 외부 요청이 하나도 없는 HTML 한 장이에요. 기간: 2026년 10월 10일 기획, 10월 11~14일 제작·수정 ■ 사용한 프롬프트 · 처음 요청(원문): "여기에 운영자가 예시로 올릴 프로그램을 3개 만드려고 해. 3개로 사이트의 정체성을 표현할 수 있게 다양한 카테고리로 만들고싶어. 그리고 아무래도 예시 프로그램이니까 완성도도 엄청나게 만들고싶어. 우선 prd를 작성해줘." · 이어서 한 요청(원문): "셋 다 만들어서 사이트에 올리기 까지 해줘." · 2.0 요청(원문): "네온 골목 이거 소리를 아예 바꿔줘. 듣기 싫어. 그리고 이 게임에 아바타를 중점적으로 해서 다시 파일 올려줘. 그리고 간판이 너무 많아." · 이렇게 바꿔 보세요(직접 돌려 확인한 리믹스): "이 index.html의 '① 바꿔 보세요'에서 골목 #0001 대표 간판을 '졸업 축하해'로 바꾸고, 추천 문구 8개도 졸업·응원 인사로 바꿔 줘." ■ 사용한 AI 도구 · Claude Code (Claude Opus 5.5): 기획서, 코드, 시험·검증 · 이미지·음악 생성 도구는 쓰지 않았어요. ■ 소스 코드 · 작품 페이지의 '파일 다운로드'로 index.html을 받아 메모장이나 코드 편집기로 열어 보세요. 파일 하나(약 450KB)에 한국어 주석과 목차가 있고, 맨 위 '① 바꿔 보세요'에 숫자·색·문구를 모아 두었어요. ■ 바뀐 점 · 2026-10-12 버전 1.0 처음 공개 · 2026-10-12 버전 1.1 소리를 부드럽게 다듬고, 처음 소리 크기를 예전의 40%로 낮추고, 소리 크기 막대를 달았어요 · 2026-10-14 버전 2.0 우산 친구가 주인공이 되고, 소리를 새로 만들고(우산 빗소리·걸을 때만 흐르는 골목 자장가), 간판을 크게 줄였어요. 같은 번호라도 간판 자리·문구는 1.x와 달라요.