콘텐츠로 이동

0010. 상태 표시줄은 Orca 디자인을 그대로 따르고, 사용량 등급에 유채색을 쓴다

Orca 상태 표시줄의 기능과 함께 디자인도 그대로 가져오려 한다. Orca는 사용량 팝오버의 막대와 퍼센트에 사용률 60% 이상이면 노랑, 80% 이상이면 빨강을 쓴다.

ADR 0002는 유채색을 세션 상태와 로고에만 쓰기로 정했고, 예외는 상태 표시줄의 연동 칩 하나였다. Orca의 색을 가져오면 이 규칙과 부딪힌다.

상태 표시줄과 거기서 뜨는 팝오버는 Orca 다크 테마의 치수와 색을 그대로 따른다. 사용량 등급색 두 개를 0002의 예외로 둔다.

토큰 값 Orca
--usage-warning #eab308 yellow-500
--usage-critical #ef4444 red-500
--surface-hover #404040 --accent (hover 면)
--status-bar-height 24px h-6

Orca 토큰 가운데 Belloga에 같은 값이 있는 것(--card, --muted, --muted-foreground, --border 등)은 Belloga 토큰을 쓴다. 글자체는 Belloga의 Pretendard를 그대로 쓴다.

  • 사용량 막대를 무채색으로 둔다. 0002를 지킨다. 그러나 Orca 디자인을 그대로 가져온다는 목표와 어긋나고, 한도에 가까운지를 색으로 알 수 없다.
  • 기존 색을 빌려 쓴다(--integration-partial, --danger). 토큰이 늘지 않는다. 그러나 --danger는 값이 다르고(#c42b1c), 뜻이 다른 상태가 같은 토큰을 쓰면 한쪽을 바꿀 때 다른 쪽이 따라 바뀐다.
  • 채택안: 값은 Orca와 같게, 이름은 뜻대로 따로 둔다. --usage-warning은 --integration-partial과 값이 같지만 따로 둔다.
  • Orca 글자체(Geist)도 가져온다. Geist는 한글을 담지 않고, 상태 표시줄만 다른 글자체를 쓰면 앱 안에서 어긋나서 기각했다.
  • 화면의 유채색 자리에 사용량 등급 둘이 더해졌다. 상태 표시줄의 작은 막대는 Orca처럼 무채색이고, 색은 팝오버 안에만 나온다.
  • 상태 표시줄 높이가 32px(--tab-bar-height)에서 24px로 줄었다. Orca에 없는 요약과 연동 칩도 같은 치수 체계(12px 글자, 12px 간격)에 맞췄다.
  • Orca의 굵기 500은 Belloga 굵기 토큰(400, 600, 700)에 없어서 팝오버 이름 자리에만 직접 쓴다.
  • 우클릭 메뉴는 네이티브 메뉴라 OS가 그리므로 Orca 모양을 따르지 않는다.