코덱스로 수능 응원 3D 사이트 만들기

바탕화면에 suneung-gate 폴더를 만들고 거기서 작업해 줘.

규칙:
- 결과물은 index.html 파일 딱 하나야. CSS, 자바스크립트를 전부 이 파일 안에 넣어 줘.
- npm 설치나 빌드는 하지 마. 라이브러리는 CDN에서 importmap으로 불러 와.
  three.js는 https://cdn.jsdelivr.net/npm/three@0.170.0/build/three.module.js
  three/addons/는 https://cdn.jsdelivr.net/npm/three@0.170.0/examples/jsm/ 를 써.
- 이미지나 3D 모델 파일은 쓰지 마. 질감은 전부 캔버스로 그려서 만들어 줘.
- 단계가 끝날 때마다 이 폴더에서 python3 -m http.server 8765 로 로컬 서버를 백그라운드로 띄우고(이미 떠 있으면 그대로) 열 주소를 알려 줘.
  서버를 계속 띄워 둘 수 없으면 내가 터미널에 붙여 넣을 명령만 알려 줘.
- 단계마다 바꾼 내용을 세 줄 안으로 요약해 줘. 코드 전체를 화면에 다시 보여 주지는 마.
- 화면에 보이는 글자는 전부 한국어로, 쉬운 말로 써 줘.

수능날 아침 8시, 고등학교 교문 앞 풍경을 three.js 3D로 만들어 줘. 귀엽고 따뜻한 로우폴리 느낌이야.

