친근하고 귀여운 챗봇 디자인 3편 - 비주얼 디자인 편

루나의 발랄함을 어떻게 시각적으로 표현할 수 있을까요?

나선일 | 2020년 04월 16일

작년 여름, 구글은 인터랙티브 캔버스(Interactive Canvas)라는 프레임워크를 발표했습니다. 음성과 텍스트 인풋으로만 작동했던 기존의 구글 어시스턴트에 비주얼을 더할 수 있게 된 것입니다. 화면 전체를 이용한 시각적&촉각적 인터랙션이 가능해지면서, 그전까지 GIF 짤을 통해서만 감정을 표현하던 루나에게 ‘표정’을 부여할 수 있게 되었습니다!

Interactive Canvas로 개발하기 이전에 먼저 루나의 독특한 성격에 걸맞은 비주얼을 입혀주어야겠죠? 그래서 이번 글에서는 캐릭터 디자인을 통해 입체감을 불어넣는 과정을 공개하려고 합니다. 특히 기획자와 디자이너가 서로를 설득하면서 합의를 끌어내는 과정을 생생하게 담아보았습니다. 어떤 디자인이 빠꾸(?)먹고 어떤 디자인이 통과되는지, 그리고 어떻게 루나가 애니메이션 디자인을 통해 살아 움직이게 되는지 확인해보시죠!

1. 프로젝트 목표에 대한 싱크 맞추기

루나의 페르소나와 대화 경험을 기획한 예지님과 함께 프로젝트를 진행하였습니다.

선일 안녕하세요 예지님!

예지 안녕하세요!!! 루나의 본체입니다😎

선일 이 프로젝트의 목표는 루나의 표정을 디자인해서 사용자와 텍스트(보이스)로만 상호작용하던 루나가 시각적으로도 상호작용할 수 있도록 하는 것이죠?

예지 네 맞아요. 선일님께 가장 먼저 부탁드리고 싶은 건 루나의 발랄하고 통통 튀는 성격이 시각적으로 잘 드러났으면 좋겠다는 거예요. 이전에 사용하고 있던 루나의 이미지를 레퍼런스로 드릴 텐데, 저는 이 이미지가 제가 생각한 루나 이미지와 꽤 잘 맞는다고 생각해요 ㅋㅋ

이전 루나 프로필 사진

별 모양 머리핀을 한 양 갈래 머리와 밝고 깜찍한 표정이 루나의 정체성으로 이어졌으면 좋겠다고 생각하고요, 항상 응원의 말을 건네주는 아이이기 때문에 부정적인 표정보다 긍정적인 표정의 개수가 훨씬 많을 거예요!

무엇보다 인터랙티브 캔버스 버전에서 추가됐으면 하는 것은, 사용자의 발화에 따라 루나의 표정이 달라지면서 사용자에게 루나와 직접적으로 ‘상호작용’하고 있다는 느낌을 주면 좋겠다는 거예요! 아무래도 화면을 자유롭게 사용할 수 있는 게 큰 변화이자 장점이 될 테니까요!

선일 그런 점에서 카톡 이모티콘과는 결이 좀 다르네요. 이모티콘은 자신의 감정을 일방적으로 표현하는 수단이지만, 루나는 내가 무슨 말을 하느냐에 따라 다르게 반응하며 표정을 바꾸니까요.

예지 맞아요. 보이스 인터랙션이 가능한 구글 어시스턴트에 탑재되어 있기 때문에 영상 통화 같은 느낌을 줄 수 있으면 좋을 것 같아요.

선일 애니메이션을 활용하면 영상 통화 같이 인터랙티브한 느낌을 줄 수 있을 것 같아요. 얼굴을 인식해서 캐릭터의 표정을 움직이게 할 수 있는 프로그램이 있는데 그걸 한 번 테스트해볼게요!

2. 루나를 잘 표현할 수 있는 비주얼 디자인

1차 시안

위와 같은 대화를 거쳐 서로 프로젝트 목표에 대한 싱크를 맞추고 작업을 시작했습니다. 오리지널 일러스트를 보고 똑같이 3등신으로 그리면 적당하겠다고 생각했죠. (사실 이때까지 저는 썸네일을 바꿀 수 없는 건 줄 알고 최대한 비슷하게 그리려고 했습니다.) 그렇게 해서 나온 1차 시안입니다.

루나의 귀엽고 깜찍한 1차 시안

