brunch

You can make anything
by writing

C.S.Lewis

by 오의택 Aug 08. 2022

UX 디자인의 기본, PUI 디자인

편리한 조작을 위한 PUI 디자인 원칙

"Hi Alexa"

최근 AI기술의 급격한 발전으로, 사용자들이 음성인식을 통해 다양한 IT 제품들을 조작하는 것을 이제는 손쉽게 볼 수 있게 되었습니다. 그렇지만 여러 트렌드 레포트지에서 말하고 있는 AI 기술의 발 빠른 확산에 대한 장밋빛 전망과는 달리, 우리는 아직도 물리 버튼이나 키보드와 마우스, 리모컨과 같은 전통적인 PUI(Physical User Interface)를 통해, 대부분의 IT 제품들을 조작해 사용하고 있습니다.


다양한 IT 제품들의 PUI <이미지 출처. celmetro>


생물이 환경의 변화에 적응하고 진화하듯이, 인터페이스도 기술의 발전과 사용자의 니즈에 따라 진화하는데요. 입력 방식은 물리 버튼에서 터치나 제스처 방식으로, 그리고 음성인식 방식으로 진화했습니다. 그렇지만 전통적인 입력 장치인 물리 버튼이나 키보드나 마우스, 그리고 리모컨과 같은 PUI가 5년 후, 10년 후, 아니면 20년 후에 우리 곁에서 사라질까요? 그렇지는 않을 것 같습니다. 왜냐하면 사용자는 새롭고 흥미로운 것을 좋아하지만, 반면에 익숙하고 편리한 것을 쉽게 버리지 못합니다.


우리는 아직도 일상에서 셀 수 없는 PUI를 접하면서 생활하고 있습니다. 아침에 일어나면 욕실 스위치로 불을 켜고, 손잡이를 돌려 문을 열고 들어가 세수를 합니다. 아침 뉴스를 들으려, 리모컨으로 TV를 켭니다. 냉장고 도어를 잡아 당겨 우유를 꺼내 마시고, 현관문을 밀고 나가 엘리베이터 버튼을 누릅니다. 차 도어를 당겨 차에 타고 시동버튼을 누르고, 기어를 바꾸고 가속페달을 밟으면서 핸들을 돌려 회사로 이동합니다. 회사로 향하면서 차와 연동된 스마트폰 전원버튼을 누르고 앱을 실행해 차안에서 음악을 듣습니다. 회사 자리에 도착해 노트북 전원버튼을 누르고, 마우스키보드로 업무를 시작합니다.


특히 입력 장치는 사용 맥락에 따라 편리한 방식이 다릅니다. 예를 들면 전자레인지의 온도와 같은 연속적인 값을 조절할 때는 여러 번 눌러야 하는 누름 버튼보다는 한 번에 돌려서 값을 이동할 수 있는 노브(knob)가 휠씬 빠릅니다. 겨울에 장갑을 끼고 있을 때에는 터치 스크린 조작이 어렵고, 대중교통을 이용할 때는 음성인식으로 스마트폰을 사용하기 곤란합니다. 이처럼 사용 맥락에 따라 절대적인 우위의 입력 방식은 존재하지 않을 수 있는데요. 이는 전통적인 PUI가 20년 후에도 여전히 우리 곁에서 공존할 수 있는다는 것을 의미할 수 있습니다.


그렇다면 이러한 PUI를 사용자가 조작하기 편리하게 하려면 어떻게 디자인해야 할까요? 사용자가수행해야 할 과업에 가장 효과적으로 지원할 수 있는 입력 방식을 선정하고, 사용자가 자연스러운 자세에서 접근이 편리해야 합니다. 또한 빠르고 정확하게 조작할 수 있도록 디자인해야 합니다. 이번 글에서는 사용자에게 편리한 조작 경험을 제공하기 위한 PUI 디자인 원칙에 대해 알아보도록 하겠습니다.




1. 과업에 따라 효과적인 조작을 할 수 있는 PUI 타입을 제공해야 합니다.


PUI는 다양한 제품들에 적용되어 있습니다. 특히 자동차에는 핸들, 레버, 페달, 누름 버튼, 노브, 썸휠, 스위치 등과 같이 정말 다양한 유형의 PUI들이 적용되어 있습니다.


제네시스 인테리어와 다양한 유형의 PUI <이미지 출처: www.genesis.com>


다른 IT 제품들을 살펴볼까요, 노트북에는 마우스와 키보드, 스마트폰에는 누름 버튼, 스마트 와치에는 노브와 누름 버튼, TV에는 누름 버튼과 리모컨으로 구성되어 있습니다. 집안의 가전 제품들을 살펴보면, 세탁기와 전자렌지에는 노브와 누름 버튼이 있습니다. 아직까지 대부분의 가전 제품들은 터치스크린보다는 물리 버튼으로 구성되어 있습니다.


다양한 가전제품들과 PUI <이미지 출처: www.lge.co.kr>


