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

2015. 3. 31. 07:50ㆍUI 가벼운 이야기
알 수 없는 사용자

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


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


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

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


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에서 터치하거나 페이지 전환, 오브젝트들이 이동할 때 실제 원의 운동 원리를 적용하여 부드럽고 실제감있는 움직임을 전달합니다.
aa나 Impossible 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 등에서 자주 볼 수 있는 원형 디스플레이가 대표적인 사례입니다.
두 번째 편에서는 원형 디스플레이에 대한 등장과 특성을 분석해보고 원형 디스플레이의 강점과 한계를 점검해보도록 하겠습니다.


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


이미지 출처 및 참고 자료



관련글

댓글 0

티스토리툴바