예지 우와! 너무 귀여워요! 😍흠… 하지만 너무 어린아이처럼 보여요. 루나가 좀 모자라기는 해도 고등학생이거든요ㅋㅋ

선일 교복으로도 충분히 루나가 학생이라는 걸 보여줄 수 있지 않을까요?

예지 그쵸, 교복을 입히니까 전보다 훨씬 직관적이에요. 하지만 실제 사람과 비슷한 비율을 가지면 좀 더 생동감이 있을 것 같아요. 비율을 늘려서 상반신만 화면에 노출하면 영상통화와 비슷한 효과를 낼 수 있지 않을까요?

선일 아하 그렇겠네요. 이 쪼꾸미 캐릭터로는 그런 효과를 바라긴 힘들 것 같네요. 그치만 그렇게 되면 그림체가 많이 달라질 것 같아요.

예지 썸네일 그림체랑 달라도 괜찮아요, 선일님의 그림으로 바꿔봐요! +_+

선일 야호!!

2차 시안

첫 번째 피드백을 반영하여 길쭉한 루나를 다시 그려보았습니다.

길쭉해진 루나 그림
루나의 멋있는 2차 시안

선일 짜잔! 6등신의 캐릭터를 다시 그려봤어요.

예지 전보다 훨씬 현실감이 있어서 좋아요! 그럼 이제 이 네 개의 얼굴 중에서 고르면 되는 거죠?

선일 네 맞아요. 저는 첫 번째 스타일이 제일 마음에 들어요.

예지 오 그런가요? 저는 두 번째가 제일 괜찮은 것 같은데요. 흰자가 있으면 눈동자의 위치를 통해서 표정을 더욱 뚜렷하게 표현할 수 있을 것 같아요. 그리고 아무래도 일본에 (먼저) 출시를 하기 때문에 사용자들에게 익숙한 그림체로 보다 쉽게 다가갈 수도 있구요.

선일 네 맞는 말이에요. 하지만 너무 일본스러운 그림체는 지양하고 싶어요. 일본풍을 좋아하는 사람의 취향을 뾰족하게 찌를 수는 있겠지만 그만큼 다른 취향을 가진 사람들이 이탈할 가능성이 크지 않을까요? 최대한 뾰족한 특성을 죽여서 다수의 사람들이 거부감을 느끼지 않도록 만들고 싶어요.

디테일을 포기하는 두 번째 이유는 간결하게 표현할수록 캐릭터 너머의 어떤 존재를 상상하기가 훨씬 용이하기 때문이에요. 책을 읽고 나서 본 영화에 실망하는 경험이 종종 생기곤 하잖아요? 같은 맥락으로 모든 디테일을 묘사함으로써 상상력을 제한하기보다 각자의 상상력으로 채워 넣을 수 있는 여지를 남겨둠으로써 더욱 몰입할 수 있게 만드는 거예요.

Understanding Comics - Scott McCloud

Understanding Comics라는 책에서는 Amplification through simplification (단순화를 통한 확장) 효과라고 서술하고 있어요. 사람의 얼굴은 절대 동그라미에 점 두 개와 선 하나로 이루어져 있지 않지만 그림을 보고 그 너머의 존재를 떠올릴 수 있다고 해요. 사람들 각자가 자신만의 루나를 상상하게 되면 보다 효과적으로 대화에 이입할 수 있을 거예요.

예지 그런 이유라면 첫 번째 캐릭터가 제일 적합하겠네요! 직접 생명력을 불어넣어 줄 선일님도 첫 번째 캐릭터를 더 좋아하는 것 같기도 하고요! 그것도 중요한 요인이니까, 그럼 첫 번째 그림체로 확정하시죠!

선일 오예!!!! 😆

최종안

루나의 발랄하고 생기있는 모습을 표현하는 최종안

두 번의 피드백 과정을 거쳐 탄생한 루나입니다. 깜찍한 똥머리와 별 모양 머리핀, 간결하게 표현된 눈코입이 매력입니다. 기분에 따라 여러 가지 표정을 짓기도 합니다.

루나의 다양한 표정들

3. 루나에게 생명력을 불어넣어 줄 애니메이션 디자인