그렇다면 이번에 기획하고 있는 제품에는 어떤 PUI를 적용해야 할까요? 그건 기능을 실행하여야 하는 과업의 성격에 따라 사용자가 효과적으로 조작할 수 있도록 적절한 PUI 타입을 선정하여야 합니다. 특히 아래 표와 같이 사용자가 조작하고자 하는 정보의 유형에 따라, 이산형과 연속형 정보로 구분할 수 있고 이러한 정보를 조작하는 PUI 유형으로 구분할 수 있는데요. 여기서 이산형 정보(discrete information)의 조작은 작동과 멈춤과 같은 단순 조작(action), 여러 조건 중 선택(selection), 그리고 자료 입력과 같은 형태로 분류됩니다. 반면에 연속형 정보(Continuous information)는 정량적인 정보의 설정(setting)이나 조정(adjusting), 위치 제어(positioning)나 추적(tracking) 형태로 분류할 수 있습니다.


PUI 조작 장치 유형


앞서 예를 든 것과 같이, 전자레인지의 온도와 같은 연속적인 값을 조절할 때는 여러 번 눌러야 하는 버튼보다는 한 번에 돌려서 값을 이동할 수 있는 노브가 휠씬 빠릅니다. 단순히 이산형 정보냐, 연속형 정보냐에 따른 적절한 PUI 유형의 선정 뿐만 아니라 동일한 유형의 정보를 조작하는 PUI에서도 사용자의 좋은 경험을 위해 좀 더 정교하게 검토해 볼 수 있습니다.


예를 들면 아래의 연구 결과(Baber, 1997)와 같이, 위치 제어(positioning) 장치에 대한 사용성 평가 결과를 살펴보면, 마우스가 제일 빠르지는 않지만 정확성 측면에서는 가장 우세한 것을 볼 수 있습니다. 반면 직접적으로 포인팅할 수 있는 터치스크린이나 라이트펜은 속도는 상당히 빠르지만 정확성에서는 떨어지는 경향을 볼 수 있습니다. 즉, 속도와 정확성 간의 교환 관계(trade-off)를 볼 수 있는데요. 이러한 경우에는 사용자가 수행해야 할 과업의 속성에 따라 속도와 정확성 중 우선 순위를 결정해 적합한 위치 제어 장치를 결정하는 것이 필요합니다.

위치 제어 장치의 사용성 비교 결과 (출처: Baber., 1997)




2. 의도한대로 빠르고 정확하게 조작할 수 있도록 해 주어야 합니다.


입력 장치로서의 PUI는 사용자가 의도하는 대로 가장 빠르고 정확하게 조작할 수 있도록 하는 효율성(Efficiency)을 제공하는 것이 중요합니다. IT 제품에서 가장 많이 사용하는 PUI 형태는 누름 버튼인데요. 대표적으로 아래 그림과 같이 다수의 버튼들이 함께 배열된 키보드나 피쳐폰의 키패드를 들 수 있습니다.


다수의 버튼들이 함께 배치된 키보드와 피쳐폰 키패드


