Storyboard Automation
스토리보드 아카이브
자동화 프로토콜
Figma MCP 데이터와 스크린샷을 교차 분석하여 66개 화면의 스토리보드를 CHAART OS 디자인 토큰 기반 HTML로 자동 변환합니다.
Automation Protocol — 4-Step Pipeline
01
Screenshot
Figma MCP get_screenshot 호출. 시각적 레이아웃과 컴포넌트 배치를 파악.
02
Design Context
Figma MCP get_design_context 호출. 구조, 텍스트, 스타일 데이터 추출.
03
Cross-Reference
스크린샷 + 데이터 교차 분석. 내용 이해 후 HTML 와이어프레임 + Description 테이블 구성.
04
Render & Calibrate
프리뷰 렌더링 후 getBoundingClientRect 실측. Zone/Marker 위치 보정.
사용자 화면 — User Screens (46)
LOG 회원가입 / 로그인 9 / 9
| Screen ID | 화면 이름 | Node ID | Status | Updated | Action |
|---|
| LOG-001 | 로그인 진입 화면 | 21:1730 | 디자인완료 | 03.26 | View |
| LOG-002 | 약관동의 바텀시트 | 1:16381 | 디자인완료 | 03.26 | View |
| LOG-003 | 이메일 로그인 ID/PW 입력 바텀시트 | 1:16315 | 디자인완료 | 03.26 | View |
| LOG-004 | 소셜 로그인 머지 바텀시트 | 1:16253 | 디자인완료 | 03.26 | View |
| LOG-005 | 이메일 로그인 실패 바텀시트 | 1:16196 | 디자인완료 | 03.26 | View |
| LOG-006 | 비밀번호 재설정/발송 완료 바텀시트 | 1:16114 | 디자인완료 | 03.27 | View |
| LOG-007 | 온보딩 화면(신규 사용자) | 1:15856 | 디자인완료 | 03.26 | View |
| LOG-008 | 온보딩 화면(기존 사용자) | 88:18475 | 디자인완료 | 03.26 | View |
| LOG-009 | 시스템 모달 | 1:15714 | 디자인완료 | 03.26 | View |
HOM 홈 5 / 5
| Screen ID | 화면 이름 | Node ID | Status | Updated | Action |
|---|
| HOM-001 | 홈 (최근 본 작품이 없을 때) | 1:15370 | 디자인완료 | 03.24 | View |
| HOM-002 | 홈 (찜한 작품이 있을 때) | 1:15157 | 디자인완료 | 03.27 | View |
| HOM-003 | 홈 (찜한 작품이 없는데 본 작품이 있을 때) | 1:14944 | 디자인완료 | 03.27 | View |
| HOM-004 | 홈 — 알림 | 1:14755 | 디자인완료 | 03.27 | View |
| HOM-005 | 기획전 화면 | 1:14556 | 디자인완료 | 03.27 | View |
MKT 마켓 / 판매등록 13 / 13
| Screen ID | 화면 이름 | Node ID | Status | Updated | Action |
|---|
| MKT-001 | 마켓 — 필터 탭 적용 | 1:13873 | 디자인완료 | 03.27 | View |
| MKT-002 | 마켓 — 정렬 바텀시트 | 1:13508 | 디자인완료 | 03.27 | View |
| MKT-003 | 판매등록 — 업로드 방식 선택 | 1:13371 | 컨펌대기중 | 03.24 | View |
| MKT-004 | 판매 등록 상세 — 간접 업로드 — 보증서 확인 중 | 1:13169 | 컨펌대기중 | 03.24 | View |
| MKT-005 | 판매 등록 상세 — 간접 업로드 — 보증서 기반 확인 | 1:12981 | 삭제 | 03.17 | View |
| MKT-006 | 판매 등록 상세 — 간접 업로드 — 작품 사진 미리보기 | 1:12781 | 컨펌대기중 | 03.24 | View |
| MKT-007 | 판매 등록 상세 — 간접 업로드 — 등록 완료 | 1:12588 | 컨펌대기중 | 03.24 | View |
| MKT-008 | 판매 등록 상세 — 직접 업로드 — 작품 사진 미리보기 | 1:12362 | 컨펌대기중 | 03.24 | View |
| MKT-009 | 판매 등록 상세 — 직접 업로드 — 보증서 파일 미리보기 | 1:12202 | 컨펌대기중 | 03.24 | View |
| MKT-010 | 판매 등록 상세 — 직접 업로드 — 추가 사항 | 1:11942 | 컨펌대기중 | 03.24 | View |
| MKT-011 | 판매등록 — 직접 업로드 — 완료 | 1:11824 | 디자인완료 | 03.17 | View |
| MKT-012 | 판매등록 — 공통 모달 | 1:11687 | 디자인완료 | 03.17 | View |
| MKT-013 | 작품 상세 페이지 | 1:11255 | 디자인완료 | 03.17 | View |
MYP 마이페이지 16 / 16
| Screen ID | 화면 이름 | Node ID | Status | Updated | Action |
|---|
| MYP-001 | 마이페이지 메인 + 로그아웃 모달 | 1:9873 | 컨펌대기중 | 03.13 | View |
| MYP-002 | 프로필 관리 | 1:9723 | 컨펌대기중 | 03.13 | View |
| MYP-003 | 구매 내역 — 마켓 탭 | 1:9523 | 컨펌대기중 | 03.13 | View |
| MYP-004 | 구매 내역 — 프라이빗 세일 | 1:9323 | 컨펌대기중 | 03.13 | View |
| MYP-005 | 판매 내역 — 마켓 | 1:9123 | 컨펌대기중 | 03.13 | View |
| MYP-006 | 판매 내역 — 프라이빗 세일 | 1:8923 | 컨펌대기중 | 03.13 | View |
| MYP-007 | 찜한 작품 | 1:8736 | 컨펌대기중 | 03.13 | View |
| MYP-008 | 계정 정보 | 1:8582 | 컨펌대기중 | 03.13 | View |
| MYP-009 | 알림 설정 | 1:8444 | 컨펌대기중 | 03.13 | View |
| MYP-010 | 공지사항 상세 | 1:8194 | 컨펌대기중 | 03.13 | View |
| MYP-011 | 로그아웃 확인 모달 | 1:7901 | 컨펌대기중 | 03.24 | View |
| MYP-012 | 1:1 문의 상세 | 1:7692 | 컨펌대기중 | 03.13 | View |
| MYP-013 | 자주 묻는 질문(FAQ) | 1:7504 | 컨펌대기중 | 03.13 | View |
| MYP-014 | 약관/정책 | 1:7372 | 컨펌대기중 | 03.13 | View |
| MYP-015 | 마케팅 수신 동의 | 1:7221 | 컨펌대기중 | 03.24 | View |
| MYP-016 | 회원 탈퇴 서비스 개선 의견 작성 | 1:7072 | 컨펌대기중 | 03.24 | View |
PRS 프라이빗 세일 4 / 4
| Screen ID | 화면 이름 | Node ID | Status | Updated | Action |
|---|
| PRS-001 | 프라이빗 세일 메인 화면 | 1:11018 | 컨펌대기중 | 03.24 | View |
| PRS-002 | 프라이빗 세일 — 작품 구해요 등록 | 1:10715 | 컨펌대기중 | 03.24 | View |
| PRS-003 | 프라이빗 세일 — 작품 팔아요 | 1:10409 | 컨펌대기중 | 03.24 | View |
| PRS-004 | 프라이빗 세일 안내 모달 | 1:10247 | 컨펌대기중 | 03.24 | View |
관리자 화면 — Admin Screens (19)
BO-LIN 백오피스 로그인 3 / 3
| Screen ID | 화면 이름 | Node ID | Status | Updated | Action |
|---|
| BO-LIN-001 | 백오피스 진입 페이지 | 1:6847 | 컨펌대기중 | 03.24 | View |
| BO-LIN-002 | 백오피스 진입 — 이메일 형식 오류 | 1:6726 | 컨펌대기중 | 03.24 | View |
| BO-LIN-003 | 백오피스 진입 — 각종 모달 | 1:6514 | 컨펌대기중 | 03.24 | View |
BO-USR 백오피스 사용자 관리 6 / 6
| Screen ID | 화면 이름 | Node ID | Status | Updated | Action |
|---|
| BO-USR-001 | 사용자 관리 메인 | 1:6089 | 컨펌대기중 | 03.24 | View |
| BO-USR-002 | 사용자관리 메인 (드롭다운 펼침 1) | 1:5730 | 컨펌대기중 | 03.24 | View |
| BO-USR-003 | 사용자관리 메인 (드롭다운 펼침 2) | 1:5374 | 컨펌대기중 | 03.24 | View |
| BO-USR-004 | 사용자 정보 상세 | 1:4590 | 컨펌대기중 | 03.24 | View |
| BO-USR-005 | 사용자관리 상세보기 (드롭다운 펼침) | 1:3878 | 컨펌대기중 | 03.24 | View |
| BO-USR-006 | 사용자 관리 각종 모달 | 1:3699 | 컨펌대기중 | 03.24 | View |
BO-ART 백오피스 작품 관리 4 / 4
| Screen ID | 화면 이름 | Node ID | Status | Updated | Action |
|---|
| BO-ART-001 | 작품 관리 메인 | 1:3175 | 컨펌대기중 | 03.24 | View |
| BO-ART-002 | 작품 관리 상세보기 | 1:2829 | 컨펌대기중 | 03.24 | View |
| BO-ART-003 | 작품 업로드 | 1:2516 | 컨펌대기중 | 03.24 | View |
| BO-ART-004 | 작품 관리 메인 — 각종 모달 | 1:2283 | 컨펌대기중 | 03.24 | View |
BO-INQ 백오피스 문의 관리 2 / 2
| Screen ID | 화면 이름 | Node ID | Status | Updated | Action |
|---|
| BO-INQ-001 | 작품 문의 관리 메인 | 1:441 | 컨펌대기중 | 03.24 | View |
| BO-INQ-002 | 작품 문의 관리 메인 — 각종 모달 | 1:298 | 컨펌대기중 | 03.24 | View |
BO-TRN 백오피스 거래 관리 3 / 3
| Screen ID | 화면 이름 | Node ID | Status | Updated | Action |
|---|
| BO-TRN-001 | 거래 관리 메인 | 1:1553 | 컨펌대기중 | 03.24 | View |
| BO-TRN-002 | 거래 관리 메인 — 상세보기 페이지 | 1:1196 | 컨펌대기중 | 03.24 | View |
| BO-TRN-003 | 거래 관리 메인 — 각종 모달 | 1:991 | 컨펌대기중 | 03.24 | View |
BO-ETC 백오피스 공통 1 / 1
| Screen ID | 화면 이름 | Node ID | Status | Updated | Action |
|---|
| BO-ETC-001 | GNB / 헤더 (알림 버튼 / 관리자 정보) | 1:145 | 컨펌대기중 | 03.24 | View |