수족을 버리고 얻은 무한한 자유 터치 UI

상세페이지

  • HOME > 월별 특집 & 기획

수족을 버리고 얻은 무한한 자유 터치 UI

툴이 인터페이스를 만든다 “인간의 손은 노동 수단일 뿐만 아니라 노동의 결과다”. 컴퓨터 없는 시대를 살았던 프리드리히 엥겔스의 이 말귀는 21세기에도 고스란히 적용되니 놀라운 일이다. 키보드를, 마우스를, 터치스크린을 신체 일부처럼 여기는 우리에게 손은 ‘수단’이지만, 동시에 디스플레이로 이를 구현하는 손의 솜씨는 ‘결과’다. 인터페이스(Interface)는 그 수단과 결과의 사이에서 접점을 마련한다. 인간과 컴퓨터 사이에서 키보드 텍스트로, 마우스 클릭으로, 스크린 터치로, 그리고 뇌의 명령으로 보낸 신호를 디스플레이로 확인할 수 있는 것도 인터페이스 덕분이다. 이에 인터페이스가 변화하는 과정을 손과 같은 수단(툴)의 등장으로 추적하려 한다. 툴이 인터페이스를 만든다. 혹은 인터페이스가 툴을 바꾼다.

진행. 월간 w.e.b. 편집국

➊ CLI(Command-Line Interface) 닿을 듯 닿을 수 없는 너, 인터페이스 러브스토리
➋ GUI(Graphic User Interface) 마우스 입력의 대가는 직관적이었다, 그래픽 인 유얼 페이스
➌ 터치 UI(Touch UI) 수족을 버리고 얻은 무한한 자유, 터치 UI
➍ NUI(Natural User Interface) UI 없는 UI, PC 없는 디자인, NUI


UI 복습. '인터페이스'는 '접속, 접속기'. 즉, 사람이 기계를 마주할 때 거치는 매개체다. 컴퓨터는 모니터를 통해 비주얼화한 정보를 보여주며, 우리는 그 화면 조작을 위해 마우스와 키보드를 누른다. 여기에 '사용자'를 붙이면 놀랍게도 사용자가 더욱 쉽게 컴퓨터와 접촉하게끔 원활한 입출력 환경 설계를 뜻한다. 자, 이제 3교시 터치 UI다.

글. 이창민 기자 whale@websmedia.co.kr


모니터, 마우스, 키보드를 버린 컴퓨터
터치 UI는 터치를 기반으로 한 사용자 인터페이스다. PC와 스마트폰을 비교하면 좀 더 쉬운데, 일반적인 PC는 ‘본체’라 불리는 큰 기계 외에도 ‘출력’을 위한 모니터와 ‘입력’을 위한 마우스 및 키보드가 반드시 필요하다. 반면 스마트폰은 별도의 입력 및 출력장치가 필요 없다. 본체와 디스플레이가 하나이며, 심지어 입력은 디스플레이 자체에다가 직접 한다. 그럼 터치 UI는 그저 입출력장치를 본체와 일체화한 기기일 뿐일까? 아니다. 이 ‘일체화’는 많은 걸 바꿔놨다. PC로 문서 작업을 할 때 아래쪽으로 이동하려면 우리는 ‘아래’라는 관념을 상징화해 나타낸 키보드의 ‘↓’ 버튼 혹은 좌측의 역삼각형 화살표를 누르거나 마우스 휠을 ‘아래’로 돌렸다.

하지만 모바일 기기에서는 화면을 손가락으로 터치하고는 ‘위로 올린’다. 이러한 경험 전환을 글로만 접하면 낯설 수 있으니 현실 속 우리가 종이 신문을 책상 위에 펼쳐놓고 보는 모습을 상상해보자. 아래쪽 기사를 읽을 때 우리는 신문을 위로 올리지 않았던가. 이처럼 터치 UI는 GUI보다 현실 속 나의 생활과 무척 가깝다. 이에 터치 UI를 두고 ‘현실의 나와 가상의 컴퓨터와의 관계를 좀 더 가까이 긴밀하게 연결하는 방식’이라 말하기도 한다. 별도의 입력장치 ‘사용법’을 따로 배울 필요가 없으니 말이다. 궁금하면 화면에 띄운 아이콘에 손가락을 대보면 된다. 그래서 ‘터치’ UI다.







탁상형 터치 UI 적용 디바이스




