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

Co-Authored-By: Paperclip <noreply@paperclip.ing>
2026-04-01 22:43:39 +09:00
parent b817885445
commit 24c67f0c4c
4 changed files with 993 additions and 0 deletions
--- a/docs/ui-asset-guide.md
+++ b/docs/ui-asset-guide.md
@@ -0,0 +1,279 @@
+# Archetype-FirstSpark UI 에셋 가이드
+
+## 1. 상점 아이템 아이콘 디자인 스펙
+
+### 아이콘 규격
+- **크기**: 64×64px (in-game), 36px (리스트 뷰)
+- **배경**: 투명 또는 반경 12px 라운드 박스
+- **스타일**: Ember_Origin 캐릭터와 동일한 카와이 치비 스타일
+
+### 현재 상점 아이템 → 디자인 스펙
+
+| 아이템 ID | 이름 | 이모지 | 아이콘 컨셉 | 주 색상 |
+|-----------|------|--------|-----------|--------|
+| `fire_boost` | 불꽃 강화석 | 🔥 | 불꽃 문양이 새겨진 붉은 보석 | `#FF4500` → `#FFAA00` 그라디언트 |
+| `water_boost` | 물방울 강화석 | 💧 | 물결 문양 파란 보석 | `#1E90FF` → `#87CEEB` 그라디언트 |
+| `fusion_scroll` | 합성 두루마리 | 📜 | 원소 문양이 빛나는 양피지 | `#DEB887`, `#FFD700` 잉크 |
+| `gold_bag` | 골드 주머니 | 👝 | 빵빵하게 부푼 황금 주머니 | `#FFD700`, `#FF8C00` |
+
+### 추가 예정 상점 아이템 (기획 확장용)
+
+| 아이템 ID | 이름 | 아이콘 컨셉 | 설명 |
+|-----------|------|-----------|------|
+| `exp_crystal` | 경험치 수정 | 빛나는 보라 결정체 | 원소 EXP +100 |
+| `speed_potion` | 속도 물약 | 회오리치는 파란 약병 | 생산 속도 2배 (30분) |
+| `offline_booster` | 오프라인 부스터 | 달과 별이 새겨진 아이템 | 오프라인 보상 2배 |
+| `discovery_ticket` | 발견 티켓 | 빛나는 황금 입장권 | 랜덤 Tier 3 원소 즉시 해금 |
+| `legendary_shard` | 전설 파편 | 홀로그래픽 보석 조각 | 전설 원소 합성 확률 +5% |
+
+### 상점 아이콘 박스 스펙 (컴포넌트 레벨)
+
+```tsx
+// 상점 아이콘 래퍼 (아이템 등급에 따른 배경 글로우)
+const shopIconBoxStyle = (rarity: string) => css`
+  width: 64px;
+  height: 64px;
+  border-radius: 16px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 36px;
+  background: ${
+    rarity === 'legendary' ? 'linear-gradient(135deg, #FF9800, #FFD700)' :
+    rarity === 'epic'      ? 'linear-gradient(135deg, #7B1FA2, #9C27B0)' :
+    rarity === 'rare'      ? 'linear-gradient(135deg, #1565C0, #2196F3)' :
+    rarity === 'uncommon'  ? 'linear-gradient(135deg, #2E7D32, #4CAF50)' :
+                              'linear-gradient(135deg, #616161, #9E9E9E)'
+  };
+  box-shadow: 0 2px 8px rgba(0,0,0,0.15);
+`;
+```
+
+---
+
+## 2. 도감 뱃지 디자인 (발견율 마일스톤)
+
+### 뱃지 규격
+- **크기**: 48×48px (도감 화면 내), 24×24px (프로필 미니 뱃지)
+- **형태**: 육각형 또는 방패 형태 (수집/달성의 느낌)
+- **스타일**: 금속성 질감, 원소 문양 새김
+
+### 마일스톤 뱃지 목록
+
+| 달성 조건 | 뱃지 이름 | 디자인 | 색상 |
+|----------|----------|--------|------|
+| 원소 1개 획득 | 첫 번째 불꽃 | 불꽃 모양 동판 뱃지 | Bronze `#CD7F32` |
+| 원소 5개 획득 | 원소 탐험가 | 나침반 모양 은판 뱃지 | Silver `#C0C0C0` |
+| 원소 10개 획득 | 중급 연금술사 | 플라스크 + 별 뱃지 | Silver `#C0C0C0` |
+| 원소 15개 획득 | 고급 연금술사 | 빛나는 금판 + 원소기호 | Gold `#FFD700` |
+| 원소 20개 획득 | 원소 마스터 | 왕관 + 4원소 합체 뱃지 | Gold `#FFD700` 글로우 |
+| 원소 25개 획득 | 대현자 | 크리스탈 구슬 뱃지 | Purple `#9C27B0` |
+| 원소 30개 전부 획득 | 세계의 창조자 | 무지개 오로라 뱃지 | Rainbow 홀로그래픽 |
+
+### 뱃지 미획득/획득 상태
+
+```tsx
+const badgeContainerStyle = (achieved: boolean) => css`
+  width: 48px;
+  height: 48px;
+  border-radius: 12px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 28px;
+  background: ${achieved ? 'linear-gradient(135deg, #FFF8E1, #FFE082)' : adaptive.greyBackground};
+  border: 2px solid ${achieved ? '#FFD700' : adaptive.grey300};
+  opacity: ${achieved ? 1 : 0.4};
+  filter: ${achieved ? 'none' : 'grayscale(100%)'};
+  box-shadow: ${achieved ? '0 0 8px rgba(255, 215, 0, 0.4)' : 'none'};
+`;
+```
+
+### 도감 화면 발견률 시각화
+
+```
+발견 진행 바:
+[████████░░░░░░░░░░░] 8/30 (26.7%)
+
+색상 구간:
+0~33%   → grey gradient (초보)
+34~66%  → blue gradient (중급)
+67~99%  → purple gradient (고급)
+100%    → rainbow gradient (전설)
+```
+
+---
+
+## 3. 오프라인 보상 모달 비주얼 개선
+
+### 현재 구현의 개선 포인트
+1. 흰 배경 모달 → **배경에 밤하늘 + 별 이미지 또는 달 모티프 추가**
+2. 단색 버튼 → **그라디언트 유지하되 별/달 아이콘 추가**
+3. 보상 아이템 배경 `#F7F8FA` → **adaptive 색상으로 다크모드 대응**
+4. 타이틀 이모지만 → **달과 별이 조합된 헤더 비주얼 추가**
+
+### 개선된 스타일 스펙
+
+```tsx
+// 모달 헤더 영역
+const offlineHeaderStyle = css`
+  text-align: center;
+  margin-bottom: 20px;
+`;
+
+// 달 아이콘 + 별 파티클 영역
+const moonIconWrapStyle = css`
+  font-size: 48px;
+  line-height: 1;
+  margin-bottom: 8px;
+  display: block;
+  /* 별 파티클은 CSS animation으로 처리 */
+  position: relative;
+
+  &::before, &::after {
+    content: '✦';
+    position: absolute;
+    font-size: 14px;
+    color: #FFD700;
+    animation: starTwinkle 2s ease-in-out infinite alternate;
+  }
+  &::before { top: 0; left: 20%; }
+  &::after  { top: 10%; right: 15%; animation-delay: 0.7s; }
+`;
+
+// 개선된 모달 배경
+const modalStyle = css`
+  background: ${adaptive.background};
+  border-radius: 24px;
+  padding: 28px 24px 24px;
+  width: 100%;
+  max-width: 340px;
+  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.18);
+  /* 상단 별밤 느낌 장식 */
+  background-image: radial-gradient(
+    circle at 50% 0%,
+    rgba(124, 77, 255, 0.08) 0%,
+    transparent 60%
+  );
+`;
+
+// 보상 아이템 배경 (다크 대응)
+const rewardItemStyle = css`
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  background: ${adaptive.greyBackground};
+  border-radius: 12px;
+  padding: 10px 14px;
+`;
+
+// 수령 버튼 개선
+const claimButtonStyle = css`
+  width: 100%;
+  padding: 15px;
+  background: linear-gradient(135deg, #3182F6, #7C4DFF);
+  color: white;
+  border: none;
+  border-radius: 16px;
+  font-size: 16px;
+  font-weight: 700;
+  cursor: pointer;
+  position: relative;
+  overflow: hidden;
+
+  /* 버튼 내부 반짝임 효과 */
+  &::after {
+    content: '';
+    position: absolute;
+    top: -50%;
+    left: -50%;
+    width: 200%;
+    height: 200%;
+    background: linear-gradient(
+      45deg,
+      transparent 40%,
+      rgba(255,255,255,0.15) 50%,
+      transparent 60%
+    );
+    animation: shimmer 2.5s ease-in-out infinite;
+  }
+
+  &:active {
+    transform: scale(0.97);
+  }
+`;
+
+// 골드 보상 행 (다크 대응)
+const goldRowStyle = css`
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  background: linear-gradient(135deg, var(--color-gold-bg, #FFF8E1), #FFF3CD);
+  border-radius: 12px;
+  padding: 10px 14px;
+  margin-bottom: 20px;
+`;
+```
+
+### 타이틀 섹션 개선 (JSX)
+
+```tsx
+// 개선된 모달 상단부
+<div css={offlineHeaderStyle}>
+  <span css={moonIconWrapStyle}>🌙</span>
+  <h2 css={titleStyle}>오프라인 보상</h2>
+  <p css={subtitleStyle}>
+    {formatDuration(pendingOfflineReward.offlineSec)} 동안<br/>
+    원소가 자동 수집되었습니다!
+  </p>
+</div>
+```
+
+---
+
+## 4. 화면별 UI 에셋 요약
+
+| 화면 | 주요 에셋 | 우선순위 |
+|------|----------|---------|
+| ShopScreen | 상점 아이템 아이콘 (고화질 PNG) | High |
+| ElementsScreen | 도감 뱃지 시스템 | Medium |
+| OfflineRewardModal | 달/별 헤더 이미지, 개선된 버튼 | Medium |
+| FusionScreen | 합성 이펙트 파티클 | High |
+| EvolutionScreen | 강화 에너지 링 이펙트 | Medium |
+
+---
+
+## 5. 애니메이션 스펙 (CSS Keyframes)
+
+```css
+@keyframes starTwinkle {
+  from { opacity: 0.3; transform: scale(0.8); }
+  to   { opacity: 1.0; transform: scale(1.2); }
+}
+
+@keyframes shimmer {
+  0%   { transform: translateX(-100%) rotate(45deg); }
+  100% { transform: translateX(100%) rotate(45deg); }
+}
+
+@keyframes elementIdle {
+  0%, 100% { transform: translateY(0px); }
+  50%       { transform: translateY(-4px); }
+}
+
+@keyframes fusionPulse {
+  0%   { transform: scale(1); }
+  50%  { transform: scale(1.12); }
+  100% { transform: scale(1); }
+}
+
+@keyframes enhanceRing {
+  from { transform: rotate(0deg); }
+  to   { transform: rotate(360deg); }
+}
+
+@keyframes rarityGlow {
+  0%, 100% { box-shadow: 0 0 6px currentColor; }
+  50%       { box-shadow: 0 0 16px currentColor, 0 0 32px currentColor; }
+}
+```