[UX] 가벼운 이야기2011.09.06 09:00

글을 시작하며...
최근 회사 동료로부터 안드로이드 위젯 프로젝트 관련 노하우 공유 요청을 받았습니다. 경험을 공유하다 보니, 이와 관련해서 생각을 정리해보고 싶은 마음이 들었습니다.

본 블로깅을 통해 안드로이드 위젯 관련 프로젝트를 시작하시는 신입 분들이나, 실무경험이 상대적으로 적은 학생분들에게 도움이 되었으면 좋겠습니다. (저보다 많은 경험이 있으신 분들은 의견을 보태주시면 저같은 UI 기획자가 배울 수 있는 밑거름이 될 것 같습니다.) 또한 다음 고려사항들은 순수히 제 의견이며 논란의 여지가 충분히 있으므로 이점도 감안해 주시고 봐주세요.

[그림1] 추억의 햅틱 위젯

 
[그림2] 안드로이드 위젯 
 
위젯은 무엇인가?

웹 전문가인 '힌치클리프' 는 위젯을 웹에서 실행되는 작은 어플리케이션이라고 정의하였습니다. 위젯의 사전적 의미는 실용적인 목적으로 사용되는 작은 기계 또는 장치를 말하는 것으로, 주로 새롭게 만들어졌거나 신기한 장치, 또는 이름을 알 수 없거나 생각나지 않는 소형 장치, 부품, 도구를 일컫는 단어로 사용되고 있습니다. 또한 위젯의 동의어로 자주 사용되는 단어로 가젯이 있는데요. 위젯과 가젯의 어원이 정확히 알려진 바는 없지만 웹스터 사전에 등록된 시기를 볼 때 오래 전부터 사용된 단어인 것으로 추정됩니다. 또한 위젯을 뱃지(badge), 모듈(module), 버튼(button) 등으로 부르기도 합니다. (출처 하단 명기함) (아이폰같은 경우 위젯과 어플리케이션의 경계가 모호하기는 합니다. 이 점은 논란의 여지가 있으나 본 블로깅에서는 다루지 않습니다.) 

본 블로깅에서는 안드로이드 위젯 기획시 고려사항에 대해서 다룹니다.


안드로이드 위젯 기획시 고려사항

1. 위젯의 핵심 고려사항은 유용성과 크기다.
다양한 위젯 사이즈중에서 어떤 사이즈를 선택하는 것이 좋을까요? 저는 유용성과 크기를 고려해서 설계해야 한다고 생각합니다. 위젯을 설치할 확률은 유용성에 비례하고 크기에 반비례하지 않을까 생각합니다. 같은 유용성을 갖는다면 가능하면 작게 만드는 것이 좋겠고요, 그렇다고 해서 고유의 유용성을 해치면서까지 작게 만들다가는 실패할 여지가 있습니다.  (위젯 크기와 위젯의 유용성에 따른 위젯 등록의 상관관계에 대해서 조사해보고 싶은 생각은 드네요.) 

[그림3] 안드로이드 portrait size

[그림4] 안드로이드 landscape size


2. 터치 영역을 고려해야 한다.
위젯은 그 크기가 어플리케이션에 비해 상대적으로 작으므로 터치 영역을 잘 고려해서 설계해야 합니다.
애플 Human interface guideline을 보면 최소 터치 영역이 44px임을 확인할 수 있습니다. 윈도우폰 UI 가이드라인을 보면 터치 영역을 9mm(34px) ~ 7mm(26px) 사이로 권장하고 있습니다.

현재 안드로이드 위젯 가이드라인에는 최소 터치 영역에 대한 가이드라인이 없으므로, 아쉬운대로 애플 HIG나 윈도우폰 UI 가이드라인을 참조해야 겠습니다.

[그림5] Touch target size


