남의 디자인을
훔치는 기술

디자이너에게 "어디서 영감을 얻나요?"라고 물으면, 열에 아홉은 Dribbble, Behance, Pinterest를 말한다. 디자이너도 빈 캔버스에서 시작하지 않는다. 참조를 수집하고, 패턴을 분석하고, 자기 프로젝트에 맞게 변형한다. 이것을 "무드보드(moodboard)"라고 부른다.

바이브 코딩에서도 원리는 동일하다. 차이가 있다면, 참조의 목적이 "이렇게 만들어"가 아니라 "이 톤과 구조로"라는 점이다. 스크린샷을 통째로 복제하는 게 아니라, 색상 팔레트, 타이포그래피 위계, 레이아웃 패턴, 여백 비율을 추출하여 AI에게 맥락으로 전달하는 것이다.

참조를 수집할 때 가장 중요한 원칙이 있다. 3개 이상, 5개 이하의 참조를 선정하고, 각 참조에서 무엇을 가져올지 텍스트로 명시하는 것이다. "토스에서 여백 비율을, Stripe에서 타이포그래피를, Linear에서 색상 팔레트를." 이 텍스트가 AI에게 전달되는 디자인 브리프가 된다.

참조를 수집했다. 이제 AI에게 전달해야 한다. 가장 직관적인 방법은 스크린샷을 보여주고 "이렇게 만들어"라고 하는 것이다. 이 워크플로우를 자동화한 오픈소스 프로젝트가 있다.

screenshot-to-code는 GitHub Stars 71,400개를 넘긴 프로젝트로, 스크린샷을 HTML, Tailwind, React, Vue 코드로 변환한다. 하지만 정확도에는 한계가 있다.

70%의 정확도는 "레이아웃의 대략적인 구조는 잡지만, 세부 간격, 색상 정확도, 인터랙션은 못 잡는다"는 뜻이다. 그래서 올바른 용법은 전체 복제가 아니라 "구조 참조 + 토큰 적용"이다. 스크린샷에서 레이아웃 패턴(2컬럼, 카드 그리드, 사이드바 등)을 추출하고, 색상과 폰트는 2편에서 다룬 디자인 토큰으로 교체하는 것이다.

스크린샷보다 정확한 방법이 있다. Figma MCP Server다. 2025년에 출시된 이 도구는 Figma 파일의 구조화된 콘텐츠를 AI 에이전트에 직접 전달한다. 렌더링된 픽셀 대신 실제 노드 트리, 변형(variant) 정보, 레이아웃 제약, 디자인 토큰을 전달하므로, 스크린샷 기반 변환과는 차원이 다른 정확도를 보인다.

"디자이너가 없는데 Figma를 어떻게 쓰느냐"는 질문이 나올 수 있다. 답은 Figma Community다. SaaS Dashboard, Landing Page, E-commerce 등 무료 템플릿이 수천 개 있다. 이 템플릿을 Figma에서 열고, MCP Server로 AI 코딩 에이전트에 연결하면, 디자이너 없이도 구조적 디자인 정보를 AI에게 전달할 수 있다.

설정은 간단하다.

Figma가 제안하는 새로운 패러다임은 더 나아간다. MCP 서버가 프로젝트의 코드베이스를 스캔하여 토큰 정의, 컴포넌트 라이브러리, 스타일 계층, 네이밍 규칙을 포함한 구조화된 규칙 파일을 자동 생성한다. 2편에서 다룬 AI 규칙 파일을 수동으로 작성할 필요 없이, 기존 디자인 시스템에서 자동으로 추출하는 것이다.

지금까지의 도구를 조합하면 완성된 워크플로우가 나온다. PageAI Starter Kit이 제안하는 방법론이 현재 가장 효과적으로 평가받는다.

핵심 인사이트는 이것이다.

한국 디자이너들의 체험도 이를 뒷받침한다. TOKTOKHAN.DEV의 디자이너는 "디자이너의 눈에는 디테일이 부족하다"고 했지만, 동시에 "AI의 발전은 무기력보다는 가능성에 가깝다"고 결론지었다. pxd의 디자이너는 "한 번의 명령으로 완벽한 결과를 기대하지 말고, 반복 대화를 통한 점진적 정교화"를 강조했다.

단일 도구가 아니라 도구 체인이 답이다. 참조 수집(Mobbin/Dribbble) → 구조 추출(Figma MCP) → 코드 생성(Claude/Cursor) → 토큰 적용(CSS 변수/@theme) → 자동 검증(Playwright). 이 체인의 각 단계가 AI의 "기본값 편향"을 한 겹씩 벗겨낸다.

다음 편에서는 이 체인의 핵심 요소 중 하나인 컴포넌트 라이브러리를 다룬다. shadcn/ui가 왜 바이브 코딩의 사실상 표준이 되었는지, 그리고 "그냥 갖다 쓰기"를 넘어 브랜드를 입히는 방법은 무엇인지.