크리에이티브 코딩 밋업 인사이트 - 5. 대화상자와 인터페이스 💬

어느덧 다섯 번째 밋업.

다양한 대화 인터페이스 사례와 함께 AI를 활용한 너굴맨 대화창 시현을 봤다. 우리에게 익숙한 대화창은 카카오톡처럼 채팅 대화창일 텐데, 다양한 인터페이스를 보고 아이디어를 많이 얻었다. 나는 덕후가 세상을 발전시킨다는 작은 신념을 가지고 있는데, 엄청난 게임의 대화 인터페이스 사례를 보니 정효님은 게임 덕후가 맞다는 확신과 함께 이래야 크리에이티브 코딩이 재밌겠다는 생각을 했다.

 

사례들을 몇 가지 공유하면서 내가 얻은 인사이트도 기록해보려 한다.

 

1. 대화상자

대화상자는 영상으로 따지면 자막과 비슷한 역할을 하는데, 게임이나 웹에서는 어떠한 박스에 대화와 설명 등을 포함하여 보여준다. 대화상자에서 보여주고자 하는 내용이 어떤지에 따라 형태가 달라지는데, 다양한 형태의 대화상자를 하나씩 살펴보자.

기본형

주로 인터페이스 하단에 위치하며, 등장인물의 이름과 대화, 생각 등을 보여준다. 이전, 이후 외 옵셔널 한 인터페이스가 포함되기도 한다.

말풍선

주로 여러 등장인물이 한 화면에 있을 때, 어떤 인물이 말하는지 직관적으로 보여주기 위해 말풍선으로 대화를 표기한다. 활용가능한 크기가 제한적이라 그런지 기본 대화상자보다 짧은 내용이 들어가는 것 같다.

머리 위 텍스트

말풍선과 비슷한 인터페이스를 가진다. 개인적으로는 말풍선이 만화 같다면, 머리 위 텍스트는 동화책 같다는 인상을 받았다.

산문형

위의 두 인터페이스보다 더 책 같은 인상을 주는 게 산문형이다. 실제로 스토리와 대화를 구체적으로 포함하는 경우가 많았다.

 

2. 초상화

위에선 대화상자에 대해 다뤘다면, 대화상자와 함께 화면에 노출되는 형태도 다양하다. 보통은 1명 이상의 등장인물이 나오는 장면을 표시하는데 정효님은 초상화를 사용한 인터페이스를 추가로 공유해 주셨다.

기본형

어떤 장면을 보여줄 때 어떤 인물이 말하고 있는지를 알려주기 위해 대화상자의 옆이나, 화면 중간에 띄우는 것이 가장 일반적이었다. 등장인물이 많고, 그래픽이 단순화되었거나, 뒷모습이 나오는 경우에도 명확하게 말하는 인물을 알 수 있었다.

구체적인 일러스트

3D 그래픽으로 만들어진 게임은 용량을 줄이기 위해 형태가 단순화되는 경우가 많은데, 캐릭터의 구체적인 모습을 알려주기 위해 일러스트가 활용되곤 했다. 이 경우 캐릭터의 형태, 표정 등을 설명하기에 이점이 있었다.

게임 진행형

등장인물이 보고 있는 장면을 게임 화면에 노출할 때, 게임을 진행 중인 인물이 누군지 또는 설명해주고 있는 인물이 누군지 보여주는 용도로 사용한다. 실제 게임 속 인물이 된듯한 몰입감에 도움을 준다고 생각했다.

다양한 인물 구분

삼국지처럼 다양한 인물이 나올 때 전체 장면이나 단순화된 그래픽으로 구분하기 어려울 수 있다. 삼국지는 수많은 인물의 구체적인 모습과 명칭을 대화상자와 함께 노출하여 등장인물을 헷갈리지 않도록 했다.

 

3. Game Maker

RPG Maker

RPG 게임을 직접 커스텀해볼 수 있는 게임메이커가 있다고 한다. 지금도 스팀에서 구할 수 있다고 하는데 게임 덕후들에게는 알려진 시스템인 것 같았다. 맵을 만들고, 어떤 지점에 이벤트를 설정해서 대화상자가 켜지는 등의 기능이 있었다. 초등학생 때 종이에 그림을 그리고 잘라서 게임을 만들었던 기억이 났는데, 정말 게임을 좋아하는 사람이라면 이런 툴로 스토리를 짜서 시도해 볼 만하겠다.

4. 선택지

다음 주제는 '선택지'로 게임 유저가 주체적으로 스토리를 정할 수 있고, 선택지마다 나타나는 결론이 달라지기 때문에 유저에게 풍부한 콘텐츠를 제공하는 좋은 방법이라는 생각이 든다. 선택지 인터페이스 중에서 심즈에서 사용하는 인터페이스가 유독 인상적이었다.

인터렉티브 선택지

이런 선택지 이용한 콘텐츠는 게임뿐만이 아닌데, 넷플릭스의 블랙미러 중 사용자가 선택해서 스토리를 시청하는 편이 있다. 웹을 통해 콘텐츠를 노출하는 방식이 발전하고 다양화하면서 재밌는 시도를 많이 해볼 수 있구나 싶었다.

1) 픽션 - The Eagle’s Heir

The Eagle's Heir

2) 영화 - Black Mirror : Bandersnatch

5. 입력창

머드(MUD) 게임

명령 프롬프트에 텍스트를 입력해서 진행하는 게임을 '머드게임'이라고 한다. 그래픽 없이 텍스트로만 이뤄져 매우 지루할 수 있는데, '단군의 땅'이라는 국산 머드게임은 ASCII 아트와 같이 문자를 이용한 그래픽으로 나름 흥미진진하게 진행된다. 은은한 광기가 돋보이는 게임이다.