물리 버튼을 없애고 수만 개의 버튼을 얻다
지난 4월호 특집을 읽었다면 블랙베리 스마트폰처럼 물리키보드를 탑재한 스마트폰이 시장에서 얼마나 처절하게 외면받았는지 알고 있을 거다. 지금은 ‘스마트폰=터치 디스플레이’라는 공식이 타당한 명제로서 성립한다. 지금의 스마트폰은 전원 및 홈 버튼, 볼륨 키만 있다. 그 덕에 휴대폰 디자인은 다 똑같아졌지만 대신 디스플레이 속에 수만 개의 버튼과 ‘스마트함’을 얻었다. 앱마다 버튼의 위치를 서로 다른 곳에 만들 수 있기 때문이다. 버튼이 없는 모바일 디바이스는 사실 앱 마켓에 있는 앱 개수만큼, 아니 그보다 더 많은 버튼을 가지게 됐다.

잠깐 옛날 휴대폰을 떠올려보자. 우리는 그 수많은 버튼을 숨기기 위해 슬라이드나 폴더 형식의 휴대폰을 들고 다녔다. 아마도 미관상 그다지 예쁘지 않았기 때문이겠지. 그래서 혹자는 스티브 잡스가 “거, 그렇게 숨기고 다닐 거 다 없애버리면 되겠구먼” 하며 최초의 아이폰을 만들었다는 전설을 말하곤 한다. 이게 진짜인지 아닌지는 잘 모르겠지만, 혁명에 가까운 잡스의 이러한 판단 뒤에는 이미 터치 디스플레이를 통해 입력하는 기술이 존재했다는 사실이 숨어있다. 스마트폰의 터치 디스플레이 구현을 위해 반드시 필요한 ‘멀티터치’ 기술은 이미 1982년에 개발됐다. 그렇다면 1982년부터 2007년까지 25년의 세월 동안, 잡스보다 먼저 이러한 혁신적인 아이디어를 상품화할 생각을 했던 사람이 아무도 없었던 이유는 뭘까? 






물리 키보드를 없앤 최초의 아이폰




Pinch to Zoom Motion




습관이 된 화면 확대 






상용화의 두 가지 장애요소
인터페이스 측면에서 터치 디스플레이 상용화를 막는 두 가지 요소가 있다. 첫째, 디스플레이를 터치해서 조작하기 위해서는 ‘버튼’이 화면에 나타나야 한다는 점이다. 화면이 입력을 위한 유일한 도구니까 한정된 디스플레이 크기는 입력의 범위를 제한한다. 안 그래도 작았던 휴대폰 화면에 버튼까지 다 표시하려니 공간 낭비도 심하다. 그럼 버튼을 작게 만들 수밖에 없지만, 작은 버튼을 세밀하게 조작하기에 우리의 손가락은 뭉툭하고 커다랗다. 그럼 잡스는 어떻게 했는가? 화면을 늘려서 소프트웨어 버튼을 위한 장소를 만들었고, 그것도 모자라 화면을 마음껏 늘리고 줄일 수 있게 만들었다. 지금 우리는 스마트폰을 쓸 때 습관적으로 엄지손가락을 화면 아래에 두며, 글자나 이미지가 작을 땐 자연스럽게 화면을 집고 늘린다(Pinch to Zoom). 이러한 습관은 과거 피처폰 사용 시절의 UI와 현실 속 나의 직관성을 융합한 것이다.

둘째, 터치 UI로는 지금까지의 사용자 인터페이스 기본 개념인 ‘Point and Click’를 구현할 수 없다는 점이다. 지금껏 우리의 기기 조작은 ‘1) 손가락으로 그 버튼을 만지는 단계 2) 눌러서 실행시키는 단계’가 완벽하게 분리돼 있었다. 마우스를 움직여 누르고 싶은 버튼 위로 올리는 ‘포인트 단계’와 실행을 위한 마우스 ‘클릭 단계’가 구분됐다는 말이다. 반면, 터치 UI는 입력장치이자 출력장치인 디스플레이를 직접 만지는 그 순간이 바로 클릭 단계다. 포인트 단계가 없다. 하지만 포인트 단계는 사람과 기계 사이 중요한 상호작용 중 하나다. 마우스 포인트를 아이콘이나 버튼 위로 올렸을 때 포인트 모양이 바뀌는 경험은, 현실과 동떨어진 가상세계 속에 마우스를 대신 보내 만지고 이해하는 간접체험이다. 만약 포인트 단계가 사라진다면 사용자는 지금껏 몰랐던 낯선 상호작용으로 혼란을 겪을 것이다.

