📑 『파멸의 서』 카드 전투 UI 화면정의서 (Battle Card Screen)

🔹 화면명

BATTLE_CARD_MAIN – 전투 메인 UI (카드 기반 인터랙션)

🔹 화면 목적

카드 기반 전략 전투 수행을 위한 UI.

속성, 자원(AP), 특권 개입 여부 등을 직관적으로 인식하고, 전략적 카드 선택과 행동을 유도한다.

1. 화면 구조 (와이어프레임 도식)

┌────────────────────────────────────────┐
│ ◀ 메뉴                    
├────────────────────────────────────────┤
│ 📊 아군 상태창 (HP/버프/디버프/초상화)           │
│ 📊 적군 상태창 (HP/속성 아이콘/예측 행동 UI)     │
├────────────────────────────────────────┤
│ 📃 전투 로그: 카드 사용 내역, 피해량 표시 등     │
├────────────────────────────────────────┤
│      | 🌀 「운명 조작」        │
│        [공격]          [방어]         [특권 개입]         │
│        💥 150% 데미지   🛡 50% 피해 감소   🌀 적 카드 제거     │
│        AP 2            AP 1           AP 3              │
├────────────────────────────────────────┤
│           🃏 카드 드로우 / 🗑 카드 버리기 버튼           │
│           📘 덱 구성 / 🔐 독자의 특권 해금 확인 버튼     │
└────────────────────────────────────────┘

2. 주요 컴포넌트 정의

요소	타입	기능	비고
카드 슬롯 (5장)	버튼형 카드 UI	카드 선택 및 사용 처리	드래그 or 탭
카드 상세 팝업	슬라이드 업 컴포넌트	효과, 속성, 콤보 등 상세 설명	카드 클릭 시
턴 표시	텍스트 + 아이콘	턴 경과 표시	라운드 기반 계산
AP 게이지	진행 바	현재 액션 포인트 표시	Max 5 기준
적 예측 정보	작은 플로팅 UI	적 다음 행동 예측 정보	‘독자의 시점’ 발동 시
특권 UI	토글 버튼 or 상황부여식 버튼	특권 카드 사용 UI 트리거	사용 시 연출 포함

3. 플로우 (사용자 액션 → 시스템 반응)

유저 액션	시스템 반응	애니메이션/효과
카드 탭	카드 확대 → 상세 내용 표시	카드 위 확대, 속성별 광휘
카드 사용 (슬롯 드래그 또는 탭)	AP 차감, 효과 실행, 적/아군 상태 반영	공격: 파동/피격 연출 / 방어: 실드 생성 / 특수: 텍스트 이펙트
특권 버튼 탭	특권 카드 선택 모드 진입	텍스트 글리치 효과 + UI 왜곡
카드 드로우 버튼 클릭	카드 5장 리셋	드로우 애니메이션
전투 종료	결과 화면으로 전환	승리/패배 전용 컷신 또는 페이드아웃

4. 데이터 바인딩 및 상태관리

상태 요소	연결 데이터	서버 연동 여부
카드 정보	카드 DB (속성, 효과, 자원 등)	클라이언트 초기 로드
아군/적 상태	캐릭터 상태 객체 (HP, Buff, Debuff)	실시간 반영
AP 수치	캐릭터별 전투 상태	사용 시 감소, 턴마다 리젠
특권 카드 해금 여부	시나리오 플래그 + 전투 조건	서버 연동 필요
적 행동 예측	‘독자의 시점’ 발동 여부	조건 충족 시 UI 오픈

📑 『파멸의 서』 카드 전투 UI 화면정의서 (Battle Card Screen)

🔹 화면명

🔹 화면 목적

1. 화면 구조 (와이어프레임 도식)

2. 주요 컴포넌트 정의

3. 플로우 (사용자 액션 → 시스템 반응)

4. 데이터 바인딩 및 상태관리

5. 연출 기획 (속성별 카드 사용 시)