본문 바로가기

Design/UI/UX

사용자의 편리성을 고려한 모바일 어플리케이션 디자인 -`버튼` 편


안녕하세요. 가람유입니다.
경험이 없을 초창기에는 모바일 어플리케이션을 디자인 하면서 난항을 겪는 부분이 있기 마련입니다.
그 중 한가지가 바로 '버튼의 크기'인데요. :)

iOS에서 기본으로 제공하는 버튼을 사용하는 경우는 예외지만, 대체로 디자인을 하다보면 새로 버튼을 디자인 하기 마련입니다.
하지만, 막상 예상치 못하게 크기가 너무 크거나 작은 경우가 있지요.
과연 사용자가 편리하게 사용할 수 있는 버튼의 크기는 어떻게 고려해야 할까요?
몇 가지 어플리케이션으로 살펴봅시다 (!) 

* 버튼의 크기는 모두 직접 측정하였으며, Shadow나 기타 Stroke에 외부 요인을 일부 배제하고 실질적인 버튼 영역만 계산하고자 하였습니다.
   실질적인 개발과정을 고려해 치수를 대부분 짝수로 맞추고자 하였습니다. (!) 
   + dpi 72의 640x960 기준입니다. 


 
 - 아이폰 어플리케이션 디자인을 하시는 분 들은 실제로 비교해 보시면서 감을 잡으시면 될 것 같네요. :)





'다음' 어플리케이션입니다. 실제 기기로 보시면 텍스트로 이루어진 버튼들은 작은 편 입니다.


그린 몬스터의 Flava 앱입니다. Flava는 대체로 아기자기 하기 보다는 큼직큼직한 버튼들이 눈에 확 들어옵니다. :)


개인적으로 SNS 앱 중 디자인이 가장 예쁘다고 생각하는 Path 입니다. 아기자기함이 바로 매력이라고 생각하는데요.
기기에서는 마냥 아기자기 해보였는데 , 예상외로 수치상으로는 작지 않은 편이네요. 최소한 이 정도 선은 고려하여 디자인 해야하지 않을까 합니다. 


이건 아마 거의 모르실 텐데, VoteSpot 이라는 미국 앱스토어의 어플리케이션입니다.
기기로 보면 버튼이 굉장히 작게만 느껴집니다. (수치상으로 옮겨보니 평균 이네요.)
예전에 이 앱을 써보고 나서 대체 버튼 크기는 어떻게 고려 해야 할까? 라는 의문점이 들었지요. :)

 

좀 감이 오시나요? 

갑자기 이러한 분석을 하게 된 이유는, 어플리케이션 디자인을 하다가 문득 막상 버튼을 만들었는데 "너무 작아서 누르지도 못하면 어떡하지?"
라는 생각이 문득 들었기 때문인데요. 그 해답을 다른 어플리케이션들은 어떻게 해결 했는지 알아보기 위함이였습니다.

참 신기한점은, 막상 수치상으로는 비교적 작지만 구조상으로 조화를 이루며 사람들이 편하게 사용하는 버튼들도 많다는 거예요.
 

결국 결론적으로, 가장 중요한 것은 바로 요 두가지가 아닐까 합니다.
버튼을 버튼답게 스타일링 하는 것과 최소한의 크기는 고려 하는 것(가로, 세로 30 pixel 이상) - 단지 제 소견일 뿐입니다. :)


+ 추가
애플의 iOS 휴먼 인터페이스 가이드 라인 문서가 있더군요. !
http://developer.apple.com/library/ios/#documentation/userexperience/conceptual/mobilehig/IconsImages/IconsImages.html