AI와 함께 UX/UI 디자인하기: 우수 사례 모음집②

더블 다이아몬드 프로세스 Develop & Deliver 사례

AI와 함께 UX/UI 디자인하기: 우수 사례 모음집①

내가 진행한 ‘AI 활용 UX 디자인 워크숍’에서 실제 수강생이 만든 프로젝트 사례를 바탕으로, 2025년 현재 AI가 UX/UI 디자인 실무 현장에서 협업 도구로 어떻게 활용되는지 구체적으로 살펴보고 있다.

이번에는 더블 다이아몬드 프로세스에서 두 번째 다이아몬드, 해결책을 도출하고 결과물을 생성하는 단계에서 AI를 활용한 사례를 살펴보자.

이 글에서 소개한 사례는 모두 수강생들의 개인 작업물이므로 무단 복제, 배포 또는 변형을 금지합니다.

스토리보드

스토리보드(Storyboard)는 본래 영화나 방송 프로그램의 장면을 계획할 때 주로 사용하는 도구였다. 하지만 최근 들어서는 사용자 중심의 제품을 개발하는 과정에서도 널리 쓰인다.

UX 스토리보드는 사용자가 제품을 사용하는 과정과 그 경험을 시각적으로 표현한 결과물이다. 이는 복잡한 사용자 여정을 한눈에 파악할 수 있도록 도와준다. 또한 다양한 이해관계자와 쉽게 정보를 공유하고 공감대를 형성하는 데에도 효과적이다.

닐슨 노먼 그룹(Nielsen Norman Group)에 따르면, 일반적으로 UX 스토리보드는 다음과 같은 3가지 요소를 포함해야 한다.

• 시나리오: 서비스를 사용하는 사용자의 스토리
• 시각적 요소: 단계별 장면을 시각적으로 나타낸 스케치, 일러스트, 이미지 등
• 캡션: 사용자 행동과 감정, 상황에 대한 설명

이러한 구성 요소들은 생성형 AI 도구를 활용하면 보다 쉽게 제작할 수 있다. 예를 들어 챗GPT로 GPT-4o 모델을 활용하여 사용자 시나리오를 작성하고, Imagen 3로 각 장면에 해당하는 이미지를 만들 수 있다.

유튜브 뮤직 리디자인 프로젝트

아래는 유튜브 뮤직 사용자의 페인 포인트를 표현한 스토리보드의 일부다.

이미지를 생성할 때 사용한 Imagen 3는 링크에서 ‘Try in Whisk’를 클릭하면 곧바로 사용해 볼 수 있다.

이러한 작업 과정에서 장면의 일관성을 유지하려면 캐릭터의 복장이나 배경과 같은 요소를 설명하는 키워드를 고정적으로 입력해야 한다. 특히 원하는 스타일의 이미지가 생성되었을 때, 우측 하단 설정 버튼을 눌러 ‘시드’ 항목의 자물쇠 아이콘을 잠금 상태로 변경하면 동일한 스타일을 유지할 수 있다.

이 방식으로 웹툰 스타일뿐만 아니라, 원하는 레퍼런스 이미지를 첨부하거나 사실적인 느낌을 표현하는 프롬프트를 입력해 다양한 스타일의 이미지를 생성할 수 있다.

솔루션 구체화/디자인 에셋 만들기

솔루션을 아이디에이션(Ideation)하는 단계에서는 상황에 따라 다양한 프롬프트를 시도해 볼 수 있다. 이는 크게 세 가지 유형으로 나뉜다.

이 중 두 번째 방법, AI와 함께 솔루션 초기 아이디어를 구체화하는 방식을 적용한 사례를 살펴보자.

멘탈 케어 서비스 신규 기획 프로젝트

프로젝트 주제는 멘탈 케어를 위한 ‘감정 기록 앱 서비스’였다. 리서치를 진행한 결과, 기존의 감정 기록 앱들은 사용자가 다섯 가지 감정 중 하나만을 선택하도록 제한하고 있어 복합적인 감정을 충분히 표현하지 못한다는 점이 문제로 나타났다.

솔루션 설계

