인공지능(AI) 시대는 꾸준히 대두되어왔으며 세계 각국은 AI가 바꿔놓을 부와 노동의 미래를 예견하는 데 온 역량을 투입하고 있습니다. 지난 8월 15일 저희는 시사IN에서 주최하는 2018 인공지능 콘퍼런스에 다녀왔습니다. 콘퍼런스에서 인상 깊었던 두 교수님의 강연을 공유하려 합니다.

로봇 윤리 : 원칙에서 정책으로 - Alan Winfield

작성자 : 김성경

세계적인 로봇 권위자인 영국 UWE Bistol 로봇 윤리 교수이자 로봇 자동화세 주창자인 '앨런 윈필드'의 강연을 듣고 왔습니다. 이번 내용에서는 로봇 윤리에 관한 문제점과 그 문제를 해결하려는 노력에 대해 공유하려 합니다.

AI의 윤리적 문제

1. 운전자와 보행자의 목숨을 앗아간 무인 자동차

자율주행모드 사고 (출처: Florida traffic crash report)

2016년 한 운전자가 자율주행상태로 운전을 하던 중 사고로 사망한 사례가 있습니다. 자율주행모드 자동차가 하얀색의 트럭을 하늘과 같다고 착각하여 트레일러를 들이받은 것이지요. 테슬라는 운전에 집중하지 않은 운전자의 잘못이라고 했지만, 앨런 교수는 입증되지 않은 자율주행기술을 실제 환경에서 인간을 대상으로 안전을 테스트한다는 자체가 비윤리적이라고 말했습니다.

이 외에도 올해 3월 자율주행 우버 차량이 보행자를 인지하지 못해 보행자가 사망한 사례가 있습니다. 정확한 원인은 밝혀지지 않았고 아직 조사하고 있습니다. 여기서 충격적인 사실은 정부가 ‘Uber’라는 회사와 비밀스럽게 테스트를 하고 있었다는 것입니다. 시민들은 자신들이 사는 곳에서 테스트가 이뤄지는지조차 몰랐습니다. 과학자들은 비윤리적인 실험을 할 수 없습니다. 그러나 로봇의 경우 앞서 말한 두 사례와 같이 비윤리적인 실험들이 행해지고 있습니다.

2. 로봇과 자동화로부터 생산되는 이윤 배분 문제

2014년 영국 옥스퍼드대 딜로이트의 일자리 미래 보고서에 따르면 영국 내 현재 일자리의 35%는 20년 안에 AI에 의해 대체될 것이라 합니다. 이에 대한 대책으로 2015년 앨런 교수는 로봇과 자동화에 따른 실업 위기에 대비하기 위한 '자동화세'를 제안했습니다. '자동화세(Automation Tax)'란 로봇과 인공지능의 자동화로 작업장 일자리가 축소될 해당 기업에 세금을 부과하여 실직자를 지원하는 재원을 마련하자는 취지의 안입니다. 로봇의 발전은 시민들이 지불한 세금으로 이루어졌기 때문에 그로부터 생산되는 이윤을 나눠 갖는 것은 당연하다는 것입니다. 뿐만 아니라 부를 나눠 갖는다고 했을 때 모든 사람들이 공평하게 나누어 가질 수 있는지 또한 문제점으로 꼽았습니다.

3. 인간을 닮아가는 로봇의 겉모습

앨런 교수는 똑똑하지 않은 로봇이 사람과 같은 모습을 하는 것 또한 문제가 된다고 말했습니다. 시간이 흘러 인간과 비슷한 정도의 지능을 갖추지 않는 이상 현재의 지능에서는 신체와 두뇌 간의 부조화가 발생하기 때문에 인간을 닮은 로봇은 만들면 안 된다고 주장했습니다. 올해 초 한창 이슈였던 인공지능 로봇 '소피아'가 지난 10월 사우디아라비아 정부로부터 시민권을 부여받은 사례를 들며 로봇이 인간의 모습을 가졌을 때 발생할 수 있는 문제들의 우려를 표했습니다.

윤리적 문제점들을 해결하기 위한 노력

1. 높은 수준의 투명성 지향

높은 수준의 투명성이 필요하다고 앨런 교수는 말했습니다. 투명성이 보장된다면 사람들은 안심하게 될 테니까요. 항공기로 예를 들겠습니다. 항공기에서 사고가 발생하면 사고 조사 리포트를 통해 언론에 공개됩니다. 시민들은 투명한 조사 결과를 보며 사고가 정확하게 조사되고 있다는 사실만으로도 안심하게 됩니다. 항공기가 모든 주행 기록을 가지고 있는 것처럼 혹은 자동차에 블랙박스가 있는 것처럼 자율주행차량, 일부 의료진단 AI 등 AI 로봇도 마찬가지여야 된다고 말합니다. 그뿐만 아니라 AI 내부의 의사결정의 log도 기록되어야 하며 이렇게 된다면 고령 인구도 로봇이 어떠한 일을 수행할 때 '왜' 그렇게 행동하는지 의사결정의 이유를 알게 되면 신뢰도가 올라갈 수 있습니다.

2. 로봇의 윤리 문제를 다룬 공식 가이드라인(BSI) 발표

'영국표준연구소(BSI:British Standards Institute)'는 로봇의 윤리문제를 다룬 공식 가이드라인을 발표했습니다. 이 가이드라인에서는 로봇 비인간화, 환경적 문제 등 20여 개의 위험을 규명하고 있으며 어떻게 하면 피해를 최소화할지 방법을 제시합니다. 이 표준은 로봇 업계 및 시스템 관리자와 설계자를 위해 만들어졌으며 과학자나 철학자, 윤리학자뿐만 아니라 로봇, 제조 및 엔지니어링 산업 내 지식인들이 모여 토론을 통해 개발하였다고 합니다.

※ 참가 기관의 예 : Bristol Robotics Laboratory, University of Liverpool, Consumer and Public Interest Network (CPIN), Health and Safety Executive (HSE), University of Sheffield, Knowledge Transfer Network (KTN) and AVIAN Technologies.

로봇 실험을 통한 윤리적인 딜레마 사례

도로를 걸어가는데 도로에 큰 구멍이 있고 그 위를 누군가 핸드폰을 보며 지나가는 것을 상상해봅시다. 누구나 그 사람을 구하려 할 것입니다. 왜 구하려 할까요? 착한 사람일 수도 있겠지만, 사람은 '미래'를 '예측'할 수 있기 때문입니다. 앨런 교수는 로봇에게 이러한 인지적 프로세스를 적용하여 미래를 예측할 수 있도록 설계한 실험을 진행했습니다.

위의 이미지를 설명해 드리자면, H-robot이 위험한 구멍(Hole)을 향해 가는 사람이고 A-robot은 위험을 막아야 하는 로봇입니다. 실험 결과 로봇은 어떤 결정을 내렸을까요? H-robot이 Hole에 못 가도록 충돌을 만든 후에 원래 로봇이 가려던 곳(goal)을 향해 갔습니다. 매우 간단하죠? 이번에는 앨런 교수는 A-robot 윤리적 딜레마 상황에 부닥치도록 했습니다.

구멍으로 가는 사람이 한 명일 때는 매번 사람을 살릴 수 있었지만, 두 명의 사람이 구멍으로 향할 때 A-robot은 어쩔 줄 모르는 상태에 빠졌습니다. 가끔 한 명을 살리기도 했지만 결정 장애를 가진 로봇은 대부분 두 명의 사람 모두 살리지 못했습니다. 즉, 이 실험을 통해 알 수 있는 것은 로봇은 윤리적인 결정을 할 수 없으며 결국 로봇의 행동도 인간의 선택에 따라 결정되며 인간의 선택에 따라 인간에게 돌아가는 혜택이 결정된다는 것입니다.

마치며

AI에 관한 다양한 이슈를 접해왔지만, 이번 강연을 통해 ‘윤리’관점으로 새롭게 생각해보는 시간이었습니다. 현재 AI는 효율적인 기능 수행뿐 아니라 인간과 감정적으로 상호작용하는 수준에 이르고 있습니다. 아주 먼 미래에는 내 옆을 항상 지켜주고 관리해주는 AI가 항상 상주하여 '1인 1 AI'라는 말이 나올 수 있지도 않을까요? 그렇다고 했을 때 앞으로의 AI의 윤리적 관점은 점점 더 중요해질 것 같습니다. '원칙'으로 정의되는 것들이 '정책'이 되는 그날을 기다려봅니다.

인공지능과 윤리 - Ronald Arkin

작성자 : 박정현

미 조지아 공대의 로날드 아킨 교수님은 ‘킬러 로봇’이라고도 불리는 전쟁현장의 로봇에 대한 이슈를 들려주었습니다.

전쟁을 겪어보지 않은 필자로서는 상당히 흥미롭고 생소한 주제였는데요, 현실의 삶을 살면서도 제가 늘 외면하는 현실 중의 하나는 아마도 '지금 이 순간에도 어디선가는 전쟁이 일어나고 있다'일 것입니다. 아킨 교수도 말했듯, 전쟁은 일어나서는 안 되지만 계속해서 일어납니다.

