BILLABLE · 의뢰인 예약·결제 화면 · 디자인 3종

의뢰인 '예약 안내·예약금 결제' 화면 시안 3종

의뢰인이 카카오 알림톡 링크로 처음 마주하는 메인(랜딩) 화면입니다. 완전히 다른 3가지 느낌으로 제안하되, 세 시안 모두 동일한 내용·데이터(방문상담·김민수·30만원·예약금 5만원)를 담아 직접 비교할 수 있고, 검증된 UI/UX 규칙을 공통 반영했습니다.

📱 모바일 우선🔒 결제 버튼 옆 안전결제 표시♿ WCAG AA 대비

세 시안에 공통 반영한 UI/UX 규칙 (웹 리서치 기반)

Nielsen시스템 상태 가시성 — 진행 스텝퍼(예약→상담→결제) Nielsen현실 언어 — "예약금은 상담료에서 공제" Nielsen기억 최소화 — 일시·금액 화면에 노출 Nielsen오류 예방 — 취소·환불 규정 결제 전 고지 Hick선택지 최소 — 단일 강조 CTA Fitts하단 고정 큰 버튼(엄지 영역)·터치 44px+ Miller정보 청킹 — 4묶음 그룹화 Baymard비용 100% 투명 — 상담료·VAT·예약금 공제 Trust보안 배지·변호사 자격을 결제 지점에 심미성일관 타이포·60-30-10 색 = 신뢰
출처: Nielsen Norman Group(10 Usability Heuristics) · Laws of UX(Hick·Fitts·Miller·Jakob·심미적-사용성 효과) · Baymard Institute(체크아웃 UX) · 결제·법률 서비스 Trust Signals 리서치
전체 화면 ↗
A

클린 미니멀

Clean Minimal · 핀테크풍 절제

화이트 베이스에 넉넉한 여백, 단색 블루 1색 액센트. 군더더기 없이 굵기 위계로만 구조를 표현해 한 화면 한 초점을 유지합니다.

  • 여백 기반 정보 청킹 · 완벽 정렬
  • 단색 블루 단일 강조 CTA(Hick)
  • 심미적-사용성 효과로 빠른 신뢰
🖥 전체 화면으로 보기
전체 화면 ↗
B

따뜻한 가이드형

Warm & Friendly · 친근한 안내

크림·소프트그린에 큰 라운드와 대화체 카피("예약금은 상담료에서 빼드려요"). 법률이 낯선 일반 의뢰인도 손잡고 안내받듯 편안합니다.

  • 대화체 현실 언어로 불안 해소
  • 스텝퍼·단계 안내 강조(시스템 상태)
  • 큰 터치 타깃·둥근 카드(Fitts)
🖥 전체 화면으로 보기
전체 화면 ↗
C

프리미엄 권위형

Premium Authority · 로펌 격조

딥네이비·골드에 명조 제목으로 권위와 전문성을 시각화. 변호사 자격·보안 배지를 결제 지점에 우아하게 배치해 신뢰를 보강합니다.

  • 명조+산세리프 대비로 격조·위계
  • 변호사 자격·Trust signal 강조
  • 묵직한 골드 단일 CTA(Hick)
🖥 전체 화면으로 보기