brunch

라이킷 110 댓글

You can make anything
by writing

C.S.Lewis

계정을 잊어버리셨나요?

by 김규리 Mar 12. 2017

Visual 일관성에 접근하기

Human eye를 위한 웹 UI 디자인

번역) UX Pin의 허락을 받고 기재하는 포스팅입니다. Special Thanks to Joey !

인간은 시각에 예민합니다.

동물계와 비교하면 우리의 다른 감각들은 약간 부족합니다. 그래서 우리는 우리 주변의 세계를 평가, 접근하고 이해하는데 시각에 많이 의지합니다. Google은 사용자가 웹 사이트를 판단하는 데 약 50milliseconds 밖에 걸리지 않는다고 판단하여, 시각적 상호 작용은 일반적으로 가장 강력하고 (가장 오래 지속되는) 상호 작용이라고 말합니다.

Source: “ETUX225: Figure 13.13.” Rosenfeld Media. Creative Commons.

이번 챕터에서 왜 시각적 일관성이 그토록 중요한지, 일관성을 위한 몇가지 기준을 설명하고 실제 디자인 사례들을 통해 살펴보도록 하겠습니다.

시각적 일관성이 UI 디자인에 중요한 이유

우리 감각에서 시각은 지배적이므로 인터페이스에서 시각적인 것들은 인터렉션에 있어 가장 큰 영향을 끼칠 것 입니다. 데이터 저널리스트 David McCandless는 Interaction Design Best Practices에서 몇 가지 요점을 되풀이하기 위해 TED Talk에서, 대다수의 두뇌 파워가 눈에 들어 오지만 대부분 잠재 의식이 있음을 설명합니다.

"시각적 감각은 정말 빠릅니다. 그것은 컴퓨터 네트워크와 동일한 대역폭을 가지고 있습니다. USB처럼 꽂는 순간 하드디스크의 생산량처럼 당신은 듣고 냄새를 맡고 그리고 나서 당신은 올드한 취향을 가지는데 포켓 계산기의 처리량과 거의 같습니다. 우리가 실제로 자각하는 양은 0.7퍼센트입니다. 그래서 당신의 많은 비전- 그것의 대부분은 시각적이며 쏟아져 나오고 있습니다. 무의식적으로요."

(무의식적으로 받아들이는 시각적인 요소가 정말 많고 빠르다는 걸 설명하는 것 같습니다. 대화체라 번역하기가 힘드네요 죄송합니다)

왜 이런 것이 웹 UI디자인에서 중요할까요?

비주얼 디자인이 사용자의 잠재의식에 많은 영향을 미치기 때문에, 사이트는 가장 먼저 친숙해야합니다. 사용자가 새로운 디자인을 만났을 때 그들은 오직 이전의 경험을 바탕으로 짧은 판단을 합니다. Google's original research 에서 말하듯이, 직감은 시각적 디자인(계층 구조, 라인 간격, 폰트 등등)에만 영향을 받습니다.

심플하고 친숙한 웹사이트가 사용자들이 머무르게끔 한다고 구글은 말합니다. 친숙한 디자인일지라도 디자인이 복잡하면 복잡할수록 사용자들은 예쁘지 않다고 생각합니다. 마찬가지로, 친숙하지 않지만 심플한것을 봐도 심미성이 떨어진다고 생각합니다. 외부적으로 일관된 디자인은 사용자의 기대를 충족하므로 사용자의 "직감 테스트"를 통과하는 데 도움이됩니다. 그 사이에, 내부 일관성은 당신의 인터페이스에 논리를 제공하고, 약간의 비일관성은 사용자를 흥미롭게합니다.

깨끗하고 시각적 일관성이 잘 되어있는 사이트는 의도적이든 아니든 사용자들이 편안하고 친숙하게 느끼도록 합니다. 몇몇 디자이너들은 이러한 이점을 시각적 흐름에 적당하게 사용하기도 하죠.

Source: “Eye Tracking.” Bernard Goldbach. Creative Commons.

인터렉션 디자인의 측면에서 시각적 흐름은 사용자의 눈이 사이트 또는 앱과 상호 작용할 때 사용하는 경로입니다. 경험있는 디자이너들은 eye-pattern strategies를 통해 컬러대비, 사이즈 다양성, 그 이외의 방법으로 사용자들의 시각적 흐름을 조절하는 법을 압니다.

Source: neilcarpenter.com

웹디자이너 Nell Carpenter의 사이트 를 보세요. 여러 색깔의 모양들이 오른쪽 위에서 왼쪽 아래로 이동합니다. 시각적 흐름을 만드는 것이죠. 이런 알록달록한 애니메이션은 실제로는 Carpenter를 구분하는 표준과의 다릅니다. (외부 적으로 일치하지 않게 만듭니다).

