junetapa를 이루는 다섯 가지 색

CI 5색

색을 먼저 정하고 로고에 맞춘 것이 아닙니다. 로고 이미지의 픽셀을 직접 읽어 그라데이션의 시작·중간·끝과 J 글자색을 그대로 가져왔습니다. 카드를 누르면 HEX 값이 복사됩니다.

색이 나온 자리

Magenta J는 로고 한가운데 J 글자에서 가장 많이 쓰인 픽셀값 그대로입니다. Butter Cream · Blossom Pink · Orchid Light는 로고 바탕 그라데이션을 왼쪽 위에서 오른쪽 아래로 훑어 시작·중간·끝을 뽑은 값입니다.

다섯 번째 Deep Magenta만 계산으로 만들었습니다. 로고에서 뽑은 네 색은 전부 밝아서 흰 바탕에 글자로 올리면 하나도 읽히지 않기 때문입니다. J의 색상각(300.5도)과 채도(50.9%)는 그대로 두고 밝기만 낮춰, 로고와 같은 계열로 보이면서 글자로 쓸 수 있는 값을 찾았습니다.

색의 역할

색마다 쓰는 자리를 정해 두면, 다음에 새 화면을 만들 때 고를 일이 없어집니다.

구조는 단순합니다. 진한 두 색은 글자와 버튼, 밝은 세 색은 면입니다. 이 경계를 넘으면 바로 읽기 어려워집니다.

예외 하나 — 건강 카테고리의 청록

건강 카테고리는 #0D9488 청록을 씁니다. CI 5색에는 들어가지 않는 색이고, 앞으로도 건강 글에서만 씁니다.

이 색을 남겨 두는 이유는 두 가지입니다. 의료·건강 정보에서 청록 계열은 이미 신뢰 신호로 굳어져 있어 분홍 계열로 바꾸면 정보의 성격이 달라 보입니다. 그리고 이 색은 건강 글 17편에 이미 적용돼 있어, 바꾸려면 색만이 아니라 각 글의 배지·카드·콜아웃을 전부 손봐야 합니다. 얻는 것보다 흔들리는 것이 많습니다.

다른 카테고리로 번지지 않게 하는 것이 이 예외의 조건입니다. 건강 밖에서 청록이 보이면 그건 잘못 쓴 것입니다.

쓰는 방법

실제로 화면에 올라가는 조합입니다. 모두 명도 대비를 만족합니다.

로고 자산

바탕이 밝은지 어두운지에 따라 파일을 바꿔 씁니다.

logo-white.png기본형 · 모든 바탕에서 쓴다

어두운 바탕바탕이 밝은 로고라 그대로 얹힌다

브랜드 면 위같은 계열이라 테두리 없이 얹지 않는다

그라데이션

로고 바탕이 이미 그라데이션이라 면 단위로 확장할 때 자연스럽습니다. 다만 본문에는 쓰지 않습니다. 글을 읽는 면에 그라데이션이 깔리면 글자 대비가 자리마다 달라집니다.

명도 대비

색을 정할 때 실제로 계산한 수치입니다. WCAG 기준으로 본문 글자는 4.5 이상, 큰 글자(18pt 이상 또는 14pt 굵게)는 3.0 이상이어야 합니다.

파스텔 세 색은 흰 바탕에서 대비가 1.1~1.7입니다. 기준의 4분의 1 수준이라 글자로 쓰면 사실상 보이지 않습니다. 대신 먹 바탕 대비가 10을 넘습니다. 이 색들은 면으로 깔고 그 위에 먹색 글자를 올리는 것이 정해진 쓰임입니다.

쓰면 안 되는 것

규칙은 지킬 것보다 하지 말 것이 짧을 때 지켜집니다.