2025년 Google Stitch, Claude Code, Playwright MCP 활용법 - SaaS

실전 프로젝트에서 경험한 Catalyst UI 및 디자인 개선 과정

Craig Hwitt는 자신의 SaaS 프로젝트 Catalyst의 실사용 환경에서 Google Stitch, Claude Code, 그리고 Playwright MCP를 조합해 프론트엔드 디자인을 대폭 개편한 과정을 상세히 소개했습니다. Catalyst는 창업자, CEO 등 비즈니스 리더를 위한 주간 목표 체크인 및 동기부여 서비스로, 가입 후 매주 금요일에 진행 상황을 점검합니다.

Hwitt의 설명에 따르면, 기존 Catalyst의 UI는 '기본적인 수준'으로 "남들처럼 평범하게 보이는 디자인"이었으나, 더 깊은 신뢰와 매력, 그리고 "와, 이 프로젝트 진짜 잘 만들었다!"라는 인상을 주고자 디자인 개선에 나섰습니다. 이를 위해 Claude Code와 Google Stitch가 중심 역할을 했습니다.

Google Stitch를 활용한 웹앱 프론트 디자인 고도화 실무 팁

Craig Hwitt는 Stitch.withgoogle.com이 '완전 무료 프론트엔드 디자인 툴'임을 강조했습니다. "한 번에 최대 6개 화면"을 디자인할 수 있어, 다수의 계정/분석/세팅 등 복잡한 SaaS 서비스라면 기능별로 쪼개 반복 작업하는 방식을 추천했습니다.

우선 Claude Code에게, "Catalyst 프로젝트의 UI를 더욱 아름답고 신뢰감 있게 만들 수 있는 구글 스티치용 프롬프트를 만들어 달라"고 요청했습니다. Claude Code는 CSS, 전체 코드베이스, 그리고 Hwitt의 브랜드 컬러(오렌지, 다크모드) 등 현재 상황까지 꼼꼼히 분석해, "Catalyst의 목표/컬러/화면(flow) 등 모든 맥락을 반영한 스티치용 프롬프트"를 생성했습니다. 실제 이 프롬프트를 Stitch에 입력한 결과, 온보딩, 목표 설정, 진행 상황 표시 등 전체 프로세스에 적합한 디자인 샘플들이 제공되었습니다.

Hwitt는 "Stitch의 아이콘이 기존 디자인보다 세련되고 현대적"이라며, 직접 스크린샷을 찍어 Claude Code에 "이 아이콘 스타일로 교체해달라"고 요청했습니다. 특히, 구글 스티치 디자인에서 사용된 갈색 컬러가 예상과 달랐으나, 브랜드 아이덴티티(블랙, 오렌지)를 고려해 일부 요소만 반영하고, 아이콘 및 진행 상태 표시 프로그래스 바 등 핵심 UI 요소들로 적극적으로 개선 작업을 진행했습니다.

Claude Code + Playwright MCP의 실제 적용과 실무 팁

프로젝트 내 코드를 운용하는 환경인 'Cursor'(AI와 연동되는 IDE)에서 Claude Code가 자동화된 코드 작성·수정 과정을 진행했습니다. Hwitt는 "최근 Claude Code를 YOLO 모드로 설정해, 승인 없이도 바로 반영할 만큼 신뢰도가 높아졌다"고 강조했습니다.

특히 Playwright MCP와의 연동은, LLM이 실제로 프론트엔드 화면을 '볼 수 있도록' 만든다는 점을 짚었습니다. 일반적으로 LLM은 프론트엔드 상태 파악이 어려우므로, Playwright 서버를 통해 웹 화면에 대한 시각적 정보까지 접근할 수 있게 하는 것이 장점입니다. 이를 바탕으로 Claude Code는 CSS 수정, HTML/JavaScript 파일 개선, 프로그래스 인디케이터와 같은 UI 기능까지 자동으로 설계 및 코드 반영을 담당했습니다.

실제 활용 예시로, "원하는 아이콘 디자인을 스크린샷으로 캡처해서 Claude Code에 전달하면, 해당 이미지를 학습 및 참조해 코드 및 스타일을 바꿔주는 자동화가 가능했다"는 실증 사례가 나옵니다.

