0002. 화면 크롬은 무채색으로 두고 유채색은 세션 상태와 로고에만 쓴다

• 상태: 채택
• 날짜: 2026-09-22
• 관련: tokens.css

맥락

색의 출처가 둘로 갈려 있었다. 표면과 글자는 VS Code의 기본 다크 테마에서 가져왔고, 강조색만 그와 무관한 민트(#00d4aa)를 따로 두었다. 두 출처가 섞여 있어 새 화면을 더할 때 어느 쪽을 따라야 하는지가 매번 판단 거리가 됐다.

더 큰 문제는 강조색이 걸린 자리였다. 버튼과 탭 밑선과 포커스 링과 체크박스와 커밋 단추까지 열두 곳에 같은 민트가 쓰였고, 에이전트 세션의 상태 점도 같은 색이었다.

여러 워크트리에서 도는 세션을 한눈에 감독하는 것이 이 앱의 차별점인데, 그 표시가 버튼·탭과 같은 세기로 경쟁했다. 화면에 민트가 열 군데 넘게 있으면 그중 하나가 “지금 이 창이 사람을 기다린다”를 뜻해도 눈에 먼저 들어오지 않는다.

참고한 Orca는 --accent(hover 표면)와 --ring(포커스·선택)만 무채색으로 두고 상태 표시에는 유채색을 따로 둔다. 소스 주석에도 그 방침이 적혀 있다.

Mixed from --ring (the token for active selection) rather than an invented accent

결정

유채색은 세션 상태와 로고에만 쓴다. 나머지 화면 크롬은 무채색으로 두고, 강조가 필요한 자리는 색이 아니라 밝기로 만든다.

자리	색
세션 상태 (작업 중 / 권한 대기)	--status-working #d4a300 / --status-waiting #f97316
타이틀 바 로고	--brand #00d4aa
변경의 종류 (추가 / 수정 / 삭제)	--diff-add / --diff-mod / --diff-del
버튼과 체크박스	--accent #e5e5e5 바탕에 --accent-fg #171717 글자
고른 것 (탭, 설정 항목, 파일 줄)	--surface-selected #353535 바탕
입력이 가는 칸의 고른 탭	--fg-strong (다른 칸은 --border-strong)

표면과 글자와 테두리 값은 Orca의 다크 테마에서 가져왔다. 터미널은 이 체계 밖에 있다. 셸이 내보내는 ANSI 색은 앱이 정한 위계가 아니라 프로그램이 정한 의미라, 색상표를 따로 두고 사용자가 고른다.

근거 / 검토한 대안

• 민트를 UI에도 그대로 두기: 브랜드색이 화면 전체에 흐르지만, 색이 섞여 있다는 원래 문제가 남고 상태 표시와 강조가 계속 같은 색을 다툰다.
• 민트를 로고에만 남기고 상태 점도 무채색으로: 가장 단순하지만 유휴(#a1a1a1)와 작업 중이 둘 다 회색이 되어 구분이 사라진다. Orca의 --ring(#737373)을 쓰면 유휴보다 어두워 위계가 뒤집히기까지 한다.
• 채택안: 크롬에서 유채색을 걷어내되 상태에는 남긴다. Orca도 --agent-question(에이전트가 물어봄)과 --workspace-status-progress(진행 중)를 따로 두고 있어, 그 값을 그대로 가져왔다.

표면 단계 사이의 지각 밝기 차를 3.5로 고르게 맞추던 원칙은 버렸다. Orca 값은 가장 뒤의 면만 5만큼 떨어지는데(#0a0a0a → #171717), 캔버스를 깊게 두어 그 위의 면이 떠오르게 하는 의도다. 네 단계를 고르게 벌리는 것보다 어느 것이 바탕인지가 분명해진다.

결과

• 화면에서 눈에 띄는 색은 세션 상태 점 둘과 로고, 그리고 변경 종류 셋뿐이다. 워크트리가 여럿일 때 어느 창으로 가야 하는지가 색으로 바로 갈린다.
• 버튼이 밝은 회색 바탕에 어두운 글자가 되어, 이전의 민트 버튼보다 차분하지만 대비는 오히려 높다(14.2:1).
• 포커스 링은 예외로 --accent를 쓴다. 접근성 장치이고 화면 전체가 같은 링을 써야 해서, 설정 안이라고 다르게 두지 않았다.
• 에이전트 연동 상태 점도 예외로 유채색을 쓴다(2026-09-24 추가, 2026-09-28 상태 바의 칩에서 설정 화면으로 옮김, 0012). 켜짐은 --integration-on(초록), 일부만 켜짐은 --integration-partial(노랑)이다. 두 상태가 무채색 하나로 보이면 앱을 올린 뒤 훅을 다시 설치해야 하는지 알 수 없어서다. 세션 상태 색을 빌려 쓰지 않고 따로 둔 것은 “훅이 설치됐다”와 “Claude가 작업 중이다”가 같은 색으로 보이지 않게 하기 위해서다.
• 상태 바의 사용량 등급(노랑, 빨강)도 예외로 유채색을 쓴다(2026-09-28 추가). 상태 바는 Orca 디자인을 그대로 따르기로 했다. 자세한 것은 0010에 있다.
• 서른두 개 색 조합의 대비를 재어 본문 기준(4.5)과 비텍스트 기준(3)에 미달하는 것이 없음을 확인했다. 가장 여유가 적은 것은 흐린 글자를 고른 줄 바탕에 올린 4.75와 탭 밑선을 떠오른 면에 올린 3.19다.
• 라이트 테마를 얹을 때는 이 여섯 역할에 대응하는 값만 한 벌 더 정하면 된다. 간격과 글자와 치수는 테마와 무관하다.