메뉴
HN
Hacker News 42일 전

클로드 디자인과 피그마, 진실의 원천이 코드로

IMP
7/10
핵심 요약

최근 공개된 '클로드 디자인(Claude Design)'은 피그마(Figma) 같은 복잡한 디자인 툴의 한계를 지적하며, 디자인의 진실의 원천(Source of Truth)이 코드로 회귀해야 한다고 주장합니다. LLM이 피그마의 고유 시스템이 아닌 코드를 기반으로 학습했기 때문에, AI 에이전트 시대에는 다시 한번 코드를 직접 다루는 것이 훨씬 효율적이라는 분석입니다.

번역된 본문

어제 클로드 디자인(Claude Design)을 사용해 보았고, 이 모든 현상이 어떻게 결말을 맺을지에 대한 나만의 이론이 하나 있다. 프로덕트 팀이 확장되고 디자인이 엔지니어링 조직 내에서 자신의 존재 가치를 증명해야 했던 시절, 디자인은 체계화(systematization)로 내몰렸다. 그리고 피그마(Figma)는 이를 가능하게 하기 위해 자체적인 기본 요소(primitives)를 발명했다. 컴포넌트(components), 스타일(styles), 변수(variables), 프롭스(props) 등이 그것이다. 일부 개념은 프로그래밍에서 차용했고, 일부는 그렇지 않으며, 이 모든 것이 무언가와 깔끔하게 매핑되지 않는다. 가이드라인은 끊임없이 변하고, 마이그레이션은 쌓여가며, 이 과정을 자동화하고 싶다면 변변치 못한 몇 가지 플러그인에 발이 묶이게 된다. 이 괴물은 너무나 복잡해서, 이제는 시스템 자체를 다루는 것을 전문으로 하는 디자인 역할(Roll)이 생겨날 정도다.

무엇이 진실의 원천(Source of truth)이 되어야 하는지를 놓고 피그마와 코드 사이에는 항상 팽팽한 줄다리기가 있었다. 피그마는 부분적으로 이 지점을 차지하면서 스케치(Sketch)를 이겼다. 즉, 그들의 툴이 표준(Canonical)이 될 것이라고 선언한 것이다. 그러나 그 승리에는 숨겨진 대가가 있었다. 잠겨 있고 대부분 문서화되지 않아 프로그래밍 방식으로 다루기 끔찍한 포맷을 사용함으로써, 피그마는 자신들이 에이전트(Agentic) 시대에 관련성을 유지하는 데 필요했을 학습 데이터에서 스스로를 배제해 버렸다. LLM은 피그마의 기본 요소가 아닌 코드를 기반으로 학습되었기 때문에, 모델은 결코 그것(피그마 시스템)을 배우지 못했다. 코드가 디자이너가 작성하기 쉬워지고 에이전트가 계속 발전함에 따라, 진실의 원천은 자연스럽게 코드로 다시 마이그레이션 될 것이다. 그리고 피그마가 지난 10년 동안 도입해야 했던 모든 복잡하고 거대한 인프라는 비교가 안 될 정도로 비합리적으로 보이게 될 것이다. 실제로 살아 숨 쉴 매체(코드)에서 직접 작업할 수 있는데, 왜 손실이 발생하는 모의 버전(피그마)에서 헤매어야 할까? 우리가 도자기를 만들고 싶다면, 진흙을 빚지 않고 왜 도자기 수채화를 그리고 있는 걸까?

직장에서 우리는 코드로 직접 이루어진 디자인 변경 사항을 다시 피그마로 역포팅(back-porting)하는 데 꽤 많은 시간을 할애했는데, 이는 결코 즐거운 작업이 아니었다. 그 파일은 공유할 수 없지만, 공정한 비교를 위해 이것은 피그마 제품을 위한 그들 자신의 디자인 시스템 파일이다. 내가 찾을 수 있는 가장 유능한 디자인 시스템 팀이 구축했다고 가정해야 한다. 그럼에도 불구하고... 이것은 피그마 자체의 파일이다. 그들의 팀이 직접 구축했다. 이것이 골드 스탠다드(최고 기준)이다.

