UI·UX 개념을 뒤엎을 2016 하드웨어 트렌드

상세페이지

  • HOME > 월별 특집 & 기획

UI·UX 개념을 뒤엎을 2016 하드웨어 트렌드

매년 한 해를 마무리할 때면 가트너의 2016년 10대 전략 기술 동향이 발표된다. 그 외 수많은 미디어에서도 2016년의 IT 트렌드를 꼽는다. 그중에 2016년 웹디자인 트렌드도 있다. 그렇다면 이렇게도 많은 전망 중 ‘진짜’ 트렌드는 무엇일까. 손꼽힌 그것들 중 먼 미래 말고 2016년의 디지털 산업에 곧장 영향을 미치는 것은 뭘까. 2016년 첫 과월호를 시작하는 월간 웹은 무엇이 진짜 우리가 알아야 할 트렌드일 지를 꼽았다. 먼저, 가트너가 선정한 10대 전략 기술이 무엇인지를 살핀 뒤, 2016년 웹디자인 트렌드와 하드웨어 트렌드를 알아본다.
진행. 월간 w.e.b. 편집국

Technology Trends 1 가트너가 예상하는 2016년 10대 전략 기술
webdesign Trends 2 월간 웹이 추천하는 2016 웹디자인 트렌드
Hardware trends 3 UI·UX 개념을 뒤엎을 2016 하드웨어 트렌드


병신년을 준비하는 우리가 하드웨어 트렌드를 알고 있어야 할 필요는 있다. IT 산업의 패러다임은 공급자 중심으로 움직이며, 첫 변화는 늘 ‘제품’에서 나오기 때문이다. 그리고 새로운 제품은 새로운 인터페이스와 사용자 경험을 요구한다. 이것이 우리의 일이다. 기계에 대한 복잡한 이야기를 꺼리는 여러분을 위해 꼭 알아야 할 것만을 꼽아 선정 이유와 준비할 것을 알려드린다.

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


하드웨어 트렌드가 중요한 이유
웹 디자이너와 개발자에게도 하드웨어 트렌드는 중요하다. ‘웹 구축’이라는 분야 역시 IT 시장의 패러다임에 속하는데, 이 산업은 철저하게 공급자 중심으로 돌아가는 판이기 때문이다. 그 이유는 뭘까? 인터페이스 체계 정립의 첫 단이 하드웨어에서 출발하기 때문이다. 하드웨어 자체에 기술적, 기능적으로 인터페이스가 구현되면 기획자와 디자이너가 여기에 가치와 사용성을 부여하는 것이 지금까지의 흐름이었다. 바로 이때 UI(User Interface)와 UX(User eXperience)가 정립된다. 물론, 애플처럼 이 모든 과정을 깔끔하게 혼자 다 맡아버리는 곳도 있기는 있다. 하지만 대부분의 경우는 그렇지 못하다.

결국, 하드웨어 시장의 트렌드를 알아야 앞으로의 인터페이스 패러다임이 어떻게 바뀔 것인지도 예측할 수 있다. 예측은 무엇을 준비할지 알아내는 과정이다. 하드웨어 시장의 변화는 그래서 중요한 것이다. 그리고 2016년에는 몇 가지 하드웨어들이 UI·UX 개념을 뒤엎으며 트렌드를 선도할 조짐이 보인다. 2-in-1 랩톱, 4k 디스플레이, 그리고 3D 터치가 그 주인공이다. 본 기사는 2016 하드웨어 트렌드, 그리고 이것들이 인터페이스 개념을 어떻게 바꿀 것인지를 예측해보는 시간이다.


