태터데스크 관리자

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

태터데스크 메시지

저장하였습니다.


'원형 디스플레이'에 해당되는 글 3건

  1. 2015.04.02 원형 UI 분석 리포트 3편 - 원형 디스플레이 UI 디자인 가이드라인 (1) by 정 유리
  2. 2015.04.01 원형 UI 분석 리포트 2편 - 원형 디스플레이의 등장과 인터페이스 특성 by seyonkim
  3. 2015.03.31 원형 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...
    2015.04.01 07:55

    원형 UI 분석 리포트 2편 - 원형 디스플레이의 등장과 인터페이스 특성

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



    1. 원형 디스플레이의 등장


    일반적으로 ‘스크린(Screen)’이나 ‘모니터(Monitor)’라고 하면 사각형 디스플레이를 떠올리게 됩니다. 이런 사각형 디스플레이는 IT기기의 발전과 함께 다양한 곳에 여러가지 형태로 활용되어 왔습니다. 목적에 따라 가로 세로 비율의 차이는 있지만, 사각형이라는 프레임(Frame)을 유지해 왔습니다. 그러나 최근에는 그 틀을 깨는 이형(Free Form) 디스플레이가 등장하기 시작했습니다. 이형(異形)은 글자 그대로 사물의 성질, 모양이 기존의 형태와 다르다는 것입니다. 직사각형이 아니라 원형, 마름모 등 다양한 형태를 가진 디스플레이가 등장하기 시작한 것입니다. 컨텐츠는 점점 다양화 되고, 제품 차별화를 위해 많은 노력을 기울이는 가운데에 스크린 프레임의 변화를 시도하기 시작한 것입니다.

    최근 Smart Watch 등에서 자주 볼 수 있는 원형 디스플레이가 대표적인 사례입니다. 하지만 원형 디스플레이 제작은 제작 공정이 매우 어렵다고 합니다. 커팅 난이도가 높고 픽셀 구조와 회로 설계를 달리해야 하며, 대량 생산이 어려워 패널 단가가 높다는 문제가 있기 때문입니다. 그러나 기술적인 제약을 극복하면서 원형 디스플레이를 활용한 제품이 여기 저기서 나타나고 있습니다. LG G3 Quick Circle, Nest, Zibo와 같은 제품을 통해 원형 디스플레이 형태로 표현하고자 하는 시도들이 있었습니다. 물론 이 제품들이 디스플레이를 동그랗게 커팅하여 구현한 제품은 아니라고 추측합니다만(G3는 확실히 아니죠), 원형 디스플레이에 대한 니즈를 확인할 수 있었습니다. 하지만 아직 완성도 높은 사용자 인터페이스(User Interface)를 제공하고 있느냐에 대해서는 검증이 되지 못한 것 같습니다. 그래서 이번 시리즈에서는 원형 디스플레이의 특성을 분석해보고 완성도 높은 UI설계를 위해서 어떻게 해야 할지 고민해보는 시간을 가져보려고 합니다.


    2. 원형 디스플레이의 조형적 특성


    그렇다면 원형 디스플레이는 일반 디스플레이와 비교했을 때 어떤 특징이 있을까요? 원형의 형태적인 특징이 무엇일지, 그리고 그 위에 UI를 설계하기 위해서 어떤 고민을 해야 할지 원의 조형적 특성과 함께 알아보겠습니다.

    균형을 가진 프레임



    원은 중심에서 가장자리까지의 거리가 모두 동일합니다. 그렇기에 세로와 가로의 길이도 같습니다. 이미 프레임 자체에서 상하 좌우로 균등한 밸런스를 가지고 있기 때문에 프레임 내부의 요소들이 균형이 맞지 않으면 시각적으로 어색해 보인다는 것이 특징입니다. 여기서 말하는 균형이란 상하 좌우의 요소들이 한쪽으로 지나치게 치우치지 않고 고르게 분포되는 것을 의미합니다. 특히 원을 세로축을 기준으로 반으로 나누었을 때 좌우 영역의 균형은 조금만 틀어져도 눈에 잘 띄게 됩니다.

    또, 원형 프레임은 중심을 향하는 특성을 가지고 있습니다. 일반 사각형 프레임의 직사각형 외곽선은 4개의 다른 직선이 4개의 꼭짓점에서 만나 있는 형태입니다. 그래서 이 4개 직선의 방향대로 내부 영역을 구분지었을 때, 자연스럽게 격자 무늬의 그리드가 형성됩니다(Grid-based). 반면, 원형의 외곽선은 완전한 하나의 선으로 이루어져 있고, 특정한 방향 없이 중심을 기준으로 회전하는 모양입니다. 따라서 평행한 라인보다는 중앙을 향하는 동심원 형태 혹은 중앙에서 뻗어나오는 방사형 형태처럼 중앙을 기준으로 하는 라인이 외곽선 형태와 자연스러운 균형을 이루게 됩니다 (Center-based). 그러나 스크린 활용도와 컨텐트의 가독성를 고려했을 때, 위와 같은 그리드는 그대로 적용하기엔 어렵고 비효율적입니다. 화면 요소들을 화면 전체에 여유 공간 없이 고르게 분포시켜야 하기 때문입니다. 이러한 구조는 복잡한 기능 없이 동일한 레벨 선상에 있는 요소들을 나열하는 등 특수한 경우에는 활용할 수 있습니다. 그러나 일반적인 화면에서는 기존 사각 프레임에서 사용하던 화면 구성 방식을 원형 프레임과 어울리는 방향으로 변형하여 조형적 안정감과 실질적인 사용성을 고려하는 절충안이 필요합니다.


    '귀퉁이 영역'의 부재


    정사각형에서 정원의 영역만 활용하게 된다면 정원을 제외한 각 '귀퉁이 영역', 즉 정사각형 면적의 21.5%를 버리게 됩니다. 이 영역이 버려지는 것은 단지 전체 면적의 21.5%가 축소되는 것 이상으로 비효율적인데, 그 이유는 이 영역이 사각형 프레임에서 주 컨텐트를 제외한 다양한 화면 요소와 글로벌한 기능이 위치하던 곳이기 때문입니다. 귀퉁이 영역은 언제든 접근하기 쉽고, 사용자의 시선에 방해가 되지 않습니다. 때문에 이 영역은 화면 요소가 많아도 크게 복잡해 보이지 않는다는 장점을 가지고 있습니다.

    위 예시에서 표시된 영역이 모바일 디스플레이에서의 ‘귀퉁이 영역’ 이라고 할 수 있겠는데요. 모바일에서 이 영역을 살펴보면 페이지 이동 또는 다른 페이지 탐색을 위한 기능(Back키, 메뉴 키), 혹은 현재 페이지의 부가적인 기능(검색, 더 보기) 등이 존재하는 것을 알 수 있습니다. 특히 아이폰 UI에서 Back 키가 항상 좌측 상단에 위치하는 구조나, 안드로이드에서 햄버거 메뉴 버튼이 좌측 상단에 위치하는 구조는 대부분의 앱에서 보편적으로 사용하고 있습니다. 이렇게 계층 구조를 넘나드는 버튼은 위치가 고정되어 있지 않으면 사용자를 매우 혼란스럽게 할 수 있기 때문입니다.

    그러나 원형 프레임에서는 이 영역이 없기 때문에 이러한 화면 요소들이 들어갈 위치를 찾기 어려워졌습니다. 특히 Back 키, 메뉴 키와 같은 버튼의 위치가 애매해져 복잡한 계층 구조를 표현하기 어려워졌다는 것이 큰 특징입니다. 또한 모바일에서 컨텐트 영역과 글로벌 메뉴 영역을 구분짓던 Navigation Bar도 원형 프레임 내에서는 표현하기 어렵거나 표현해도 축소되기 때문에 모바일에서와 동등한 기능을 수행할 수 없습니다. 따라서 원형 프레임에서는 사용자가 메뉴 요소와 컨텐트 영역을 잘 구분할 수 있도록 도와주어야 합니다.

    무엇보다 원형의 면적 자체가 사각형에 비해 제한적이기 때문에 많은 컨텐트를 한눈에 보여주기 어렵고, 때문에 화면에 표시되는 요소가 조금만 많아져도 시각적으로 복잡해 보입니다. 따라서 원형 디스플레이에서는 이러한 특징을 고려하여 복잡한 화면 요소를 배제하고 한 페이지에서 보여주는 정보를 최대한 간결하게 표시하는 것이 좋습니다.


    방향의 자유로움


    직사각형 프레임을 가진 스크린은 세로 혹은 가로의 방향성을 가지고 있습니다. 때문에 시선이 일정한 방향으로 자연스럽게 흐릅니다. 그에 반해 정원은 한쪽으로 흐르는 방향성을 찾기가 어렵기 때문에 시선 방향을 예측하기 어렵습니다. 이것은 원형 디스플레이의 단점이 될 수도, 장점이 될 수도 있습니다. 모바일의 경우 세로가 길어 자연스럽게 시선이 상단에서 하단으로 이동합니다. 그래서 상위 레벨에 있거나 중요한 요소는 상단에 배치하고 부가적인 요소를 하단에 배치하는 경우가 많은 반면, 원형은 컴포넌트의 위치에 따른 중요도 부여가 쉽지 않습니다. 중심에 집중되는 특성이 있어 중앙에 있는 컨텐트가 가장 중요한 요소처럼 보이기도 합니다. 이러한 이유로 화면 내에 복잡한 hiearchy관계를 담지 않고 필요한 메시지만 보여 주는 것이 바람직합니다.

    장점을 살펴보자면, 원형 프레임에서는 시선 방향이 정해져 있지 않기에 프레임 내부의 레이아웃을 통해 사용자의 시선을 유도할 수 있습니다. 외곽선의 형태를 따라 화면 요소들이 동심원을 그리는 레이아웃이라면 시선이 시계 방향으로 움직일 수 있고(검증된 사실은 아니라는 것을 밝혀둡니다), 세로로 배치하면 세로 방향으로, 가로로 배치하면 가로 방향으로 시선이 흐릅니다. 화면 정 중앙에 화면 요소가 있을 때 비교적 시선이 먼저 간다는 것을 제외하면 원형이라는 외곽선은 시선에 거의 영향을 끼치지 않습니다. 이를 잘 활용하면 상황에 따라 효과적인 레이아웃을 사용하여 사용자를 의도대로 유도할 수 있을 것입니다.

    방향성이 열려 있다는 특징은 화면 요소의 움직임과도 연결됩니다. 사각형 프레임에서는 직선의 방향성을 활용하여 폴딩 메뉴나 좌우 플리킹처럼 상하좌우에서 평행으로 발생하는 UI가 주로 사용됩니다. 그러나 원형은 정해진 방향이 없기 때문에 사각형 프레임에 비해 다양한 움직임을 사용할 수 있습니다. 특히 원형 프레임의 중심 집중적인 특성(Center-based)을 고려하면 중심을 기준으로 확장과 수축, 또는 회전하는 움직임이 원형 프레임에서 자연스럽다고 할 수 있겠습니다. (*이것은 도형의 조형적인 특성에 따른 분석일 뿐, 원형 프레임에 폴딩 메뉴나 플리킹 방식이 부적합하다는 것은 아닙니다. 오히려 기존의 인터페이스 경험을 고려하면 사용자에게 익숙한 방식이 사용성 면에서 더 나을 수도 있습니다. 다만 원의 조형적 특징을 고려하여 더욱 조화로운 쪽을 따져보았을 때 후자 쪽이 자연스럽다는 의미입니다.)


    위 글에서 자주 언급했듯이, 원이라는 도형의 조형적인 특성과 그로 인해 원형 디스플레이가 나아가야 할 방향이 언제나 일치하는 것은 아닙니다. 분명 원형 내에서 안정감을 주는 레이아웃은 어느 정도 정해져 있지만, 안정감 있는 레이아웃이 사용성을 보장하는 것은 아니므로 두 가치 사이에 충돌이 발생할 수 있습니다. 만약 사용성을 더 비중있게 생각한다면 사각형 디스플레이에서의 사용자 경험을 무시할 수 없습니다. 우리는 이미 오랜 시간 사각형 디스플레이 환경에서의 인터페이스에 익숙해져 왔고, 또 그만큼 시행착오를 거쳤기에 사용성이 검증된 인터페이스 구조가 이미 존재합니다. 때문에 전혀 새로운 원형 인터페이스를 발굴하는 것보다 어느 정도 기존의 룰에 따르되, 그것을 원형이라는 프레임 안에 잘 녹여내는 것이 효율적인 방법입니다. 따라서 원형 디스플레이의 화면을 설계할 때는 화면의 사용성과 화면 내의 조형적인 안정감 두 가지 측면을 모두 고려하며 설계하는 것이 관건이라고 볼 수 있겠습니다.


    3. 원형 프레임의 강점


    그렇다면 원형 프레임만의 강점은 무엇이 있을까요? 일반 디스플레이와 달리 원형이기에 가능한 강점과 원형 프레임의 매력에 대해서 알아보겠습니다.

    시선의 집중


    먼저, 원형의 프레임이 가지는 강점 중 하나는 화면의 집중도가 높다는 점입니다. 사각형 프레임과 달리 '귀퉁이 영역'을 덜어냄으로써 컨텐트가 보여지는 주요 영역 밖으로 시선이 흐르는 것을 막아주기 때문입니다. 특히 중앙에 집중되는 특성(Center-based) 때문에 사용자는 화면의 정 중앙에서 보여주는 정보에 가장 집중하게 됩니다. 사용자의 시선은 바깥으로 빠져나가지 않고, 자신의 task에 온전히 집중하게 됩니다. 따라서 사용자에게 어떤 정보를 제공하고자 하는 맥락에서는 원형 프레임이 확실히 유리하다고 볼 수 있습니다.

    원형 메타포 사용


    원형 프레임은 특히 원형의 메타포와 원형에 어울리는 인터랙션을 활용했을 때 더욱 효과적입니다. 시계, 조그와 같이 현실에서 원 형태인 사물의 특징을 화면에 적용했을 때 사용자가 이미 인지하고 있는 멘탈 모델과 일치하기 때문에 직관적인 사용과 즐거운 경험을 제공할 수 있습니다. 다만, task가 조금만 복잡해지면 오히려 직관적인 조작에 방해가 될 수 있어 단순한 task에서 사용하는 것이 적절합니다. 예를 들면, 시계를 메타포로 시간을 설정하는 UI화면을 설계한다고 했을 때, 단순한 시간 설정이라면 시계 메타포를 활용하는 것이 효과적이지만, 다양한 시간을 한 화면에서 설정해야 한다거나 구간을 설정하는 기능 등이 들어간다면 시계 메타포를 유지하며 기능을 화면 내에 표현하기 어려워 집니다.

    시각적 즐거움



    모션 출처(좌) / 모션 출처(우)

    원형 프레임에서 원을 이용한 트랜지션 효과 등 모션을 활용하는 방식은 매우 효과적입니다. 원은 공, 바퀴, 훌라후프, 원반, 눈동자 등 주로 '동적인 물체'와 닮은꼴을 가지고 있기 때문에 원의 다이나믹한 움직임은 매력적으로 다가옵니다. 따라서 이것을 인터페이스의 움직임으로 활용하면 UI 사용 경험을 한층 즐겁게 변화시키는 요소가 될 것입니다. 또, 원형 프레임은 이전까지 존재하지 않았던 프레임이기 때문에 형태 자제만으로 신선합니다. 프레임 자체가 새로와서 기존에 존재하던 UI를 원형 프레임 안에 잘 녹여내는 것도 사용자에게 신선하게 느껴질 수 있습니다. 원형 프레임의 특성을 잘 고려하여 사용자의 task를 방해하지 않도록 주의한다면, 사용자는 원형 프레임에서 즐거운 사용 경험을 제공 받게 될 것입니다.


    4. 원형 프레임의 한계


    원형 디스플레이의 구현에서 원형의 조형적 특성 때문에 어쩔 수 없이 발생하는 한계는 무엇이 있는지 알아보겠습니다.

    공간의 비효율성


    위에서도 언급했듯이, 원형은 시각형의 모서리 부분인 ‘귀퉁이 영역’이 없습니다. 따라서 같은 컨텐트를 노출해도 원형은 사각형에 비해 손실되는 부분이 생깁니다. 특히 한 화면에서 많은 양의 정보를 보여주는 경우, 예를 들면 사각형 디스플레이에서의 썸네일 뷰처럼 화면에 꽉 차게 컨텐트를 나열했을 때 귀퉁이 영역 부분에서 컨텐트의 일부가 손실됩니다. 그러나 이런 면적의 손실은 한 화면에서 보여지는 컨텐트를 축소한다거나 레이아웃의 변화를 주는 것으로 최대한 극복이 가능합니다. 더 중요한 것은 '귀퉁이 영역’의 부재로 화면을 효율적으로 구성하기 어려워 졌다는 점입니다. 화면 요소가 많은 컨텐트 화면을 원형 디스플레이에서 구현할 때, 귀퉁이 영역을 활용할 수 없기 때문에 상대적으로 컨텐트보다 중요도가 낮은 화면 요소들이 갈 곳을 잃게 됩니다.

    사각형 프레임에서는 Navigation Bar 등 화면 내에서 구획을 나누는 방식으로 구분 짓고 있어서 해당 영역 내에서는 화면 요소가 많아져도 화면 레이아웃을 크게 흔들지 않았습니다. 그러나 원형 프레임에서는 영역의 구분이 쉽지 않습니다. 원형에서도 구획을 나누어 Navigation bar를 만들 수는 있겠지만, 양 끝이 좁아지는 형태이므로 다양한 컴포넌트를 배치하기에 효율적인 방법은 아닐 것 같습니다. 또한 원형은 원의 라인을 충분히 활용했을 때 매력적인 프레임이기 때문에, 구획을 나누는 것은 원형을 효과적으로 활용하지 못한 결과가 될 수 있습니다. 따라서 원형 프레임에서 화면 설계시, Main Task를 보여주는 것에 중점을 두고 시각적으로 복잡해 보이지 않도록 최대한 간소화하는 것이 좋습니다.

    조형적 한계



    원은 중심을 기준으로 가장자리까지의 거리가 모두 동일하다는 특징을 갖고 있고, 이런 독특한 특성은 컴포넌트의 배치를 매우 제한적으로 만들기도 합니다. 예를 들어, 텍스트나 화면 요소가 세로축을 기준으로 가운데에 정렬되어 있지 않고 좌우 중 한쪽으로 치우쳐 있게 되면 어색해 보입니다. 반으로 접었을 때 데칼코마니처럼 양쪽의 모양이 대칭이 되어야 정리되어 보인다는 점이 원형의 구조적인 특징입니다. 반면 가로축을 기준으로 상하로는 조금 치우쳐 있어도 이상하지 않은데, 이것은 상단에서 하단으로 읽어내려가는 기존 스크린에서의 경험이 있기 때문에 그렇지 않을까 생각합니다. 혹은 위의 예시처럼 우리가 이미 익숙한 사람의 얼굴이 좌우는 같지만 상하로는 다른 요소(?)를 가지고 있기 때문에 비슷한 형태의 원형 프레임에서 그렇게 느낄 수도 있다고 생각됩니다. 이렇듯 좌우의 균형이 맞아야 자연스러워 보인다는 점은 레이아웃을 고민할 때 장애물로 다가올 수밖에 없습니다.

    기술적인 제약


    원형의 디스플레이는 프로그래밍과 패널 개발에 있어 높은 기술력을 요구하고 단가가 매우 높아서 대중화가 힘들다는 한계가 있습니다. 기존의 사각 화면과 다른 독자적인 알고리즘이 필요하기에 프로그래밍 상으로 동그라미를 구현하는 것은 사각형을 구현하는 것보다 훨씬 복잡합니다. 또한 투명하거나, 애니메이션이 있거나, 색깔 변화가 많을수록 많은 프로세싱 파워를 요구합니다. 또한 픽셀은 사각형이지만 화면은 원형이므로 가장자리 부분에는 픽셀을 계단식으로 구현해야 하기 때문에 일반 디스플레이와 다른 픽셀 구조와 회로 설계가 필요합니다. 이에 따른 정교한 커팅 기술이 필요함은 물론이고, 패널을 사각형이 아닌 원형으로 커팅하게 되면서 버려지는 면적이 나오게 되어 상당한 비효율을 초래할 것으로 예상됩니다. (기사 원문)


    정리하며


    원이라는 형태는 사람들에게 친근하고 부드러운 경험을 제공합니다. 또한 핵심 정보에 대한 집중도를 높여주고 시각적으로 새로운 경험을 제공한다는 강점이 있습니다. 하지만 위에서 언급했던 것처럼 화면에 제약이 많아 한 번에 많은 정보를 표시할 수 없고 복잡한 계층 구조를 표현하기에 적합하지 않은 플랫폼이기도 합니다. 그래서 원형 인터페이스를 설계할 때는 어려움이 많습니다. 아직 상용화 된 제품이 많아 잘된 UI의 사례를 찾기도 어렵습니다. 그 말은 앞으로 발전할 여지가 많다는 뜻이기도 합니다.
    3편에서는 “원형 디스플레이에 인터페이스 설계 시의 가이드라인” 에 대해서 정리해보려고 합니다.

    - 이미지 출처 및 참고 자료 -


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


    Trackback 0 Comment 0
    Ad Test...
    2015.03.31 07:50

    원형 UI 분석 리포트 1편 - 원의 조형적 특징과 원형 인터페이스

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


    원형 디스플레이의 등장에 대처하는 UI 디자이너의 자세


    IT기기에서 볼 수 있는 화면의 일반적인 형태는 사각형입니다. 그러나 점점 기술이 발달함에 따라 다양한 형태의 디스플레이들이 등장하고 있습니다. 이번 글은 다양한 형태의 디스플레이들 중 원형 디스플레이에 대한 이야기입니다. 최근 웨어러블 기기 시장이 커지고 스마트 워치 제품들이 쏟아지면서 원형 디스플레이가 탑재된 제품들을 어렵지 않게 볼 수 있는데, 그러한 원형 디스플레이 안에 완성도 높은 인터페이스를 제공하기 위해서 어떻게 해야 할지 고민해보았습니다.
    첫번째 포스팅에서는 원의 매력, 원형 물체가 가지고 있는 특징, 인터페이스 안에서 표현된 원의 특징들에 대해 알아보고자 합니다. 전체 포스팅은 3편의 시리즈로 이루어져 있으며 제목은 아래와 같습니다.



    1. 원(Circle)의 정의


    원의 사전적인 정의는 ‘둥글게 그려진 모양이나 형태’로 수학적인 관점으로 해석하면 하나의 점으로부터 같은 거리에 있는 점들의 집합을 말합니다. 평면 위 하나의 점으로부터 일정한 거리를 유지하면서 궤적을 그려 나가면 결국 그 궤적에 둘러싸인 도형이 만들어지게 되는데 우리는 그것을 원이라고 부릅니다. 원의 특징은 동적인 운동감과 정적인 안정감을 함께 가지고 있다는 것입니다. 배열의 조합, 크기 변화, 형태 변화에 따라 다양한 운동감을 나타낼 수 있고, 동시에 무한한 공간감과 정적인 부드러움을 표현할 수 있습니다. 동양사상에서 원은 영원을 의미하기도 하고, 미학적으로는 기하학적 완전성을 가진 도형으로 분류되기도 합니다.


    2. 원의 심리학적 이해


    심리학에서는 사람이 원이나 곡선에서 매력을 느끼고 친근함과 부드러움 같은 감정을 경험한다고 말합니다. 사람은 눈을 통해 시각 정보를 받아들이고 뇌의 여러 영역의 활동으로 자극을 인지하게 되는데, 특히 윤곽지각(Contour Perception)의 과정에서는 곡선형과 직선형의 사물을 지각할 때 심리적 반응이 다르게 나타날 수 있습니다.
    관련 연구 결과들을 보면 사람은 직선형 보다 곡선형을 선호한다는 것을 알 수 있는데요. 예를 들어, 곡선형으로 디자인 된 사물을 볼 때 직선형을 볼 때 보다 뇌의 전두대피질(Anterior Cingulate Cortex) 영역에서 많은 활동이 측정되었다고 합니다. 이 영역은 특히 감정반응을 관장하는 영역으로 긍정 정서 경험과 관련이 깊습니다. 반대로 뾰족한 모서리를 가진 사물을 볼 때에는 뇌의 편도체(Amygdala)가 반응합니다. 편도체는 공포와 위협을 관장하는 영역으로, 뾰족하거나 날카로운 사물의 경우 본능에 따라 신체적으로 위험하다는 신호로 받아들여 위협으로 간주합니다. 반면 곡선은 비교적 덜 헤롭다고 받아들여 정서적인 친근감과 따뜻함, 부드러움, 유연함 등의 감정을 일으킵니다. 물론 문화나 환경, 경험 등의 여러 요인이 영향을 주지만 곡선형과 직선형에 대한 지각심리학적 비교는 굉장히 흥미롭습니다.


    3. 일상에서 볼 수 있는 원형 사물과 특징


    그렇다면 우리 주변에서 볼 수 있는 사물 중 둥근 형태를 가진 물체는 어떤 것들이 있을까요? 공, 시계, 나침반, 바퀴, 자동차 계기판, 선풍기 등 다양한 곳에서 둥근 모양을 발견할 수 있습니다. 이러한 원형의 물체는 몇 가지 특성을 가지고 있습니다.

    1) 운동성


    구형의 물체는 모든 면에 모서리가 없기 때문에 바닥으로 튕겼을 때 구심점을 중심으로 상하로 통통 튀기도 하고, 평평한 바닥과 맞닿아 특정 방향으로 힘이 가해질 경우 굴러가기도 합니다. 힘에 의해서 운동성을 가지게 되는 것인데요. 평면에서의 원 또한 회전축을 중심으로 돌아가는 성질을 가지고 있습니다. 자전거 바퀴나 CD가 재생될 때의 모습이 그러합니다. 이러한 특성 때문에 사람들은 원을 떠올릴 때 정지되어 있는 정적인 모습보다 동적인 원의 모습을 자연스럽게 떠올립니다.
    공과 바퀴
    원과 구의 상하운동, 평행운동, 회전운동

    2) 연속성과 순환성


    시계, 전화기 다이얼, 나침반, 저울 계기판, 속도 계기판의 공통점은 무엇일까요?
    모두 일정한 범위 안에, 연속된 값이 나열되어 있다는 것입니다. 원의 곡선을 따라 일정한 간격의 단위 요소들을 배치한다면 연속된 값의 증감을 효과적으로 표현할 수 있습니다. 원은 흐름의 방향은 있으나 시작점과 끝점이 없어 중요도에 편견을 주지 않는 형태이기 때문에 나침반이나 전화기 다이얼과 같이 우선 순위가 없는 독립된 값들을 나열할 때 효과적입니다. 또한 순서대로 나열되어 있는 값들은 위치에 따라 상대적인 값을 예측할 수 있어서 수치를 측정할 때 용이합니다. 저울과 자동차 속도계가 대표적인 사례입니다. 더불어 원은 순환하는 개념을 표현하는데 효과적입니다. 시작하는 점과 끝나는 점이 같고 끝나는 점을 지나는 순간 새로운 시작이 이루어집니다. 때문에 시간과 같이 순환하는 개념을 적용하기에 매우 적합한 형태를 가지고 있습니다.

    시계, 전화기 다이얼, 나침반, 속도계

    3) 완전성


    원은 완전함을 뜻하기도 합니다. 원의 형성 과정에서 그 의미를 찾아보았는데요. 자연에서 그 예를 발견할 수 있습니다. 자전과 공전에 따라 매일 모양이 다르게 보이는 달은 주기를 따라 점점 채워져 완전한 원의 형태로 변화합니다. 항성이 형성될 때는 중심에서 끌어당기는 힘으로 인해 하나의 점에서 원 형태의 물체가 완성되어집니다. 또 꽃이 피어나는 모습을 통해 하나의 중심점에서 같은 길이의 잎들이 피어나 원의 형태를 이루는 과정에서도 원의 완전성을 대입해 볼 수 있습니다. 원은 중심점을 기준으로 같은 거리에 있는 점들의 집합체라는 개념에서 형태적 완전성을 갖기도 하고, 채워지고 차오르는 원의 형성 과정을 통해 ‘정원=완전한 하나, 완전한 상태’라는 의미를 연상시킵니다.
    태극문양과 음양오행사상을 설명하는 상극도에서도 원형을 사용하는 것을 볼 수 있는데요. 이 때 원은 조화로운 하나의 세계, 상생하는 완전한 세계를 상징적으로 표현하고 있습니다.

    달의 변화, 태극문양, 음양오행상극도


    4) 부드러움과 여성성, 조화로움, 친근함


    원과 구는 자연 속에서 친숙한 형태입니다. 구 모양을 이루기 위한 나선형의 움직임이 에너지를 가장 효율적으로 쓸 수 있는 방식이기 때문인데요. 생명력이 있는 것들은 정확하게 딱 떨어지는 직선이 아닌 곡선의 형태를 띠며, 저마다의 곡선이 모여 자연 속에서 조화를 이루고 있습니다. 이 때문에 원은 인공적인 것과 반대의 개념으로 자연적인 느낌을 줍니다. 부드러운 곡선에서 느껴지는 여성성과 조화로움, 친근함은 원에서 느낄 수 있는 대표적인 감성으로 그 느낌을 표현하고자 하는 사물에서 찾아볼 수 있습니다. 사례는 너무나 많지만 장식품, 인형 등이 있습니다. 얼마 전 개봉한 디즈니의 애니메이션 빅 히어로의 주인공 베이맥스는 원형의 형태를 가진 곡선적인 느낌이 강조된 로봇인데요. 비록 실제하지 않는 애니메이션 속의 캐릭터지만 그 형태를 통해 기존에 로봇에 대한 낯설고 인공적이며 딱딱한 이미지가 아닌 친근함과 부드러운 존재로 느낄 수 있었던 사례입니다.
    자연 속의 원형, 영화 '빅 히어로'의 Baymax

    4. IT 기기의 스크린 속 원형 인터페이스 사례


    이제부터는 스크린 속 원형 인터페이스에 대한 이야기를 해보려고 합니다. 2000년대 부터 현재까지 IT 기기는 짧은 기간동안 많은 발전이 있었습니다. 특히 터치 스크린의 등장과 함께 휴대용 기기에서 사용되던 하드키들이 스크린 안으로 들어오게 되면서 기존 인터페이스에서는 없었던 새로운 경험이 가능하게 되었습니다. 그 중 스크린 안에 원 메타포가 적극적으로 활용된 사례들을 살펴 보았습니다. 원형 사물 자체를 스크린 안에 현실감있게 녹여내기도 하고, 사용자와 상호작용하는 인터랙션 방식, 모션에서 원의 특징을 녹여내기도 합니다. 앞에서 설명드린 원의 특징들이 스크린 속에서 어떻게 활용되고 있는지 살펴보도록 하겠습니다.

    1) 원의 '형태적인 메타포'를 그래픽으로 가져온 경우


    아이폰의 나침반이나 Tesla, BMW 등 자동차 디지털 계기판을 보면 기존의 형태가 그대로 스크린 속에 표현되어 있습니다. 고유의 형태가 사람들에게 깊이 각인되어 있고 스크린 속에 자연스럽게 녹여낼 수 있는 경우, 실제 형태 자체를 그래픽으로 옮기기도 합니다. 이러한 인터페이스는 현실의 경험이 디지털 속에서 그대로 연장되기 때문에 우리의 머리 속에 이미 존재하는 멘탈모델을 통해 익숙하게 그 의미를 받아들이고 사용할 수 있다는 장점이 있습니다. 이때 조작 방식은 터치 스크린에 적합한 인터랙션 방식이 새롭게 적용되기도 하고, 기존에 실제로 취하던 방식을 그대로 인터랙션으로 적용하기도 합니다.
    iPhone 나침반, Sol Calender, Tesla Instrument Cluster

    2) 원형 물체의 '물리적인 경험'을 인터랙션 방식으로 가져온 경우


    원은 모서리가 없기 때문에 자연스럽게 굴리고 돌리는 이미지가 떠오릅니다. 원형 물체의 조작 방식에 있어 조그 다이얼(Jog dial / Jog & shuttle)이 대표적입니다. 이 방식은 회전 조작 인터페이스로 비디오 녹화기에서 주행 조절과 영상 화면 선택을 빠르고 정밀하게 해주는 편리한 조정 장치로 쓰여 왔습니다. 원형 물체에서 쓰이던 이 조작 방식은 IT기기의 발전과 함께 원형 컴포넌트에 적용되어 스크린 안에서도 쓰여지고 있습니다.
    2000년대 초 iPod의 Click Wheel은 터치 방식에 조그 다이얼 인터랙션을 적용하여 리스트 탐색, 음량 조절 시 빠르게 원하는 지점으로 설정할 수 있도록 하여 기존 사용 방식에 큰 반향을 불러일으켰습니다. 이후 터치 스크린에서도 조그 다이얼 인터랙션이 많이 이용되고 있는데요.
    강연 컨텐츠를 제공하는 TED App의 시간 UI에 사례가 있습니다. TED와 Rolex의 콜라보 작업을 통해 개발된 이 앱은 컨텐츠를 소비할 때 내게 주어진 시간에 맞추어 필터링할 수 있도록 시간 길이를 설정할 수 있는 기능을 제공합니다. 원형의 시계 메타포에 휠 인터랙션을 이용하여 시간을 조작할 때 보다 직관적으로 인지할 수 있게 합니다.
    아이폰의 나침반 앱의 경우 터치 인터랙션을 이용하진 않지만 자이로스코프(gyroscope)를 감지하여 사용자가 외부적으로 돌리는 액션을 취하면 작동하는 물리적인 조작 방식을 그대로 이용하고 있습니다.
    2013년 말 google에서 제공했던 google zeitgeist 2013 웹페이지에서도 원형 물체의 조작 방식을 적용한 것을 볼 수 있습니다. 이 웹페이지는 한 해 동안의 키워드를 회고해보는 서비스였는데요. 지구를 스크린 안에 담고 지구본처럼 돌려보는 인터랙션을 구현하였습니다. 보여주고자 하는 정보(세계 각 국의 주요 키워드)와 맥락에 맞는 인터랙션으로 즐거운 경험을 제공하였습니다.
    이와 같은 사례에서 볼 수 있듯이 원이라는 형태와 원에서 효과적인 조작 방식은 모든 상황에 적용하기엔 어려울 수 있지만, 맥락에 맞게 사용된다면 기존에 제공되던 방식보다 더 새롭고 유용하게 쓰일 수 있습니다.
    iPod Classic, TED Application, Google Zeitgiest 2013

    3) 원이 갖는 '운동성'을 모션에 녹여낸 경우


    Interface 설계 시 사용자 액션에 대한 리액션, 오브젝트 간 트랜지션 등 모션을 통한 인터랙션이 점점 더 강조되고 있습니다. 원의 경우 본래 가지고 있던 운동성을 이용하여 다른 형태보다 다양한 모션이 활용될 수 있을텐데요. 자연스러운 애니메이션을 강조한 google material design에서 터치하거나 페이지 전환, 오브젝트들이 이동할 때 실제 원의 운동 원리를 적용하여 부드럽고 실제감있는 움직임을 전달합니다.
    aaImpossible Dial 등의 게임에서도 돌아가는 원의 운동성을 이용하거나 확장되고 축소되는 원 컴포넌트를 활용한 사례를 많이 볼 수 있습니다.
    또한 원은 시작과 끝점이 없고 계속해서 순환한다는 특징을 앞서 설명드렸었는데요. 스크린 안 에서 돌아가는 원 애니메이션은 Loading Circle 로 쓰이며 현재 상황의 끝이 언제인지 모르는 경우, 불특정한 시간을 기다려야 하는 경우 순환과 계속의 의미로 활용되고 있습니다.
    aa, Impossible Dial, Circle Motion, Skype Qik, Moves


    Loading Circle

    4) 원의 '상징적인 의미'를 이용한 경우


    원이 갖는 ‘완전성’이라는 상징적인 의미를 이용한 원형 컴포넌트도 있습니다. 아이폰 수평자는 0°가 되었을 때 두 원이 완전히 결합하는데요. 완벽하게 결합된 정원의 형태가 주는 의미와 수평이 딱 맞는 상황이 잘 매치됩니다. 아이폰에서 어플 다운로드 진행 시 원이 차오르는 컴포넌트를 사용하고 있으며 모두 완료되었을 상태를 때 꽉 찬 정원으로 표시합니다. 영상 녹화 기능을 사용하는 Snapchat이나 Skype Qik 앱에서는 전송할 수 있는 비디오 용량이 제한되어 있는 것을 원 컴포넌트가 채워지는 형태로 표시하여 최대 용량을 표시하기도 합니다. 원의 완전한 상태를 통해 ‘완성, 완료, 꽉 찬’의 의미를 자연스럽게 떠올릴 수 있습니다.
    iPhone 수평자, Snapchat, Skype Qik

    5. 원형 디스플레이의 등장


    지금까지 원의 특징과 IT 기기의 스크린 속 원의 적용에 대해서 정리해보았습니다. 일반적으로 ‘스크린(Screen)’이나 ‘모니터(Monitor)’라고 하면 사각형 디스플레이를 떠올리게 됩니다. 이런 사각형 디스플레이는 IT기기의 발전과 함께 다양한 곳에 여러가지 형태로 활용되어 왔습니다. 가로 세로 비율의 차이는 있지만 사각형이라는 프레임(Frame) 안에서 광범위하게 활용 되었습니다. 그러나 최근에는 그 틀을 깨는 이형(Free Form) 디스플레이가 등장하기 시작했습니다. 이형(異形)은 글자 그대로 사물의 성질, 모양이 기존의 형태와 다르다는 것입니다. 직사각형이 아니라 원형, 마름모 등 다양한 형태를 가진 디스플레이가 등장하기 시작한 것입니다. 컨텐츠는 점점 다양화 되고, 제품 차별화를 위해 많은 노력을 기울이는 가운데에 스크린 프레임의 변화를 시도하기 시작한 것입니다. 최근 이슈에 되고 있는 Smart Watch 등에서 자주 볼 수 있는 원형 디스플레이가 대표적인 사례입니다.
    두 번째 편에서는 원형 디스플레이에 대한 등장과 특성을 분석해보고 원형 디스플레이의 강점과 한계를 점검해보도록 하겠습니다.




    이미지 출처 및 참고 자료




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


    Trackback 0 Comment 0
    Ad Test...