Stitch 디자인 토큰을 테마 변수로 즉시 매핑하여 개발 시간을 줄이는 방법
makedream2026年5月14日
0
컴퓨터/소프트웨어
Comments (0)
Log in to leave a comment
No posts yet
makedreammakedreamLog in to leave a comment
No posts yet
혼자 서비스를 만드는 개발자에게 디자인은 늘 골칫거리입니다. AI로 화면을 뽑아내도 막상 코드로 옮기려면 색상 값 하나하나 복사하다가 진이 빠지기 일쑤죠. 구글 Labs의 Stitch와 앤스로픽의 Claude를 섞어 쓰면 이 지루한 과정을 자동화할 수 있습니다. 예쁘기만 한 그림이 아니라 실제 돌아가는 제품을 만드는 기술적인 절차를 정리했습니다.
Stitch는 Gemini 2.5 Pro를 써서 자연어를 DESIGN.md라는 파일로 바꿉니다. 여기에 브랜드 색상이나 폰트 크기 같은 약속을 담습니다. 사람이 일일이 스타일을 입히는 건 시간 낭비입니다. 디자인 시스템의 변경 사항을 코드에 바로 꽂아 넣어야 합니다.
npx @_davideast/stitch-mcp init을 실행해 프로젝트를 연결합니다.DESIGN.md를 읽고 tailwind.config.js를 업데이트하라고 시킵니다.이 과정을 거치면 수동 스타일링 시간이 80% 이상 줄어듭니다. 개발자는 헥사 코드 숫자를 맞추는 대신 비즈니스 로직을 짜는 데 시간을 더 쓸 수 있습니다. 디자인이 바뀌어도 명령어 한 줄이면 전체 코드 베이스에 반영되니 일관성 유지도 쉽습니다.
정적인 화면에 생동감을 넣는 단계에서는 Claude Design의 인터랙티브 코멘트가 유용합니다. Claude는 내부적으로 작동하는 코드를 직접 렌더링하기 때문입니다. 특히 로딩 스피너나 폼 제출 후의 피드백처럼 놓치기 쉬운 예외 상황을 정의할 때 빛을 발합니다.
Stitch에서 만든 UI를 Claude Design에 업로드하고 특정 버튼을 클릭해 보세요. "호버링하면 1.05배 커지고, 클릭하면 로딩 상태로 변했다가 2초 뒤에 성공 메시지를 띄워줘"라고 코멘트를 남기면 됩니다. Claude는 Framer Motion 기반의 리액트 코드를 뱉어냅니다. 이 코드를 복사해서 프로젝트에 붙여넣기만 하면 됩니다. 시각적인 의도와 논리적인 구조가 한꺼번에 해결되는 셈입니다.
Stitch의 Nano Banana 모델로 만든 이미지는 품질은 좋지만 배경이 불투명한 래스터 파일입니다. 실제 서비스에 바로 올리기에는 용량도 크고 배경 제거도 필요합니다. 차분 매팅(Difference Matting) 기법을 활용하면 미세한 그림자까지 살린 투명 이미지를 얻을 수 있습니다.
자동화 스크립트를 짜서 처리하는 게 가장 깔끔합니다.
cwebp로 인코더해서 WebP 포맷으로 바꿉니다. 원본보다 용량이 30% 넘게 줄어듭니다./public/assets 폴더로 보내는 쉘 스크립트를 배포 파이프라인에 연결합니다.이렇게 하면 사이트 로딩 속도가 빨라지고 서버 비용도 아낄 수 있습니다. 일일이 포토샵을 켜서 배경을 따는 노가다에서 해방되는 겁니다.
AI가 짠 코드는 가끔 모든 로직이 한 파일에 뭉쳐 있는 스파게티 상태일 때가 많습니다. 당장은 돌아가도 나중에 고치려면 머리 아픈 일입니다. 그래서 시각 요소와 로직을 분리하는 리팩토링이 꼭 필요합니다.
우선 버튼이나 카드 같은 요소를 /components/ui 폴더로 따로 뺍니다. 그리고 모든 컴포넌트에 TypeScript의 interface Props를 작성하세요. 하드코딩된 텍스트는 children으로 받게 수정합니다. 마지막으로 AI에게 "모든 색상은 테마 변수만 쓰고 직접적인 색상 코드는 쓰지 마"라고 명령해서 코드를 정돈합니다.
이런 작업은 초기 출시 속도를 크게 늦추지 않으면서도 나중에 감당해야 할 기술 부채를 미리 막아주는 보험과 같습니다. 결국 1인 창업가의 실력은 AI 도구를 얼마나 잘 다루느냐가 아니라, 파편화된 도구들을 하나의 매끄러운 파이프라인으로 엮어내는 설계 능력에서 나옵니다.