01 2-in-1 랩톱
랩톱 형태로 쓰다가 언제든 키보드를 분리해 태블릿PC처럼 쓸 수 있는 기기다. 태블릿으로도 쓸 수 있어야 하니 터치 패널을 탑재한 디스플레이를 기본적으로 갖췄다. 이 시장의 개척자는 마이크로소프트(이하 MS)인데, MS는 그저 키보드와 디스플레이가 분리만 되는 단순한 제품 기획을 넘어서 ‘펜&터치 UI’라는 인터페이스 패러다임을 정립했다. 그리고 필기에 특화한 스타일러스 기술인 ‘엔트리그(N-Trig)’ 터치패널을 탑재한 서피스(Surface)란 이름의 제품을 세상에 내놨다.


[그림 01] 좌측부터 MS의 서피스 프로4(좌)와 서피스 북(우) 서피스 북의 펜슬은 이전보다 훨씬 더 좋아졌다(고 한다)


MS는 처음에 이 시장에서 홀로 외롭게 버텨왔지만 지금 하드웨어 패러다임은 2-in-1이 맞다는 것을 보여준다. 그저 특이하고 신선한 기기를 넘어서 프리미엄 시장성까지 갖췄기 때문이다. MS의 서피스 프로와 서피스 북이 플래그십 모델로 맨 앞단을 달리며, 그 뒤를 에이수스, 델, 레노버, HP 등 기존의 PC 브랜드가 따르고 있다. 더 중요한 포인트는 국내 중소 하드웨어 제조사인 성우모바일, 엠피지오, 아이나비 등 까지도 2-in-1 형태의 랩톱 제조에 열을 올리며 이미 양산을 시작한 찰나라는 점이다. 그러니까 수백만 원을 호가하는 최고 사양의 플래그십 제품부터 불과 10만 원 안팎의 저가 제품까지 방대한 라인업을 갖춘 게 바로 이 시장. 그만큼 시장성을 인정받은 셈이다. ‘2-in-1’이라는 명칭만 누가 좀 바꿔줬으면 좋겠다. 타이핑하기 어렵고, 이쁘지 않다.

그럼 2-in-1 랩톱은 인터페이스 체계를 어떻게 바꿀 것인가? 그 방향은 이미 2015년도에 어느 정도 예측됐다. 모바일 트렌드가 시작된 후부터 지금까지는, 웹사이트 구축 시 데스크톱 웹과 모바일 웹을 따로 만드는 것이 일반적인 방법론이었다. 전자는 마우스를 주로 이용하는 GUI, 후자는 엄지와 검지를 이용하는 터치 기반 인터페이스다. 알다시피 지금껏 웹사이트는 윈도우로 접속할 때 GUI 기반의 데스크톱 웹을, 안드로이드나 iOS로 접속할 때 모바일 전용 웹을 불러와 줬다. 네이버도 그랬고, 다음도 그랬고, 모두가 그랬다. 반응형 웹 형태로 구축할 수 없는 모든 웹사이트는 모바일을 대응할 방법이 그것이었다.

그리고, 2-in-1 디바이스는 이 기존의 웹 구축 방법론을 바꿀 것이다. 모든 PC가 터치 UI를 지원할 것이며, 윈도우라는 운영체제를 태블릿PC 형태로 접속할 때가 더욱 많아질 것이다. 2-in-1 랩톱에서 키보드를 떼고 태블릿PC로 들고 쓸 때의 목적은 ‘멀티미디어 뷰어’일 것이고, 이때 가장 많은 사용은 동영상 감상, 그리고 웹 서핑이다. 기존의 GUI 기반 데스크톱 웹의 깨알 같은 버튼들과 빼곡한 텍스트를 사용자들은 참아줄 수 있을까? 뒤돌아보지 않고 이탈할 것이다.


[그림 02] Asus Transformer Book T300


