2019. 12. 23. 07:50ㆍGUI 가벼운 이야기
|
디자인 시스템은 총 8편의 시리즈로 구성되어 있습니다. 1편 - 디자인 가이드라인/디자인 시스템은 왜 필요한가 |
특수 컴포넌트가 필요한 이유
우리가 보는 모바일 앱 화면은 컬러, 타이포그래피 등의 기본 시각 요소와 컴포넌트를 사용하여 기능을 구체화한 결과물입니다. 어떤 목적의 기능을 디자인하느냐에 따라 인풋 필드가 필요하기도, 데이터 테이블이 필요하기도 합니다. 이때 기능의 목적을 잘 드러낼 수 있는 컴포넌트를 적절하게 선택해야 합니다.
차량이나 전등과 같은 제품을 조작하는 기능은 특수한 목적을 가집니다. 기존에 없던 새로운 기능으로 특별한 경험을 제공하고자 하는 기능도 마찬가지입니다. 이렇게 특수한 목적을 가진 기능들은 Material design처럼 일반적인 표현과는 구분되는 독특한 표현이 필요합니다. 이 글에서는 특수 컴포넌트를 '특수한 목적을 고려한 표현'이라고 정의합니다. 기능의 목적을 어떤 형태와 인터랙션으로 표현할 수 있는지, 또 여기서 고려해야 할 점은 무엇인지 사례와 함께 살펴보겠습니다.
특수한 목적을 고려한 다양한 표현
1. 직관적인 인지를 돕기 위한 표현: 실물과 닮은 컴포넌트
제품을 모바일상의 인터페이스를 통해 조작하는 경우, 제품이 가진 물리적 속성을 컴포넌트에 반영하는 것이 좋습니다. 형태 그 자체를 메타포로 사용하거나 유사한 조작 방식을 적용합니다. 이를 통해 사용자는 오프라인에서의 경험을 떠올리며 기능을 직관적으로 인지하고 사용할 수 있습니다.
스마트 홈 앱 Moorgen은 블라인드 조작 방식을 그래픽과 조작부에 반영하였습니다. 블라인드 그래픽 위에 슬라이더를 두어 원하는 위치까지 블라인드를 올리고 내릴 수 있도록 했습니다. Ecobee와 Nest처럼 제품 조작 방식에 따라 같은 기능을 다르게 표현할 수도 있습니다. Ecobee는 온도의 높낮이를 표현하는 데 상하 슬라이더를 사용했고, 원 안의 숫자를 길게 눌러 온도를 조절할 수 있도록 했습니다. Nest는 휠을 회전하여 온도를 조절하는 방식을 사용했으며, 모바일에서 이 방식을 플랫하게 바꾸어 원 위의 Bar를 드래그하는 방식으로 표현하였습니다.
2. 실수·오작동을 방지하기 위한 표현: 허들이 있는 컴포넌트
OS나 제품 조작부를 표현할 때에는 실수나 오작동을 방지할 수 있는 컴포넌트를 사용하는 것도 좋은 방법입니다. 동작 결과가 사용에 불편함을 주거나 안전에 영향을 줄 수 있기 때문인데요. 사용자가 조작 방법을 알고 있을 만큼 익숙한 형태를 사용하되, 작은 허들을 줌으로써 주의를 기울여 조작하도록 합니다. 또한 안내 문구를 제공하여 동작 결과를 예상하고 조작할 수 있게 하는 것이 좋습니다.
실수를 방지하기 위한 인터랙션의 대표적인 예로 아이폰의 전원 종료 버튼이 있습니다. 버튼을 누른 채로 특정 위치까지 드래그해야만 기능이 동작하기 때문에 실수로 아이폰을 종료하는 상황을 방지할 수 있습니다. 또 다른 예로는 드론 이륙 버튼을 롱 프레스 버튼으로 표현한 DJI Fly가 있습니다. 이 앱에서는 이륙 버튼을 누르면 1.2m 고도까지 자동으로 이륙하므로 조작에 특별한 주의가 필요합니다. 따라서 팝업을 통해 한 뎁스를 더 들어가게 하여 사용자로 하여금 조작하고자 하는 바를 확인하게 합니다. 그리고 일정 시간동안 이륙 버튼을 눌러 원형의 트랙을 채워야 작동하도록 했습니다. 이와 유사한 사례로 Mercedes Me의 도어락 기능을 들 수 있습니다. 원형의 잠금 버튼을 일정 시간 이상 길게 눌러야 원이 커지며 화면을 채우고 동작이 완료됩니다.
3. 제대로 작동하고 있다는 신뢰감을 주기 위한 표현: 피드백을 제공하는 컴포넌트
제품을 모바일상의 인터페이스를 통해 조작하는 경우, 사용자는 제품이 의도한 대로 작동하고 있는지 의문을 가질 수 있습니다. 따라서 사용자에게 신뢰감을 줄 수 있도록 조작에 대한 피드백을 시각적으로 보여줘야 합니다. 피드백은 조작 완료까지의 딜레이 여부에 따라 다양한 방식으로 표현할 수 있습니다.
Mercedes Me의 원격 시동 버튼은 차량과의 통신에서 딜레이가 생길 수 있기 때문에 딜레이를 포함한 피드백을 제공합니다. 시동 버튼을 누르면, Progress indicator가 버튼 주변의 트랙을 회전하며 진행 상태를 표현합니다. Progress indicator는 완료 시기를 예측하기 어려운 경우 Indeterminate indicator를 사용하고, 완료까지 얼마나 남았는지 명확하게 표현할 수 있는 경우 Determinate indicator를 사용합니다.
반면, Google home은 딜레이 없이 즉각적인 피드백을 제공하는 사례로 볼 수 있습니다. 이 앱은 차량에 비해 즉각적으로 반응하는 IoT 제품을 조작합니다. 따라서 조작에 대한 피드백을 On/Off의 상태 변화로 제공하며, 레이블과 함께 컬러가 바뀌거나 불빛이 켜지는 표현을 사용하고 있습니다.
4. 이미지·아이덴티티를 각인을 위한 표현: 기존의 형태를 계승하는 컴포넌트
특수한 표현 자체로 브랜드 아이덴티티를 보여줄 수 있습니다. Shazam은 2008년 처음 아이폰 앱을 출시한 이후 원형 버튼에 로고의 앞글자 S를 결합하여 음악 검색 기능을 표현하고 있습니다. 컬러나 파장 등의 시각 요소는 시간이 흐름에 따라 조금씩 바뀌었지만, 버튼은 과거의 디자인을 유지하여 Shazam을 떠올리게 하는 강력한 인지 요소로 사용하고 있습니다.
Soundcloud는 일반 음악 플레이어와는 달리 파형(Waveform)으로 트랙을 표현합니다. 초기 Soundcloud의 사용자는 음악가와 프로듀서, 사운드 엔지니어였습니다. 따라서 트랙을 듣고 디테일한 피드백을 제공할 수 있도록 파형에 직접 메모를 추가할 수 있는 컴포넌트를 사용했습니다. 이는 현재의 웹사이트와 모바일 앱에도 반영하여 유지하고 있습니다.
주의할 점
앞서 언급된 컴포넌트를 디자인 시스템으로 만들기 위해서는 고려해야 할 점이 있습니다.
시각적 차별점 제공
특수 컴포넌트와 일반 컴포넌트는 서로 다른 속성을 가지고 있기 때문에 그 차이를 빠르게 인지할 수 있도록 형태나 크기, 그래픽 표현 등에서 차별점을 주는 것이 좋습니다. 예를 들어, IoT 앱에서 전등을 끄는 버튼을 원형 버튼으로 표현한다면, 앱 내 콘텐츠나 설정에 관한 조작은 사각형의 버튼으로 표현합니다. 조작 대상에 따라 서로 다른 형태를 가지기 때문에 사용자는 어떤 컴포넌트로 제품을 조작할 수 있을지 예측할 수 있습니다.
일관된 인상 제공
특수 컴포넌트에 시각적인 차별점을 제공하더라도 일반 컴포넌트를 포함한 다른 시각 요소들과 어우러지는 일관된 인상을 유지하는 것이 필요합니다. 컬러나 타이포그래피의 인상을 고려하여 하나의 스타일로 느껴지도록 표현하는 것이 좋습니다.
일관된 디자인 룰 적용
특수 컴포넌트는 명확한 어포던스를 가진 컴포넌트로 디자인해야 합니다. 누를 수 있게 표현되었는지, 활성화/비활성화, 오류 등의 상태가 적절하게 표현되었는지 확인해야 합니다. 그리고 이러한 상태 표현은 일반적인 컴포넌트와 같은 디자인 룰을 사용하여 표현하는 것이 좋습니다. 사용자가 앱을 사용하는 동안 일관된 조작 방식으로 인지하고, 결과를 예상할 수 있도록 돕기 때문입니다.
마치며
이 글에서 소개한 특수 컴포넌트들이 각 목적을 표현하기 위한 정답은 아닙니다. 컴포넌트의 표현 방법을 고민하는 데에는 기능을 떼어 놓고 생각할 수 없기 때문에 기능의 목적이 무엇인지, 어떤 요소가 중요하게 표현되어야 하는지에서부터 시작해야 합니다. 특수 컴포넌트 또한 다른 시각 요소들과 마찬가지로 지속적인 커뮤니케이션을 통해 규칙을 만들어나가야 합니다. 그러므로 함께 디자인하는 사람들과 표현 방식과 규칙에 대해 끊임없이 의견을 나누는 것이 중요하며, 이 과정을 통해 한층 더 완성도 높은 결과물을 낼 수 있을 것입니다.
|
디자인 시스템은 총 8편의 시리즈로 구성되어 있습니다. 1편 - 디자인 가이드라인/디자인 시스템은 왜 필요한가 |