AI로 만든 UX 디자인은 실제 서비스와 얼마나 비슷할까?

지난 글 ‘AI 때문에 UX 디자이너는 직업을 잃게 될까?’에서는 AI UX 툴로 할 수 있는 일들을 확인하며, AI가 UX 디자이너의 업무를 대체할 수 있을지 그 가능성과 한계를 살펴보았습니다. 추가로 실제 프롬프트를 입력해 AI가 만든 UX 디자인도 맛보기로 살짝 살펴보았습니다.

이번 글에서는 본격적으로 AI가 만든 UX 디자인과 실제 서비스 화면을 비교・분석해 보며 AI가 만든 디자인의 완성도가 얼마나 높은지, 실무에서는 얼마나 활용할 수 있을지 알아보도록 하겠습니다.

테스트는 대중적으로 많이 사용하는 AI UX 툴: Motiff, Visily, Galileo AI, Uizard로 진행했습니다. 특히, 한글 프롬프트를 지원하며, 작업물의 완성도가 가장 높은 Motiff를 중심으로 비교・분석을 진행했습니다.

테스트 1. 온라인 서점 마이페이지

첫 번째로 비교해 볼 서비스는 온라인 서점의 마이페이지입니다. Motiff에 입력한 프롬프트는 다음과 같습니다.

프롬프트

온라인 도서 판매 서비스 모바일 앱의 '내 주문' 페이지 디자인.

주문 페이지에서는 주문한 상품의 이미지와 책 이름 구매 수량, 가격 정보가 표시됩니다.

주문 정보에서 See More 버튼을 누르면 주문 상세 페이지로 이동합니다.

주문 페이지에서는 배송 추적 기능과 주문 취소, 반품 기능을 제공합니다.

프롬프트를 바탕으로 Motiff가 만든 디자인을 국내에서 이용자가 가장 많은 교보문고 온라인 서점의 주문/배송 조회 페이지와 비교해 볼까요?

Motiff와 교보문고의 주문 조회 화면을 나란히 놓고 살펴보면, 같은 기능을 담은 화면이어도 큰 차이가 있습니다.

상단 헤더 영역과 취급 상품의 특성

교보문고의 상단 헤더 영역에는 메뉴명, 동일 Depth 이동 버튼, 그리고 장바구니 아이콘이 배치되어 있습니다. 반면 Motiff는 메뉴명과 검색 아이콘을 배치했죠. 동일 Depth 이동 버튼이야 서비스의 규모나 화면 구성에 따라 다를 수 있다 쳐도, 같은 영역에 배치한 아이콘이 다른 이유는 무엇일까요?

과거에는 헤더 영역에 홈 버튼이나 전체 메뉴 버튼을 넣어 빠른 이동을 지원하는 것이 일반적이었습니다. 하지만 서비스가 고도화되면서, 모든 화면에 일률적으로 홈 버튼이나 전체 메뉴를 넣는 것보다 화면 특성에 따라 노출되는 버튼을 다르게 구성하는 서비스가 늘어났습니다. 이와 함께 UI 디자인 경향도 변하기 시작했죠.

교보문고가 헤더에 장바구니 버튼을 둔 이유는 주문 조회 페이지와 가장 연관성이 높고, 구매를 촉진하기에 가장 효과 높은 버튼이기 때문입니다. 경쟁사인 YES24와 알라딘 역시 주문 조회 페이지의 헤더 영역에 장바구니 버튼을 배치하고 있고요.

반면 Motiff가 생성한 디자인의 헤더 영역에는 검색 아이콘이 배치되어 있습니다. 맥락상 주문 조회 검색 기능으로 보이는데요, 그렇다면 과연 이 영역에 검색 기능을 배치하는 것이 맞을지 고민이 필요합니다.

상품 특성상 도서류는 주문이 잦은 고빈도 상품이 아닙니다. 2023년 문화체육관광부의 국민독서실태조사에 따르면, 성인 1명이 1년에 읽는 종이책은 평균 1.7권입니다. 즉, 성인이라면 아무리 많아도 1년에 두 번 이상 주문하기 어렵다는 계산이 나옵니다. 온라인 서점을 자주 이용하고 독서량이 많은 사용자라 가정해도 주문 횟수가 한 달에 1회를 넘기기는 어렵죠.

