모바일 어플리케이션 UX, UI 디자인 기초 팁 몇 가지
아침 출근길, 퇴근길은 물론 평상시에도 항상 손을 놓지 못하는 스마트폰, 그리고 앱. 그만큼 우리가 하루에 스마트폰 앱을 이용하는 시간은 생각보다 많습니다. 이제 우리 일상의 일부가 되었을 정도로 곁에 없어서는 안 되는 필수 프로그램들이죠. 이렇게 많은 사람들이 스마트폰 앱을 이용하다 보니 알아서 모바일 앱 시장 규모도 커지고 그에 따라 모바일 앱을 전문으로 하는 UI, UX 디자인 또한 주목받고 있습니다.
UI, UX 디자인이라고 하면 아마 다들 웹디자인과 대충 비슷한 의미로 생각하셨을 텐데요. 정확히 뜻을 풀어 설명하자면
UI 디자인은 User Interface Design의 약어로, 말 그대로 사용자 위주의 인터페이스를 말합니다. 즉, 인터페이스를 만드는 기술과 디자인을 실현시켜 사용하는 것이죠. 그리고 모바일이나 웹디자인에서 UI는 보통 조금 더 세부적인 범위로 그래픽 사용자 인터페이스(Graphic User Interface)를 뜻합니다. 사용자가 어떤 프로그램을 접했을 때 보다 더 효과적이고 편리하게 이용할 수 있도록 메뉴나 버튼 등을 디자인하는 것으로, 사용자가 프로그램을 이용하는데 길을 헤매지 않도록 안내해주는 표지판 같은 역할을 합니다.
UX 디자인은 User experience Design의 약어로, 사용자가 디자인된 제품과 서비스, 그리고 그것을 제공하는 회사와 상호작용하면서 경험하게 되는 모든 경험의 총합을 의미합니다. 즉 사용자 경험이라는 전체적인 콘셉트 하에 프로그램의 개발과 디자인을 디렉팅하게 되죠. 사용자가 혼란스러워하거나 그밖의 불편사항 등을 미리 방지하고 최적화할 수 있게끔 방향성을 잡아줍니다. 그리고 중요한 점은 그래픽 요소인데, 사용자가 정말 버튼을 누르고 싶게끔, 소유하고 싶게끔 UI 요소들을 디자인해야 합니다.
이렇게 우리가 흔히 사용하는 스마트폰 앱은 나름대로 UI, UX 디자이너를 통한 많은 시행착오를 걸처 나온 결과물들이랍니다.
그럼 지금부터 UI, UX 디자인할 때 염두해야 할 몇 가지 팁을 알려드리겠습니다.
1. 사용자는 다 알랑가몰라
UI, UX 디자인을 할 때 종종 실수하는 부분이 디자이너 자신의 눈높이로 디자인을 바라본다는 것입니다. 우리가 살아온 환경이 다 다르듯이 사용자 또한 개인에 따라 UI 사용수준이 다릅니다. 초보자도 있고 그렇지 않은 사람들도 있다는 것이죠. 물론 뚜렷한 특정 타겟을 위한 프로그램이라면 그 타겟의 성향에 맞춰 UI 디자인을 한정된 방향으로 디자인해도 됩니다.
하지만 이런 드문 경우 외에, 조금 더 폭넓은 사용자를 상대로 UI 디자인을 해야 한다면, 사용수준 스펙트럼을 넓게 생각해야 합니다. 특히 페이스북과 같이 글로벌한 앱일 경우 다양한 나라와 집단에서 이용하기 때문에 많은 부분을 UI 디자인에 반영해야 합니다. (사실 이렇게 여러 나라에서 사용하는 앱은 나라별 시리즈가 있긴 합니다만..)
예를들어, 타겟이 10대부터 60대인 앱이 있다고 합시다. 딱 바로 들어도 고려해야 할 사항이 많겠죠?
10, 20대인 경우 모바일 앱 사용에 익숙한 나이라서 많은 단계의 UI가 있더라도 다소 무리 없이 이용할 수 있습니다. 하지만 50, 60대 나이인 경우 최대한 덜어내고 심플하고 최소화된 디자인이 효과적이겠죠. 또 한 가지 추가하자면, 가독성 수준이 다르기 때문에 텍스트 확대 기능도 고려해야 할 것입니다.
이처럼 앱을 처음 접하는 사람도 쉽게 사용할 수 있고 앱의 목적에 맞게 UI 디자인이 되어야 합니다.
2. 크거나 작거나 애매한 버튼 크기, 어떻게?
UI 버튼 크기는 사람들의 손가락 크기에 의해 제한됩니다. 손가락이 버튼에 비해 너무 클 경우 사용하는 데 오류를 범하게 되지요. 그래서 손가락의 평균 크기에 맞게 디자인하는 것이 가장 이상적입니다. 마찬가지로 위와 같이 필요에 따라 버튼 크기조절기능을 추가하는 것도 방법이겠죠.
그리고 한 손으로 스마트폰을 이용할 때 엄지손가락의 사용빈도가 제일 높고 또 화면상단 보다 하단 터치횟수가 많습니다. 그래서 보통 하단에 중요한 버튼이 많고 버튼 크기도 큽니다.
3. UI 위치, 모든 것엔 이유가 있다
위에서도 잠깐 말씀드렸다시피 한 손으로 스마트폰을 들고 앱을 사용할 때 터치율이 가장 높은 스크린 위치는 우측하단부터 좌측상단입니다. 하지만 잘 생각해 보면 엄지로 스크린을 터치했을 때 우측하단 코너보단 하단 중앙이 터치하기 편리합니다. 이유는 우측하단 코너는 엄지를 안쪽으로 접어야 하기 때문에 힘이 더 들어가며 심리적으로 코너 보단 중앙 쪽이 안정적으로 보입니다. UI 위치 또한 이러한 데이터 기반으로 작업돼야겠죠.
그런데 앱의 목적에 따라 UI 위치도 달라질 수 있습니다.
상하로 스크롤 기능을 통해 내려서 보는 경우(리스트 형식 페이지), 네비게이션 메뉴가 상단, 하단이 아닌 좌측이나 우측에 붙어 있는 경우도 있으니까요.
4. 모든 것은 내 엄지에서 부터, UI 방향 읽기
일반적으로 모바일 앱을 이용할 때 손가락은 일정한 패턴의 방향을 갖고 있습니다. 첫 번째, 엄지는 우측 하단부터 좌측 상단까지 시계방향으로 곡선형을 그리는 흐름이 쉽습니다. 두 번째, 슬라이드 기능처럼 방향성이 뚜렷한 UI의 경우 모든 UI 방향성이 통일되거나 흐름이 이어지는 것이 좋습니다.
5. 너무 많아도 문제, 핵심 버튼으로 최적화시키기
버튼이 너무 많을 경우, 담아내기도 버거울뿐더러 사용자에게 혼란을 줄 수 있습니다. 앱을 개발할 때 조금 부족해 보인다고 기능을 이것저것 끼워 넣다 보면 앱의 정체성도 잃을뿐더러 UI 디자인 또한 산으로 갈 수 있지요. 차라리 한 두 개 기능을 포기하고 가장 핵심적인 기능만 제대로 구축한다면 목적에 맞는 앱이 될 것입니다. 과감하게 껍데기를 버리고 알맹이만 남겨 놓는 것이지요. '최적화' 바로 이 단어가 가장 적합한 뜻 같습니다.
6. 왓 유어 앱 컬러?, 앱 정체성 수립
아이덴티티 디자인처럼 UI 디자인 또한 같은 맥락에서 상통합니다. 특히 고정된 UI인 경우 페이지 마다 버튼 크기나 그래픽스타일, 컬러 모두 다 통일돼야 보기 좋습니다. 그래야 사용자가 몇 번이고 사용했을 때 혼란스러워하지 않습니다. UI 디자인 뿐만 아니라 앱의 정체성을 수립하는 단계입니다.
7. 보편적인 UI 디자인? VS 독창적인 UI 디자인?
UI 디자인을 하다 보면 꼭 다른 앱들과 차별화된 디자인을 추구하다가 너도나도 모르는 결과물로 남는 경우가 있습니다. 사용자는 디자이너도 아니고 그렇다고 미적 수준이 높은 사람들도 아닙니다. (타켓에 따라 다를 수 있지만..) 사용자는 일반인입니다. 일반인들의 눈으로 디자인을 해야 합니다. 예를들어 앱의 환경설정기능 아이콘을 드라이버 모양으로 했다고 합시다. 과연 사용자가 환경설정기능을 인지할 수 있을까요? 일반인들에겐 환경설정이라고 하면 보편적으로 톱니바퀴 형태를 떠올립니다. 창의적인 디자인은 좋되, 사용자의 보편적인 틀 안에서 디자인을 해야 합니다.
반면에 앱이 인지도가 높거나 사용유저가 많을 경우, 디자인을 하는 데 있어 보편적인 성향을 조금 덜어낼 수 있습니다. 이유는 그 만큼 사용자들에게 노출이 많이 될 것이고, 처음엔 몰라도 한번 두번 사용하게 되면 그 디자인과 기능이 각인되기 때문이죠.
옛날에 지금 와이파이를 상징하는 방상형 아이콘은 전파 혹은 파장 정도로만 인식되었을 겁니다. 하지만 와이파이가 생겨나고 각종 여러 매체에 노출되면서 이제는 세계 어디에서나 와이파이 아이콘을 동일하거나 비슷하게 사용하죠.
지금까지 모바일 앱 UI, UX 디자인에 대한 (개인적인 생각이 조금 가미된) 팁을 알려드렸습니다.
어때요? 많은 도움이 되셨나요^^? ㅎㅎ
추가로 UI, UX디자인 관련 사이트 몇 군데까지 남겨두고 가겠습니다. :)
UI, UX 디자인 사이트
관련 정보
1. UI, UX: Who Does What? A Designer's Guide To The Tech Industry
(UI, UX: 누가 무엇을 합니까? 기술산업 디자이너의 가이드)
2. Google: 6 Reasons Why Nobody Uses Your App
(구글: 누구도 너의 앱을 사용하지 않는 6가지 이유)
'IT, BLOG, SNS' 카테고리의 다른 글
| 텀블러(Tumblr) 블로그 만들기 (2) | 2014.08.01 |
|---|---|
| 페이스북 감정조작 실험 파문, 당신은 오늘도 영향을 받고 있나요? (0) | 2014.07.21 |
| 디자이너 필수 상식! 폰트 라이선스 사용범위 바로 알기 (0) | 2014.07.14 |
| 폰트 패키지 유저를 위한 멤버십 서비스, 윤멤버십 +P (0) | 2014.06.03 |
| 블로그로 유명인사가 된 아티스트 3인방 (0) | 2014.04.30 |