군사적 관점에서 로봇은 왜 조명을 받을까요? 전쟁이 계속된다는 전제에 근거하여, 로봇이 대신 일 하여 필요한 병사 수를 감축할 수 있기 때문입니다. 사람은 밥도 먹고 화장실도 가는데, 로봇은 더 효율적으로 사람들을 대신하여 일할 수 있습니다. 또 자율주행차, 드론, 무인 비행기 등을 이용할 수도 있고요. 사람이 감지할 수 없는 것들을 감지하는 등, 기술을 통해 전투력을 강화할 수도 있습니다.

여기서 우리는 발생 가능한 문제들을 봐야 합니다. 킬러 로봇이라고 명명되는 '치명적 자율 무기'가 있습니다. 삼성테크윈 쪽에서도 개발했지만 스스로 결정을 내리도록 만들어진 로봇들입니다. 타겟을 감지하여 공격하는 로봇이죠. ‘자율’무기란, 인간이 프로그래밍한 룰에 기반하여 결정하고 행동하는 로봇입니다. 결국, 방아쇠를 당기는 결정은 사람이 하는 것이죠.

따라서 윤리적 관점에서 우리는 어디까지 인공지능에 결정권을 맡길 것인지에 대해 결정해야 합니다. 로봇 컨트롤 위원회, 국제 인권 감시 기구 등 여러 집단이 다양한 목소리를 내고 있습니다. 아킨 교수는 윤리적 관점에서의 법을 찾아 제한된 범주를 가지고 로봇이 전쟁에 이용되도록 하자고 주장했습니다. 일례로, 교전법이라는 것이 존재하고, 이는 군인들이라도 공동묘지에 있으면 공격해서는 안 된다는 등의 내용을 포함합니다. 아킨 교수가 가장 우려하는 바는, 무고한 민간인들의 죽음이었습니다. 어떤 방식으로든 전쟁 과정에서 민간인의 희생을 줄이기 위해 기술적 차원의 검토가 필요하고, 가능하다면 기술을 사용해 피해를 적극적으로 줄여야 한다는 것입니다.

과거에는 영토를 확장하기 위해, 남이 가진 것을 빼앗기 위해, 또 권력의 쟁탈을 위해 물리적인 전쟁을 벌였습니다. 이제는 세계의 많은 나라가 먹고 사는 데에 문제가 없고, 영토의 경계가 안정화 된 듯합니다. 그러나 정치적, 외교적 이유로 전쟁의 가능성을 닫지 않습니다. 우리는 현대 사회에서 실제적인 사살, 실제적인 폭력과 물리적인 무너트림이 없는 전쟁을 어떻게 할 것이며, 여기서 로봇이 어떤 역할을 해야 할지 생각하고 결정해야 할 것입니다. 기술에 가속을 붙이기 전에 관점을 가지지 못해 우리 스스로가 망가지는 현상이 일어나지 않기 위해 책임을 가지고 생각해 나가야 할 '현실의 인간으로서의' 의무를 느낀 시간이었습니다.

<참고 기사>

http://dongascience.donga.com/special.php?idx=763

http://www.hankookilbo.com/v_print.aspx?id=29d68d9f4a5142218be55d19b43a6708

ai, 로봇, 인공지능

시작하며

우리의 일상에서 동영상 시청이 차지하는 비율이 점점 높아지고 있다. 필자 또한 예전보다 동영상을 감상하는 시간이 많이 늘어난 것을 실감하고 있다. 그리고 집에 있는 TV보다는 모바일로 영상을 감상하거나 이동 중에도 수시로 영상을 감상한다. 어느 날은 모바일로 유튜브 영상을 보다가 우연히 플레이어 영역을 ‘두 번 터치’ 한 경우가 있었는데 '10초 다음으로 이동’ 기능이 제공되어 놀랐었던 경험이 있다.

