ChatGPT 실무 활용기 ③ 사용성 검증-개선방안까지

사용자 중심 UX 실무에 바로 쓰는 프롬프트 만들기

May 9. 2025

앞선 두 편에서는 '목적지 주변 주차 공간 정보 제공'이라는 서비스 컨셉을 가지고 ChatGPT를 활용해 문제 정의부터 HMW, 기능 아이디어 도출, PRD를 작성하고 Readdy를 활용해 MVP UI 화면까지 생성하였습니다.

이번 글은 연작의 마지막 이야기로, 생성한 UI화면의 사용성을 평가해 보고 문제점과 개선점을 확인하는 과정을 담았습니다.

실제 업무였다면 AI로 생성한 UI로 바로 평가하는 것이 아니라 추가 설계과 디벨롭 과정을 거친 후 테스트에 들어갔겠지만, 이번 실험은 AI를 최대한 빠르게 실무에 적용한다면?을 가정한 것이고, AI로 만든 화면은 다시 AI로 평가해 보는 것 자체도 흥미로울 것 같아 그대로 진행했습니다.

Clueify : 시선 추적 기반 사용성 평가 툴

사용성 검증에는 Clueify라는 AI 기반 사용성 평가 툴을 사용했습니다. 기기의 카메라를 활용한 실제 아이트래킹 대신, 시뮬레이션된 사용자의 시선 데이터를 AI가 예측해 주는 방식인데요, 별도 장비나 복잡한 설정 없이도 히트맵, 시선 흐름, 포커스 맵, 주의 영역 등 다양한 데이터를 바로 확인할 수 있는 점이 인상적이었습니다.

� 주요 기능

[AI 기반 시선 예측]
-디자인을 업로드하면 AI가 사용자가 어디를 먼저 보고, 어디에 오래 머무를지를 예측합니다.
-92%의 예측 정확도를 제공하며, 수백 명의 사용자 테스트를 대체할 수 있습니다.

[시각화 도구]
-히트맵(Heatmap): 사용자의 시선이 집중되는 영역을 색상으로 시각화합니다.
-포커스 맵(Focus Map): 사용자가 처음 5초 동안 주목하는 영역을 강조합니다.
-시선 흐름(Gazeplot): 사용자의 시선 이동 경로를 순서대로 표시합니다.
-관심 영역 분석: 특정 버튼이나 요소에 대한 주목도를 %로 확인할 수 있습니다.

[디자인 명확성 점수(Clarity Score)]
-디자인의 명확성을 100점 만점으로 평가하여, 개선이 필요한 부분을 객관적으로 파악합니다.

[A/B 테스트 지원]
두 가지 이상의 디자인 버전을 비교하여, 어떤 버전이 더 효과적인지 빠르게 분석할 수 있습니다.

[Figma, Adobe XD, Chrome 확장 프로그램 지원]
디자인 툴과의 연동을 통해, 별도의 스크린샷 없이도 직접 분석이 가능합니다.

출처) 요즘IT, clueify.com

Clueify에 이미지 업로드 시 한 가지 유의할 점은, 타깃 기기를 잊지 말고 잘 설정해야 하는데, 모바일/데스크톱 기기 세팅에 따라 스크롤 영역 포함 여부나 분석 데이터 값이 달라지기 때문입니다.

Readdy로 생성한 UI
→ Clueify로 사용성 검증하기

앞서 Readdy로 만든 7개의 MVP 화면을 Clieuify에 업로드하고, 분석 결과를 차근차근 살펴보았습니다.

홈 화면 평가 결과 예시

그리고 각 화면에 대한 분석 결과를 모두 이미지로 다운로드한 뒤, 다시 ChatGPT로 돌아가 후속 작업을 이어갔습니다.

ChatGPT와 함께 분석 리포트 작성하기

ChatGPT에서는 두 가지 프롬프트를 활용했습니다.

프롬프트 1 : 지금까지의 맥락 학습
#나는 "목적지 주변 주차 공간 정보 제공" 서비스를 기획 중인 UX 디자이너/PM이야. 지금 이 프로젝트를 위해 ChatGPT와 아래와 같은 내용까지 정리했어.
1. PRD (문제 정의, 기능 정의, UX 방향성, 차별화 분석 등)을 마크다운 형식으로 작성 완료
2. 7개 화면에 대한 MVP 화면 구성 리스트(Usser Flow 기반) 작성 완료
3. 2번을 기반으로 AI로 ui 화면 제작
4. 3번에서 제작된 화면을 또 다른 AI로 사용성 검증(Heatmap & Percentage of attention, Focus map, Gazeplot)
#먼저 1,2번 자료인 PRD와 MVP 화면 구성리스트를 순차적으로 첨부할 테니 먼저 학습해 줘.

