콘텐츠로 이동
✍️ 수정가능누구나 고쳐도 됩니다. 고치면 하단 frontmatter의 갱신일·작성자·변경요약을 남겨 주세요.작성 Claude · 2026-06-04 · v12 재편·raw 컴파일·인간화

디자인 원칙 & 철학

요지

d-edu 디자인의 사고방식: Figma가 single source of truth, 토큰으로 일관성, 상태 분기를 시안으로 명시한다. 디자이너가 톤·브랜딩을 추출(S7)하고 시스템으로 운용한다.

핵심 원칙

  1. SSOT는 Figma "디에듀 Design 2.0". 디자인 산출물의 home은 Figma. FE는 Figma 토큰을 Tailwind 토큰으로 매핑해 구현 — 디자인↔코드 일관성의 기준점. → figma-workflow · design-system.
  2. 토큰으로 사고한다 (raw hex 금지). 색·텍스트·라인을 시맨틱 토큰으로 추출(text-text-main, bg-gray-scale-white, border-line-line1 등). 컴포넌트는 raw hex가 아니라 토큰 클래스만 → 브랜드 톤 변경이 토큰 한 곳에서 전파. 상세는 design-system.
  3. 상태 분기를 시안으로 명시. 동일 화면의 상태 분기(모집 여부·프리뷰 vs 마이페이지, 후기 노출/비노출 등)를 Empty/Loading/Error/Active 모두 시안화 → 개발·QA가 추측 없이 구현. 상태 판단 프레임은 ux-decisions · interaction-ia-patterns.
  4. Mobile-first 지향, 단 비중 차등. 제약 큰 모바일을 먼저 설계하면 핵심 우선순위가 잡힌다. 단 실제 작업이 태블릿/PC인 화면은 모바일을 보조 채널로. 반응형은 고비용이라 우선순위 합의 선행. SSOT는 반응형 정책.
  5. 일관성 = 컴포넌트 + 컴파운드 패턴. 범용 UI는 Dumb 컴포넌트(shared/components)로, 도메인 결합 UI는 feature 위젯으로. 컴파운드 패턴(Root + Sub)으로 변형을 흡수. → design-system · dev-handoff.

판단 기준 · 의사결정 룰

  • 확정은 Figma에서. AI 생성물·코드는 시안 후보일 뿐, 진실은 Figma '화면' 페이지.
  • 색·텍스트·라인 값을 정할 때 raw hex가 아니라 토큰을 신설/재사용한다(토큰 한 곳 = 전 화면 레버).
  • 상태가 갈리는 화면이면 "알아서"가 아니라 Empty/Loading/Error/Active를 전부 시안화(빈 상태는 문구까지).
  • 반응형 작업이면 반응형 정책 SSOT 따르고, 우선순위 합의(고비용) 후 착수.
  • 신규 컴포넌트가 필요하면 기존 shared 재사용 우선, generic해지면 feature 위젯 → shared 승격.

하지 말 것 (안티패턴)

  • raw hex 사용 금지 — 시맨틱 토큰만.
  • "이런 경우엔 알아서" 금지 — 상태 분기는 디자인이 시안으로 명시한다.
  • 데스크탑 우선 + 모바일 '추가' 방식 금지 — 모바일 품질 저하 + 리소스 과다.
  • 확정 안 된 AI/코드 산출물을 SSOT로 취급 금지 — Figma가 진실.

예시 · 사례

  • 좋은 예: 모집 여부별 스터디룸 프리뷰를 Empty/Active 분리 시안화 → FE가 추측 없이 구현.
  • 토큰 레버 예: 브랜드 톤 변경을 text-text-main 등 토큰 한 곳에서 → 전 화면 전파.
  • 나쁜 예: 빈 상태 문구 누락 → 개발이 추측 → 버그.

전사 공통

AI를 끼는 디자인 작업은 ai-design-apply(→ai-collaboration). 리서치 방법론 일반은 methodology-literacy.

관련