주문 조회 검색 기능은 주문이 잦고 상품군이 다양한 종합 쇼핑몰에서나 자주 쓰이고 필요한 기능입니다. 따라서 주문 빈도가 낮은 도서 상품몰에서는 그 중요도가 많이 떨어집니다. 결국 Motiff의 디자인은 이런 취급 상품의 특성을 고려하지 않은 디자인입니다.

상단 탭 영역 구성과 사용성

탭 영역 구성에도 두 디자인은 차이가 있습니다.

Motiff는 전체 탭을 제공하지만, 교보문고에는 전체 탭이 없습니다. 또한 교보문고는 상태별 상세 건수를 표시하지만, Motiff는 표시하지 않습니다. 마지막으로, 교보문고에는 ‘준비 중’이란 스테이터스가 있고, 취소와 교환/반품 영역을 분리해 두었지만, Motiff에는 ‘준비 중’이 없으며 취소와 반품을 하나로 합쳐 놓았습니다.

교보문고가 전체 탭을 제공하지 않는 이유는 간단합니다. 영역이 부족하니까요. 한 줄에 노출할 수 있는 상태는 5개가 한계인데, 이미 상태값이 5개를 넘어가므로 전체 탭을 과감히 빼버린 것입니다. 첫 페이지에 진입했을 때, 전체 주문 리스트를 노출하면 되니까요.

전반적인 디자인도 다릅니다. 교보문고의 탭 영역은 배송 현황을 확인할 수 있는 스테이터스바 형태로 구성되어, 주문 상품의 현재 배송 상태를 직관적으로 파악할 수 있습니다. 반면 Motiff는 단순한 탭 형태라 내 주문이 어떤 상태인지 또는 책이 어디까지 와 있는지 바로 알기 어렵습니다. 특히 ‘배송 준비 중’과 같은 중요한 상태값을 빼먹은 치명적인 실수도 저질렀죠.

이런 것들은 사소한 차이처럼 보이지만, 자세히 뜯어보면 사용성에 큰 차이를 만듭니다.

상품 카드 영역과 문화 차이

마지막으로 상품 카드 영역을 비교해 볼까요? 차이가 나는 부분은 크게 두 가지, 썸네일 이미지 비율과 하단의 기능 버튼입니다.

우선, 교보문고의 썸네일 이미지 비율은 0.748:1, Motiff는 0.667:1로 약간의 차이가 있습니다.

Motiff의 썸네일이 교보문고보다 세로가 약간 더 긴 형태죠. 무슨 이유로 이런 비율 차이가 생기는 걸까요? 답은 한국과 미국의 도서 판형 차이에 있습니다.

한국에서 가장 많이 쓰는 도서 판형은 국판(0.7:1)과 신국판(0.67:1)입니다. 교보문고는 이 중 국판 비율에 가까운 0.7:1 사이즈로 이미지를 표시합니다. 반면 미국에서 가장 많이 쓰는 판형은 Trade Paperback(0.664:1)과 Mass Market(0.617:1)입니다. Motiff는 Trade Paperback과 유사한 0.667:1 비율로 썸네일을 표시합니다.

즉, 미국과 한국의 도서 판형이라는 문화적 차이가 썸네일 비율의 차이를 만든 겁니다. 게다가 길어진 썸네일 비율에 레이아웃을 맞추려고 Motiff는 요청하지도 않은 ‘이작가’라는 작가명을 넣은 거고요.

하단 기능 버튼에서도 차이가 있습니다. 교보문고는 배송 상태에 맞는 기능 버튼만 노출하는 반면 Motiff는 상태와 상관없이 ‘배송 조회’, ‘주문 상세’, ‘반품 신청’을 일괄 노출합니다. 하지만, 반품 신청은 배송 완료 상태에서만 가능한 기능이므로, Motiff의 설계는 프로세스상 적합하지 않죠.

이처럼 AI가 기본적인 레이아웃을 만들 수는 있어도 프로세스나 상태 변화에 따른 기능을 이해하고 그에 맞게 UX를 설계하는 일에는 부족함이 많이 보였습니다.

테스트 2. 온라인 대형마트의 장바구니 페이지

두 번째로 비교해 볼 서비스는 온라인 대형마트의 장바구니 페이지입니다. Motiff에 입력한 프롬프트는 아래와 같습니다.

