피그마부터 켜는 디자이너는,
이제 느릴 수밖에 없다
피그마에서 시작하던 방식을 버리고, 작업 순서를 바꿨다
노션에서 정리하고, 페이퍼에서 만들고, 피그마에서 완성한다
예전에는 피그마를 켜는 순간 일이 시작됐다. 기능정의서를 보면서 화면을 만들고, 만들면서 방향을 고민하고, 틀리면 다시 만들었다. 이 과정이 반복되면서 시간은 계속 늘어났다.
지금은 순서를 바꿨다. 피그마에서 시작하지 않는다. 먼저 정리하고, 그다음 만들고, 마지막에 완성한다. 이 차이 하나로 작업 방식이 완전히 달라졌다.
디자인 전에, 먼저 정리하는 단계가 생겼다
첫 단계는 노션에서 기획 문서를 만드는 것이다. 여기서 중요한 건 단순 기록이 아니라 “기능정의서 수준”으로 정리하는 것이다. 어떤 화면이 필요한지, 사용자가 어떤 행동을 하는지, 상태값은 어떻게 나뉘는지까지 명확하게 정리해둔다.
물론 이또한 클로드가 하게 한다. 나는 초기에 팀원들과 이 프로젝트에 대해 노션으로 ai 회의록 남긴 링크만 제공하고, 이외의 분석 및 작성은 클로드가 진행한다. 나는 완성된 기획 문서에 대해 또 다시 팀원들과 음성으로 회의하고, 또 클로드가 이를 듣고 기획 문서를 수정 및 개선하는 과정을 반복하면, 결국 우리 팀이 원하던 기획 문서가 완성되어있다.
이 문서는 단순한 기획서가 아니라, 이후 AI에게 일을 시킬 때 기준이 되는 문서가 된다. 결국 이 단계에서 얼마나 명확하게 정리하느냐에 따라 이후 결과물의 퀄리티가 달라진다.
디자인시스템을 ‘읽히는 형태’로 바꿨다
두 번째 단계는 피그마 디자인시스템을 md 파일로 정리하는 것이다. 기존에는 디자인시스템이 피그마 안에만 존재했다면, 지금은 AI도 이해할 수 있도록 텍스트 형태로 정리해두어야 한다.
이 작업을 하고 나면 AI가 화면을 만들 때 완전히 새로운 스타일이 아니라, 우리 서비스의 기준 안에서 결과를 만들어낸다. 기능정의서가 “무엇을 만들지”를 정의한다면, 디자인시스템 md는 “어떻게 만들지”를 정의한다.
한 번에 만들지 않고, 나눠서 만든다
세 번째 단계는 클로드에게 페이퍼에서 디자인을 뽑아달라고 시키는 것이다. 여기서 중요한 건 한 번에 많은 걸 시키지 않는 것이다.
예전에는 하나의 기능을 통째로 만들려고 했다면, 지금은 화면 단위 혹은 기능 단위로 나눠서 요청한다. 예를 들어 로그인/회원가입이라면 로그인/회원가입/비번찾기/아이디찾기/구글로 로그인 등을 전체를 한 번에 시키지 않고, 각 기능을 나눠서 진행한다.
이렇게 하면 결과의 밀도가 훨씬 높아지고, 클로드가 기능 정의서를 더 꼼꼼히 읽고 디자인을 시켜주며 이후 수정 범위도 훨씬 줄어든다.
실제로 페이퍼에서 반나절만에 만든 분량페이퍼는 ‘초안’, 피그마는 ‘완성’이 됐다
페이퍼에서 빠르게 UI를 만들고, 그 결과를 피그마로 가져온다. 이때 디자인시스템 md와 피그마의 디자인시스템이 잘 맞아 있다면, 토큰 연결이 자연스럽게 이어진다.
즉, 페이퍼에서 만든 결과가 완전히 새로운 작업물이 아니라, 피그마에서 바로 다듬을 수 있는 상태로 들어온다.
이 순간부터 피그마는 “만드는 툴”이 아니라 “완성하는 툴”에 가까워진다.
디테일은 한 번에 맞추지 않는다
마지막 단계는 컴포넌트를 하나씩 연결하는 것이다. 중요한 건 처음부터 완벽하게 맞추려고 하지 않는 것이다.
큰 구조(폰트/토큰/컬러 등)부터 맞추고, 그 다음 핵심 컴포넌트(버튼, 뱃지 등), 그 다음 세부 요소 순으로 정리해나가면 훨씬 빠르게 완성된다.
이 과정은 AI가 만든 초안을 우리 서비스 기준으로 맞추는 단계라고 보면 된다.
정리
이 방식을 한 줄로 정리하면 이렇다.
나는 디자인을 더 잘하게 된 게 아니라, 디자인을 시작하는 방식을 바꿨다.
예전에는 피그마를 켜면서 고민했고, 지금은 고민을 끝내고 피그마를 켠다.
그 차이 하나로 작업 속도보다, 결과의 정확도가 달라졌다.
지금도 피그마부터 켜고 있다면, 속도가 느린 게 아니라 시작 방식이 잘못된 걸 수도 있다.