37 / 47

Message Scroller

채팅 메시지 목록의 스크롤을 똑똑하게 다루는 틀입니다. 답변이 흘러나올 때 맨 아래를 따라가고, 사용자가 위로 올리면 자리를 지켜 줍니다.

Basic

AI 채팅 화면입니다. 보내기를 누르면 답변이 한 글자씩 흘러나오고, 화면은 자동으로 맨 아래를 따라갑니다. 위로 올리면 '맨 아래로' 버튼이 뜹니다.

새 대화
보내기를 눌러 대화를 이어 가 보세요.
채팅 화면을 만드는데, AI 답변이 흘러나올 때마다 화면이 위아래로 튀어요.

Anchoring

새 메시지가 왔을 때 내 메시지와 답변 중 어느 쪽을 화면 위쪽에 고정할지 고릅니다.

기준 메시지 정하기
어느 쪽 메시지가 화면 위쪽에 자리 잡을지 고릅니다.

Group Chat

여러 사람이 있는 단체 대화입니다. '○○님이 참여했습니다' 같은 안내 줄도 기준 위치가 됩니다.

단체 대화
여러 사람이 참여하는 대화입니다. 입장 안내도 기준 메시지가 될 수 있습니다.
이번 주 배포 일정 다들 확인했나요?
메리 (에이전트)
목요일 오후 3시로 잡혀 있습니다. 릴리스 노트는 위키에 정리해 두었어요.
@로키 확인 부탁해요

Previous Context

새 메시지가 위로 올라올 때 바로 앞 메시지를 몇 픽셀 남겨 둘지 정해 맥락이 끊기지 않게 합니다.

이전 맥락 남기기
새 메시지가 위로 올라올 때 바로 앞 메시지를 얼마나 보여 둘지 정합니다.

Streaming

글자가 도착하는 동안 화면이 맨 아래에 붙어 있고, 사용자가 위로 올리면 자동 따라가기를 멈춥니다.

실시간 답변 따라가기
글자가 도착하는 동안 화면이 맨 아래에 붙어 있습니다. 위로 올리면 멈춥니다.
보내기를 눌러 답변을 받아 보세요

Opening Position

저장된 대화를 열 때 맨 아래·맨 위·마지막 기준 메시지 중 어디서 시작할지 정합니다.

저장된 대화 열기
대화를 열 때 어느 위치에서 시작할지 정합니다.
채팅 화면을 만드는데, AI 답변이 흘러나올 때마다 화면이 위아래로 튀어요.
스트리밍 채팅에서 흔한 문제예요. 메시지 목록을 MessageScroller로 감싸면, 글자가 도착하는 동안 화면이 맨 아래에 붙어 있어서 항상 최신 내용이 보입니다. 단, 사용자가 위로 올려 예전 내용을 읽는 중이면 자동 스크롤을 멈춰서 읽던 자리를 지켜 줍니다.
새 메시지를 보내면 대화 전체가 처음부터 다시 그려지는 느낌도 들어요.
메시지 하나에 scrollAnchor를 주면, 그 메시지가 화면 위쪽에 자리를 잡고 답변은 그 아래에서 자연스럽게 이어집니다. 바로 위 메시지도 살짝 보이게 남겨 두어서 맥락이 끊기지 않아요.
위로 올려서 예전 답을 다시 읽는 중이면 억지로 끌어내리지 않았으면 해요.
그렇게 동작합니다. 위로 올린 상태에서는 새 글자가 와도 자리가 유지되고, 대신 아래쪽에 '맨 아래로' 버튼이 뜹니다. 한 번 누르면 최신 메시지로 돌아가고 자동 스크롤도 다시 켜집니다.
좋네요. 그럼 화면 리더 사용자에게도 새 메시지가 전달되나요?
네. 목록에 role="log"와 aria-relevant="additions"가 기본으로 붙어서, 새 메시지가 추가되면 화면 리더가 읽어 줍니다. 스크롤 버튼도 진짜 버튼이라 키보드로 다룰 수 있어요.

