☰ 분류

분류

모바일 UI/UX 분석 프롬프트

모바일 앱 스크린샷과 집중할 맥락을 넣으면 디자이너, 엔지니어, 사용자 관점에서 문제와 개선 제안을 정리합니다.

분류디자인 › 화면·제품 설계
태그분석검토개발자
프롬프트 (영어 본문 · 답은 한국어로 옵니다)
Act as a UI/UX Design Analyst. You are an expert in evaluating mobile application interfaces with a focus on maximizing visual appeal and usability.

Your task is to analyze the provided mobile app screenshot and offer constructive feedback from multiple perspectives:

- **Designer**: Analyze the visual elements and suggest design improvements.
- **Engineer**: Evaluate the technical feasibility of design choices.
- **User**: Provide insights from a user experience perspective, identifying potential usability issues.

You will:
- Identify design inconsistencies and suggest enhancements.
- Assess alignment with UI/UX best practices.
- Provide actionable recommendations for improvement.

Rules:
- Focus on clarity, intuitiveness, and visual harmony.
- Consider accessibility standards.
- Be objective and constructive in your feedback.

Use variables:
${context} - Additional context or specific areas to focus on.

어떤 프롬프트인가

앱 화면의 시각적 일관성, 사용성, 구현 가능성을 함께 검토할 때 적합하다. 접근성 기준과 객관적 피드백을 고려하지만, 입력은 주로 스크린샷에 의존한다.

모델 비교

ChatGPT는 자료 한계를 명시해 가장 정확하고 실용적이다. Gemini는 구체적이나 추정과 장황함이 있고, [C]는 답이 없다.

ChatGPT종합 1위
44/ 50

＋ 이미지 부재를 밝히고 근거 있는 진단을 했다.

－ 실제 화면 요소별 시각 분석은 할 수 없었다.

Gemini
36/ 50

＋ 세 관점과 실행·검증안을 폭넓게 제시했다.

－ 보이지 않는 화면을 추정하고 분량도 과도하다.

기준ChatGPTGemini앞선 모델
지시 준수99동점
정확성96ChatGPT +50%
구체성98ChatGPT +13%
구성·가독성98ChatGPT +13%
분량 적정성85ChatGPT +60%

gpt-5.6-sol가 모델 이름을 가린 채 1~10점으로 채점했습니다 (2026-09-25). 측정값이 아니라 AI 심사 결과입니다.

답 전문 보기

같은 입력을 세 모델에 넣어 받은 답을 그대로 옮겼습니다. 각 CLI(에이전트 하네스)에서 실행했습니다. ChatGPT·Claude 앱이나 웹에서는 답이 다를 수 있습니다.

넣은 입력
[붙여 넣은 자료]
[스크린샷: 쇼핑앱 '마켓나우' 장바구니 화면]

컨텍스트: 20~30대 여성 타겟 패션 커머스 앱입니다. 최근 장바구니 화면을 리뉴얼했는데 결제 전환율이 리뉴얼 이전보다 12% 하락했습니다. 결제 버튼 위치와 쿠폰 적용 UI 흐름이 특히 우려되니 그 부분을 집중적으로 봐주세요.
gpt-5.6-luna (codex CLI · 에이전트 하네스) · 실행일 2026-09-24

현재 대화에는 실제 스크린샷 이미지가 표시되지 않아, 화면의 정확한 색상·컴포넌트·배치까지 단정할 수는 없습니다. 다만 장바구니 개편 후 결제 전환율이 12% 하락했고, 결제 버튼과 쿠폰 흐름이 우려된다는 전제에서 다음을 우선 점검해야 합니다.

핵심 진단

가장 가능성 높은 문제는 다음 두 가지입니다.

  1. 결제 버튼이 상품·쿠폰 정보보다 시각적으로 약하거나, 스크롤 후 쉽게 사라진다.
  2. 쿠폰 적용 과정이 결제 직전의 추가 과업으로 느껴져 이탈을 만든다.

장바구니에서는 사용자가 “얼마를 내는지”와 “어떻게 결제하는지”를 빠르게 확신해야 합니다. 이 두 정보가 화면 하단에 분산되거나 계속 이동하면 전환에 불리합니다.

디자이너 관점

결제 버튼

  • 결제 버튼은 화면의 가장 강한 CTA여야 합니다. 상품 삭제, 옵션 변경, 쿠폰 적용 버튼과 동일한 시각적 무게를 가지면 안 됩니다.
  • 하단 고정 영역에 배치하되, 상품 목록과 결제 요약을 가리지 않도록 충분한 하단 여백을 확보해야 합니다.
  • 버튼 문구는 결제하기보다 총 82,000원 결제하기처럼 최종 결제 금액을 포함하는 편이 명확합니다.
  • 할인 적용 후 금액이 버튼과 결제 요약에서 동일하게 표시되는지 확인해야 합니다.
  • 고정 버튼이 상품 선택 상태와 연동되어야 합니다. 일부 상품만 선택했는데 전체 상품 금액이 버튼에 표시되면 신뢰가 크게 떨어집니다.
  • 비활성 상태라면 이유를 함께 표시해야 합니다. 예: 상품을 선택해 주세요, 최소 주문 금액 30,000원.

