원형 UI 분석 리포트 2편 - 원형 디스플레이의 등장과 인터페이스 특성
2015. 4. 1. 07:55ㆍUX 가벼운 이야기
이번 원형 UI에 관한 3편의 시리즈는 pxd Innovation Group의 김동후 선임연구원 / 정유리, 김서연, 임혜진 주임연구원이 공동 저술한 글입니다. 이미지 출처는 글 하단에 표기하였습니다.
일반적으로 ‘스크린(Screen)’이나 ‘모니터(Monitor)’라고 하면 사각형 디스플레이를 떠올리게 됩니다. 이런 사각형 디스플레이는 IT기기의 발전과 함께 다양한 곳에 여러가지 형태로 활용되어 왔습니다. 목적에 따라 가로 세로 비율의 차이는 있지만, 사각형이라는 프레임(Frame)을 유지해 왔습니다. 그러나 최근에는 그 틀을 깨는 이형(Free Form) 디스플레이가 등장하기 시작했습니다. 이형(異形)은 글자 그대로 사물의 성질, 모양이 기존의 형태와 다르다는 것입니다. 직사각형이 아니라 원형, 마름모 등 다양한 형태를 가진 디스플레이가 등장하기 시작한 것입니다. 컨텐츠는 점점 다양화 되고, 제품 차별화를 위해 많은 노력을 기울이는 가운데에 스크린 프레임의 변화를 시도하기 시작한 것입니다.
최근 Smart Watch 등에서 자주 볼 수 있는 원형 디스플레이가 대표적인 사례입니다. 하지만 원형 디스플레이 제작은 제작 공정이 매우 어렵다고 합니다. 커팅 난이도가 높고 픽셀 구조와 회로 설계를 달리해야 하며, 대량 생산이 어려워 패널 단가가 높다는 문제가 있기 때문입니다. 그러나 기술적인 제약을 극복하면서 원형 디스플레이를 활용한 제품이 여기 저기서 나타나고 있습니다. LG G3 Quick Circle, Nest, Zibo와 같은 제품을 통해 원형 디스플레이 형태로 표현하고자 하는 시도들이 있었습니다. 물론 이 제품들이 디스플레이를 동그랗게 커팅하여 구현한 제품은 아니라고 추측합니다만(G3는 확실히 아니죠), 원형 디스플레이에 대한 니즈를 확인할 수 있었습니다. 하지만 아직 완성도 높은 사용자 인터페이스(User Interface)를 제공하고 있느냐에 대해서는 검증이 되지 못한 것 같습니다. 그래서 이번 시리즈에서는 원형 디스플레이의 특성을 분석해보고 완성도 높은 UI설계를 위해서 어떻게 해야 할지 고민해보는 시간을 가져보려고 합니다.
그렇다면 원형 디스플레이는 일반 디스플레이와 비교했을 때 어떤 특징이 있을까요? 원형의 형태적인 특징이 무엇일지, 그리고 그 위에 UI를 설계하기 위해서 어떤 고민을 해야 할지 원의 조형적 특성과 함께 알아보겠습니다.
원은 중심에서 가장자리까지의 거리가 모두 동일합니다. 그렇기에 세로와 가로의 길이도 같습니다. 이미 프레임 자체에서 상하 좌우로 균등한 밸런스를 가지고 있기 때문에 프레임 내부의 요소들이 균형이 맞지 않으면 시각적으로 어색해 보인다는 것이 특징입니다. 여기서 말하는 균형이란 상하 좌우의 요소들이 한쪽으로 지나치게 치우치지 않고 고르게 분포되는 것을 의미합니다. 특히 원을 세로축을 기준으로 반으로 나누었을 때 좌우 영역의 균형은 조금만 틀어져도 눈에 잘 띄게 됩니다.
또, 원형 프레임은 중심을 향하는 특성을 가지고 있습니다. 일반 사각형 프레임의 직사각형 외곽선은 4개의 다른 직선이 4개의 꼭짓점에서 만나 있는 형태입니다. 그래서 이 4개 직선의 방향대로 내부 영역을 구분지었을 때, 자연스럽게 격자 무늬의 그리드가 형성됩니다(Grid-based). 반면, 원형의 외곽선은 완전한 하나의 선으로 이루어져 있고, 특정한 방향 없이 중심을 기준으로 회전하는 모양입니다. 따라서 평행한 라인보다는 중앙을 향하는 동심원 형태 혹은 중앙에서 뻗어나오는 방사형 형태처럼 중앙을 기준으로 하는 라인이 외곽선 형태와 자연스러운 균형을 이루게 됩니다 (Center-based). 그러나 스크린 활용도와 컨텐트의 가독성를 고려했을 때, 위와 같은 그리드는 그대로 적용하기엔 어렵고 비효율적입니다. 화면 요소들을 화면 전체에 여유 공간 없이 고르게 분포시켜야 하기 때문입니다. 이러한 구조는 복잡한 기능 없이 동일한 레벨 선상에 있는 요소들을 나열하는 등 특수한 경우에는 활용할 수 있습니다. 그러나 일반적인 화면에서는 기존 사각 프레임에서 사용하던 화면 구성 방식을 원형 프레임과 어울리는 방향으로 변형하여 조형적 안정감과 실질적인 사용성을 고려하는 절충안이 필요합니다.
정사각형에서 정원의 영역만 활용하게 된다면 정원을 제외한 각 '귀퉁이 영역', 즉 정사각형 면적의 21.5%를 버리게 됩니다. 이 영역이 버려지는 것은 단지 전체 면적의 21.5%가 축소되는 것 이상으로 비효율적인데, 그 이유는 이 영역이 사각형 프레임에서 주 컨텐트를 제외한 다양한 화면 요소와 글로벌한 기능이 위치하던 곳이기 때문입니다. 귀퉁이 영역은 언제든 접근하기 쉽고, 사용자의 시선에 방해가 되지 않습니다. 때문에 이 영역은 화면 요소가 많아도 크게 복잡해 보이지 않는다는 장점을 가지고 있습니다.
위 예시에서 표시된 영역이 모바일 디스플레이에서의 ‘귀퉁이 영역’ 이라고 할 수 있겠는데요. 모바일에서 이 영역을 살펴보면 페이지 이동 또는 다른 페이지 탐색을 위한 기능(Back키, 메뉴 키), 혹은 현재 페이지의 부가적인 기능(검색, 더 보기) 등이 존재하는 것을 알 수 있습니다. 특히 아이폰 UI에서 Back 키가 항상 좌측 상단에 위치하는 구조나, 안드로이드에서 햄버거 메뉴 버튼이 좌측 상단에 위치하는 구조는 대부분의 앱에서 보편적으로 사용하고 있습니다. 이렇게 계층 구조를 넘나드는 버튼은 위치가 고정되어 있지 않으면 사용자를 매우 혼란스럽게 할 수 있기 때문입니다.
그러나 원형 프레임에서는 이 영역이 없기 때문에 이러한 화면 요소들이 들어갈 위치를 찾기 어려워졌습니다. 특히 Back 키, 메뉴 키와 같은 버튼의 위치가 애매해져 복잡한 계층 구조를 표현하기 어려워졌다는 것이 큰 특징입니다. 또한 모바일에서 컨텐트 영역과 글로벌 메뉴 영역을 구분짓던 Navigation Bar도 원형 프레임 내에서는 표현하기 어렵거나 표현해도 축소되기 때문에 모바일에서와 동등한 기능을 수행할 수 없습니다. 따라서 원형 프레임에서는 사용자가 메뉴 요소와 컨텐트 영역을 잘 구분할 수 있도록 도와주어야 합니다.
무엇보다 원형의 면적 자체가 사각형에 비해 제한적이기 때문에 많은 컨텐트를 한눈에 보여주기 어렵고, 때문에 화면에 표시되는 요소가 조금만 많아져도 시각적으로 복잡해 보입니다. 따라서 원형 디스플레이에서는 이러한 특징을 고려하여 복잡한 화면 요소를 배제하고 한 페이지에서 보여주는 정보를 최대한 간결하게 표시하는 것이 좋습니다.
직사각형 프레임을 가진 스크린은 세로 혹은 가로의 방향성을 가지고 있습니다. 때문에 시선이 일정한 방향으로 자연스럽게 흐릅니다. 그에 반해 정원은 한쪽으로 흐르는 방향성을 찾기가 어렵기 때문에 시선 방향을 예측하기 어렵습니다. 이것은 원형 디스플레이의 단점이 될 수도, 장점이 될 수도 있습니다. 모바일의 경우 세로가 길어 자연스럽게 시선이 상단에서 하단으로 이동합니다. 그래서 상위 레벨에 있거나 중요한 요소는 상단에 배치하고 부가적인 요소를 하단에 배치하는 경우가 많은 반면, 원형은 컴포넌트의 위치에 따른 중요도 부여가 쉽지 않습니다. 중심에 집중되는 특성이 있어 중앙에 있는 컨텐트가 가장 중요한 요소처럼 보이기도 합니다. 이러한 이유로 화면 내에 복잡한 hiearchy관계를 담지 않고 필요한 메시지만 보여 주는 것이 바람직합니다.
장점을 살펴보자면, 원형 프레임에서는 시선 방향이 정해져 있지 않기에 프레임 내부의 레이아웃을 통해 사용자의 시선을 유도할 수 있습니다. 외곽선의 형태를 따라 화면 요소들이 동심원을 그리는 레이아웃이라면 시선이 시계 방향으로 움직일 수 있고(검증된 사실은 아니라는 것을 밝혀둡니다), 세로로 배치하면 세로 방향으로, 가로로 배치하면 가로 방향으로 시선이 흐릅니다. 화면 정 중앙에 화면 요소가 있을 때 비교적 시선이 먼저 간다는 것을 제외하면 원형이라는 외곽선은 시선에 거의 영향을 끼치지 않습니다. 이를 잘 활용하면 상황에 따라 효과적인 레이아웃을 사용하여 사용자를 의도대로 유도할 수 있을 것입니다.
방향성이 열려 있다는 특징은 화면 요소의 움직임과도 연결됩니다. 사각형 프레임에서는 직선의 방향성을 활용하여 폴딩 메뉴나 좌우 플리킹처럼 상하좌우에서 평행으로 발생하는 UI가 주로 사용됩니다. 그러나 원형은 정해진 방향이 없기 때문에 사각형 프레임에 비해 다양한 움직임을 사용할 수 있습니다. 특히 원형 프레임의 중심 집중적인 특성(Center-based)을 고려하면 중심을 기준으로 확장과 수축, 또는 회전하는 움직임이 원형 프레임에서 자연스럽다고 할 수 있겠습니다. (*이것은 도형의 조형적인 특성에 따른 분석일 뿐, 원형 프레임에 폴딩 메뉴나 플리킹 방식이 부적합하다는 것은 아닙니다. 오히려 기존의 인터페이스 경험을 고려하면 사용자에게 익숙한 방식이 사용성 면에서 더 나을 수도 있습니다. 다만 원의 조형적 특징을 고려하여 더욱 조화로운 쪽을 따져보았을 때 후자 쪽이 자연스럽다는 의미입니다.)
위 글에서 자주 언급했듯이, 원이라는 도형의 조형적인 특성과 그로 인해 원형 디스플레이가 나아가야 할 방향이 언제나 일치하는 것은 아닙니다. 분명 원형 내에서 안정감을 주는 레이아웃은 어느 정도 정해져 있지만, 안정감 있는 레이아웃이 사용성을 보장하는 것은 아니므로 두 가치 사이에 충돌이 발생할 수 있습니다. 만약 사용성을 더 비중있게 생각한다면 사각형 디스플레이에서의 사용자 경험을 무시할 수 없습니다. 우리는 이미 오랜 시간 사각형 디스플레이 환경에서의 인터페이스에 익숙해져 왔고, 또 그만큼 시행착오를 거쳤기에 사용성이 검증된 인터페이스 구조가 이미 존재합니다. 때문에 전혀 새로운 원형 인터페이스를 발굴하는 것보다 어느 정도 기존의 룰에 따르되, 그것을 원형이라는 프레임 안에 잘 녹여내는 것이 효율적인 방법입니다. 따라서 원형 디스플레이의 화면을 설계할 때는 화면의 사용성과 화면 내의 조형적인 안정감 두 가지 측면을 모두 고려하며 설계하는 것이 관건이라고 볼 수 있겠습니다.
그렇다면 원형 프레임만의 강점은 무엇이 있을까요? 일반 디스플레이와 달리 원형이기에 가능한 강점과 원형 프레임의 매력에 대해서 알아보겠습니다.
먼저, 원형의 프레임이 가지는 강점 중 하나는 화면의 집중도가 높다는 점입니다. 사각형 프레임과 달리 '귀퉁이 영역'을 덜어냄으로써 컨텐트가 보여지는 주요 영역 밖으로 시선이 흐르는 것을 막아주기 때문입니다. 특히 중앙에 집중되는 특성(Center-based) 때문에 사용자는 화면의 정 중앙에서 보여주는 정보에 가장 집중하게 됩니다. 사용자의 시선은 바깥으로 빠져나가지 않고, 자신의 task에 온전히 집중하게 됩니다. 따라서 사용자에게 어떤 정보를 제공하고자 하는 맥락에서는 원형 프레임이 확실히 유리하다고 볼 수 있습니다.
원형 프레임은 특히 원형의 메타포와 원형에 어울리는 인터랙션을 활용했을 때 더욱 효과적입니다. 시계, 조그와 같이 현실에서 원 형태인 사물의 특징을 화면에 적용했을 때 사용자가 이미 인지하고 있는 멘탈 모델과 일치하기 때문에 직관적인 사용과 즐거운 경험을 제공할 수 있습니다. 다만, task가 조금만 복잡해지면 오히려 직관적인 조작에 방해가 될 수 있어 단순한 task에서 사용하는 것이 적절합니다. 예를 들면, 시계를 메타포로 시간을 설정하는 UI화면을 설계한다고 했을 때, 단순한 시간 설정이라면 시계 메타포를 활용하는 것이 효과적이지만, 다양한 시간을 한 화면에서 설정해야 한다거나 구간을 설정하는 기능 등이 들어간다면 시계 메타포를 유지하며 기능을 화면 내에 표현하기 어려워 집니다.
모션 출처(좌) / 모션 출처(우)
원형 프레임에서 원을 이용한 트랜지션 효과 등 모션을 활용하는 방식은 매우 효과적입니다. 원은 공, 바퀴, 훌라후프, 원반, 눈동자 등 주로 '동적인 물체'와 닮은꼴을 가지고 있기 때문에 원의 다이나믹한 움직임은 매력적으로 다가옵니다. 따라서 이것을 인터페이스의 움직임으로 활용하면 UI 사용 경험을 한층 즐겁게 변화시키는 요소가 될 것입니다. 또, 원형 프레임은 이전까지 존재하지 않았던 프레임이기 때문에 형태 자제만으로 신선합니다. 프레임 자체가 새로와서 기존에 존재하던 UI를 원형 프레임 안에 잘 녹여내는 것도 사용자에게 신선하게 느껴질 수 있습니다. 원형 프레임의 특성을 잘 고려하여 사용자의 task를 방해하지 않도록 주의한다면, 사용자는 원형 프레임에서 즐거운 사용 경험을 제공 받게 될 것입니다.
원형 디스플레이의 구현에서 원형의 조형적 특성 때문에 어쩔 수 없이 발생하는 한계는 무엇이 있는지 알아보겠습니다.
위에서도 언급했듯이, 원형은 시각형의 모서리 부분인 ‘귀퉁이 영역’이 없습니다. 따라서 같은 컨텐트를 노출해도 원형은 사각형에 비해 손실되는 부분이 생깁니다. 특히 한 화면에서 많은 양의 정보를 보여주는 경우, 예를 들면 사각형 디스플레이에서의 썸네일 뷰처럼 화면에 꽉 차게 컨텐트를 나열했을 때 귀퉁이 영역 부분에서 컨텐트의 일부가 손실됩니다. 그러나 이런 면적의 손실은 한 화면에서 보여지는 컨텐트를 축소한다거나 레이아웃의 변화를 주는 것으로 최대한 극복이 가능합니다. 더 중요한 것은 '귀퉁이 영역’의 부재로 화면을 효율적으로 구성하기 어려워 졌다는 점입니다. 화면 요소가 많은 컨텐트 화면을 원형 디스플레이에서 구현할 때, 귀퉁이 영역을 활용할 수 없기 때문에 상대적으로 컨텐트보다 중요도가 낮은 화면 요소들이 갈 곳을 잃게 됩니다.
사각형 프레임에서는 Navigation Bar 등 화면 내에서 구획을 나누는 방식으로 구분 짓고 있어서 해당 영역 내에서는 화면 요소가 많아져도 화면 레이아웃을 크게 흔들지 않았습니다. 그러나 원형 프레임에서는 영역의 구분이 쉽지 않습니다. 원형에서도 구획을 나누어 Navigation bar를 만들 수는 있겠지만, 양 끝이 좁아지는 형태이므로 다양한 컴포넌트를 배치하기에 효율적인 방법은 아닐 것 같습니다. 또한 원형은 원의 라인을 충분히 활용했을 때 매력적인 프레임이기 때문에, 구획을 나누는 것은 원형을 효과적으로 활용하지 못한 결과가 될 수 있습니다. 따라서 원형 프레임에서 화면 설계시, Main Task를 보여주는 것에 중점을 두고 시각적으로 복잡해 보이지 않도록 최대한 간소화하는 것이 좋습니다.
원은 중심을 기준으로 가장자리까지의 거리가 모두 동일하다는 특징을 갖고 있고, 이런 독특한 특성은 컴포넌트의 배치를 매우 제한적으로 만들기도 합니다. 예를 들어, 텍스트나 화면 요소가 세로축을 기준으로 가운데에 정렬되어 있지 않고 좌우 중 한쪽으로 치우쳐 있게 되면 어색해 보입니다. 반으로 접었을 때 데칼코마니처럼 양쪽의 모양이 대칭이 되어야 정리되어 보인다는 점이 원형의 구조적인 특징입니다. 반면 가로축을 기준으로 상하로는 조금 치우쳐 있어도 이상하지 않은데, 이것은 상단에서 하단으로 읽어내려가는 기존 스크린에서의 경험이 있기 때문에 그렇지 않을까 생각합니다. 혹은 위의 예시처럼 우리가 이미 익숙한 사람의 얼굴이 좌우는 같지만 상하로는 다른 요소(?)를 가지고 있기 때문에 비슷한 형태의 원형 프레임에서 그렇게 느낄 수도 있다고 생각됩니다. 이렇듯 좌우의 균형이 맞아야 자연스러워 보인다는 점은 레이아웃을 고민할 때 장애물로 다가올 수밖에 없습니다.
원형의 디스플레이는 프로그래밍과 패널 개발에 있어 높은 기술력을 요구하고 단가가 매우 높아서 대중화가 힘들다는 한계가 있습니다. 기존의 사각 화면과 다른 독자적인 알고리즘이 필요하기에 프로그래밍 상으로 동그라미를 구현하는 것은 사각형을 구현하는 것보다 훨씬 복잡합니다. 또한 투명하거나, 애니메이션이 있거나, 색깔 변화가 많을수록 많은 프로세싱 파워를 요구합니다. 또한 픽셀은 사각형이지만 화면은 원형이므로 가장자리 부분에는 픽셀을 계단식으로 구현해야 하기 때문에 일반 디스플레이와 다른 픽셀 구조와 회로 설계가 필요합니다. 이에 따른 정교한 커팅 기술이 필요함은 물론이고, 패널을 사각형이 아닌 원형으로 커팅하게 되면서 버려지는 면적이 나오게 되어 상당한 비효율을 초래할 것으로 예상됩니다. (기사 원문)
원이라는 형태는 사람들에게 친근하고 부드러운 경험을 제공합니다. 또한 핵심 정보에 대한 집중도를 높여주고 시각적으로 새로운 경험을 제공한다는 강점이 있습니다. 하지만 위에서 언급했던 것처럼 화면에 제약이 많아 한 번에 많은 정보를 표시할 수 없고 복잡한 계층 구조를 표현하기에 적합하지 않은 플랫폼이기도 합니다. 그래서 원형 인터페이스를 설계할 때는 어려움이 많습니다. 아직 상용화 된 제품이 많아 잘된 UI의 사례를 찾기도 어렵습니다. 그 말은 앞으로 발전할 여지가 많다는 뜻이기도 합니다.
3편에서는 “원형 디스플레이에 인터페이스 설계 시의 가이드라인” 에 대해서 정리해보려고 합니다.
- 이미지 출처 및 참고 자료 -
원형 UI 분석 리포트 1편 - 원의 조형적 특징과 원형 인터페이스
원형 UI 분석 리포트 2편 - 원형 디스플레이의 등장과 인터페이스 특성
원형 UI 분석 리포트 3편 - 원형 디스플레이 UI 디자인 가이드라인
원형 UI 분석 리포트 2편 - 원형 디스플레이의 등장과 인터페이스 특성
원형 UI 분석 리포트 3편 - 원형 디스플레이 UI 디자인 가이드라인
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편에서는 “원형 디스플레이에 인터페이스 설계 시의 가이드라인” 에 대해서 정리해보려고 합니다.
- 이미지 출처 및 참고 자료 -
- 원형 모션 출처 1 https://dribbble.com/shots/1685637-Twisting-Dribbble-Circle?list=searches&tag=circle&offset=67
- 원형 모션 출처 2 https://dribbble.com/shots/1686759-Sphere-Wave?list=users&offset=36
- '동그란' 스마트워치, 나오기 힘든 이유는? http://news.inews24.com/php/news_view.php?g_serial=827360&g_menu=020800