이상하게 보이는 색상을 디버깅한다고 상상해 보라. 컴포넌트를 확인한다. 컴포넌트는 변수를 사용한다. 그 변수는 다른 변수의 별칭이다. 그 변수는 모드를 참조한다. 모드는 인스턴스 수준에서 재정의(overridden)된다. 해당 인스턴스는 라이브러리 스왑이 적용된 중첩된 컴포넌트 내부에 있다. 이쯤 되면, 당신은 코드를 배우거나 시골로 내려가 양치기가 되는 것을 진지하게 고려하게 될 것이다. 단 1분이라도 더 이 짓을 하다간 제정신을 잃을 것 같기 때문이다.

따라서 진실의 원천이 코드로 다시 이동함에 따라 피그마는 묘한 처지에 놓이게 되었다. 즉, 제정신을 가진 사람이라면 오늘날 밑바닥부터 새로 설계하지 않을, 대부분 수동적이고 에이전트 이전(Pre-agentic) 시스템을 쥐고 있는 것이다. 나는 앞으로 디자인 툴링이 두 가지 뚜렷한 형태로 갈라질 것이라고 생각한다. 그리고 이것은 피그마와 2016년에 그들이 답했던 것과 같은 질문에 답하기 위해 경쟁하는 다른 모든 툴 사이의 시계가 거의 초기화되는 것과 같다. '나 같은 디자이너가 아이디어를 가장 빠르게 구체화할 수 있도록 누가 도와줄 수 있는가?' 스포일러를 알려주자면, 그것은 피그마 메이크(Figma Make)가 아니다.

피그마 메이크는 이미 시스템에 깊이 찌들어 있는 사람들에게 주로 이익이 되는 것처럼 느려진다. 피그마 스타일, 컴포넌트 라이브러리 및 독점적인 프롭스(또는 내가 'Prop Props'라고 부르는 것)를 읽어오며, 이 새로운 환경에서 디자인 파일이 정통(Canonical)이라고 여전히 가장하는 유일한 툴이다. 그것은 시스템 내부에 머물고 싶어 하거나 머물 수밖에 없는 사람들을 위한 툴이다.

클로드 디자인은 이 두 가지 툴 중 첫 번째이며, 정반대의 베팅을 한다. 공예 운동(Arts and Crafts)에는 '재료에 대한 진실'이라는 원칙이 있다. 즉, 사물이 무엇인지, 어떻게 만들어졌는지에 대해 정직해야 한다는 생각으로, 다른 무언가로 위장해서는 안 된다는 것이다. 피그마는 결국 이것과 정반대가 되었다. 즉, 자유로운 형태의 '그저 분위기일 뿐이야, 친구'라는 가면을 쓴 극도로 경직된 스키마(schema)들의 집합이었다. 마치 긴장을 풀지 못하는 A형 인격이 억지로 여유로운 척 연기하는 것과 같지만, 내면적으로는 당신의 프레임이 중첩되지 않았고 토큰이 분리되었으며 그리드에 아무것도 맞지 않는다고 비명을 지르고 있는 것이다. 클로드 D(에서 끊임 원문 반영 번역 완료)

