brunch

매거진 디자이너 어디까지 해 봤니

라이킷 105 댓글 3

You can make anything
by writing

C.S.Lewis

계정을 잊어버리셨나요?

by 하기로 Dec 02. 2021

디자이너가 컬러 코드를 자꾸 바꾸는 이유

일부러 그러는 것은 아닙니다!

업로드 주기가 2주를 넘어가면 브런치에서 '작가님의 꾸준함이 재능이 되어 어쩌구 저쩌구' 경고 알람이 옵니다. ~~빨리 글을 써 이 자식아!~~ 그런 의미겠죠?

거북이처럼 글을 쓰고 있습니다. 여기에는 '건강'이라는 개인적인 이유가 좀 있어요 ㅠ.ㅠ 그래서 짧은 글이라도 써야겠다 싶어 브런치에 들어왔습니다. 짧은 글 소재로 뭐가 좋을까 고민하던 중, 예전에 개발자님에게 들었던 질문에 대한 답을 제 주관적인 관점에서 풀어 보려고 합니다.

디자이너는 컬러 코드를 왜 이렇게 자주 바꾸는 거죠?

저와 함께 일을 했던 상황은 아니기에, 정확히 어떤 상황에서 디자이너가 컬러 코드를 바꿔!댓!는지 앞 뒤 상황을 알기는 어려웠습니다만, 예측해 볼 수는 있었습니다.

01. 디스플레이/툴마다 색감이 다른 경우

컬러 코드를 바꾼다는 것은 이미 퍼블리싱이 돼서 여러 디바이스에서 색상 테스트를 하는 상황을 가정할 수 있습니다. 우선, 컬러는 디자인 과정 처음부터 끝까지 지속적으로 수정(이라 쓰고 테스트라고 정의함) 할 수밖에 없는데요.

디스플레이는 물론이고 툴마다 미묘하게 컬러가 다르기 때문입니다. 같은 RGB 문서라도 색상을 읽는 방식에 따라 큰 차이가 발생하므로 어떤 툴에서는 채도가 쨍하고 어떤 툴에서는 탁하게 보이게 됩니다. 탁한 색인 줄 알고 채도를 올려서 디자인했더니 실제 웹에서는 눈이 너무 아픈 색이 되어 있거나 그 반대의 경우도 있습니다. 어도비 툴에서 색상을 동일하게 맞추는 방법은 어도비 브릿지를 사용하면 어느 정도 해결되지만 어차피 다른 툴, 다른 디스플레이에서 해당 컬러 코드는 또 '다르게' 보이기 때문에 큰 의미는 없습니다. 예전에는 비싼 캘리브레이션 장비를 구비해 디자이너의 모니터 색감을 정확하게 교정하기도 했다지만 글쎄요, 디자이너의 모니터를 완벽에 가깝게 구현한다고 한들 그 완벽한 컬러 코드가 모든 장비에서, 모든 사람에게 동일하게 전달되기란 불가능에 가깝다고 생각됩니다. ~~이런 이유로 디자이너가 반드시 맥을 써야 할 이유도 사실 없~~

같은 컬러코드, 왼쪽 : 툴 - 오른쪽 : 웹

고전 짤

따라서 디자이너가 할 수 있는 최선의 방법은 멀티 디바이스를 크로스 체크하며 '적당한 채도와 명도의 중간값'을 찾아내는 일인데, 이 과정에서 아무래도 눈에 걸리는 색상이 발견되면 코드를 변경할 수밖에 없는 것이죠. 사실 디자이너에게도 아주 인내심을 요하는 일입니다.

02. 가독성이 격하게 떨어지는 경우

웹 표준을 지키도록 노력하자

Contrast Finder, 웹 접근성 기준(WCAG)에 적합하도록 명암이 충분히 대비되는 색의 조합 검색

Contrast-Finder는 웹 접근성 기준(WCAG)에 적합하도록 명암이 충분히 대비되는 색의 조합을 찾아줍니다. 그래서 색의 명암비와 관련된 웹 접근성(a11y) 테스트를 충족시키는 데 도움을 드립니다. Contras

app.contrast-finder.org

이 경우는 주변에서 요청이 들어와서 변경하는 경우가 더 많은 것 같습니다. 왜인지 이유는 불분명하지만 디자이너는 진한 텍스트 색상보다는 옅은 색을 선호하는 경우가 많습니다. 왜긴 왜야 더 세련되어 보이기 때문이죠.

멋부림과 가독성의 줄다리기에서 균형을 잘 잡아야 합니다. 너무 옅은 텍스트 색상은 제대로 읽히기 어렵습니다. 특히 작은 텍스트일수록 더 짙은 색을 사용해야 합니다. 그렇다고 텍스트마다 내키는 대로 컬러 코드를 사용하면 안 되겠죠? 텍스트는 화이트를 포함하여 최대 5가지 색상을 사용하길 권장하지만 뎁스(하이어라키)는 최대 3개로 제한합니다.

1 뎁스 - 블랙 / 화이트 / 포인트 컬러 (타이틀과 본문, 포인트 텍스트)

2 뎁스 - 미들 그레이 (서브 타이틀, 인포메이션 텍스트)

3 뎁스 - 라이트 그레이 (비활성화 텍스트)

*여기서 포인트 컬러는 텍스트 전용 포인트 컬러를 만드는 것이 좋습니다. > 이 이야기는 아래에서 자세히*

03. 면적이 다른 경우

왼: 큰 면적에 맞춘 경우 / 오: 텍스트에 맞춘 경우

사실 이 파트가 이 글을 쓰게 된 가장 큰 동기입니다.

사용되는 면적의 비율에 따라 전체적인 느낌이 달라진다는 사실, 알고 계셨나요?! 넓은 면적에 채도와 명도를 맞추게 되면 텍스트의 가독성이 떨어지고, 반대로 텍스트의 가독성에 맞추게 되면 기대한 것보다 탁해 보이는 이미지가 됩니다. 따라서 넓은 면적의 포인트 컬러 / 작은 면적의 포인트 컬러를 나눠서 사용할 것을 권장해요. 색상 테스트를 할 때도 마찬가지입니다. 넓은 면적과 작은 면적 모두를 커버할 수 있는 딱! 적절한 중간값을 찾아야 합니다.

컬러 테스트를 한다고 무턱대고 컬러 코드를 바꿔대면 피로도가 쌓이겠지요? 요즘은 컬러 스타일을 등록한 후 코드만 바꿔주면 시안에 전체 적용이 되니 퍼블리싱하기 전에는 마음껏 바꾸어도 되지만, 개발자에게 넘기기 전 웬만하면 확정을 짓도록 합시다.

좋은 습관 만들기

01. 컬러 가이드를 정립한다

컬러 가이드, 다들 만들고 계시죠? 기본적인 것이니만큼 별도의 UI 라이브러리 파일은 꼭 만들도록 합시다. 때로는 가이드만 만들고 컬러 스타일 지정까지는 안 하는 경우도 있는데(그거슨 과거의 나), 그렇게 작업이 진행되면 나중에 본인만 피를 보게 됩니다. 컬러 및 이펙트 스타일은 반드시 지정 (라이브러리화)하도록 하고, 작업할 때는 직접 코드를 입력하거나 스포이드를 찍는 일이 없게 합니다.