태터데스크 관리자

도움말
닫기
적용하기   첫페이지 만들기

태터데스크 메시지

저장하였습니다.


'스마트 워치 UI'에 해당되는 글 1건

  1. 2015.04.02 원형 UI 분석 리포트 3편 - 원형 디스플레이 UI 디자인 가이드라인 (1) by 정 유리
2015.04.02 07:50

원형 UI 분석 리포트 3편 - 원형 디스플레이 UI 디자인 가이드라인

이번 원형 UI에 관한 3편의 시리즈는 pxd Innovation Group의 김동후 선임연구원 / 정유리, 김서연, 임혜진 주임연구원이 공동 저술한 글입니다.


원형 디스플레이가 가진 다양한 특징은 사용자에게 매력적인 경험을 제공합니다. 기술적인 한계로 대중화에 어려움이 있었지만, 최근에는 그 한계를 극복하면서 상용화의 발판을 마련한 것으로 보입니다. 동시에 원형 디스플레이의 활용 범위도 차츰 넓어져, 앞으로는 웨어러블 기기 뿐만 아니라 가전 제품이나 IoT 제품에서도 충분히 기대해 볼 수 있게 되었는데요.
하지만 사용자 인터페이스 측면에서는 여전히 보완되어야 할 점이 많다고 생각합니다. 원형 디스플레이를 활용한 기기들이 아직은 일부 제품에 국한되어 있기 때문에, 디스플레이 특성을 살린 인터페이스의 검증과 연구가 지속적으로 필요합니다.
이번 글에서는 완성도 높은 원형 UI 설계를 위해서 어떻게 해야 할 지 정리해 보고 발전적인 방향을 제안해 보고자 합니다.
(아래 내용은 최근 pxd에서 진행한 프로젝트를 통해 경험한 노하우를 정리한 것입니다.)



1. Circular Display User Interface


원형 디스플레이의 UI 디자인은 다른 디스플레이와는 다른 몇 가지 특징을 가집니다.

Continuity & Rhythmic

원 테두리의 끊임없는 연속성은 자연스러운 흐름(Flow)을 형성합니다. 여기서 발생하는 규칙적인 리듬감은 정적인 인터페이스에 생동감을 주는 역할을 할 수 있습니다.

Concentration & Spread

원은 원의 중심을 기준으로 컨텐츠의 집중과 확산을 표현할 수 있습니다. 원의 가장 큰 장점이기도 한데요. 중심에서 바깥 방향으로 퍼져 나가는 인터랙션은 컨텐츠의 확장이나 신규생성을 표현합니다. 반대로 바깥에서 안 쪽으로 모여드는 형태는 감소, 소멸의 의미를 표현합니다. 이처럼 원형 디스플레이는 형태적 특징을 통해 여러가지 느낌을 표현할 수 있는 확장성을 가지고 있습니다.

Salience but Discord

원은 컨텐트의 현저성(Salience)을 높이는 속성이 있습니다. 원 도형이 전경(Figure)이 된다면 배경(Ground) 위에서 눈에 띄게 속성을 강조하는 효과를 나타낼 수 있기 때문입니다 (참고: Figure-ground(perception)).
원 도형은 배경과 명확히 분리된 영역을 가짐으로써 시선을 집중시키고 자연스럽게 사용자의 주의를 끌 수 있습니다. 하지만 이에 따른 반작용으로 다른 컴포넌트와 균형 있는 조화를 이루기는 어려울 수 있습니다. 원형은 전체가 곡선으로 이루어져 있기 때문에 다른 요소와 잘 어울릴 수 있는 레이아웃과 배치, 정렬이 중요합니다.



2. Screen Structure


원형 디스플레이 안에서 화면을 설계하는 것은 매우 도전적이면서도 매력적인 과정입니다. 앞선 글에서 사각형 디스플레이와의 차이점을 분석하고 원형 디스플레이 설계 시 요구되는 특성들을 살펴 보았는데, 실제 화면 설계에 돌입하면 원형 디스플레이 인터페이스 상의 모든 요소들이 새로운 규칙을 필요로 합니다.

Layout

