docs: 캐릭터 디자인 가이드, 색상 시스템, UI 에셋 가이드 및 스크립트 추가

Co-Authored-By: Paperclip <noreply@paperclip.ing>
This commit is contained in:
2026-04-01 22:43:39 +09:00
parent b817885445
commit 24c67f0c4c
4 changed files with 993 additions and 0 deletions

View File

@@ -0,0 +1,260 @@
# Archetype-FirstSpark 캐릭터 디자인 가이드
## 1. 기준 스타일 (Ember_Origin.jpg 기반)
### 아트 디렉션
- **스타일**: 카와이(Kawaii) 치비 + 판타지 원소 마스코트
- **라인아트**: 2~3px 두께 다크 아웃라인 (원소 메인 컬러보다 30~40% 어두운 색)
- **몸체 형태**: 둥글고 통통한 blob 형태, 중력을 무시하는 유체 느낌
- **눈**: 크고 둥근 두 개의 눈 (흰 하이라이트 포함), 눈의 크기가 몸 대비 1/4~1/5
- **표정**: 작은 미소 또는 O자 입, 귀엽고 친근한 느낌
- **이펙트**: 원소 특성에 맞는 파티클/아우라 효과 (Ember처럼 불꽃 파편이 주변에 떠다님)
- **패턴**: 몸체 내부에 소용돌이(swirl) 또는 원소 특성 무늬
### 캔버스 규격
| 사용처 | 해상도 | 파일 형식 |
|--------|--------|---------|
| 원소 카드 (in-game) | 120×120px | PNG (투명 배경) |
| 캐릭터 상세 패널 | 240×240px | PNG (투명 배경) |
| 도감 썸네일 | 80×80px | PNG (투명 배경) |
| 스플래시/상점 이미지 | 480×480px | PNG (흰 배경 가능) |
---
## 2. Tier별 시각적 복잡도 가이드
### Tier 1 — 기본 원소 (Common)
- **원칙**: 단순하고 깨끗한 실루엣, 파티클 최소 (2~3개)
- **색상**: 단색 또는 2~3색 그라디언트
- **아웃라인**: 단일 컬러 아웃라인
- **이펙트**: 없거나 아주 작은 파티클
### Tier 2 — 2차 원소 (Uncommon)
- **원칙**: 복합 원소 특성이 혼합된 실루엣, 파티클 5~7개
- **색상**: 두 부모 원소 색을 섞은 듀얼 그라디언트
- **아웃라인**: 메인 컬러 아웃라인 + 서브 컬러 글로우 (낮은 강도)
- **이펙트**: 부모 원소 파티클이 혼합
### Tier 3 — 희귀 원소 (Rare)
- **원칙**: 독특한 실루엣, 주변 환경 이펙트 추가
- **색상**: 풍부한 채도, 3색 그라디언트
- **아웃라인**: 빛나는(glow) 아웃라인
- **이펙트**: 지속적인 파티클 루프, 환경 효과 (번개, 파도 등)
### Tier 4 — 에픽 원소 (Epic)
- **원칙**: 강렬하고 웅장한 존재감, 후광 효과
- **색상**: 채도 높고 어두운 컬러, 밝은 하이라이트 대비
- **아웃라인**: 듀얼 레이어 아웃라인 (다크 + 컬러 글로우)
- **이펙트**: 풍부한 파티클, 회전하는 오브, 에너지 링
### Tier 5 — 전설 원소 (Legendary)
- **원칙**: 압도적인 화려함, 화면을 가득 채우는 이펙트
- **색상**: 무지개/홀로그래픽 또는 순수한 빛(흰색/금색)
- **아웃라인**: 무지개 또는 골든 글로우
- **이펙트**: 레인보우 파티클, 별/성좌 이펙트, 오로라
---
## 3. 원소별 캐릭터 시트
### Tier 1 — 기본 4원소
#### 🔥 불 (Fire) — "엠버"
- **몸체**: 역삼각형 불꽃 실루엣, 주황~노랑 그라디언트
- **컬러**: Primary `#FF4500`, Glow `#FFAA00`, Dark `#8B2000`
- **파티클**: 불씨 3개 (랜덤 떠다니는 작은 불꽃)
- **패턴**: 몸 중앙 스월 패턴
- **표정 기본**: 활기차고 자신감 있는 눈매
#### 💧 물 (Water) — "아쿠아"
- **몸체**: 물방울/눈물 형태, 투명도 있는 청색 계열
- **컬러**: Primary `#1E90FF`, Glow `#87CEEB`, Dark `#00008B`
- **파티클**: 작은 물방울 3~4개 주변에 떠다님
- **패턴**: 몸체 내부 파문 링 패턴
- **표정 기본**: 차분하고 맑은 눈
#### 🌪️ 바람 (Wind) — "브리즈"
- **몸체**: 와류형, 투명도 있는 연한 하늘색, 가장자리가 흐릿한 느낌
- **컬러**: Primary `#87CEEB`, Glow `#FFFFFF`, Dark `#4682B4`
- **파티클**: 작은 선형 바람 스트로크 4~5개
- **패턴**: 나선형 기류 패턴
- **표정 기본**: 장난기 있고 자유로운 눈
#### 🌱 흙 (Earth) — "테라"
- **몸체**: 구형, 단단하고 묵직한 느낌, 갈색 계열
- **컬러**: Primary `#8B4513`, Glow `#D2691E`, Dark `#4B2806`
- **파티클**: 작은 흙먼지/돌멩이 3개
- **패턴**: 나뭇결 또는 대지 균열 패턴
- **표정 기본**: 믿음직하고 온화한 눈
---
### Tier 2 — 주요 2차 원소 (선발)
#### 💨 수증기 (Steam) — "미스티"
- **몸체**: 불과 물 중간 형태, 반투명 흰/회색 구름 느낌
- **컬러**: Primary `#C0C0C0`, Glow `#FFFFFF`, Dark `#808080`
- **파티클**: 위로 올라가는 수증기 6~8개
- **패턴**: 안개처럼 흐릿한 경계
#### 🌋 용암 (Lava) — "마그마"
- **몸체**: 불에 녹아내리는 구형, 갈라진 틈에서 빛이 새어나옴
- **컬러**: Primary `#FF2200`, Glow `#FF6600`, Dark `#8B0000`, Crack `#FFAA00`
- **파티클**: 용암 방울 4~5개 (무겁게 아래로 떨어지는 느낌)
- **패턴**: 몸 전체에 용암 균열 라인
#### ⛈️ 폭풍 (Storm) — "스콜"
- **몸체**: 물+바람 혼합, 어두운 구름 형태에 번개 흔적
- **컬러**: Primary `#4169E1`, Glow `#6495ED`, Dark `#191970`
- **파티클**: 비/번개 파티클 5~6개
#### ❄️ 얼음 (Ice) — "크리스탈린"
- **레시피**: 물 + 물 (같은 원소 합성)
- **몸체**: 납작한 결정체 형태, 반투명 하늘색 계열
- **컬러**: Primary `#87CEEB`, Glow `#FFFFFF`, Dark `#5B9BD5`
- **파티클**: 수정 파편 5~6개 (천천히 회전)
- **패턴**: 결정 내부의 다이아몬드 문양
#### 🌫️ 연기 (Smoke) — "스모기"
- **레시피**: 불 + 불 (같은 원소 합성)
- **몸체**: 흐릿한 구름형, 회색 반투명
- **컬러**: Primary `#808080`, Glow `#A9A9A9`, Dark `#505050`
- **파티클**: 연기 동그라미 5~6개 (위로 흩어지는 느낌)
- **패턴**: 소용돌이 패턴
---
### Tier 3 — 주요 희귀 원소 (선발)
#### ⚡ 번개 (Lightning) — "볼트"
- **몸체**: 전기 에너지 형태, 지그재그 실루엣
- **컬러**: Primary `#FFD700`, Glow `#FFFFFF`, Dark `#B8860B`
- **파티클**: 전기 스파크 7~8개, 회전하는 전류링
- **특수 이펙트**: 주기적인 방전 플래시
#### 🌈 무지개 (Rainbow) — "프리즘"
- **몸체**: 아치형 또는 구형 + 7색 선형 무늬
- **컬러**: 7색 순환 그라디언트
- **파티클**: 무지개 빛 가루 8~10개
#### 💎 수정 (Crystal, Tier 4) — "크리스탈"
- **몸체**: 다각형 결정체 형태, 빛을 굴절하는 느낌
- **컬러**: Primary `#9400D3`, Glow `#DA70D6`, Dark `#4B0082`
- **파티클**: 결정 파편 6~7개, 내부에서 빛나는 느낌
---
### Tier 4 — 신규 에픽 원소 (10종)
#### 🏔️ 빙하 (Glacier) — "글레이시아"
- **레시피**: 구름 + 안개
- **몸체**: 납작한 산 실루엣, 차가운 청빙색
- **컬러**: Primary `#B8D8E8`, Glow `#AADDFF`, Dark `#7EB8D8`
- **파티클**: 결정 파편 6~8개 (천천히 떠다님)
#### 🌴 정글 (Jungle) — "정글리"
- **레시피**: 안개 + 오아시스
- **몸체**: 풍성한 구형, 짙은 녹색
- **컬러**: Primary `#1A6B1A`, Glow `#44BB44`, Dark `#0D3D0D`
- **파티클**: 잎사귀 6~8개 (흩날리는 느낌)
#### 🏜️ 황무지 (Wasteland) — "웨이스트"
- **레시피**: 화산재 + 먼지
- **몸체**: 넓고 낮은 형태, 갈색 계열
- **컬러**: Primary `#8B7355`, Glow `#A08060`, Dark `#5A4A35`
- **파티클**: 흙먼지 입자 6~8개
#### 🌀 대소용돌이 (Maelstrom) — "말스트롬"
- **레시피**: 번개 + 쓰나미
- **몸체**: 회오리 형태, 진남색
- **컬러**: Primary `#1E3A8A`, Glow `#4488FF`, Dark `#0A1E50`
- **파티클**: 바람 선 + 물방울 혼합 6~8개
#### 💠 원석 (Gemstone) — "젬스톤"
- **레시피**: 흑요석 + 유리
- **몸체**: 다각형 결정체, 짙은 보라
- **컬러**: Primary `#6B21A8`, Glow `#AA66FF`, Dark `#3D0D6B`
- **파티클**: 수정 파편 6~8개 (회전)
#### 🔮 프리즘 (Prism) — "프리즈미"
- **레시피**: 무지개 + 유리
- **몸체**: 구형에 무지개 빛 산란 효과
- **컬러**: Primary `#EC4899`, Glow `#FF88CC`, Rainbow 산란
- **파티클**: 무지개 빛 입자 6~8개
#### 🏛️ 고대 유적 (Ruins) — "루인즈"
- **레시피**: 화산 + 도자기
- **몸체**: 기둥 실루엣, 바랜 갈색
- **컬러**: Primary `#92400E`, Glow `#B8793A`, Dark `#5A2506`
- **파티클**: 흙먼지 입자 + 균열 파편 6~8개
#### 🌪️ 사이클론 (Cyclone) — "사이클러"
- **레시피**: 먼지 + 폭풍
- **몸체**: 회오리 형태, 황금빛 갈색
- **컬러**: Primary `#D97706`, Glow `#FFB84D`, Dark `#8B4A00`
- **파티클**: 바람 선 + 먼지 입자 6~8개
#### 🌊 심해 (Deep Sea) — "아비스"
- **레시피**: 쓰나미 + 흑요석
- **몸체**: 구형 + 어두운 수심 느낌
- **컬러**: Primary `#1E3A5F`, Glow `#4488BB`, Dark `#0A1828`
- **파티클**: 물방울 6~8개 (천천히 가라앉는 느낌)
#### 🌾 초원 (Prairie) — "프레리"
- **레시피**: 오아시스 + 도자기
- **몸체**: 넓고 부드러운 구형, 황록색
- **컬러**: Primary `#84CC16`, Glow `#AAFE44`, Dark `#4A7A0A`
- **파티클**: 잎사귀 6~8개 (바람에 흩날림)
---
## 4. 감정 표현 가이드 (Emotion States)
### Idle (대기 상태)
- 가벼운 위아래 호버링 애니메이션 (약 2초 주기)
- 눈 깜빡임 (약 4~6초 간격)
- 파티클 낮은 빈도로 방출
### 합성 시 (Fusion)
- 눈이 반짝임 (별/☆ 형태로 변환)
- 몸이 팽창했다가 줄어드는 pulse 효과
- 파티클 폭발적으로 방출 (2~3배 밀도)
- 입이 O자로 벌어짐 (놀란 표정)
### 강화 시 (Enhancement)
- 눈이 활기차게 빛남 (하이라이트 증가)
- 몸 주위에 에너지 링 회전
- 위 방향으로 성장하는 느낌
- 파티클이 나선형으로 올라감
### 잠금 해제 시 (Unlock)
- 어두운 상태에서 점점 밝아지는 reveal 효과
- 빛나는 aura 순간 폭발
- 행복한 표정으로 전환
### 잠금 상태 (Locked)
- 흑백 또는 낮은 채도
- 파티클 없음
- 눈을 가린 실루엣
---
## 5. 반응형 카드 상태별 비주얼
| 상태 | 배경 | 아웃라인 | 투명도 | 이펙트 |
|------|------|---------|--------|--------|
| obtained | 화이트 | `grey200` 1.5px solid | 100% | idle 파티클 |
| locked | `greyBackground` | `grey200` 1.5px solid | 75% | 없음 |
| undiscovered | `greyBackground` | `grey300` 1.5px dashed | 40% | 없음 |
---
## 6. 등급(Rarity) 배지 컬러
| 등급 | 배지 컬러 | 텍스트 | 예시 |
|------|---------|--------|------|
| common | `#9E9E9E` | COMMON | 기본 4원소 |
| uncommon | `#4CAF50` | UNCOMMON | Tier 2 원소 |
| rare | `#2196F3` | RARE | Tier 3 원소 |
| epic | `#9C27B0` | EPIC | Tier 4 원소 |
| legendary | `#FF9800` 금색 글로우 | LEGENDARY | Tier 5 원소 |