1편에서 왜 CRDT·Yjs·WebSocket을 파게 됐는지 정리했고2편에서 WebSocket 서버 구조랑 회사 네임스페이스에 적응한 기록을 남겼다.3편은 이제 그 위에 올라가는 UX 레이어 이야기다."실제로 폼 화면에서 상대가 뭘 하고 있는지 어떻게 보여줬는지" 정리해 둔다.0. 이 글에서 다루는 범위이 글은 Yjs 기본 개념이나 Y.Doc, Y.Map 같은 타입 설명을 다시 하지 않는다.이미 전제는 이렇다.Yjs로 폼 상태를 동기화하고 있고WebSocket 서버를 통해 델타를 잘 주고받는 상태다여기서 한 발 더 나가서 아래를 다룬다.누가 폼을 보고 있는지상대가 지금 어느 필드를 편집 중인지동시에 수정할 때 "부딪혔다"는 느낌을 어떻게 줄일지"내가 뭘 하고 있는지"를 Awareness에 어떻게 싱크할지..

1편에서 "왜 이 일을 하게 됐는지"와CRDT, Yjs, WebSocket을 손에 익히기까지 과정을 정리했다.2편에서는 그다음 단계였던 WebSocket 서버 구조 설계랑회사 네임스페이스 환경에 적응한 기록을 남겨 둔다.0. 1편에서 여기까지 왔었다1편 기준으로는 대략 여기까지 정리가 되어 있었다.회사에서 "CRDT를 검토해서 폼 실시간 공유에 써보자"는 요구가 내려왔다CRDT 라이브러리는 Yjs로 결정했다로컬에서 Node WebSocket 서버와 Next 페이지 하나로 기본 통신 테스트를 완료했다Yjs 문서와 WebSocket을 묶어서 폼 데이터를 실시간으로 동기화하는 구조를 한 번 돌려 봤다이제 남은 일은이 로컬 구조를 회사 WebSocket 인프라에 맞게 옮기는 것네임스페이스 기반 구조 안에서 Yj..

회사에서 "CRDT라는 게 있으니 이걸 한 번 검토해서 폼 화면 실시간 공유에 써보자"라고 내려왔고,그때부터 내가 뭐를 어떻게 파기 시작했는지 정리해 둔 기록. 나중에 비슷한 요구가 다시 나왔을 때"그때 어떻게 붙였지?"를 빠르게 복기하려고 남겨두는 글이다.1. 왜 이걸 하게 됐는지출발점은 아주 단순했다.상담/멘토링 화면에서 폼 입력 상태를 실시간으로 공유하고 싶다CRDT라는 개념이 있으니 이쪽을 한 번 조사해서 활용해 봐달라채팅처럼 텍스트만 왔다 갔다 하는 수준이 아니라텍스트 인풋 값체크박스, 셀렉트 선택 상태진행 단계같은 것들을 두 화면에서 동시에 보고 싶다는 요구였다.여기에 현실적인 제약이 몇 가지 붙었다.네트워크 환경이 항상 좋지 않다브라우저 탭을 여러 개 띄울 수 있다재접속했을 때 상태를 자연스..