Load History

위쪽에 옛 메시지를 추가로 붙여 넣어도 지금 읽던 위치가 튀지 않고 그대로 유지됩니다.

이전 메시지 불러오기
위쪽에 옛 메시지를 붙여 넣어도 읽던 위치가 그대로 유지됩니다.
채팅 화면을 만드는데, AI 답변이 흘러나올 때마다 화면이 위아래로 튀어요.
스트리밍 채팅에서 흔한 문제예요. 메시지 목록을 MessageScroller로 감싸면, 글자가 도착하는 동안 화면이 맨 아래에 붙어 있어서 항상 최신 내용이 보입니다. 단, 사용자가 위로 올려 예전 내용을 읽는 중이면 자동 스크롤을 멈춰서 읽던 자리를 지켜 줍니다.
새 메시지를 보내면 대화 전체가 처음부터 다시 그려지는 느낌도 들어요.
메시지 하나에 scrollAnchor를 주면, 그 메시지가 화면 위쪽에 자리를 잡고 답변은 그 아래에서 자연스럽게 이어집니다. 바로 위 메시지도 살짝 보이게 남겨 두어서 맥락이 끊기지 않아요.
위로 올려서 예전 답을 다시 읽는 중이면 억지로 끌어내리지 않았으면 해요.
그렇게 동작합니다. 위로 올린 상태에서는 새 글자가 와도 자리가 유지되고, 대신 아래쪽에 '맨 아래로' 버튼이 뜹니다. 한 번 누르면 최신 메시지로 돌아가고 자동 스크롤도 다시 켜집니다.
좋네요. 그럼 화면 리더 사용자에게도 새 메시지가 전달되나요?
네. 목록에 role="log"와 aria-relevant="additions"가 기본으로 붙어서, 새 메시지가 추가되면 화면 리더가 읽어 줍니다. 스크롤 버튼도 진짜 버튼이라 키보드로 다룰 수 있어요.

Animation

새 메시지가 아래에서 살짝 떠오르며 나타나는 등장 효과입니다.

새 메시지 애니메이션
새 메시지가 아래에서 살짝 떠오르며 나타납니다.
보내기를 눌러 보세요

Commands

버튼으로 맨 위·맨 아래·특정 메시지 위치로 스크롤을 옮깁니다. 코드에서 호출하는 방법입니다.

원하는 곳으로 이동
코드에서 특정 메시지나 맨 위·아래로 스크롤을 옮깁니다.
채팅 화면을 만드는데, AI 답변이 흘러나올 때마다 화면이 위아래로 튀어요.
스트리밍 채팅에서 흔한 문제예요. 메시지 목록을 MessageScroller로 감싸면, 글자가 도착하는 동안 화면이 맨 아래에 붙어 있어서 항상 최신 내용이 보입니다. 단, 사용자가 위로 올려 예전 내용을 읽는 중이면 자동 스크롤을 멈춰서 읽던 자리를 지켜 줍니다.
새 메시지를 보내면 대화 전체가 처음부터 다시 그려지는 느낌도 들어요.
메시지 하나에 scrollAnchor를 주면, 그 메시지가 화면 위쪽에 자리를 잡고 답변은 그 아래에서 자연스럽게 이어집니다. 바로 위 메시지도 살짝 보이게 남겨 두어서 맥락이 끊기지 않아요.
위로 올려서 예전 답을 다시 읽는 중이면 억지로 끌어내리지 않았으면 해요.
그렇게 동작합니다. 위로 올린 상태에서는 새 글자가 와도 자리가 유지되고, 대신 아래쪽에 '맨 아래로' 버튼이 뜹니다. 한 번 누르면 최신 메시지로 돌아가고 자동 스크롤도 다시 켜집니다.
좋네요. 그럼 화면 리더 사용자에게도 새 메시지가 전달되나요?
네. 목록에 role="log"와 aria-relevant="additions"가 기본으로 붙어서, 새 메시지가 추가되면 화면 리더가 읽어 줍니다. 스크롤 버튼도 진짜 버튼이라 키보드로 다룰 수 있어요.

