Thoughts and feelings around Claude Design

개요

Claude Design은 기존 디자인 도구들이 시스템화 과정에서 겪는 복잡성과 코드와의 괴리를 해결하고자 HTML과 JS를 직접 활용하는 접근 방식을 제시합니다.

주요 내용

* Figma는 컴포넌트, 스타일, 변수 등 자체적인 원시(primitives)를 통해 디자인 시스템의 시스템화를 추구했지만, 이는 코드와의 매핑이 어렵고 프로그래밍 방식으로 다루기 힘들어 LLM 학습에서 배제되는 결과를 낳았습니다.
* LLM이 코드 기반으로 학습되었기 때문에, 코드가 디자이너에게 더 쉬워지고 에이전트가 발전함에 따라 진실의 원천(source of truth)은 자연스럽게 코드로 이동할 것입니다.
* Figma의 복잡한 시스템 구조(변수, 속성, 중첩된 컴포넌트 등)는 디버깅을 매우 어렵게 만들며, 현재 시점에서 새로 설계하기에는 비효율적입니다.
* 디자인 도구는 Figma와 같이 기존 시스템 내에 머무르는 도구와, Claude Design처럼 코드 중심으로 돌아가는 두 가지 형태로 나뉠 것입니다.
* Claude Design은 HTML과 JS를 직접 사용하는 "재료의 진실성(truth to materials)" 원칙을 따르며, Claude Code와의 통합을 통해 디자인과 구현 간의 피드백 루프를 단순화합니다.
* 또 다른 형태의 도구는 코드와 무관한 순수한 탐색 환경으로, 예를 들어 iPad 앱이나 Photoshop과 같은 고해상도 합성 도구가 될 수 있습니다.

시사점

Claude Design은 디자인 시스템의 복잡성을 해소하고 코드와의 연계를 강화하여, 진실의 원천을 코드로 이동시키는 현대적인 디자인 패러다임의 전환을 보여줍니다.