6개의 방향을 탐색하고, 4개의 최종 후보를 비교하고, 하나를 선택하기까지. QA NOTE의 키컬러가 결정된 과정과 그 근거를 기록합니다.
시도하고 배운 것들
좋은 선택은 좋은 탈락에서 나옵니다. 아래는 실제로 프로토타입을 만들고 사용자 피드백을 거쳐 제외한 방향들입니다. 각각이 남긴 교훈이 최종 선택의 근거가 되었습니다.
QA의 '통과(pass)' 이미지와 연결했으나, 한국 시장에서 네이버의 그린과 겹쳐 브랜드 독립성 확보 불가.
색이 담는 의미보다, 시장에서 이미 점유된 색인지가 더 중요하다.
진짜 그린(hue 135-148)으로 이동했으나, 라이트 모드에서 네이버 연상 문제 동일. 다크 모드에서는 터미널 창 느낌.
그린 계열 전체가 한국 시장에서 QA 도구의 키컬러로 적합하지 않다.
Linear, Vercel 등 개발자 도구의 다크 테마를 참조했으나, QA 자체가 지루한 작업이라 '터미널 같은 진지함'이 역효과.
타겟이 개발자가 아닌 QA/PM/디자이너라면, 디자인 참조 대상도 달라져야 한다.
무채색 베이스에 액센트만 넣는 방식. 세련되지만 차갑고, '한 번 적용해볼까?'보다 '좀 무거운데?'라는 인상.
고급스러움과 접근성은 다른 축이다.
따뜻하지만 SaaS보다 커피 브랜드/식음료 느낌이 강함. B2B 제품에는 과한 캐주얼.
난색이라고 다 같은 온도가 아니다. 업종별 색상 연상이 존재한다.
차별적이지만 기존 SaaS 시장(Figma, Notion, Linear)에서 보라 계열이 과포화 상태.
차별화는 색 자체가 아닌, 색과 브랜드 성격의 조합에서 나온다.
4개 중 하나를 고르기까지
다크 테마를 버리고 라이트 퍼스트로 전환한 뒤, 난색(warm) 계열에서 4가지 후보를 프로토타이핑했습니다. 동일한 UI 위에 각 색을 올려 실제 사용감을 비교했습니다.
따뜻하면서 에너지가 있고, 개발 도구 시장에서 거의 사용되지 않는 색. '이게 QA 도구야?' 하는 의외성.
너무 부드러워서 CTA 버튼의 시인성이 떨어짐. 액센트로서의 힘이 부족.
단단하지만 어두워서 '가벼운 시작' 인상과 맞지 않음. 무게감이 과함.
독특하지만 핑크 계열이라 화장품/뷰티 업종 연상이 강함.
Warm Coral #E8624A를 고른 5가지 이유
개발 도구와 QA 도구 시장에서 코랄은 사실상 사용되지 않는 색입니다. 그린(GitHub, JetBrains), 블루(Jira, Linear), 보라(Figma, Notion) — 코랄은 이 레드오션에 없는 색입니다.
'QA 도구인데 이렇게 따뜻해?' 라는 반응 자체가 브랜드 기억의 앵커입니다. QA = 차갑고 기계적이라는 선입견을 깨는 색이 브랜드를 정의합니다.
코랄은 '경고'의 레드도, '정지'의 레드도 아닙니다. 에너지와 따뜻함이 공존하는 색으로, '한 번 써볼까?'라는 심리적 문턱을 낮춥니다.
밝은 배경 위에서 코랄은 시인성이 높으면서도 공격적이지 않습니다. 다크 모드 위의 네온 컬러와 달리, 눈이 편한 강조색입니다.
코랄은 Tint(#FFF0ED), Hover(#D4553E), Deep(#B8422E)으로 자연스럽게 확장됩니다. 상태 배지, 배경 강조, 다크 모드 대응까지 하나의 hue에서 해결됩니다.
"QA 도구인데 이렇게 따뜻해?"
그 의외성이 우리의 브랜드입니다.
5개 레이어로 구성된 토큰 시스템
모든 색상은 OKLCH 색공간에서 정의됩니다. OKLCH는 인간의 지각에 기반한 색공간으로, Lightness(밝기)·Chroma(채도)·Hue(색상) 세 축을 독립적으로 조절할 수 있어 일관된 대비비와 조화로운 팔레트 확장이 가능합니다.
코랄의 명도 스케일. 50(배지 배경)부터 900(다크 모드 텍스트)까지 6단계.
--coral--coral-deep--coral-tint--coral-bar면 기반 위계. border 대신 배경색 차이로 영역을 구분하는 핵심 시스템.
--canvas--panel--inset--chip--inset-deep--ink상태를 나타내는 기능적 색상. 브랜드 색과 독립적으로 운영.
--hairline--outline--panel-hover--month-out이슈 상태 전용 색상. Open = 코랄(브랜드), Resolved = 그린 등.
--status-open-bg--status-in-progress-bg--status-blocked-bg--status-fix-submitted-bg--status-verified-bg--status-closed-bg4단계 텍스트 위계. WCAG 2.1 AA 대비비 준수.
--text-1--text-2--text-3--text-4--text-5--text-6--text-7--text-8border 대신 면으로 구분하는 원칙
QA NOTE는 border가 아닌 배경색의 단계적 차이로 UI 영역을 구분합니다. 이 "면(Surface) 기반 디자인"은 시각적 노이즈를 줄이고, 콘텐츠에 집중할 수 있는 환경을 만듭니다. Surface의 Hue와 Chroma를 조절해 전체 앱의 온도감을 통제합니다.
--canvas#E8E6E3페이지 전체 배경. 가장 넓은 면적을 차지하므로 채도를 최소로.
--panel#FFFFFF카드, 모달, 팝오버의 배경. 배경보다 밝고 채도가 약간 낮아 면의 위계가 생김.
--inset#F6F4F1테이블 헤더, 호버 상태, 제브라 스트라이핑. 배경과 같은 밝기에 채도만 올려 구분.
--chip#F1EFEC선택된 항목, 활성 탭 배경. 가장 어둡고 채도가 높아 시각적 무게감.
Surface의 Hue(색상 방향)와 Chroma(채도)를 조절하면 앱 전체의 "온도"가 바뀝니다. 현재 기본값은 hue 264(쿨 그레이)이며, 코랄 키컬러와의 조화를 위해 웜 방향(hue 70~90)으로의 이동을 검토 중입니다. Chroma는 0.003~0.008 범위에서 미세 조절합니다.
색을 쓰는 규칙
모든 색상 값은 CSS 변수(--token)를 통해 참조합니다. 컴포넌트에 #E8624A를 직접 쓰지 않습니다. 테마 전환과 다크 모드 대응의 기반입니다.
HEX, HSL 대신 OKLCH로 통일합니다. 밝기(L)를 변경해도 지각적 색감이 유지되어, 명도 스케일 확장 시 일관된 인상을 보장합니다.
border 대신 Surface 레벨 차이로 영역을 나눕니다. 불가피한 경우에만 border를 사용하고, 그 색도 Surface 토큰에서 파생합니다.
코랄은 CTA 버튼, 상태 배지, 핵심 지표 등 '행동을 유도하는 곳'에만 사용합니다. 넓은 면적에 브랜드 색을 깔면 피로도가 올라갑니다.
텍스트와 배경의 대비비는 WCAG 2.1 AA(4.5:1) 이상을 보장합니다. OKLCH의 Lightness 값으로 대비비를 예측하고 관리합니다.
Success(그린), Warning(앰버), Info(블루)는 브랜드 리브랜딩에 영향받지 않는 독립 토큰으로 운영합니다. 의미가 색을 결정합니다.
키컬러가 정해지기까지의 여정
에메랄드 → 체크 그린. QA = 통과(✓)라는 1차원적 연결. 한국 시장에서 네이버 연상 문제 발견.
다크 테마의 '터미널 느낌' 문제 제기. QA가 지루한 작업이므로 진지함보다 가볍고 단단한 인상 필요. 그린 계열 전면 재검토.
타겟 재정의: Linear/Vercel이 아닌 Notion/1Password/채널톡. 4가지 색상 방향 탐색 (코랄, 차콜, 앰버, 바이올렛).
4개 최종 후보 중 Warm Coral #E8624A 확정. 브랜드 페이지 제작, 라이트 모드 토큰 시스템 구축.
키컬러와 배경색의 온도 조화를 위해 Surface hue를 쿨(264)에서 웜(70~90) 방향으로 탐색 중.
QA NOTE Color Story — Internal Design Documentation
이 문서는 브랜딩 의사결정의 맥락을 보존하기 위해 작성되었습니다.