prepare: 준비할 것
그럼 데스크톱 웹은 앞으로 어떻게 대응해야 할까? 아마도 네이버는 터치 UI 기반 2-in-1 PC에 그대로 적용해도 괜찮을 ‘스퀘어 디자인’을 PC 웹 디자인에도 채택할 가능성이 크다. 아니 채택해야만 할 것이다. 그럼 일반적인 브랜드 웹사이트는 어떻게 해야 할까? 이미 답은 나와 있다. 2015 웹 어워드 코리아에서 PC 데스크톱 부문 대상을 받은 ‘기아자동차 웹사이트(www.kia.com)’는 훌륭한 레퍼런스가 될 것이기 때문이다. 이 웹사이트를 기획한 프로젝트 매니저와의 인터뷰가 1월호의 ‘award’ 코너에 있으니 참고하자.


disappear: 없어질 것
2-in-1 랩톱은 펜&터치 인터페이스 확대를 가속화할 것이다. 그러니까, 터치 디스플레이 자체에다 스타일러스 펜으로 입력하는 방식이다. 모바일과 태블릿PC에서 이 방식이 빠르게 보급되지 못한 이유는 모바일은 화면이 작았고, 태블릿PC는 살 필요가 없었기 때문이다. 하지만 모바일만큼이나  모두에게 하나는 꼭 필요한 개인용 컴퓨터(PC)가 2-in-1 랩톱 형태로 바뀐다면 충분히 가능한 이야기다. 그럼 무엇이 없어질까? 태블릿PC는 남을 것이다. 대신 종이에 쓴 필기를 디지털 신호로 전환해 모바일에 전송해주는 스마트펜이나 스마트폴리오 같은 제품들은 종말할 것이다. 이것들은 제품 기획 자체부터 과도기적이며, 사용성은 기형적이었다. 빨리 좀 없어졌으면 좋겠다.


02 4K 디스플레이
4K 디스플레이란 3,840x2,160 해상도를 가진 초고해상도 디스플레이를 말한다. UHD라고도 부르는데, FHD의 딱 네 배 크기다. 사실 4K 해상도를 지원하는 디스플레이는 햇수로 2년 전부터 시장에 양산됐는데, 이 좋은 기술력을 콘텐츠와 서비스가 받쳐주질 못했다. 4K를 지원하는 영상도, 이미지도 척박했으니까. 비싼 돈 주고 산 모니터를 다시 저해상도로 맞춰서 반쪽짜리로 써야 했던 것이다. 그렇게 활용성이 좁았던 4K 디스플레이 시장에 2016년 들어서 큰 변화가 있을 전망이다. 왜일까?


[그림 03] 4K iMac

첫 번째 이유는 본 기사 도입 때 말했던 공급자 중심의 시장에서 위쪽의 푸시가 더욱 심해질 것이기 때문이다. 이미 애플은 자사의 공식 웹사이트를 4K에서도 완벽히 이용할 수 있도록 구현했다. 4K, 5K 아이맥을 팔기 위해서다. 픽셀 기반의 이미지 포맷을 과감히 버리고 벡터 기반의 SVG(Scalable Vector Graphics)를 채택한 애플의 웹사이트는 끊김 없이 빠른 로딩을 지원하는데, 국내의 여타 웹사이트보다 오히려 높은 만족도와 사용성을 제공한다. 그러니까 이론이나 기술만 나온 것이 아니라 실사용에 무리가 없게끔 구현할 수 있다는 것이다. 애플의 선도 덕인지 해외는 이미 신규 웹사이트 구축 시 화면 전체를 이용하는 4K 대응을 필수 항목을 꼽을 정도.

두 번째는 4K 디스플레이의 가격 하락을 꼽을 수 있다. 4K 모니터가 시장에 나왔을 당시는 100만 원을 호가할 수준이었는데, 이 가격이 2016년 1월 기준 30만 원 대까지 떨어졌다. 인켈(Inkel)과 제파(ZEPA) 등의 제품이다. 메이저 브랜드의 프리미엄 제품은 아니지만(이들이 프리미엄 4K 모니터를 30만 원대에 출시할 일은 없을 것이다) 중저가형 제품은 누구든 구매할 수 있을 정도의 가격만큼으로 떨어진 것이다. 처음으로 와이드 모니터가 널리 보급될 때를 떠올려봐도 그렇다. 미국의 소프트웨어 개발사 톱탈(Toptal, toptal.com)은 2020년에 이르면 태블릿PC에까지 4K 해상도가 완전히 보급되리라 전망한 바 있다(goo.gl/tg4BcW).