개인적으로 UCC(User creative contents) 중심 UI는 Youtube가 선도적이라고 생각하는데, 그도 그럴 것이 동영상 플레이어 관련한 새로운 기능들은 대부분 Youtube에서 출발한 것들이 많다. (세로 모드로 영상 시청 중 화면을 아래로 쓸어내리면 '미니 플레이어’로 전환되는 방식도 Youtube에서 먼저 제공했던 것으로 알고 있다. 현재는 해당 멀티태스킹형 UI가 표준화되었지만 말이다)

이와 맞물려 시간이 지남에 따라 모바일 플레이어 앱 서비스는 점점 고도화되고, 사용자의 편의를 위해 한정된 영역에서 다양한 기능을 활용할 수 있는 다양한 방식들이 고려되고 있다. 이에 각종 모바일 동영상 플레이어에서 Gesture를 어떤 식으로 활용하는지 사례를 간단하게 찾아보았다. 사실 IT 업계가 그렇듯 1~2년만 지나도 새로운 것이라고 생각하던 서비스들이 옛날 것으로 바뀌는 것이 현실이다. 하지만 현시점에서의 UI가 나중에 또 어떤 방향으로 변화하는지 살펴보는 것도 흥미로울 것 같다.

[그림1] Youtube 동영상 플레이어 : 미니 플레이어 전환

1. Youtube

Youtube VOD는 기본적으로 영상을 한번 탭 하면 관련 버튼들이 호출되고, 다시 탭 하면 사라지는 방식으로 제공된다. (다른 동영상 플레이어도 유사한 방식을 제공한다) 그리고 VOD 영상의 좌측 영역을 두 번 탭 하면 10초 이전으로, 우측 영역을 두 번 탭 하면 10초 다음으로 이동한다. 또한, 세번 탭 하면 20초, 네번 탭 하면 40초 단위로 이동한다. 즉 해당 기능을 재생구간 이동 용도로 활용하고 있다. 이건 최근에 추가된 기능인데, 영상에서 하→상 방향으로 Swipe 하면 관련 동영상 목록을 불러올 수 있다. 이는 단순히 하나의 영상을 감상하기만 하는 것이 아니라 다양한 영상을 쉽게 탐색할 수 있도록 하는 기능을 강조하려는 의도라고 생각한다.

유튜브 플레이어(Web)의 과거

[그림2] Youtube 동영상 플레이어 : 주요 Gesture

2. 페리스코프 (Periscope)

실시간 개인방송을 지향하는 페리스코프에서도 VOD를 제공한다. 페리스코프는 기본적으로 세로 모드 영상을 제공하는 것이 특징이다. 페리스코프에서는 VOD 영상을 Long Tap 하면 구간 탐색 기능을 제공한다. 조금 특이한 방식이고, 재미있기는 한데 전체 영상 시간을 직관적으로 알 수 없고, Gesture를 이어서 진행하기에는 불편한 느낌이다. 구간탐색 모드에서 구간탐색은 좌/우 Drag로 이동하고, 좌/우 구간탐색을 하는 중에 상/하 이동을 같이 수행하면 미세 조정이 가능한 방식으로 되어있다.

[그림3] Periscope 동영상 플레이어 : 주요 Gesture

3. TVING

TVING VOD에서는 좌측영역을 상/하 Swipe 하면 밝기조절 기능을, 우측영역을 상/하 Swipe 하면 음량조절 기능을 제공한다. 그리고 좌/우 Swipe를 하면 추천 채널 및 회차 이동 UI를 제공한다. 좌→우 Swipe 하면 '인기 Live 채널' 호출을, 우→좌 Swipe 하면 '회차, 최신방송'을 호출한다.

[그림4] TVING 동영상 플레이어 : 주요 Gesture

4. 옥수수 (Oksusu)

옥수수 VOD에서는 좌측영역을 상/하 Swipe 하면 밝기조절 기능을, 우측영역을 상/하 Swipe 하면 음량조절 기능을 제공한다. 그리고 좌/우 Swipe 하면 재생구간 이동 기능을 제공한다. 이 외에 타사에 없는 새로운 기능을 제공하는 것이 하나 있다. 화면을 Double Tap 하면 가로 모드에서 세로 모드로 전환, 세로 모드에서 가로 모드로 전환한다. 확실히 특이하긴 하지만 유용한 기능인지는 잘 모르겠다.

[그림5] 옥수수 동영상 플레이어 : 주요 Gesture

5. 비디오포털

비디오포털 VOD에서는 좌측영역을 상/하 Swipe 하면 밝기조절 기능을, 우측영역을 상/하 Swipe 하면 음량조절 기능을 제공한다. 그리고 좌/우 Swipe 하면 재생구간 이동 기능을 제공한다.

[그림6] 비디오포털 동영상 플레이어 : 주요 Gesture

정리하며

다음과 같이 모바일 동영상 플레이어 내 Gesture UI를 간략하게 살펴보았다. 예전에는 동영상 플레이어에서 Gesture를 잘 활용하지 않았지만, 요즘에는 고객의 시청 경험을 향상하기 위한 부가요소로 Gesture가 적절히 활용되고 있는 것을 알 수 있다.

[그림7] 각 VOD 서비스별 Gesture를 통한 UI 호출방식

한 가지 흥미로운 점은 대부분의 국내 서비스는 상/하 Swipe 하면 밝기조절과 음량조절을 제공한다는 것인데, 정작 해외 사례를 보면 상/하 Swipe를 다른 부가적 기능으로 활용(관련 동영상 호출)하거나, 해당 Gesture를 사용하지 않는 것을 파악할 수 있었다. 또한, 대부분의 국내 서비스에서는 좌/우 Swipe는 구간 탐색 기능이나 관련 영상 호출 기능으로 활용하는데 해외 사례에서는 좌/우 Swipe Gesture를 활용하지 않는 경우가 대부분이었다. 상/하/좌/우 Swipe 기능이 잘 활용이 되면 유용하겠지만, 사용자의 입력 오류를 발생시킨다는 점을 고려해 신중히 활용되어야 할 것이다.

N Player의 경우 좀 더 나아가서 Gesture를 별도로 커스터마이징 할 수 있는 기능을 제공한다. 모든 설정이 귀찮듯, 커스터마이징을 사용자에게 전부 맡길 수는 없겠지만 필요에 따라 사용자의 성향과 상황에 맞는 Gesture를 제공할 수도 있겠다.

[그림8] N Player : Gesture 커스터마이징

물론 Gesture 사용에 있어서 단점도 존재한다. Gesture는 직접 사용해보지 않고는 해당 기능이 있는지 알기 어렵고, Gesture 자체가 익숙하지 않은 경우도 있다. 이러한 문제를 해결하기 위해서는 ‘도움말’ 같은 팝업 화면을 활용하여 안내할 수도 있다. 팝업 형태의 안내도 있겠지만 Youtube에서는 프로그래스 바의 Knob을 잡고 Drag & drop을 했을 때 상단에 구간이동 Gesture에 대한 간단한 설명을 제공한다. 이런 방식으로 자연스럽게 사용자에게 기능을 안내하는 것도 바람직한 방향이라고 생각한다.

[그림9] NaverTV 동영상 플레이어 : Gesture 이용 가이드

[그림10] Youtube 동영상 플레이어 : 재생구간 Gesture 이용 가이드

반면 넷플릭스의 동영상 플레이어는 Gesture 기능이 제공되지 않는다. Gesture 기능이 제공되지 않는다고 해서 특별히 사용이 불편한 것도 아니다. 만약 동영상 플레이어의 Gesture UI를 기획해야 한다고 하면, 이러한 점을 함께 염두에 두어야 할 것이다. 마지막으로 단순히 타사를 참고하기만 할 게 아니라, 어떤 Gesture와 기능을 활용할 수 있을지 깊이 있게 고민해야 한다. 좀 더 나은 UI를 기획하기 위해서는 당연하게도 더 많은 고민이 필요하고, 그것은 결국 사용자의 편의를 위한 것이어야 한다. ⓦ

gesture, UI, UI 디테일, VOD, Youtube, 동영상, 디테일, 모바일, 제스쳐, 플레이어

들어가며

최근 진행한 프로젝트에서 좌석 예약을 위한 키오스크 UI를 설계했습니다. 키오스크는 모바일, 웹 UI와 비슷하면서도 큰 화면크기, 입력방식, 사용환경에서 모바일, 웹과 다른 특징을 가지고 있었습니다. 프로젝트를 진행하면서 몇 가지 테스트와 리서치를 통해 알게 된 키오스크 UI 설계 시 고려할 점을 공유하고자 합니다.

시야각(인지 영역) 고려하기

시야각을 고려해야하는 이유

[그림 1] 주변시(Peripheral vision of the human eye)

한 번에 정보를 파악할 수 있는 시야각은 생각보다 넓지 않습니다. 큰 화면에 있는 많은 정보를 잘못 구성한다면 사용자는 필요한 정보를 찾는 데 어려움을 느끼게 됩니다.

시각 상태는 사물을 가장 또렷하게 구분할 수 있는 중심시, 황반 영역(그림 2의 ①영역)과 상대적으로 식별능력이 떨어지는 주변시로 구분됩니다. 일반적으로 30° 시야각 내의 근주변시(Near Peripheral Vision, 그림 2의 ②영역)까지는 어느 정도 인지가 가능하지만, 이 영역 밖의 주변시의 사물은 쉽게 인지하기 어렵습니다. 컴포넌트와 정보가 근주변시 영역 밖에 흩어져 있다면 사용자가 이리저리 고개를 돌리며 헤매는 불편함이 생길 수 있으므로 시야각을 고려하여 사용자가 응시하고 있는 곳을 중심으로 피드백이나 상태변화가 이루어지는 것이 좋습니다.

인지 영역 계산하기

[그림 2] 50인치 화면에서 인지 영역

프로젝트를 진행하며 실제 사용할 크기의 스크린에서 컴포넌트의 크기와 중심시 범위를 테스트하고 UI 설계를 마무리할 무렵 화면에서 시각영역별 넓이를 계산했습니다. 계산 결과를 바탕으로 컴포넌트가 적절하게 제공되었는지, 시각 영역을 잘 고려했는지 확인해봤습니다. 계산한 근주변시 영역은 지름 577px의 원(50인치 기준)으로 인지 영역이 생각보다 크지 않았음을 다시 확인할 수 있었습니다. 사용자가 응시하고 있는 곳 중심의 인지 영역 내에 다음 플로우와 연결되는 CTA 버튼, 과업 수행에 필수적인 정보가 제공될 수 있도록 설계했습니다.

[그림 3] 스크린 크기별 인지 영역

[그림 3]에서와 같이 화면 크기에 따라 한번에 인지할 수 있는 영역이 다릅니다. 웹, 모바일에서는 화면 전체가 인지 영역 안에 있어 화면 하단이나 코너에 버튼이나 정보를 배치해도 문제가 없을 수 있습니다. 하지만 큰 화면의 키오스크에서는 버튼을 찾기 어려운 사용성 문제나 중요 정보 전달이 이루어지지 않는 문제가 발생할 수 있습니다. 이러한 문제를 방지하기 위해 키오스크를 설계할 때는 다른 기기보다 더욱 세심한 인지 영역에 대한 고려가 필요합니다.

*[그림 2],[그림 3]에 표시된 인지 영역 기준: 시야각은 중심시 5°, 황반 영역 18°, 근주변시 30°로 계산했습니다. 50인치, 24인치 기기의 화면-사용자 간 거리는 50cm, 5.8인치 기기의 화면-사용자 간 거리는 30cm로 화면 내 크기를 계산했습니다.

입력 방식 고려하기

불편한 터치감

키오스크를 터치로 조작할 때 느린 반응 속도와 촉감 때문에 불편함을 느끼기 쉽습니다. 특히 핀치 줌 인-아웃, 드래그 등의 화면을 문지르는 입력 방식을 사용할 때 더 자주 불편함을 느낄 수 있습니다. (대부분의 키오스크에서 아래 이미지와 같이 느린 반응 속도를 보여줍니다.)

[그림4] 키오스크 조작 시 느린 반응 (손에 땀이 났을 땐 '삑!' 소리가 날 수도 있습니다.)

입력 방식에서 오는 불편함을 최소화하기 위해 탭(Tap)으로 조작할 방법을 함께 제공하거나 탭 버튼을 중심으로 조작할 수 있게 하는 것이 좋습니다. 예를 들어, 지도 화면에서 핀치 줌 인-아웃으로 제어할 수 있으면서 줌-아웃 버튼을 함께 제공하는 것, 버튼으로만 줌-아웃을 할 수 있도록 제한하는 것이 있습니다.

About face3에서 언급한 Drag&Drop에 관한 글, 2011

제한된 입력방식

키보드가 따로 연결된 키오스크도 있지만, 대부분의 키오스크는 터치 방식으로만 조작할 수 있습니다. 일반적인 탐색 과정에서는 터치 방식만으로도 문제가 없지만, 문자를 입력해야 할 경우 불편할 수 있습니다. 전체화면을 사용하는 OS 키보드는 화면이 50인치 정도로 커지면 눌러야 할 버튼과 버튼의 간격이 1ｍ 정도가 될 수도 있습니다. 이런 경우 크기가 작은 가상 키보드를 검색 필드 근처에 제공하거나 초성 검색 등의 방법을 통해 키보드 사용의 편의성을 고려할 필요가 있습니다.

사용 환경 고려하기

패스트푸드점이나 대중교통 예약 키오스크 앞에 길게 줄을 선 모습을 본 적이 있을 것입니다. 키오스크는 여러 사람이 공개적인 장소에서 함께 사용하는 기기입니다. 이 특성 때문에 키오스크는 모바일 설계 보다 더 고려해봐야 할 것들이 있습니다.

여러 사람이 사용하기 때문에 사용시간을 최대한 줄일 방법을 고려해야 합니다. 인지 부하를 줄이는 방법 외에도 매 순간마다 필요한 기능을 제공하는 것이 중요합니다. 이를 위해 사용 시나리오와 환경을 고려하여 설계해야 합니다. 시나리오에 없거나 사용 환경에 어울리지 않는 기능들을 제공한다면, 사용자가 처리해야 할 정보의 양이 많아져 혼란을 줄 수 있습니다. 또한, 불필요한 탐색을 유발하여 사용 시간이 길어질 수 있습니다.

공개적인 장소에서 개인정보를 보호할 방법, 다수의 이용자를 고려해야 합니다. 이를 위해 노출되는 개인정보를 최소화하는 것이 좋습니다. 또한, 로그아웃하지 않았거나 과업을 도중에 포기하고 키오스크를 떠났을 경우를 고려하여 특정 시간 후 초기화면으로 돌아가게 하여 다른 이용자들이 처음부터 사용할 수 있도록 해야 합니다.

마치며

키오스크를 사용하며 불편한 조작 방식 때문에 뒷사람의 눈치를 보며 사용했던 경험이 있습니다. 스크린의 크기에 따른 인지 영역, 입력 방식 그리고 사용 환경을 고려한다면 사용자가 빠르게 목적을 달성할 수 있는 키오스크를 디자인할 수 있을 것입니다. 사려 깊게 디자인된 키오스크가 늘어나 음식을 더 빠르게 주문하고 예약을 위해 줄 서는 시간이 줄어들기를 기대합니다.

참고

주변시 정보 및 이미지 - https://en.wikipedia.org/wiki/Peripheral_vision

삼각형 변의 길이 계산 - https://www.triangle-calculator.com/

UI 설계, 사이니지, 시야각, 인지 영역, 키오스크

Alan Cooper Keynote, Interaction 18 컨퍼런스

들어가며

이번 글에서는 2018/19년에 가 볼만한 해외에서 열리는 UX 컨퍼런스 8 군데를 모아 보았습니다. 순서는 시간 순서대로 배열하였습니다.

UX 컨퍼런스에 참가하면, 어떤 것을 얻어갈 수 있을까요? 우선 업계 흐름을 알 수 있습니다. 어떤 도메인에서 UX 수요가 성장하고 있는지 짐작할 수 있습니다. 예를 들어, 최근 AI와 VUI 관련 케이스 스터디를 많이 접하게 되면, 이 분야에 수요가 있다는 것을 짐작하게 됩니다. 두번째로, 내가 일하는 회사 밖의 업계 종사자와 직·간접적으로 만나 관심사, 어려운 점을 공유할 수 있습니다. 다른 회사나 종사자는 어려운 점을 어떻게 극복하는 지 배울 수 있습니다. 세번째로 본인의 업무 프로세스나 업무를 대하는 태도를 새로운 시각으로 볼 수 있습니다.

컨퍼런스 8선

1. UI/UX Conference China / 상하이, 중국

3. EURO IA / 더블린, 아일랜드

8. IA Summit / 올란도, 플로리다

마치며

이렇게 UX 컨퍼런스의 목적, 주최 기관, 도시에 따라 종류가 다양한데요. 본인이 어떤 목적으로 컨퍼런스에 참가하고 싶은지 고민해보고, 네트워킹 혹은 실무 능력 향상이 목적인지에 따라 선택지가 달라질 것입니다. 또 영상이나 발표 자료를 공유하는 컨퍼런스가 많아져서 반드시 직접 참가하지 않더라도, 웹사이트나 Slideshare, Medium, Youtube에서 강연 내용을 접할 수 있으니 참고하면 좋을 것입니다.

컨퍼런스

본 글은 김준 책임의 '짝 디자인(Pair design)'이라는 주제의 발표 내용을 토대로 팀원과 직접 '짝 디자인'을 시도해 보았던 경험과 생각을 공유합니다.

1. 들어가며

각자 디자인의 문제점

현재는 여러 디자이너가 모여 팀을 이루고 그 안에서 '각자' 디자인 작업을 합니다. 특정 일을 모듈별로 나눠서 한다거나 각자 시안 한 개씩 만드는 것을 그 예로 들 수 있습니다. 이렇게 각자 디자인을 하게 되면 혼자서 제안과 검증을 반복하는 것이 어려울 수 있으며 작업 진행이 더디거나 팀 간 소통 부족으로 미성숙한 아이디어가 채택될 수 있습니다. 그리고 자신의 시간에 온전히 집중하지 못해 몰입의 어려움을 겪을 수 있습니다. 그 결과 낮은 디자인 퀄리티, 사람에 따라 들쭉날쭉한 퀄리티의 작업물이 나올 수 있으며 더 많은 시간과 비용이 들게 됩니다. 그리고 낮은 자기 확신과 불만족을 경험할 수 있습니다.

2. 짝디자인 소개

Working together closely : 함께하다, 같이하다

짝 디자인(Pair Design)이란 디자인 문제를 해결하기 위해 두 디자이너가 '짝'을 이루고 작업하는 방식을 말합니다. 주로 개발자들 사이에서 쓰였던 용어(Pair Programming)이며 짝 프로그래밍을 경험한 개발자 중 96%는 "더 즐겁다," 95%는 "자신감을 얻었다", 56%는 "결함을 감소했다"라고 답했습니다. 개발자 외에도 공동 목표를 향해 짝을 지어 함께 작업하는 예로 조타수와 항해사, 아티스트와 프로듀서, 찰스밍거와 워렌 버핏이 있습니다.

Two defined stances : 두 개의 스탠스

짝을 이루는 두 디자이너를 Generator와 Synthesizer라 칭합니다. 이들은 자신의 임무를 수행하며 상호보완적인 관계를 이룹니다. 각각의 역할에 대해 구체적으로 설명하겠습니다. 먼저, Generator는 아이디어를 명확하고 빠르게 내어놓습니다. 틀릴까 조마조마하지 않고 자신 있게 아이디어를 내놓는 능력이 요구되며 자기 생각을 시각화하는 것을 좋아하며 아이디어가 어설퍼도 잘 내어놓을 수 있어야 합니다. 또한, 디자인 패턴, 디자인 트렌드와 모범사례에 빠삭해야 합니다. Synthesizer는 항상 큰 그림을 그리며 아이디어를 검증하고 디자인이 진행되도록 합니다. 이해와 공감을 바탕으로 비판적인 태도를 견지하는 능력이 요구되며 자기 생각을 논리적으로 말할 수 있으며 글로 표현할 수 있습니다. 또한, 주요 디자인 원칙, 휴리스틱, 비지니스적 통찰력, 사용성, 심리학, 비지니스 등 사례에 빠삭해야 합니다.

Generator와 Synthesizer의 노트 비교 (출처: Cooper.com)

위 사진을 보면 앞서 말했듯이 두 디자이너는 각기 다른 성향을 가지고 있습니다. Generator의 경우 머릿속에서 든 생각들을 멈추지 않으며 그 생각들이 완성되지 않은 모습이라도 바로바로 그립니다. 반면에 synthesizer는 자기 생각을 매우 세세하게 글로 옮깁니다.

3. 짝디자인의 장점

지속적인 테스트와 교정으로 인한 더 좋은 디자인

짝디자인의 경우 크리틱을 하는 사람이 상주합니다. Generator는 특정 상황마다 최적의 아이디어를 내놓게 되며, synthesizer는 아이디어와 디자인이 전체적으로 일관되고 클라이언트의 피드백과 맞아떨어지는지 등 계속해서 바텀업과 탑다운을 진행하며 확인합니다. 그로 인해 일관성 있으면서도 퀄리티 높은 디자인이 완성됩니다.

행복한 디자이너

디자이너들은 각각의 역할에만 충실하며 시간이 지날수록 전문성을 향상할 수 있습니다. Generator의 경우 아이디어를 낸 후 아이디어의 타당성을 확인하기보단 아이디어 혹은 시안을 계속해서 내놓으면서 이러한 능력을 꾸준히 연마하게 되고 시간이 지날수록 특정 능력이 고도화됩니다. Synthesizer는 멋진 시안을 뽑아내야 한다는 걱정보다는 좀 더 논리적이고 구체적으로 아이디어를 설명할 수 있는지 그리고 이런 것들이 큰 그림 안에서 잘 진행되고 있는지에만 집중하며 해당 능력을 향상할 수 있습니다.

성장하는 조직

Cross pollination이 이뤄지며 조직 자체 또한 굉장히 전문성 있는 사람들로 갖춰진 조직이 될 수 있습니다. Cross pollination이란 짝이 나뉘어 다른 짝을 형성하면서 좋았던 요소들이 분포되고 퍼지며 조직 자체가 성장하게 되는 것입니다.

Cross pollination 도식화

효과적인 과정

Generator는 synthesizer에게 자신의 의도를 잘 전달해야 합니다. 그러기 위해 선 하나를 그으면서도 무슨 생각을 하면서 무엇을 그리려는지 소리 내 디자인(디자인 얼라우드) 해야 합니다. 이 과정에서 모호하던 아이디어를 명확하고 구체적으로 표현할 수 있습니다. 혹시 궁금한 점이 생겨 질문하려 하는데 질문을 하다 보니 답을 알게 되는 경험을 겪어보신 적이 있으신가요? 이러한 현상을 메타코그니션(Meta-cognition)이라고합니다. 디자인도 마찬가지인 것입니다.

4.해결해야하는 점

공유 과정에서 발생할 수 있는 이해도 수준 차이

*다음 내용은 2개 이상의 짝이 존재하고 짝끼리의 소통이 필요할 경우 발생할 수 있습니다.

실제로 팀원끼리 짝디자인을 진행해보았습니다. 총 4명이 2명씩 짝을 이룬 후 각 팀마다 특정 주제로 아이디어를 발산하고 그 아이디어의 원칙을 세우는 작업을 진행하였습니다. 이후 두 개의 짝끼리 각자의 결과물을 공유하였습니다. 이 과정에서 내용에 대한 이해도의 차이가 발생하였습니다.

프로젝트는 논의가 진행될 때에 수많은 고민과 난관에 부딪히기 마련입니다. 작은 것부터 큰 문제까지 하나하나 해결해 나갈 때 아이디어는 구체화되고 단단해집니다. 그러나 공유 과정에서는 시간 문제와 효율상 그 모든 고민을 공유하지 못했기 때문에 이해도의 차이가 발생한 것입니다. 필자의 경우 두 개의 짝끼리 소통하는 과정에서 발생한 문제였지만, generator와 synthesizer 간의 관계에서도 유사한 문제가 생길 수 있음을 느꼈으며 작업할 때 소리 내서 디자인하는 '디자인 얼라우드'가 얼마나 중요한지 새삼 느끼게 되는 계기였습니다.

디자이너로서 자신의 강점 알기

짝 디자인을 하기 위해서는 generator와 synthesizer 중 내가 어떤 쪽에 더 전문성이 있는지 알아야 합니다. 단시간 내에 파악하기 힘들 수 있습니다. 경험을 쌓으며 내가 어느 부분에 더 강점을 가졌는지 알아가려는 노력이 필요합니다. 또한, 같이 일하는 팀원과 대화하며 파악할 수도 있습니다. 실제로 필자가 속한 팀에서는 이런 대화를 나눴고 서로가 봐온 서로의 특성들을 공유하며 자신의 특성을 알아갈 수 있었습니다.

4.맺음말

지금까지 짝디자인에 대한 내용이었습니다. 발산과 수렴에 모두 능하면 유니콘 디자이너가 될 수 있겠지만, 자신의 장점을 알고 전문성을 향상시킬 수 있다는 것과 서로 다른 장점이 있는 두 디자이너가 모여 짝을 이루고 시너지를 내는 방법에 대해 알 수 있었습니다. Generator와 synthesizer라는 단어를 사용하진 않지만, 사내에서는 프로스펙티브를 통해 서로의 업무 스타일과 장단점에 관해 이야기하며 부분적으로는 짝디자인이 이뤄지고 있는 것 같습니다. 이 기회를 통해 디자이너로서 자신의 역할에 대해 생각해보게 되는 좋은 계기가 되었습니다. 마지막으로 새롭고 유익한 내용을 공유해주신 김준 책임에게 감사드립니다.

pair design, 짝디자인, 프로젝트 방법

어느 날, 저희 블로그 구독자분이 다음과 같은 방명록을 남겨 주셨습니다.

To. 위 질문을 남겨 주신 '노트테이커' 님께

안녕하세요. 저희 피엑스디는 독자분이 남겨주신 방명록과 댓글에 최대한 답변을 드리려 노력하고 있습니다.

지난 6월, 이 질문을 보았을 때는 곧바로 답변을 드릴 수가 없었습니다. 과거의 투박해 보이는 디자인이 오늘날 둥글둥글하고 매끄러운 모습으로 변한 이유와 그러한 순서로 변한 이유에 대해서 딱 한 마디로 정리하기가 쉽지 않았기 때문입니다.

질문해 주신 포인트를 다시 곱씹어 보았습니다. '자연스러운 현상이 아닌가?' 또는, '일반화하기 어려운 주장이다.'와 같은 편견을 버리고 '왜 그런 느낌을 받게 되는가?'라는 점에서 다시 출발하여 다음과 같이 두 가지 주제로 정리해 보았습니다.

왜, 과거의 웹 디자인은 더 투박하고 딱딱해 보일까?

왜, 시간이 지나 둥글둥글하고 매끄러운 디자인으로 변해온 것일까?

마크 안드리슨의 모자이크 브라우저를 언급하셨기에 디스플레이를 매개로 삼는 웹/그래픽 디자인으로 범위를 좁혔습니다. 과거의 디자인은 투박하고 요즘은 매끄럽다는 점은 영역과 관점에 따라 전혀 다르게 주장할 수도 있겠지만, 질문자가 지적한 포인트 역시 충분히 공감됩니다. 그래서일까요? 이 질문에 대해 저희 피엑스디의 많은 분이 의견을 주었습니다. 그중에 몇 가지를 원문 그대로 소개해 드립니다.

1. 기술적 표현의 한계 때문이다

제 머릿속에 떠오르는 건 '기술적 표현의 한계' 때문인데요.

1. 디스플레이 해상도

90년대~2000년대 초반까지만해도 많이 사용되던 모니터 해상도가 800x600 ~ 1024x768 였는데 (...) 해상도가 낮으니 당연히 섬세한 표현이 어려웠던 것 같아요.

2. 드로잉툴의 불완전성

과거에 픽셀 찍어가며 이미지를 만들었던 건 픽셀작업이 재밌고 멋져서가 아니라 우선 툴이 그렇게 생겼기 때문인데요. 지금이야 포토샵에서 붓으로 찍은 점 가장자리 픽셀들이 투명+조정된 색상으로 표현돼 부드럽게 보이는 게 당연해보이지만 아래 포토샵 초기 인터페이스를 보면......

3. 과거 디스플레이들에서 출력 가능한 색상 / 웹 안전색상(216개)의 한계

웹에서의 이미지 표현이 안전색상(216개)에서 벗어난 건 생각보다 오래되지 않았는데, 이 안전색상이 별 의미가 없었다...는 기사도 본 기억이 나지만 어쨌든 2000년대 초반까지만해도 웹에서 사용할 수 있는 컬러는 대단히 제한적이라고 알려져있었고 지금은 당연하게 여겨지는 부드러운 곡선/곡면 표현이나 그라데이션 또한 색이 "모자라니까" 제대로 그려내기 어려웠을 거고요.

*사족으로...

웹브라우저 인터페이스와 웹페이지 디자인은 구분되어야할 것 같고요.

웹브라우저 윈도우에서는 상단 메뉴키나 하단 프로그레스, 경로, 파일명, 파일크기 등 정보 표시 영역이 필수적으로 존재하는데 콘텐츠(웹페이지)가 보여지는 영역을 최대치로 사용해야하는 한계가 있어 표현이 간소화되는 건 필연이라고 봅니다. 위의 표현적 한계와 제한된 인터페이스 영역, 과거 "버튼"이라고 인지되는 요소의 표준 형태 등을 고려했을 때 모자이크 브라우저는 당시로서는 표현의 최대치였을 것 같아요.

2. 시간을 그런 방식으로 경험했기 때문이다

참 어려운 질문이네요…

어떤 디자인은 시간이 지남에 따라 옛 것으로 느껴지기도 하고, 어떤 디자인은 오랜 시간이 지나도 여전히 현대적인 느낌이 드는데, 일부는 기술의 발전에 따른 것도 있지만, 대부분의 경우는 우리가 시간을 그런 방식으로 경험했기 때문일 것 같아요.

디자인 역사를 전공하신 교수님께 질문해 보시는 것이 좋을 것 같아요.

3. 더 좋아 보이는 것으로 대체된 것이다

과거의 디자인에서 표현 및 형태를 규정지었던 방식이 이후 시간이 흐르면서 더 좋아보이는 방식 혹은 다수가 받아들이는 새로운 방식으로 대체 되었을 때 ‘유행이 지났다’거나 ‘촌스럽다’고 느끼는 것 같아요. 그런데 어떤 디자인은 시간이 흘러서 일부가 바뀌었어도 여전히 그 표현 방식의 핵심이 유지되고 있는 것들이 있는데요, 우리는 이를 두고 ‘여전히 현대적이다’ 라고 느끼게 되는 것 같습니다. 시대가 지나도 유효한 표현방식을 취하고 있으니 이를 높이 평가하는 것이죠. (이런면에선 ‘모던디자인’은 여전히 ‘모던’ 한 것 같습니다)

이런 관점에서 보면 이 질문은 다분히 미학적인 질문이라고 생각되는데요, 미학과 교수님이나 진중권 선생에게 트윗을 해보면 어떨까 싶네요.

4. 클라이언트 퍼포먼스, CSS 때문이다

정답은 없고 주관적인 견해만 있을 질문이네요! 늦었지만 저도 답변 드립니다.

기술적 표현의 한계라는 큰 꼭지는 저도 같습니다. 웹 디자인은 클라이언트측 퍼포먼스와 밀접한 관계가 있는데 시간의 흐름에 맞춰 자연스럽게 디바이스 퍼포먼스는 좋아지고 전보다 높은 연산을 필요로 하는 표현법을 '공식적으로' 지원하기 시작하면 디자이너나 개발자는 새로운 기술을 비로소 적용하기 시작하는거죠.

Border radius는 옛날부터 어떤 방식으로든 구현 해 왔지만, 공식적으로 css3에서 지원하기 시작한건 그리 오래 되지 않았어요. 비슷한 예로 컬러모듈이나 미디어쿼리가 있죠. behance 2018 디자인 트렌드의 그라데이션도, 같은 이유에요.

CSS standard 를 보면, 트렌드라고 부르는 그 시점과 동일한것을 알 수 있어요. 또 웹과 앱 디자인은 트렌드를 공유하며 서로 영향을 받는 관계기 때문에 한쪽에서의 새로운 기술은 굉장히 쉽게 적용되고, 금새 트렌드가 되어진다고 생각해요. 회사에서도 한번 비슷한 주제로 얘기를 길게 한적이 있었는데 (누구였죠? 등판하세요!), 결국에 웹 디자인 트렌드는 CSS3에 큰 영향을 받는다고 생각해요.

5. 스큐어모피즘에서 플랫 디자인으로의 변화다

먼저 질문을 저희 식(?)으로 재해석 해보면...

과거: 투박하고 딱딱 -> 현재: 둥글둥글 매끄러운 디자인

=> 스큐어모피즘 -> 플랫 디자인으로의 변화로 바꿀 수 있을 것 같습니다.

하지만 스큐어모피즘이 투박하고 딱딱해 보인다(=촌스럽다)는 건 편향적이고 잘못된 시각입니다. 단지 요즘 트렌드가 아닐 뿐이죠.

과거에는 왜 스큐어모피즘으로 디자인 되었는가? 라는 더 나은 질문으로 바꿔서 생각해봅시다. 이에 대해서는 크게 두 가지 이유가 있다고 봅니다.

1. 어포던스

스큐어모피즘은 플랫디자인보다 현실 세계의 메타포를 적극적으로 표현하기 때문에 사용자에게 있어 러닝커브를 매우 크게 줄여줍니다.

과거엔 컴퓨터 보급률도 낮았고 디지털 기기의 경험치도 낮았습니다. 때문에 사용자가 현실세계에서 겪었던 개념을 그대로 반영하는 것이 사용성을 높일 수 있는 방안이었습니다. 시각적으로도 더 친숙하게 느낄 수 있기 때문에 진입장벽도 낮출 수 있는 유용한 방법이었을 테고요.

즉, 플랫 디자인보다는 어포던스가 높은 스큐어모피즘이 디자인적으로 더 효과적이었고 그래서 널리 사용되었습니다. 하지만 세살배기도 아이패드를 잡고 유튜브로 뽀로로를 보는 디지털 세대가 주류가 되면서, 이런 어포던스를 제공하는 것에 목맬 필요가 적어졌습니다. 많은 디지털 기기들을 접하면서 대충 어느 것은 버튼이고 어떤 것은 리스트고, 어떤 건 메뉴라는 것들이 이미 디지털 세대들에게는 체화되었기 때문이죠. 거기에 20여년 간 디지털 인터페이스들이 패턴화 된 것도 한 몫 하고 있고요. 그래서 플랫디자인이 사용될 수 있는 여건이 마련되었습니다.

2. 기술적인 한계

플랫 디자인은 위에서 말한 대로 어포던스가 비교적 떨어집니다. 하지만 기술의 발전이 이를 보완해줍니다. 바로 모션(트랜지션)의 등장입니다.

플랫 디자인은 모든 것을 형태와 색 정도로만 표현하기에 정적인 상태로만 표현되면 시각적으로 이해하기 어렵습니다. 하지만 어떻게 등장해서 사라지는지, 손을 댔을 때 어떻게 움직이는지 실제 물체처럼 표현한다면 (=매터리얼 디자인) 동작에 대한 예상(어포던스)을 더 쉽게 할 수 있게 됩니다.

과거에는 컴퓨팅 사양이 낮았기 때문에 모션을 제대로 표현하기가 어려웠습니다. 잘 표현하려면 많은 메모리, 뛰어난 그래픽 연산장치가 필요한데 예전 기술로는 정적인 이미지를 잘 표현하는 것도 힘들었거든요. 지금은 일반적인 웹브라우저에서도 실제와 가까운 모션을 자유롭게 표현할 수 있을 정도로 기술이 발달했고요.

결국 이렇게 모션을 통해 어포던스의 부족함을 채울 수 있게 되면서 플랫 디자인이 큰 문제없이 받아들여지게 됩니다. 재미있는 건, 모션이 얼마나 실제적이냐가 관건이 되면서 스큐어모피즘이 대체된 것이 아니라 오히려 모션 속에서 살아있다는 점입니다. 다시말해 시각적 스큐어모피즘에서 모션의 스큐어모피즘화라고 할 수 있겠습니다.

왜 플랫 디자인으로 바뀌는 걸까?

그냥 스큐어모피즘에 모션만 끼얹는 정도로 발전할 수도 있는 것 아닐까요?

이에 대한 답은 명확하지는 않습니다만, 미술 역사와 비교해 보면 약간의 힌트를 얻을 수 있습니다. 과거 미술도 회화중심의 그림이 위주였지만, 산업혁명 때 사진기가 대중화 되면서 현실을 사진보다 더 똑같이 표현하는 게 힘들어지자 추상적 표현 중심으로 바뀌었죠.

마찬가지로 디지털 세대가 주류가 되면서 더 이상 현실세계의 메타포를 사용하지 않아도 되게 되었고, 스큐어모피즘도 추상적인 표현인 플랫 디자인으로 바뀌어 가는 것이 아닌가 생각합니다.

그리고 스큐어모피즘은 제한된 디스플레이 크기에서는 현실 메타포를 표현하기 위해서 쓸데없이 많은 픽셀들을 소모한다는 단점이 있는데요. 이는 모바일 기기와 같이 작은 디스플레이에서는 매우 치명적인 단점이 됩니다. 때문에 모바일 퍼스트 시기와 맞물리면서 더 픽셀을 적게 소비하는 플랫 디자인으로의 변화는 필연적인 것 같기도 합니다.

마치며

지금까지 소개해 드린 총 다섯 분의 의견은 기술과 시대가 변하면서 그럴 수밖에 없었던 개연성을 말하고 있습니다. 이 글을 읽고 계신 여러분의 생각은 어떠하신가요? 또, 하나의 질문에서 이렇게 다양한 접근과 의견이 나오는 것을 보면서, UX 디자이너에게 '왜?'라는 질문의 중요성을 다시금 생각해 볼 수 있었습니다. 당연하게 쓰이고 있는 디자인 규칙과 인터페이스. 현재 이러한 모습을 보이게 된 기원은 무엇이었는지, 그 과정에 어떠한 일들이 있었는지를 곰곰이 생각해 본다면 근미래의 모습도 예상해 볼 수 있지 않을까요?

*이 글은 브런치에서도 볼 수 있습니다. @uxstar

<함께보면 좋은 글>

두 디자인 대륙의 충돌 - 메타포냐 메트로냐?

스큐어모피즘이란?

스큐어모피즘: 만져지는 UI로의 변화 과정

스팀펑크란?

[독후감] 사물의 이력

css, 그래픽디자인, 스큐어모피즘, 안전색상, 어포던스, 웹디자인, 인터페이스, 트랜지션, 플랫디자인

1. 들어가며

인턴 UI 디자이너로서 두 달간 일하며 음성 인식 기술을 공부하고 탐구해볼 기회가 생겼다. 개인적으로 시리를 몇 번 정도 사용해본 경험은 있지만, 사용 경험이 그리 만족스럽지 않아 지속적인 사용으로 이어지지 않았었다. 따라서 나에게 가상 개인비서(Agent)란 가깝고도 먼 존재였다. 하지만 이번을 계기로 구글 어시스턴트, 시리, 빅스비, 네이버 클로바, SK 누구, 알렉사 총 6개의 가상 개인비서(Agent)를 본격적으로, 성실히 사용해보았다.

최근 음성 인식 기술에 대한 높은 관심으로 인해, 여러 기업의 가상 개인비서(Agent)에 대한 사용 경험을 비교, 정리한 영상이나 자료들을 어렵지 않게 찾을 수 있었다. (이하 ‘음성 에이전트’라고 하겠다) 필자 또한 이의 연장 선상에서 수많은 발화를 각 음성 에이전트에게 말했을 때, 각 음성 에이전트가 어떻게 호응(반응)하는지에 대해 정리하고 느낀 점을 써보려 한다. 다만 기존 비교들과 다르게 ‘기능 수행’에 초점을 맞추기보단 ‘칫챗(Chit-Chat)’을 다양하게 시도해본 후 각 음성 에이전트가 어떻게 호응(반응)하는지 위주로 작성했다. 여기서 ‘칫챗’이란, 목적 없는 수다, 잡담 정도로 이해하면 될 것 같다. 따라서 ‘특정 서비스 기능에 대한 사용성 비교’보다 ‘칫챗 발화에 대한 대응 비교’라고 하는 것이 더 적절할 것 같다.

2. 각 발화 사례와 그에 따른 응답 내용

1) 에이전트 자체에 대한 질문

