1화. 기존 프로덕트를 AI 관점에서 해석하기
전처리(Pre-processing)의 중요성
분야를 막론하고 다양한 기업에서 AI 프로토타이핑을 하라고 지시하는데, 대부분의 튜토리얼은 프롬프트 한두개만 입력하면 나오는 결과물을 보여줍니다. 예를 들어서 "To-do 리스트 서비스를 만들어줘"라는 프롬프트를 입력하면, To-do 리스트 서비스가 5분만에 만들어지는 식입니다.
그런데 업계에서는 보통 한두개의 프롬프트로 완성되는 결과물을 원하는 것이 아니고, 회사의 브랜딩과 아이덴티티를 살리면서 기존 프로덕트에 기능을 추가하는 식으로 AI 프로토타이핑을 사용하기를 원합니다.
5분만에 Lovable에서 프롬프트 하나로 만든 To Do List App. 5분만에 서비스를 만들 수 있게 된 지금, 각광받는 스킬은 AI 프로토타이핑으로 디자인한 기능을 실제 프로덕트에 적용할 수 있는 스킬입니다.
그리고 프롬프트 한두개로 만든 프로토타입의 단점은 다음과 같습니다.
1. AI 프로토타이핑 툴들이 보통 정형화된 디자인 시스템을 사용하기 때문에 회사에서 실제로 사용하는 디자인 시스템과 너무 상이해서 사용할 수 없습니다.
2. AI 아웃풋에 회사 아이덴티티가 안 녹아져있기 때문에, 실제 프로덕트에 적용할 수 없습니다.
AI 프로토타이핑 워크플로우이 문제를 해결하기 위해서 새벽까지 다양한 툴을 사용한 끝에 만든 AI 프로토타이핑 워크플로우입니다. 기존 프로덕트와 이미 존재하는 디자인을 AI한테 전처리한 다음에 제공해서 AI가 회사의 프로덕트와 디자인 시스템에 대한 이해를 바탕으로 아웃풋을 제공하면 디자이너가 이를 바탕으로 아웃풋을 개선하고, 엔지니어의 리뷰 후 프로덕트에 적용할 수 있도록 만든 워크플로우입니다.
이 플로우 중에서도 오늘은 점선 테두리 안의 와이어프레임 전처리 부분에 대해서 다룰 예정입니다.
AI는 동료와 달리 눈이 없습니다. 그래서 와이어프레임을 AI의 관점에서 이해하기 쉽도록 바꿔줘야 합니다.
(왼쪽) 전처리하지 않은 와이어프레임. (오른쪽) AI가 이해하기 쉽게 전처리한 와이어프레임.AI를 눈이 없는 동료라고 생각하면 더욱 정확한 프로토타이핑 아웃풋을 얻을 수 있습니다. 와이어프레임의 주요 요소에 대한 이름을 정하고, 같은 이름을 계속 사용하는 것이 중요합니다.
예를 들어서, 맨 위에 검색 바와 프로필이 있는 Global Navigation Bar를 Header라고 부를지 Global Nav Bar라고 부를지 정한 다음에 이 이름을 계속 사용하는 것이 중요합니다. 주요 요소에 대한 이름을 바꿔부르면 AI 입장에서 다른 요소로 인식하고 AI의 오류가 늘어납니다.
눈이 안 보여서 불편한 점이 있다면, 사물 간의 간격을 알기 어렵다는 점입니다. 그렇기 때문에 AI한테 주요 요소간의 간격이 얼마나 되는지에 대해 알려주는 것이 좋고, 아예 주요 요소 간의 간격을 Spacing이라고 이름 지은 다음에 Component로 만들어서 티셔츠 사이즈로 종류를 3-5개 정한 다음에 필요에 따라 사용하는 것이 좋습니다. 주요 요소 간의 간격은 몇개로 제한하는 것을 추천합니다. 티셔츠 사이즈라고 불리는 이유는 Component를 만들 때 우리가 사는 티셔츠의 사이즈처럼 Small, Medium, Large라는 컨셉을 사용하기 때문입니다. 어디는 27px 간격, 어디는 11px 간격인 것보다는, 4나 8의 배수로 몇개만 사용하는 것이 개발자와 AI와 소통할 때 편리합니다. 글로벌 기업에서는 프로덕트 팀원들간의 효율적인 협업을 위해 보통 4나 8의 배수로 된 수치를 디자인이나 개발할 때 주로 사용합니다. 4나 8의 배수라는 규칙이 있으면 쉽게 수치에 대한 결정을 내릴 수가 있고, 이런 제한을 두면 디자인의 전반적인 일관성도 늘어나기 때문입니다.
Spacing 요소의 티셔츠 사이즈 예시는 다음과 같습니다. 예시는 3개의 Spacing 종류를 보여줬지만, 티셔츠 사이즈가 X-small도 있고 X-large가 있듯이, 더 추가해도 좋습니다.
Spacing / Small → 8px
Spacing / Medium → 16px
Spacing / Large → 32px
✻ 여기에서 Spacing은 Component 이름, 오른쪽의 티셔츠 사이즈는 Spacing의 종류입니다.
이러면 AI와 소통할 때 왜 편하냐면, "페이지의 주요 요소간의 모든 간격을 Medium으로 맞춰줘"라고 하고 간격이 일정한 아웃풋을 얻을 수 있기 때문입니다.
이 전처리 과정을 거치지 않으면, AI 프로토타이핑을 하며 아웃풋을 개선시켜나갈 때마다 AI한테 "아니, 이 요소 말고 다른 요소 옮겨달라고!" 혹은 "아니, 간격이 다 잘못됐어. 간격을 내 디자인처럼 해달라고!"라고 해도 부정확하고 도움이 되지 않는 아웃풋을 얻을 수 있습니다.
급기야 AI가 갈피를 못 잡고 생성한 불필요한 코드가 여러 개 쌓이면서 AI로 만든 프로토타입이 아예 작동 안하는 에러 화면까지 생길 수 있습니다.
구글에 다니는 다지인 팀 매니저는 이 문제를 너무 겪다가 솔루션으로 대문자와 느낌표를 많이 쓰고 화난듯이 얘기하면 AI의 아웃풋이 더 정확해진다고 했는데, 위에 기술한 방법이 더 효율적입니다. 왜냐하면 AI는 감정이 없고, 대문자와 느낌표를 많이 써서 얻은 결과물은 AI를 사용한 도박에 가까울 수 있는게 이렇게 얻은 결과물은 규칙과 상관없이 아웃풋이 얼기설기 생성된 경우일 수가 있기 때문에 언제 오작동할지 모르는 시한폭탄이 됩니다.
2026년 2월 기준, 업계의 프로덕트 디자인 스탠다드 툴은 여전히 Figma입니다. Figma에서 기존에 존재하는 와이어프레임을 AI가 이해하기 쉽게 전처리하려면 다음과 같은 사항을 준수하면 됩니다.
1. Layer 이름을 정하고, 이 이름을 가능한 모든 기능에서 똑같이 사용합니다. Component를 많이 사용하면 자연스럽게 공통된 이름을 계속 사용할 수 있습니다.
2. 요소들을 auto-layout합니다. Layer들이 와이어프레임에 보여지는 순서대로 왼쪽 Layer 패널에 보여져야 합니다. 예를 들어서 Global Nav Bar 밑에 Title이 보여진다면, Layer 패널에도 Title이 Global Nav Bar 밑에 있어야 합니다. Auto-layout을 제대로 하면 이 문제는 해결됩니다.
3. 와이어프레임 요소간의 간격을 Spacing이라는 Component로 채우고, 가능하면 Spacing은 3-5개만 사용합니다. 요소를 빈공간 있게 Stack하는게 아니라, Global nav bar같은 요소랑 Spacing을 레고 쌓듯이 쌓는다고 생각하면 편할 것 같습니다.
이 3가지 가이드라인 중에서 1과 2는 특히 전처리 과정에서 양질의 아웃풋을 얻으려면 필수이고, 3은 아웃풋의 정확성을 확 높이기 때문에 가능하면 하면 좋습니다.
"언제 전처리를 다하지? 시간이 너무 많이 걸릴 것 같은데.."라고 생각할 수 있습니다. 그런데 제가 제 팀한테 하는 말이 있습니다.
AI의 장점은, 한번 설정을 잘해두면 그 말을 다시 반복할 필요가 없다는 점입니다.
그렇기 때문에, 이렇게 설정을 처음에 잘해두면, 이 룰을 바탕으로 앞으로 AI 프로토타이핑을 할 때, 이미 많은 주요 요소에 대한 이해를 AI가 한 상황이기 때문에, 복리처럼 전처리라는 투자를 하면 AI 프로토타이핑으로 할 수 있는 작업물의 임팩트가 어마어마하게 커집니다. 그러니 지금 AI라는 파도를 전세계가 주목하는 지금, AI 프로토타이핑을 위한 전처리라는 투자를 하고 나만의 AI 프로덕트 어시스턴트 셋업을 합시다.
다시 가상의 시나리오로 돌아와서, 포도라는 스타트업에서 ETG(https://emtechguide.com/)라는 다양한 AI 서비스의 랭킹을 카테고리별로 볼 수 있는 프로덕트를 가지고 있습니다.
다양한 AI 서비스의 랭킹을 카테고리별로 볼 수 있는 ETG다음에 뵙기 전까지 ETG라는 화면을 Figma로 html.to.design 플러그인을 사용해서 가져온 다음에, 전처리 과정을 거쳐서 AI가 이해하기 쉬운 상태로 와이어프레임을 만들어보는 연습을 해보면 좋을 것 같습니다. 이미 작업하고 있는 기능이 있다면, 기존의 기능으로 연습해도 좋습니다.
사수로써 팁을 드리자면, 플러그인 사용을 위해서는 Chrome 브라우저 사용해야 하고, 자잘한 요소를 전부 신경쓰기보다는 주요 요소의 구조를 신경쓰는 것이 효율적입니다. 그리고 Auto-layout을 마쳤으면, 와이어프레임 자체가 Auto-layout이면 나중에 Figma MCP를 통해 와이어프레임을 AI 프로토타이핑 툴에 보낼 때 인식이 안 될 수 있으니 최종 Auto-layout된 와이어프레임을 Figma Frame안에 넣어야 합니다. 위에 "Pre-processing for AI ingestion" 이미지를 참고해주세요. 이미지를 보시면, 와이어프레임 자체는 Auto-layout이 되지 않고, 요소와 Spacing Component가 레고처럼 쌓인 Auto-layout된 Layer들이 Figma Frame에 들어가 있습니다.
다음에는 디자인 시스템을 어떻게 AI가 이해할 수 있게 전처리하고 변환하는지에 대한 정보를 나누겠습니다.
MIT 석사 졸업 후 글로벌 테크 회사 뉴욕 지사에서 AI 기능을 디자인하는 시니어 UX 디자이너입니다. 이 브런치북에서 실무에서 AI 프로토타이핑을 적용하며 배운 내용을 나눕니다.
예제 파일은 이메일로 무료 공유합니다.
이번 화 예제 파일을 원하시면 댓글에 이메일을 남겨주세요. 주 1회 확인 후 보내드립니다.