kisigner — 피그마와 코드를 오가는 목업 워크플로

왜 만들었나

같은 화면을 피그마에서 한 번, HTML로 옮기며 또 한 번, 리뷰에서 수정이 나올 때마다 다시 한 번 — 두세 번씩 다시 만들고 있었다. 디자인 도구와 코드 사이를 오가는 비용이 그대로 반복 작업이 됐다.

한 방향이 아니라 양방향으로 도는 순환을 만들면 이 비용이 줄어든다고 봤다. 어느 쪽에서 고치든 결과가 반대편으로 돌아가므로, 원본은 하나로 유지된다.

무엇을 만들었나

kisigner는 피그마 화면을 Figma MCP로 읽어 HTML/CSS 목업으로 재현하고, 목업 상태에서 대화로 고친 뒤, 확정된 화면을 피그마 새 프레임으로 되돌리는 워크플로다. 수정은 “필터 바 간격을 좁혀 달라”는 식의 자연어 지시로 반복했다 — 피그마를 다시 열지 않고 HTML 위에서 화면이 확정된다.

이 순환을 수술 영상 아카이브 서비스(VACS.AI · Surgstory)의 제품 화면 9종에 적용했다. 아카이브 목록과 인사이트 영역이 중심으로, 목록에 딸린 팝오버·모달부터 지식 그래프 뷰까지 다뤘다. 제품 화면을 소재로 삼은 개인 프로젝트고, 지금도 진행 중이다.

목록 화면. 좌측 트리 내비게이션, 필터 바, 행별 액션까지 피그마 원본을 그대로 옮겼다.

분석 결과를 보여주는 인사이트 화면. 수술 단계별 요약, 기구 사용 타임라인, 출혈 이벤트를 한 화면에 놓았다.

케이스·수술 단계·기구·논문 사이의 관계를 그래프로 보여주는 화면.

인사이트·지식 그래프 화면의 수술 영상과 케이스 식별자는 블러 처리했고, 목록 화면의 데이터는 전부 더미다. 화면 구성을 보여주는 것이 목적이므로 환자·케이스를 특정할 수 있는 정보는 남기지 않았다.

어떻게 만들었나

절대좌표 배치. 화면은 1920×953 고정 캔버스에 피그마 px 값을 그대로 써서 배치했다. 반응형으로 재해석하면 “원본과 같은가”를 판단할 수 없다. 목업의 목적은 검증이지 배포가 아니므로 픽셀 단위로 대조 가능한 상태를 우선했다.

색은 토큰으로만. 모든 색상을 shared/tokens.css의 CSS 변수로 등록하고 하드코딩을 금지했다. 화면이 9종으로 늘어나도 색 하나를 바꾸면 전체가 따라온다.

역할 분담. 가져오기·검증·역내보내기는 전담 에이전트 셋으로 나눠 대용량 디자인 데이터를 대화 밖으로 격리하고, 화면 수정만 대화에서 직접 했다. 역내보내기는 원본 프레임을 절대 수정하지 않고 항상 새 프레임을 만든다 — 커밋 히스토리가 곧 시안 히스토리가 된다.

검증 자동화. Chrome 헤드리스로 HTML 화면을 캡처해 피그마 원본 스크린샷과 나란히 비교했다. 눈으로 훑는 대신 같은 해상도로 찍어 겹쳐 보니 어긋난 곳이 바로 드러났다.

걸렸던 것

피그마 에셋 URL이 7일 만에 만료된다. 처음에는 아이콘을 원격 URL로 참조했는데, 일주일 뒤 화면 절반의 아이콘이 깨졌다. 이후로는 에셋을 받는 즉시 로컬에 저장하는 것을 규칙으로 못 박았다. 한 번 유실되면 재다운로드가 불가능해서, 이 규칙이 프로젝트에서 가장 중요한 제약이 됐다.

SVG가 크기를 지정하지 않으면 사라진다. 피그마가 내보내는 SVG는 preserveAspectRatio="none"에 width="100%"라서, img 태그에 width/height를 주지 않으면 보이지 않거나 왜곡된다. 큰 원인은 잡았지만, 비슷한 잔문제는 지금도 하나씩 해결하는 중이다.

어디까지 왔나

도입의 가설은 절반만 검증됐다. 피그마 → HTML 재현과 대화 수정까지는 확실히 빨라졌지만, 확정된 화면을 피그마로 되돌리는 데는 아직 10분 넘게 걸린다. 대신 순환의 병목이 어디인지는 분명해졌다.

검증 쪽은 방향이 보인다. 캡처 대조가 초반에는 거의 모든 구간에서 어긋남을 잡아냈는데, 회차를 거듭하면서 어긋나는 구간이 눈에 띄게 줄고 있다.

남은 것

병목인 역내보내기(HTML → 피그마 프레임)는 아직 반자동이다. 화면 구조를 피그마 노드로 변환하는 부분을 다듬어 이 10분을 줄이면 순환이 완전히 닫힌다.