Stitch, Claude Design, Figma 어떤 툴을 협업 툴로 사용해야 할까?

디자인 조직과 개발조직이 분리되어 있는 팀에서는, 대부분 Figma를 디자인과 개발 소통의 메인 툴로 사용하고 있을거라 생각합니다.

저희 팀은 최근에 신규 앱 프로젝트를 시작하면서 Figma를 메인 툴로 선정했다가, Google Stitch, Claude Design을 검토해보고 다시 Figma로 돌아왔는데요. 이 과정에서 경험한 레슨런을 소개합니다.

먼저 제가 일하는 방식을 짧게 공유드리면, 1인 AI Native 제품 팀을 목표로 하고있습니다.

하지만, 아직까지는 개발까지 모두 구현할 수 있는 수준은 되지 않아서 지인 개발자들의 도움을 받아 역할을 나누어 일하고 있는데요.

제가 기획과 디자인을 맡아 앞단의 작업을 확정하면, 코드 작업은 개발자가 이어서 진행하는 전통적인 프로세스입니다.

이렇게 역할이 나뉜 구조에서 "어떤 AI 디자인 도구를 협업의 중심으로 둘 것인가"가 최근 저의 가장 큰 고민이었습니다.

세 개의 디자인 툴을 직접 써보니

처음에는 별 고민없이 익숙한 Figma로 디자인 툴을 결정했었습니다.

그 사이 Google Stitch와 Claude Design이 잇달아 출시되고, Figma 주가 폭락 뉴스까지 들려오자 '트렌드에 뒤처지는 건 아닌가' 하는 생각이 들면서, 세 가지 도구를 모두 검토해보기로 했습니다.

Stitch와 Claude Design 모두 매력적이었습니다.

프롬프트 몇 줄로 화면을 뚝딱 만들고, 나아가 디자인 시스템까지 연결해주는 경험을 보여줬으니까요. 직접 사용해본 각 툴의 강점은 다음과 같습니다.

Google Stitch: 압도적인 '발산 속도'가 무기였습니다. 프롬프트 몇 줄이면 무한 캔버스 위에 수준 높은 콘셉트 디자인이 빠르게 만들어집니다. 특히 이를 DESIGN.md 파일로 깔끔하게 정리해 주는 경험은 초기 기획 단계에서 더할 나위 없이 좋았습니다.
Claude Design: 시각적 표현력이 놀라웠습니다. 추상적인 나의 의도를 내가 생각한 것 이상으로 그려내는 것은 물론이고, 기존 코드베이스를 읽어와 디자인 시스템을 자동으로 구축하는 능력까지 갖추고 있었으니까요.

하지만, 이렇게 만든 디자인 결과물을 개발자와 소통해야 하는 단계에서 어려움이 발생했습니다.

업무가 분업화되어 있다 보니, 디자인 결과물만으로는 앞단에서 정리한 기획과 디자인 맥락을 개발자가 100% 알기는 어려웠습니다. 제가 넘기는 산출물만이 개발자가 파악할 수 있는 맥락의 전부였죠.

개발자 입장에서는 이 화면의 무엇을 보고, 어떻게 기준을 잡아 코드를 짜야 하는지에 대한 연결 고리를 정의하기가 쉽지 않았습니다.

제가 기획부터 코딩까지 혼자 다 하는 1인 개발자였다면 Stitch, Claude Design으로 도전해 봤을 것 같은데, 협업 팀에서는 개발자에게 의도를 명확히 전달할 '최소한의 PRD(제품 요구사항 문서)'와 '확정된 디자인 가이드라인'이 반드시 필요했습니다.

그래서 저희 팀은 여러 논의 끝에 최종 아웃풋의 기준점을 다시 Figma로 맞추기로 협의했습니다.

그래서 지금은 이렇게 일합니다

현재는 세 도구의 역할을 다음과 같이 나누어 활용합니다.

Stitch와 Claude Design은 초반 아이디어 수집에 활용합니다. 이 단계에서는 제가 미처 생각하지 못한 화면 구조나 상호작용 아이디어를 얻는 데 큰 도움이 됩니다.

