일관성 있는 UI디자인의 중요성과 가이드라인

위시켓

UI 디자인에서 ‘일관성’은 매우 중요합니다. 일관성 없는 UI는 유저들을 혼란에 빠지게 하고, 심각한 경우에는 제품이나 서비스의 성공여부를 판가름 짓기도 하지요.

UI 디자인에서의 일관성이란 인터페이스의 구성 요소들이 통일되어 있는 상태를 말합니다. 구성 요소들은 같은 외양을 가지고 같은 방식으로 작동해야 합니다. 일관성 있는 UI 디자인은 사용자들이 인터페이스를 다루는 데 용이하다는 인상을 주며, 동시에 친숙하고 안정감 있다고 느끼게 해줍니다.

프리랜서 가이드일관성 있는 UI 디자인의 중요성과 가이드라인

일관성 있는 UI 디자인의 중요성

1. 사용감을 높일 수 있다

일관성은 사용자들에게 편안함을 줍니다. 사용자들이 여러분의 앱을 사용하기 위해 새로운 사용법을 익힐 필요가 없기 때문이지요. 그들은 이미 다른 비슷한 앱을 사용한 적이 있기 때문에 여러분의 앱을 사용하는 데 별 다른 어려움을 느끼지 않을 것입니다. 자연스레 사용자들은 여러분의 앱을 지속적으로 사용하게 되겠지요.

2. 혼란을 줄일 수 있다

일관성 있는 UI는 상호작용을 더 용이하게 해줍니다. 통일성 있는 시각 요소를 사용하여 콘텐츠를 쉽게 찾을 수 있는 위치에 두고 중요한 요소들을 눈에 띄게 만들 수 있지요. 일관성 있는 디자인을 통해 논리적인 구조를 만들어서 사용자들이 어디서 무엇을 찾아야 하는지를 명확히 보여줌으로써 사용자들의 혼란을 막을 수 있을 것입니다.

3. 정서적인 반응을 이끌어낼 수 있다

앞서 언급했듯이, 일관성 있는 UI 디자인은 사용자들에게 편안함과 안정감을 줍니다. 사용자들은 마치 오래 다루던 물건을 다루듯이 쉽고 간편하게 콘텐츠를 활용할 수 있게 되겠지요. 그리고 이런 기분 좋은 사용자 경험은 긍정적인 정서 반응을 이끌어 냅니다.

일관성 있는 UI디자인의 가이드라인

1. 디바이스 UI 가이드 라인과 양식

iOS 휴먼 인터페이스 가이드라인머티리얼 디자인

Shift

2. 다른 비슷한 앱과 사이트, 그리고 일반적인 관행

사용자들은 여러분이 만든 앱 뿐만 아니라 여러분이 만든 것과 비슷한 다른 앱도 사용할 것입니다. 따라서 유저들은 이미 다른 앱과 사이트에서 인기 있는 패턴과 규칙, 상호작용 방식에 익숙할 것이며 편안함을 느끼겠지요. 이러한 사실을 염두에 두고 디자인을 모델링한다면 유용성을 높일 수 있습니다. 즉, 여러분은 사용자들이 다른 앱과 사이트를 이용하면서 쌓아온 경험에 기대어 디자인을 해야 합니다. 이렇게 하면 사용자들의 혼란을 줄일 수 있기 때문이지요.

우리가 인터넷 쇼핑몰을 이용할 때, 보통 ‘장바구니’가 어디에 위치하는지 생각해보세요. 우리는 모통 물건을 구매하고 싶을 때 스크린의 우측 상단을 살펴봅니다. 만약 여러분이 인터넷 쇼핑몰 사이트의 인터페이스를 디자인한다면, 비슷한 곳에 위치시키는 편이 좋겠지요.

3. 여러분만의 디자인

여러분의 UI에서 배치, 스타일링, 타입 선택, 레이아웃 등은 일관성을 유지하게 해주는 최소한의 요소들입니다. 만약 여러분이 A스크린에서 메뉴를 상단부에 배치했다면, B스크린에서 메뉴를 하단부에 배치해서는 안됩니다. 가장 기본적이고 중요한 요소들이 끊임없이 변화하고 사라지고 나타난다면, 사용자들은 혼란을 느낄 것입니다. 어쩌면 혼란과 짜증을 느낀 나머지 여러분의 앱을 외면할지도 모르지요.

하지만 뻔한 디자인을 피하기 위해 재미있는 요소를 더하고 싶다면 전략적으로 디자인을 비틀어야 합니다. 디자인의 질을 높이거나 인터페이스의 사용감을 높이기 위해서 적절히 튀는 요소들을 가미하는 것은 좋습니다. 만약 인터페이스의 특정한 요소가 반드시 눈에 띄어야 한다면, 혹은 사용자들의 시선을 끌고 싶다면, 차별점을 두세요. 지루한 디자인을 피하고 싶다면 방해가 되지 않는 선에서 흥미로운 비주얼 요소들을 적절히 활용하는 것이지요.

