35-화면설계 / wireframes
Oruli 와이어프레임 갤러리
파이프라인 KB → 화면설계 → 와이어프레임 → 디자인의 ③단계 산출물 모음 ·
구조 뼈대(SOT) · 회색 저해상도 · 클릭 가능(prototype)
기존 화면은 Figma 정본에서 역추출해 뼈대를 세웠다. 신규 화면은 정방향으로 이 단계에서 먼저 만든다.
각 화면은 우상단 ▶ 흐름 버튼으로 클릭 프로토타입을 체험할 수 있다.
23 화면 · 266 프레임 완료
영역 코드 9개로 묶었다 — 화면번호 앞 두 자리가 영역이다
꼬리표 없음 = Figma 역추출 · 신설 = 정방향 작성 · as-built = FE 코드 역추출
공유 자산 _wireframe-kit.css · _wireframe-kit.js · 규약 _authoring-guide.md
00
공통
이메일 템플릿(앱 화면 아님)
1 화면 · 14 프레임
01
인증
로그인·회원가입
1 화면 · 26 프레임
03
캐릭터
캐릭터 설정 · 프로필 커스터마이징 · 유지 선택
3 화면 · 51 프레임
04
대화
채팅 · 단체채팅 · 인라인 미디어 · 앨범 · 영상 생성 · 이미지 입력
6 화면 · 78 프레임
05
마이
내정보·설정 · 결제 내역 · 결제수단 관리
3 화면 · 34 프레임
06
결제
멤버십·크레딧 · 환불 요청
2 화면 · 19 프레임
08
법적고지
개인정보 판매 거부(CCPA) 계열 · 정적 고지
5 화면 · 21 프레임
진행: 24 / 24 · 전 화면 역추출 완료(뼈대 기준선 확보). 최근: 08-06 청소년보호정책을 as-built로 등재했다(#1542 — #1335 후속, 풋터 링크 신설). 그 앞: 04-06 이미지 입력을 정방향으로 신설(#1005). 비어 있는 두 자리가 있다 — 차단 안내 문구(#961)와 호출 엔드포인트(#963)는 확정되면 채운다. Figma는 미작성.