하지만 필요한 곳에서는 외부적 일관성을 적용했습니다. 상단 네비게이션 바에는 일반적인 포트폴리오 사이트처럼 About, Work, Contact 페이지가 있죠. 그의 이름은 왼쪽 상단에 있고요.

내부적으로는, 흰색 텍스트가 블랙 배경과 형형색색의 애니메이션과 대비됩니다. 이렇게 내부 일관성이 깨어지면 시각적으로 경쟁적인 환경에서도 링크를 비롯한 텍스트의 중요성 메시지를 명확하게 볼 수 있습니다. 다른 페이지에서도 블랙 배경에 흰 텍스트, 로딩 아이콘을 화이트로 하는 것을 유지합니다.

시각적 일관성의 범위

시각적 일관성에 따르면, 특별한 주의를 기울이는 특정 영역이 있습니다. 타이포그래피, UI요소, 컬러로 나눠 살펴보겠습니다.

링크 된 사이트를 보면서 읽으면 더욱 잘 이해될겁니다.

1. 타이포그래피

다른 폰트와 스타일을 자유롭게 느껴보세요.

제목, 본문, 링크 등의 텍스트 카테고리를 차별화 하면서 텍스트를 재미있게 유지할 수있는 충분한 다양성이 필요합니다. 각각의 카테고리에 따라 다른종류의 폰트, 스타일, 두께를 선택하는 동안에도 일관성은 유지해야합니다. 만약에 H1 헤더에서 두꺼운 세리프 서체를 사용한 경우, 모든 H1헤더에도 일치하는지 확인하세요.

Source: Rule of Three UK

일관성을 유지하려면 실제로 CSS를 통해 글꼴 속성을 전체적으로 설정해야합니다. 폰트 패밀리, 사이즈, 컬러, 자간, 행간 모두 이렇게 설정할 수 있습니다.