3. 기왕이면 기능은 단순한게 좋다.
위젯은 어플리케이션이 아닙니다. 기왕이면 단순한게 좋습니다. 위젯을 어플리케이션처럼 생각해서 기능에 집중하기 보다는 Short cut의 개념으로 생각하는 게 좋습니다. 또한 위젯은 스크롤이나 트랜지션이 원활하지 않으므로 이 점을 충분히 감안해서 설계하여야 합니다. 요즘들어 안드로이드 사양이 점점 좋아지고는 있다고 하나, 아직까지는 위젯의 기능을 무겁게 가져가기에는 부담이 좀 있는 상황입니다.


4. 기타 고려사항은 없는지 살펴보아야 한다.
- 어떤 안드로이드 단말의 경우 위젯모드를 세로모드 뿐만 아니라 가로모드도 지원하기 때문에 가로모드에 따른 위젯을 추가적으로 개발해야 할 수 있습니다.

- 위젯 크기에 따라 종류별로 추가 셋트를 구성할 수 있습니다. 예를들면 작은 위젯, 중간 위젯, 큰 위젯의 3가지 세트를 만들어놓고 사용자에게 선택하게 하는 것이죠. 하지만 너무 많은 종류의 위젯을 지원하다보면 사용자 입장에서는 선택을 하는데 있어서 혼란을 가중시킬 우려도 있습니다. 선택해보기 전까지는 크기 외에 어떠한 정보도 알수 없으니까 말이죠.

[그림6] 안드로이드 위젯 선택 UI

- 또한 위젯 정보 동기화 이슈가 있습니다. 위젯의 정보를 몇시간마다 가져와서 보여질 것인지에 대한 고민이 필요합니다. 당연히 수시로 정보를 업데이트 하는것이 좋지만, 성능의 문제가 있으므로 수동 업데이트 버튼을 추가로 제공해야 할지를 고려해봐야 합니다.

- 음악 위젯의 경우 락스크린 UI도 고려해야 합니다. 락스크린 UI는 단말이 락이 걸려있더라도 사용할 수 있는 UI인데요, 음악의 경우 멀티태스킹이 가능하기 때문에 락 스크린 UI를 추가로 구성할수도 있습니다.

[그림7] 안드로이드 윈앰프 락스크린(우측)



글을 마치며...
적고보니 다소 일반적인 이야기가 된 것 같습니다. 하지만 기본에 충실한다면 위젯을 기획하는데도 도움이 되지 않을까 생각합니다. 때로는 정공법도 도움이 될때가 있습니다.

현재 안드로이드 위젯 가이드라인이 존재하기는 하지만, 가이드라인이 실제 기획과 디자인을 하는데 있어서 모든 부분을 커버해주지는 않습니다. 그렇기 때문에 어느 부분에 한해서는 새롭게 적용해야 하는 부분이 있을것으로 생각합니다.

또한 안드로이드 3.0(허니콤) 위젯을 제작할 때에는 퍼포먼스의 향상으로 인해 위젯 3D UI를 시도해 볼 여지가 있습니다. (본 포스팅에서는 안드로이드 3.0 위젯에 대한 문제는 논외로 합니다.)

감사합니다. 



참고자료

노주환, 웹 패러다임을 바꾸는 위젯, 멘토르, 2008

루크 로블르스키의 터치 영역 사이즈
http://www.lukew.com/ff/entry.asp?1085

위젯의 역사와 종류
http://1370.me/694

안드로이드 위젯 가이드라인
http://developer.android.com/guide/practices/ui_guidelines/widget_design.html






Posted by 위승용 (uxdragon)

