Wood between the worlds

향후 iPhone 과 같은 Touch UI 를 적용하기 위해 UI 를 리서치 중이다.
리서치하면서 보기 쉽도록 자료 정리중..

현재로썬 타겟이 M4650 이므로 H/W keyboard 는 전제하지 않고 full touch UI 를 고려 중이다.
mobile touch, touch phone, touch UI, touchscreen... 여러 키워드로 검색해 보았다.
그래서 몇몇 리서치할 만한 사이트를 발견했다.


그리고 UI 및 디자인을 보기 위한 몇몇 폰들도 발견했다.
UI 부분과 GUI 는 구분해서 정리하려고 한다.

나름대로 UI 분석

1. HTC Diamond Phone

하단에 일렬로 메인 메뉴가 위치한다. 포커스를 손가락으로 drag 하면서 이동하여 메뉴를 선택하며 이동에 따라서 메뉴도 반대 방향으로 움직인다. 포커스가 있는 메뉴가 title 과 함께 중앙 화면에 크게 위치한다.
손가락을 떼면서 포커스가 있는 메뉴가 실행된다. (실행방식은 동영상 참조)

메뉴간 이동은 포커스 외에 기본적으로 하단 일렬 메뉴 윗 공간을 다 활용할 수 있다.
손끝으로 좌측으로 flick 하면 좌측 메뉴, 우측으로 flick 하면 우측메뉴로 이동한다.
메뉴가 실행된 화면에서도 역시 좌우 flick 은 좌우 메뉴 이동이지만 상하 flick 은 아이템간의 이동이다.

손가락으로 포커스를 이동할때 아예 서브 화면을 보여주는 방법은 어떨까?
그리는 시간이 오래걸리려나...어떻게 보면 두 번째 이미지가 그런 모습같다.
실행된 모습이 아니라 아예 포커스가 있을때 간략히 보여주는 컨셉도 제안해볼만 할듯.
또한 손가락을 뗄때가 아니라 뗐다가 다시 tap 할때 실행하는 방법이 사용자에게 익숙할듯.

※ 이미지 출처 : HTC TouchFLO

2. Sony Ericsson n XPERIA X1

유튜브도 뒤져봤지만 UI 는 저 화면이 다인듯 하다. 기본적으로 아이콘들이 서브 화면의 모습을 카드처럼 배치해서 보여주고 있고 배치방식도 정방형 방식과 부채형으로 펼쳐놓은 방식이 있다. 가로 세로화면 전환에 아이콘들이 부드럽게 재배치된다.
모든 데모는 그 모습을 많이 보여주고 있다.

다만 아이콘이 Symbol 형태가 아니라 서브 화면 축소 이미지라는 점이 특이하달까.
일정을 표시하는 달력이나, 뉴스, 날씨 등의 화면들은 서브 화면만으로도 확실히 메뉴를 알아볼 수 있지만 메일과 같이 리스트만 보여주는 UI 에서는 적용하기에 적절치 않을 듯 하다.
리스트 형태의 서브 화면은 PSP 의 XMB (Cross Media Bar) 형태도 있다.

transparancy 를 준 굵은 글씨를 각 서브 화면에 근사하게 보여줄 수 있다면 응용 가능할 듯도.

3. Nokia N78, Aeon, 5800 Xpress Media Tube

순서대로 Nokia N78 모델의 UI, Concept UI 인 Aeon 그리고 5800 Xpress Media Tube 의 동영상 캡쳐화면이다.
N78 모델의 저 화면은 메인 메뉴같다. 기본적으로 조작은 중앙의 키패드로 하는데, 삼성 "미라지" 처럼 터치패드인듯.. 단지 네비게이션 방식은 아이팟처럼 휠로써도 사용하는듯 하다. 아이콘들이 입체적으로 정렬되어 있고 각 아이콘이 있는 메뉴가 선택되면 서브화면이 보인다. Depth 가 없다는 점이 좋은 것 같다. (동영상 참조)
Aeon 은 정말 concept UI 이다. 색감은 좋지만 개인적으로 느낌이 에어콘 같다;

5800 을 추가한 이유는 touch 의 확실한 response 로 동그란 원을 그려주었다는 점때문이다. 저렇게 까만 선이 아니고 좀 더 transparancy 가 적용된 느낌으로 touch 의 focus 를 표현해준다면 확실한 visual feedback 이 될 것 같다.

나름대로 GUI 제안

1. features
 - Symbolic Icons & transparency

아이콘들은 심플한 것이 대세. 다양한 color 에 사실적인 아이콘들보다는 심볼릭한 느낌에 심플한 아이콘들이 더 깔끔해 보인다. 특히 투명한 프레임이나 아이콘들이 많이 사용된다.

- More information

많은 정보를 보여주는 좋은 방법은 화면의 유효공간을 최대한 살리거나 혹은 최대한 Depth 없이 많은 정보를 한 화면에 포함하는 것이다.

