택시 호출 서비스 · UI 디자인

설계 원칙

현장·이동 중 · 한 손 조작 · 음성 안내 병행을 전제로 합니다.

• 한눈에 단계 — 원형 허브 색만으로 대기(청록) / 듣기(녹색) / 호출(주황) / 완료(슬레이트)를 구분합니다.
• 터치 최소 면적 48px — 손가락·장갑·떨림을 고려한 버튼·입력 높이입니다.
• 최대 폭 520px — 모바일 단일 열 셸; 데스크톱에서도 가운데 정렬된 “앱 카드” 느낌을 유지합니다.
• 기사(접수)와 승객(호출) 색 분리 — 승객 측 청록·남색 계열, 기사 측 주황 계열로 시각적 역할을 나눕니다.
• 브랜드 — 공식 사이트와 동일하게 남색 #004e7c 를 축으로 씁니다.

색상 토큰

CSS 변수명은 taxi-call-demo.html 인라인 스타일과 대응합니다.

타이포그래피

본문: Pretendard. 숫자·전화번호는 가독성을 위해 굵게·충분한 행간.

원형 허브 · 상태

140×140px, 그라데이션 + 하단 8px “눌림” 그림자. :active 시 4px 내려가며 그림자 축소.

보조 버튼 · 칩

허브 외 이동·취소·전화는 직사각형, 최소 높이 48px.

입력(음성 실패 시)

기본은 음성·원버튼. 텍스트 폴백은 큰 필드·두꺼운 테두리.

어르신·고대비 모드

taxi-senior 및 ?senior=1 — 배경 #0a0a0a, 본문 밝은 회색, 강조 #fde047 / #fbbf24 테두리 4px.