뉴욕 현직 디자이너의 AI UX 워크플로우: 프로토타이핑 전처리가 중요한 이유
🤖 [플렉스웍 커뮤니티] 뉴욕 현직자 이지원 님과 함께 배우는 AI로 하는 UX 워크플로우
일시: 4월 4일(토) 오전 10시 (1시간 30분)
장소: 온라인
리더: 이지원 님(MIT 출신 뉴욕 현직 시니어 UX 디자이너)
가격: 4,900원
이런 분들께 추천합니다
UX 디자인에 AI를 활용해보고 싶은 디자이너
AI 프로토타이핑 툴을 써보고 있지만 실무 적용이 고민인 분
실제 글로벌 테크 회사에서 사용하는 UX 워크플로우가 궁금한 분
👉 [지금 바로 신청하러 가기]
전처리(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를 눈이 없는 동료라고 생각하면 더욱 정확한 프로토타이핑 아웃풋을 얻을 수 있습니다.
와이어프레임의 주요 요소에 대한 이름을 정하고, 같은 이름을 계속 사용하는 것이 중요합니다.
예를 들어서, 맨 위에 검색 바와 프로필이 있는 Global Navigation Bar를 Header라고 부를지 Global Nav Bar라고 부를지 정한 다음에 이 이름을 계속 사용하는 것이 중요합니다. 주요 요소에 대한 이름을 바꿔부르면 AI 입장에서 다른 요소로 인식하고 AI의 오류가 늘어납니다.
눈이 안 보여서 불편한 점이 있다면, 사물 간의 간격을 알기 어렵다는 점입니다. 그
렇기 때문에 AI한테 주요 요소간의 간격이 얼마나 되는지에 대해 알려주는 것이 좋고,
아예 주요 요소 간의 간격을 Spacing이라고 이름 지은 다음에 Component로 만들어서
티셔츠 사이즈로 종류를 3-5개 정한 다음에 필요에 따라 사용하는 것이 좋습니다.
Spacing 요소의 티셔츠 사이즈 예시는 다음과 같습니다.
Spacing / Small → 8px
Spacing / Medium → 16px
Spacing / Large → 32px
✻ 여기에서 Spacing은 Component 이름, 오른쪽의 티셔츠 사이즈는 Spacing의 종류입니다.
이러면 AI와 소통할 때 왜 편하냐면, "페이지의 주요 요소간의 모든 간격을 Medium으로 맞춰줘"라고 하고 간격이 일정한 아웃풋을 얻을 수 있기 때문입니다.
이 전처리 과정을 거치지 않으면 AI한테
"아니, 이 요소 말고 다른 요소 옮겨달라고!" 라고 해도 부정확한 아웃풋을 얻을 수 있습니다.
급기야 AI가 갈피를 못 잡고 생성한 불필요한 코드가 여러 개 쌓이면서 AI로 만든 프로토타입이 아예 작동 안하는 에러 화면까지 생길 수 있습니다.
구글에 다니는 디자인 팀 매니저는 이 문제를 너무 겪다가 솔루션으로 대문자와 느낌표를 많이 쓰고 화난듯이 얘기하면 AI의 아웃풋이 더 정확해진다고 했는데,
위에 기술한 방법이 더 효율적입니다.
2026년 2월 기준, 업계의 프로덕트 디자인 스탠다드 툴은 여전히 Figma입니다.
Figma에서 기존에 존재하는 와이어프레임을 AI가 이해하기 쉽게 전처리하려면 다음과 같은 사항을 준수하면 됩니다.
1. Layer 이름을 정하고, 이 이름을 가능한 모든 기능에서 똑같이 사용합니다.
2. 요소들을 auto-layout합니다. Layer들이 와이어프레임에 보여지는 순서대로 왼쪽 Layer 패널에 보여져야 합니다.
3. 와이어프레임 요소간의 간격을 Spacing이라는 Component로 채우고, 가능하면 Spacing은 3-5개만 사용합니다.
이 3가지 가이드라인 중에서 1과 2는 특히 전처리 과정에서 양질의 아웃풋을 얻으려면 필수이고, 3은 아웃풋의 정확성을 확 높이기 때문에 가능하면 하면 좋습니다.
그렇기 때문에, 이렇게 설정을 처음에 잘해두면 복리처럼 전처리라는 투자를 하면 AI 프로토타이핑으로 할 수 있는 작업물의 임팩트가 어마어마하게 커집니다.
AI 프로토타이핑을 위한 전처리라는 투자를 하고 나만의 AI 프로덕트 어시스턴트 셋업을 합시다.
다시 가상의 시나리오로 돌아와서, 포도라는 스타트업에서 ETG라는 다양한 AI 서비스의 랭킹을 카테고리별로 볼 수 있는 프로덕트를 가지고 있습니다.
다음에 뵙기 전까지 ETG라는 화면을 Figma로 html.to.design 플러그인을 사용해서 가져온 다음에,
전처리 과정을 거쳐서 AI가 이해하기 쉬운 상태로 와이어프레임을 만들어보는 연습을 해보면 좋을 것 같습니다.
사수로써 팁을 드리자면, 플러그인 사용을 위해서는 Chrome 브라우저 사용해야 하고,
자잘한 요소를 전부 신경쓰기보다는 주요 요소의 구조를 신경쓰는 것이 효율적입니다.
다음에는 디자인 시스템을 어떻게 AI가 이해할 수 있게 전처리하고 변환하는지에 대한 정보를 나누겠습니다.
👇 뉴욕 현직자 이지원 님의 커뮤니티 & 이벤트 가기
