2P by pentaxzs 3시간전 | ★ favorite | 댓글과 토론

AI 시대의 디자인 시스템 재정의: 기계가 이해할 수 있는 언어의 필요성

AI 기반 디자인 도구가 급속도로 발전하면서 기존 디자인 시스템이 필요할까에 대한 질문.
그러나 역설적이게도 AI가 등장한 시점일수록 더욱 정교하고 체계적인 디자인 시스템이 필수가 되는 현실.

핵심 개념:
• 발산과 수렴의 이중성

  • AI는 프롬프트 기반의 아이디어 생성(발산)에는 탁월하지만, 무한하게 뻗어나가는 결과물을 일관된 제품으로 수렴시키는 단계에서는 명확한 설계 규칙이 필수.
  • 현재 대부분의 AI 생성물은 시각적으로는 그럴싸하지만 실제 제품화에는 적합하지 않은 상태

• 기계 해석 가능성의 구현

  • 기존 디자인 시스템은 인간 디자이너의 인지능력을 기반으로 설계되었으나, AI 시대에는 다음 세 가지 요소로 재구성해야 함.
    (1) 시맨틱 네이밍(Semantic Naming) - 'Pri' 대신 'Primary', 'Btn' 대신 'Button'처럼 맥락이 명확한 풀네임 사용,
    (2) JSON 기반 계층 구조 - Primitive Tokens(color.json, size.json) → Semantic Tokens(brand-primary.json) → Components → Patterns 순으로 의도를 명확히 표현,
    (3) md 파일 기반 프롬프트 프로토콜 - Role & Core Rules, Mandatory Workflow, Style & State Rules를 엄격히 정의

• 변환 기술 스택 활용

  • Figma의 Variables를 JSON으로 변환(variables2json 플러그인) 후 Claude Code에서 Tailwind v4 CSS 변수로 변환하면, 브라우저가 즉시 인식할 수 있는 전역 스타일 변수가 생성.
  • 이는 AI가 클래스명으로 신속하게 디자인 시스템에 접근하도록 함.

• 도구 생태계의 성숙화

  • Google Stitch의 design.md 자동 추출, Claude Design의 Figma 연동, Claude Code에서 시스템 코드화 등을 통한 방식 등.
  • 도구는 점차 발전하고 있고, 디자인 시스템 파일만 넣어도, 혹은 스크린샷 몇 장만 넣어도 짜임새 있고 빈틈없는 디자인 시스템을 만들어주는 세상이 곧 올 것