피그마, 대체 왜 실제 사이트랑 다른 거니?

디자인-개발 동기화: HTML to Design MCP로 사이트를 Figma로 옮기기

2026년 3월 5일

피그마와 실제 사이트의 괴리

초기에는 Figma에서 디자인하고 컨펌을 받아 코드로 구현했다. 그런데 작은 수정사항은 점점 바로 코드에 반영하기 시작했고, 빠른 런칭을 위해 디자인 확정 없이 먼저 구현하는 경우가 잦아졌다.

몇 달이 지나자 아래 문제가 생겼다:

  • UI 컴포넌트 스타일이 제각각이다
  • 기능 플로우가 다르다
  • 완성된 기능이 Figma에 반영되지 않았다
  • 신규 기획 때마다 Figma 대신 서비스에 직접 들어가 플로우를 확인해야 했다

작은 팀이라 이런 불일치를 감수했지만, 같은 패턴이 반복되면 안 된다고 판단했다. 이미 만들어진 서비스를 Figma로 빠르게 옮길 방법을 찾다가 Figma MCP를 써보기로 했다.

사용 방법

1단계: Figma MCP 연결

Claude Code에서 Figma MCP 서버를 연결한다. 별도 API 키 없이 Figma OAuth 인증만으로 연결된다. 자세한 설정은 Figma 공식 가이드를 참고한다.

2단계: 캡처 스크립트 삽입

캡처할 HTML 페이지의 <head> 또는 <body> 하단에 아래 스크립트를 추가한다.

이 스크립트는 페이지에 캡처 툴바를 활성화한다.

3단계: Claude Code에서 캡처 시작

Claude Code에 캡처할 로컬 페이지 URL과 Figma 파일 URL을 함께 전달한다.

HTML to Design 연결을 요청하면 Claude가 아래 과정을 자동으로 진행한다.

  1. 캡처 ID 생성
  2. 해시 파라미터가 포함된 URL 생성
  3. 브라우저에서 해당 URL 열기
  4. 자동 캡처 시작
  5. Figma 파일에 디자인 전송
Claude Code 캡처 진행 화면
HTML to Design 캡처 Toolbar
Figma 파일에 디자인 전송
피그마에서 작업중인 Figma(?)

실제 사용기: 장점과 단점

장점

처음부터 그리는 것보다 훨씬 빠르다

이미 개발된 화면을 캡처한 뒤 필요한 부분만 조정하면 된다. 캡처 결과물이 Figma에서 수정 가능한 형태로 전달되기 때문에, 기존 화면에 기능을 추가할 때도 유용하다.

디자이너 없이 최소한의 디자인 기록을 유지할 수 있다

정상 워크플로우(Figma → 컨펌 → 개발)로 복귀하기 위한 발판으로 충분하다.

단점

디자인 시스템이 적용되지 않는다

캡처 결과물에는 Figma 컴포넌트, 색상 팔레트, 타이포그래피 스타일이 적용되지 않는다. 글씨 색상은 #000000, 배경은 #FFFFFF 같은 하드코딩된 값으로 들어온다. Figma로 옮긴 뒤에도 디자인 시스템을 맞춰주는 작업이 따로 필요하다. 색상이나 폰트를 일괄 변경하는 Figma 플러그인이 있긴 하지만, 어느 정도 수작업은 피하기 어렵다.

모든 요소가 프레임으로 감싸진 채로 전달된다. 텍스트도 마찬가지라 수정할 때 프레임을 직접 분리해야 한다.

캡처 결과물의 프레임 구조
모든 요소가 프레임으로 감싸진 채로 전달된다

상태 기반 UI는 수동으로 처리해야 한다

드로어가 열린 상태, 특정 탭이 활성화된 상태, 에러 메시지가 표시된 상태 같은 UI는 자동 캡처로 처리하기 어렵다. 각 상태에 직접 진입해 수동으로 캡처해야 한다. 캡처 자체에 시간이 걸리기 때문에 기다려야 한다는 점도 불편하다.

물론, 해당 부분을 자동화 할 방법이 있겠지만 일단 나의 경우는 모든 화면을 다 옮기려기보다 점진적으로 반영해나갈 예정이라 필요한 부분만 캡쳐를 했다.

실제 적용 후의 변화

모든 화면을 한꺼번에 옮기지 않고, 기능을 추가해야 하는 부분부터 먼저 진행했다. 덕분에 새 기능부터는 Figma 먼저 → 컨펌 → 개발 순서를 지킬 수 있게 됐다. 구조를 더 꼼꼼히 고민한 뒤 개발에 들어갈 수 있다는 점도 달라진 부분이다.

또한, 피그마에는 '주문 - 결제 - 전자계약' 의 복잡한 플로우를 다 만들어두지 못하고 개발하여 상황마다 무슨 화면이 뜨는지 팀원분들이 알 수 없었는데, 캡쳐를 통해 빠르게 화면 정리를 할 수 있었다.

완벽하게 옮겨지는 느낌은 아니지만, 단순 캡처 이미지가 아닌 수정 가능한 Figma 파일이라 여러 UI를 테스트하거나 팀원과 의견을 나누기에도 적합했다.

디자이너 없는 팀을 위한 실용적 선택지

  • 처음부터 Figma를 그리는 것보다 2~3배 빠르다
  • 실제 구현과 디자인의 불일치를 줄일 수 있다

"사이트는 먼저 만들고 Figma는 나중에"인 상황을 겪고 있는 소규모 팀이라면, 이 도구가 의외로 실용적인 선택지가 될 수 있을 것 같다.