Grid는 화면 안에서 정보 영역을 나누는 레이아웃(Layout)의 안내선을 말하는 것으로, 가장 안정적인 형태이면서 활용도가 높은 방식입니다. 직사각형, 정사각형 등의 직선으로 나누어진 영역 분할이 가능하기 때문에 리스트(List)나 썸네일(Thumbnail)형 레이아웃의 골격이 됩니다.
하지만 곡선만으로 이루어진 원형 디스플레이에서 Grid 레이아웃을 적용하면, 곡선이 포함된 영역은 온전히 활용하기 어렵다는 문제가 있습니다 (Figure 1). 그럼에도 불구하고 화면에서 제공되어야 할 정보 요소는 어떤 형태로든 일관되고 규칙성 있는 배치가 필요한데요. 원형 디스플레이 안에서 정보를 균형있게 배치한다면 원의 중심과 영역을 나누는 지름을 그 기준으로 삼을 수 있습니다 (Figure 2). 물론 사각 디스플레이에서의 Grid 구조만큼 효율적이진 않지만, 원의 한계를 극복하면서 최대한 효율적으로 활용할 수 있는 방식이라고 생각합니다. 방사형으로 원을 분할한다면 Grid 레이아웃이 가진 균등 분할의 역할을 대신할 수 있지 않을까요?


Alignment

원형 디스플레이의 레이아웃만큼 많은 고민이 필요한 부분이 정렬입니다. 정렬은 리스트 항목의 정렬, 문장의 정렬, 소제목/대제목의 정렬, 도형요소의 정렬 등 모든 인터페이스 요소의 정렬을 포함합니다.
정(正)원형의 원은 원의 중심에서 보면 어느 한 쪽으로도 치우침이 없는 완전함을 가지지만, 원을 수평선/수직선을 기준으로 바라보면 곡선으로만 이루어 진 도형입니다. 만약 다수의 항목을 가장 일반적인 좌측 정렬로 배치한다면, 원의 둘레가 곡선이기 때문에 항목들은 결국 삐뚤빼뚤한 형태를 보여줄 수 밖에 없습니다 (Figure3-1). 따라서 동일한 시작점을 기준으로 좌측 정렬을 하거나 (Figure 3-2) 또는 중앙 정렬로 균형을 잡는게 (Figure 3-3) 가장 안정적인 컨텐트 표현 방법이 될 수 있습니다. 도형의 크기와 모양을 고려해 화면 내 균형감을 유지할 수 있는 정렬을 적용하는 것이 중요합니다.


항목의 나열(List) 또한 정렬(Alignment)과 함께 고려되어야 하는데요. 항목을 순서대로 나열할 때, 어느 방향이냐에 따라 정보 표현 방식도 고민해 볼 필요가 있습니다. 원형에서는 화면 효율성을 위해 더욱 중요합니다.
만약 수평 방향으로 항목을 나열한다면 텍스트 사용에 제한을 둘 필요가 있습니다. 이 경우 텍스트 대신 아이콘을 활용하고, 사용자가 선택할 수 있는 적절한 크기로 표시하는 게 화면 활용에 효과적입니다.
(Apple Watch Human Interface Guidelines - Layout 을 참고했습니다. 애플 와치가 원형 디스플레이는 아니지만, '애플 와치의 작은 화면'과 '원형 디스플레이의 화면 효율성 한계'는 결과적으로 '효과적인 레이아웃 디자인이 필요하다'는 비슷한 목적을 가지고 있는 것 같습니다.)

Task-Centered Structure

인터페이스 상에서 제공되어야 할 정보 요소는 맥락에 따라 다르지만, 원활한 사용 경험을 위해 몇 가지 정보는 필수적으로 제공되어야 합니다. (예: 이전 화면으로 돌아갈 수 있는 표시, 해당 화면을 벗어날 수 있는 경로 등)
하지만 적정 수준을 넘어 정보가 과도하게 많아지면, 화면 복잡도를 증가시켜 사용자에게 너무 많은 판단과 과업을 요구하게 될 수 있습니다. 특히 원형 디스플레이는 동일 크기의 사각형보다 21.5%의 영역이 줄어들기 때문에, 보다 효율적이고 Task 집중적인(Task-centered) UI 설계가 필요합니다. (모든 정보를 다 제공할 순 없으니까요.)
그러려면 불필요한 정보를 제거하고, 사용자가 행해야 할 Task에 최대한 집중할 수 있도록 설계하는 것이 중요합니다. 당연한 설계 원칙일 수 있지만 화면의 제약이 많은 원형에서는 반드시 지켜져야 할 원칙 중 하나입니다. Task 수행을 위한 선택지를 최소화하고 보여줘야 할 정보를 줄이는 것이 필요합니다. 또한 화면 안에서 가장 중요한 정보는 무엇인지, 항상 노출되어야 할 정보는 무엇인지, 부가 정보는 무엇인지 구분하여 우선 순위에 따라 정리해 보는 것이 중요합니다.

