현재 배포 버전 기준 UI 개선 제안 + 근거
| 카테고리 | 점수 | 변화 | 핵심 이슈 |
|---|---|---|---|
| 접근성 | 2/10 | → | aria-label 0개, 대비 미달 79곳 |
| 터치 | 5/10 | → | 체크원 16px, Rec 항목 12px |
| 시각 품질 | 6/10 | ↑ | Inter+DM Sans 적용, 감정 컬러 개선 |
| 정보 설계 | 7/10 | → | 홈 콘텐츠 과다 (9개 섹션) |
| 로딩 경험 | 3/10 | ↓ | "불러오는 중..." 텍스트 11곳 |
| 일관성 | 5/10 | → | 인라인 스타일 346개, 토큰 미사용 |
| 데이터 시각화 | 5/10 | ↑ | 감정 컬러 적용, 차트는 여전히 바만 |
현재 문제: 홈에 9개 섹션이 한 화면에 나열됨 (날씨 → Insight → Today → Routine → Tomorrow → Day After → Yesterday → Recommendation → Todo). 스크롤이 매우 길고, 핵심 정보를 찾기 어려움.
근거: Apple HIG content-priority — "Show core content first on mobile; fold or hide secondary content". Material Design에서도 정보 밀도가 높으면 스캔 능력이 떨어진다고 권고.
제안:
필수 (접힘 없이):
- 날씨 + Daily Insight
- Today + Routine
접힘 가능 (탭하면 펼침):
- Tomorrow / Day After / Yesterday
- Recommendation
- Todo
또는 Tomorrow/Day After/Yesterday를 기록 탭으로 이동.
현재 문제: 11곳에서 "불러오는 중..." 텍스트만 표시. 페이지 로드 시 홈 전체가 "불러오는 중..."으로 채워져서 레이아웃 시프트(CLS) 발생.
근거: UX Pro Max §3 progressive-loading — "Use skeleton screens / shimmer instead of long blocking spinners for >1s operations". Apple HIG도 콘텐츠 형태를 유지한 플레이스홀더를 권장.
제안:
Before: "불러오는 중..."
After: ░░░░░░░░░░░░ (회색 블록이 콘텐츠 형태로 깜빡임)
스켈레톤은 실제 콘텐츠와 같은 높이/폭으로, animate-pulse 적용.
현재 문제: 체크 원 16px, Recommendation 세부 항목 12px. Apple HIG 최소 44px 미달.
근거: UX Pro Max §2 touch-target-size — "Min 44×44pt. Extend hit area beyond visual bounds if needed." 작은 터치 타겟은 오탭률 증가와 사용자 좌절감 유발.
제안: 시각적 크기는 16px 유지, 행 전체(min-height: 44px)를 터치 영역으로 확장.
현재 문제: 보조 텍스트/라벨에 #b3b3b3 사용 79곳. 흰 배경 대비 2.6:1 (WCAG AA 기준 4.5:1 미달, 대형 텍스트 기준 3:1도 미달).
근거: UX Pro Max §1 color-contrast — "Minimum 4.5:1 ratio for normal text". §6 color-accessible-pairs — "Foreground/background pairs must meet 4.5:1 (AA)".
제안: #b3b3b3 → #6B7280 (대비 4.6:1) 또는 최소 #808080 (대비 4.5:1).
현재 문제: aria-label, role 속성이 앱 전체에서 0개. 스크린리더 사용자는 앱을 전혀 사용할 수 없음.
근거: UX Pro Max §1 aria-labels — "aria-label for icon-only buttons". voiceover-sr — "Meaningful accessibilityLabel; logical reading order".
제안: 최소한의 접근성 — 하단 탭, 체크 버튼, 입력 필드에 aria-label 추가.
현재 문제: style={{...}} 인라인 스타일이 346곳. 디자인 토큰이 코드에 분산되어 일괄 변경 불가.
근거: UX Pro Max §4 consistency — "Use same style across all pages". §6 color-semantic — "Define semantic color tokens, not raw hex in components."
제안: 단계적으로 Tailwind 클래스 또는 CSS 변수로 전환. 우선 컬러와 간격부터.
현재 문제: 하단 탭이 텍스트만으로 구성 (홈/하루/기록/설정). 아이콘 없이 텍스트만 있으면 빠른 스캔이 어려움.
근거: UX Pro Max §9 nav-label-icon — "Navigation items must have both icon and text label; icon-only nav harms discoverability." Material Design Bottom Navigation 가이드라인.
제안: 각 탭에 간단한 SVG 아이콘 추가 (텍스트 위에 아이콘 배치).
🏠 💬 📊 ⚙ ← 아이콘 (SVG)
홈 하루 기록 설정 ← 텍스트
현재 문제: 하루 탭 헤더가 position: fixed인데, 채팅 첫 메시지가 헤더 뒤에 가려질 수 있음. paddingTop: 100px으로 추정값 사용.
근거: UX Pro Max §5 fixed-element-offset — "Fixed navbar/bottom bar must reserve safe padding for underlying content." §5 scroll-behavior — "Avoid scroll content obscured by sticky headers/footers."
제안: 헤더 높이를 동적으로 측정하여 정확한 패딩 적용. 또는 sticky + overflow 구조로 전환.
현재 문제: 기록 탭 날짜 피커에서 "오늘"이 파란 점으로만 표시. 스크롤하면 오늘 위치를 잃기 쉬움.
근거: UX Pro Max §9 nav-state-active — "Current location must be visually highlighted." 날짜 피커에서 현재 위치 인식은 핵심 UX.
제안: "Today" 버튼을 더 눈에 띄게 (고정 위치 또는 플로팅 버튼). 오늘 날짜에 "오늘" 텍스트 표시.
현재 문제: Week/Month 차트에 데이터가 없으면 빈 공간만 표시. 차트 높이 0px로 사라짐.
근거: UX Pro Max §8 empty-states — "Show helpful message and action when no content." §10 empty-data-state — "Show meaningful empty state, not a blank chart."
제안:
Before: (빈 공간)
After: "아직 데이터가 없어요. 하루에게 오늘 수면을 기록해보세요."
[하루 탭으로 이동]
현재 문제: 수면 바 차트에서 블루=7h+, 그레이=미달을 알 수 없음. 사용자가 컬러 의미를 추측해야 함.
근거: UX Pro Max §10 legend-visible — "Always show legend; position near the chart." §1 color-not-only — "Don't convey info by color alone."
제안: 차트 하단에 간단한 범례 추가.
● 7시간 이상 ○ 7시간 미만
현재 문제: 기록 Today에서 "저장" 버튼이 페이지 맨 아래에 있어서, 상단 건강 데이터를 입력한 후 스크롤 내려야 저장 가능. Memo/Daily Review는 저장 버튼이 있지만, Health 입력은 각각 개별 OK 버튼.
근거: UX Pro Max §8 form-autosave — "Long forms should auto-save drafts to prevent data loss." 긴 폼에서 저장 버튼이 멀면 데이터 유실 위험.
제안: 건강 데이터도 입력 즉시 자동 저장 (현재 OK 버튼 방식 유지하되, "저장" 버튼은 Memo/Daily Review 전용으로 명확히 분리).
현재 문제: "Good Morning"이 useEffect에서 한 번만 계산. 오래 열어두면 오후에도 "Good Morning" 표시.
근거: 시간 기반 UI는 현재 시각과 일치해야 함. 불일치는 신뢰도 저하.
제안: 1시간마다 시간대 재체크. 또는 탭 포커스 시 재계산.
현재 문제: paddingBottom: env(safe-area-inset-bottom, 0px) 적용되어 있지만, 아이폰에서 홈 인디케이터와 탭이 너무 가까울 수 있음.
근거: UX Pro Max §2 safe-area-awareness — "Keep primary touch targets away from gesture bar and screen edges."
제안: safe-area 외에 추가 8px 패딩 확보.
현재 문제: 51곳에서 0.55~0.65rem 사용 (약 8.8~10.4px). 모바일에서 매우 작음.
근거: UX Pro Max §5 readable-font-size — "Minimum 16px body text on mobile." §6 라벨은 12px 이상 권장.
제안: 최소 폰트를 0.7rem(11.2px)으로 상향. 섹션 라벨(SCHEDULE 등) 0.6rem → 0.7rem.
| 등급 | # | 개선 | 예상 시간 |
|---|---|---|---|
| P0 | 4 | #b3b3b3 대비 개선 | 30분 |
| P0 | 3 | 터치 타겟 44px | 30분 |
| P0 | 15 | 최소 폰트 0.7rem | 20분 |
| P1 | 2 | 스켈레톤 로딩 | 1시간 |
| P1 | 1 | 홈 콘텐츠 접힘 | 1시간 |
| P1 | 7 | 하단 탭 아이콘 | 30분 |
| P1 | 10 | 빈 데이터 메시지 | 30분 |
| P1 | 11 | 차트 범례 | 20분 |
| P2 | 5 | aria-label 추가 | 2시간 |
| P2 | 6 | 인라인→토큰 전환 | 3시간+ |
| P2 | 8 | 하루 헤더 높이 동적 | 30분 |
| P2 | 9 | 날짜 피커 개선 | 30분 |
| P2 | 12 | 저장 버튼 정리 | 20분 |
| P2 | 13 | 시간대 재체크 | 15분 |
| P2 | 14 | safe-area 패딩 | 10분 |
*평가 기준: UI/UX Pro Max Quick Reference §1~§10*
*평가 방법: 배포 HTML 분석 + 코드 정적 분석*
*작성일: 2026-05-07*