댓글을 달아 주세요

  1. shawn

    현재 위젯 하나 만들어보려고 하는데, 참고하겠습니다. 감사합니다.

    2011.10.27 16:25 신고 [ ADDR : EDIT/ DEL : REPLY ]
  2. shin

    안녕하세요~ 오빠 ㅋ 신혜정이에요 ㅋㅋ
    종종 놀러와서 열심히 보고있어요ㅋ 여전히 블로그 멋지게 잘 가꾸?시는듯 ^^
    저도 위젯땜에 애먹은 기억이있어서 남겨요 ~ㅋ
    안드로이드 탭 디바이스 버전 가이드가 없던터라 시행착오를 좀 겪었었죠ㅠ
    가이드 막 분석하고 ㅎㅎ
    좋은정보 많은거같아요~ 오늘도 잘 보고 가요~^-^

    2011.10.31 15:40 신고 [ ADDR : EDIT/ DEL : REPLY ]
    • 오랫만이네~ 회사는 어디 다니고 있는거야?
      잘 지내고 있나 모르겠네~
      직장 열심히 다니고 화이팅하길!

      2011.11.01 02:05 신고 [ ADDR : EDIT/ DEL ]
  3. kalli

    안녕하세요. 생전 아무것도 모르는 상태에서 위젯디자인을 해야(만)하는 웹디자이너입니다.
    어플에 대한 psd등은 자료가 꽤 있던데 위젯에 대한 정보가 전혀 없는 상태에서 가장 기본적인 것들을 알게 되서 매우 기쁩니다.

    하지만 그것도 잠시.. 어떻게 커팅을 해야 하는지에 대한 정보를 찾을 수 없군요. 터치와, 위치를 고려해서 몇가지 ui디자인을 고려해야 하는 것은 알겠지만, 개발자에게 넘기기 위한 커팅요령에 대해서는 알 수 없을까요?
    간절히 기다리겠습니다.

    2012.02.27 14:54 신고 [ ADDR : EDIT/ DEL : REPLY ]
    • -----------------------
      GUI 가이드에 대해서 알면 되는데요
      위젯이라고 특별하지는 않습니다.

      다만 웹디자인을 하신 분이라면
      Html 퍼블리싱 구조에 대해 어느정도 이해가 있을 것같습니다

      Window에 쓰이는 위젯인지 mac에 쓰이는 위젯인지 mobile에 쓰이는 위젯인지 모르겠지만
      우선 개발자가 어떻게 개발하는지 알아야합니다.

      질문하신
      컷팅에 대한 노하우라 하면 되도록 이미지 리소스를 적게(용량,개수) 만들어 주는거 정도인거 같습니다.
      가변적인 구조와 비가변적인 구조를 파악해서 컷팅을 해야하는데
      가변적인 구조의 이미지의 경우 디자인도 가변적인 환경을 반영한 디자인이여야 하고요

      개발자에게는 디자인 가이드 문서 (수치와 activity 정보가 담긴)와 이미지 리소스를 전달하면 됩니다.

      디자인 가이드 문서(위에 말한 GUI 가이드)는
      http://blog.naver.com/ssunahlee?Redirect=Log&logNo=110104913166
      http://aimseon.egloos.com/5325321

      를 참고하시면 될 것 같습니다.
      -----------------------

      ... 라고 저희회사 GUI 팀원분이 말씀해주셨습니다.

      감사합니다.

      2012.02.29 17:18 신고 [ ADDR : EDIT/ DEL ]

[UX] 독후감2010.03.30 09:00



UI 기획을 할때 레이블링하는것 만큼이나 어려운 일은 없더군요. 책을 찾아보다가 Designing web navigation 에서 좋은 네비게이션 레이블의 조건에 대해서 기술하고 있는 것을 발견했습니다. 그중 '네비게이션 레이블링 챕터' 를 정리해 보았습니다. 네비게이션용 레이블링 뿐 아니라, 용어 레이블링 할때도 적용할 수 있을 수 있을 것 같습니다. 또한 웹사이트 기획 뿐 아니라 다른 디지털 디바이스들에도 적용할 수 있을 것 같습니다.



A. 사용자 언어로 말하기
1. 회사 전문 용어를 쓰지 않는다.
회사 전문 용어는 너무 쉽게 웹사이트에 들어가 있습니다. 이러한 전문용어는 사용자에게 도움이 되기보다는 혼란스럽게 합니다. 

2. 기술 용어를 쓰지 않는다.
대부분 방문자들은 사이트를 만든 사람만큼 웹 사이트에 대해 잘 알지 못합니다. 플러그인이 무엇인지. 보안 서버가 무엇을 의미하는지 사용자들은 궁금할까요? 사이트 타겟 방문자들의 객관적 지식수준을 고려한 용어를 사용하여야 겠습니다.

