피그마를 빼려는 팀이라면, 디자이너가 커밋하는 순간부터 계산해야 한다

도구가 바뀌어도 하는 일은 같다는 비교 이미지

피그마를 워크플로우에서 빼보자는 이야기가 나왔을 때 팀이 먼저 물어야 할 건 "디자이너가 여전히 쓸모 있나"가 아닙니다. 그건 당연히 쓸모 있어요. 물어야 할 건 디자이너의 결과물이 무엇으로 바뀌고, 그걸 누가 검수하느냐입니다.

한 프로덕트 디자이너가 처음으로 피그마 없이 일해본 기록을 남겼습니다. 예전엔 피그마로 그려 개발자에게 넘겼다면, 이번엔 AI가 만든 프로토타입을 깃헙에서 내려받아 코덱스로 화면을 손보고, 깃헙에 커밋한 뒤 개발자가 검수했다고 해요. 글의 결론은 "도구는 바뀌었지만 하는 일은 같다"입니다. 저는 절반만 동의합니다.

무엇을 고쳤나보다, 어떻게 찾았나

디자이너가 손댄 지점은 다섯 갈래였습니다. 상품 분류를 매번 타이핑하게 만든 텍스트 입력을 프리셋 칩으로 바꾸고, VERY의 결제비율 화면에서 묻혀 있던 화폐 환산 정보를 최상단 카드로 올리면서 슬라이더를 10단계가 잘 보이게 다듬었습니다. 버튼·칩·뱃지 가리지 않고 칠해진 Primary 색상은 최종 액션을 유도하는 결제 패널에만 남겼고요. 온보딩 마지막 화면의 CTA도 '시작하기'에서 '상품 등록하기'로 바로잡았습니다.

결제비율 화면 개선 전후

여기까지는 피그마에서도 했을 일이고, 일부는 AI도 할 수 있는 일입니다. 디자이너 스스로 온보딩 대목에서 이렇게 적었어요. "'스토리텔링을 더해서 완료 화면의 임팩트를 더 강하게 만들어줘'라고 말해도 AI가 알아서 수정해 주긴 한다 OTL". 저는 이 고백이 글에서 가장 정직한 문장이라고 봐요. 무엇이 문제인지 말로 짚을 수 있는 순간, 그 수정은 AI의 일이 됩니다. 디자이너에게 남는 건 수정 자체가 아니라 문제를 먼저 알아채는 일이죠.

다섯 번째 수정이 바로 그 알아채는 일이었습니다. 온보딩에서 [상품 등록]으로 넘어간 뒤 뒤로가기를 누르면 온보딩 첫 화면으로 돌아가면서 입력한 상점 정보가 사라지는 문제였는데, 디자이너는 이걸 [상품 목록]으로 돌아가고 데이터가 보존되도록 경로를 고쳤습니다.

뒤로가기 경로 수정 전후

이 버그는 정적 프레임에서는 보이지 않습니다. 프레임 위의 화살표는 언제나 설계한 대로만 이어지거든요. 실제로 돌아가는 프로토타입에서 직접 눌러봤기 때문에 데이터가 날아가는 걸 봤고, 저는 피그마를 뺀 진짜 이득이 여기 있다고 봐요. 하는 일이 같아진 게 아니라, 보는 대상이 프레임에서 상태로 바뀐 겁니다.

커밋이 결과물이 되면 생기는 일

대가도 분명합니다. 결과물이 프레임일 때는 디자이너가 그리고 개발자가 구현했습니다. 결과물이 커밋이 되면 디자이너가 코드를 바꾸고 개발자가 그걸 리뷰합니다. 리뷰의 방향이 뒤집히는 거죠. 디자이너가 바꾼 컴포넌트가 다른 화면을 깨뜨리면 그 책임은 누구에게 있는지, 리뷰에 걸리는 시간은 누구 일정에서 빠지는지가 정해져 있지 않으면 이 방식은 개발자의 리뷰 큐만 늘립니다. 디자인 시스템 규칙을 코드 리뷰 단계에서 누가 대신 지켜주는지도 함께 정해야 하고요.

원글에도 그 마찰이 보입니다. "토큰을 갈아 넣느니 피그마에서 1분이면 고친다"는 반응이 주변에서 나오고, 디자이너 본인도 그렇게 느끼는 순간이 적지 않다고 했어요. 색 하나, 여백 하나를 고치는 일이라면 이 말이 맞습니다. 반면 뒤로가기 경로나 데이터 보존처럼 흐름을 고치는 일은 피그마에서 1분 만에 끝나는 일이 아니라 아예 발견되지 않는 일이고요.

어디서부터 시작할까

이 방식이 맞는 팀의 조건은 세 가지로 봅니다. AI가 만든 프로토타입이 이미 코드로 존재하고, 디자이너가 손댄 변경을 바로 띄워볼 프리뷰 환경이 있고, 개발자 쪽에 디자이너 커밋을 검수할 시간이 배정돼 있을 것. 셋 중 하나라도 없으면 피그마를 빼는 건 효율이 아니라 일의 이동입니다. 반대로 아직 무엇을 만들지 넓게 펼쳐보는 탐색 단계라면 캔버스가 여전히 싸고 빠릅니다.

당장 피그마를 뺄 계획이 없는 팀도 가져갈 게 하나 있습니다. 디자인 리뷰를 프레임이 아니라 실제로 돌아가는 빌드에서 한 번 더 하는 것. 그리고 체크리스트에 '뒤로가기를 눌러도 입력이 남는가' 같은 상태 질문을 넣는 것. 이번 사례에서 디자이너가 AI보다 잘한 건 화면을 예쁘게 다듬는 일보다, 사용자가 실제로 겪을 경로를 끝까지 눌러보는 일이었습니다.