잡스는 이 문제를 해결하기 위해 누르는 단계와 눌렀다 떼는 단계를 구분했다. 스마트폰을 통해 앱 아이콘이나 버튼을 누를 때 아이콘 버튼이 ‘눌리는’ 모션이 있음을 확인할 수 있다. 그리고 손을 떼면 정상으로 돌아오며 동작이 실행된다. 오래 누르고 있을 때의 액션도 추가했다. 앱이 파르르 떨린다거나 하는 것들이다. 하지만 스마트폰 조작에는 잘 못 눌러서 발생하는 오작동이나 오타가 여전히 많다는 점을 생각하면 이 문제는 시간을 두고 지속해서 개선할 필요가 있다.






포인트 단계가 없는 터치 UI 



오입력 여지가 많은 터치 버튼



터치 UI 퍼스트 시대
그렇게 터치 디스플레이를 적용한 스마트폰은 우리의 삶을 혁명에 가까울 정도로 뒤바꿔놨다. 가히 모바일 퍼스트 시대라고 말할 수도 있는데, 인터페이스 관점에서 보면 ‘터치 UI 퍼스트’ 시대이기도 하다. 한 예로 모바일 시대에 접어들어서 마이크로소프트(이하 MS)가 윈도우 운영체제의 인터페이스를 어떻게 바꿔놨는지를 확인해보자. 과거 윈도우는 마우스와 키보드가 없으면 전혀 사용할 수 없었던, GUI의 대표주자였다. 그랬던 MS가 모바일 퍼스트 시대를 위한 시장 전략으로 윈도우의 모바일화를 진행했다. 윈도우 OS를 터치 UI에 맞춰 새롭게 설계한 것이다.

사실 이는 어쩔 수 없는 선택이었다. 단 몇 년 만에 나도, 내 친구도, 할아버지랑 할머니도 스마트폰을 쓰게 된 이면에는 ‘잡스형 진짜 쩐다;’ 말고 더 중요한 사실이 있다. 바로 스마트폰은 기기 사용을 위한 별도의 학습 과정이 (거의) 없다는 점이다. 스마트폰이 터치 UI를 본격적으로 도입해 단기간에 엄청나게 많은 사용자를 확보할 수 있었던 저력에는 터치 UI의 단순하고 간편한 사용성이 한몫을 톡톡히 했다. MS 역시 이를 알았고, 곧 모든 IT 기기에 GUI가 아닌 터치 UI 시대가 도래할 것임을 예측했다. 이에 MS는 한발 더 나아가 컴퓨터와 모바일의 사용자 인터페이스를 통합하고자 했다. 모바일 기기에서 경험했던 너무나도 편리한 터치 UI를 컴퓨터 할 때도 그대로 경험할 수 있도록 하는 것이다.

그래서 만든 게 바로 윈도우 8과 ‘메트로 UI(Merto UI)’다. 메트로 UI는 네모 반듯하고 큼직한 아이콘과 배열이 특징인, 터치 UI를 적용해 만든 MS의 새로운 사용자 인터페이스다. 물론 야심 차게 준비한 것에 비해 아직은 GUI에 맞춰 설계한 이전 윈도우가 좀 더 편한 것 같기는 하지만. 윈도우 8이 깔린 PC를 처음 사용할 때 지금껏 봐왔던 데스크톱 바탕화면이 안 떠서 멍했던 경험은 다들 있지 않나. 가까스로 데스크톱 모드로 돌아왔는데 시작 버튼이 없어 한 번 더 난감했을 테고. 맥락을 알고 나니 우리의 벙쪘던 경험은 터치 UI를 적용한 윈도우 8을 ‘감히’ 터치 디스플레이가 아닌 구식 모니터, 키보드와 마우스로 써보겠다고 시도했기 때문이다(앱이 없어 사용이 불편한 건 터치 UI의 문제가 아니다!).





윈도우 8부터 적용한 메트로 UI




서피스 3 광고 영상 일부




레이아웃 및 기기 전환이 자유로운 안드로이드 머리티얼 디자인




트렌드로 자리 잡은 단순하고 평평한 디자인




