디자인 (hub-design)¶

무엇 · 왜¶

디자인 직무의 입구이자 전용 심화 허브. 톤·브랜딩을 추출하고(S7) 디자인 시스템을 운용한다.

사고방식 한 줄: Figma가 진실의 원천이고(AI 생성물·코드는 후보일 뿐), 색·텍스트는 raw hex가 아니라 시맨틱 토큰으로 사고하며, 화면의 상태 분기(Empty/Loading/Error/Active)를 모두 시안화해 개발·QA가 추측 없이 구현하게 한다(design-principles · design-system · figma-workflow).

전사 공통 합류는 신규입사자 (공통 온보딩)에서, 디자인 직군의 R&R·읽기 순서·절대 원칙은 이 페이지에서 잡는다.

디자이너 R&R¶

톤·브랜딩 추출(S7): Figma "디에듀 Design 2.0" + 토큰 + 브랜드 가이드. → design-system · figma-workflow.
시스템 운용: 컴포넌트·토큰·상태 시안 책임.
사용성 검증: 다이어리 스터디 → UX 우선순위·신규 기능 가설. → ux-decisions.
핸드오프: 토큰·상태·반응형을 코드 기준으로 전달. → dev-handoff.

여기서 시작하라 (합류 1일차)¶

위에서 아래로 읽으면 무엇을 진실의 원천으로 삼고 어떻게 일관성을 유지하는지가 잡힌다:

design-principles — Figma SSOT·토큰·상태 분기·Mobile-first
design-system — 토큰·컴포넌트·컴파운드 패턴
figma-workflow — '화면'/'보관' 페이지·업무일지
반응형 정책 — 브레이크포인트(1200/768/360) SSOT
ux-decisions · interaction-ia-patterns — 사용성·상태 패턴
dev-handoff · ai-design-apply — 핸드오프·AI 적용

일하는 흐름은 이렇게 돈다 — 톤 추출(Figma+토큰+브랜드 가이드) → 시안(상태 분기 시안화) → 사용성 검증(다이어리 스터디) → 비평 → 코드 기준 핸드오프. 토큰 일관성·상태 누락은 사람 검수 게이트를 거친다.

절대 원칙¶

raw hex 금지 — 시맨틱 토큰만.
모든 화면의 상태(Empty/Loading/Error/Active)를 시안으로 명시.
반응형은 반응형 정책 SSOT를 따른다(기능 페이지가 여기를 링크).

여기 있는 것¶

노드	무엇
design-principles	Figma SSOT·토큰 사고·상태 분기·컴파운드 패턴
ux-decisions	다이어리 스터디 사용성 검증·UX 의사결정
interaction-ia-patterns	상태 패턴·IA·내비게이션·인터랙션
critique	시안 점검 체크리스트·업무일지
design-system	토큰 체계·FSD 컴포넌트·컴파운드 패턴
figma-workflow	Figma 파일·페이지 구조·토큰 매핑 (MCP/Code Connect 도입 전 🚧)
ai-design-apply	AI 디자인 적용(Claude Design)
dev-handoff	핸드오프 체크리스트·FE 컨벤션 정렬
반응형 정책	반응형 정책 SSOT