하늘과 빛
- 하늘은 큰 구를 뒤집어서 캔버스 그라데이션을 입혀 줘. 위는 #7fb6e6, 가운데 #cfe3f2, 지평선 쪽은 #ffe2c4.
- 멀리 흰 구름 7개 정도. 구 4개를 납작하게 붙여서 만들어.
- 반구광(위 #e3f0ff, 아래 #8a7a60, 세기 1.25)과 아침 해(방향광 #ffe2b8, 세기 2.4, 위치 16,11,14)를 넣고 그림자를 켜 줘. 해가 낮아서 그림자가 길게 깔려야 해.
- 안개는 #dce8f0. 톤 매핑은 ACESFilmic, 노출 1.0.

교문 (교문 중심이 원점, 교문 폭은 8m)
- 기둥 두 개: 1.2×3.4×1.2 벽돌 박스. 벽돌 질감은 캔버스로 그려 줘(엇갈린 벽돌, 줄눈). x는 ±4.6.
- 기둥 위에 회색 갓, 그 위에 흰 공 모양 등.
- 기둥 사이 철문: 짙은 회색 쇠막대를 0.42m 간격으로 세우고, 가로대 3줄(높이 0.25, 1.3, 2.35).
- 왼쪽 기둥 앞면에 현판 「아지트고등학교 / 제7시험장」.
- 교문 위 4.4m 높이에 현수막. 흰 바탕에 빨간 굵은 글씨로 「수험생 여러분, 끝까지 힘내세요!」.
  글자가 현수막 밖으로 잘리지 않게 fillText의 최대 너비를 꼭 지정해 줘.
- 교문 양옆으로 벽돌 담장.

학교와 주변
- 교문 뒤 운동장(흙색), 그 뒤 24m 지점에 길이 34m, 높이 11m 학교 건물. 3층에 창문 12개씩, 창문은 하늘이 비친 유리색.
- 건물 가운데 위쪽에 시계. 바늘은 8시 정각(입실 마감 8시 10분 직전).
- 교문 앞은 보도블록, 그 앞은 아스팔트 도로. 도로는 카메라 뒤까지 넉넉하게 깔아서 화면 아래가 비지 않게.
- 양옆에 노랗게 물든 은행나무 6그루(갈색 줄기 + 노란 다면체 잎 덩어리).
- 바닥에 떨어진 은행잎 900장(InstancedMesh), 공중에서 천천히 흔들리며 떨어지는 잎 60장.

카메라와 화면
- 카메라는 교문 정면 조금 위에서 교문을 내려다보게 해 줘. 시야각 50도, (0, 1.5, 0)을 바라보게.
- 교문 기둥 양쪽이 화면 가로에 다 들어오도록 화면 비율에 맞춰 거리를 계산해 줘. 거리는 16.5~23 사이로 제한해.
  휴대폰 세로 화면에서도 교문이 보여야 해. 창 크기가 바뀌면 다시 계산해.
- 왼쪽 위에 둥근 반투명 칩으로 「수능 D-19」를 크게. 날짜는 한국 시간 기준으로 2026년 11월 19일까지 남은 날을 세 줘.
  당일이면 「오늘이 수능날」, 지나면 「수능 끝! 고생 많았어요」.
- 그 아래 작은 칩 두 개: 「교문 앞에 나 혼자 · 엿 0개」, 「제1교문」.

교문 앞에 귀여운 캐릭터를 세워 줘. 도형만으로 만들어.

생김새
- 몸통은 캡슐, 머리는 살구색 구, 검은 눈 두 개.
- 몸통과 같은 색 털모자(반구) + 꼭대기에 흰 방울, 흰 목도리(토러스).
- 팔 두 개는 어깨를 기준으로 돌아가게 그룹으로 만들고 끝에 벙어리장갑, 다리 두 개 끝에 갈색 장화.
- 색은 12가지 중에서 무작위: #e76f51 #2a9d8f #457b9d #9b5de5 #f4a261 #588157 #d62828 #3a86ff #bc6c25 #6d597a #219ebc #c9184a

이름
- 머리 위에 이름표를 CSS2DRenderer로 띄워 줘. 반투명 검은 둥근 칩, 흰 글씨.
- 이름은 들어올 때마다 「형용사 + 동물」로 새로 뽑아.
  형용사: 합격할, 졸린, 찹쌀떡 든, 든든한, 따뜻한, 반짝이는, 차분한, 씩씩한, 말랑한, 잠 못 드는, 배부른, 용감한
  동물: 다람쥐, 수달, 고양이, 부엉이, 여우, 펭귄, 곰, 토끼, 오리, 고슴도치, 강아지, 너구리
- 내 캐릭터는 이름 뒤에 (나)를 붙이고, 이름표를 노란색(#f2b84b) 바탕에 진한 글씨로.

서는 자리
- 자리는 12개. 앞줄 7개는 교문에서 4.6m, 뒷줄 5개는 6.2m 떨어진 곳에 1.35m 간격으로.
- 앞줄 가운데부터 채워 줘. 교문 쪽을 보고 서 있게.
- 가만히 있을 때는 몸이 아주 살짝 위아래로 숨쉬듯 움직이게.

화면 아래 가운데에 입력 바를 만들어 줘.
- 반투명 어두운 둥근 바 안에 입력칸 + 노란 「엿 붙이기」 버튼. 폭은 최대 560px, 휴대폰에서는 양옆 16px 여백.
- 입력칸 안내 문구는 「예) 김현준 서울대 무조건 간다」, 최대 30자.

버튼을 누르면 내 캐릭터가 이렇게 움직이게 해 줘.
1. 교문 앞(교문에서 0.75m)까지 걸어간다. 걷는 동안 다리와 팔을 번갈아 흔들고 몸이 살짝 통통 튄다. 가는 방향을 바라본다.
2. 교문을 보고 오른팔을 위로 들어 철문 쇠막대에 엿을 붙인다.
3. 꾸벅 인사한다(몸을 앞으로 숙였다 편다).
4. 원래 자리로 걸어 돌아와 다시 교문 쪽을 본다.
움직이는 동안에는 버튼을 잠깐 막아 줘.

엿
- 갈색 캡슐(반지름 0.07, 길이 0.5)에 흰 테이프 조각을 붙인 모양. 은은하게 빛나는 느낌(약한 emissive).
- 붙는 높이는 1.25~2.2m 사이로 해 줘. 캐릭터 머리보다 높아야 앞에 선 캐릭터에 가리지 않아.
- 내 자리 근처 쇠막대에, 살짝 비스듬하게. 붙는 순간 톡 튀어나오듯 커졌다 제자리로.
- 위쪽 칩의 엿 개수를 올려 줘.
- 아래 가운데에 잠깐 알림을 띄워 줘: 「응원을 붙였어요. 교문 앞 사람들이 다 같이 봐요」 (응원 없이 붙이면 「엿을 붙였어요」)

같은 주소로 들어온 사람들이 교문 앞에 같이 서 있게 해 줘. 서버는 두지 마.
브라우저끼리 바로 연결하는 trystero 라이브러리를 써 줘.
importmap에 "trystero": "https://cdn.jsdelivr.net/npm/trystero@0.26.0/nostr/+esm" 로 넣고 joinRoom, selfId를 가져와.
appId는 "simya-suneung-gate-2027".

주의: trystero 0.26은 예전 버전과 쓰는 법이 달라.
- room.makeAction('이름')은 배열이 아니라 객체를 돌려줘. 보낼 때는 action.send(data, { target: peerId }), 받을 때는 action.onMessage = (data, { peerId }) => {}.
- 들어오고 나가는 사람은 room.onPeerJoin = id => {}, room.onPeerLeave = id => {} 처럼 대입해.
- 라이브러리를 못 불러오면 혼자 모드로 열리고 「혼자 모드예요. 인터넷 연결을 확인해 주세요」를 띄워.

주고받는 메시지는 세 가지야.
- hello: 내 이름, 색, 자리 번호. 누가 새로 들어오면 그 사람에게 보낸다.
- stick: 엿 id, 위치(x, y), 기울기, 응원 한마디. 엿을 붙일 때 모두에게 보낸다.
- yeots: 지금까지 붙은 엿 목록. 새로 들어온 사람에게 한 번 보낸다.

규칙
- hello를 받으면 그 사람 캐릭터를 그 자리에 세워. 나와 같은 자리를 골랐으면 id가 큰 쪽이 빈자리로 옮기고 hello를 다시 보내.
- stick을 받으면 그 사람 캐릭터가 걸어가서 붙이고 꾸벅 인사하고 돌아오게(내 캐릭터와 같은 동작).
- 교문 하나에 12명까지. 들어온 뒤 3초 기다려서 이미 12명이면 그 방을 나가고 gate-2, gate-3 … 으로 옮겨. 칩에 「제2교문」처럼 표시.
- 사람이 나가면 그 캐릭터를 지워.
- 위쪽 칩의 사람 수는 「나 + 다른 접속자 수」로 세 줘. 혼자면 「교문 앞에 나 혼자」, 둘 이상이면 「교문 앞에 N명」.
- 들어오면 「N명이 먼저 와 있어요」 또는 「첫 번째로 왔어요. 친구를 불러 보세요」 알림.

아무도 없을 때도 교문이 비어 보이지 않게 동네 주민 4명을 기본으로 세워 줘.
- 이름: 문방구 사장님 (주민), 경비 아저씨 (주민), 옆 반 선생님 (주민), 붕어빵 아줌마 (주민). 이름표는 조금 흐리게.
- 자리: (-4.3, 2.3), (4.3, 2.3), (-3.2, 7.4), (3.2, 7.4). 휴대폰 세로 화면에서도 보이는 자리야.
- 12~32초에 한 번씩 걸어가서 엿을 붙이고 돌아와. 응원은 이 중에서 무작위:
  수험생 모두 화이팅 / 찍은 것도 다 맞아라 / 끝까지 힘내요 / 떨지 말고 평소처럼 / 올해 수험생 전원 합격 / 따뜻하게 입고 가요
- 주민은 내 화면에만 있어. 다른 사람한테 보내지 말고, 새로 온 사람에게 넘기는 엿 목록에도 넣지 마.
- 사람 수에는 세지 마. 주소 뒤에 ?npc=0 을 붙이면 주민이 안 나오게.

엿을 붙일 때 적은 응원을 교문 앞에 있는 사람들이 다 같이 보게 해 줘. 어디에도 저장하지는 마.

보이는 방식 (응원이 많아도 겹쳐서 안 읽히는 일이 없게)
- 새 응원은 붙은 엿 바로 위에 쪽지로 6초 동안 크게 떴다가 사라진다.
  쪽지: 흰 바탕, 빨간 굵은 글씨(#b3261e), 빨간 테두리, 살짝 기울어짐. 내 응원은 노란 바탕.
- 동시에 오른쪽 위 「교문에 붙은 응원 N」 목록 맨 위에 들어간다. 반투명 어두운 패널, 최대 60개, 넘치면 스크롤.
  내 응원은 노란빛으로 칠하고, 주민 응원은 흐리게 하고 뒤에 「· 주민」을 작게 붙여.
- 목록의 응원이나 교문의 엿을 누르면 그 쪽지가 교문 위에 다시 6초 뜬다.
- 나중에 들어온 사람이 넘겨받은 예전 응원은 목록에만 넣고 교문에는 띄우지 마.
- 휴대폰(폭 600px 이하)에서는 목록을 입력 바 바로 위에 낮게 깔아 줘.

막기
- 욕이나 비하하는 말, 홍보 링크는 붙지 않게 해 줘. 띄어쓰기나 기호를 섞어서 피해 가는 것도 막아야 해.
  (기호·띄어쓰기를 다 지운 뒤에 금지어가 들어 있는지 봐 줘. 예: 「씨 발」도 막혀야 해)
- 링크: http, www, .com, .kr, .net, 오픈채팅, 카톡, 텔레 가 들어가면 막아.
- 막히면 붙이지 말고 「그 말은 붙일 수 없어요. 다른 응원으로 적어 주세요」 알림.
- 받는 쪽에서도 똑같이 한 번 더 걸러 줘. 누가 코드를 고쳐서 보내도 화면에 안 뜨게.

오른쪽 위에 「친구 부르기」 버튼을 만들어 줘.
- 누르면 무작위 코드로 ?gate=코드 주소를 만들어서 클립보드에 복사하고 「우리끼리 교문 주소를 복사했어요」 알림을 띄운 뒤 그 주소로 이동해.
- ?gate=코드 로 들어오면 공개 교문이 아니라 그 코드의 방으로 들어가고, 칩에 「우리끼리 교문」이라고 표시. 12명 제한으로 옮기지 않아.
- 휴대폰에서는 오른쪽 위 응원 목록과 겹치지 않게 해 줘.

다 됐으면 GitHub에 suneung-gate 라는 공개 저장소를 만들어서 이 폴더를 올리고 GitHub Pages로 공개해 줘.
gh 명령어를 써. 빌드 없이 main 브랜치 루트를 그대로 공개하고, .nojekyll 파일도 넣어 줘.
공개 주소가 열릴 때까지 기다렸다가 알려 줘.

휴대폰으로 보니까 교문이 화면 밖으로 잘려. 세로 화면에서도 교문이 보이게 해 줘.

응원이 10개 넘으니까 쪽지끼리 겹쳐서 읽기 어려워. 새 응원만 잠깐 크게 띄우고 나머지는 옆에 목록으로 모아 줘.

창 두 개를 열었는데 서로 안 보여. 브라우저 콘솔 에러부터 보고 원인을 찾아서 고쳐 줘.