디자인 트렌드를 바꾸다
터치 UI 역시 어쨌든 ‘인터페이스’다. 화면을 손가락으로 ‘직접’ 만지는 터치 UI 역시 매개체를 뜻하는 인터페이스라는 단어로부터 자유로울 수 없다. 우리가 화면을 통해 만지는 이미지는 ‘물성을 지닌 실체’기 아니기 때문이다. 우리가 누르는 카메라 버튼은 진짜 ‘카메라’가 아니라 카메라의 기능을 소프트웨어로 전환해 구현해놓은 것에 불과하다. 즉, 카메라 앱은 일종의 ‘상징물’이다. 우리는 컴퓨터의 화면을 직접 만지며 소통하지만 결국 그 역시 ‘간접적’일 수밖에 없다.

상징의 쉬운 예로 표지판을 들 수 있다. 표지판은 메시지를 단순한 이미지로 나타낸 ‘상징물’이다. 그렇다면 사람들이 상징물이 뜻하는 바를 유추할 수 없다면 어떨까? 실패다. 터치 디스플레이 속 그것들 역시 마찬가지다. 상징하는 바가 무엇인지 곧장 알아차릴 수 있어야 한다. 그러니 터치 디스플레이 속 UI는 누구나 명확히 알아차릴 수 있을 정도로 쉽고 직관적으로 설계하는 게 맞다. 손가락으로 조작해야 한다는 특성을 고려해 더 크고 단순한 디자인으로 말이다. 또한, 터치 UI를 적용한 모바일 디바이스는 하나같이 ‘휴대성’이라는 특성을 공유한다. 들고 다니며 언제든지 꺼내 쓰는 모바일 디바이스는 사용자에게 용도에 맞게 움켜쥘 수 있는 선택권을 선물했다. 스마트폰으로 영상을 보거나 게임을 할 때는 가로로 들었다가도, 웹 서핑과 SNS를 할 때는 또 언제든 세로로 들고 쓸 수 있다. 반면 가로로 길쭉한 PC 모니터와 TV는 늘 한 곳의 장소에 비치해두고 쓸 뿐이다. 결국, 모바일 디바이스는 가로와 세로 화면은 동시에 지원하는 디자인을 제공해야 한다. 언제든 가로·세로를 전환할 수 있도록 단순한 레이아웃으로 구성하는 게 효과적이다.

그래서인지 터치 UI는 쉽고 큼직하고 직관적인 디자인과 단순한 레이아웃을 가졌다. 윈도우의 메트로 UI, 구글 안드로이드의 ‘머티리얼 디자인(Material Design)’, 애플의 아이폰 역시 iOS 7 이후부터 ‘플랫 디자인(Flat Design)’이다. 터치 UI라는 환경이 새로운 디자인 트렌드를 만든 것이다. 





미래의 터치 UI
그럼 미래의 터치 UI 모습은 어떨까? 현재의 터치 디스플레이만 해도 굉장히 높은 정확도를 보이며 멀티터치 기술도 나날이 발전하고 있다. 지금은 ‘와콤(Waccom)’과 ‘앤트리그(N-trig)’의 터치 펜 기능을 함께 지원하는 디바이스를 통해 높은 생산성까지 보장한다. 곧 있으면 정말 키보드와 마우스를 전혀 사용하지 않고도 마음껏 PC를 사용할 수 있는 시대가 올지도 모른다. 하지만 무엇이건 늘 아쉬움은 있다. 지금의 터치 디바이스는 어떤 손가락이든, 혹은 신체의 어떤 부위를 이용해 터치하든지 같은 입력으로 인식한다. 이는 어떤 상황에서든 ‘나의 신체 일부만 접촉하면 조작할 수 있다’는 편의성을 제공한다. 하지만 입력 시 주로 사용하는 부위가 양손의 엄지와 검지라는 점을 고려할 때, “다른 손가락이나 부위로 터치할 때 새로운 기능이 있다면 좋겠다”란 생각이 드는 건 어쩔 수 없다.

이때 터치 디스플레이에 가속도 센서와 마이크를 활용해 더욱 편하고 놀라운 터치 인터페이스 환경을 제공하기 위한 연구가 진행되고 있다. 미국의 작은 IT 스타트업 ‘퀵쏘(Qeexo)’의 ‘핑거센스(Fingersense)’가 바로 그것이다. 퀵쏘는 모바일 기기를 터치할 때 손가락과 손톱, 관절에서 나는 소리와 진동이 다르다는 사실을 알게 됐다. 그리고는 스마트폰에 이미 내장된 가속도 센서와 마이크를 이용해서 신체 부위마다 다른 터치 입력을 구분할 수 있다는 걸 깨달았다. 그렇다면 손가락으로 입력할 때와 손톱, 손등으로 입력할 때의 기능을 서로 다르게 부여할 수 있다. 손가락 하나로 수행하던 수많은 기능을 분산하니 사용성은 더욱 높아진다. 당장은 계약 문제로 상용화가 어려울 전망이지만, 후에 널리 보급된다면 그나마 몇 개 있던 터치 디스플레이 속 버튼이 또 사라질 수도 있다.





