4. 해결 과정
원칙은 세웠으니, 이제 실제로 어떻게 해결했는지 이야기해볼게요.
4-1. 방향마다 다른 접근
먼저 Figma에서 코드를 가져오는 방향(read)부터 워크플로우를 확정했어요. Figma 디자인이 가진 속성값, 그러니까 색·간격·폰트 같은 값을 JSON으로 추출해요. 그 값을 규칙에 따라 코드로 바꾸는데, 이 변환은 MCP가 맡아요. 그렇게 나온 결과를 React와 Tailwind로 옮긴 다음, 마지막엔 Playwright로 화면을 띄워서 원본 디자인과 눈으로 비교해요.
이 마지막 검증을 굳이 넣은 이유가 있어요. '거의 비슷한가'가 아니라 '완전히 똑같은가'를 따지다 보면, CSS로는 1:1로 못 맞추는 자리가 나오거든요. 예를 들어 Figma는 테두리를 선 안쪽·바깥쪽·가운데 중 어디에 그릴지 고를 수 있는데, CSS에는 그 구분이 없어요. 이런 차이는 코드만 봐선 모르고 화면을 띄워봐야 잡혀요. 그래서 Playwright 검증을 워크플로우에서 빼지 않기로 했어요.
4-2. 두 가지 쓰기 도구
Figma로 코드를 보내는 write 도구는 두 가지예요. use_figma는 Figma의 Plugin API를 코드로 직접 호출해서, '여기에 텍스트를 놓고 저기에 사각형을 그려라' 하는 식으로 요소를 하나하나 만들어요. 이렇게 명령을 차례로 내리는 방식이라 명령형이라고 불러요. generate_figma_design은 이미 렌더된 웹페이지를 통째로 Figma로 import해요. URL이나 HTML을 넘기면 다 그려진 결과를 그대로 옮겨주는 선언형 방식이에요. 지정한 폰트가 그대로 적용될지, 아니면 Inter로 바뀔지는 바로 어느 방식을 쓰느냐에서 결정이 돼요.
4-3. use_figma에 Playwright를 붙여도 왜 안 될까
직관적으로는 이렇게 생각하기 쉬워요. 'Playwright로 Pretendard가 적용된 화면을 띄워 폰트 정보를 확보한 뒤 use_figma로 넘기면 되지 않을까?' 그런데 이 방법이 통하기는 어려워요. 병목이 정보 부족이 아니라 검증이기 때문이에요.
use_figma는 결국 Plugin API로 텍스트 노드를 만들어요. 그 순간 loadFontAsync가 폰트를 서버 카탈로그에서 찾아요. 그런데 Pretendard는 그 카탈로그에 없어서 그대로 실패해요. Google Fonts에도 없고, Pro 서체라 Org 공유 폰트로도 안 올라가거든요.
Playwright는 브라우저 DOM을 렌더하고 들여다볼 뿐이에요. getComputedStyle로 'Pretendard가 적용됐다'를 확인할 수는 있어도, 그 사실이 Plugin API의 카탈로그 제약을 풀어주지는 않아요. 로컬에 Pretendard를 설치해도 remote MCP 환경엔 안 잡혀요. 로컬 폰트는 제 디바이스에만 남고 서버로 올라가지 않거든요.
"Server-side tools like Figma MCP server can only access fonts that are uploaded to Figma's servers. Local fonts remain on your device and aren't uploaded to our servers, which is why they're not available through the Figma MCP server." — Figma Staff (포럼 공식 답변)
use_figma 경로를 택하는 한, Playwright를 어떻게 끼워 넣어도 폰트 카탈로그 제약은 그대로예요. 그래서 해법은 '정보를 더 잘 넘기는 것'이 아니라 '검증을 거치지 않는 다른 경로를 쓰는 것'이에요.
4-4. generate_figma_design 캡처로 우회하기
그 다른 경로가 바로 generate_figma_design이에요. 핵심은 'Playwright로 폰트를 넘긴다'가 아니라, 이 도구의 import 파이프라인이 폰트 카탈로그를 확인하지 않는다는 점이에요. 이 경로는 Figma가 '.fig 파일을 폰트 없는 환경에서 열 때'의 missing-font 케이스처럼 처리해요. 그래서 CSS의 font-family: "Pretendard Variable"이 결과 노드의 fontName에 그대로 들어가요. 사용자 OS에 Pretendard가 깔려 있으면 데스크톱 Figma가 정상으로 렌더해요.
여기서 Playwright는 두 가지 일만 해요. 먼저 외부 URL을 캡처할 때 분기를 처리해요. 그다음 캡처 전에 폰트가 정말 적용됐는지 getComputedStyle로 미리 점검해요. 로컬 페이지는 capture.js와 hash URL로 처리하고요. 그러니 폰트가 보존되는 건 어디까지나 import 경로 덕분이에요.