이 문제를 해결하기 위해 워크숍 수강생은 AI와 함께 심리학 분야 연구를 참고해 감정을 8가지 대분류로 나누었다. 그런 다음, 각 감정을 어떻게 기록할지 논의했다. 곧 감정마다 어울리는 컬러를 매칭해 시각화하는 방식을 도입함으로써 사용자의 감정을 보다 풍부하고 직관적으로 표현하자는 솔루션이 나왔다. 아래 감정 분류와 그에 따른 컬러 코드는 AI와 협업해 도출한 결과물이다.

수강생은 정리한 컬러 코드를 반영한 와이어프레임 시안을 생성해 서비스의 초기 콘셉을 시각적으로 구체화했다. 특히 컬러를 생동감 있게 구성해 시각적 다양성을 높임으로써, 사용자가 앱을 지속적으로 사용하도록 유도한 것이 디자인의 주요 목표였다. 또한, 이러한 의사 결정 과정에는 변동 보상(Variable Reward), 도파민 루프(Dopamine Loop)처럼 사용자 행동을 유도할 심리학 이론이 적용되었는데, 이 역시 AI와 함께 상의하며 도출한 전략이라고 했다.

솔루션 고도화와 디자인 에셋 생성

수강생은 한 단계 더 나아가, 게이미피케이션(Gamification) 디자인을 어떻게 적용하면 좋을지에 대해서도 AI와 함께 논의했다. 아래 프롬프트는 ‘정원 게임’이라는 주제를 어떤 방식으로 구현할 수 있을지 AI에게 질문한 내용을 담고 있다.

이렇게 게임의 규칙을 설정한 다음, 정원 게임에서 사용할 디자인 에셋은 미드저니(Midjourney)에서 생성했다.

 마지막에는 지금까지 만든 솔루션 모두를 최종 프로토타입으로 발전시켜 나가는 과정을 거쳤다.

이처럼 AI가 처음부터 끝까지 모든 솔루션을 자동으로 제시하고 시각화해 주는 것은 아니다. 디자이너가 초기 콘셉과 방향성을 직접 설정하고, 그에 맞는 명확한 명령으로 AI를 적극적으로 활용해야만 최종 결과물이 완성될 수 있다.

이 프로젝트는 솔루션 아이디어 도출부터 시각화까지 단계마다 적절한 AI 도구를 효과적으로 활용한 사례로, 디자이너의 주도적인 의사결정과 기획 역량이 얼마나 중요한지 잘 보여준다.

디자인 검증과 테스트

AI는 디자인 결과물에 대한 피드백을 제공하고, 이를 기반으로 디자인을 개선하는 데에도 효과적으로 활용될 수 있다.

부동산 탐색 서비스 신규 기획 프로젝트

예를 들어, 워크숍에서 부동산 앱 리디자인(Redesign) 과제를 수행한 수강생은 프로젝트를 진행하며 기존 앱의 한계를 분석하고, 이를 해결할 서비스를 새로 기획하는 단계까지 범위를 확장했다. 이때 그는 다양한 방식으로 AI의 피드백을 받아 디자인을 검증하고, 반복적으로 개선해 나갈 수 있었다.

UI 개선 피드백

첫 번째 활용 방법은 UI 페이지가 달성해야 할 목표를 AI에게 전달한 다음, 사용자가 UI를 쓰는 과정에서 개선이 필요한 점과 그에 대한 방향을 함께 제안해달라고 요청하는 방식이다.

이를테면 사용자가 여러 부동산 매물을 탐색하며 관심 매물을 즐겨찾기에 저장하고, 다시 확인하거나 관련 페이지로 쉽게 이동하는 것이 주된 목적인 페이지가 있다. 해당 UI 화면을 AI에게 제공한 다음 개선 방안에 대한 피드백을 요청하는 것이다. 실제 사례에서는 이 방법으로 정보의 계층 구조나 CTA(Call To Action) 강조 방식과 같은 구체적인 디자인 개선 아이디어를 얻을 수 있었다.

또한, 이 과정을 반복하다 보면 AI가 디자인할 서비스의 정보와 발전 흐름을 점차 학습하며, 결과적으로 작업의 맥락을 축적하게 된다. 이와 같은 데이터가 충분히 누적된 이후에는 더 깊은 피드백을 얻을 수 있다. 아래 프롬프트처럼 특정 기능을 수행하는 버튼의 적절한 위치를 파악하기 위해 지금까지 첨부한 모든 UI 화면을 종합적으로 고려한 조언을 AI에 요청하는 것이다.

