UI 모션 : 대화형 AI 앱
UI motion
최근 연구에 따르면, 글로벌 대화형 AI 시장은 2032년까지 연평균 약 22%의 성장률를 기록하며 빠르게 확대될 것으로 전망됩니다. 본 프로젝트에서는 가상의 대화형 AI 앱에서 사용자와 AI 간의 자연스러운 상호작용에 집중한 UI 모션을 설계했습니다. 이를 통해 화면 전환은 부드럽게, AI의 응답 과정은 직관적으로 전달하고자 했습니다
According to recent research, the global conversational AI market is expected to grow rapidly with an average annual growth rate of about 22% by 2032. This project focused on designing UI motions that emphasize natural interactions between the user and AI in a fictional conversational AI app. The goal was to ensure smooth screen transitions and intuitive communication of the AI's response process.
Text 대화
*ChatGPT의 답변 영상을 활용했습니다.
*I used a video of ChatGPT's responses.
[ 입력창 변화 ]
입력창이 자연스럽게 다른 버튼으로 변하도록 설계했습니다. 항상 보이는 요소인 만큼, 화면 간 연결성에 도움이 되도록 시작과 끝을 부드럽게 이어주는 EaseInOut 커브를 적용했습니다.
[ Input Field Transformation ]
The input field is designed to naturally transform into a different button. Since it is a constantly visible element, an EaseInOut curve is applied to smoothly connect the start and end, enhancing the screen transition.
Voice 대화
(1) Home (2) 음성이 오고 갈 때 (3) AI가 정보를 처리하는 중일 때
(1) Home (2) During voice interaction (3) When AI is processing information
[ 음성 상호작용 피드백 ]
화면 속 원의 Scale 값 그래프 조절을 통해 통통 튀는 동작을 연출했습니다. 역동적인 움직임을 통해 AI 음성 출력 및 사용자 음성 입력이 진행 중임을 쉽게 이해할 수 있도록 했습니다.
[ Voice Interaction Feedback ]
The scale value of the circle on the screen was adjusted to create a bouncing motion. Through dynamic movement, it helps users easily understand that AI voice output and user voice input are in progress.
[ AI 정보 처리 모션 ]
행성이 별을 도는 형태에서 영감을 받아, AI가 정보를 처리하는 중임을 표현했습니다. 전반적으로 멈춰있지 않고 y 값으로 지속적으로 움직이도록 해 지루함을 느끼지 않도록 했습니다.
[ AI Data Processing Motion ]
Inspired by the way planets orbit stars, I expressed the idea of AI processing information. Overall, I made sure the movement is continuous along the y-axis to prevent any feeling of stagnation and keep it engaging.
초기 아이디어 스케치
Idea sketch