음성 에이전트가 기계임에 한정 짓지 않은 질문(실제 사람 간의 대화 같은)을 했을 때의 내용이다. 이를 통해 각 음성 에이전트의 포지션과 성격을 느낄 수 있었다. “넌 누구야?”라는 질문을 했을 때만 보아도, 대부분 자신을 ‘비서’로 소개하고 있었으나 빅스비와 클로바의 경우 ‘친구’라는 역할을 언급했다. ‘비서’라는 역할에 그치지 않고 ‘친구’로서 자리 잡고자 하는 의도를 느낄 수 있었다. 또한 흥미로웠던 점은 음성 에이전트가 자신의 자아(?)가 있음을 표현한다는 것이었다. (물론 에이전트에 대한 모든 질문에 자연스럽게 대답하는 것은 아니었지만) 예를 들어, 알렉사의 경우 커피를 좋아하느냐는 질문에 “Yes. In fact, I love iced coffee.”라며 냉커피를 좋아한다는 선호를 밝히는 대답을 했다. 이와 반대로 시리의 경우는 혼자 있을 때 주로 뭐하냐는 질문에 “온 세상이 제 관계에 대해 관심이 많은 것 같네요.”라며 다소 시크한 응답을 주었다. 자신을 효율적인 업무수행을 돕는 ‘비서’ 역할에 한정 지었기 때문에 스스로에 대한 캐릭터나 특성에 대한 질문에는 의도적으로 자신을 드러내지 않는 듯한 느낌을 받았다.