이와 같은 Task 집중적인 UI 설계 방식이, 디자인 결과물로는 '한 눈에 알아보기 쉽고 명확한 UI'로 표현될 수 있습니다. 여러 스마트 워치의 디자인 원칙(Design Principle)들이 공통적으로 Glanceable을 강조하는 패턴을 보이는 것도 매우 흥미롭습니다. 결국 컨텐트 표현의 자유도가 낮은 작은 화면이나 원형의 디스플레이에서는 사용 맥락에 맞게, 꼭 필요한 정보를, 빠르게 알아볼 수 있도록 제공하는 게 중요한 것 같습니다.

스마트 워치 가이드라인의 Glanceability 관련 원칙을 참고로 덧붙입니다. 각 가이드라인에서 표현하는 Glanceability의 정의와 원칙입니다. 인상적인 표현들이 많으니 한 번 읽어보면 좋을 것 같습니다.

Apple Watch Human Interface Guideline
Viewed together, glances are a browsable collection of timely and contextually relevant moments from the wearer's favorite apps. Individually, a glance is a quick view of your app's most important content.

Android Wear UI Guideline
A classic wrist watch is designed to let you see the time in a split second and get on with what you were doing. ... The less time it takes to use your software, the more time the user can be present in whatever they are doing.

Samsung Gear S UI Guideline
Glance ability is important when users want to quickly decide whether to dismiss a notification or find out more about it on the Gear or on their mobile devices. Any information displayed on the Gear should be concise and informative, offering bite-sized updates that show users the most important details at a glance.


Content Flow

일반적으로 사각형 디스플레이에서 사람의 시선 흐름은 좌측 상단에서 우측 하단으로 흐릅니다 (Figure 4). 때문에 정보의 흐름도 이를 따라 자연스럽게 배치되어야 할 필요가 있습니다.
그렇다면 원형에서는 어떨까요?
우선 정보의 시작점이 어느 곳에 위치해야 할 지 혼란스럽습니다. 원은 꼭지점을 가지지 않기 때문에 안정적인 시작점을 지정하기가 어려운데요. 대안으로는 화면 중앙이나 시계의 1시 방향이 자연스러운 시선 흐름을 유도하는 시작점이 될 수 있을 것 같습니다. 화면 중앙을 활용한다면, 원의 집중과 확산 심리를 이용해 중앙에서 주변으로 퍼지는 정보 흐름을 만들 수도 있겠죠 (Figure 5-1). 또한 곡선형 테두리를 따라 시선을 유도하는 시계방향 흐름은 부드러우면서도 자연스러운 시선 흐름을 제공할 수 있을 것입니다 (Figure 5-2).



3. Navigation


네비게이션은 사용자가 현재 어디에 있고, 다음엔 어디로 이동하고, 어떻게 여기서 갈 수 있는지와 같은 방식을 규정합니다. 가장 일반적으로 쓰이는 네비게이션 모델은 Hub, Home Screen, Global Menu 등으로 불리는 메인 영역이 서브 영역을 관장하는 구조입니다 (Figure 6). 이 구조는 보통 Close button이나 Back button, Home button을 고정 위치에 지속적으로 제공하여 사용자가 언제든지 경로를 이동할 수 있도록 합니다.
하지만 원형 디스플레이는 공간적 제약으로 위와 같은 네비게이션 관련 정보를 고정영역에 할애하기에 한계가 있습니다. 그렇다면 이러한 한계를 보완할 수 있는 다른 네비게이션 방식은 무엇이 있을까요?

