PoC 프로토타이핑 워크플로우 개발기

처음에는 실제 prod의 특정 화면의 피그마 프레임의 MCP를 바탕으로 화면을 생성하게끔 지침을 만들었어요.

하지만 그렇게 만들어진 결과물이, 실제 서비스 화면의 패턴이나 컴포넌트와 미묘하게 다른 부분들이 계속 보였어요. 색상이나 타이포그래피가 조금씩 어긋나 있거나, 아이콘이 깨져 있는 식이었죠. PoC 단계에서 고객 반응을 검증하려면 이런 디테일이 실제 서비스와 최대한 가까워야 한다고 생각해서, 파이프라인을 두 가지 방향으로 교정했어요.

기존에는 실제 화면을 참고만 하고 새로 구성하는 방식이었는데, 이러면 기존 화면부터 만드는 시간이 너무 오래 걸렸어요. 그러다 보니 이런 생각이 들었죠. 네이티브 앱은 어려워도, 실제 웹으로 배포된 프로덕션 페이지는 실제 동작을 그대로 포크해올 수 있지 않을까?

그래서 방향을 바꿔서, 실제 레포에 구현된 React·SDUI(Server-Driven UI) 구성을 그대로 참조해 prod와 거의 동일하게 동작하는 화면을 가져오되, 화면 안에 남아 있는 레거시 토큰은 정리해서 오늘의집 디자인 시스템(ODS)의 실제 토큰 값으로 자동 치환하도록 만들었어요.

컴포넌트도 ODS 카탈로그와 대조해서, 이름만 비슷한 컴포넌트가 잘못 매핑되는 걸 막고 실제 토큰값이 적용된 컴포넌트로 재조립되게 했고요.

아무리 토큰과 컴포넌트를 잘 매핑해도, 조합된 결과물이 실제 화면과 똑같다고 장담할 수는 없었어요. 그래서 프로토타입을 만들고 끝내는 게 아니라, prod 화면을 캡처해서 대조하고 깨진 부분을 다시 잡아주는 QA 루프를 파이프라인에 추가했어요.

화면을 캡처해서 diff를 뜨고, 깨진 부분을 재수정한 뒤, 수정 이력을 qa-history로 기록해서 반복적으로 발생하는 이슈는 원인을 분석해 공통 QA 규칙으로 승격시키는 구조예요.

이렇게 하니까 프로토타입을 새로 만들 때마다 같은 실수를 반복하지 않고, 만들수록 정합도가 쌓이는 구조가 됐어요.