Claude로 디자인하기: Figma에서 코드 우선 프로토타이핑으로 전환

AI 기반 프로토타이핑이 전통적인 디자인 모크업을 대체하고 있다

디자이너에게 사양 문서 작성과 Figma 모크업을 만드는 전통적인 워크플로우는 LLMs를 사용하여 코드베이스에서 직접 기능적인 프로토타입을 구축하는 능력으로 대체되고 있다. Claude를 사용하여 작동하는 코드를 생성함으로써 디자이너는 디자인 도구에서 구성 요소를 만들거나 문서를 포맷하는 "부수적인 중간 작업" 없이 문제 설명에서 살아있는 인터랙티브 기능으로 이동할 수 있다.

이 변화는 디자이너가 아이디어의 실현 가능성을 입증하고 즉시 실제 사용자와 테스트할 수 있게 한다. 엔지니어를 설득하여 개념 증명을 구축하도록 하는 대신, 디자이너는 의도대로 정확히 동작하는 "기능"(풀 리퀘스트)을 제출하여 디자인 및 엔지니어링 팀 간에 일반적으로 필요한 왕복을 줄일 수 있다.

코드 우선 디자인 워크플로우

AI를 통해 코드에 직접 디자인을 구현하는 것은 전통적인 와이어프레임을 우회하는 특정 반복 루프를 따른다:

문제 정의: 문제와 제안된 솔루션에 대한 설명을 작성한다.
AI 생성: 편집기 내에서 Claude에 대한 프롬프트로 설명을 사용하여 기본 기능을 생성한다.
빠른 반복: 복사 tweaking, 키보드 단축키 추가, 프롬프트 조정 등을 통해 무제한 반복으로 기능을 다듬는다—수동 디자인 업데이트의 마찰 없이.
사용자 검증: 변경 사항을 개발 환경에 푸시하여 즉시 사용자 피드백을 얻는다.
제출: 검토를 위해 작동하는 프로토타입을 풀 리퀘스트로 제출한다.

이 접근 방식은 Jane Street 내부의 SQL 방언인 JSQL(내부 SQL 방언)을 위한 LLM 프롬프팅 인터페이스의 생성에서 시연되었으며, 디자이너는 정적인 모크업이 아닌 실제 아티팩트와 함께 며칠을 보내며 테스트했다.

AI 통합 디자인의 도전

능력을 부여하지만, 코드 우선 디자인으로의 전환은 개발 생명주기에 새로운 긴장을 도입한다:

검토자의 딜레마

검토자에게 "완성된" 기능이 제시될 때, 협업 디자인 입력의 기회가 감소할 수 있다. 이를 완화하기 위해 Jane Street는 이러한 제출에 특정 정신 모델을 사용한다:

Living Docs로서의 프로토타입: 코드는 일회용으로 취급되며 제안서 역할을 한다.
피드백 중심 검토: 검토자의 주요 역할은 코드가 아닌 디자인 및 사용자 경험에 대한 피드백을 제공하는 것이다.
생산 인수: 디자인이 검증되면, 검토자는 일반적으로 아이디어를 인수하여 별도의 기능으로 구현하여 생산 수준의 코드 품질을 보장한다.

창의적 제약

LLM에 의존하면 디자이너의 사고방식이 유동적이고 창의적인 상태에서 순전히 반복적인 상태로 바뀔 위험이 있다. 디자이너가 AI가 생성할 수 있다고 믿는 것에 제약을 받을 경우, 빈 캔버스나 펜과 종이 접근 방식이 드러낼 수 있는 비전통적인 아이디어를 놓칠 수 있다.

커뮤니티 관점과 반론

이 변화에 관한 기술 논의는 몇 가지 중요한 trade-off를 강조한다:

엔지니어링 마찰: 일부 프론트엔드 엔지니어는 written specification의 감소가 인지적 부담을 증가시킨다고 보고한다. 생성된 코드를 읽어 의도된 변경 사항과 "슬롭"(의도하지 않은 AI 생성 변경 사항)을 구별하는 것이 Figma 파일을 따르는 것보다 더 frustrating할 수 있다고 지적한다.
디자인 품질 vs. 속도: AI가 "발산적 초기 단계 탐색"을 가속화하지만, 일부 디자이너는 출력 품질이 종종 현대 웹 트로프에 따르고 수작업으로 만든 디자인의 정밀함을 부족하다고 주장한다, 특히 공간이 제한된 모바일 인터페이스에서는 더욱 그렇다.
디자인 도구의 역할: 일부 실무자는 여전히 협업과 고충실도 다듬기를 위해 Figma를 선호하며, AI는 초기 프로토타입에 가장 적합하고 Figma는 최종 다듬기를 위한 도구로 남는다고 제안한다.

"여기서의 이점은 디자이너가 코딩을 배우는 것... 그러나 코드에서의 디자인은 기술 우선이다. 디자인의 목적—인간 목적을 위한 아티팩트를 형성하는 것—은 코드의 엄격한 규칙으로 시작하지 않는 것이 더 나을 수 있다고 주장할 수 있다.

기술적 컨텍스트: OCaml과 Bonsai

Jane Street에서는 이 워크플로우가 특히 유용한데, 그 이유는 회사가 OCaml과 Bonsai 프레임워크를 포함하는 특수한 기술 스택을 사용하기 때문이다. 이러한 이국적인 언어에 익숙하지 않은 디자이너에게 LLMs는 다리 역할을 하여, 함수형 프로그래밍에 수년간의 숙달이 필요 없이 코드베이스에 기술적으로 기여할 수 있게 한다.