L5 자율주행 차량 멀티모달 프로토타입
VLA 기반의 XAI 멀티모달 인터페이스를 CARLA와 연동하여 다회 실험 가능하도록 구현한 인터랙티브 프로토타입
- 작업일
- 2026.04.08–2026.07.10
- 디자인 분야
- 용도
- 사용 도구
- 작성자
- 조윤서
작업 배경
본 프로젝트는 Level 5 자율주행 환경에서 차량의 주행 판단 과정을 사용자에게 명확히 전달하기 위해, VLA(Vision-Language-Action) 모델 기반의 XAI(설명 가능한 AI) 멀티모달 인터페이스를 구축하는 팀 프로젝트로 진행되었다. CARLA 자율주행 시뮬레이터와 연동하여 실제 주행 상황에서의 인지·판단 데이터를 실시간으로 시각화하고, 다양한 실험 환경에서 인터랙션을 검증할 수 있는 전체 시스템을 기획하고 구현하였다. 리서치부터 서버 연결 전반에서 LLM 모델이 다양하게 사용되었다. 전체 팀 프로젝트 맥락 중 본 아카이빙에서는 내가 담당한 인터페이스 파트 중심의 워크플로우를 다룬다. 주로 Claude와 Figma MCP를 활용해 실시간 반응형 UI 프로토타이핑을 진행했으며, 단순히 디자인 결과를 생성하는 방식이 아니라 디자인과 프론트엔드 구현을 연결하는 바이브 프론트엔드 개발 절차를 구축하는 데 초점을 맞췄다.
작업 단계
선행 연구 리서치
관련 논문을 빠르게 검토하고 핵심 내용을 정리하기 위해 LLM 기반 PDF 요약과 논문 요약 서비스를 활용했다.
와이어프레임 스케치
사용자 시나리오와 맥락을 바탕으로 인터페이스의 초기 구조를 직접 설계했다. 이후 바이브 코딩으로 기능을 확장하더라도 구조가 혼란스러워지지 않도록 초반 골조를 수작업으로 정리했다.
사용자 시나리오 및 화면 구성 확정
정보량과 애니메이션의 톤앤매너를 논의하고, 사용자 시나리오에 맞춰 주요 화면 구성과 인터랙션 방향을 확정했다.
GUI 및 디자인 시스템 정리
확정된 화면 구조와 회의 내용을 바탕으로 GUI와 디자인 시스템을 정리해 이후 프로토타이핑의 시각적 기준을 마련했다.
(담당 팀원이 했고 한 게 없는 부분이긴 한데 뺄 수 없는 단계라서 넣음 디자인 시스템 관련해서도 온라인에 자료가 많고 에셋 사이트도 있으니 참)
플로우차트
코드 구현 전에 화면 전환과 기능 흐름을 AI가 이해할 수 있도록 플로우차트 형태의 설명 자료를 제작했다. 기획 내용 자체는 직접 작성하고, 정리 과정에서 LLM을 보조적으로 활용할 수 있도록 구성했다.
정적 프로토타입 구현
애니메이션과 실제 기능을 추가하기 전, 와이어프레임과 플로우차트를 기준으로 전체 화면을 코드 기반의 정적 프로토타입으로 옮겼다. Figma 개발 모드와 MCP를 통해 디자인 변경 사항을 확인하며 레이아웃과 컴포넌트를 수정했다.
<MCP figma 페이지 링크> 여기서 @<MCP 특정 섹션 링크> 이 레이아웃 변경 사항 참고해서 다음과 같은 수정이 있어.
1. 메인화면 좌측 상단에서 오류 감지에 대한 알림이 뜸
2. 원래는 인삿말 정도였던 텍스트 영역에서 현재 주행 판단 관련 XAI 메시지를 첨부한 Flow.md 순서대로 실시간으로 업데이트 함. 한번에 페이드로 바뀌는게 아니라 시나리오 시퀀스 넘어가는 json에 맞춰서 진짜 판단하는 것처럼 작성. 채팅 대응에서 만약 제미나이로 실시간 속도가 안나올 것 같으면 내가 스크립트를 다 제공해야하니 속도 체크하고 알려줘.
3. 검색바 영역은 우선 기존의 사이즈와 디자인을 유지하되 변형 레이아웃에 맞춰서 전반적인 세로 패딩값만 수정해줘. mcp 코드 확인하고 정확하게 반영. 아이콘, 폰트도 비례에 맞게 수정하되 현재 상태 유지하는 방향으로. 이 디자인이 이 브랜치에는 반영을 안해놔서 그럼. 걍 빨리 업데이트 해.
4. 빠른 실행 4가지 메뉴 제안은 검색바 아래로 위치가 변경되었으니 섹션 순서 반영할것. 마찬가지로 현재 상태에서 사이즈랑 위치만 옮기면 됨. 추천옵션 띄어쓰기 등 최신 내용이 반영 안 되어있음. 텍스트 문서 확인해서 내용 업데이트.
5. 하단 gnb 바에 많은 수정이 있었음. 도착 예정과 남은 거리 영역이 중앙에 생겼고, 앱 영역은 다 오른쪽으로 변경됨. 가로 간격 값 주의해서 업데이트.
HANDOVER 문서 작성
세션의 토큰 한계로 작업이 중단되더라도 다음 세션에서 개발 맥락을 이어갈 수 있도록 진행 상황과 주요 결정을 문서화했다. 협업 프로젝트의 중간 공유 자료로도 활용할 수 있도록 작업 결과, 실패 기록, 결정 사항, 주의점, 다음 단계와 주요 파일 정보를 함께 정리했다.
지금까지의 대화 전체를 분석해서 HANDOVER.md 파일을 프로젝트 루트에 생성해줘.
아래 항목을 반드시 포함할 것:
## 작업 요약 - 이번 세션에서 작업한 내용과 완료된 사항
## 성공/실패 기록 - 어떤 접근이 통했고, 어떤 버그를 어떻게 해결했는지 - 시도했지만 실패한 방법과 그 이유
## 주요 결정 사항 - 내린 결정과 그 이유 (왜 A 대신 B를 택했는지)
## 주의사항 & 교훈 - 다음 세션에서 주의할 점, 반복하면 안 되는 실수
## 다음 단계 - 이어서 해야 할 작업 목록 (우선순위 포함)
## 중요 파일 맵 - 이번 세션에서 주로 다룬 파일 경로와 역할 파일명은 HANDOVER-YYYY-MM-DD.md 형식으로 해줘.멀티모달 API 연결
화면 터치뿐 아니라 음성 인식, 추론, 음성 응답까지 이어지는 멀티모달 인터랙션을 구현하기 위해 각 API를 연결했다. 배포 환경과 로컬 환경에서 모두 테스트할 수 있도록 Vercel 환경 변수와 로컬 환경 변수 파일 구조를 함께 구성했다.
다음 api 문서를 읽고 (<각 api 링크 첨부>) 내가 .env에 api키만 채워넣으면 되도록 업데이트해줘. vercel 쓰고 있고 환경 변수에 내가 넣을 거긴한데 로컬에서도 테스트해야하니까 env local도 만들어줘야함.음성 인터랙션 고도화
별도의 Wakeword 모델 대신 TTS와 STT의 동작 흐름을 조정해 연속적인 음성 대화가 가능하도록 인터랙션을 고도화했다. TTS 재생 중에도 사용자의 끼어들기를 감지하고, 응답 종료 후에는 카운트다운을 통해 후속 발화를 기다린 뒤 자동으로 웨이크워드 대기 상태로 복귀하도록 구성했다.
대답 이후에 잠깐 듣고있는 거 대답 도중에 쭉 듣고있다가 TTS 끝난 다음부터 카운트다운 해.
기존에는 TTS 끝나고 잠깐 마이크 열리고 타임아웃 ~5–8초였는데 답변 도중에도 잠깐, 그럼 다른 걸로 같은 끼어들기를 받을 수 있게 TTS 시작 직후 마이크 오픈. 어느 정도가 적당할지 알아서 일반적인 사례 기준으로 판단.
TTS가 끝나는 순간 카운트다운 5초 시작.
카운트다운 동안 사용자가 말하면 STT가 결과 발화하고 `isListening` 해제하고 카운트다운 클리어해서 후속 대화할 수 있게끔 하셈.
카운트다운 0 도달할 경우 STT 강제 종료하고 다시 웨이크워드 대기 상태로 복귀.
UI에 듣는 중 옆에 같은 디자인 시스템 적용해서 5 - 4- 3- 2- 1 타이머 변동 연한 회색으로 넣으셈.
기능 연동 디버깅
API와 내부 로직은 연결되어 있지만 UI 애니메이션이나 위젯에 상태가 정상적으로 반영되지 않는 문제를 점검하고 수정했다. 특히 내비게이션 앱이 현재 경로 정보를 제대로 호출하는지 확인하고, Kakao·OSRM에서 받아온 경로 데이터가 위젯까지 전달되는 흐름을 추적했다.
위젯 코드 완성되어 있는데 navigationApp이랑 kakao OSRM이랑 정보 연동이 안되는 것 같아. 내 생각에는 NavigationApp이 현재 설정된 루트를 호출 안해서 위젯에 업뎃이 안되는 것 같으니까 확인하고 디버깅해.실험용 오퍼레이터 콘솔 구축
사용자 실험 중 발생하는 상태와 대화 데이터를 실시간으로 확인하고 저장하기 위해 기능 중심의 오퍼레이터 콘솔을 구축했다. 상황 제어, 프롬프트 편집, 실험·개발 모드, 참가자 정보, 시나리오 선택, 경과 시간, 대화 로그와 메모 기능을 구성하고 Supabase와 연결해 이전 실험 기록도 조회할 수 있도록 했다.
오퍼레이터 콘솔 만들어줘. 디자인 필요없으니까 토큰 아끼셈. 데이터 분석 용이하게 하려고&자동 응답 프롬프트 고도화하려고 제작하는거니까 프로토타입 화면에서 ctrl alt shift O하면 서브 모니터에 켜지게 할거고 상황 제어 / 프롬프트 편집 / 실험&프롬프트 개발 모드 / 참가자 정보 입력란 / 시나리오 선택 으로 구성.
경과 시간 및 대화 로그를 실시간으로 보고 메모할 수 있게 하고 시험 종료 시: 시험 상태 선택 (완료/실패/무효/중단) 띄워줘. 아래 내용 확인하고 기능 넣으삼.
개발 모드:
1) 프롬프트 풀에 기여(Supabase DB에 연결되어 있으니까 버튼 누르면 실시간으로 prompt examples table에 추가되게. 업데이트 해야할 거 있으면 SQL 복붙하게도 작성해주셈.
2) 시험 로그 .md
3) 프롬프트 예시 .json
4) 대화 로그 기반 STT 입력 오류 교정
5) 대화 로그 기반 TTS 입력 오류 교정
6) 대화 로그 기반 프롬프트 교정
실험 모드: 개발 기능+ 최종 저장
다음 참가자 or 같은 참가자 시험 추가
회고
성과와 한계
CARLA 시뮬레이터와 연동되는 VLA 기반 XAI 멀티모달 프론트엔드 인터페이스를 실제로 동작하는 수준까지 구현했다. 비전공 디자이너의 관점에서 바이브 코딩을 활용해 시뮬레이터 연동과 복잡한 프론트엔드 로직을 빠르게 구축할 수 있었다. 특히 Figma MCP를 활용해 기존 디자인을 큰 오차 없이 코드 기반 프로토타입으로 옮길 수 있었다는 점을 발견했다. \ 다만 CARLA 시뮬레이터의 데이터 파이프라인과 실시간으로 통신하는 부분 등은 전체 구조에 대한 이해 없이 AI 작업만으로 해결할 수 없는 영역이었다. 인터페이스 구현과 프로토타이핑까지는 진행했지만, 성능 최적화와 데이터 처리에는 한계가 있었다.
시행착오와 개선점
개발 기간이 길어지면서 기능 추가와 삭제가 반복되었고, Git을 통한 버전 관리 과정을 처음 해보다 보니 여러 문제가 발생했다. 잘못된 버전으로 테스트하거나 의도하지 않은 에셋이 상단 레이어에 나타나는 등 원인을 파악하기 어려운 오류도 있었다. 초기에는 커밋과 푸시까지 Claude에게 맡기면서 불필요한 토큰을 사용했고, 브랜치가 의도와 다르게 섞이는 문제도 경험했다. 이후에는 버전 관리와 같이 직접 통제하는 편이 안전한 작업은 수동으로 진행하는 것이 효율적이라는 점을 확인했다.
적합한 활용 맥락
디자이너가 직접 HMI·UX 컨셉과 인터랙션 방향을 정의하고, AI를 활용해 실제로 작동하는 수준의 프로토타입까지 빠르게 구현해야 하는 작업
참고 자료
- 기타디자인 시스템 좋은 레퍼런스. 특히 인포테인먼트 위계나 용어가 잘 정리되어있음.document.pleos.ai
- 툴 문서카카오 디벨로퍼스 (맵, 로그인 등)developers.kakao.com
- 툴 문서google cloud console APIscloud.google.com
댓글
0개