원래는 기존에 MVP 화면 구성 리스트를 작성했던 채팅에서 이어서 진행하고 싶었으나, 대화가 길어지니 답변이 꼬이고 제대로 나오지 않기 시작했습니다.

그래서 새로운 대화에서 시작하기로 했고 위 프롬프트로 이전에 정리한 PRD와 7개 화면의 구조를 다시 학습시켜 맥락을 충분히 이해하고 다음 스텝을 진행할 수 있도록 했습니다.

[결과]

프롬프트 2 : Clueify 결과를 기반으로 한 사용성 분석
#mvp 기준으로 제작된 ui 화면의 사용성 검증 결과를 분석해야 해.

#화면 별 검증결과 이미지를 첨부했어. 제공된 이미지에는 아이트래킹 데이터를 포함한 사용자 행동 데이터가 포함되어 있어. (Heatmap & Percentage of attention, Focus map, Gazeplot) 아래 사항을 중심으로 개선 방안을 정리해 줘.
- 사용자 시선 흐름 분석: 시선 집중 구역과 사용자가 놓치는 영역을 식별
- UI/UX 문제점 도출: 사용성 문제, 혼란스러운 요소, 클릭/탭 빈도가 낮은 UI 요소 분석 - 개선 방향 제안: 데이터 기반으로 UI를 개선할 수 있는 구체적인 방안 제안
- A/B 테스트 추천: 추가적인 실험이 필요한 부분과 테스트할 가설 제시

#분석 형식
- 분석 결과 요약 (표 또는 리스트)
- 주요 문제점 및 개선 방향 (각 문제에 대한 구체적인 해결책 제시)
- 향후 테스트 제안 (A/B 테스트, 사용자 인터뷰 등)

#위에 정리해 줬던 7개 주요 화면에 대한 "MVP 화면 구성 리스트 (User Flow 기반)"에 위 3가지 분석 결과를 포함해 줘 업데이트해줘.
#기존 MVP 화면 구성 리스트의 내용 : 포함 정보 및 구성 요소, 매칭되는 HMW, 필요 기술 및 데이터 연동, 검증할 수 있는 UX 경험 목표
#화면 이미지 내 "명확성 통찰력" 점수는 첨부된 이미지 중 "선명도 범위" 표를 참고해 줘.

위 프롬프트로 결과적으로 ChatGPT는 각 화면에 대한 다음 항목을 종합적으로 분석해 줬습니다.

시선 흐름 요약 (집중/비집중 영역)

주요 문제점과 개선 제안

향후 테스트 시나리오(A/B Test, 인터뷰 제안 포함)

Clarity Insight 점수 기반 비교

[결과]

좋았던 점, 아쉬웠던 점

이번 단계를 수행하면서 느낀 점은 이랬습니다.

좋았던 점

1) 분석 → 개선 → 재검증 사이클을 짧은 주기로 빠르게 반복 가능하다는 점이 인상적이었고, 쿠팡처럼 데이터 기반 UX/UI 개선이 필요한 조직이라면 상당한 속도 이점이 생길 수 있겠다고 느꼈습니다.

2) 기획자나 개발자가 초기 아이디어만 갖고 있을 때, 디자이너와의 협업 전 미리 구체적인 UI 구조나 설계 요구 조건을 잡아보는 용도로도 매우 유용해 보였습니다.

아쉬운 점

1) 실제 실무에서 다루는 화면은 훨씬 복잡도가 높은데, 복잡도가 높은 UI에서도 동일한 퀄리티의 사용성 분석이 가능할지는 아직 미지수입니다.

2) Clueify가 예측 정확도 92%라고 주장하지만, 개인적으로는 결과 해석의 신뢰도에 아직 의문이 있습니다. 전문가 입장에서 “진짜 사용자였으면 이렇게 봤을까?” 하는 감이 드는 결과도 있었거든요. 이 툴 자체에 대한 신뢰도 검증 또한 향후 필요한 과제라고 생각합니다.