brunch

라이킷 15 댓글 4

You can make anything
by writing

C.S.Lewis

계정을 잊어버리셨나요?

by 다양 Jun 20. 2016

색 고르는 거 좀 도와주세요

자동으로 색상 추천하는 도구 만들어보기

글을 시작하며

이 글은 디자이너와 개발자가 함께 만든 도구에 관한 이야기입니다. 여기에서는 디자인에 중심을 두었고, 다음 글은 구현 방법에 중심을 두었습니다. 두 글 모두 재밌게 봐주세요 :)

※ 유의사항 : 이 글에 나온 프로젝트는 임의로 만든 프로젝트입니다.

배경

어플에 들어가는 아이콘을 만들어야 한다고 생각해보자.

아이콘은 한 화면에서만 쓰이는데, 이 화면에서는 여러 가지 책을 사용자에게 보여주고 사용자는 그중 한 가지를 선택하는 구조다. 책 종류는 자주 업데이트되는데 문제는 책 표지 이미지가 있을 때도 있고 없을 때도 있다는 것이다.

그래서 이미지가 없는 책은 대표 아이콘을 사용하게 된다.

<어플 화면 예시>

먼저 주요색은 파랑으로 정해져 있다. 그런데 책 표지 색상은 너무 다양하기 때문에, 아이콘은 주요색과 비교했을 때 너무 튀지 않는 색상을 사용해야겠다고 결정했다.

어려운 문제는 그다음에 있었다. 그럼 대체 어떤 색을 써야 하는 것일까.

최대한 많은 색을 대입해보며 깊게 고민해보고 싶었지만 나는 어디서부터 시작해야 할지 갈피를 잡을 수 없었다. 결국 시간을 쪼개 색을 하나하나 대입해가며 결론을 지었다.

재미로 시작한 프로젝트였지만, 왠지 앞으로도 이런 일들이 즐비할 것 같다는 생각이 들었다. 그러던 와중에 우리 집 개발자가 색상을 추천하는 Tool을 만들어보자는 제안을 했다. 늘 시간에 쫓기는 디자이너들을 위해 색상을 추천해주는 도구가 있으면 좋겠다는 생각이 들었다. 그 도구가 정답을 말해줄 수는 없겠지만 조금이라도 고민을 줄여줄 수 있다면 좋겠다는 생각을 했다.

이렇게 우리 집 개발자와 함께 색상 추천 도구를 가내수공업으로 만들어 보기로 했다.

목표 설정

사용자가 주요색을 입력하면 그와 어울리는 색을 추천해주는 도구 만들기

<자동으로 색을 추천해주는 도구>

실험

# 실험 1

가장 먼저 고민해야 할 사항은 어울리는 색을 "어떻게" 추천할 것인가이다. 자동으로 색을 추천해주려면 그 나름의 법칙을 가지고 있어야 한다. 이 법칙은 어떻게 만들면 좋을까.

이를 위해 기본으로 다시 돌아가기로 했다. 색채 이론에 나오는 기본적인 배색 원리에는 몇 가지가 있다.

<기본적인 배색 원리>

이번 과제에서는 화면에 랜덤한 이미지가 들어오는 구조였고, 화면에 넣었을 때 너무 튀지 않는 색상을 사용한 아이콘을 만들고 싶었다. 그래서 주요색과 비슷한 색을 활용하기 위해 Analogous colors 기법을 활용해보기로 했다.

<주요색과 가까운 색을 활용하는 Analogous colors>

주요색을 포토샵에서 입력하고 여기에서 Hue를 조금씩 바꿔서 색 2가지를 선택해보았다.

# 실험 1의 결과

Analogous colors라는 기본에 충실해 색을 골랐는데, 고른 색들은 서로 비슷하다는 느낌이 많이 들지 않았다. 어울린다는 느낌이 들다가도 다시 들여다보면 분명 느낌이 다른 색들이었다.

왜일까?

열심히 구글링 한 결과, HSV나 HSB 색체계의 한계를 알게 되었다.

먼저, 사람이 인식하는 색과 전자장비가 인식하는 색에 차이가 있다. HSV와 HSB는 전자장비가 측정한 수치로 색을 체계화 한 색체계인데, HSV와 HSB에서 색상의 값을 일정하게 조절해가며 비교해보면, 사람의 눈에는 색이 일정하게 변한다고 보이지 않는다는 것이다.

# 실험 2

그 후 CIE-LCH 색체계를 알게 되었다. LCH는 각각 Luminance(Lightness라고 하는 문서들도 많아서 아직 확실치 않다), Chroma, Hue를 기본으로 하는 색체계이며 각각 광원, 채도, 색상을 나타낸다. LCH의 특징은 HSV, HSB와 다르게 사람이 인지하는 색을 기본으로 한다는 점이다.

이론만으로는 이해하기가 쉽지 않으니 직접 대입을 해서 눈으로 결과를 보기로 했다.

<HSB와 LCH를 기반으로 색을 변화시켜 본 결과>

위는 같은 빨강에서 시작해서 색을 변화시켜 본 결과이다.

하나는 HSB를 사용해서 S와 B를 고정시키고 H를 변화시켜가며 만든 색들이고, 아래는 LCH를 사용해서 L과 C를 고정시키고 H를 일정하게 변화시켜 만든 색들이다.

LCH 색체계를 통해 나온 색들도 일단 완벽하진 않지만 HSB보다는 안정적으로 색이 변화함을 알 수 있다. HSB는 연두에 가까워질수록 색상 간의 차이점을 인지하기가 힘들어진다.

그래서 이 LCH 색체계를 바탕으로 다시 한 번 주요색을 입력해보았다.

확실히 이전 색상들보다는 훨씬 자연스럽다. 이제 이 색상들을 아이콘에 적용해보자.

# 실험 2의 결과

< ... >

... 색상은 어울리지만 아이콘 전체의 형태를 한 눈에 파악하기란 불가능에 가까운 일이다! 그래서 다른 방법을 강구해야 했다.

# 실험 3

실험 2를 통해 알게 된 배색 방법의 문제점은 명도가 서로 비슷하다는 것이었다. 그래서 이번에는 명도에 변화를 넣어서 색을 자동으로 추천해보기로 했다. 실험 2에서 나왔던 색 1과 2의 명도를 변화시키는데, 색 1의 명도를 낮추고 색 2의 명도를 높여서 색의 단계를 만들어 보고, 반대로 색 1의 명도를 높이고 색 2의 명도를 낮춰서 또 색의 단계를 만들어 본다. (설명은 어렵지만 아래 그림으로 보면 이해하기가 쉽다.)