Scribblenauts

이 게임은 유저와 게임개발자의 창의력이 어디까지인지 텍스트를 통해 시험해 보는 느낌이다. 게임 맥락에 맞춰 단어를 입력하며 진행하는데, '이게 되네?'싶은 단어들도 꽤나 있는 것 같다. 밋업 중에 찾아보니 앱스토어에서도 구매해서 해볼 수 있다.

6. 대화상자의 애니메이션

Chat GPT

Chat GPT를 사용해보면 텍스트가 실시간으로 타이핑되는 형태로 정보가 출력된다. 이 이유를 물어보니 이런 답을 주었다고 한다.

 

🤖 ChatGPT가 텍스트를 실시간으로 생성하고 출력하는 이유는 여러 가지가 있습니다:

1. 자동회귀 모델(Auto-Regressive Model): ChatGPT는 자동회귀 모델로, 이전 토큰(단어)을 기반으로 다음 토큰을 예측합니다. 이 과정은 연속적으로 일어나므로, 전체 응답을 한 번에 생성하는 것이 아니라 단계적으로 생성됩니다.
2. 사용자 참여 및 몰입: 실시간으로 텍스트를 생성하면 사용자는 대화가 자연스럽게 진행되는 느낌을 받습니다. 이는 대화형 인터페이스에 더 몰입하게 하고, 사용자가 답변을 천천히 읽게 하여 더 나은 이해를 돕습니다.
3. 컴퓨팅 자원 관리: 실시간으로 응답을 생성하고 출력하면 서버 자원을 효율적으로 관리할 수 있습니다. 한 번에 모든 텍스트를 생성하는 것보다 각 토큰을 순차적으로 생성하는 것이 자원 사용 면에서 더 효율적입니다.
4. 스트리밍 기능: OpenAI API는 서버 사이드 이벤트(Server-Side Events, SSE)를 사용하여 응답을 스트리밍 합니다. 이는 실시간으로 데이터를 전송하여 마치 사람이 타이핑하는 것처럼 보이게 합니다. 이 방식은 특히 긴 응답일 경우 유용하며, 사용자가 첫 번째 결과를 더 빨리 받을 수 있게 합니다.

실제로 데이터가 생성되는 형태이기도 하면서 사용자가 몰입할 수 있도록, 그리고 컴퓨터 자원을 관리하는 측면에서 의도되었다는 점에서 추후 AI 관련된 서비스를 맡으면 쓸 수 있는 인사이트였다.

7. 대화상자와 사운드

Beep Speech

Beep Speech는 실제 언어라기보단 인터페이스 상 인물이 말하는 모습에 실감을 더 주기 위해서 말하는듯한 사운드를 얹는 것이다.

1) Earth Bound

2) StarFox

3) Undertale

4) 모여라 동물의 숲

모여라 동물의 숲(줄여서 모동숲)은 유저의 국가에 더 친화적인 맞춤 사운드를 제공한다.

모동숲 주민들의 대화가 실제 언어는 아니지만 개발 단계에서 더 대화처럼 들릴 수 있도록 각 국가별 언어의 높낮이 등을 적용했다.

5) TTS를 활용한 Beep Speech 만들기

TTS는 Text to Speech의 약자로 텍스트를 언어 사운드로 만들어준다. 시각장애인의 웹 사용을 돕는 목적으로 시작되어, 현재는 AI 기술의 발전으로 실제 말하는 것과 같은 음성을 제공하는 서비스가 많이 생겼다. 이런 TTS 서비스를 활용하여 어떻게 Beep Speech를 구현해 볼 수 있을까? 하나의 방법으로 TTS서비스에서 제공하는 언어의 종류를 바꾸고 피치를 조절해 볼 수 있었다. 예를 들어 한국어 발음을 일본 언어로 읽고, 피치를 높이면? 한국말인데 뭉개지면서 조잘조잘 거리는 느낌의 Beep Speech가 만들어진다.

8. 대화형 인공지능

30년 전 대화형 인공지능, MAX

요즘엔 Chat GPT가 대세지만 30년 전에도 대화형 인공지능이 있었다고 한다.

심심이

아마 내 또래가 기억하는 대화형 인공지능은 심심이일 것이다. 뒤에서 알바가 채팅하는 것이다 등의 썰이 있었고, 몇몇 웃긴 대화가 밈으로 돌기도 했다. 지금도 심심이를 검색하면 '심심이 매운맛'등의 연관 검색어가 나올 정도였다. 최근 서비스에 접속해 보니 나쁜 말 필터를 온오프 할 수 있게 되어있는데, 심심이가 핫해진 이유를 잘 녹여낸 아이디어라고 생각했다.(매운맛 말 좀 해달랬더니 '응급애 반가워;'라며 비꼰다. 너무해..)

심심이

AI NPC - Smart NPCs for Unreal Engine

이젠 게임 속의 NPC에 인공지능을 탑재해 유저와 일상적인 대화가 가능한 게임도 개발됐다고 한다. 재미있으면서도 나중엔 게임과 일상이 구분되지 않는 세상이 정말로 와버리는 게 아닌가 걱정스럽다.

 

이 사례를 끝으로 Open AI를 통해 인공지능 대화를 만드는 라이브 코딩을 진행해 주셨다. 인공지능의 성격과 말투를 설정해 주고 답변하는 스크립트를 TTS로 변환하는 과정을 거친다. 예시로 마법 세계의 안심시켜 주는 너굴맨이라는 캐릭터의 스크립트가 실시간으로 오가는 대화창과 TTS를 봤는데, 정말 무궁무진한 작업을 할 수 있을 것 같았다. (TMI. 라떼는 클리피가 인공지능이나 마찬가지였다.)