프롬프트

대형마트 모바일 앱의 장바구니 페이지 디자인

장바구니에는 내가 담은 상품의 정보과 가격 정보가 표시되고 모든 상품의 합계 가격과 배송비가 총합에 표시됩니다.

하단에는 결제 페이지로 이동할 수 있는 결제하기 플로팅 버튼이 표시됩니다.

이 프롬프트를 기반으로 Motiff가 생성한 디자인은 왼쪽 화면과 같습니다. 국내 대형마트인 홈플러스의 장바구니 페이지와 비교해 볼까요?

이번에도 큰 틀에서는 유사해 보이지만 세세한 부분에서는 약간의 차이가 있습니다.

헤더 영역과 Motiff의 허술함

상단 헤더를 비교해 보면 특히 Motiff의 허술함이 드러납니다. 이전 페이지로 돌아가는 뒤로 가기 버튼이 없고, 현재 페이지 구성에서는 전혀 필요 없는 편집 버튼이 오른쪽에 배치되어 있습니다.

편집 버튼은 상품 선택 체크박스나 삭제 버튼을 노출하고 숨기는 등 제어하는 역할을 하지만, 현재 화면에서는 이미 상품 선택 체크박스와 삭제 버튼이 노출되어 있어 편집 버튼이 필요한 상황이 아니죠. 이 역시 앞서 언급한 것처럼 맥락과 상황을 고려하지 않고 AI가 학습한 내용 중 최적이라고 판단한 결과물을 그대로 만들었기 때문에 벌어진 일입니다.

배송 정보 노출 위치와 독특한 프로세스

전체 페이지 구성에서 가장 큰 차이가 나는 부분은 배송 정보의 노출 위치입니다. 홈플러스는 콘텐츠 영역 최상단에 배송 정보를 표시하지만, Motiff는 콘텐츠 하단 영역에 배치했습니다.

배송 정보 위치가 다른 이유는 무엇일까요? 온라인 대형마트의 서비스 특성을 이해하면, 왜 이런 차이가 생기는지 원인을 유추할 수 있습니다.

일반적인 커머스 서비스는 장바구니 단계에서 배송지 정보를 표시하지 않습니다. 장바구니는 물건을 담아두는 임시 저장 공간의 개념이지, 구매할 상품이 확정된 상태가 아니니까요. 그래서 보통 커머스 서비스는 장바구니 다음 단계인 ‘구매하기’ 화면에서 배송지 정보를 표시합니다.

하지만, 온라인 대형마트는 특이하게 장바구니 단계에서 배송지 정보를 표시합니다. 그 이유는 대형마트만의 독특한 프로세스가 있기 때문입니다. 바로 지점별 재고의 유무죠.

온라인 대형마트는 쿠팡처럼 각 지역의 물류센터에서 물건을 배송하지 않고, 고객의 집 주소와 가장 가까운 오프라인 매장에서 물건을 발송합니다. 서대문구에 사는 제가 이마트에서 물건을 주문하면, 가장 가까운 이마트 월드컵점에서 물건을 보내는 방식이죠.

다만, 각 지점은 오프라인 판매를 병행하기에 지점마다 보유한 재고가 다릅니다. 따라서 같은 물건이라도 지점에 따라 재고가 있을 수도, 없을 수도 있습니다. 그래서 판매 가능 여부를 보기 위해 재고를 확인하려면 고객의 주소가 필요합니다. 또, 이 정보는 이후 모든 프로세스에 영향을 미치기 때문에 배송 정보를 페이지 최상단에 두는 겁니다. 반면 Motiff는 이런 서비스 특성을 이해하지 못했기에 주소를 아래쪽에 배치한 것이고요.

상품 카드 영역의 디테일

상품 카드 영역에서도 사소한 디테일에서 아쉬움이 있었습니다.

홈플러스에는 개별 상품을 삭제할 수 있는 삭제 버튼이 있지만, Motiff에는 이 버튼이 없습니다. 또, 홈플러스는 수량을 조절할 때 숫자를 직접 입력할 수 있는 반면, Motiff는 ‘+’, ‘-’ 버튼으로만 제어할 수 있어 대량 구매 시 사용성에 불편함이 있었습니다.

