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, 음성인식

pxd의 Visual Designer들을 위한, 그리고 UX 기획자들의 GUI 작업에 대한 이해를 도울 실무 참고서가 필요하여 장기간 내용을 정리했고, 사내에 유인물처럼 돌아다니던 것을 이번에 인쇄하게 되었다.

주로 신입 디자이너들을 대상으로 한 내용이고, 경력 디자이너라면 가볍게 훑어보며 자신의 직무에 대해 생각을 정리해보는 시간을 가질 수 있도록 작성했다.

이 참고서는 GUI 디자인 실무에 관한 것이며, 디자인 업무 영역 확장을 지향한다는 의미에서 GUX Design(Graphical User eXperience Design)이라는 용어를 만들어 참고서 제목으로 삼았다.

필자가 평소에 말로 하던 얘기들을 몇 년 전부터 틈틈이 생각나는 대로 쓰다 보니 관련 지식, 정보, 실무 팁, 잡다한 생각과 조언들이 뒤엉켜 있었다. 주제들을 그룹 짓고 참고서의 구성 콘셉트를 설정한 후 내용을 정리하다 보니 어느새 한 권의 분량이 되었다.

시작

몇 년 전, pxd UI 그룹에서 'UX/UI Design 방법론과 업무 프로세스를 정리하여 인쇄할 계획이니, GUI 그룹도 비주얼 디자인 업무와 관련한 내용을 같이 준비하면 좋겠다'는 이야기를 들은 이후 틈틈이 쓰기 시작했다.

내용이 어느 정도 정리된 2017년 초, 사내 비주얼 디자이너들에게 참고서의 내용과 구성 콘셉트를 공유했다. 출간하는 게 어떻겠냐는 의견이 있어 출판사들을 접촉했지만, 필자의 생각을 온전히 담아 출간하는 일은 쉽지 않았다. 그렇게 결실 없이 1년을 보내다가 이번에 간단하게 편집하여 인쇄하게 된 것이다.

책의 구성 콘셉트: 반독완독(半讀完讀)

반독완독(半讀完讀, VahnDocWahnDoc): ‘책 절반을 읽은 것이 책 전부를 읽은 것과 같다.ʼ라는 뜻의 조어이다.

참고서 서두에 밝힌 내용인데, pxd 사무실 책상들을 관찰해 보면 보통 아래 아이콘의 모습과 같이 읽다 만 책들을 많이 볼 수 있다.

책갈피는 책의 중간쯤 끼워져 있고 책 주인은 끝까지 읽지 못했다는데, 그 이유를 물어보면 ‘봐야 할 다른 책들이 계속 생기기도 하거니와 절반 정도 읽다 보면 그 책에 대한 완독 의지도 꺾여서...ʼ라고 한다. 하지만 다 읽지 못한 것에 대한 자책과 언젠가는 다 읽을 것이라는 다짐을 함께 얘기한다. 그래서 독자가 스트레스를 받아가며 굳이 완독하지 않아도 되는 책을 만들 수 있을까 고민하게 되었다.

사실, 완독했다고 그 책 내용을 잘 이해했다고는 볼 수 없다. 책 일부만 읽었더라도 그 책을 통해 독자가 얻는 것이 하나라도 있고 스스로 고찰해 볼 기회를 가지면서 자신의 생각을 만들어 가는 것이 중요하다고 판단했다. 지식과 정보를 전달하는 것과 함께 독자에게 고찰할 기회를 주는 것도 학습서/참고서의 덕목이라고 생각했다.

이런 생각들을 담아 책의 절반만 읽더라도 충분히 고민한 독자들이라면 완독한 것과 같음을 저자가 인정하겠다는 의미에서 ‘반독완독ʼ이라는 단어를 만들었고 이는 본 참고서의 구성 콘셉트다.

디자인 실무자들은 프로젝트를 수행하느라 전공 분야에 대한 학습을 연속적으로 이어가기 힘들다. 책의 전체 내용을 빠르게 파악하고 큰 줄기의 고민을 먼저 한 후 책을 자세히 읽는 구조라면 학습에 효과적일 것으로 생각했다. 또한, 순서와 관계없이 어느 부분을 펼쳐 읽더라도 학습 효과가 있어야 한다고 생각했다.

그래서 ‘상위 주제-하위 부제 방식ʼ의 긴 설명보다는 ‘펼친 면 - 주제 하나ʼ, ‘왼쪽 면 요약-오른쪽 면 상세설명ʼ으로 구성하는 것이 좋겠다고 생각했고 내용 요약인 왼쪽 페이지들만 다 읽어도 완독한 것으로 저자가 인정해 주겠다고 썼다. 정작 독자 본인이 인정할지는 모르겠지만...^^;

제본과 참고서의 크기

학습하려고 책을 펼쳤다면 잘 펴지고 또 펼쳐진 상태를 유지할 수 있어야 한다고 생각했다.

가끔이나마 솟구친 학구열에 책을 펼쳤는데 제본방식 때문에 저항이 생겨 저절로 덮이는 책은 독자의 학습 의지도 덮게(?) 하는 데에 일조할 것으로 생각했다.