네비게이션을 최소화하고 이동 방식을 단순하게 표현하기에는 Figure 7 과 같은 구조가 예가 될 수 있습니다. 메인과 서브를 구분하지 않고, 모든 영역이 대등하게 나열됩니다. 단계성이 있도록 표현할 수도 있고, 각기 독립적인 카테고리를 갖도록 구성할 수도 있습니다.
레이어 간 이동 방식은 Previous button, Next button을 제공하거나 좌/우 Flick 제스쳐를 제공합니다. 독립적인 카테고리가 여러개라면, Page indicator를 화면에 표시하여 현재 위치를 보여주는 것도 필요합니다. 이런 구조로 Depth를 최소화 하는 것은 원형 디스플레이의 네비게이션 설계에 도움이 될 수 있습니다.


사용자 입장에서는 상/하/좌/우 방향 조작과 이에 따른 Depth 이동 및 특정 메뉴 접근에 약간의 학습이 필요할 수 있습니다. 예를 들면 아래 방향 Flick시 상위 Depth 레이어 접근, 오른쪽 Flick시 동일 Depth 다른 카테고리 접근과 같은 방식으로 '방향'과 '기능'간 매치를 학습해야 할 수 있습니다. 화면에 보여지게 될 레이어에 따라 적절한 Cue가 제공된다면(예측 가능한 방식으로), 사용자는 손쉽게 네비게이션 방식을 익힐 수 있을 것입니다. 방향과 기능간 매치는 Mac OS의 Hot Corner 기능을 예로 들 수 있습니다 (Figure 8). 네 방향의 사각지대에 특정 화면을 지정하고, 사용자가 언제든지 특정 방향에 마우스를 이동시키면 지정한 화면으로 손쉽게 이동할 수 있는 경로를 제공합니다.

Figure 8. Mac OS - Hot Corner

추가적으로 공간의 이동 없이 레이어의 추가 생성을 통해 정보를 제공하는 것도 방법입니다. 어디에서나 불러올 수 있는 Quick Menu나 일시 생성되는 Popup이 그 예라고 볼 수 있습니다. 원형 디스플레이의 특징을 활용해 추가 레이어가 중앙에서 확장되거나 외곽에서 진입하는 듯한 모션이 가미된다면 더 효과적입니다.
이와 같은 네비게이션 방식이 계층 구조를 잘 표현하려면 각각의 제스쳐 방향은 일관성 있는 역할을 가지도록 해야 합니다. 또한 맥락에 맞게 매끄러운 이동 방식을 제공하여 사용자가 최소한의 학습으로 목적지까지 도달하도록 제공해야 합니다.


4. Interaction


원형 디스플레이에서의 사용자와 디바이스간 인터랙션은 어떤 특징이 있을까요? 인터랙션은 디바이스와의 의사소통, 피드백, 조작 등을 포함하는 것으로, 실제 사용 경험에 큰 영향을 미칩니다. 그렇기 때문에 디바이스가 무엇인지, 어떤 사용 맥락인지, 사용자의 특성은 어떠한지 등 여러 요소를 고려할 필요가 있는데요. 디스플레이가 원형이 된다면, 디바이스 종류 뿐만 아니라 원형에서 제공할 수 있는 새로운 인터랙션 방식에 주목 할 필요가 있습니다. 원형 디스플레이의 몇 가지 단점들을 인터랙션을 통해 보완해 보는 것도 좋은 방법이 될 수 있습니다.

Transition

트랜지션 효과는 UI 애니메이션 방식 중의 하나로 최근 모바일 앱, 모바일 웹, 웹사이트 등에서 쉽게 찾아볼 수 있습니다. 트랜지션을 포함한 UI 애니메이션은 시각적인 즐거움을 넘어서 기능을 올바르게 표현해 줄 수 있는 수단이기도 합니다 (참고: User Interface의 애니메이션&트랜지션). 그리고 이런 UI 애니메이션도 패턴화가 되어가고 있는데요. 원형 디스플레이에서도 예외는 아닐 것 같습니다. 특히 원형이라는 도형의 특성을 활용하면 사각 디스플레이에서 구현할 수 없는 다양한 트랜지션 효과를 제공할 수 있습니다. 원 중앙을 중심으로 집중과 확산의 흐름을 활용하거나, 곡선의 흐름을 리듬감 있게 보여주는 전환 방식들이 좋은 예라고 볼 수 있는데요. 곡선형의 도형 안에서 애니메이션을 제공하는 것은 생동감, 동적인 운동성을 더욱 부각시킬 수 있습니다.


출처: Full 영상 보기 (배경음악이 가미된 인포그래픽 영상을 감상해 보세요)


