생성형 AI를 활용한 UX 디자인 워크숍
AI와 일단 친해져보기로 했다.
생성형 AI를 활용한 UX 디자인 워크숍
해당 글은 이스터에그캠프에서 주최한 생성형 AI를 활용한 UX 리디자인 워크숍 2기에 참가하여 생성형 AI를 활용한 UX 디자인 프로세스를 진행했던 경험을 토대로 정리한 글입니다. 생성형 AI를 활용한 UX 디자인 관련 글들을 더 참고하고 싶으시다면 해당 워크숍의 강사님이셨던 디논님의 글들을 추천합니다.
AI를 활용한 UX 디자인
AI를 UX 디자인에 활용하면서 가장 중요하게 생각해야하는 개념은 [프롬프트 입력 - 생성 - 검증 - 의사결정] 4단계를 각각의 디자인 프로세스에서 반복적으로 진행해야한다는 것입니다.
① 각각의 단계 별로 AI에게 질문을 하고 (=프롬프트 입력)
② 이에 대한 AI의 여러가지 답변을 확인하며 (=생성)
③ 이 답변이 정말 신뢰할 수 있는 내용인지 검토하고 (=검증)
④ 확인된 답변들 중 어떤 내용을 중점적으로 볼 것인지 선별하는 (=의사결정)
이 4단계의 과정이 AI-UX 프로세스에서는 필수적으로 일어나고, 이를 얼마나 잘 진행하냐에 따라 결과물이 달라질 수 있기 때문에 AI를 활용할 때 가장 주의해야하는 일입니다. 저는 이 4단계를 각 프로세스에 적용하여 아래와 같은 방식으로 리디자인을 진행하였습니다.
1단계. 문제 정의
ChatGPT 4.0을 중점적으로 활용해 앱 리디자인을 진행할 예정이었기 때문에 ChatGPT가 학습했을만한 해외 유명 앱들 중 Agoda 앱을 주제로 선정하였습니다. 제가 평소에도 자주 사용하는 앱이였기 때문에 사용성을 빠르게 파악할 수 있었고 한 화면에 충분한 콘텐츠들이 있어 향후 리디자인 결과물을 정리할 때 유리했기 때문입니다. Agoda 앱의 문제점들을 정의하기 위해 활용한 방법들은 아래와 같습니다.
1. 문제점 구체화하기
ChatGPT 4.0 Plugin - UX Insight Assistant2. 페르소나 구성하기
① ChatGPT 4.0가 Agoda 앱에 대한 관련 정보를 답변에 활용할 수 있도록 사전 질문 진행
② Agoda 앱을 이용하는 페르소나 생성 명령
③ 해당 페르소나에 알맞은 프로필 이미지 생성 명령
ChatGPT 4.0 Plugin - UX Insight Assistant3. 고객 여정 맵 작성하기
① Diagrams:Show me를 통해 총 8단계의 사용자 플로우를 도출
② UX Insight Assistant로 각 8단계의 고객 여정 맵 작성
ChatGPT 4.0 Plugin - Diagrams:Show me & UX Insight Assistant4. 문제 정의하기
① 지금까지 진행한 UI 디자인 문제점, 고객 여정 맵, 페르소나 정보를 토대로 문제점 선별 명령
② 선별된 문제점이 진짜 Agoda 앱의 문제점이 맞는 지를 검증하기 위해 다각도의 추가 질문 진행
③ 선별된 문제점들 중, "검색 기능의 효율성 향상"을 주요 문제점으로 정의
ChatGPT 4.0 Plugin - UX Insight Assistant2단계. 솔루션 도출
[1단계. 문제 정의]에서 도출한 "검색 기능의 효율성 향상"에 대해 ChatGPT4.0에게 상세 솔루션들을 질문하였습니다. 이 단계의 핵심은 질문을 꼬리물기 형식으로 깊게 물어보는 것인데요. 깊게 물어보면 물어볼수록 ChatGPT 4.0은 이전 질문들을 토대로 답변을 하는 경향이 있기 때문에 더 정확하고 자세한 답변을 얻을 수 있습니다.
그러나, 이는 자칫 ChatGPT 4.0가 잘못된 답변을 하도록 유도할 수도 있기 때문에 답변에 대해 오류가 있거나 편향되어 있다고 판단될 경우에는 프롬프트 창을 새롭게 열어 처음부터 다시 질문하는 것을 권장합니다.
디자인 솔루션
① 검색 : 검색 내비게이션의 용이성
② 필터 옵션 : 검색 필터 및 정렬 옵션 제공 / 검색 결과에서의 추가조치 옵션 제공
③ 검색 결과 확인 : 직관적인 검색 결과 레이아웃 / 즉각적인 검색 결과 표시 / 검색 결과의 관련성 유지
ChatGPT 4.0 Plugin - UX Insight Assistant3단계. 아이데이션
[2단계. 솔루션 도출]을 통해 "검색 기능 강화"에 집중한 솔루션들을 수립하여, 해당 솔루션들을 반영한 앱 디자인 AI 시안과 와이어프레임을 구성하였습니다.
AI 시안의 경우, ChatGPT 4.0를 활용해 일러스트 같은 느낌은 들지만 여러가지 시안들을 만들고 그 안에서 실제 UI에 적용할 만한 요소들을 선별하는 방식으로 진행하였습니다. 향후에는 다른 AI 툴들을 활용해 더 다양하고 자세한 시안 만들기를 시도해볼까 합니다.
1. AI 시안 생성 및 UI 적용 요소 선별
선별된 UI 적용 요소
① 검색 : 메인 화면 중앙 상단에 검색창 배치
② 필터 옵션 : 검색창 하단에 주요 필터 옵션 노출
③ 검색 결과 확인 : 검색 결과를 검색창 하단에 제공
ChatGPT 4.0 Plugin - DALL•E2. 와이어프레임 생성
① AI 시안에서 선별한 UI 적용 요소들을 Prompt로 입력
② Prompt를 수정해가면서 다양한 검색 화면(메인 화면)들의 와이어프레임 생성
Figma Plugin - Wireframe Designer3. UX Writing 문구 생성
① 앱 화면에서 사용될 주요 설명 문구 및 타이틀 추천 명령
② 추천된 여러 문구들 중에 적절한 문구 선택
4단계. 결과물 생성
[3단계. 아이데이션]에서 생성한 여러가지 와이어프레임 중에 가장 적절한 케이스 하나를 선택해 아래와 같이 Agoda 앱 메인화면을 리디자인했습니다. 최종 결과물은 제가 직접 Figma를 이용해 만들었는데요. 최종결과물은 결국 사람이 디자인한다는 점에서 AI 답변의 검증 절차 및 의사결정 과정의 중요성을 한번 더 깨닫는 시간이었습니다.
UI 개선 항목
① 검색 : 메인 화면에서 바로 검색 가능
② 필터 옵션 : 숙소 검색에 필요한 주요 상세 필터를 바로 설정 가능
③ 검색 결과 확인 : 검색한 숙소 결과를 하단에서 바로 확인 가능