그 외에도 상품별 이벤트 배지나 할인가 표시처럼 이커머스에서 자주 쓰이는 기본 기능이 누락된 것도 아쉬웠습니다.

이처럼 장바구니 화면 전반에서 UX 맥락을 반영하거나, 서비스가 제공해야 할 기본적인 기능을 구현하는 부분에서 여전히 부족함이 보였습니다.

테스트 3. 의류 쇼핑몰의 상품 상세 페이지

마지막 테스트는 의류 쇼핑몰의 상품 상세 페이지입니다. 입력한 프롬프트는 아래와 같습니다.

프롬프트

SPA 브랜드의 상품 상세 페이지 모바일 앱 디자인, 브랜드의 포인트 컬러는 검정이다.

상품 이미지 영역에는 남성 모델이 티셔츠를 입은 사진과 썸네일이 표시된다.

상품 정보 영역에는 상품의 카테고리 정보, 상품명과 모델품번, 별점 및 리뷰 개수, 정가, 할인율, 할인가, 컬러선택, 사이즈 선택 정보와 기능이 표시된다.

부가정보 영역에는 배송비와 적립 포인트 정보가 표시된다.

하단 플로팅 영역에는 구매하기 버튼과 찜하기 버튼이 표시된다.

보기에 어떤가요? Motiff가 생성한 디자인이 생각보다 그럴듯해 놀랍지 않나요?

앞선 테스트와는 달리 이번 결과물은 완성도가 높았고, 자세히 뜯어봐도 크게 흠잡을 부분이 없었습니다.

오히려 몇몇 부분에서는 “이게 된다고?” 하며 깜짝 놀란 부분도 있었는데요. 특히 프롬프트에 단순히 ‘배송비가 표시된다’ 정도만 입력했음에도, AI가 제주·도서-산간 추가 배송비를 알아서 넣은 점은 꽤 인상적이었습니다. 앞서 살펴본 장바구니나 마이페이지 사례를 생각해 보면, 이것 역시 AI가 스스로 판단했다기보다는 학습 데이터의 품질이 좋았을 가능성이 큽니다. 그렇다 하더라도, AI가 국가별 특성까지 반영할 수 있을 만큼 발전했다는 의미니까요.

이번 결과물의 완성도가 높았던 이유는 앞선 테스트보다 프롬프트를 더 상세하게 썼기 때문이기도 하지만, 접근 방식의 차이가 더 컸습니다. 앞선 두 번의 테스트에서는 프롬프트를 입력할 때, “이런 요소들이 있을 거야” 하며 머릿속에 떠오른 기능들을 프롬프트로 입력했습니다.

그러나 이번에는 반대로 특정 서비스를 지정하고, 그 서비스를 똑같이 만든다는 생각으로 프롬프트를 입력했습니다. 역기획 스타일로 탑텐의 상세 페이지를 띄워놓고 거기에 있는 구성 요소를 그대로 프롬프트에 입력한 것입니다.

물론 그런 점을 감안해도, AI가 뽑아낸 디자인의 완성도는 꽤 놀라운 수준이었습니다. 세세한 디자인만 조금 손보면, 바로 실무에 써먹을 수 있는 수준의 결과물이 나왔으니까요.

총평과 후기

실제 서비스와 AI가 만든 디자인을 비교 분석하며, AI가 만든 디자인의 수준과 부족한 점을 알아봤는데요. 이제 리뷰 과정에서 미처 다루지 못한 부분과 함께, 리뷰를 하면서 느낀 총평을 정리하며 글을 마무리할까 합니다.

1. 레퍼런스가 많은 기능이나 서비스일수록 결과물의 완성도가 높았다

이 글에서 다룬 테스트 외에도 개인적으로 다양한 페이지를 만들 프롬프트를 입력해 AI 디자인의 완성도를 확인했습니다. 그 결과, 동일 업종이라도 레퍼런스가 풍부한 기능은 곧잘 만드는 반면, 일부 서비스에만 쓰이는 특수 기능을 요청하면 전혀 엉뚱한 결과를 만드는 경우가 많았습니다. 아직 자료가 부족하거나 자료가 아예 없는 기능은 AI 스스로 생각하고 유추해 만드는 수준은 아니라는 거죠.