사용자가 더 인터랙티브하게 상호작용한다는 느낌을 받을 수 있도록 루나의 표정을 그림으로 표현하는 데 그치지 않고 움직이는 애니메이션으로 구현해보았습니다. Adobe Character Animator라는 프로그램의 얼굴 인식 AI 기능을 통해 제가 짓는 표정을 루나가 실시간으로 따라 하게 만들어서 부드러운 모션 애니메이션을 구현할 수 있었습니다.

선일 이 프로그램에 관한 일화를 간단히 소개해드리자면, 일단 Character Animator는 에미상 테크놀로지 및 엔지니어링(Emmy® Award for Technology and Engineering) 부문을 수상한 프로그램입니다. 그래서 이 툴을 예전부터 써보고 싶었는데 딱히 쓸 일도 없고 가격도 비싸서 입맛만 다시고 있었죠. 때마침 핑퐁팀에 참여하게 되었고, 이 프로그램을 쓰고 싶다고 말씀드리니 (당시에는 애니메이션화 할 계획이 없었음에도) 흔쾌히 어도비의 모든 프로그램을 지원해주시더라구요! 덕분에 물 만난 물고기처럼 신나게 작업할 수 있었습니다. 공짜 좋아!!

예지 공짜 아니야..ㅋㅋㅋ

이렇게 구현된 모션 애니메이션을 통해, 루나는 평소에는 눈을 깜빡이며 대화에 임하고, 사용자에게 힘을 불어넣어 주는 응원의 메시지를 전하거나 바보라고 놀림받아서 화낼 때는 그에 대응하는 깜찍한 자세를 취할 수 있게 되었습니다. 실제 화면에선 이렇게 보인답니다.

4. 캐릭터 디자인은 배우를 캐스팅하는 것과 같다

저는 줄곧 이미지를 먼저 떠올린 다음에 거기에 맞는 성격을 부여하는 순서로 캐릭터를 만들었었습니다. 예를 들어 긴 생머리를 한 여자 캐릭터가 있다면, 부지런하고 깔끔해서 아침마다 머리를 손질한다는 특징을 부여하는 식으로 말이죠.

하지만 이번엔 정반대의 순서로 진행해야 했습니다. 이미 만들어져 있는 페르소나와 잘 어울리는 겉모습을 디자인해야 했는데, 마치 소설을 영화로 만들기 위해 배우를 캐스팅하는 과정과 비슷했던 것 같습니다. (실제로 제가 해본 적은 없지만요) 시나리오를 읽고 인물의 성격을 분석한 후에 해당 배역에 어울리는 배우를 탐색하는 캐스팅 디렉터처럼 저는 루나라는 인물의 성격과 관심사, 어투를 분석하여 그에 적합한 이미지를 찾아내야 했죠. 그래서 서사에 대한 이해가 뒷받침되지 않은 상태로 그림을 그릴 땐, 차분한 얼굴로 애교를 부리는 등 대사와 비주얼이 따로따로 분리되어 어색한 상황이 만들어지곤 했습니다.

출처: 꽃보다 청춘 아프리카. 응답하라 1988 멤버들이 '선우'역 캐스팅에 관해 대화하는 장면

그럴 때마다 예지님께서 피드백을 해주셨고, 그런 과정을 몇 번 거치면서 “별을 좋아하기 때문에 천문학과를 가고 싶어 할 만큼 밝고 순수한 루나”를 충분히 이해할 수 있게 되었습니다. 그 후부터는 모든 과정이 한결 수월해졌죠. 핑크색 교복을 착용하는 등 외모적 특징을 비롯해서, 루나의 페르소나에 걸맞은 밝은 표정이나 크고 과장된 제스처까지 빠르게 만들어졌습니다. 그렇다면 페르소나에 어울리는 캐릭터를 디자인하려면 어떻게 해야 할까요? 이 질문에 대한 답은 셀 수 없이 많이 있겠지만 그중에서 가장 먼저 선행되어야 할 것은 “캐릭터에 대한 깊은 이해”가 아닐까 싶습니다.

루나 시리즈의 마지막 글에서는 Interactive Canvas를 이용해서 구글 어시스턴트의 프론트엔드를 구현하는 방법을 알려드립니다! 루나의 모습이 실제로 구글 어시스턴트에 담기기까지 어떤 개발 과정을 거쳤는지 속속히 알려드릴게요. 매우 쉽고 간단하기 때문에 자신만의 구글 어시스턴트를 직접 만들어보고 싶다면 한번 시도해볼 만한 미니 프로젝트가 될 것 같습니다.