그다음 사용할 디자인이 확정되면, Figma MCP를 통해 컴포넌트 단위로 다시 정리하고 UI/UX를 최종 확정합니다. 제가 Figma에서 직접 디자인을 진행하지 않습니다. 100% MCP를 활용합니다.

이후 작업은 '개발자가 받아 구현할 수 있는 설계도'로 바꾸는 과정에 가깝습니다.

Figma로 최종 디자인을 확정한 이후에는 개발자와 상호 협의된 design.md를 업데이트하고, PRD와 함께 개발자에게 전달합니다.

개발자는 Figma MCP, design.md, PRD를 기준으로 AI 에이전트와 함께 코드를 작성합니다.

이렇게 업무 프로세스를 정리하는 과정에서 각 도구의 활용 포인트도 분명해졌습니다.

Stitch는 빠른 발상과 초안 생성에 강하고
Claude Design은 표현력과 확장성이 좋고
Figma는 협업의 기준점을 고정하는 데 가장 안정적입니다.

Figma MCP에 대한 경험담도 짧게 덧붙이면, 주변에서 Figma MCP는 토큰을 많이 잡아먹고 성능이 아쉽다는 평가를 자주 들었지만, 제 기준에서는 실무적으로 꽤나 쓸 만했습니다. 충분히 실무에 활용 가능한 수준까지는 왔다고 생각합니다.

AI 시대의 핸드오프를 고민하며.

이 과정에서 배운 점을 정리하면 다음과 같습니다.

혼자서 디자인부터 개발까지 모두 수행하는 1인 개발자라면, 코딩까지 한 번에 이어주는 Stitch나 Claude Design을 활용할 것 같습니다. 속도가 곧 경쟁력이니까요.

하지만, 기획·디자인과 개발이 분리된 협업 팀에서는 우리 팀의 작업 경계선, 즉 핸드오프가 일어나는 지점에 맞춰 업무 프로세스를 설계해야 합니다.

과거에는 사람과 사람 간의 소통만을 중심으로 핸드오프를 고민했지만, 앞으로는 핸드오프 시점에 오고가는 'AI와 AI의 소통'까지 함께 고려해야 합니다.

내가 사용하는 기획·디자인 AI의 아웃풋을, 개발자가 사용하는 개발 AI가 매끄럽게 활용할 수 있도록 만드는 것이 핵심인 거죠.

결국, 앞으로 AI 시대에 살아남는 강한 팀의 구조는 다음 두 가지 방향 중 하나로 진화할 것이라 생각합니다.

첫째, 핸드오프 과정 자체를 아예 최소화하는 '가장 기민하고 작은 단위의 팀'이 되거나,
둘째, 핸드오프가 일어나더라도 AI가 앞단의 맥락을 잃지 않도록 완벽하게 이어주는 '시스템을 갖춘 팀'이 되거나.

AI에게 맥락을 흐트러짐 없이 넘겨주는 능력이, 앞으로 AI 시대를 살아가는 모든 팀에게 요구되는 가장 강력한 경쟁력이 되지 않을까요?

언급된 도구·용어 정리

Google Stitch: 프롬프트로 화면을 빠르게 뽑아내는 Google(Gemini) 계열의 AI 디자인 도구. 무한 캔버스와 DESIGN.md 생성을 지원합니다.
Claude Design: 코드베이스나 브랜드 가이드를 읽어 디자인 시스템을 자동 구축하고, Claude Code로 개발까지 이어주는 Anthropic Labs의 도구입니다.
Figma MCP: Figma 디자인 데이터를 AI 에이전트가 직접 읽고 해석할 수 있도록 연결해 주는 프로토콜(서버)입니다.
design.md: 디자인 규칙과 토큰(Token) 등을 개발자가 읽기 편한 마크다운(Markdown) 형태로 정리한 명세서 포맷입니다.

무료 세미나 안내

6/1 차주 월요일. Claude와 Obsidian으로 AI Second Brain을 구축하는 방법을 주제로 무료 세미나를 진행합니다. 관심있는 분들은 아래 링크로 참여해주세요 😃

📌 일시: 2026.06.01(월) 오후 7시 LIVE
📌 장소: 온라인 ZOOM (링크 개별 발송)

👉🏻 신청: https://fastcampus.info/49j8yvw