AI 면접, UX 원리만 알면 합격!
by DD
5개월 전
조회수 5
AI 채팅 UI는 일반 채팅과 달리 상단 고정 UX를 제공함
여백 계산 공식을 통해 유저 메시지를 상단에 고정하고, 긴 답변을 편하게 읽도록 함
가상 스크롤 사용 시, 높이 계산 타이밍을 고려해야 함
AI 채팅 UI의 핵심 원리: 여백
AI 채팅 UI는 유저 메시지를 화면 상단에 고정하여 긴 답변을 읽기 편하게 만든다. 구체적으로 뷰포트 높이에서 유저 메시지 높이와 AI 응답 높이를 뺀 여백을 계산한다. 따라서 여백을 통해 스크롤 위치를 조절하여 쾌적한 UX를 제공한다.
가상 스크롤의 함정: 타이밍
가상 스크롤 라이브러리 사용 시, 높이 계산 타이밍을 주의해야 한다. React-virtuoso 같은 라이브러리는 요소 추가 후 즉시 스크롤 위치를 계산하지 않는다. 반면, totalListHeightChanged 콜백을 활용하여 높이 계산 완료 후 스크롤을 조작해야 UI 렌더링 문제를 해결할 수 있다.
스토리북으로 UX 개발 효율 높이기
AI 채팅 UI 개발 시, 스토리북을 활용하여 개발 효율을 높일 수 있다. LLM 응답을 기다릴 필요 없이 목 데이터를 사용하여 UX를 빠르게 테스트할 수 있다. 따라서 스트리밍 응답 시뮬레이션을 통해 다양한 케이스를 검증하고, 개발 시간을 단축할 수 있다.