2) 사용자의 컨디션 발화

사용자의 컨디션에 대해 말했을 때의 내용이다. “배고파”라고 말했을 때 음성 에이전트별로 적극성의 정도에서 다른 반응을 보였다. 빅스비와 누구의 경우, “맛있는 거 먹고 기운 내요!”, “항상 든든하게 챙겨 드시길 바랄게요.”라며 general(일반적인) 호응을 해주었지만, 실질적인 도움은 되진 않았다. 빅스비는 전반적으로 순종적이지만 융통성이 부족한 친구처럼 느껴졌다... 반면, 시리, 구글 어시스턴트와 알렉사의 경우 주변에 맛집을 찾아주겠다며 적극적인 태도를 보였다. 특히 시리는 “배고프면 뭘 먹어야지요”라며 어투적인 면에서나 결과 15개를 보여주며 대안을 제시하는 모습에서, 더욱더 주도적이고 적극적으로 느껴졌다. “취했어”라고 말했을 때 또한 시리는 “우리 중 누구도 집에 갈 때 절대로 운전해서는 안 돼요”라고 단호하게 말하며 택시 앱을 연동해주는 것을 통해 눈치 빠른 비서라는 생각이 들었다.

3) 사용자의 행동 발화

사용자의 행동에 대해 말했을 때의 내용이다. “나 집에 왔어”라고 말했을 때 구글 어시스턴트를 제외한 다른 에이전트들은 비슷한 방식으로 사용자를 반겨주었다. 사실 이 발화는 함께 이동하는 모바일보다는, 집을 지키고 있는 스피커에게 “나 집에 왔어”라고 할 때가 더 자연스러울 것 같다는 생각이 들었다. 구글 어시스턴트는 구글 홈(AI 스피커)을 통해 사용자가 집에 왔을 때 최적의 환경을 조성해주는 기능을 제공하는 듯했다. “나 운동할 거야”, “피자 먹을 거야”라고 말했을 때는 이전 내용과 비슷하게 바로 서비스(앱)를 연동해주거나 검색 결과를 제공해주는 적극성을 띤 답변들과 가벼운 공감을 해주는 답변들 정도로 나뉘었다.

