brunch

매거진 UX 디자인의 모든 것

라이킷 93 댓글 5

You can make anything
by writing

C.S.Lewis

계정을 잊어버리셨나요?

by UX 컨설턴트 전민수 Sep 29. 2016

Color Scheme Interface 4원칙

UX 디자인 배우기 #42

Today UX 아티클

Design4Users 에 게재된 Marina Yalanska의 글 Color Schemefor Interface. Light or Dark UI)를 소개하고자 합니다.

UI 디자인에서 컬러는 가장 중요한 이슈 중 하나라고 합니다. 웹사이트나 모바일 앱의 매력도 뿐만 아니라 사용성 수준에 엄청난 영향을 미칠 수도 있다고 합니다. 때문에 디자이너들이 답해야 하는 첫 번째 질문 중 하나가 ‘전반적으로 어떤 컬러 스킴(color scheme)을 선택할 것인가’로, 즉 어두운 배경에 밝은 포인트를 쓸지 혹은 밝은 배경에 어두운 포인트를 쓸지 결정하는 것이죠. 이 글에서는 이 선택을 할 때 고려해야 할 주요 요소들에 대해서 언급하고 있습니다.

선택에 영향을 미치는 측면

컬러 스킴 선택에 대하여 많은 토론이 이뤄지고 있고, 많은 사람들이 보편적인 해결책을 내놓으려고 노력하지만, 이 글의 저자는 만병통치약은 존재하지 않는다고 주장합니다. 모든 UI/UX 프로젝트는 개별적이기 때문에 각각의 장단점을 심사숙고하여 결정해야 한다고 합니다. 다음 몇 가지 핵심 측면을 고려하여 선택하면 된다고 합니다.

명확성(Clarity)

스크린 혹은 페이지의 모든 필수 세부 사항을 유저가 명확하게 보고 구분할 수 있게 해주는 것이라고 합니다. 컬러 스킴 및 조합은 유저가 쉽고 직관적으로 원하는 것을 찾을 수 있게 해 주고, 레이아웃에서 가장 기능적인 요소를 효과적으로 눈에 띄게 만들어야 한다고 합니다. 이를 확인하는 방법으로 널리 쓰이는 수단은 “번짐 효과(blur effect)” 테스트입니다. 번짐 효과를 적용한 스크린이나 페이지를 봤을 때 중요한 모든 부분을 쉽고 빠르게 발견할 수 있는지 확인하는 테스트입니다.

번짐 효과(blur effect)

가독성(readability)

스크린 배경 선택은 일반적으로 가독성, 즉 유저가 텍스트를 쉽게 읽을 수 있는지에 영향을 미친다고 합니다. 특히 텍스트가 중심이 되는 웹이나 앱에서 가장 먼저 고려되어야 하는 측면이라고 합니다. 텍스트를 읽는 데 상당한 노력을 기울이지 않는다면 유저는 중요한 데이터를 놓칠 수 있고, 아무리 매력적인 제품이라도 유저가 구매하지 않게 되는 중대한 이유가 된다고 합니다.

접근성(accessibility)

UI/UX 디자인 분야에서 접근성은 주로 얼마나 많은 사람이 제품을 이용할 수 있는지로 정의된다고 합니다. 즉, 제품을 “쓸지 쓰지 않을지”는 유저의 니즈와 희망에 따라 결정되어야지, 물리적 기능이 이유가 되면 안 된다는 뜻이라고 합니다. 배경이나 레이아웃 요소의 색도 접근성을 고려해서 결정해야 한다고 합니다.

반응성(responsiveness)

앱 화면이나 웹페이지를 디자인할 때는, 유저가 다양한 디바이스에서 제품을 사용할 것이라는 점을 기억해야 한다고 합니다. 고해상도의 전문가용 모니터에서는 잘 보이는 것도 작은 저해상도 스크린에서는 지저분해 보일 수 있다고 합니다. 때문에 모든 프로젝트를 진행할 때 다양한 디바이스와 다양한 해상도에서 디자인이 어떻게 보이는지 확인해봐야 한다고 합니다. 컬러 스킴 또한 여기에 큰 영향을 미친다고 합니다.

환경(environment)

적절한 컬러 스킴과 배경 유형을 선택하기 위해서는 유저가 제품을 규칙적으로 자주 사용하는 잠재적 환경을 고려해야 한다고 합니다. 자연광 아래서 자주 사용한다면, 어두운 배경이 반사 효과를 많이 일으키는데 특히 태블릿이나 스마트폰처럼 광택이 있는 스크린에서는 더 심하다고 합니다. 반면, 빛이 거의 안 드는 환경에서는 어두운 배경을 쓰면 탐색과 가독성에 안 좋은 영향을 미친다고 합니다.

컬러 스킴을 선택 시 적용 원칙

다음은 전반적인 컬러 스킴을 선택할 때 따르면 되는 기본적인 체크리스트입니다.

원칙1. 제품의 목표를 명확히 정의한다

유저의 문제를 해결해주는 제품의 중요한 포인트가 무엇인지 정의하는 것이 가장 중요하다고 합니다. 이를 알아야 어떤 종류의 콘텐츠가 중심이 되는지 판단할 수 있다고 합니다.

만일 텍스트가 중심이 되는 블로그 앱이나 e-리더기라면, 엷은 색(lightcolor)을 배경색으로 선택하는 것이 더 낫다고 합니다. 엷은 배경을 사용하면 더 쾌활하면서도 널찍해 보이는 느낌을 주어 텍스트에만 집중하는 것이 보다 쉬워진다고 합니다.

온라인 잡지

블로그 앱

하지만, 시각적인 것이 중심이 되고, 텍스트보단 이미지가 많은 경우에는 어둡거나(dark) 밝은(bright) 배경색을 인터페이스에 사용하면 이미지의 색이 더 깊이 있어 보이고, 전반적인 레이아웃이 스타일리시해 보이거나 심지어 럭셔리하게 보일 수도 있다고 합니다.

건축회사 웹 사이트

해산물 레시피 웹사이트

원칙2. 타깃 오디언스를 분석한다

디자이너가 효과적인 디자인 솔루션을 내기 위해서는 첫 번째로 타깃 오디언스(target audience)를 정의하고 분석해야 한다고 합니다. 중년 혹은 나이가 드신 분들은 밝은 배경의 인터페이스를 더 좋아한다고 합니다. 보다 직관적이고 탐색하기 쉽기 때문이라고 합니다. 젊은 사람들은 배경이 어두워도 태스크를 잘 수행할 수 있다고 합니다. 10대와 어린아이들은 밝은 배경이나 재미있는 디테일이 들어간 인터페이스에 매력을 느낄 것이라고 합니다. 분명 배경 컬러 스킴은 제품 자체의 기능성이나 콘텐츠에 따라서 달라지겠지만, 타깃 오디언스의 전형적인 선호도 또한 효율적인 의사 결정에 도움이 되는 단서라고 합니다.

소셜 네트워크앱

도서 교환 앱

이커머스 웹사이트

원칙3. 경쟁사를 조사한다

한 가지 더 기억해야 할 점은 시장에서 여러분이 만든 제품만 보이는 것이 아니라는 점이라고 합니다. 거대하고 역동적인 경쟁 속에서 보일 것이기 때문에 군중 속에서 제품을 눈에 띄게 만들고 유저 입장에서 가장 먼저 이용해 보고 싶게끔 만드는 컬러 스킴을 선택해야 한다고 합니다. 기본 제품을 조사하는 데 들이는 시간은 비효율적인 솔루션을 선택했다가 다시 디자인하는 데 걸리는 시간과 노력을 확 줄여줄 것이라고 합니다.