텍스트 기반 웹게임 UI/UX 디자인 전문가

[프로젝트 개요]
- 기존 디자인 시스템을 활용한 AI 텍스트 RPG 웹앱 UI/UX 리뉴얼
- 공통 모달 시스템 정리 및 Tabletop 화면 디자인

[프로젝트 특징]
- Pyros는 그래픽·애니메이션 중심의 게임이 아니라, 긴 한글 서사와 정보 패널을 사용하는 텍스트 기반 RPG 웹앱입니다.
- 이미 완료된 RPG 메인 PC/MO Figma와 기본 디자인 시스템, 컴포넌트 및 Variants가 존재합니다. 이번 과업은 새로운 스타일을 처음부터 탐색하는 작업이 아니라, 기존 디자인 언어를 기준으로 모달과 Tabletop 화면을 일관성 있게 확장·정리하는 작업입니다.
- 기존 기능과 정보구조는 유지하며 신규 기능 기획, 게임 일러스트, 캐릭터 이미지, 애니메이션 및 퍼블리싱은 포함하지 않습니다.

[과업 범위]
1. 공통 Modal Component Family
각 기능 화면을 개별적으로 새롭게 기획하는 방식이 아니라, 공통 Modal Shell과 내부 레이아웃 유형을 설계한 뒤 기존 콘텐츠를 적용하는 방식입니다.

- Desktop S/M/L 및 Mobile 전체화면 Modal Shell
- Header / Scrollable Body / Sticky Footer
- 중첩 모달 및 확인창
- 모바일 스크롤·키보드·safe-area 대응
- 공통 Empty / Loading / Error / Disabled 상태

내부 레이아웃은 다음 약 6개 유형을 중심으로 구성합니다.
- 선택·카드 피커형
- 입력·폼형
- 캐릭터·스탯 상세형
- 탭·목록·관리형
- 기록·타임라인형
- 설정·편집형

첨부된 캡처에는 시작 유형, 카드 선택, 정보 입력, 캐릭터, 인벤토리, 장비, 스킬, 퀘스트, 동료, 로어북, 서사 노트, 카드 서재·제작, AI 설정 등의 기능이 포함되어 있습니다. 다만 이는 서로 다른 UI 21종을 신규 설계하는 범위가 아니라, 위 공통 레이아웃에 텍스트·탭·목록·상태를 적용한 콘텐츠 Variant입니다.

2. Tabletop 모드 모집 게시판 화면 및 진행 화면
- PC 1440px
- Mobile 390px
- 기존 정보구조와 기능 유지
- 좌우 패널, 중앙 진행 영역, 참여자·게임 정보, 대화 및 입력 영역의 시각적 위계 개선
- PC/MO 반응형 구조 및 모바일 Drawer 정리

첨부된 기존 Tabletop 화면을 기준으로 작업합니다.

3. 테마별 컬러 시스템
현재 서비스에 존재하는 다음 5개 테마를 기존 컴포넌트에 적용할 수 있도록 정리합니다.

- Light
- Dark
- Blue
- Olive
- Beige

테마별 전체 화면을 각각 복제하는 방식이 아니라, 하나의 공통 컴포넌트에 적용되는 Figma Variables 또는 Semantic Color Token Modes로 구성합니다.

필요한 토큰 예시는 다음과 같습니다.

- Background / Surface / Elevated Surface
- Border / Divider
- Text Primary / Secondary / Disabled
- Accent / Hover / Pressed / Selected
- Success / Warning / Error
- Focus Ring / Backdrop / Shadow

각 테마의 HEX 또는 RGBA 값, 변수명과 사용 기준을 포함한 간단한 개발용 가이드가 필요합니다.

[클라이언트 제공 자료]
- 완료된 RPG 메인 PC/MO Figma 원본
- 기존 Components / Variants / 기본 토큰
- 기능별 캡처 40장 및 화면 분류표
- Tabletop 현재 화면
- 로고 및 서비스 이미지
- 기능과 상태에 대한 설명
- 캡처 40장은 40개의 신규 페이지를 의미하지 않으며, PC/MO 대응 및 동일 컴포넌트의 콘텐츠·상태 참고자료입니다.

[제외 범위]
- 신규 기능 및 정보구조 기획
- 게임 일러스트·캐릭터·배경 제작
- 로고 및 브랜딩 신규 개발
- 카피라이팅
- 퍼블리싱 및 개발 적용
- 복잡한 프로토타입 제작
- 테마별 전체 화면 중복 제작

[작업 환경]
- Figma
- Auto Layout
- Components / Variants
- Variables 또는 Semantic Color Tokens

[산출물]
- 편집 가능한 Figma 원본
- 공통 Modal Component Family
- 내부 레이아웃 Variant
- 콘텐츠가 적용된 주요 모달 화면
- Tabletop 모드 PC/MO 진행 화면
- 테마 5종 컬러 변수 및 색상 코드
- 컴포넌트 상태 및 간단한 개발 적용 가이드

[지원 자격 및 우대 사항]
- Figma Auto Layout·Components·Variants 활용 경험
- PC/MO 반응형 웹앱 UI 설계 경험
- 디자인 시스템 또는 SaaS·대시보드 UI 경험
- 텍스트 가독성과 복잡한 정보 패널 설계 경험
- 게임·엔터테인먼트 서비스 경험 우대