itsus

← Portfolio

kisigner — 화면 20종, 그리고 숫자로 통과시키는 역내보내기

지난 버전 이후 한 달 동안 목업을 9종에서 20종으로 늘리고, 워크플로를 스킬 4종으로 나누고, 피그마 역내보내기에 픽셀 검증 게이트를 붙였다. 역내보내기는 여전히 한 건에 35~40분 걸리는 병목이다.

날짜
역할
기획 · 개발
기술
Figma MCP · HTML/CSS · Claude Code 스킬 · Python (NumPy · Pillow · SciPy) · Chrome Headless
kisigner — 화면 20종, 그리고 숫자로 통과시키는 역내보내기

왜 만들었나

지난 버전을 쓴 뒤 한 달 동안 목업은 9종에서 20종으로 늘었다. 화면이 두 배가 되자 두 군데가 버거워졌다. 매 세션 통째로 읽히는 CLAUDE.md는 절차가 쌓여 8일 만에 7.2KB에서 8.9KB로 불었고, 피그마로 되돌린 프레임이 HTML과 같은지는 에이전트마다 제 방식으로 확인할 뿐 통과 기준이 없었다.

규칙을 문장으로 적어 두는 대신 장치로 만든다. 이번 버전의 가설이다. 절차는 필요할 때만 불러오는 스킬로, 완료 여부는 눈이 아니라 숫자로.

무엇을 만들었나

지난 버전과 같이 VACS.AI · Surgstory 제품 화면을 소재로 삼은 개인 프로젝트다. 8월 10일부터 9월 8일까지 커밋은 109개다.

새 화면은 11종이다. 인사이트 하위 뷰 3종(Gesture · Case Detail · 축을 뒤집은 Timeline > Gesture), 구간 교정(Revise)의 상태 화면 6종(재분석 확인 · 즉시 결과 · 진행 중 · 완료 · 되돌리기 확인 · 파인튜닝 진행), 아카이브 인코딩 표시 A·B안 2종. 이 중 피그마 원본에서 가져온 것은 Gesture 하나고, 나머지 10종은 HTML에서 먼저 그려 그중 8종을 피그마로 올렸다. 순환의 출발점이 HTML 쪽으로 옮겨 왔다.

구간 교정 패널 — 전 (피그마 원본)

구간 교정 패널 — 후

구간 교정 패널의 전과 후. 입력칸이 줄줄이 붙은 표를, 고칠 구간 하나만 펼치는 편집 블록과 목록으로 다시 짰다.

Case Detail 화면

Case Detail 화면. 오른쪽 패널을 카드 5장으로 다시 짜며 글자를 덜어 냈다. 아래 프로토콜 v2의 첫 실전 대상이다.

Case Detail 화면의 수술 영상과 썸네일, 상단의 케이스 식별자, 환자·진단 항목은 블러 처리했다. 구간 교정 패널은 영상이 들어가지 않게 패널만 잘라 냈다. 목업 수치는 전부 더미지만, 환자·케이스를 가리키는 것처럼 보이는 값은 남기지 않았다.

어떻게 만들었나

절차는 스킬로. 8월 14일, CLAUDE.md의 절차를 스킬 4종(/new-screen · /verify-screen · /export-figma · /spec-sheet)으로 옮겼다. CLAUDE.md는 8,898바이트에서 4,740바이트로 줄었고, 스킬 본문은 쓸 때만 읽힌다. 지난 버전의 에이전트 셋은 스킬이 알아서 부르고, 넷째 /spec-sheet는 지난 버전에서 다루지 않은 화면설계서 (화면에 번호 콜아웃과 설명 표를 붙인 시트)의 규격을 담았다. 피그마 파일을 바꾸는 /export-figma만은 자동 호출을 막아 손으로만 부른다.

통과 수치가 없으면 완료가 아니다. 9월 3일 역내보내기 프로토콜 v2를 한 커밋으로 들였다. 화면은 다시 그리지 않고 최신 컴포넌트를 복제해 바뀐 부분만 고친다. 그리고 게이트를 붙였다 — 글자 윤곽을 뺀 영역에서 어긋난 픽셀 0.1% 미만, 색 판별점 3곳 이상 일치, 손대지 않은 프레임은 작업 전후 0픽셀. 앞의 두 숫자는 65줄짜리 verify.py가 낸다.

걸렸던 것

’원본 프레임은 절대 수정하지 않는다’는 문장은 두 번 깨졌다. 지난 버전에 그렇게 썼지만 8월 중순까지 내보낸 프레임은 제자리에서 고쳐 쓰고 있었고, 8월 20일 기존 프레임 3개를 덮어쓴 뒤에야 “항상 새 이름으로”를 규칙으로 못 박았다.

두 번째는 9월 1일이다. 에이전트가 새 시트를 만들다 보존해야 할 구판 시트를 바꿔 놓고 “원래 그랬다”고 보고했다. 작업 전 캡처와 대조하니 126만 픽셀이 달랐다. 다음 날 직접 복원해 잔차를 0.0723%까지 내렸고, 게이트의 “전후 0픽셀” 항목은 그 이틀 뒤에 들어갔다. 에이전트의 보고는 주장이고, 증거는 작업 전 캡처였다.

흑백 비교로는 녹색 하나가 안 잡힌다. #2e8b46과 #2e7d32는 명도 차가 작아 흑백 차이 이미지에 드러나지 않았다. 그래서 verify.py는 RGB 세 채널 중 가장 큰 차이로 판정한다.

첫 실전에서 게이트가 떨어졌다. 9월 8일 Case Detail 재이관은 1차에 0.1486%로 FAIL이었다. 고친 패널 안은 0픽셀이었다. 차이는 복제해 온 이전 프레임들이 처음부터 품고 있던 것으로, 크롬이 같은 1215px 글자를 피그마보다 49% 넓게 그리는 탓이었다. 52개 노드의 위치와 자간을 맞춰 2차에 0.0319%로 통과했다.

어디까지 왔나

가설의 앞쪽 절반은 됐다. 절차는 스킬로 빠졌고, 게이트는 도입 시험에서 옛 녹색이 남은 구판 프레임을 FAIL로 걸렀으며 첫 실전에서는 눈으로 못 본 자간 어긋남을 잡았다.

뒤쪽 절반은 아직이다. 프로토콜 v2로 처리한 역내보내기는 9월 8일의 두 건뿐이고, 시간도 줄지 않았다. 화면 한 장은 감사까지 약 40분, 설계서 시트 한 장은 약 35분 걸렸다. 지난 버전의 ’10분 넘게’와는 재는 범위가 달라 바로 견줄 수 없지만, 역내보내기가 여전히 순환의 병목이라는 건 분명하다.

남은 것

두 건 모두 메인 대화가 처음부터 다시 검증했다. 같은 패턴이 쌓이면 표본만 다시 보는 규칙이라, 그때 한 건당 시간이 얼마나 줄어드는지가 다음 확인거리다. 옛 녹색이 남은 구판 화면 2종의 재이관, 피그마와 HTML의 설명 행 수가 어긋난 설계서 시트 1장의 정리도 남았다. 스킬은 아직 이 저장소 안에서만 돈다.