2. 같은 내용이라도 ‘영어냐, 한글이냐’에 따라 다른 결과가 나온다

동일한 프롬프트를 입력해도, 텍스트가 국문이냐, 영문이냐에 따라 완전히 다른 디자인이 나왔습니다.

특히 놀라웠던 점은 현지화 부분이었습니다. 예를 들어, 영어 프롬프트로 만든 결과물에는 Tax가 표시되지만, 한글 프롬프트로 만든 결과물에는 세금을 따로 표시하지 않았습니다. 또, 한글 프롬프트에서는 배송 주소가 표시되지만 영문 프롬프트를 썼을 때는 주소가 나타나지 않는 등 세세한 디테일에서 다른 부분이 눈에 띄었습니다.

AI가 하나의 모델로 학습하고 언어만 바꿔 결과물을 내는 방식이 아니라, 언어별로 학습하는 데이터와 소스가 달라 결과물도 다르게 나오는 것으로 보입니다. 즉, 앞으로 학습 모델이 고도화되면 로컬화 관련 한계는 의미가 없어질 수 있겠다는 생각이 들었습니다. 이미 지금도 로컬 특성을 반영하는 수준이 완성도가 꽤 높았거든요.

3. 프롬프트가 디테일할수록 결과물의 완성도가 높았다

어쩌면 당연한 얘기지만, 프롬프트가 상세하고 디테일할수록 AI가 만들어내는 결과물도 좋았습니다.

4. 특수 케이스(Case)나 프로세스 이해도는 많이 부족한 모습

AI가 별도 케이스와 프로세스를 이해하는 능력은 많이 부족했습니다. 이는 당분간 극복하기 어려울 것으로 보이고요.

한 가지 아쉬웠던 점은 챗GPT 같은 대화형 AI처럼 현재 결과물의 일부를 개선하거나 학습시키는 방식이 UX AI 툴에는 없다는 것입니다. 대부분 단순 프롬프트 입력에 따른 결과물만 제공하는 방식이라 현재 디자인에서 일부만 수정하는 것이 불가능했습니다. 게다가 프롬프트에서 단어 하나만 빠져도 디자인이 180도 달라지는 경우도 있었습니다. 아직은 안정적으로 결과물을 뽑아낸다기보다 ‘어디로 튈지 모르겠다’는 느낌이 강하달까요.

마치며: 총평

1년 전 UX 툴을 처음 접했을 때는 “그럼 그렇지, AI가 UX까지는 안 되지”라는 생각이 들었다면, 지금은 “그래도 제법 쓸 만한 결과물을 만드는구나” 하는 수준까지는 왔습니다. 한글 지원도 그렇고, 로컬 특성 반영도 그렇고, 1년 사이 꽤 많이 발전한 모습입니다.

물론 아직 UX 디자이너를 완전히 대체할 수 있는 정도는 아닙니다. 지금까지도 그렇고, 앞으로도 그럴 겁니다. UX 디자인이라는 것이 버튼 하나 딸깍해서 만들 수 있는 것은 아니니까요. 아무리 AI가 발전해도, UX 분야에서는 업무 효율을 높여주는 보조 도구 역할에 그칠 뿐, 메인이 되기는 어렵습니다. 결국 누군가는 판단하고 결정해야 하니까요.

그렇다고 UX 디자인이 AI의 위협에서 완전히 자유로운 것은 아닙니다. 지금의 AI도 신입 디자이너가 만들어낼 결과물 정도는 뽑아내니까요. 어떤 분야든 마찬가지겠지만, 그래서 ‘이제 신입을 뽑을 이유가 있나? AI를 잘 가르치면 신입만큼은 퍼포먼스를 낼 것 같은데.’라는 생각이 듭니다. 그러니 신입 디자이너의 취업을 향한 문은 점점 좁아지겠죠.

아, 물론 경력직이라고 안심할 수 있는 것도 아닙니다. 뾰족한 나만의 장점이 없다면 AI에 대체될 수 있으니까요.

돌고 돌아 결론은 같습니다. AI가 아무리 발전해도 UX 디자이너는 역할이 달라질뿐 없어지지는 않는다. 두 명이 할 일을 한 명이 하느냐, 어느 방식으로 역할이 바뀌느냐, 차이만 있을 뿐입니다.

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