3. 너무 똑똑하거나 재미있는 용어를 쓰지 않는다.
일반적으로 너무 똑똑하고 영리하게 쓰인 레이블은 의도적으로 동작하지 않습니다. 사이트를 디자인하는 동안 재치 있는 단어들을 만드는 일은 재미있을지 몰라도, 나중에 사람들이 이러한 단어를 보고 네비게이션하려고 애써야 하는 상황은 전혀 재미있지 않습니다.

4. 약자를 쓰지 않는다.
약자는 공간을 절약하지만 사람들이 올바른 단어를 빠르게 훑어보는 것을 방해하기도 합니다. 심지어 어떤 방문자들은 특정 약자는 전혀 이해하지 못합니다. 모든 사람들이 FAQ, PDF, RSS의 의미를 알고 있는 것이 아닙니다.

5. 적절한 보이스톤을 사용한다.
일반적으로 은행 사이트의 라벨은 10대 음악 사이트와는 다른 톤으로 쓰입니다. 전자는 공식적이고 사무적이며, 후자는 젊고 모던하지요. 특정 타겟 청중들이 기대하는 적절한 레이블의 톤을 이해하는 것이 중요합니다.


B. 설명적인 레이블
레이블을 될 수 있는 한 설명적으로 만들고자 노력해야 합니다.
레이블이 나타내는 콘텐츠에 대한 실마리를 제공해야 합니다.
넓고 모호한 레이블을 써야 한다면, 어떤 방법으로든 뜻을 한정하고자 노력해야 합니다.


C. 상호 배타적인 레이블
레이블은 메뉴에서 그룹으로 나타나는 경우가 많습니다. 한 레이블의 의미는 연속해 있는 다른 레이블의 해석에 영향을 줄 수 있기 때문에, 가능한한 레이블을 구분해야 합니다.


D. 명확한 초점을 나타내는 레이블
초점이 맞추어진 레이블은 보다 예측하기 쉬우며 네비게이션을 하는 동안 사용자들의 자신감을 증가시킵니다. (예를 들어 고양이, 강아지, 햄스터에 대한 카테고리를 동물이 아닌 애완동물이라고 씁니다. 반면에 고양이과  & 개과 는 너무 상세해서 햄스터가 들어갈 수 없습니다.)


E. 일관된 레이블
일관된 레이블은 모호성을 없앨 수 있습니다.

1. 정밀도
정밀도는 상세 내용이나 주제의 상대적인 폭을 의미합니다. 사이트 구조에서 동일한 레벨에 있는 네비게이션 옵션들은 동일한 콘텐츠의 폭이 담겨있습니다.

2. 구문론
네비게이션의 레이블은 모두가 비슷한 문법적 구조로 되어 있어야 합니다. 언어의 동일한 부분을 사용하도록 노력해야 합니다.

3. 표현
서체나 크기, 스타일등을 일관성있게 사용하여 통일감을 주는 것이 중요합니다.

4. 사용
여러 곳에서 동일한 옵션을 지칭할 때 동일한 레이블을 사용합니다. 이러한 일관성은 인쇄와 같은 다른 미디어 채널에도 마찬가지로 적용되어야 합니다.


F. 레이블의 길이
레이블이 길면 사람들이 찾고 있는 계기가 되는 단서가 포함되고 있을 가능성이 높습니다. 하지만 레이블의 길이는 제한을 두어야 합니다. 스풀은 13단어 이상의 링크는 성능이 형편없으며, 사람들이 한 번에 이해할 수 있는 양이 정해져 있다고 하였습니다. 궁극적으로 레이블에 몇개의 단어가 필요한가에 대해서는 엄격하게 정해진 규칙이 없습니다. 하지만 화면 영역을 더 많이 사용해서라도 명확하고 구체적으로 표현하는 편이 낫습니다. 명확하게 표현하기 위한 한 가지 테크닉은 짧은 레이블을 사용하되 옆에 설명문을 붙이는 방법이 있습니다.




Posted by 위승용 (uxdragon)

댓글을 달아 주세요

  1. 댓글을 남겨주세요. ^^

    2010.05.21 09:52 신고 [ ADDR : EDIT/ DEL : REPLY ]