AI로 캐릭터형 채팅 UI 「Elena」를 시제품으로 만들어 보았다

최근, AI 채팅 UI에 대해 생각하던 중에,

"AI가 도구가 아니라, 존재감을 갖게 된다면 경험은 어떻게 변할까?"

라는 생각이 들어, 캐릭터형 AI UI 프로토타입을 만들어 보았습니다.

이번에는 일부러,

• 단일 HTML
• CSS
• Vanilla JavaScript
• GitHub Pages

만으로 가볍게 시제품을 제작했습니다.

캐릭터형 리서치 에이전트 AI

「Elena」의 UI 프로토타입입니다.

• 캐릭터 사이드바
• 채팅 UI
• 메시지 내 아바타
• 글래스 스타일 (Glassmorphism) UI
• GitHub Pages 공개

까지 AI로 구축하여 구현했습니다.

Live Demo: https://cv63kittyhawk.github.io/ux-agent-elena/

GitHub:

Live Demo: https://cv63kittyhawk.github.io/ux-agent-elena-en/

GitHub:

AI 채팅 UI를 보면서,

"AI가 도구가 아니라,

존재감을 갖게 된다면 경험은 어떻게 변할까?"

라고 생각했습니다.

그래서,

캐릭터형 AI UI를 시제품으로 만들어 보기로 했습니다.

단순한 외관의 변경이 아니라,

• 신뢰감
• 친근함
• 대화 지속성

에 변화가 일어나는지를 관찰하고 싶었기 때문입니다.

그 과정에서 생각한 것이,

AI를 "답을 돌려주는 도구"가 아니라,

"질문을 키워나가는 존재"로 파악하는 사고방식입니다.

사실, 이 아이디어에는 또 하나의 출발점이 있었습니다.

해외 드라마 『멘탈리스트 (The Mentalist)』에 등장하는 패트릭 제인(Patrick Jane) 같은 인물에게 상담할 수 있다면 재미있지 않을까 하는 생각에, 처음에는 AI 프롬프트(Prompt)로 시도해 보았습니다.

그로부터 실존 인물을 그대로 사용하는 것이 아니라, 오리지널 캐릭터로 교체하고, 나아가 UX 리서치나 사고 정리를 지원하는 에이전트(Agent)로서 설계를 진행한 결과, 현재의 「Elena」라는 프로토타입이 되었습니다.

이번에는 상당히 심플합니다.

/
├── index.html
├── README.md
...

사용 기술:

• HTML
• CSS
• Vanilla JavaScript
• GitHub Pages

프레임워크(Framework)는 사용하지 않았습니다.

빌드 환경도 없습니다.

우선은 "멈추지 않고 시제품을 만든다"를 우선시했습니다.

이번 프로토타입 전체의 구조는 다음과 같습니다.

LINE처럼,

엘레나의 얼굴 아이콘을 채팅 메시지 옆에 표시하고 있습니다.

<div class="message-avatar-frame">
<img src="assets/elena_ig.png"
class="message-avatar"
...

다만, 이 부분에서 꽤 고생했습니다.

애니메이션 캐릭터 이미지를 원형 아이콘으로 만들면,

• 얼굴이 작음
• 머리가 잘림
• 중앙에 오지 않음

이라는 문제가 발생했습니다.

처음에는 AI에게 조정을 요청했지만,

"조금 더 중앙으로", "얼굴을 크게"와 같은 지시로는 좀처럼 이미지대로 되지 않았습니다.

그래서 한 번 DevTools를 사용하여 직접 위치나 배율을 조정한 뒤,

"transform: scale(3.2) translateX(-6%)

와 같이 조정하고 싶다"

라는 구체적인 수치를 AI에게 전달하도록 했습니다.

그러자 그때부터는 수정이 매끄럽게 진행되었습니다.

최종적으로는 다음과 같은 CSS가 되었습니다.

.message-avatar {
width: 100%;
height: 100%;
...

이번 작업을 통해 느낀 점은,

AI에게 맡기는 것과 스스로 확인·조정하는 것을 오가면, 시제품 제작 속도가 크게 올라간다

는 것이었습니다.

배경은 글래스모피즘 (glassmorphism)을 가볍게 의식하고 있습니다.

backdrop-filter: blur(18px);

을 사용.

AI 느낌과 "정적인 대화 공간"을 양립하고 싶었기에,

약간 어두운 톤 + 보라색 베이스로 구성했습니다.

이번에 상당히 재미있었던 것이 OGP 이미지입니다.

처음에는 직접 간단한 것을 만들 생각이었지만,

시험 삼아 AI에게 초안을 만들어 달라고 했더니,

꽤 짧은 시간 안에 방향성이 정리되었습니다.

특히:

• 캐릭터
• UI
• 세계관
• “Human Insight Interface”

를 한 장으로 전달할 수 있는 점이 좋았습니다.

이번에 상당히 재미있었던 점은,

"AI가 전부 다 한다"는 느낌이 아니었다는 것입니다.

오히려,

• CSS 조정
• OGP
• README
• UI 시행착오

등,

"우와, 이거 귀찮은데..."

하고 멈춰버릴 법한 부분을,

계속해서 전진할 수 있었던 감각이 강했습니다.

이것은,

Coursera의 Google AI Certificate에서 보았던,

"하기 싫다고 생각했을 때가 AI가 나설 차례가 아닐까?"

라는 이야기와도 상당히 유사한 감각이었습니다.

AI의 가치는,

단순한 자동화뿐만 아니라,

"인간이 멈추지 않고 전진할 수 있는"

지점에도 있는 것일지도 모릅니다.

향후에는:

• OpenAI API 연동
• 실시간 애니메이션 (Real-time Animation)
• 감정 반영 UI
• 음성 대응
• 캐릭터 전환
• 메모리 기능

등도 시도해보고 싶습니다.

특히,

"AI와의 대화"에서

"존재와의 대화"로

어떻게 변화할지는 상당히 흥미롭습니다.

이번에는,

"우선 가볍게 시제품을 만들어 공개한다"

를 중시했습니다.

단일 HTML + GitHub Pages만으로도,

꽤 여러 가지를 시도해 볼 수 있어 재미있었습니다.

AI 시대는,

완벽하게 준비한 뒤에 만드는 것보다,

멈추지 않고 시제품을 돌리는 것

이 더 중요해질지도 모르겠습니다.

Live Demo:

GitHub:

Live Demo: https://cv63kittyhawk.github.io/ux-agent-elena-en/

GitHub:

🌾 문장과 그림 작성은 ChatGPT를 보조로 사용하고 있습니다.