📋 스트리밍 채팅에서 지켜야 할 15가지 원칙

먼저 감히 최고라고 생각하는 디자인 컴포넌트 컬렉션..
https://t.co/pqVOWqx7X6

이번에 Scroll Engineering 15가지 원칙이 실제 컴포넌트로 구현됨.

출발점은 이것입니다. 독자의 의도와 반대로 움직이지 않는 것.

1. 독자가 움직이길 원할 때만 움직이기
   누군가 글을 읽고 있다면, 다른 곳으로 끌고 가지 않아야 합니다. 자동 스크롤이 기본값이 되어서는 안 됩니다.

2. 따라오고 있을 때만 따라가기
   독자가 실시간으로 이어지는 지점에 있다면, 스트림이 계속 보이도록 유지해야 합니다. 하지만 독자가 위로 스크롤했다면, 그 자리에 그대로 머물게 해야 합니다.

3. 모든 상호작용은 의도다
   스크롤만 신호가 아닙니다. 텍스트를 선택하거나, 키보드를 사용하거나, 링크를 열거나, 검색하는 행동도 모두 인터페이스가 움직임을 멈춰야 한다는 신호입니다.

4. 새로운 턴은 뷰포트 상단에 가깝게 시작하기
   그래야 새로운 턴을 처음부터 읽을 수 있는 공간이 생깁니다.

5. 다음 답변을 스트리밍하기
   스트리밍되는 답변은 확보된 공간 안에서 자연스럽게 늘어날 수 있습니다.

6. 이전 대화의 일부를 맥락으로 남겨두기
   독자가 지금 어디에 있는지 알 수 있을 만큼 이전 턴이 충분히 보여야 합니다. 맥락이 필요합니다.

7. 새 콘텐츠는 화면 밖에서 도착하게 두기
   대화는 계속 스트리밍될 수 있지만, 독자가 보고 있는 화면을 바꾸면 안 됩니다.

8. 보이지 않는 곳에서 무슨 일이 일어나는지 보여주기
   응답이 아직 스트리밍 중인지, 새 메시지가 도착했는지 명확히 알려야 합니다.

9. 최신 답변으로 쉽게 돌아갈 수 있게 하기
   “최신으로 이동” 같은 동작은 독자를 최신 위치로 데려가고, 다시 따라가기 상태를 이어줘야 합니다.

10. 대화 어디로든 이동할 수 있게 하기
    긴 스레드에는 메시지 링크, 검색, 읽지 않은 표시, 직접 이동 기능이 필요합니다.

11. 독자가 떠난 자리에서 다시 열기
    저장된 대화는 마지막으로 의미 있게 머물렀던 턴에서 열려야 합니다. 보통은 마지막 사용자 메시지입니다. 절대적인 맨 아래가 아닙니다.

12. 레이아웃이 바뀌어도 독자의 위치를 지키기
    이미지가 로드되고, 마크다운이 펼쳐지고, 코드 블록이 렌더링되고, 오래된 메시지가 위에 추가될 수 있습니다. 그 어떤 변화도 독자가 있던 자리를 잃게 만들어서는 안 됩니다.

13. 중단이 생겨도 위치를 빼앗지 않기
    중지, 재시도, 재생성, 분기, 오류가 발생하더라도 대화 위치가 예상치 못하게 이동해서는 안 됩니다.

14. 긴 스레드에서도 반응성을 유지하기
    스트리밍 텍스트, 마크다운, 코드, 이미지, 긴 대화 기록이 있어도 인터페이스는 여전히 빠르게 반응해야 합니다.

15. 소음 없이 접근 가능하게 만들기
    대화 기록은 탐색 가능해야 하고, 키보드 포커스는 유지되어야 하며, 중요한 이벤트는 부담스럽지 않은 속도로 안내되어야 합니다.

결국 핵심은 스크롤입니다. 스크롤 엔지니어링입니다.

💬

"오늘 우리는 채팅 인터페이스를 만들기 위한 새로운 컴포넌트 세트를 공개합니다.

우리가 매일 직접 만들고 다듬어온 패턴을 다시 살펴보고, 그 뒤에 있는 추상화를 새롭게 정리한 뒤, 조합하고 커스터마이징할 수 있는 컴포넌트로 만들었습니다.

먼저 대화 레이어부터 시작합니다. 스트리밍, 스크롤링, 메시지, 말풍선, 첨부 파일, 마커를 다룹니다."