Edward R. Tufte 는 iPhone 에서 고쳐야 할 몇 가지를 지적했는데 그 중에 하나가 인터넷 브라우저를 보여주는 화면에서 상하단의 메뉴 관련 bar 가 너무 크다는 것이었다. 그는 bar 를 투명하게 만들 것을 제안했다.
그리고 두 번째로 날씨나 주식 화면과 같이 한번에 유용한 정보를 포함할 수 있는 화면을 너무 단순화한 것에 대해 지적했다. 단순화는 한 눈에 보기 편하지만 두 가지 side effect 가 있다. 하나는 한 눈에 보기 편하게 하기 위해서 상세 화면을 선택으로 남겨둠으로써 depth 가 생긴다는 점이고 또 하나는 depth 가 없다면 너무 적은 정보를 보여준다는 점이다. Tufte 는 주식이나 날씨와 같은 경우, 상세 화면을 한 번에 보여주는 것이 더 유용하다고 말하고 있다. 이 점은 아마도 시각차가 있을 것이다. Tufte 의 경우, 현재의 많은 UI 가 Power point 의 형태를 띄고 있으며 결국 사용자에게 너무 적은 정보를 줌으로써 바보로 만들고 있다고 비판하는 입장이다.

상단의 두 이미지는 좌측은 iPhone 의 화면이고 우측은 Tufte 가 제안하는 화면이다. 과연 우측 화면이 더 유용한지는 관점차가 있겠지만 개인적으로는 깔끔하게 잘만 표현한다면 많은 정보를 담고 있는 것이 Depth 를 더 만드는 것보다 낫다는 생각이다.

<Edward R. Tufte 소개 보기>

※ Edward R. Tufte

Edward E. Trufte 는 예일 대학교 명예교수이며 컴퓨터 과학, 통계학, 그래픽 디자인, 정치학을 가르친다고 한다. 효과적인 정보 디스플레이에 대해서 inforamtion design 이라는 분야로 아주 오래전부터 연구를 했다.

Edward R. Tufte : Interface design & iPhone (동영상)
Edward R. Tufte : PowerPoint is Evil (칼럼) 

- One handed UI
H/W keyboard 를 갖지 않는 full touchscreen 디바이스의 경우, 한 손 조작을 고려하지 않을 수 없다. qwerty 를 갖는 디바이스에 비해 사이즈도 더 작으므로 주로 한 손으로 잡고 엄지손가락으로 조작하는 형태를 띄게 된다. 한 손에서 엄지손가락으로 동작하기 위해서는 기본적으로 메인 메뉴 아이콘들이 상단보다는 하단에 위치하는 것이 편리하다. 한 손 동작을 보여주는 모바일 디바이스들의 데모를 보면 주로 아이콘들이 하단에 위치하는 것을 볼 수 있다. 물론 아이콘을 보여주는 방법은 위에서 설명했다시피, 바둑판 배열과 수직/수평 배열로 나뉘어 볼 수 있긴 하지만 한 손으로 가장 touch 가 유용한 영역은 화면의 하단부분일 것이다.

2. Summary

- 투명 GUI
: 아이콘, 메뉴바, 전체 frame 등에 transparency 를 적용하여 가시 화면을 최대한 확보한다.

- administrative debris 축소
: 설정, 사용자, 로고 등 관리 영역의 축소하여 화면에서 최대한 사용영역을 확보한다.

- Depth 줄이기
: 관련된 주요 정보는 한 화면에 보여줌으로써 이해도를 높인다. summary 화면 없이 상세화면에서 모두 보여주거나 메인 메뉴에서 곧장 서브화면을 보여주는 방법 등이 있다.

- icon 의 효율적 배치
: 한 손 조작이 용이하도록 아이콘의 크기를 확대하고 바둑판, 혹은 수직/수평 형태로 배열하는데 엄지손가락의 touch 가 용이한 하단에 주로 배치하도록 한다.

- touch 나 gesture 에 대한 확실한 feedback (visual/audio)
: 예제에서 봤듯이 손가락이 화면과 접촉시 영향을 줄 수 있는 범위, 즉 포커스의 크기를 직접 반투명 아이콘으로 표시해줄 수 있다. 해당 효과는 선택 시에도 적용할 수 있고  flick 이나 drag 하는 경우에도 다양한 방식으로 효과를 줄 수 있다.

자료들을 조사하다보니 사실 거의 모든 full touch UI 의 타겟은 iPhone 이었다. 많은 full touchscreen 폰이 iPhone 과 비슷한 UI 를 갖되 더 화려한 효과를 주는 방식으로 업그레이드를 시도하고 있다. 그럼에도 불구하고 하반기에는 애플에서 새로운 UI 를 선보일 것이고 그에 대한 기대를 넘는 디바이스는 당분간 보이지 않을 것 같다.

크리에이티브 커먼즈 라이선스

이 저작물은 크리에이티브 커먼즈 코리아 저작자표시-비영리-변경금지 2.0 대한민국 라이선스에 따라 이용하실 수 있습니다.