성경책이나 사전이 펴졌을 때 그 상태가 잘 유지되게 만든 것은 독자의 심신을 안정된 상태로 유지시켜 신앙심이나 학습집중력에 영향을 주지 않기 위함도 있을 것이라 필자는 생각한다. 성경책이 일명 떡제본이나 무선제본으로 되어 있다고 상상해 보라. 예배시간에 여기저기에서 책 중간을 비벼 누르는 행위와 소리로 어수선해질 것이다.

이야기가 좀 옆으로 샜다. 어쨌든, 완전하게 펼쳐지는 실제본에 책표지를 덧대는 오타바인딩 PUR 방식으로 제본했다.

소지하고 다니기에도 부담이 없도록 핸드북 크기(210mm*130mm)로 제작했고, 이는 2014년 pxd Annual Essay(http://story.pxd.co.kr/1035)와 pxd 스케줄러(http://story.pxd.co.kr/866)와도 같은 크기이다.

책 표지 날개 부분에 주름을 넣어 날개 자체를 간지로 쓰기 쉽게 만들어 보았는데 제본소에서 이 작업에 난색을 표한 것을 보면 적어도 국내 출판계 최초의 시도이지 않을까 싶다. ^^

이 주름을 사용하면 책 표지의 매무새가 깔끔해지지 않을 수도 있지만, 책이란 읽을수록 낡아져야 제맛 아니겠는가. 책표지의 깔끔함을 유지하고 싶어서 이 부분을 쓰고 싶지 않다면 안 쓰면 된다.

참고서 내용

무엇보다 참고서의 내용이 중요한데 사설이 너무 길었다.

내용을 크게 3개의 장으로 구성했다.

1. Warming up: 비주얼 디자인 작업을 위한 준비 사항과 생각해볼 만한 문제들에 대해 기술

2. Basics: 비주얼 디자인에 관한 기본 지식에 대해 기술

3. GUX Design: GUX 디자인 실무 프로세스와 상세 업무 내용에 대해 기술

실무 참고서나 강의가 갖춰야 할 요소를 세 가지(3I)로 정리하고 이에 맞춰 쓰려고 나름 노력했다.

A. Information: 관련 지식과 정보 전달

B. Inspiration: 동기 부여, 지적 자극, 감 → 실행 욕구(해보고 싶다), 자신감(할 수 있겠다)

C. Instruction: (업과 업을 대하는 자세에 대해) 전반적인 방향 제시

참고서 보는 방법

독자가 보고 싶은 대로 보면 되는데 굳이 보는 방법을 소개하자면 아래와 같다.

- 책 내용을 전체적으로 빠르게 훑어보고 싶다면 왼쪽 페이지만 보면 된다.

- 왼쪽 페이지들만 다 봐도(반독) 책을 완독한 것으로 인정한다. 누가? 저자가.

- 생각할 거리에 대해서는 자신의 의견을 정리해 본다. 어디에? 페이지 여백에.

- 시간이 나면, 또는 관심 있는 주제라면 오른쪽 페이지도 읽어 본다.

- 하나의 주제마다 한 면(2페이지)으로 구성되어 있다.

- 내용 정리와 생각할 거리들(왼쪽 페이지)-상세 설명(오른쪽 페이지) 구성이다.

- 순서와 관계없이 읽을 수 있다.

- 읽은 페이지는 하단 페이지 수 옆의 네모 박스에 V 체크 표시한다. 그 페이지를 읽었는지 알 수 있고 두 번 읽어 체크하면 VV 모양이 되어, ‘반독완독ʼ를 의미하는 Double V 마크가 된다.

이상으로, 이번에 인쇄한 pxd GUX 디자인 실무 참고서에 대한 소개를 마칠까 한다. 여러 형편상 편집 디자인에 신경을 쓰지 못한 것과 실사례들을 많이 싣지 못한 것이 아쉬움으로 남는다.

UX 디자인 대행사의 디자이너 입장에서 쓴 글들이 있는데 인하우스 디자이너라도 내부 의사 결정권자를 클라이언트라고 본다면 나름대로 인사이트를 얻을 수 있을 것으로 생각한다.

이 참고서는 사실 도서 판매를 목적으로 작성된 것은 아니다. pxd의 본업인 디자인 컨설팅에 더 집중하기 위해 참고서를 만든 것이다. 하지만 ISBN(국제 표준 도서 번호)을 넣어 국립중앙도서관에 납본하고 싶어서 몇 가지 행정적인 절차를 거쳤다.

이 자리를 빌려, 그 행정 업무들을 잘 처리해 준 pxd 경영지원팀 이욱희 팀장에게, 그리고 깔끔한 인쇄를 위해 애써 주신 정원프로세스 이종해 대표님에게도 감사의 인사를 드린다.

gui, GUI Design, GUI 디자인, GUX, GUX Design, GUX 디자인, pxd paper, pxd 디자인 프로세스, visual design, 도서, 디자인 실무 참고서, 반독완독, 비주얼 디자인