Pleos 화면 원칙
현대자동차 Pleos 차량용 리블 앱의 원칙이에요. 운전 중에는 한눈에 읽고, 손보다 목소리를 먼저 써요.
개발 중
진행 방향 기준 왼쪽·오른쪽 단지 후보 - 개발용 에뮬레이터 화면이에요.
구조는 차량 앱처럼, 색은 리블로#
- 화면 구조·크기·글자 굵기는 차량의 기본 앱과 같은 규칙을 따라요. 같은 화면에 놓였을 때 어색하지 않게요.
- 색·주 버튼·선택 상태·로고·AI 그라디언트는 리블 웹과 같은 토큰이에요. 차량 앱의 색은 웹 토큰에서 그대로 생성해요.
- 카드와 그림자 대신 판 위에 바로 놓인 목록과 구분선을 써요.
한눈에 읽기#
- 굵기로 위계를 만들지 않고 크기와 색으로 만들어요. 아주 굵은 글자는 화면에 한 곳만 둬요.
- 작은 캡션도 대비 4.5:1을 넘기게 한 단계 진한 색을 써요.
- 글자는 웹의 약 두 배예요 - 본문 28dp, 제목 32-40dp(타이포그래피).
주행 중에는 줄여요#
- 1
주행 중에도 보이는 것
순서, 단지 로고, 이름, 상태, 길 안내 버튼.
- 2
정차하면 열리는 것
주소, 시세·거래 같은 자세한 숫자, 목록 편집과 상세 화면.
- 3
잠긴 것은 숨기지 않고 한 줄로
“주행 중에는 단지 정보를 숨겨요 · 정차하면 열려요”처럼 무엇이 잠겼는지 알려 줘요.
음성 먼저, 키보드는 나중#
- 입력의 주 동작은 음성이에요. 키보드는 정차 중 보조 수단이에요.
- 지금 맥락에 맞는 추천 칩을 두어 한 번 눌러 고르게 해요.
큰 누르는 칸#
- 버튼 높이 보통 80dp · 큰 100dp, 아이콘 버튼 80dp, 누르는 대상 사이 24dp 이상 - 누르는 영역.
- 창이 넓을 때(1200dp 이상)만 두 단으로 나눠요.