Archetype-FirstSpark/docs/ui-asset-guide.md

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%

상점 아이콘 박스 스펙 (컴포넌트 레벨)

// 상점 아이콘 래퍼 (아이템 등급에 따른 배경 글로우)
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 홀로그래픽

뱃지 미획득/획득 상태

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. 타이틀 이모지만 → 달과 별이 조합된 헤더 비주얼 추가

개선된 스타일 스펙

// 모달 헤더 영역
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)

// 개선된 모달 상단부
<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)

@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; }
}