그럼 4K 웹은 무엇을 바꿀까? 기존 서비스가 바뀌진 않을 것이다. 웹사이트도 남을 것이고, 소셜 미디어의 강세도 꾸준히 이어질 것이다. 동영상 서비스에서도 큰 변화는 일어나지 않을 것이다. 하지만 서비스를 구성하는 방식은 몽땅 바뀔 전망이다. 먼저, 기존의 픽셀 단위의 이미지 포맷이 없어진다. 웹상에서 가장 얇은 선을 표시하고 싶은데 12인치 태블릿PC와 40인치 대형 모니터의 해상도가 모두 4K라면? 같은 해상도라도 디스플레이의 크기에 따라 40인치에서는 1px, 12인치 태블릿PC에서는 2px, 모바일에서는 3px과 같이 가변적으로 수치를 적용해야 하는데, 이때는 픽셀이 아닌 벡터 기반의 이미지 포맷을 써야 한다. 위에서 한 번 언급한 SVG를 이야기하는 것인데, 앞으로 웹 환경에서 .jpg, .png 등 포맷은 다시 볼 수 없게 될지도 모른다.

웹사이트를 구성하는 디자인과 레이아웃 철학도 완전히 바뀔 것이다. 4K 디스플레이를 대응하지 않는 웹사이트, 예컨대 페이스북을 띄우면 타임라인은 졸졸 흐르는 한 줄기 시냇물 같으며 좌우여백은 운동장만큼이나 넓다. 4K 해상도에 친화적이지 못한 것이다. 이렇게 공간 활용에 서투른 웹사이트에 사용자가 잠자코 머물 수 있을까? 페이스북 역시 지금 당장 바뀌진 않더라도 앞으로 4K 시대를 대비해야 할 것이다. 그런데, 그렇다면 UX까지 모조리 바뀌어야 한다. 타임라인에서 스크롤을 내리던 것이 카드 콘텐츠를 가로로 나열한 방식으로 바뀐다고만 하더라도 사용자 경험은 완전히 달라진다. 지금 핀터레스트가 그런데, 두 서비스는 이용자도 콘텐츠 소비 방식도 서로 완전 다르지 않나.


[그림 04] 4K 디스플레이로 띄운 핀터레스트 화면


prepare: 준비할 것
웹디자이너라면 벡터 기반 이미지 포맷에 대해 공부하자. 픽셀의 시대가 지고 벡터의 시대가 오는 것이다. 이에 SVG 이미지를 어떻게 제작하며 웹에서 이를 어떻게 구현할 것인지를 준비해야 한다. 한 예로 SVG는 현 웹 표준인 HTML5에 호환하지만 애니메이션으로 구현할 때는 표준을 벗어난다. 이때는 캔버스(Canvas)를 활용해야 하는데, 이것은 지금껏 웹디자이너가 아닌 개발자의 영역이었다. 그러니 서둘러 준비하는 게 몸값을 띄울 방법이다.


study: 연구할 것
또한, 웹상에서 화면 레이아웃을 어떻게 구성할 것인지에 대한 사용성 측면에서의 연구 및 개발이 필요하다. 이것은 아무도 정답을 내놓지 못한 상황이다. 오직 애플만이 제품 소개 페이지를 이렇게 구성하는 게 좋다는 레퍼런스를 보여주는 수준. 하지만 웹사이트의 종류는 콘텐츠 사이트, 포털 사이트, 커뮤니티, 소셜 미디어, 이커머스 등 무궁무진하다. 카드 뷰 레이아웃은 4K 시대 모든 종류의 웹사이트에서 유효할 것인가?