영화 Her 중에서

3. 마치며

6개의 음성 에이전트를 사용하며 많은 칫챗을 나눌 수 있었다. 이전에 시리를 사용해보며 사용 경험이 만족스럽지 않았기 때문에 낮은 기대에서 시작했지만, 사람이 할 법한 답변을 해내는 몇몇 음성 에이전트를 경험하며 이전보다는 음성 대화에 대한 기대 수준이 높아짐을 느낄 수 있었다. 또한 이제부터는 더 높은 음성 인식률을 내세우는 경쟁이 아닌, 좀 더 높은 수준의 질적 답변을 줄 수 있는지에 대한 경쟁이라는 생각이 들었다. 현재는 정해진 답변 중에서 랜덤으로 제공되는 것이 사용자의 입장에서도 느껴지기 때문에 칫챗 대화가 어색할 수밖에 없다. 그래서 사용자들도 처음 몇 번을 제외하고는 대화 경험이 만족스럽지 않아 외면하게 되는 것 같다. (필자 포함) 하지만 기업별로 음성 인식 기술에 대한 고도화와 더 나은 VUI(Voice User Interaction) 설계에 총력을 다하고 있는 만큼 달라지는 모습을 기대해 볼 만 하다고 생각한다. 가까운 미래에는 내 마음을 잘 알아주며 자연스러운 칫챗대화가 가능한 센스있는 음성 에이전트로 발전하길 기대해 본다.