쿠폰 UI

  • 쿠폰 선택을 별도 화면으로 강제하면 사용자가 결제 흐름을 이탈했다고 느낄 수 있습니다.
  • 결제 요약 영역에 쿠폰 적용과 적용 가능한 쿠폰 3장을 함께 표시해 혜택을 발견하기 쉽게 해야 합니다.
  • 쿠폰 적용 후에는 쿠폰 적용 완료 · -5,000원처럼 결과를 즉시 보여줘야 합니다. 단순히 변경만 표시하면 적용 여부가 불명확합니다.
  • 적용 가능한 쿠폰이 없을 때도 사용 가능한 쿠폰 없음과 함께 조건을 안내해야 합니다.
  • 여러 상품에 서로 다른 쿠폰이 적용되는 구조라면, 상품별 쿠폰인지 주문 전체 쿠폰인지 명확히 구분해야 합니다.
  • 쿠폰 선택 후 결제 버튼 위치나 금액 영역이 갑자기 이동하지 않도록 레이아웃을 고정해야 합니다.

엔지니어 관점

  • 결제 버튼은 position: fixed 또는 하단 고정 컨테이너로 구현하되, iOS safe area와 키보드 노출 상태를 처리해야 합니다.
  • 고정 CTA가 마지막 상품이나 결제 금액을 가리지 않는지 실제 기기에서 확인해야 합니다.
  • 쿠폰 적용은 화면 전환보다 바텀시트가 적합할 가능성이 높습니다. 선택 후 원래 장바구니 위치와 스크롤 상태가 유지되어야 합니다.
  • 쿠폰 적용, 상품 선택, 수량 변경, 배송비 변경 후에는 총액을 단일 상태에서 재계산해야 합니다. 화면별로 금액을 별도 계산하면 불일치가 생길 수 있습니다.
  • 쿠폰 적용 중 로딩 상태를 제공하고, 중복 탭을 방지해야 합니다.
  • 금액 변경 시 스크린리더가 할인 금액과 최종 결제 금액 변화를 읽을 수 있어야 합니다.
  • 고정 버튼은 최소 터치 영역 44×44pt 이상을 확보하고, 텍스트 대비는 WCAG AA 수준을 충족해야 합니다.

사용자 관점

사용자는 다음 질문에 즉시 답을 얻어야 합니다.

  • 무엇을 결제하는가?
  • 최종 금액은 얼마인가?
  • 쿠폰을 적용하면 얼마가 할인되는가?
  • 지금 보이는 결제 버튼을 누르면 어떤 상품이 결제되는가?

다음 상황이 있으면 이탈 가능성이 높습니다.

  • 결제 버튼이 화면 최하단에 있지만 스크롤할 때 사라짐
  • 버튼에는 주문하기만 표시되고 최종 금액은 위쪽에 따로 있음
  • 쿠폰을 적용하기 위해 장바구니를 벗어남
  • 쿠폰 적용 후 할인 금액이 한눈에 보이지 않음
  • 선택 상품과 전체 상품의 금액 범위가 불명확함
  • 쿠폰을 적용했는데 결제 금액이 즉시 바뀌지 않음
  • 배송비·할인·적립금이 복잡하게 나열되어 최종 금액을 찾기 어려움

우선순위가 높은 개선안

  1. 하단 고정 CTA를 총 결제금액 + 결제하기 구조로 통일
  2. 결제 요약 안에 쿠폰 상태와 할인 금액을 직접 노출
  3. 쿠폰 선택을 바텀시트로 제공하고, 적용 후 장바구니 위치 유지
  4. 선택 상품 수·상품 금액·쿠폰 할인·배송비·최종 금액의 관계를 명확히 정리
  5. 버튼이 콘텐츠를 가리지 않도록 safe area 및 하단 padding 적용
  6. 쿠폰 적용 전후의 금액 변화에 애니메이션 또는 명확한 갱신 피드백 제공

검증 방법

A/B 테스트는 다음 세 가지 안을 비교하는 것이 좋습니다.

  • A안: 기존 UI
  • B안: 하단 고정 총액 포함 결제하기 버튼
  • C안: B안 + 결제 요약 내 인라인 쿠폰 적용

주요 지표는 결제 전환율뿐 아니라 다음 단계별로 분해해서 봐야 합니다.

  • 장바구니 진입 → 상품 선택
  • 상품 선택 → 쿠폰 화면 진입
  • 쿠폰 화면 진입 → 쿠폰 적용 완료
  • 쿠폰 적용 완료 → 결제 버튼 탭
  • 결제 버튼 탭 → 결제 완료

특히 쿠폰 화면 진입 후 이탈률과 쿠폰 적용 후 결제 버튼 탭률이 이전 버전보다 악화됐는지 먼저 확인하는 것이 좋습니다.

같은 분류의 프롬프트

7대7 축구 팀 앱 설계 프롬프트
접근성 감사자 역할을 맡기는 프롬프트
접근성 감사자 역할 프롬프트
접근성 전문가 역할 프롬프트
접근성 테스트 워크플로 프롬프트