전역 UI 정돈 · Before → After · 2026-07-08
O!Right 전역 UI 정리안
각 항목을 현재(Before) → 표준(After) 미니 스냅샷으로 나란히 비교합니다. 왼쪽이 지금 앱, 오른쪽이 통일 후 모습입니다.
✅ 이미 반영: 글자 크기=OS 폰트 / 본문=진한색+Medium 기본 / 스크롤 안전화 / 🐛 text-danger→text-urgent(에러·만료 빨강 안 뜨던 버그 5곳, 아래 §6 · 이미 수정·배포).
High1. 카드 스타일 — radius·border·그림자 제각각
한 화면 안에서도 rounded-2xl(강조용)이 일반 카드에 남발돼 강조 의미가 희석. border 유무·두께도 뒤섞임.
● 현재 (제각각)
등급 카드
2xl · border 없음 · 그림자
자료실 방 카드
2xl(강조인데 일반) · p-md
→
● 표준 (2단계)
강조 카드 = 화면 주인공 1개만
2xl + p-lg + 그림자
일반 카드
xl + p-md + border, 그림자 없음
일반 카드는 전부 xl + p-md + border. 2xl+그림자는 화면당 딱 하나(등급·상세 헤더).
High2. 버튼 라벨 이모지 → Lucide 아이콘 ✅ 완료
Lucide 정식 채택 결정 → 전면 교체 완료. UI 아이콘용 이모지 ~65건을 24개 파일에서 lucide-react-native로. 버튼은 leftIcon API로, 아바타·상태·알림 아이콘도 Lucide. (주석·알림 메시지 텍스트 속 이모지는 카피라 유지)
● 현재
💬 채팅 열기
⭐ 평가 작성하기
📄 거래명세서 만들기
→
★결정 필요: 이모지 전면 제거(Lucide) vs 정식 허용 — 지금처럼 반반은 금지.
Medium3. 세그먼트 토글 2스타일 → 1개
같은 "탭 토글"인데 매칭 화면은 파랑 채움(44px), 서류 화면은 흰 카드(56px)로 완전히 다름.
하나의 Segment 컴포넌트로 통일 · 높이 56px(시니어 터치).
Medium4. 빈 상태 3종 → 1개
80px 원+중앙 / 아이콘만 / 좌측정렬 — 화면마다 다름.
→
● 표준 (공용 EmptyState)
아직 없어요
80px 원 + Lucide + 중앙 + xl로 통일
Medium5. 뒤로가기 — "← 뒤로" 글리프 → Lucide ChevronLeft
8개 화면이 텍스트 화살표 ←, role 화면만 Lucide. 이동표시도 › 글자 vs ChevronRight. 공용 ScreenHeader로 추출.
High6. 에러/만료 색 안 뜨던 버그 (text-danger) ✅ 수정됨
존재하지 않는 text-danger 토큰이라 색 미적용 → 만료·오류·삭제가 빨갛지 않고 본문색으로 렌더. 5곳 text-urgent로 수정.
● 현재(버그)
보험증권
만료 · 종료일은 시작일 이후여야 해요
→
● 수정 후
보험증권
만료 · 종료일은 시작일 이후여야 해요
Low~Med7. 위계 — 화면 제목과 카드 숫자가 같은 크기로 경쟁
text-h1이 제목과 카드 내 대형 숫자 양쪽에 쓰여 "주인공"이 흐려짐.
제목만 text-h1 독점, 카드 숫자는 text-h2로 한 급 낮춤.
Medium8. 시니어 터치 44px → 48/56
세그먼트·인재풀 초대·공개로 올리기·사업자 전환이 44px 또는 무지정. 장갑 현장엔 좁음.
📐 표준값 요약 위 비교의 기준 = 단일 진실
| 일반 카드 | rounded-xl + p-md + border (그림자 없음) |
| 강조 카드 | rounded-2xl + p-lg + shadow — 화면당 1개 |
| 카드 간격 | mt-md (섹션 그룹 mt-lg) |
| 제목 | text-h1 독점 · 카드 숫자 text-h2 |
| 아이콘 | Lucide만 · 버튼은 leftIcon · 이모지 결정 필요 |
| 뒤로/이동 | ChevronLeft / ChevronRight (공용 ScreenHeader) |
| 세그먼트·빈상태 | 공용 Segment·EmptyState 1개씩 |
| 목록 로딩 | SkeletonCard (ActivityIndicator는 버튼 내부만) |
| 터치 | 보조 48 / 표준 56 |
| 색상 | colors.* 토큰 (원시 hex 금지) · 에러=urgent |
🚀 착수 4선 — 체감 일관성의 80%
- 완료text-danger → text-urgent (§6) — 수정·배포됨
- 완료이모지 → Lucide 전면 교체 (§2) — Lucide 정식 채택, 24파일 배포됨
- 다음카드 radius/padding 표준화 (§1)
- 다음공용 ScreenHeader · EmptyState · Segment 추출 (§3·4·5, 복붙 제거)