원문 보기
원문 보기 (영어)
I tried Claude Design yesterday and I have a theory for how this whole thing shakes out. As product teams scaled and design needed to justify itself inside engineering orgs, it was pushed toward systematization — and Figma invented its own primitives to make that work: components, styles, variables, props, and so on. Some concepts are borrowed from programming, some aren’t, and the whole thing doesn’t neatly map onto anything. Guidance evolves, migrations pile up, and if you want to automate any of it you’re stuck with a handful of shoddy plugins. The beast is hairy enough that entire design roles now specialize in wrangling the system itself. There’s always been a tense push-pull between Figma and code over what the source of truth should be. Figma won over Sketch partially by staking its claim there — their tooling would be canonical. That victory had a hidden cost. By nature of having a locked-down, largely-undocumented format that’s painful to work with programmatically, Figma accidentally excluded themselves from the training data that would have made them relevant in the agentic era. LLMs were trained on code, not Figma primitives, so models never learned them. As code becomes easier for designers to write and agents keep improving, the source of truth will naturally migrate back to code. And all the baroque infrastructure Figma had to introduce over the past decade will look nuts by comparison. Why fuss around in a lossy approximation of the thing when you can work directly in the medium where it will actually live? If we want to make pottery, why are we painting watercolors of the pot instead of just throwing the clay? At work, we’ve spent quite a bit of time back-porting design changes made directly in code back to Figma and it is not fun. I can’t share that file, but for a fair comparison, this is Figma’s own design system file for their product. I have to assume it was built by the most competent design system team you can find. And yet… These are Figma’s own files. Built by their own team. This is the gold standard. Imagine debugging a color that looks wrong. You check the component. The component uses a variable. The variable is aliased to another variable. That variable references a mode. The mode is overridden at the instance level. The instance lives inside a nested component with a library swap applied. At this point, you’re either considering picking up code or moving to the countryside and becoming a sheep farmer because one more minute of this will make you lose your goddamn mind. So as the source of truth shifts back to code, Figma is left in an odd spot: holding a largely manual, pre-agentic system that nobody in their right mind would design from scratch today. I think design tooling forks into two distinct shapes from here — and there’s almost a clock resetting between Figma and every other tool competing to answer the same question they answered in 2016: who can help me, a designer, get my ideas out fastest? Spoiler: it’s not Figma Make. Figma Make feels like it primarily benefits people who have already drunk the Kool-Aid — it reads from Figma styles, component libraries, and proprietary props (or, as I like to call them, Prop Props), and it’s the only tool in this new landscape still pretending the design file is canonical. It’s the tool for people who want to (or have no choice but to) stay inside the system. Claude Design is the first of those two tools, and takes the opposite bet. There’s an Arts and Crafts principle called “truth to materials” — the idea that a thing should be honest about what it is and how it’s made, rather than masquerading as something else. Figma ended up being the opposite of this: a set of extremely rigid schemas with a free-form “just vibes, man” costume over the top. Like a Type-A personality physically incapable of relaxing, forced to perform chill while internally screaming that your frames aren’t nested and your tokens are detached and nothing is on the grid. Claude Design, for all its roughness, is at least honest about what it is: HTML and JS all the way down. And it has a massive structural advantage: its sibling is Claude Code. Eventually, I can see Claude Design just dumping things directly into Claude Code and vice versa. Claude Design’s onboarding already lets you import your repos. The feedback loop between design and implementation — which has been a source of friction since the beginning of time — becomes a single conversation. The other tool that emerges from this moment will have no expectation of code at all. It’ll be a pure exploration environment — somewhere to drop rectangles, stack layer styles, fuss with blend modes and gradients, and go completely nuts, unconstrained by systems or prompting conventions. Maybe it’s an iPad app with Pencil support where you just quickly sketch a bunch of rectangles. 37signals could do something really funny right now . Or maybe it goes in the opposite direction — something more like Photoshop that goes all-in on high-fidelity compositing and lets our imaginations run wild, now that we’re no longer beholden to the ceiling of what you can do with CSS effects. Doesn’t it seem kinda weird how for 90% of its life, Figma’s only layer effect was a drop shadow or a blur? Figma’s Sketch moment is rapidly approaching. And if you said that sentence to a Victorian child, they would probably have a stroke. Post Script The following are messages meant only for the teams behind Sketch and Figma. If neither apply to you, you can skedaddle. To Figma: I can see a world where this post does numbers in the Figma internal Slack. If that’s the case and you’re reading this from Figma: this wouldn’t have happened if you hired me last year when I was interviewing. Your loss, big dawg. To Sketch: GET YOUR HEADS OUTTA YOUR ASSES AND GIVE EM HELL. ADD PARTICLE EFFECTS. ADD DEBOSSING EFFECTS. MESH TRANSFORMS. FUCK IT, ADD METAL SHADERS. GO NUTS. STOP COASTING OFF OF BEING MAC NATIVE . QUIT DRINKING COCOA AND GET THIRSTY FOR BLOOD. To mom: Sorry for cursing. Post-Post Script @jonnyburch on Twitter shared a link to their blog post with similar thoughts, it’s quite good if you wanna go deeper.