03 3D 터치
3D 터치는 신형 아이폰부터 쓰이는 인터페이스 방식이지만, 이를 구현하는 것은 소프트웨어가 아닌 하드웨어 기술이다. 지금껏 모바일 디바이스의 인터페이스는 가로(x)와 세로(y)라는 평면적인 xy 좌표값만을 필요로 했지만, 앞으로는 깊이(z)까지도 인식하게 된다. 그래서 xyz라는 세 방향을 인식하는 ‘3D’ 터치라 부르는 것이다. 본 기술을 적극적으로 쓰는 곳은 애플 말곤 없는데 왜 2016년 하드웨어 트렌드로 꼽았느냐고 생각할 수 있는데, 2-in-1 랩톱이나 4K 모니터보다 훨씬 많은 사람들에게 단기간 빠른 보급이 이뤄질 게 3D 터치다. 아이폰은 1년에 1억 대 넘게 팔리니까.


[그림 05] 3D 터치는 터치 디스플레이 밑에 탭틱 센서를 탑재한다

또한, 애플이 현재 3D 터치를 적용한 기기는 맥북 2015, 맥북프로 레티나, 아이폰 6s, 아이폰 6s 플러스 총 넷이지만 적용 범위는 점차 늘어날 것이다. 앞으로 출시하는 애플의 모든 맥과 아이폰에는 탑재된다고 보면 된다. 하드웨어와 소프트웨어의 조화를 중요하게 여기는 애플이 모델별로 서로 다른 인터페이스 환경을 조성할 리 없기 때문이다. 반면, 아이패드 라인업은 또 다르다. 힘을 줘 세게 누르는 3D 터치 입력 방식은 힘을 주는 반대 방향에서의 지지가 필요하다. 맥은 바닥에 놓고 쓰니 문제없고, 아이폰은 엄지를 제외한 나머지 네 손가락이 자연스럽게 뒤에서 지지하는 식이지만 아이패드만은 다르기 때문이다. 그래서일까. 2016년 초에 발표할 신형 아이패드 에어에는 3D 터치가 미탑재될 것이라고 한다.

어찌 됐든 지금의 터치 기반 HCI 패러다임은 ‘세게’ 누른다는 깊이 개념을 받아들여 큰 변화를 한 번 겪을 것이며, 이 여파는 안드로이드와 윈도우 플랫폼에까지 영향을 줄 전망이다. 이미 안드로이드 기반인 화웨이의 메이트S와 ZTE의 엑손미니에 ‘포스터치’란 이름으로 비슷한 기술을 적용한 상태. 3D 터치는 콘텐츠 미리보기, 빠른 실행 등 기능으로 다음 단계까지의 소요 시간을 단축시킬 것이다. 일정 소요 시간이 반드시 필요한 롱 터치 대비 특장점이다. 앞으로 우리는  같은 시간에 더욱 많은 콘텐츠를 짧게 짧게 볼 일이 많아진단 말이다. 그리고 이러한 인터페이스에 친화적인 서비스는 아직 없다. 틈새를 노릴 재기발랄한 아이디어가 쏟아져 나올 시간이다.



prepare: 준비할 것
3D 터치에 대해서 웹디자이너가 준비할 것은 아직까지는 없다. HTML5 웹 표준에 알맞은 인터페이스가 아니기 때문이다. 단, 앱 개발자와 디자이너라면 지금 바로 준비해야 할 것이다. 3D 터치를 어떻게 기존 서비스에 친화적으로 녹일 것인지에 대해서다. 아이폰 6s가 기본적으로 제공하는 3D 터치의 주요 기능은 아래와 같으니 참고하자.