배포 과정·문제 해결 경험 및 SaaS 운영 실무 조언

코드 변경 후 GitHub에 커밋하고, 실제 배포 환경(Render)을 통해 즉시 라이브 테스트를 진행했습니다. 배포 직후에는 "로컬 서버와 실제 라이브 서버의 코드 불일치" 이슈로 아이콘이 반영되지 않는 문제, 환경 설정 오류, 그리고 일시적 서비스 정지상황 등이 발생했습니다.

Hwitt는 "직접 코드와 환경 문제를 해결하며, 최종적으로 라이브 서버에서 원하는 아이콘 및 UI가 정상 작동함을 확인했다"고 말했습니다. 아직 미해결된 사소한 기능 오류가 존재하지만, 본질적인 목표인 UI 디자인 개선과 자동화 프로세스 구축에는 성공했음을 강조했습니다.

Catalyst는 매주 창업자/CEO에게 이메일로 체크인을 보내며, 목표 달성률을 AI가 분석해주는 계획 중이며, 향후에는 피드백 제공을 위한 유료 구독 서비스도 도입한다는 실제 운영 전략까지 공유했습니다. "직접 개발자가 아니어도, Claude Code에 아이디어만 입력하면 자동으로 SaaS 서비스를 만들어주고, 본인은 기초적인 개발 개념만 이해한 상태로 충분히 운영 가능했다"는 실무 노하우도 상세하게 제시되었습니다.

Hwitt의 관점에 의하면, "2025년에 소프트웨어 자동화와 지식 민주화가 더욱 가속화될 것이며, 코드/AI/자동화 역량을 갖추는 것이 비즈니스 생존의 핵심 요소"임을 강조합니다.

SaaS, 사이드프로젝트에 바로 활용 가능한 실질적 팁 및 주의점

Google Stitch는 2025년 현재 완전 무료이나, 향후 유료화 예정이므로 빠른 도입이 유리할 수 있습니다.
프롬프트 설계 시 서비스의 목표, 색상, 주요 화면 구조, 사용자 흐름, 기능 요구사항을 모두 명확히 기술해야 Stitch의 디자인 결과가 만족스럽게 나옵니다.
라이브 서버와 로컬 서버 코드 불일치 등 환경 문제는 배포 직후 반드시 점검해야 하며, 자동화된 툴을 신뢰하더라도 기초적인 Git 커밋·배포 프로세스를 이해하고 운영하는 것이 현장에서는 중요합니다.
직접 코딩 능력이 없더라도, Claude Code 등 현대 LLM 툴을 통해 텍스트로 요구사항을 전달하며 SaaS 프로젝트를 실전 수준으로 구축할 수 있음이 입증되었습니다.
Playwright MCP 연결을 통한 프론트엔드 '실제 화면' 인식은 복잡한 디자인 개선, UI 테스트, 그리고 시각적 품질관리에서 필수적 도구로 부상했습니다.

Craig Hwitt의 철학과 마무리 메시지

Hwitt는 "앞으로 AI 및 자동화 기술은 더 발전만 할 것이므로, 지금 수준이 가장 불편한 상태"라며, "소프트웨어와 지식, 개발 경험의 장벽이 계속 허물어지고 있다"고 강조했습니다. 동시에 "AI·코드·API에 대한 기본적인 이해와 경험이 없으면 향후 직업 시장에서 치명적 불이익을 겪을 위험이 커지고 있다"고 덧붙였습니다.

끝으로, Catalyst 서비스 운영을 직접 소개하며,

catalyst.craq.com에서 무료 회원가입 가능
"앞으로 AI 피드백 및 유료 컨설팅 기능을 추가할 예정" 이라는 안내와 함께, 실전 SaaS 개발 및 운영 경험을 공개하며, "직접 경험해 보고 도전해 볼 것"을 실질적으로 제안했습니다.

Hwitt의 실제 경험담과 실전 노하우, 그리고 SaaS 프로덕트 개발에서의 최신 자동화·디자인 혁신 방법론이 2025년 현재 창업자, 개발자, 기획자 모두에게 실질적인 도움을 제공할 중요한 참고자료임을 확인할 수 있습니다.

출처 및 참고 :