Agent, ai, voice ui, voice ux, VUI, vux, 음성, 음성UI, 음성인식

2월 27일 IDG에서 주최한 8th Business Impact & Big Data 컨퍼런스가 양재역 엘타워에서 열렸습니다. pxd에서는 최신 산업 현황과 Big Data 트렌드를 보기 위해 참석하고 온 후기를 전합니다. 최근에 Big Data를 적용하여 성공적인 서비스를 하는 해외 사례와 다양한 산업에서 효과적으로 활용하는 사례를 볼 수 있는 좋은 컨퍼런스였습니다.

컨퍼런스에서 가장 인상 깊었던 두 강연을 소개하고자 합니다.

* IDG 컨퍼런스 소개 (http://www.itworld.co.kr/conference/)

CRM 관점에서 바라본 변화

오미현 팀장, 마켓분석팀, 이마트

들어가며

CRM(Customer Relationship Management)이란 고객 관계 유지에 대한 내용으로, 선별된 고객으로부터 수익을 내고, 장기적인 고객 관계를 유지함으로써 이익을 높일 수 있는 솔루션을 이야기합니다. 기존 회원들을 관리함과 새로운 회원들을 유치하는 데 있어서 빅데이터를 어떻게 활용하였는지 마켓 시장에서의 흥미로운 분석들을 들을 수 있었습니다.

1) 일반적인 CRM 구성요소

일반적인 CRM의 구성요소로는 하단에 나온 다이어그램처럼 구체적인 타겟, 채널, 시간, 제안, 제품 등으로 연결할 수 있는지에 대한 질문을 던져볼 수 있습니다. 예를 들면 어떠한 고객들을 마켓으로 연결할 것인가? 어떠한 제품으로 연결할 것인가? 어떠한 채널을 통해 연결할 것인가 등 구성요소들에 대한 질문들을 통해 고객 관계를 유지할 수 있을 답변을 얻어낼 수 있습니다.

2) CRM의 변화 : 우수고객 집중 관계 관리 > Micro Trend

고객 관계를 유지하기 위해 회원 등급에 따라 혜택이 나뉘는 사례들을 많이 접할 수 있었습니다. 등급에 따른 혜택 또한 매우 그 차이가 컸었죠. 우수고객에게만 노출되는 혜택을 위해 등급을 올리려는 고객들이 많이 있었습니다. 기업이나 마켓에서 또한 우수한 고객만을 관리하여 특별한 혜택을 누릴 수 있도록 하는 것이 대표적인 CRM 중 하나였습니다.

우수고객 집중 관리의 방법으로 기업에서는 ‘고객에게 집중하여 혜택을 줄 것인가?’ 혹은 ‘다양하게 혜택을 줄 것인가?’의 기준으로 우수고객 관리를 해 왔는데요. 이러한 노력에도 불구하고, 우수고객들의 이탈률이 굉장히 높아, 그 외 다른 고객을 잡기 위한 노력이 높아질 수밖에 없게 됐습니다.

우수고객에 대한 고객관리를 예를 들면, 우수고객의 장바구니를 확대하여 보면서 제품 및 마케팅에 대한 기획을 여러 가지 제안할 수 있었는데요. 고객들이 자주 찾는 상품들로 구성을 맞춰 프리미엄 구색 상품을 제작한다던가, 구매주기가 도래했는데 왜 사지 않는지를 파악해 2차 커뮤니케이션 툴을 제공하여 의견을 들어본다던가, 상권별 유지율에 따라 어느 지역에서 어느 제품이 잘 팔리는지 등등 우수고객에 집중한 여러 사례를 접할 수 있었습니다.

CJ 오쇼핑 마이크로 트렌드 : 효율과의 싸움에서 마이크로 트렌드는 우수고객 집중보다 더 효과적인 솔루션으로 떠오르고 있는데요. CJ오쇼핑에서 식품쇼핑에 대한 마켓을 처음 오픈했을 때를 예를 들겠습니다. 식품은 온라인에서 구매하기 힘들다는 인식이 팽배하던 시절에 ‘어떻게 하면 어느 시점에서 식품에 대한 장벽 없이 구매로 쉽게 이어지나?’ ‘몇 번의 구매와 경험을 통해 식품구매 경험이 유지가 될까?’ 등의 질문을 던지며 6개월 넘게 내부에서 설득의 과정이 있었습니다.

