새로 고른 색이 아니라, 로고에서 꺼낸 색

CI 5색

이전 — 로고와 무관한 보라 계열, 페이지마다 제각각. 지금 — 로고 파일에서 그대로 꺼낸 다섯 값. 그라데이션 시작·중간·끝, 가운데 J 글자색. 카드 클릭 = HEX 복사.

색이 나온 자리

Magenta J — 로고 한가운데 J의 최빈값 그대로. Butter Cream · Blossom Pink · Orchid Light — 로고 바탕을 왼쪽 위에서 오른쪽 아래로 훑어 시작·중간·끝에서 하나씩. 네 색 모두 만든 값이 아니라 원래 로고에 있던 값.

다섯 번째 Deep Magenta만 직접 만든 색. 로고에서 꺼낸 네 색을 흰 바탕에 글자로 올려 본 결과 — 하나도 안 읽힘. 그렇다고 아무 진한 색이나 쓰면 로고와 남남. 조건은 하나 — J의 색상각(300.5도)·채도(50.9%)는 그대로, 밝기만 낮추기. 그 지점이 #9A3299.

색의 역할

색만 정하고 자리를 안 정하면 또 제각각. 그래서 색마다 쓰는 자리 고정. 새 화면은 고민 없이 여기서 가져다 쓰기.

외울 것은 하나. 진한 두 색은 글자와 버튼, 밝은 세 색은 면. 경계를 넘겨 파스텔로 글자를 써 본 결과 — 화면에서 거의 안 보임.

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

건강 카테고리 전용 #0D9488 청록. CI 5색 밖의 색이고, 쓰는 자리는 건강 글 하나.

분홍으로 바꿀지 한참 고민한 색. 그냥 둔 이유 둘. 하나 — 건강 정보에서 청록은 이미 신뢰의 신호라, 분홍으로 바꾸면 글의 성격까지 달라 보임. 둘 — 건강 글에 이미 다 적용된 색이라 교체하려면 배지·카드·콜아웃까지 전부 손봐야 함. 그렇게까지 해서 얻을 게 없다는 판단.

예외의 조건 — 다른 카테고리로 번지지 않기. 건강 밖에서 청록이 보이면 잘못 쓴 것.

쓰는 방법

눈으로 괜찮아 보여도 재 보면 미달인 조합이 있음. 계산해서 통과한 것만 남긴 목록.

로고 자산

로고 파일은 하나. 바탕이 밝은 로고라 어두운 화면엔 그대로 얹기. 문제는 오히려 밝은 면 위.

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

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

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

그라데이션

로고 바탕이 원래 그라데이션이라 큰 면으로 늘려도 자연스러움. 다만 글 읽는 자리에는 금지 — 면이 이어지면서 같은 글자색이라도 위아래 대비가 달라짐.

명도 대비

감으로 정하지 않으려고 하나씩 계산한 값. 기준(WCAG) — 본문 글자 4.5 이상, 큰 글자(18pt 이상 또는 14pt 굵게) 3.0 이상.

표에서 가장 눈에 띈 것 — 파스텔 세 색. 흰 바탕 대비 1.1~1.7로 기준의 4분의 1도 안 됨. 글자로 쓰면 안 보이는 게 당연. 반대로 먹 바탕에서는 10 이상. 글자가 아니라 면으로 깔고 그 위에 먹색 글자를 올리라는 뜻.

쓰면 안 되는 것

한 번씩 해 보고 안 되겠다 싶었던 것들. 다음에 또 하지 않으려고 적어 둔 목록.