모두에게 평등하지 않은 터치 UI
터치 UI를 모든 디바이스에 적용하기에는 조금 무리가 있다. 요즘 주목받고 있는 스마트워치와 스마트카로 예를 들어보자. 먼저 스마트워치는 기본적으로 손목에 차는 기기이면서 알람 및 시간 확인 등 스마트폰보다 상당히 협소한 사용성을 가진 기기다. 이런 스마트워치에 굳이 터치 인터페이스를 지원한다면, 손목에 착용 시 다른 신체 부위에 접촉해 원하지 않았던 버튼이 눌리는 ‘오입력’이 발생할 여지가 많다. 사용자에게 꼭 붙어있는 만큼 스마트워치로 인한 불편함은 ‘0’에 가깝게 거의 없어야 한다. 이에 스마트워치에 터치 UI를 적용하려면 화면이 켜졌을 때 바로 터치 입력이 되게끔 하는 게 아니라, 메뉴 조작을 거쳐야만 터치할 수 있도록 뎁스(Depth)를 추가하는 게 맞다.

다음으로 스마트카에 터치 UI를 적용한다고 생각해보자. 완벽한 터치 UI를 적용하기 위해서는 이미 안전하게 무인 운전이 가능한 시점이어야 한다. 운전 중 터치 디스플레이까지 손을 뻗어 기능을 조작하기 힘들기 때문이다. 운전자는 운전 내내 도로를 보며 이동하는데, 터치 UI를 통한 입력방식을 필연적으로 운전자의 시선을 빼앗는다. 시각장애인의 스마트폰 접근이 왜 힘든지를 생각해보면 쉽게 이해할 수 있다. 또한, 터치 UI는 현재 실행하고 있는 앱, 혹은 상태에 따라서 버튼의 기능 및 위치가 달라진다. 이때 사용자는 신속하게 버튼을 눌러야 하지만 머릿속에 버튼의 위치와 기능을 제대로 떠올리지 못해 혼란이 생길 수 있다. 찰나의 실수로 큰 사고가 발생하는 자동차의 경우, 늘 같은 위치에 어김없이 고정된 시동 버튼과 같은 인터페이스가 훨씬 사용성이 높을 수 있다. 그러니 부디, 최신 기술이라고 어디에든 적용할 생각은 접자.
 


퀵쏘(Qeexo)의 핑거센스(Fingersense)




애플 워치




시선을 뺏기는 자동차의 터치 인터페이스


tags 이창민 기자 , 인터페이스 , 접속기 , 터치 디스플레이 , 일체화 , 스마트폰 , 물리 버튼 , 플랫 디자인 , 와콤 , 핑거센스

저작권자 © 웹스미디어 무단 전재-재배포 금지

뉴스콘텐츠는 저작권법 제7조 규정된 단서조항을 제외한 저작물로서 저작권법의 보호대상입니다.
본 기사를 개인블로그 및 홈페이지, 카페 등에 게재(링크)를 원하시는 분은
반드시 기사의 출처(로고)를 붙여주시기 바랍니다.
영리를 목적으로 하지 않더라도 출처 없이 본 기사를 재편집해 올린 해당 미디어에 대해서는 합법적인 절차(지적재산권법)에 따라
그 책임을 묻게 되며, 이에 따른 불이익은 책임지지 않습니다.

URL 복사 출력하기 목록보기 스크랩하기

관련기사

최신뉴스
월별 특집 & 기획
몰개성 스마트 기기에 패션 입히기 캠프모바일의 워치마스터
월별 특집 & 기획
마우스 입력의 대가는 직관적이었다 그래픽 인 유얼 페이스
월별 특집 & 기획
수족을 버리고 얻은 무한한 자유 터치 UI
월별 특집 & 기획
UI 없는 UI, PC 없는 디자인 NUI
월별 특집 & 기획
4월의 최신 스마트폰 중고가 추이

정기구독신청