이러한 누름 버튼에서 빠르고 정확한 조작을 지원하기 위해서는 버튼의 적절한 크기와 버튼 간의 간격으로 디자인 되어야 합니다. 버튼이 적당히 커야 사용하기 편리하는 것은 누구나 알고 있는 내용일 것 같은데요. 이와 관련하여 피츠의 법칙(Fitts' law)에 따르면 버튼의 크기가 클 수록 동작 시간이 적게 걸리기도 하며, 또한 버튼이 너무 작으면 손가락이 큰 남성의 경우 누르기 어려울 수 있습니다. 반면에 제한된 영역 하에 버튼이 너무 커서 근접한 버튼과의 간격이 좁다면, 다른 버튼이 눌리는 오류가 발생할 확률이 높아질 수 있습니다. 그러므로 사용자가 누름 버튼을 빠르고 정확하게 조작하려면 적절한 버튼의 크기와 간격으로 디자인되어야 합니다.


특히 제품을 그립하여 사용하는 핸드폰이나 리모컨의 경우에는 주로 사용하는 엄지의 동작 범위를 파악해서 접근이 쉬운 영역에 누름 버튼을 배치하는 것이 중요한데요. 그래야 자연스러운 자세에서 이동거리를 최소화해 빠르게 접근할 수 있습니다. 아래 그림은 리모컨을 조작할 때 자세를 바꾸지 않고 오른손 엄지로 움직일 수 있는 범위를 인간공학적 실험을 통해 도출한 결과인데요, 만약 리모컨의 누름 버튼 배치 시 사용자가 많이 사용하거나 중요한 버튼을 붉은 색 영역이 배치한다면 사용자는 더욱 효율적으로 리모컨을 조작할 수 있습니다.


리모컨의 엄지 동작 범위 <안성희 외, 2017>




3. 자연스러운 자세로 사용할 수 있도록 해 신체적인 편안함을 제공해 주어야 합니다.


좋은 경험을 제공하기 위한 PUI 디자인의 조건에는 효율성 뿐만 아니라, 사용자가 자연스러운 자세로 사용하도록 해 신체적 편안함을 제공해 주는 것도 포함됩니다. 입력 장치는 주로 정보를 보고 인지적으로 처리하면서 발생되는 인지적 부담을 최소화해야 것과 달리, PUI와 같은 조작 장치는 사용자가 수행하기로 한 동작을 위해 발생되는 신체적인 부담을 최소화해주는 것이 중요합니다.


여기서 사용자의 신체적인 부담은 크게 과도한 힘의 요구, 부자연스러운 자세 유발, 장시간의 반복적인 사용에 의해 유발될 수 있습니다. IT 제품의 사용에서 과도한 힘을 요구하는 경우는 드물며 사무적인 목적성을 띤 PC나 노트북 사용을 제외하고는, 신체적 부담은 주로 부자연스러운 자세에서 유발될 수 있습니다. 그러므로 좋은 PUI 디자인은 사용자가 자연스러운 자세에서 조작할 수 있도록 해주어 사용자에게 신체적인 편안함을 제공해 줄 수 있어야 합니다.이와 관련된 몇 가지 PUI 디자인 가이드라인을 살펴보도록 하겠습니다. 아래의 일반 키보드와 인체공학적 키보드를 비교해 보면 일반 키보드에서는 팔목의 꺽임이 발생하는 반면 인체공학적 키보드 사용 시에는 자연스러운 자세에서 사용할 수 있어 팔목의 피로를 최소화해 줍니다.


인체공학적 키보드 디자인 <출처: Strasser, 2022>


다음으로 아래는 마우스 PUI 디자인 가이드라인입니다. 마우스를 그립하는 손의 크기를 고려하여 마우스의 너비, 길이 및 높이를 디자인한다면 사용자는 자연스러운 자세로 마우스를 잡고 사용할 수 있습니다. 이에 따라 긴 시간 동안 마우스를 사용하더라도 손과 손목에 피로감을 덜 느낄 수 있어 쾌적하게 업무를 수행할 수 있습니다.


마우스 PUI 디자인 가이드라인 <출처: Tillman et al., 2016>




UX 디자인의 기본, PUI 디자인


이번 글에서는 전통적인 입력 방식인 PUI를 어떻게 하면 사용자가 편리하게 조작할 수 있도록 디자인할 수 있는지에 대해 살펴 보았습니다. 그렇지만 PUI 디자인을 잘 하기 위해서는 좀 더 다각적인 관점에서 살펴보는 것이 필요한데요. 예를 들면, 누름 버튼 크기나 간격, 배치만이 PUI 디자인의 영역은 아닙니다. 누름 버튼을 편리하게 조작하기 위해서는 의도치 않은 접촉에 의해 버튼이 눌리지 않으면서 무리하게 누르지 않아도 작동할 수 있는 적절한 최적 누름 힘에 대한 정의도 필요합니다. 또한 냉장고나 세탁기의 도어의 열림 힘을 정의한다거나, 스틱형 무선 청소기의 무게나 무게 중심, 핸들 형태와 같이 육체적 작업이 있는 PUI를 디자인할 경우에는 사용자의 물리적 부하에 대해 근전도법(EMG)과 같은 정교한 측정 방법을 이용하여 최적의 디자인 값을 도출하기도 합니다.


만약 연속형 정보를 다루는 PUI의 디자인에서는 좀 더 복잡한 원리들이 이해가 필요합니다. 예를 들면, 누름 버튼 다음으로 IT제품에 많이 적용된 노브의 디자인 원리를 살펴보면, 사용자가 입력 장치를 얼마만큼의 움직였을 때 표시 장치에서 반응한 정도에 대한 조종/반응 비(C/R Ratio)와 같은 경우입니다. 특히 단순히 입력 장치 뿐만 아니라, 표시 장치와의 상호작용을 고려하여 디자인할 경우에는 신체적 특성과 함께 인지적 특성을 함께 고려해야 합니다. 대표적인 개념으로 양립성(Compatibility)을 들 수 있습니다. 예를 들면 운동 양립성은 조작 장치의 방향과 표시 장치의 움직이는 방향이 사용자의 기대와 일치하는 것으로, 노브를 오른쪽으로 돌리면 표시 장치의 커서가 아래로 이동하는 것은 양립성에 일치하는 것입니다.


인터페이스는 발전된 기술과 사용자의 니즈에 따라 진화하고 있습니다. 입력 방식은 PUI에서 터치와 제스처 방식으로, 그리고 음성인식 방식으로 점차 진화하고 있는데요. 이러한 진화된 입력 방식을 다양한 IT 제품에서는 적극적으로 적용하고 있습니다. 그렇지만 사용자에게 익숙하고 어떤 맥락에서는 더욱 편리하고 효율적인 PUI가 5년 후, 10년 후, 아니면 20년 후에도 사라지지는 않을 것입니다. PUI 디자인은 UX 디자인 도메인의 하나로, 기본적인(Fundamental) 요소입니다.


변화하는 트렌드를 빠르게 센싱하고 적용하여 차별화된 UX를 제공하는 것은 아주 중요합니다. 이와 함께, PUI 디자인과 같이 기본적인 영역에 대해서도 탄탄히 유지하고 계승하는 것도 좋은 사용자 경험을 제공하는 꼭 필요한 영역 중에 하나입니다.

브런치는 최신 브라우저에 최적화 되어있습니다. IE chrome safari