35-화면설계 / wireframes

Oruli 와이어프레임 갤러리

파이프라인 KB → 화면설계 → 와이어프레임 → 디자인의 ③단계 산출물 모음 · 구조 뼈대(SOT) · 회색 저해상도 · 클릭 가능(prototype)
기존 화면은 Figma 정본에서 역추출해 뼈대를 세웠다. 신규 화면은 정방향으로 이 단계에서 먼저 만든다. 각 화면은 우상단 ▶ 흐름 버튼으로 클릭 프로토타입을 체험할 수 있다.

15 화면 · 213 프레임 완료 각 카드 클릭 → 해당 화면 와이어프레임 공유 자산: _wireframe-kit.css · _wireframe-kit.js 작성 규약: _authoring-guide.md
page 00
공통 (이메일 템플릿)
14 카드 · 메일 5종(ko·en)
page 01
로그인 · 회원가입
6섹션 · 26상태
page 02
메인
4섹션 · 8상태
page 03
캐릭터 설정 (마법사)
5섹션 · 29단계
page 04
채팅
10섹션 · 36상태
page 04
플레이그라운드 · 단체채팅
시안 · 2프레임
page 04_03
인라인 미디어 (이미지·Phase1)
2섹션 · 12상태
page 04_04
채팅룸 앨범 (인라인 미디어)
2섹션 · 5상태
page 05
내정보 · 설정
6섹션 · 19상태
page 05_02
결제 내역
2섹션 · 6프레임
page 06
멤버십 · 크레딧
6섹션 · 15상태
page 07
고객센터
5섹션 · 15상태
신설
결제수단 관리
5섹션 · 9프레임
신설
영상 생성 I2V
2섹션 · 7프레임
신설
페르소나 프로필 커스터마이징
6섹션 · 10프레임

진행: 15 / 15 완료 · 전 화면 역추출 완료(뼈대 기준선 확보). 다음: 정방향 정책 ADR(Phase 3)로 규약을 확정하면 신규 화면은 이 단계부터 만든다.