한국어 번역
오리지널 모바일 게임 「하이라이트 모먼트」 모션을 만들어 주세요: [주체, 예: 보물상자 열기 / 티어 승급 / 업적 달성 / 보스 드롭 / 캐릭터 레벨업].
바로 열 수 있는 단일 파일 웹페이지(HTML + CSS + JS)로 만들어 주세요. 한 번 클릭하면 전체가 재생되고, 효과는 상용 모바일 게임의 결산 / 보상 연출에 맞먹어야 합니다.
【세계관과 스타일】
- 오리지널 아트. 어떤 기존 게임의 IP, 캐릭터, 로고도 모방하지 마세요.
- 카툰 모바일 게임풍: 고채도 배색, 통일된 어두운 외곽선(예: #1A1033), 둥글고 묵직한 조형.
- 등급이 오를 때마다 배색이 바뀝니다: [등급 사다리, 예: 일반 초록 → 희귀 파랑 → 에픽 보라 → 전설 금색]. 한 단계 오를 때마다 주 색상, 광효과 색, 배경 색조를 모두 전환해야 합니다.
- 제목은 둥글고 통통한 게임 폰트(예: Titan One / Lilita One)를 쓰고, 검은 외곽선과 그림자를 넣습니다. 글자는 한 글자씩 화면에 「내리찍히듯」 들어오며 반동이 붙습니다.
【주요 오브젝트: 진짜 3D로】
- Three.js로 모델링하고 평면 SVG 텍스처는 쓰지 마세요. 두께, 베벨, 그리고 대상에 맞는 구조 디테일(나무판 틈, 리벳, 테두리 마감, 보석 면, 잠금쇠 등)이 있어야 합니다. 나무판 틈 같은 디테일은 실제 지오메트리로 만들어야 하며 검은 선을 붙이지 마세요.
- 셰이딩은 카툰 계단식(MeshToonMaterial에 3~4단 그라데이션 텍스처)을 쓰고, 세 가지 조명을 배치합니다: 키 라이트, 스카이 라이트, 등급 색의 림 라이트.
- 외곽선은 후처리 에지 검출로 그립니다: 노멀 맵 + 뎁스 맵을 렌더링한 뒤 셰이더로 선을 그립니다. 바깥 윤곽은 굵게, 부품 경계는 얇게, 굵기는 전체적으로 일정해야 합니다. 추가로 1.5배 슈퍼샘플링과 멀티샘플 안티앨리어싱을 적용합니다.
「한 바퀴 확대한 검은 뒷면」식 외곽선은 쓰지 마세요. 굵기가 고르지 않고 모서리에서 끊깁니다.
뎁스 판정 임계값은 넉넉하게 두고, 이음새는 주로 노멀로 판정해야 합니다. 그렇지 않으면 비스듬히 보는 표면에 잔톱니 같은 사선 줄무늬가 생깁니다.
- 움직이는 부품은 실제로 움직여야 합니다. 예를 들어 상자 뚜껑은 경첩을 축으로 열리고, 메달은 세로축을 중심으로 회전합니다.
- 대기 상태에서 주체는 천천히 좌우로 회전해 측면과 두께를 보여주고, 동시에 살짝 위아래로 떠다닙니다. 발밑에는 높이에 따라 변하는 부드러운 그림자가 있어야 합니다.
【화면에 2D 일러스트(카드 앞면, 보상 아이콘, 캐릭터)가 있다면】
- 3층 카툰 셰이딩: 베이스 색, 덩어리진 그림자 색, 하이라이트 색. 한 겹 그라데이션만 쓰지 마세요.
- 선 굵기를 구분하세요: 바깥 윤곽은 굵게, 내부 구조선은 얇게.
- 각 캐릭터나 오브젝트는 고유의 표정과 자세를 가져야 하며, 모든 것이 같은 얼굴을 공유하면 안 됩니다.
- 발밑에 그림자를 그려 주체가 화면 안에 「서」 있게 하세요. 배경은 속성별로 패턴을 구분하고, 모두 같은 방사선 세트를 쓰지 마세요.
【연출 리듬: 다섯 단계, 하나도 빠질 수 없음】
1. 준비: 주체가 대기 상태로 떠다니고, 몇 초마다 한 번씩 떨며 클릭 가능함을 알립니다. 하단에는 「클릭」 안내가 표시됩니다.
2. 업그레이드: 클릭할 때마다 주체가 점프해 공중에서 한 바퀴 돌고, 착지할 때 납작하게 눌렸다가 튕겨 오릅니다. 동시에 다음 등급 색으로 전환되고, 빛이 한 번 번쩍이며, 파티클 고리가 퍼지고, 제목이 갱신됩니다.
3. 충전(약 1초): 주체가 점점 격렬하게 떨리고, 틈새로 빛이 새어 나오며, 주변 파티클이 중심으로 빨려 들어가고, 효과음의 음높이가 계속 상승합니다. 마지막 순간에 급격히 납작해집니다.
4. 폭발: 폭발점에서 바깥으로 퍼지는 글로우 플래시, 화면 흔들림, 카메라 푸시인, 다층 충격파, 가늘고 긴 빛줄기 분출, 반짝이는 별점, 코인과 보석(회전 포함). 높은 등급의 폭발은 확실히 더 강해야 합니다. 색종이는 최고조에서 한 번만 쓰고, 화면을 색종이로 가득 채우지 마세요.
5. 공개와 결산:
- 보상 카드가 주체에서 곡선을 그리며 날아 나오고, 자리 잡을 때 오버슈트와 흔들림으로 마무리하며 숫자가 롤링 집계됩니다.
- 희귀 아이템에는 무지개 빛이 흐르는 테두리와 「NEW!」 코너 배지가 붙습니다.
- 클릭해 수령하면 코인과 보석이 베지어 곡선을 따라 오른쪽 위 잔액으로 날아가고, 잔액에 닿을 때마다 한 번씩 튑니다.
【공개 무대: 주인공이 화면을 독점하게】
- 최고 희귀도 공개 시 다른 요소는 접히거나 페이드아웃되고, 뒤쪽은 깔끔한 그라데이션 막과 천천히 회전하는 부드러운 빛으로 바뀝니다. 주인공이 어수선한 배경 위에 놓이게 하지 마세요.
- 막이 나타나면 장면의 다른 3D 오브젝트는 숨기세요. 그렇지 않으면 후처리 외곽선이 그 윤곽선을 막 위에 그려 버립니다.
- 주인공의 외부 글로우는 주체 뒤에 두고 가장자리에서만 새어 나와야 하며, 주체 앞을 덮어 새하얗게 뭉개면 안 됩니다.
- 주인공 주위를 맴도는 별가루 궤적을 추가할 수 있지만, 궤도는 주인공 윤곽 바깥에 온전히 있어야 하고 주체 정면을 쓸고 지나가면 안 됩니다.
【광효과: 반드시 부드러워야 하며 딱딱한 경계가 없어야 함】
- 배경 광선: 그라데이션 전환이 있는 conic-gradient를 쓰고, 칼로 자른 듯한 색면 경계는 쓰지 마세요. 밀도와 회전 속도가 다른 빛을 2~3겹 겹칩니다.
- 광주: 흐림이 있는 5~7개의 광선이 부채꼴로 퍼지고 각각 밝기가 미세하게 일렁입니다. 뿌리에는 부드러운 빛 코어를 넣고, 빛 속에는 빛가루가 천천히 떠오릅니다.
- 플래시 화이트: 폭발점에서 바깥으로 퍼지는 방사형 글로우(mix-blend-mode: screen), 강도는 0.8을 넘지 않게 하고 화면 전체가 순백으로 과노출되지 않게 하세요.
- 파티클: 각 불꽃에는 낮은 불투명도의 외곽 후광이 붙습니다. 충격파는 3층 외곽선(넓고 흐린 것, 중간, 가늘고 밝은 것)을 씁니다.
【재질과 인터페이스】
- 테두리, 명패, 버튼에는 재질감이 있어야 합니다: 금속 브러시 그라데이션, 왼쪽 위가 밝고 오른쪽 아래가 어두운 베벨 광, 내부 그림자. 희귀도에 따라 장식 부품을 바꿉니다(강철 리벳 → 은 테두리 보석 → 금 테두리 다이아몬드에 작은 왕관).
- 작은 카드에 작은 글씨로 수치를 욱여넣지 마세요. 상세 수치는 공개 시의 정보 패널에 넣고, 패널 안의 숫자는 롤링하며 올라가고 「▲+수치」가 팝업됩니다.
- Canvas에 그리는 텍스처는 해상도가 화면상 최대 표시 크기의 최소 1.5배여야 합니다. 그렇지 않으면 확대할 때 흐려집니다.
【애니메이션 원칙】
- GSAP 타임라인으로 연출하세요. 모든 동작에는 스쿼시 앤 스트레치, 오버슈트, 탄성 반동이 있어야 하며 등속이면 안 됩니다.
- 파티클 시스템은 Canvas 2D로 직접 작성하세요: 중력, 저항, 수명, 가산 혼합, 그리고 「흡입」「곡선 비행」「선회」 세 가지 운동.
- 큰 요소를 CSS 3D 원근으로 뒤집지 마세요. 확대와 측면 회전이 겹치면 화면을 가득 채운 평면으로 투영됩니다. 3D 뒤집기는 모두 WebGL에서 처리하세요.
- 모든 「떨림」「호흡」 계열 루프 트윈은 상태 전환 시 먼저 취소한 뒤 0으로 되돌리세요. 정지 명령보다 한 프레임 늦게 끝나서 값을 다시 설정하는 일을 피해야 합니다.
【효과음】
- 전부 Web Audio로 실시간 합성하고 오디오 파일은 쓰지 마세요: 점프, 착지, 업그레이드 코드, 충전 상승음, 폭발 저역 + 노이즈, 팝업음, 카운트 틱, 코인 짤랑, 승리 팡파르.
- 첫 클릭 때 오디오를 초기화하고, 오른쪽 위에 음소거 스위치를 두세요.
【인터페이스와 엔지니어링】
- 상단 HUD: 모드 전환, 코인 및 보석 잔액, 음소거 버튼.
- 휴대폰 너비에서도 동작해야 하며, 「동작 줄이기」 설정을 따르세요(화면 흔들림 끄기, 파티클 줄이기).
- 애니메이션 상태 머신은 엄격해야 합니다: 재생 중에는 클릭을 무시하되, 클릭이 삼켜지거나 상태가 꼬이는 일이 없어야 합니다.
- 목표는 60fps. 처음 열었을 때 바로 완전한 대기 화면이어야 하며 빈 화면이면 안 됩니다.
【납품 전 자체 점검】
충전, 폭발, 공개, 결산 시점마다 각각 스크린샷을 한 장씩 찍고 하나씩 점검하세요:
- 주인공이 빛무리, 파티클, 텍스트에 가려지지 않았는가?
- 과노출로 새하얗게 날아가지 않았는가?
- 배경이 어수선하지 않은가, 어색하게 드러난 외곽선이 없는가?
- 작은 글씨가 읽히는가?
- 결산 후에 움직이면 안 되는 것이 계속 떨리고 있지 않은가?
마지막으로 알려주세요: 각 단계의 길이, 그리고 연출 강도를 조절할 수 있는 파라미터.