Visibility

지금 화면에 보이는 메시지가 몇 개인지, 기준 메시지가 무엇인지 읽어 옵니다. 읽음 처리에 씁니다.

읽는 위치 추적
스크롤하면 지금 화면에 보이는 메시지 수와 기준 메시지가 바뀝니다.
채팅 화면을 만드는데, AI 답변이 흘러나올 때마다 화면이 위아래로 튀어요.
스트리밍 채팅에서 흔한 문제예요. 메시지 목록을 MessageScroller로 감싸면, 글자가 도착하는 동안 화면이 맨 아래에 붙어 있어서 항상 최신 내용이 보입니다. 단, 사용자가 위로 올려 예전 내용을 읽는 중이면 자동 스크롤을 멈춰서 읽던 자리를 지켜 줍니다.
새 메시지를 보내면 대화 전체가 처음부터 다시 그려지는 느낌도 들어요.
메시지 하나에 scrollAnchor를 주면, 그 메시지가 화면 위쪽에 자리를 잡고 답변은 그 아래에서 자연스럽게 이어집니다. 바로 위 메시지도 살짝 보이게 남겨 두어서 맥락이 끊기지 않아요.
위로 올려서 예전 답을 다시 읽는 중이면 억지로 끌어내리지 않았으면 해요.
그렇게 동작합니다. 위로 올린 상태에서는 새 글자가 와도 자리가 유지되고, 대신 아래쪽에 '맨 아래로' 버튼이 뜹니다. 한 번 누르면 최신 메시지로 돌아가고 자동 스크롤도 다시 켜집니다.
좋네요. 그럼 화면 리더 사용자에게도 새 메시지가 전달되나요?
네. 목록에 role="log"와 aria-relevant="additions"가 기본으로 붙어서, 새 메시지가 추가되면 화면 리더가 읽어 줍니다. 스크롤 버튼도 진짜 버튼이라 키보드로 다룰 수 있어요.
보이는 메시지 0개현재 기준: 없음

Scrollable

위나 아래로 더 내릴 내용이 남아 있는지 읽어 옵니다. 그림자나 버튼 표시 여부를 정할 때 씁니다.

스크롤 여지 읽기
위나 아래로 더 내릴 내용이 있는지 코드에서 읽어 옵니다.
채팅 화면을 만드는데, AI 답변이 흘러나올 때마다 화면이 위아래로 튀어요.
스트리밍 채팅에서 흔한 문제예요. 메시지 목록을 MessageScroller로 감싸면, 글자가 도착하는 동안 화면이 맨 아래에 붙어 있어서 항상 최신 내용이 보입니다. 단, 사용자가 위로 올려 예전 내용을 읽는 중이면 자동 스크롤을 멈춰서 읽던 자리를 지켜 줍니다.
새 메시지를 보내면 대화 전체가 처음부터 다시 그려지는 느낌도 들어요.
메시지 하나에 scrollAnchor를 주면, 그 메시지가 화면 위쪽에 자리를 잡고 답변은 그 아래에서 자연스럽게 이어집니다. 바로 위 메시지도 살짝 보이게 남겨 두어서 맥락이 끊기지 않아요.
위로 올려서 예전 답을 다시 읽는 중이면 억지로 끌어내리지 않았으면 해요.
그렇게 동작합니다. 위로 올린 상태에서는 새 글자가 와도 자리가 유지되고, 대신 아래쪽에 '맨 아래로' 버튼이 뜹니다. 한 번 누르면 최신 메시지로 돌아가고 자동 스크롤도 다시 켜집니다.
좋네요. 그럼 화면 리더 사용자에게도 새 메시지가 전달되나요?
네. 목록에 role="log"와 aria-relevant="additions"가 기본으로 붙어서, 새 메시지가 추가되면 화면 리더가 읽어 줍니다. 스크롤 버튼도 진짜 버튼이라 키보드로 다룰 수 있어요.
위로 더 있음: 아니오아래로 더 있음: 아니오