스티치, 피그마 메이크 그리고 클로드 디자인
안녕하세요. Ainewt에서 UX/UI 디자인을 담당하고 있는 임영은 매니저 입니다. 최근 스티치(Stitch)가 업데이트 되고 클로드 디자인이 출시된 이후 디자인 업계에서 과연 “우리가 알던 디자인 프로세스가 유효할까?” 라는 근본적인 질문들이 쏟아지고 있습니다. 피그마(Figma) 중심의 견고했던 생태계가 흔들리고 코드가 디자인의 새로운 원본으로 급부상하면서 업계는 거대한 지각변동을 맞이했습니다.
실제로 앤트로픽의 클로드 디자인 총괄 제니 웬(Jenny Wen)은 "리서치, 발산, 수렴으로 이어지던 기존의 낡은 디자인 프로세스는 끝났다.(The process is dead)"고 선언했습니다. 수개월씩 걸리는 그래픽 작업보다 빠르게 코드로 만들고 검증하는 시대가 도래하면서 수많은 변수와 배리언트로 비대해진 피그마의 폐쇄적 포맷은 LLM이 학습하기 좋은 ‘HTML/JS 코드’라는 정직한 매체에 조금씩 자리를 내어주고 있습니다. 과거 피그마가 Mac 전용 UI툴이었던 스케치(Sketch) 를 밀어냈던 것처럼 인터페이스 디자인 시장의 판도가 통째로 뒤바뀌는 결정적인 스케치 모먼트(Sketch Moment)가 도래한 것입니다.
빠르게 변화하는 시장의 흐름을 배경으로 이번 글에서는 트렌드를 조명하는 것을 넘어 피그마 메이크(Figma Make)와 스티치(Stitch), 클로드 디자인(Claude Design)을 사용하여 AI로 프로덕트를 구성하고 비교 · 분석하는 과정을 공유하고자 합니다.
1. 피그마 메이크(Figma Make)
피그마 메이크는 피그마 서비스 환경 내에서 사용자가 원하는 인터페이스 화면에 대한 요청과 정보를 텍스트 프롬프트로 입력하면 순식간에 편집과 수정이 가능한 디자인 레이어와 오토레이아웃 구조가 적용된 결과물을 생성해 주는 ‘피그마 네이티브 AI’ 기능입니다. 단순한 텍스트 입력을 넘어 이미지나 목업 파일, 기존 디자인 자산을 직접 첨부하거나 커넥터(Connectors)를 통해 노션, 지라, 아사나 등의 외부 데이터까지 연동해서 원하는 디자인을 생성할 수 있습니다.
이번 글에서는 비교 테스트를 위해 20대와 30대를 타깃으로 한 다크 테마 기반의 자산 관리 웹 대시보드를 공통 요구사항으로 입력하여 각 디자인 툴의 성능과 특징을 비교해 보았습니다. 정의된 프롬프트에는 데스크톱 반응형 웹 환경을 기반으로 좌측 고정 사이드바와 메인 콘텐츠 영역 레이아웃이 적용되며 고급스럽고 미니멀한 다크 모드 스타일과 Inter 폰트를 사용하여 세련된 금융 서비스를 만들도록 명시되어 있습니다. 인터페이스 화면은 상단바와 사이드바 내비게이션을 기본 틀로 삼고 순자산 요약과 지출 내역 도넛 차트, 예산 진행도, 저축 목표 프로그레스 링, 월간 현금 흐름 바 차트 그리고 최근 거래 내역 테이블까지 총 6개의 핵심 금융 데이터 위젯이 한눈에 들어오도록 구성했습니다.
Figma Make에 요구사항 문서를 입력하면 AI가 컨텍스트를 분석해서 도넛 차트나 막대 차트 등 이전에는 기획자나 디자이너가 정의해 주어야 했던 부분이 자동화된 ‘프로덕션 수준의 UI 코드’로 구축되어 제공됩니다. 화면이 생성된 이후에는 우측의 캔버스를 보면서 왼쪽 피드창을 통해 AI에게 대화형으로 명령을 내려 디자인과 구성 요소들을 수정하면서 지속적으로 명령하고 고쳐나가는 작업이 가능합니다. 사용자가 원하는 결과를 생성하기 위한 반복적인 요청과 생성 과정에서 오류가 발생하면 AI가 이를 감지하여 경고창으로 알려주며 ‘Fix for me’ 버튼을 활성화해서 자동으로 오류를 수정할 수 있는 기능도 제공하고 있습니다.
실제로 정의된 프롬프트로 대시보드를 생성해본 결과 UI에서 필수적인 요소들이 대부분 구현되는 결과를 확인했습니다. 특히 마우스 커서를 올렸을 때 세부 수치가 나타나는 월별 현금 흐름 차트의 호버 툴팁 노출이나 상단 바의 날짜 범위 셀렉터 변경에 따른 인터랙션 효과가 피그마 고유의 프로토타입 트리거로 정교하게 구현되어 피그마 안에서 바로 테스트 할 수 있습니다. 또한 생성된 결과물이 별도의 이관 과정 없이 피그마 파일의 온전한 벡터 레이어와 오토레이아웃 구조 그대로 캔버스에 생성되기 때문에 디자이너가 픽셀 디테일을 미세 조정할 수 있다는 장점이 있습니다.
다만 결과물이 정적 그래픽 포맷 및 피그마 자체 프로토타이핑 기능에 기반하고 있기 때문에 프로그래밍적 로직(React State 등)의 완벽한 구현에는 아직 한계가 있습니다. 클릭에 기반한 아이콘 색상 변화나 사용자의 입력값에 따라 실시간으로 데이터가 계산되어 리렌더링(Re-rendering)되는 등의 고도화된 동적 비즈니스 로직은 단독으로 동작하지 못합니다. 또한 규격화된 컴포넌트 단위로 엄격하게 디자인이 생성되기 때문에 웹이나 앱 형태를 벗어난 자유로운 형태의 문서(PPT 등)를 생성하는 것에 한계가 있습니다.
2. 스티치(Stitch)
스티치는 구글이 갈릴레오 AI(Galileo AI)를 인수하여 자사의 Gemini엔진을 기반으로 발전시킨 코드와 디자인의 ‘하이브리드 AI UI 디자인 도구’입니다. 복잡한 디자인 소프트웨어 전문 지식 없이도 누구나 손쉽게 앱과 웹사이트의 인터페이스를 기획하고 구현할 수 있도록 돕습니다.
텍스트(자연어) 설명뿐만 아니라, 노트에 손으로 거칠게 그린 스케치나 화이트보드 와이어프레임 이미지까지 알아보고 이를 바탕으로 구체적인 UI 디자인으로 변환하는 뛰어난 인식 능력을 갖추고 있습니다. 과거에는 갈릴레오 AI가 디자인을 SVG 이미지 형태로만 제공하는 한계가 있어 개발자가 바로 쓰기 어려웠던 것과 달리 스티치는 테일윈드 CSS 기반의 React 및 HTML 코드를 직접 생성해 주기 때문에 개발 활용성이 높습니다. 즉, 화려한 그래픽보다는 기능 중심의 프로덕트를 즉시 개발할 수 있는 초기 코드를 제공하는데 특화된 솔루션 입니다.
스티치에 프롬포트를 입력하면 가장 먼저 출력되는 것은 디자인 시스템입니다. 피그마 메이크가 바로 결과물을 만들어 내는 것과 달리 스티치는 먼저 디자인시스템을 만든 뒤에 이 시스템을 바탕으로 사용자 인터페이스를 생성하는 것을 알 수 있습니다. 이 과정에서 다크 · 라이트 모드의 컬러 팔레트와 텍스트 스타일을 정의하며, 구성 요소의 모서리 반지름 설정까지 반영된 기본적인 버튼 생성이 가능합니다. 전체 추론 과정은 왼쪽 피드창에 위치한 Design.md로 확인할 수 있습니다. 다만 현재는 디자인 시스템 자체를 피그마로 내보내거나 타이포(Typo), 버튼(Button), 아이콘(Icon)을 세부적으로 수정하는 것은 불가능합니다.
Design.md 시스템을 바탕으로 전체적인 레이아웃이 구성되기 때문에 유사 서비스보다는 높은 완성도로 신속하게 인터페이스를 구현하는 것이 가능합니다. 특히 실무 초반 작업에서 가장 강력한 장점은 다양한 자료를 기반으로 초안과 디자인 시안을 무수히 많이 뽑아낼 수 있다는 점입니다. 무한하게 확장이 가능한 캔버스 환경에서 디자인 시스템과 함께 여러 개의 상세 페이지 시안을 동시에 빠르게 생성할 수 있어 빈 화면에서 시작하는 ‘제로 투 원(0 to 1)’의 수고로움을 없애고 초기 와이어프레임 제작 속도를 극대화합니다. 생성된 요소들은 프롬프트로 유연한 1차 수정도 가능합니다.
다만 지시사항 병목 현상으로 인해 프롬프트가 길어질수록 세밀한 디테일이 누락되거나 공간 배치를 임의로 해석하는 경향이 있습니다. 또한 툴팁이나 데이터 연동 같은 복잡한 상태 관리가 불가능해 동적인 기능보다는 정적인 UI 구성에 집중되어 있습니다. 생성된 코드는 내부에서 바로 확인할 수 있으며 리액트(React) 앱, 줄스(Jules), AI 스튜디오로 내보내거나 외부 에디터에서 자유롭게 다룰 수 있습니다. 다만 시각적인 화면 이동 외에 실제 백엔드와 연동되어 작동하는 서비스를 만들려면 외부 AI 코딩 에이전트를 연동해야 하며 이 과정에서 코드 오류나 추천 로직이 누락되는 등의 한계도 존재합니다.
따라서 실무에서는 완벽한 최종 산출물보다는 초기 기획 단계의 커뮤니케이션 비용을 줄이고 시안을 대량으로 뽑아내는 도구로 활용해야 합니다. 디자인 시스템 자체는 내보낼 수 없지만 생성된 인터페이스 화면들은 피그마로 내보낼 수 있으므로 AI로 거시적인 레이아웃 초안을 빠르게 잡은 뒤 누락된 인터랙션이나 미세 조정은 피그마에서 추가적인 작업으로 진행하는 것을 권장합니다.
3. 클로드 디자인(Claude Design)
클로드 디자인은 앤트로픽(Anthropic)에서 출시한 AI 기반 UI 디자인 및 코드 생성 도구로 자연어로 요구사항을 설명하면 시각적인 화면 디자인뿐만 아니라 실제 프로덕션 환경에서 즉시 투입해 사용할 수 있는 리액트 및 넥스트.js(Next.js) 컴포넌트 코드를 동시에 생성해 주는 것이 가장 큰 특징인 서비스입니다.
클로드 디자인은 디자인 시스템을 등록하여 프로젝트 전체에 일관된 디자인을 적용할 수 있습니다. Set up design system 메뉴에 프로젝트 개요를 쓰고 디자인 가이드 문서, 피그마 파일, 로고, 폰트 등을 올리면 AI가 브랜드 컬러, 타이포그래피, 버튼 곡률, 여백 등 18가지 이상의 핵심 컴포넌트 규칙을 뽑아냅니다. 사용자가 이 규칙들을 검토해 Looks good이나 Needs work를 선택하고 최종적으로 디자인 시스템을 활성화하면 이후 모든 작업에서 일관성 있는 톤앤매너가 유지됩니다.
탄탄한 뼈대가 세워지면 이 규칙을 엄격하게 따르는 결과물을 찍어냅니다. 와이어프레임, 인터랙티브 프로토타입, 슬라이드 덱, 랜딩 페이지 중 원하는 형태를 고르고 앞서 만든 디자인 시스템을 적용합니다. 이어서 프롬프트를 입력하면 AI는 맥락이 더 필요할 때 사용자에게 선택형 질문을 던져 의도를 명확히 파악하며 정해진 브랜드 톤앤매너를 준수한 UI 시안이 완성됩니다.
첫 시안이 나온 후에는 전용 편집 기능으로 디테일을 잡습니다. 우측 상단의 트윅스(Tweaks) 슬라이더를 마우스로 조절하며 포인트 컬러, 애니메이션 속도, 3D 쉐이더 강도 등을 실시간으로 바꿉니다. 마우스로 특정 영역을 드래그해 박스를 치고 수정을 요구하거나 인라인 댓글로 부분 수정을 요청하기도 합니다. 에딧 기능을 통해 특정 요소를 클릭해 여백, 모서리 곡률, 폰트 굵기 등을 수치로 직접 조정하는 것도 가능합니다.
화면이 확정되면 그림 파일이 아닌 실제 서비스에 쓸 수 있는 프로덕션 레벨의 코드로 뽑아낼 차례입니다. HTML, PPTX, PDF는 물론, React와 Next.js 코드가 완벽히 짜여진 풀스택 소스 코드 압축파일을 한 번에 다운로드합니다. 마지막으로 프로젝트를 터미널로 전송하는 버튼을 누르면 내 컴퓨터 개발 환경으로 프로젝트가 다이렉트로 넘어갑니다. 이후 로그인 인증이나 DB 연동 같은 복잡한 백엔드 로직은 개발 AI인 클로드 코드가 이어받아 완성합니다. 그 외로 프롬프트만으로 WebGL 기반 쉐이더나 3D 그래픽 같은 고도화된 시각 효과와 애니메이션을 쉽게 구현한다는 점도 클로드 디자인만의 큰 장점입니다.
반면 피그마처럼 마우스로 픽셀을 잡고 조작할 수 없어, 프롬프트로 미세한 조정을 요청하면 화면이 깨지는 등 미세한 수정 작업이 어렵다는 한계가 있습니다. 이 때문에 웹 접근성이나 포커스 링 같은 마이크로 디테일이 누락되거나 코드가 중복되는 현상이 발생하기도 합니다. 게다가 정보의 강약을 조절해 시각적 임팩트를 주는 판단력이 부족하여 사람의 개입이 필수적입니다. 실무에서 가장 큰 걸림돌은 치명적인 수준의 토큰 비용 소모인데 몇 번 수정을 거치다 보면 주간 할당량을 금방 초과하여 추가 비용 부담이 커집니다. 이에 더해 아직 베타 성격이 강해 화면 확대/축소 시 버그가 나는 등 시스템이 불안정하며 결과물이 클로드 특유의 스타일로 획일화되는 경향이 있습니다.
피그마 메이크, 스티치, 클로드디자인을 직접 사용하며 분석한 결과 각 플랫폼 마다 성능이나 특화된 기능이 달랐습니다. 클로드 디자인은 현재까지 가장 프롬프트를 잘 이해하면서 React 및 Next.js 코드 기반으로 인터페이스를 만들지만 스티치는 테일윈드 및 Html과 Css 기반으로 빈 캔버스에 자유롭게 그리는 프로세스를 가지고 있었고 피그마는 완벽하게 벡터 요소로 작업되어 미세한 수정이 편리하다는 특징이 있었습니다. 각 플랫폼의 특징을 이해하고 자신의 상황에 맞는 도구를 사용하는 것이 중요해 보입니다. 따라서 대표적인 AI 생성형 인터페이스 제작 플랫폼의 역할과 어떤 장단점이 있는지 그리고 추후 어떻게 실제 업무에 활용해야 하는지에 관해 정리해보았습니다.
4. 클로드 코드와 피그마 MCP를 활용한 자동화 공장
기존에는 피그마로 디자인 시안을 만들고 이를 다시 웹 코드로 구현하는 과정에서 디자인 시스템이 파편화되는 문제가 늘 이슈였습니다. 디자이너가 피그마에서 가이드라인을 수정해도 개발 코드에 실시간으로 반영되지 않아 일일이 수작업으로 동기화해야 했고 기획안에 맞춰 디자인 템플릿을 대량으로 찍어내는 작업 역시 많은 시간과 반복 노동이 필요했습니다. 이러한 파편화와 비효율을 해결하기 위해 클로드 코드와 피그마 MCP를 연동하여 자동화 공장을 구축할 수 있습니다.
먼저 유료 피그마, 커서 에디터, 클로드 코드 및 API 키를 준비합니다. 피그마 MCP를 클로드 코드 터미널에 직접 연결하면 AI가 피그마 파일의 구조와 벡터 데이터를 실시간으로 직접 읽어옵니다. 이를 통해 폰트 크기, 여백, 컬러 등을 분석하게 하면 AI가 이를 JS/CSS 형태의 디자인 토큰 코드로 추출하여 저장합니다. 그 다음 AI가 추출된 토큰을 반드시 재사용하고 디자인 규칙을 임의로 해치지 않도록 통제 원칙이 담긴 claude.md 작업 지침서를 등록합니다. 이렇게 공통의 디자인 뼈대가 세워지면 이 시스템을 활용해 당장 서비스 가능한 웹페이지를 만들거나 콘텐츠를 대량 생산하는 플러그인을 구축할 수 있습니다.
실제 작동하는 웹페이지가 필요하다면 claude.md 원칙에 맞춰 구현해 달라고 지시하면 됩니다. 그러면 AI가 디자인 토큰을 조립하여 실제 프로덕션 수준의 프론트엔드 코드를 작성하므로 피그마와 똑같이 구현된 실제 웹사이트를 로컬 서버에서 바로 확인할 수 있습니다.
반대로 피그마 내부에서 기획 콘텐츠를 대량 생산하고 싶다면 커스텀 플러그인을 만들어 활용하는 방법이 있습니다. 클로드 코드에게 추출한 시스템 기반으로 "주제를 입력하면 클로드 API를 호출해 내용을 채워주는 피그마 플러그인"을 제작해 달라고 요청하여 빌드합니다. 이후 피그마에서 이 플러그인을 실행하고 원하는 주제만 입력하면 사전에 정의된 디자인 규칙을 준수하면서 기획 텍스트가 채워진 피그마 디자인 템플릿이 즉각 캔버스에 생성됩니다.
5. 에이전틱 UI 시대, 디자인 시스템의 토큰화와 디렉터로서의 디자이너
피그마 메이크에서 출발해 스티치와 클로드 디자인이 출시되고 나면서 정적인 화면에서 사용자의 질문과 맥락에 맞춘 인터랙티브한 UI가 실시간으로 조립되고 실제 사용 가능한 프로토타입을 생성하는 시대가 되었습니다. 심지어 AI도 실제 디자이너의 뇌와 비슷한 단계로 추론하여 디자인 시스템을 만들고 적용하기 시작했습니다. 세계의 각 기업의 유명 브랜드들의 디자인들이 토큰화되어 마크다운 형식으로 정리되고 있으며 이 문서나 URL을 AI에 적용하면 일관된 디자인을 만들어 낼 수 있게 되었습니다.
이러한 변화는생성형 AI 플랫폼이 단순한 '이미지나 시안 제작 도구'에서 디자인 시스템과 코드를 실시간으로 결합해 작동하는 '통합 개발 인프라'로 진화하고 있음을 보여줍니다. 과거의 플랫폼들이 개별 화면을 그리는 도구였다면 현재의 플랫폼들은 데이터를 학습하여 실시간으로 맥락을 추론하고 UI를 유기적으로 생성하는 에이전트 허브로 성격이 변한 것입니다.
결국 앞으로의 플랫폼 경쟁력은 누가 더 정교하고 유연한 디자인 시스템 연동 기술을 제공하는지 그리고 디자이너가 주입한 브랜드 토큰을 얼마나 정확하게 추론하여 실제 사용 가능한 코드로 만들어내는지에 달려 있습니다. 사용자는 텍스트와 문서, URL만으로도 완성도 높은 프로토타입을 손쉽게 확보할 수 있게 되며 플랫폼 간의 유기적인 워크플로우를 통해 초안 생성부터 시스템 뼈대 확립까지의 전 과정을 자동화하는 흐름이 더욱 가속화될 것입니다.
텍스트와 문서만으로 초안 생성부터 시스템 뼈대 확립까지 전 과정이 자동화되면서 실무자의 역할 또한 근본적으로 뒤바뀌고 있습니다. 디자이너는 픽셀을 옮기는 단순 실행자에서 벗어나 AI가 원활히 작동하도록 디자인 시스템을 설계해 주는 건축가로 거듭나야 합니다. 나아가 AI가 쏟아내는 결과물의 비즈니스 임팩트와 윤리성을 검증하고 통제하는 디렉터로 전환될 것으로 예상되며, 이에 따라 디자이너는 AI에게 디자인 원칙을 이해할 수 있는 데이터로 학습시키고 활용하는 워크플로우를 구축해야 합니다. 인공지능의 시대에서는 더 많은 가설을 테스트하고 제품의 비즈니스 가치를 높이고 AI를 얼마나 능숙하게 통제하고 실무에 녹여내는지가 디자이너의 핵심 역량이 될 것입니다.
앞으로 피그마 메이크 스티치 클로드 디자인 등 AI 생성형 UI 플랫폼들이 어떻게 더 발전해나갈지 무척 기대가 되며 이 글이 새로운 기술과 디자인의 변화에 관심이 있는 모든 분들에게 도움이 되었으면 좋겠다는 바람으로 글을 마칩니다. 다음에는 한층 더 흥미롭고 유익한 콘텐츠로 다시 돌아오겠습니다.
참고자료
클로드 코드(claude code)+ 피그마(figma)로 일관된 디자인 하는 방법.