body { font: 1em/1.5em Cambria, Arial, serif; color: #151; }

일관된 서체 너머로, 정렬이 일관적인지와 라인 간격을 적당하게 했는지(대략 1.4-1.6x 글꼴 크기)도 확인하세요. 이 수직 리듬을 만들면 모든 컨텐츠간 조화가 이루어져 가독성과 친근함을 높여줄것입니다.

Source: UXPin

UXPin 웹사이트의 잠재적인 리디자인을 위해 우리는 최소한의 산세리프 서체를 결정했습니다.

헤더 - 큰 폰트 사이즈, 주요 단어에 두께 조절

서브헤드 - 레귤러 두께, 혼합 케이스

프리머리 네비게이션 - 혼합케이스, 두꺼운 두께

세컨더리 네비게이션 - 대문자, 레귤러 두께

Source: UXPin

메인컨텐츠에서는 왼쪽 맞춤, 오른쪽 정렬과 1.6x 줄간격으로 수직 리듬을 만들었습니다. 눈을 부드럽게 전환하기 위해 H2 헤더 ( "Wireframe any user interface quicklyand easily")와 본문 사이에 충분한 공백을 추가했습니다.

2. UI 요소들

보통 사이트에서 사용하는 그래픽, 아이콘, 이미지, 레이아웃 간격, 텍스처들은 인터페이스의 시각적 분위기를 형성합니다.

주제 일관성을 제쳐두고 그래픽의 메커니즘에 주의를 기울이십시오.

공간의 관계 - 요소들 사이의 공간이 일정한지 확인하세요. 그렇지 않으면 시각적 흐름이 깨집니다. 또한 기능이 다른 요소를 분리 할 수있는 공간을 의도적으로 넣었는지 확인하세요.

이미지 - 시각적으로 이미지들은 같은 룩앤필과 텍스쳐를 가지게 하세요. 구현 측면에서 일부 이미지는 새 탭에서 열고 다른 이미지는 라이트 박스에서 표시하지 않도록하십시오. 스타일을 선택하고 그 스타일을 고수하십시오.

사이즈 - 관계되있는 요소들은 같은 사이즈이거나 비슷해 보여야합니다(다 원형이거나 네모로). 게슈탈트의 법칙에 따르면 외관적 다양성은 다른 기능을 말하는 것이죠. 큰 요소들은 더 중요하다는 것을 말하기 때문에, 만약 두가지 요소가 관계되어 있다면 그것들을 비슷한 사이즈로 두어야 합니다.

Redhat의 사례를 보면, UI 요소들의 시각적 일관성을 정말 잘 반영했습니다.

Technology Page

Source: Redhat

Services & Support Page

Source: Redhat

카드 패턴은 여러 페이지에서 일관성을 유지하는 데 적합합니다. Services & Support Page 나 Technology Page 같은 보조 페이지를 방문하면 페이지의 간격과 크기가 동일하기 때문에 서로 관련이 있음을 알 수 있습니다.

게다가, 검색과 계정설정들은 오른쪽 상단에 같이 있습니다. 이것은 사용자들에게 이것들이 secondary action임을 알게하죠. 또한 배경 이미지가 동일한 산업적 느낌을 지니지만 음영 및 색상의 차이로 인해 사이트가 템플릿처럼 느껴지지 않습니다. 원형아이콘들도 레드 배경에 화이트 라인으로 일관적으로 디자인 되어있습니다.

3. 컬러

웹사이트 컬러를 어디에 어떻게 넣을지 신중하게 선택해야 사용자들에게 좋은 인상을 줄 수 있습니다. 다른 색상은 사용자에게 다양한 감정을 불러 일으 킵니다 (녹색은 번영과 평온을, 파란색은 신뢰를, 빨간색은 열정을).

사이트의 일관성을 위해 컬러팔레트를 선정하세요. 어떤 컬러를 할지는 당신에게 달려있습니다. 특정 요소를 강조하지 않으면 각 페이지의 색상이 서로 보완되어야합니다.

Source: Michael’s

아트스토어인 Michael's를 참고해보겠습니다.

크리미한 배경은 다크 그레이인 메뉴와 도드라지고 다크 그레이를 일관적으로 반복하는데요. 버튼이나 로고는 레드로 주목성을 끕니다.

(원문에는 더 많이 적혀있는데 지금은 사이트가 바껴서 그대로 적기가 애매하네요.)

이 모든 것을 넣어보세요

시각적 일관성을 잘 사용한 사이트를 보세요. 웹 사이트 제작 회사인 Squarespace의 랜딩 페이지는 사이트 제일 앞에서부터 영상을 통해 기술을 과시합니다.

Source: Dreaming With Jeff

페이지 상단부터 시작해봅시다. 오직 두가지의 타입페이스를 사용했는데요, 헤더를 위한 데코형 폰트, 나머지는 산세리프 서체를 사용했습니다. 클릭을 유도하기 위해 모든 버튼의 타입은 대문자로 사용했습니다. 두가지 버튼을 구별하기 위해 불일치가 얼마나 똑똑하게 적용되는지 확인하세요. 첫 번째 CTA는 흰색으로 채워지는 반면 보조 CTA (사용자를 리디렉션)는 배경 컬러가 채워지지는 않지만 밑줄이 그어져 있습니다.

Source: Dreaming With Jeff

페이지를 아래로 스크롤하면 오른쪽 아래 모서리에 보조 작업이 표시되고 상호작용 신호를 표시하기 위해 대문자로 표시되지만 색상은 더 연합니다. 넓은 라인 간격과 문단 간격은 멋진 세로 리듬이 만들어지며 흰색 글자체는 Jeff Bridges의 칙칙한 윤곽을 강조합니다.

Source: Dreaming With Jeff

페이지의 중간에는, 어두운 테이블을 반영하기 위해 스큐오모픽(사실주의 묘사, 최근의 미니멀 디자인과 반대된다고 생각하면 될 것 같습니다)으로 디자인이 바뀝니다. 그러나 세련되게 적용되어 디자인은 여전히 끈적 거리지 않고 어둡고 과감한 느낌을줍니다. 우리는 여전히 야행성인 듯하게 느낍니다.

재생버튼은 모두 같고 노란 컬러는 일관적으로 사용됩니다. 플레이리스트 외곽의 노란 테두리는 카세트 테두리, 플레이 바, 왼쪽 아래의 로고와 같은 다른 노란 요소들을 보완합니다.

Source: Dreaming With Jeff

아래로 스크롤을 내리면 갑자기 하얀색 배경이 나오는데, 이는 다른 요소들과 구별된다는 것을 뜻합니다. 그리고 Squarespace는 이제 그들의 가치 제안을 제공하고 있습니다.

그러나 배경은 불일치의 유일한 영역입니다. 동영상 플레이어는 크기가 같지만 버튼은 나머지 사이트와 동일합니다. 흰색의 그늘은 이전 섹션에서 사용 된 흰색 액센트와 동일하기 때문에 디자인이 다르지만 여전히 익숙한 느낌을줍니다. 장소가 어딘지 느끼지 않고,이 부분은 일관된 요소 덕분에 같은 사이트의 분리 된 차원처럼 느껴집니다.