아직도 이 서비스가 유지되는 것을 보면 마이크로한 트렌드에 집중한 것이 오히려 소비자의 마음을 흔들었다고 생각됩니다.

3) 점점 더 치열해지는 환경

1인 체제 라이프 및 자기 주도적인 소비자들과 현재, 나의 일상에 집중하는 소비자들이 결국 다양한 나를 위한 소비를 해가며 트렌드는 만들어 나가게 됩니다. 이때 정보를 만들어 내는 대상도 소비자가 되면서 한정된 정보에서 점차 미디어를 활용해 끊임없이 정보들을 생성하게 됩니다.

1인 인구구조의 변화와 정보를 접하는 채널이 다양한 채널로 변화되면서, 고객은 한정되어 있고 모든 업태는 고객의 선택을 받기 위해 치열한 전쟁을 하게 됩니다.

모든 데이터를 우리가 분석할 수는 없기 때문에, 이때가 인공지능 기술로 데이터 분석의 지원이 필요한 때라고 생각합니다.

4) 현재에 대한 관심집중과 CRM의 기준

기존의 CRM은 고객의 과거 구매내역을 기반으로 상품과 서비스를 제공했다면, 현재의 CRM은 고객의 현재 관심사를 기반으로 새로운 상품과 서비스를 제안하는 것이 고객들의 반응을 끌어낼 수 있다고 생각합니다.

지금까지의 CRM의 기준이 바뀌어야 하는 것이 아닌가란 생각을 많이 하게 됩니다. ‘왜, 누가, 언제, 어떻게’에서 끝나는 것이 아니라 이것들을 가지고 무엇을 할 수 있는 소통의 공간을 만들어주는 것이 새로운 기준이 되지 않을까 생각합니다.

트렌드를 예측하는 것은 너무 어렵고 힘이 들지만, 융합된 트렌드를 예측하고 끊임없이 변화하는 소비자와 멀티 커뮤니케이션을 한다면 고객의 시간과 경험을 나누는 콘텐츠를 제공할 수 있으리라 생각합니다.

5) 사례 두 가지

고객이 선호하는 맛

: 매실 수확 철이어서 구매를 유도할 수 있는 프로모션을 준비하던 시기였습니다. 상권과 점포, 고객연령에 따라 구매 차이가 크게 나는데 프로모션을 위해 맛에 대한 데이터를 분석하던 중 맛의 시각이 연령대에 따라 다르다는 것이 인상적이었던 사례를 알게 되었습니다. 딸기의 맛이 20대에겐 새콤한 맛이지만 70대의 연령대에서는 달콤한 맛이었던 거죠. 맛에 대한 연령대의 시각이 달라 프로모션도 비슷한 연령대의 분포도가 높은 점포나 상권에 프로모션을 제공하게 되는 것이죠.

길고양이들을 위한 후드하우스

: 패딩에 달린 모자(후드)를 재활용해 길고양이에게 겨울철 쉼터를 제공하는 ‘후드하우스’캠페인입니다. 버려지는 옷들이 주는 환경문제와 길고양이들의 사회문제를 같이 해결하면서 고객들의 관심을 높였던 캠페인인데요. 동물보호와 환경문제에 대한 진정성이 고객에게 전달되면서 캠페인이 크게 확산이 되었었죠. 고객과의 소통이 매우 빨랐던 프로젝트로 소셜미디어를 통해 캠페인 확산에 매우 큰 도움이 되었던 프로젝트였습니다. 평소 동물보호에 관심 있는 일반인들과 유명인들까지 참여하며 다른 일반인들의 관심도까지 높였던 프로젝트였습니다.

넷플릭스의 개인화 알고리즘 혁신 전략과 사례

조슈아 팍스, 데이터 사이언스 매니저, 알고리즘 사이언스&애널리틱스 그룹, 넷플릭스

넷플릭스의 조슈아 팍스의 “넷플릭스의 개인화 알고리즘 혁신 전략과 사례(Innovating On Personalization Algorithms at Netflix)에서 넷플릭스가 얼마나 사용자 맞춤 추천을 위해 노력하는지 볼 수 있는 매우 흥미로운 강연이었습니다.

넷플릭스는 비디오 렌탈 사업으로 사업을 시작하였고, 2007년 스트리밍 서비스로 변경하고 현재 전 세계 1억 명 이상이 시청하고 있는 대표적인 OTT(Over-the-Top) 서비스를 하는 회사입니다. 현재는 오리지널 콘텐츠도 직접 만들어 제공하면서 세계 최대의 엔터테인먼트 기업으로 거듭나고 있습니다.
* OTT(Over-the-Top) 개방된 인터넷을 통하여 방송 프로그램, 영화 등 미디어 콘텐츠를 제공하는 서비스

넷플릭스 오리지널 콘텐츠인 봉준호 감독의 <옥자>, 2007

이번 강연에서는 넷플릭스의 개인화 알고리즘 혁신 전략과 사례를 볼 수 있었습니다.

넷플릭스 추천 엔진의 역사는 2007년 스트리밍 서비스로 변경하면서 본격적으로 발전하였다고 합니다. 기존에는 고객이 평가한 별점이 유일한 고객의 피드백이었는데, 스트리밍 서비스를 시작하면서 어떤 콘텐츠를 보았는지 알 수 있었다고 하였습니다. 현재는 머신러닝을 통해서 알고리즘을 지속해서 발전시키고 있었습니다.

메인화면에서는 사용자별 추천 콘텐츠를 제공하는데, 모든 사용자에게 다르게 추천이 된다고 합니다. 강연자인 조슈아 팍스는 1억 명의 넷플릭스 유저가 있다면, 1억 개의 각기 다른 넷플릭스 메인화면(추천화면)이 있다고 하였습니다.

넷플릭스 메인화면에서의 추천시스템 예시

넷플릭스의 추천시스템은 바둑판 형식으로 추천을 하고 있었습니다. 세로축은 사용자의 성향과 취향을 반영한 랭킹, 장르, 선호 배우 등 카테고리를 추천하고, 가로축은 해당 카테고리에 대한 랭킹 순으로 표시하고 있다고 합니다. 세로축은 머신러닝으로 분석된 수만 개 이상의 분류가 있다고 했습니다.

또한, 사용자들이 원하는 콘텐츠를 빠르게 발견하고 플레이할 수 있도록 여러 장치를 해놓았다고 합니다. 이 부분이 강연에서 가장 흥미로웠던 부분이었습니다.

첫 번째는 검색에 대한 내용입니다. 단순히 알파벳 한 글자를 입력하였을 때도, 해당 사용자가 원하는 콘텐츠가 상단에 표시되도록 검색 서비스 알고리즘을 사용하고 있었습니다. 예를 들어, 검색창에 M을 쳤을 때, 애니메이션을 좋아하는 사용자는 Moans, Mulan 의 포스터가 가장 상단에 있고, 액션을 좋아하는 사용자는 Matrix, Mummy 등 검색에 개인 성향이 반영된 검색결과를 보여주고 있었습니다.

두 번째는 콘텐츠의 이미지 선택에 대한 내용이었습니다. 콘텐츠의 이미지는 많은 콘텐츠 사이에서 빠르게 원하는 것 또는 보고 싶은 것을 선택하게 만들어야 하는 중요한 요소입니다. 우리는 넷플릭스에서 제공하는 포스터는 한 개라고 생각할 수도 있었습니다. 하지만 넷플릭스는 사용자별로 다른 이미지를 제공하고 있었습니다. 이미지선택은 대표적으로 장르 또는 배우로 나뉘어서 개인별 추천이 되고 있습니다.

출처 : 넷플릭스 블로그

Good Will Hunting을 추천한다는 예를 보였습니다.

로맨스를 좋아하는 사용자에게는 로맨스를 보여주는 상단의 포스터를 노출하고, 코미디를 좋아하는 사용자에게는 코미디 장르 영화를 많이 찍은 로빈 윌리엄스가 있는 포스터를 노출한다고 합니다. 이 점이 가장 흥미로웠습니다.

또한, 선호하는 배우에 따라서 다른 이미지를 보여준다고 합니다.

출처 : 넷플릭스 블로그

우마 서먼을 좋아하는 사용자에게는 펄프픽션 영화를 추천할 때 우마 서먼이 있는 이미지를 노출하고, 존 트라볼타를 좋아하는 사용자에게는 펄프픽션 영화를 추천할 때 존 트라볼타가 노출된 이미지를 노출하였다고 합니다.

사용자가 원하는 영화를 빠르게 선택할 수 있도록 머신러닝을 활용한 정교화된 추천 알고리즘으로 콘텐츠 종류와 이미지까지 각기 다르게 추천을 하고 있었습니다.

이번 강연을 통해서 많은 사용자와 많은 콘텐츠를 연결해줘야 하는 분야에서 머신러닝을 통해 최적화된 연결지점들을 찾아주는 것에서 매우 흥미를 느낄 수 있었습니다.

이상으로 8th Business Impact & Big Data의 참석 후기를 마칩니다.

Big Data, IDG, Machine Learning, 국내교육, 컨퍼런스