solsol(쏠쏠) — Figma 화면설계서 증류 → DJ조직 학습 SoT

마스킹 규칙(개인정보)·디자인 토큰 정합은 추후 증류 단계에서 적용한다. 이 스캐폴드 단계에서는 골격(메타테이블·화면ID 체계·헤더 7필드·섹션 자리)만 깐다.

1. 목적

CreatorLMS의 Figma 디자인을 추출 → 증류하여, DJ 가상조직(proj-* 에이전트 팀)이 학습·재사용할 수 있는 단일 출처(SoT, Source of Truth) 문서 묶음으로 만든다.

• Figma: 원본 디자인(3개 영역). 휘발성·시각 중심.
• 화면설계서(이 docs): Figma를 사내 표준(화면ID·UI/DEV 타입·헤더 7필드·Description 상태/예외·마스킹)으로 증류한 텍스트 SoT.
• DJ조직 학습: 증류된 정책·패턴이 가상조직의 표준 지식으로 되먹임된다(스킬업 파이프라인 연결).

증류의 가치: Figma는 "어떻게 보이나"만 담지만, 화면설계서는 "무엇을·왜·어떤 예외까지"(행복경로 + 빈/로딩/에러 상태 + 정책 규칙)를 텍스트로 고정해 화면 간 일관성(SoT)을 보증한다.

2. 폴더 구조

docs/solsol/
├── README.md                  # (이 파일) 목적·구조·진행상태·파이프라인
├── 00_화면목록.md             # 화면ID 체계 정의 + 영역별 화면목록 표(마스터 인덱스)
├── 01_customer-front.md       # [영역 01] Customer Front 화면상세설계
├── 02_customer-admin.md       # [영역 02] Customer Admin 화면상세설계
├── 03_brand-site.md           # [영역 03] Brand site 화면상세설계
├── 04_정책요약.md             # 화면 곳곳의 정책 규칙 합본(인증/결제/콘텐츠/예외 …)
└── screenshots/               # (추출 시 생성) 화면 캡처/와이어 이미지
    ├── customer-front/         # 01 영역 캡처
    ├── customer-admin/         # 02 영역 캡처
    └── brand-site/             # 03 영역 캡처

screenshots/{영역}/ 폴더는 추출 단계에서 생성한다(지금은 미생성). 캡처 파일명은 {번호-설명}.png 규약(예: 001-login.png). 화면설계서 각 블록의 SCREEN DESIGN 칸에서 상대경로로 참조한다(예: screenshots/customer-front/001-login.png).

3. 추출 파이프라인 (4단계)

파이프라인 원칙

• 단계 ②는 영역별 병렬 가능(01/02/03 독립 위임). 단, ①에서 화면ID가 먼저 고정돼야 한다(ID = 단계 간 추적 키).
• 단계 ③은 ②의 산출이 모두 모인 뒤 수행(흩어진 정책을 한 곳으로).
• 렌더 검증 게이트: 증류 내용은 "코드/디자인 self-check"가 아니라 실제 캡처 이미지를 보고 확정한다. 미확인 판단은 [추정]으로 표기(사내 QA 증거 게이트).

4. 진행 상태 체크리스트

스캐폴드 (현재)

• 대상 폴더 생성 (docs/solsol/)
• README.md (목적·구조·파이프라인)
• 00_화면목록.md (화면ID 체계 + 표 스켈레톤)
• 01_customer-front.md (본문 템플릿)
• 02_customer-admin.md (본문 템플릿)
• 03_brand-site.md (본문 템플릿)
• 04_정책요약.md (정책 합본 템플릿)

단계 ① 인덱싱 (Figma 토큰 연결 후)

• screenshots/{영역}/ 폴더 생성 + 영역별 캡처 저장
• 00_화면목록.md 표 채움 — 01 Customer Front
• 00_화면목록.md 표 채움 — 02 Customer Admin
• 00_화면목록.md 표 채움 — 03 Brand site

단계 ② 영역별 증류

• 01_customer-front.md 화면별 본문 채움
• 02_customer-admin.md 화면별 본문 채움
• 03_brand-site.md 화면별 본문 채움

단계 ③ 정책 합본

• 04_정책요약.md — 인증/권한
• 04_정책요약.md — 결제/구독
• 04_정책요약.md — 콘텐츠/학습
• 04_정책요약.md — 예외처리
• 04_정책요약.md — 기타

단계 ④ 학습 연결

• 마스킹 규칙 적용 점검(개인정보 화면)
• 디자인 토큰 정합 점검
• DJ조직 학습 SoT 등록(되먹임)

5. 적용 표준 (사내)

• 화면설계서 작성 세칙: DOCS-화면설계서작성표준.md (화면ID 체계 · UI/DEV 타입 · 프로세스/Description 마크 · 헤더 7필드 · 마스킹).
• 산출물 표준: DOCS-산출물표준.md (메타테이블 · 위임 표기 · 파일 네이밍).
• 디자인 토큰: DESIGN-디자인시스템.md (임의값 금지, 토큰 안에서 조합 — 증류 단계 적용).
• QA 증거 게이트: QA-검수방법론.md (캡처 하드게이트 · [추정] 표기).