[CSS] 개발자를 위한 가시성(visibility) 올리는 디자인 꿀팁! (두가지 컬러 조합 추천 사이트 + 크롬 개발자도구 Contrast 참고 방법)

 

 

디자인 백그라운드가 없는 개발자들에겐 디자이너의 서포트 없는 개인 작업은 굉장히 어렵게 느끼질 수 있다. 특히, 개인 프로젝트를 만들어야 할 때 아무리 아이디어가 좋아도 디자인이 영 이상하다면 그 누구도 좋게 보지 않을 것이 뻔하기 때문에 디자인에 대한 부담은 배로 다가올 수밖에 없다. 그러다보면 각종 특이한 것들을 마구잡이로 가져다가 쓰게 될 수가 있는데, 강약조절에 실패한 디자인은 정말 보는 이의 마음을 아프게 한다. 예를 들면...

 

 

이런거라던가

이런거라던가...

아님 이런거라던가;;;;

 

 

 

 

 

 

2가지 컬러 조합 추천 사이트

 

이런 무시무시한 경우를 최대한 피하기 위해서 여러 조언들을 찾아보셨을탠데, 그 조언들 중 자주 들었던 것 중에 너무 여러 색깔을 한번에 사용하지 말라는 것도 분명히 있었을 것이다.

 

그래서 이번에 아주 좋은 색깔 조합 사이트 하나를 추천하려고 한다. 2 Color Combinations이라는 사이트다.

링크: 2colors.colorion.co/

Two Color Combinations

 

본 사이트는 2가지 컬러 조합들을 쫘아악~ 추천해준다. 아주 다양한 조합들이 있으며, 이중 원하는 것을 선택해서 사용하면 된다. 두가지 컬러 조합을 서로 배경 컬러, 글씨 컬러로 바꾸어서 보여준다. 그 가운데에 있는 동그란 아이콘을 클릭하면 아이콘의 색깔의 hex가 복사된다.

 

 

2 Colors Combination 사이트의 메인 화면

 

 

 

뿐만 아니라, 사이트의 오른쪽 상단 메뉴를 클릭하면 더 다양한 디자인 예시들을 보고, 참고하여 사용할 수 있는 다른 사이트로 연결이 된다.

 

 

 

이 부분 말이다

 

Gradient Buttons로 들어가면, 아래와 같이 여러 그레디에이션이 적용된 버튼들을 볼 수 있다. 버튼에 마우스를 올려보면 hover 이펙트를 확인할 수 있으며, 각 버튼의 오른쪽 하단 체크표시가 된 파일 아이콘을 누르면 해당 버튼의 CSS가 복사된다.

 

오른쪽 하단 아이콘을 클릭하면 CSS가 복사된다.

 

 

 

 

크롬 개발자 도구 Contrast 확인하기

그 외에, 자신이 직접 선택한 컬러를 사용했을 때 글씨가 잘 보이는지 확인하고 싶을 수 있다. 이때 유용하게 사용할 수 있는 기능이 크롬 개발자 도구에 있다. 개발자 도구를 열면, 아래와 같은 모습을 볼 수 있다.

 

여기서 저 노란 동그라미가 표시된 아이콘을 클릭한다.

 

 

그리고 대비(contrast) 가 잘 되는지 확인하고 싶은 부분에 마우스를 올리면...

 

 

이런 성적표(?)가 나오는 것을 확인할 수 있다. 여기서 주요하게 봐야할 부분이 "Accessibility"라고 쓰인 부분 아래에 있는 "Contrast"이다. 지금 위 예시의 경우를 보면 Contrast는 11.3으로, 아주 준수한 점수를 받은 것을 볼 수 있다. 즉, 지금 이 백그라운드와 글씨 색깔 조합은 눈에 아주 잘 보인다는 것이다.

 

반면 가시성이 별로인 경우엔 어떻게 나올까? 아래 예시를 보자. 아래 예시는 연한 회색 바탕에, 나름 그것보단 진한 회색 글씨가 들어간 화면의 성적표(?)이다.

 

 

Contrast를 보면, 위 첫번째 예시보다 확연히 낮은 3.88이라는 점수에, 오른쪽에 경고의 의미로 물음표!!도 붙어있다. 얼른 바꾸라는 뜻이다.

 

조그마한 팁을 하나 더 드리자면, 시선을 끌고자 하는 부분에 더 높은 Contrast를 준다면 유저들의 시선을 그리로 유도할 수 있을 것이다. 개발자 도구를 잘 사용하여 contrast를 조정해보자.

 

만약 내 프로젝트가 보기 좋은지, 글씨는 제대로 보이는지 등을 스스로의 눈으로 믿을 수 없을 경우엔 이렇게 크롬 개발자 도구의 도움을 받는 것도 좋다. 또한, 색깔 조합이 어려울 땐 최소한의 개수의 컬러를 사용한다는 원칙을 기반으로 2 Colors Combinations같은 사이트를 사용하는 것도 좋은 방법일 것이다.