"use strict"; const {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0]; const {useMDXComponents: _provideComponents} = arguments[0]; function _createMdxContent(props) { const _components = { blockquote: "blockquote", code: "code", h2: "h2", h3: "h3", img: "img", li: "li", p: "p", pre: "pre", strong: "strong", ul: "ul", ..._provideComponents(), ...props.components }; return _jsxs(_Fragment, { children: [_jsx(_components.h2, { id: "들어가며", children: "들어가며" }), "\n", _jsx(_components.p, { children: "AI 채팅 서비스를 만들면서 한 가지 의문이 생겼다." }), "\n", _jsxs(_components.blockquote, { children: ["\n", _jsxs(_components.p, { children: ["Claude나 ChatGPT는 왜 새 메시지가 화면 ", _jsx(_components.strong, { children: "상단" }), "에 나타나는 거지?"] }), "\n"] }), "\n", _jsx(_components.p, { children: "일반적인 채팅 앱은 새 메시지가 화면 하단에 추가되고, 사용자가 스크롤해서 확인하는 구조다. 그런데 AI 채팅 앱들은 다른 접근을 취한다. 새 메시지가 viewport 상단에 표시되고, 이전 대화들이 자연스럽게 위로 밀려 올라간다." }), "\n", _jsx(_components.p, { children: "직접 구현해보니 생각보다 간단한 트릭임을 알 수 있었다." }), "\n", _jsx(_components.h2, { id: "일반-채팅-vs-claude-스타일-채팅", children: "일반 채팅 vs Claude 스타일 채팅" }), "\n", _jsx(_components.h3, { id: "일반-채팅의-문제", children: "일반 채팅의 문제" }), "\n", _jsx(_components.p, { children: "대부분의 채팅 앱은 아래와 같은 구조를 택한다." }), "\n", _jsx(_components.pre, { children: _jsx(_components.code, { className: "language-markdown", children: "┌─────────────────────────────┐\n│ Message 1 │\n│ Message 2 │\n│ Message 3 │\n│ ... │\n│ New Message ← 화면 하단 │\n└─────────────────────────────┘\n ↓ 스크롤 필요\n" }) }), "\n", _jsx(_components.p, { children: "새 메시지를 보려면 항상 아래로 스크롤해야 한다." }), "\n", _jsx(_components.p, { children: "간단한 예시로 카카오톡 채팅을 생각해볼 수 있다." }), "\n", _jsx(_components.h3, { id: "claude-스타일", children: "Claude 스타일" }), "\n", _jsx(_components.p, { children: "요즘 Claude와 같은 LLM 서비스의 채팅은 조금 다른 형태를 취하고 있다." }), "\n", _jsx(_components.pre, { children: _jsx(_components.code, { className: "language-markdown", children: "┌─────────────────────────────┐\n│ New Message ← 화면 상단 │\n│ │\n│ │\n│ (자연스러운 여백) │\n│ │\n└─────────────────────────────┘\n" }) }), "\n", _jsx(_components.p, { children: "위 예시처럼 사용자의 메세지를 viewport 맨 상단으로 올린 이후, 하단에 AI의 답변을 제공하는 여백을 제공한다." }), "\n", _jsx(_components.p, { children: "따라서, 새 메시지는 항상 눈에 보이는 영역에 위치하며, 읽기 시작하는 위치가 일정하기 때문에 더 나은 UX를 제공할 수 있다." }), "\n", _jsx(_components.p, { children: _jsx(_components.img, { src: "https://brewlo-blog-images.s3.ap-northeast-2.amazonaws.com/images/2025/12/26/fb5083b8-79b8-4af7-bfde-06bb118fdd7a.png", alt: "" }) }), "\n", _jsx(_components.h2, { id: "핵심-아이디어-dynamic-padding", children: "핵심 아이디어: Dynamic Padding" }), "\n", _jsx(_components.p, { children: "이렇게 구현하는 비밀은 **동적 패딩(Dynamic Padding)**에 있다." }), "\n", _jsx(_components.p, { children: "마지막 메시지 아래에 동적으로 계산되는 패딩을 추가한다. 패딩 높이는 간단한 공식으로 계산된다." }), "\n", _jsx(_components.pre, { children: _jsx(_components.code, { className: "language-typescript", children: "dynamicPaddingBottom = Math.max(0, viewportHeight - contentHeight - margin);\n" }) }), "\n", _jsx(_components.p, { children: "콘텐츠가 viewport보다 작으면 패딩이 남은 공간을 채우고, viewport보다 크면 패딩이 0이 되어 일반 스크롤처럼 동작한다." }), "\n", _jsx(_components.p, { children: _jsx(_components.img, { src: "https://brewlo-blog-images.s3.ap-northeast-2.amazonaws.com/images/2025/12/26/77af93c2-809d-44e7-a712-67d1700992f5.png", alt: "" }) }), "\n", _jsx(_components.h2, { id: "구현하기", children: "구현하기" }), "\n", _jsx(_components.h3, { id: "custom-hook-설계", children: "Custom Hook 설계" }), "\n", _jsx(_components.p, { children: "이 로직을 재사용 가능한 훅으로 만들었다." }), "\n", _jsx(_components.pre, { children: _jsx(_components.code, { className: "language-typescript", children: "// useChatAutoScroll.ts\nimport { useRef, useState, useEffect, useMemo } from \"react\";\n\nconst MESSAGE_MARGIN_HEIGHT = 32;\n\ninterface UseChatAutoScrollOptions {\n messages: unknown[];\n scrollBehavior?: ScrollBehavior;\n}\n\nexport function useChatAutoScroll({\n messages,\n scrollBehavior = \"smooth\",\n}: UseChatAutoScrollOptions) {\n const scrollAreaRef = useRef(null);\n const lastSectionRef = useRef(null);\n const prevMessagesLengthRef = useRef(0);\n\n const [viewportHeight, setViewportHeight] = useState(0);\n const [lastSectionHeight, setLastSectionHeight] = useState(0);\n\n // 핵심: 동적 패딩 계산\n const dynamicPaddingBottom = useMemo(\n () =>\n Math.max(0, viewportHeight - lastSectionHeight - MESSAGE_MARGIN_HEIGHT),\n [viewportHeight, lastSectionHeight]\n );\n\n // viewport 높이 추적\n useEffect(() => {\n const updateViewportHeight = () => {\n const height = scrollAreaRef.current?.clientHeight || 0;\n setViewportHeight(height);\n };\n\n updateViewportHeight();\n window.addEventListener(\"resize\", updateViewportHeight);\n return () => window.removeEventListener(\"resize\", updateViewportHeight);\n }, []);\n\n // 새 메시지 추가 시에만 높이 업데이트\n useEffect(() => {\n const isNewMessage = messages.length > prevMessagesLengthRef.current;\n prevMessagesLengthRef.current = messages.length;\n\n if (isNewMessage && lastSectionRef.current) {\n requestAnimationFrame(() => {\n if (lastSectionRef.current) {\n setLastSectionHeight(lastSectionRef.current.scrollHeight);\n }\n scrollToBottom();\n });\n }\n }, [messages.length]);\n\n const scrollToBottom = (behavior: ScrollBehavior = scrollBehavior) => {\n const viewport = scrollAreaRef.current?.querySelector(\n \"[data-radix-scroll-area-viewport]\"\n ) as HTMLElement | null;\n\n const target = viewport || scrollAreaRef.current;\n target?.scrollTo({\n top: target.scrollHeight,\n behavior,\n });\n };\n\n return {\n scrollAreaRef,\n lastSectionRef,\n viewportHeight,\n dynamicPaddingBottom,\n scrollToBottom,\n };\n}\n" }) }), "\n", _jsx(_components.h3, { id: "메시지-분리-전략", children: "메시지 분리 전략" }), "\n", _jsx(_components.p, { children: "\"마지막 사용자 메시지\"를 기준으로 대화를 두 그룹으로 나눈다." }), "\n", _jsxs(_components.p, { children: ["우리가 추적해야 하는 건 ", _jsx(_components.strong, { children: "현재 진행 중인 대화 턴" }), "의 높이이기 때문이다."] }), "\n", _jsx(_components.pre, { children: _jsx(_components.code, { className: "language-typescript", children: "const { previousMessages, lastSectionMessages } = useMemo(() => {\n const lastUserMessageIndex = messages.findLastIndex(\n (msg) => msg.role === \"user\"\n );\n\n if (lastUserMessageIndex === -1) {\n return { previousMessages: [], lastSectionMessages: messages };\n }\n\n return {\n previousMessages: messages.slice(0, lastUserMessageIndex),\n lastSectionMessages: messages.slice(lastUserMessageIndex),\n };\n}, [messages]);\n" }) }), "\n", _jsxs(_components.p, { children: [_jsx(_components.code, { children: "previousMessages" }), "는 이전 대화 턴들로 패딩 계산에 영향을 주지 않고, ", _jsx(_components.code, { children: "lastSectionMessages" }), "는 현재 대화 턴으로 이 높이를 기준으로 패딩을 계산한다."] }), "\n", _jsx(_components.h3, { id: "컴포넌트-조립", children: "컴포넌트 조립" }), "\n", _jsx(_components.pre, { children: _jsx(_components.code, { className: "language-tsx", children: "function ChatConversation({\n messages,\n lastSectionRef,\n dynamicPaddingBottom,\n}: ChatConversationProps) {\n const { previousMessages, lastSectionMessages } = useMemo(() => {\n // ... 분리 로직\n }, [messages]);\n\n return (\n

\n {/* 이전 대화들 */}\n {previousMessages.map((msg) => (\n \n ))}\n\n {/* 현재 대화 턴 (높이 추적 대상) */}\n

\n {lastSectionMessages.map((msg) => (\n \n ))}\n

\n\n {/* 동적 패딩 */}\n

\n );\n}\n" }) }), "\n", _jsx(_components.h3, { id: "최종-사용", children: "최종 사용" }), "\n", _jsx(_components.pre, { children: _jsx(_components.code, { className: "language-tsx", children: "function Chat({ messages }: ChatProps) {\n const { scrollAreaRef, lastSectionRef, dynamicPaddingBottom } =\n useChatAutoScroll({ messages });\n\n return (\n \n \n \n );\n}\n" }) }), "\n", _jsx(_components.h2, { id: "주의할-점", children: "주의할 점" }), "\n", _jsx(_components.h3, { id: "resizeobserver를-쓰면-안-되는-이유", children: "ResizeObserver를 쓰면 안 되는 이유" }), "\n", _jsx(_components.p, { children: "처음에는 이렇게 구현하고 싶었다." }), "\n", _jsx(_components.pre, { children: _jsx(_components.code, { className: "language-typescript", children: "// 이렇게 하면 안 된다\nconst resizeObserver = new ResizeObserver((entries) => {\n setLastSectionHeight(entries[0].contentRect.height);\n});\nresizeObserver.observe(lastSectionRef.current);\n" }) }), "\n", _jsx(_components.p, { children: "문제는 사용자가 메시지 내의 아코디언을 펼치거나 코드 블록을 확장할 때마다 높이가 변경된다는 점이다." }), "\n", _jsxs(_components.p, { children: ["그러면 ", _jsx(_components.code, { children: "dynamicPaddingBottom" }), "이 재계산되고, 화면 전체가 뚝뚝 끊기면서 움직이는 레이아웃 시프트가 발생한다."] }), "\n", _jsx(_components.h3, { id: "새-메시지-추가-시에만-업데이트", children: "새 메시지 추가 시에만 업데이트" }), "\n", _jsx(_components.pre, { children: _jsx(_components.code, { className: "language-typescript", children: "useEffect(() => {\n const isNewMessage = messages.length > prevMessagesLengthRef.current;\n prevMessagesLengthRef.current = messages.length;\n\n if (isNewMessage) {\n setLastSectionHeight(lastSectionRef.current.scrollHeight);\n }\n}, [messages.length]);\n" }) }), "\n", _jsx(_components.p, { children: "메시지 배열의 길이가 증가했을 때만 높이를 업데이트한다. 사용자 상호작용으로 인한 높이 변화는 무시된다." }), "\n", _jsx(_components.h3, { id: "radix-ui-scrollarea-사용-시", children: "Radix UI ScrollArea 사용 시" }), "\n", _jsx(_components.p, { children: "Radix ScrollArea는 내부에 별도의 viewport 요소를 생성한다. 스크롤을 조작할 때 이 요소를 찾아서 사용해야 한다." }), "\n", _jsx(_components.pre, { children: _jsx(_components.code, { className: "language-typescript", children: "const viewport = scrollAreaRef.current?.querySelector(\n \"[data-radix-scroll-area-viewport]\"\n) as HTMLElement | null;\n\nviewport?.scrollTo({\n top: viewport.scrollHeight,\n behavior: \"smooth\",\n});\n" }) }), "\n", _jsx(_components.h2, { id: "마무리", children: "마무리" }), "\n", _jsx(_components.p, { children: "따라서 기억할만한 핵심은 세 가지 정도 되는 것 같다." }), "\n", _jsxs(_components.ul, { children: ["\n", _jsxs(_components.li, { children: [_jsx(_components.strong, { children: "Dynamic Padding" }), ": ", _jsx(_components.code, { children: "viewport높이 - 콘텐츠높이" }), "로 패딩을 동적 계산"] }), "\n", _jsxs(_components.li, { children: [_jsx(_components.strong, { children: "메시지 분리" }), ": 마지막 사용자 메시지 기준으로 이전/현재 대화 분리"] }), "\n", _jsxs(_components.li, { children: [_jsx(_components.strong, { children: "선택적 업데이트" }), ": 새 메시지 추가 시에만 높이 업데이트"] }), "\n"] })] }); } function MDXContent(props = {}) { const {wrapper: MDXLayout} = { ..._provideComponents(), ...props.components }; return MDXLayout ? _jsx(MDXLayout, { ...props, children: _jsx(_createMdxContent, { ...props }) }) : _createMdxContent(props); } return { default: MDXContent };