1) 홈에서 앱 아이콘을 세게 누르면 빠른 실행 기능 목록  이 최대 네 개까지 나온다.
2) 콘텐츠가 리스트화된 서비스에서 목록 하나를 세게 누  르면 콘텐츠 내용을 미리 볼 수 있다.
3) 아이메시지에서 하이퍼링크로 뜨는 URL과 주소를 세  게 누르면 해당 웹사이트 혹은 지도상 위치를 미리 볼 수 있다.
4) 텍스트 입력 시 키보드를 세게 누른 후 포인트를 이동  하면 커서 이동이 가능하다.



아직 멀었거나 상관 없는 것
다음은 2016 하드웨어 트렌드라 부르기에는 아직 멀었거나 굳이 월간 웹 독자들이 준비할 필요가 없는 것이다. 직장 상사가 이를 준비하라고 말한다면 본 기사를 읽혀드리자.

01 웨어러블 디바이스
스마트워치, 헬스케어 등 웨어러블 디바이스는 여전히 틈새시장의 제품일 것이다. 올 초에 애플 워치2가 나온다고 하더라도 갑자기 판매량이 기하급수적으로 늘어날 일은 없다고 보는 것이 맞다. 필요가 없기 때문이다. 한쪽에서는 킬링 서비스가 나오지 않았기 때문이라며 콘텐츠를 탓하는데, 스마트폰에선 불가능했는데 스마트워치만이 할 수 있는 일상에 꼭 필요했던 서비스 자체가 없다. 시장의 성장 가능성은 여전히 있지만 적어도 2016년의 우리 모두가 준비할 만큼 큰 시장은 못 된다. 


[그림 06] 삼성이 기어S 2를 정말 잘 만들었지만 트렌드를 선도하진 못할 것이다


02 사물인터넷(IoT)
하다못해 ‘IoT 패딩 재킷’이라 부르는 제품까지 나온 시점에서 사물인터넷이란 게 대체 뭔지 아득해지는 때다(스마트 의류라 부르기도 하는데 이 네이밍마저도 구리다). 가트너는 이제 IoT(Internet of Things)가 아니라 IoE(Internet of Everything)의 시대가 올 것이라며 강조했지만, 같은 인터넷 기술이더라도 주로 비주얼 요소를 활용하는 웹디자이너와 개발자보다는 UX 기획자에게 좋은 영역일 것이다. 국내에서 LG전자가 준비를 열심히는 하고 있는데, 2015년도에 딱히 성과가 나오지 않는 걸 봐서는 이 시장 역시 초기 단계다.

03 스마트카
데스크톱에서 모바일로 패러다임이 완전히 바뀌었다면 넥스트 패러다임은 스마트카일 것이다. 스마트카는 누구에게나 필요하며, HCI 철학이 기본적으로 요구되며, 생산성 및 멀티미디어 등 서비스할 수 있는 것들이 무궁무진하기 때문이다. 하지만 스마트카는 정말이지 한참 멀었다. 기술이 나왔다고 하더라도 상용화까지는 시간이 걸리며, 도로와 교통 체계 등 제도 혁신까지도 함께 동반돼야만 하기 때문이다. 트렌드라고 부르기에는 너무도 아득하다.

tags 디아이투데이 , ditoday , 월간웹 , 월간web , 이창민 기자 , 하드웨어 트렌드 , 2-in-1 랩톱 , 서피스 프로4 , 4K 디스플레이 , 3D 터치 , 웨어러블 디바이스 , 사물인터넷 , 스마트카 , 기어S , 4K 모니터 ,

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

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

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

관련기사

최신뉴스
월별 특집 & 기획
가트너가 예상하는 2016년 10대 전략 기술
월별 특집 & 기획
월간 웹이 추천하는 2016 웹디자인 트렌드
월별 특집 & 기획
UI·UX 개념을 뒤엎을 2016 하드웨어 트렌드
월별 특집 & 기획
애플의 웹 디자인과 기술, 너는 이렇게 디테일한가?
월별 특집 & 기획
해외 쇼핑 전에 알아야 할 필수 정보, 영국 쇼핑 앱 순위

정기구독신청