일관성 있는 UI 디자인의 예시

1. Clear

Clear

2. Duolingo

Duolingo

버튼, 타입페이스, 메뉴, 일러스트레이션 등의 모든 요소들이 서로 상호작용하며 일관성을 유지하도록 신중히 디자인되었습니다. 색감, 빛, 모양 등은 앱 전반에 걸쳐 통일성을 지니고 있지요. 심지어 앱이 담고 있는 콘텐츠들도 통일성을 보여줍니다. 이러한 일관성은 사용자들이 더 쉽게 앱을 사용할 수 있도록 도와줄 뿐만 아니라, Duolingo라는 브랜드의 이미지를 한층 더 높이는 데 기여합니다. 자체 제작한 마스코트인 ‘Duo’ 캐릭터도 있어서 사용자들에게 긍정적인 정서적 반응을 유도하기도 합니다.

3. Hopper

Hopper

디자인을 할 때 일관성 있는 배치와 레이아웃은 매우 중요합니다. 특히 ‘메뉴’ 요소에 있어서 일관성은 필수입니다. 여러분의 사용자들이 앱을 활용하기 위해 반드시 필요로 하는 것이 ‘메뉴’이기 때문이지요. Hopper를 살펴보면 메뉴 바의 일관성 있는 배치를 더 잘 이해할 수 있을 것입니다. 메뉴 바는 항상 상단부에 위치하고 있으며 중요한 메뉴 요소들은 절대 다른 곳으로 사라지거나 하단부로 내려가지 않습니다. 모든 스크린에서 같은 곳에 자리하고 있지요.

이제 UI 디자인에서 일관성이 얼마나 중요한지 느끼셨나요? 일관성 있는 디자인의 중요성과 이를 실제로 적용하는 방법을 인지하고, UI 디자인할 때 유용하게 이용하시기 바랍니다. 프리랜서 가이드의 다른 UI 디자인 관련된 유익한 콘텐츠들도 참고해 보세요.

참고 ▶ UI 디자인의 변천사와 디자이너의 미래

참고 ▶ UI 디자인 툴 10가지

위시켓프리랜서 가이드

믿을 수 있는 IT 아웃소싱 서비스, 위시켓입니다. 공식 사이트:: http://www.wishket.com/
Follow
Cards you may also be interested in
현실판 인어공주
meinyou
54
12
4
짤줍 1126 키크니 무엇이든 그려드립니다 2번째
goalgoru
188
65
18
보는 재미를 더해주는 레트로 포스터
respectyou
10
4
1
에브리타운을 또 하나 만들었습니다. 몰랑이를 본 순간 이건 만들어야겠다는 생각을 했어요 ㅎㅎ 이번에는 만드는데 좀 오래 걸리긴 했지만 그래도 결과가 만족스러워서 좋습니다. 저도 몰랑이처럼 스케이트 타러 가고 싶어지네요
respectyou
81
5
8
요즘 대학생들은 다 이걸로 피피티 만들어서 발표함 ㄹㅇ 찐.....ppt
M0ya
82
189
3
전세계에서 가장 많이 팔린 스마트폰 순위
visualdive
6
1
3
비긴 어게인 역대 최고의 장면 이라고 생각하는 순간
Mapache
19
8
3
GIF
[ 방문자를 구매자로 만드는 홈페이지 작성법 ]
freemoa
35
86
6
굿모닝
jamjaeryuk
12
1
2
저작권 문제없이 사용할 수 있는 무료폰트 5종
newsway
100
268
3
웹서핑 꿀팁! 유용한 크롬 확장 프로그램 Top7
KINEWS
59
92
1
귀여뽀짝 머지택틱스 캐릭터 클레이 제작기.jpg
respectyou
37
4
3
몬스타엑스 | [201031] SuperStar_ STARSHIP Gotta get ready for the sweetest Halloween party! Start playing the missions for SuperStar STARSHIP HALLOWEEN_PARTY !
MONSTAX7
13
7
1
여행 끝! 여행사진과 동영상까지 깔끔하게 정리해 줄 꿀어플 모음
APPSAY
16
37
0
퍼니싱:그레이 레이븐 '루시아' 클레이 도전♬
respectyou
16
2
3
아날로그 갬성 필카 앱 추천
visualdive
20
38
0
짤줍 0110
goalgoru
127
36
15
병맛사진관
goalgoru
99
43
4
디자이너라면 꼭 봐야할 참고사이트 best7
visualdive
15
58
0
일본 유명 만화가/평론가들이 극찬하고, 몇 시간 째 큰 화제가 되고 있는 단편 만화...jpg
Mapache
29
19
2
4.7 Star App Store Review!
Cpl.dev***uke
The Communities are great you rarely see anyone get in to an argument :)
king***ing
Love Love LOVE
Download

Select Collections