5화: AI로 만든 디자인 발전시키기

2달 안에 AI 프로토타이핑 마스터하기

Figma 디자인을 AI 프로토타이핑 툴에 구현했다면, 이제 다음 단계는 피드백을 받고 디자인을 반복 개선(iteration)하는 것입니다.

AI 프로토타이핑은 처음 세팅할 때 시간이 꽤 오래 걸립니다. 하지만 세팅이 끝난 뒤 반복 개선 단계에 들어가면 시간을 크게 절약할 수 있습니다. 실제로 AI 프로토타이핑을 처음 써본 디자이너들 중에는 Figma로 디자인하는 것이 더 빠르다고 말하는 경우도 있습니다. 어느 정도는 맞는 말입니다.

예를 들어 저는 viewer 화면에서 사이드바를 오른쪽으로 옮기고 싶었는데, 프롬프트를 다섯 번이나 입력했는데도 원하는 결과가 나오지 않았던 적이 꽤 있습니다.

이런 상황은 생각보다 자주 생깁니다. 대부분 다음과 같은 경우입니다.

AI가 내가 말하는 요소가 무엇인지 정확히 이해하지 못한 경우

어떤 변경을 원하는지 충분히 구체적으로 전달되지 않은 경우

왜 디자인 변경을 하려는지 의도가 공유되지 않은 경우

또 하나 현실적인 문제는 AI가 결과를 생성하는 데 시간이 걸린다는 점입니다.

그래서 AI 프로토타이핑으로 디자인을 반복 개선할 때는 다른 디자이너와 협업한다고 생각하는 것이 좋습니다.

먼저 무엇을 만들려고 하는지 의도를 공유

어떤 요소를 수정하려는지 구체적으로 말하기

작은 변경을 하나씩 요청하기보다 여러 작업(3개 이상)을 한 번에 요청하기

이 방식으로 작업하면 AI 프로토타이핑 속도가 훨씬 빨라집니다.

회사 복지로 다녀온 LPGA 경기. 여기 골프장 멤버십 가입비만 7억원 수준인데, 다행히 UX 디자이너는 골프를 못 쳐도 AI 프로토타이핑을 잘하면 승진 가능합니다.

포도라는 스타트업에서 디자인 매니저가 말합니다.

AI 프로토타이핑 셋업 마쳤으니까 이제 실무에 도입하자!
AI 프로토타이핑으로 만든 디자인에 대한 피드백을 받고,
그 피드백을 디자인에 반영해서 다음주 디자인 리뷰 미팅 때 공유해줘.

다음은 제가 실제로 디자인을 반복 개선할 때 사용하는 워크플로우입니다.

AI 프로토타이핑으로 만든 디자인을 반복 개선하기 위한 플로우

Step 1. AI 프로토타이핑된 디자인을 Local host로 실행하기

프로젝트 폴더에서 우클릭한 다음 New Terminal at Folder를 선택합니다.

Terminal에서 다음 명령어를 입력합니다: npm run dev

Terminal에서 제공하는 Local host URL을 Chrome 브라우저에서 엽니다. 보통 localhost:3000을 사용합니다.

AI 프로토타이핑 코드로 채운 프로젝트 폴더를 터미널로 실행하는 방법

Step 2. DevTools로 수정할 요소의 이름을 찾기

Chrome 브라우저에서 local host URL을 엽니다.

DevTools를 열고(Mac 기준 Option + Command + I) 좌측 상단 화살표 아이콘을 클릭한 다음 화면에서 수정하고 싶은 UI 요소를 선택합니다.

DevTools에서 해당 요소의 이름을 확인한 뒤 "" 안에 있는 이름을 그대로 복사합니다.

DevTools을 사용해서 AI가 이름을 임의로 부여한 요소들의 이름을 추출할 수 있습니다

Step 3. 변경할 사항 정리하기

Notes 앱 같은 곳에 수정할 요소와 변경 내용을 정리합니다.

예를 들면 다음과 같습니다.

This is for the AI ranking feature.
1. Move the "viewer-sidebar" to the far right of the screen
2. Reduce the "viewer-header" height to 36px
3. Add a details panel for the AI services in the table by referencing this design from Figma: @ + [Figma Link]

Step 4. AI에게 한 번에 요청하고 결과 확인하기

수정할 요소가 여러 개라면 하나씩 요청하기보다 한 번에 요청하는 것이 좋습니다. 프롬프트 안에서 수정할 요소 이름을 ""로 감싸면 AI가 어떤 요소를 말하는지 더 정확하게 이해합니다.

변경 후에는 local host에서 결과를 확인하고 다음을 점검합니다.

edge case가 없는지

user flow가 자연스러운지

기능이 의도한 목표를 달성하는지

이 과정을 반복하면서 디자인을 점점 개선하면 됩니다.

뉴욕 테크 실무에서 실제로 적용하며 배운 팁입니다.

1. 요소 이름은 ""로 구분해 주세요

프롬프트에서 수정할 요소 이름을 "" 안에 넣으면 일반 텍스트와 구분되어 AI가 어떤 요소를 말하는지 훨씬 정확하게 이해합니다.

2. 변경 사항은 한 번에 프롬프트 입력하는 것이 좋습니다

AI가 결과를 생성하는 데 시간이 걸리기 때문에 변경을 하나씩 요청하면 오히려 작업 시간이 길어집니다.

3. Notes 앱에 먼저 정리한 뒤 프롬프트를 입력하세요

프롬프트 입력창에 바로 쓰기 시작하면 작은 변경 하나만 요청하고 실수로 바로 실행 버튼을 누르게 되는 경우가 많습니다. 또한, AI 툴들의 입력창이 보통 작아서 여러 요청을 타이핑하기에 적합하지 않습니다. 먼저 Notes 앱에 변경 사항을 모아두고 한 번에 요청하는 것이 훨씬 효율적입니다.

4. 여러 기능을 동시에 작업할 때는 페이지 이름을 명확히 말하세요

Local host에서 여러 기능을 동시에 작업하는 경우 어떤 페이지를 수정하는지 명확히 알려주는 것이 좋습니다.

예를 들어 local host URL이 다음과 같다면, dashboards가 페이지 이름입니다.

http://localhost:3000/#dashboards

프롬프트에서 다음처럼 말하는 것이 좋습니다.

This is for the dashboards page.
1. Update the "viewer-header" so that it includes a CTA at the far right of the header.
2. Request 2
3. Request 3
4. ...

디자인을 반복 개선할 때 위와 같이 프롬프트를 구성하면 매 요청마다 어떤 페이지를 위한 디자인 변경 요청인지를 복사 붙여넣기할 필요가 없어서 편하고, 전반적인 AI의 오류가 줄어듭니다.

---

다음 글에서는 AI 프로토타이핑 디자인에 3D 모션 디자인을 어떻게 접목시키는지에 대해서 다룰 예정입니다.

---

MIT 석사 졸업 후 글로벌 테크 회사 뉴욕 지사에서 AI 기능을 디자인하는 시니어 UX 디자이너입니다. 이 브런치북에서 실무에서 AI 프로토타이핑을 적용하며 배운 내용을 나눕니다.

예제 파일은 이메일로 무료 공유합니다.
이번 화 예제 파일을 원하시면 댓글에 이메일을 남겨주세요. 주 1회 확인 후 보내드립니다.