출처: Full 영상 보기 (배경음악이 가미된 인포그래픽 영상을 감상해 보세요)


출처: http://www.gottabemobile.com/2014/03/24/10-moto-360-smartwatch-app-concepts-you-need-to-see/

Feedback

피드백은 디바이스와 사용자 사이의 커뮤니케이션에 중요한 역할을 합니다. 빠르고 분명한 반응이 함께 제공되어야 하는 것도 물론이고요. 원형 디스플레이도 마찬가지 입니다. 예를 들면 원형 디스플레이에서는 실시간 Progress Bar를 원의 테두리를 이용해 표현해 줄 수 있습니다. 또는 Menu Indicator가 원의 테두리에 위치해 항목을 이동할 때 마다 아래 사례처럼 표현할 수도 있습니다. 원형의 한계를 보완하면서 둥근 곡선의 특징을 잘 활용하는 예라고 볼 수 있습니다.

출처: https://www.behance.net/gallery/21897459/Greak-Watch


출처: http://www.gottabemobile.com/2014/03/24/10-moto-360-smartwatch-app-concepts-you-need-to-see/

Control

사용자가 인터페이스를 컨트롤 할 때 일어나는 인터랙션에서도 원형의 매력을 활용할 수 있습니다. 리스트 Picker의 표현을 볼록하게 나타나도록 모션을 적용한다면, 리스트 항목을 탐색할 때 원형 스크린을 둥근 '구' 처럼 표현할 수 있습니다. 또는 리스트 Scroll Bar를 화면 가장자리에 곡선형으로 제공하는 것은 원의 테두리를 둥그렇게 스크롤링하는 새로운 조작 경험을 줄 수 있습니다.


마치며


세 편의 연재를 통해 원형 디스플레이에 대해 알아보았습니다. 단순히 디스플레이 프레임 형태로서가 아닌 '원'이라는 도형의 본질로부터 인터페이스 디자인을 고민해 볼 수 있는 시간이였습니다. 특히 원형은 곡선만으로 이루어진 도형이기에 한계와 특징이 명확한 도형입니다. 동시에 UI 디자이너가 다양한 시각에서 도전해 볼 수 있는 가능성이 큰 영역이기도 합니다. 원형 디스플레이의 활용 범위가 넓어지고 있는 만큼 더 많은 연구가 필요할 것입니다. 앞서 정리한 내용들이 그 발판이 되어 더 나은 사용자 경험을 제공할 수 있으면 좋겠습니다.


참고
  • Salience : http://en.wikipedia.org/wiki/Salience_(neuroscience)
  • Figure-ground(perception) : http://en.wikipedia.org/wiki/Figure–ground_(perception)
  • Apple Watch Human Interface Guidelines 1) : https://developer.apple.com/library/prerelease/ios/documentation/UserExperience/Conceptual/WatchHumanInterfaceGuidelines/Layout.html#//apple_ref/doc/uid/TP40014992-CH22-SW1
  • Apple Watch Human Interface Guidelines 2) : https://developer.apple.com/library/prerelease/ios/documentation/UserExperience/Conceptual/WatchHumanInterfaceGuidelines/Glances.html#//apple_ref/doc/uid/TP40014992-CH21-SW1
  • Android Wear UI Guideline : http://developer.android.com/design/wear/creative-vision.html
  • Samsung Gear S UI Guideline : http://developer.samsung.com/technical-doc/view.do?v=T000000184
  • Navigation : Designing Interfaces 2nd Edition http://www.amazon.com/Designing-Interfaces-Jenifer-Tidwell/dp/1449379702
  • User Interface의 애니메이션 & 트랜지션 : http://story.pxd.co.kr/865
  • Transition 1) : https://vimeo.com/12677264
  • Transition 2) : https://vimeo.com/23269836
  • Transition 3) : http://www.gottabemobile.com/2014/03/24/10-moto-360-smartwatch-app-concepts-you-need-to-see/
  • Feedback 1) : https://www.behance.net/gallery/21897459/Greak-Watch
  • Feedback 2) : http://www.gottabemobile.com/2014/03/24/10-moto-360-smartwatch-app-concepts-you-need-to-see/




  • 팀블로그 pxd Story 구독 방법  블로그 글은 각 개인의 생각이며 피엑스디와 다를 수 있습니다.


    Trackback 0 Comment 1
    Ad Test...