AI 회사 가고 싶으면 이 UX 원리는 알아두세요

Claude나 ChatGPT를 쓰다 보면 뭔가 다르다는 느낌 받아본 적 있으신가요?

일반 메신저랑 비슷하게 생겼는데, 쓰는 느낌은 다릅니다. 뭔가 답변을 읽기가 편해요. 화면이 넓게 느껴지고, 스크롤도 자연스럽습니다.

저도 처음엔 그냥 "잘 만들었네" 하고 넘어갔는데, 직접 AI 채팅 UI를 구현하면서 이게 우연이 아니라는 걸 알게 됐습니다.

AI 회사는 계속 늘어날 겁니다. 프론트엔드 개발자로서 이 UX 원리를 알아두면 면접에서든, 실무에서든 분명 써먹을 일이 생깁니다.

일반 채팅 vs AI 채팅, 뭐가 다를까?

일반 채팅은 쌍방향 소통입니다. 카카오톡이나 슬랙처럼 서로 주거니 받거니 하죠. 내가 메시지를 보내면 바로 그 위치로 스크롤되고, 상대방 답장이 오면 또 그 위치로 갑니다. 누가 질문자고 답변자인지 구분이 없어요.

AI 채팅은 다릅니다. 질문자와 답변자가 명확히 나뉘어 있어요.

내가 질문하면, AI가 길게 답변합니다. 그것도 스트리밍으로 주르륵 내려오죠. 이 상황에서 일반 채팅처럼 동작하면 어떻게 될까요?

답변이 화면 맨 아래에서 시작합니다. 시선이 계속 화면 하단에 고정돼요. AI 답변은 길어질 텐데, 고개 숙이고 화면 아래만 쳐다보면서 읽어야 합니다. 쾌적하지 않아요.

그래서 AI 채팅 UI는 다른 전략을 씁니다.

"공간을 미리 확보해서, AI 답변이 화면 상단에서 시작하게 한다."

유저 메시지가 위로 올라가고, 그 아래 넓은 공간에서 AI 답변이 펼쳐지면 시선이 자연스럽게 위에서 아래로 흐릅니다. 긴 답변도 편하게 읽을 수 있어요.

Claude는 이걸 어떻게 구현했을까?

직접 devtools로 까봤습니다.

비밀은 여백에 있었습니다.

유저 메시지가 올라오면, 그 아래에 거대한 여백이 생깁니다. 이 여백 덕분에 스크롤할 공간이 확보되고, 유저 메시지를 화면 상단으로 밀어올릴 수 있는 거죠.

AI 응답이 스트리밍되면서 길어지면? 여백이 그만큼 줄어듭니다. 응답이 화면을 다 채우면 여백은 0이 되고, 그때부터는 일반적인 스크롤 동작을 합니다.

핵심 원리: 여백이 있어야 스크롤이 된다

당연한 얘기 같지만, 이게 핵심입니다.

스크롤을 올려서 유저 메시지를 화면 상단에 보여주고 싶다고 해봅시다. 근데 콘텐츠가 화면보다 짧으면? 스크롤 자체가 안 됩니다. 올릴 게 없으니까요.

그래서 인위적으로 여백을 만들어야 합니다.

여백 계산 공식은 간단해요:

여백 = 뷰포트 높이 - (유저 메시지 높이 + AI 응답 높이)

• AI 응답이 없을 때: 여백이 최대 → 유저 메시지가 상단에 고정됨
• AI 응답이 길어질수록: 여백이 줄어듦
• AI 응답이 화면을 다 채우면: 여백 = 0 → 일반 스크롤

---

구현할 때 알아야 할 것들

1. 필요한 수치들

여백을 계산하려면 이 값들을 실시간으로 알아야 합니다:

• 뷰포트(컨테이너) 높이: ResizeObserver로 추적
• 유저 메시지 높이: 렌더링 후 측정
• AI 응답 높이: 스트리밍 중 계속 변하므로 지속적으로 추적

const footerMargin = useMemo(() => {
  const contentHeight = userMessageHeight + aiResponseHeight;
  return Math.max(0, containerSize.height - contentHeight);
}, [containerSize.height, userMessageHeight, aiResponseHeight]);

2. 가상 스크롤에서의 타이밍 이슈

react-virtuoso 같은 가상 스크롤 라이브러리를 쓴다면 타이밍을 신경 써야 합니다.

가상 스크롤은 요소가 추가된다고 즉시 스크롤 위치가 계산되지 않아요. 내부적으로 높이 계산을 해야 하거든요.

그래서 totalListHeightChanged 같은 콜백을 활용해서, 높이 계산이 끝난 후에 스크롤을 조작해야 합니다.

totalListHeightChanged={() => {
  const lastMessage = messages[messages.length - 1];
  if (!lastMessage) return;

  if (lastMessage.type === "user") {
    // 유저 메시지: 상단으로 스크롤
    virtuosoRef.current?.scrollToIndex({
      index: "LAST",
      align: "start",
      behavior: "smooth",
    });
  } else {
    // AI 응답: 하단으로 따라가기
    virtuosoRef.current?.scrollToIndex({
      index: "LAST",
      align: "end",
      behavior: "auto",
    });
  }
}}

3. 새 유저 메시지가 오면 리셋

유저가 새 질문을 하면 AI 응답 높이를 리셋해야 합니다. 안 그러면 이전 대화의 높이가 누적돼서 계산이 꼬여요.

const resetAiResponseHeight = useCallback(() => {
  setAiResponseHeight(0);
  measuredHeightsRef.current.clear();
}, []);

---

실제 구현 결과

39-bde1-4db4f54f0a1a/image.png)

---

팁: 스토리북으로 개발하세요

이런 UX를 실제 프로덕션 환경에서 개발하면 고통스럽습니다.

LLM 응답을 기다려야 하니까 토큰 소모도 심하고, 느리고, 답답해요. 스크롤 타이밍 하나 고치려고 몇 분씩 기다리는 건 비효율의 극치입니다.

스토리북으로 목 데이터를 넣고 UX만 따로 개발하세요. 스트리밍 응답도 시뮬레이션할 수 있고, 다양한 케이스를 빠르게 테스트할 수 있습니다.

---

마무리

정리하면:

1. AI 채팅은 질문-답변 구조라서 일반 채팅과 다른 UX가 필요합니다
2. 유저 메시지를 상단에 고정하려면 여백이 핵심입니다
3. 여백 = 뷰포트 - (유저 메시지 + AI 응답)
4. 가상 스크롤 쓸 때는 높이 계산 타이밍을 신경 쓰세요

AI 회사 면접에서 "채팅 UI 구현해본 적 있어요?" 물어보면, 이 정도는 말할 수 있어야 하지 않을까요?