AI는 사용자의 물음에 “해당 기능이 현재 화면 구조상 눈에 잘 띄지 않아 서브 기능처럼 인식될 가능성이 크다”고 지적했다. 또한, 매물 리스트 화면이나 경로 안내 페이지, 매물 상세 보기 화면, 매물 비교 화면 등 각 UI가 가진 맥락을 모두 고려해, 더욱 적절한 노출 위치를 구체적으로 제안했다.

수강생은 이에 “AI가 서비스 전체의 흐름과 각 페이지의 목적을 정확하게 이해하고 있어서, 마치 실무 디자이너와 논의하듯 실제적인 피드백을 받을 수 있었다”고 말했다.

빠른 결과물 생성과 A/B 테스트

마지막으로, AI로 생성한 UI 결과물 가운데 어떤 안이 사용자에게 더 좋은 반응을 얻는지 확인할 A/B 테스트도 진행했다.

두 가지 테스트 화면 중 하나는 갈릴레오 AI(Galileo AI)로 생성한 초기 버전이었고, 다른 하나는 AI가 생성한 초기 시안을 바탕으로 UI 레이아웃, UX 라이팅, 콘텐츠 등을 수정한 개선안이었다.

테스트 대상 UI의 주요 목표는 사용자가 세 곳의 부동산 매물을 순서대로 방문하는 상황에서 지도 기반 내비게이션을 제공해 이동을 돕는 것이었다. 그중 이번 테스트의 목적은 사용자가 부동산 매물을 보러 다닐 때 ‘이동 경로 안내’가 더 중요한지, 아니면 ‘매물 이미지’가 더 중요한지를 파악하는 것이었다.

테스트는 전 세계 실제 사용자 100명을 대상으로 선호도에 대한 투표를 빠르게 받아볼 수 있는 피그마 플러그인 Rapid A/B Test를 사용하여 진행했다. 그 결과, 지도를 보여주는 UI가 더 많은 선택을 받았으며, 이로써 매물 이미지를 강조하는 것보다 이동 경로 정보를 제공하는 것이 사용자 경험에 더 효과적이라는 인사이트를 얻었다. 수강생은 이러한 데이터를 기반으로 최종 디자인 방향을 결정했다고 이야기했다.

마치며: 디자이너의 협업 파트너, AI

지금까지 2025년 현재, UX/UI 디자인 프로젝트에서 생성형 AI를 어떻게 활용할 수 있는지 실제 프로젝트 사례로 살펴보았다. 이처럼 AI는 퍼소나를 생성해 가상 사용자 인터뷰부터 데이터 분석 자동화, 아이디어 구체화, 시각적 결과물 생성, UI 피드백 제공과 테스트까지 모든 디자인 단계에서 쓸 수 있었다.

무엇보다 실제 사용자를 대상으로 인터뷰를 진행하기 어렵거나, 리서치를 위한 리소스가 부족한 환경에서도 AI와의 협업으로 프로젝트를 원활히 진행하는 것이 장점이었다. 또한, AI로부터 반복적인 피드백과 테스트를 받아 혼자 작업할 때보다 더욱 논리적이고 근거 있는 의사결정을 내릴 수 있었다.

하지만 사례들이 보여주듯이, AI가 모든 해답을 자동으로 제시해 주는 것은 아니다. 그래서 디자이너가 데이터를 정확히 해석하고, 사용자 경험에 대해 충분히 공감하며 문제를 정의하고 솔루션 방향을 설정했을 때야 협업 효과는 극대화된다. 즉, 핵심 의사결정은 여전히 디자이너의 몫이며, AI는 그 과정을 보조할 파트너 역할을 한다.

앞으로 어떤 AI 도구가 등장하더라도, 중요한 것은 기술 자체가 아닌 그것을 어떻게 활용할지 계획하는 디자이너의 기획력과 주도성이다. 이번 글에서 소개한 워크숍 사례들은 바로 그러한 접근 방식을 실질적으로 보여주는 좋은 예시이다. 이처럼 주도권을 가지고 올바른 질문을 던질 준비만 되어 있다면, 누구든 AI와 함께 더 나은 디자인 결과물을 만들어 갈 수 있을 것이다.

©️요즘IT의 모든 콘텐츠는 저작권법의 보호를 받는 바, 무단 전재와 복사, 배포 등을 금합니다.