제29회: 게시판을 보면서 채팅할 수 있다! 동적 탭 UI와 멀티태스킹 경험 구축

안녕하세요! 2채널 호환 게시판 시스템 "츠우바이채널(つゔぁいちゃんねる, 2ch.biz)" 개발 기록의 제29회입니다.

지난번(제28회)에서는 중앙 서버에 로그를 전혀 남기지 않는 WebRTC DataChannel을 이용한 완전 암호화 P2P 채팅의 핵심 프로토타입을 구축했습니다.

하지만, 초기 프로토타입을 게시판 모달(팝업)로 통합하는 과정에서 헤비 유저들로부터 절실한 과제가 제기되었습니다.

"스레드의 긴 글이나 토론을 차분히 읽으면서 동시에 채팅으로 활발하게 실시간 중계를 하고 싶다!"

"게시판 내에서 페이지를 이동하면 채팅 연결이 끊겨버리고, 작은 모달로는 장문이나 파일 목록을 보기 어렵다!"

그래서 이번에 저희는 '서버 상에 정적인 chat.html을 전혀 두지 않고, 브라우저 메모리 위에서 동적으로 별도의 탭을 생성하여 풀스크린 P2P 채팅을 전개하는(Dynamic Tab Launcher)' 매우 독특하고 안전한 설계를 구현했습니다.

본고에서는 이 동적 탭 생성 메커니즘부터 IRC 같은 드래그 리사이즈 스플리터, 멀티 탭 병렬 구동의 실현까지 자세히 설명합니다.

SPA(Single Page Application) 화면 내에 채팅을 임베드하는 접근 방식은 언뜻 보기에는 쉬워 보이지만, 게시판처럼 '텍스트를 깊이 읽는' 미디어와는 궁합이 좋지 않았습니다.

• 화면 점유율의 충돌: 모달을 열면 스레드의 절반 이상이 가려져서, 글을 보면서 대화하는 것이 불가능했습니다.

• 연결 끊김 위험: 사용자가 실수로 새로고침하거나 브라우저의 '뒤로' 버튼을 누르는 순간 WebRTC 피어 연결이 끊겨지고, 채팅방에서 퇴실 처리되었습니다.

• 작업 효율성 저하: 여러 스레드나 여러 채팅방(실시간 중계방, 잡담방 등)을 동시에 오가고 싶은 파워 유저에게 1화면 1컨텍스트의 제약은 큰 스트레스였습니다.

이러한 문제들을 한 번에 해결한 것이 '별도 탭(또는 별도 창)에서의 완전 병행 동작' 이었습니다.

별도의 탭에서 채팅을 여는 가장 단순한 방법은 서버 상에 chat.html을 배치하고 <a href="/chat.html" target="_blank">로 링크하는 것입니다. 하지만 저희는 이 접근 방식을 의도적으로 거부했습니다.

서버 상에 chat.html이라는 엔드포인트가 존재하지 않기 때문에, 공격자가 URL을 직접 쳐서 스크래핑하거나 봇으로 침투하는 것은 물리적으로 불가능합니다.

게시판 헤더의 '🔒💬 P2P 채팅' 버튼을 클릭하는 순간, 메인 스레드의 JavaScript가 새로운 브라우저 컨텍스트를 생성하고, 그 문서에 직접 채팅 애플리케이션을 전개합니다.

/**
* 서버리스 동적 탭 구동 로직
*/
...

풀스크린의 독립된 탭이 되면서, 화면을 최대한 활용한 본격적인 데스크톱 UI 구축이 가능해졌습니다.

채팅 로그 표시 폭과 오른쪽 참여자 목록(닉네임 리스트)의 폭을 사용자가 마우스 드래그로 밀리미터 단위로 자유롭게 조정할 수 있게 했습니다.

/**
* 사이드바의 드래그 리사이즈 제어
*/
...

1줄짜리 <input>이었던 메시지 입력을 <textarea>로 개선하여, 장문이나 코드 붙여넣기에도 대응할 수 있게 했습니다. 오른쪽 하단의 리사이즈 핸들을 당겨서 높이를 자유롭게 변경할 수 있도록 했습니다.

// 입력 키보드 제어
textarea.addEventListener('keydown', (e) => {
// IME 변환 중에는 전송하지 않음
... 

동적 탭 생성의 최대 장점은 **'몇 개든 탭을 열고, 여러 방에 동시에 병행 참여할 수 있다'**는 점입니다.

탭 A: '뉴스 속보 실황방'에서 속보 뉴스 토론에 참여 (호스트) -
탭 B: 'VIP 잡담방'에서 편안하게 잡담하기 (일반 참가자) -
메인 탭: 게시판에서 평소처럼 스레드 생성 및 댓글 작성

각각의 탭은 독립적인 RTCPeerConnection과 메모리 공간을 가지므로, 서로의 통신이 간섭하는 일은 전혀 없습니다.

또한, 방 초대 URL(#p2p-room=...)을 클릭할 때도 기존 게시판 화면을 리디렉션하지 않고 자동으로 별도의 탭에서 원활하게 입실이 완료됩니다.

서버에 정적 파일을 두지 않는 '동적 탭 생성 방식'을 통해 다음과 같은 성과를 달성했습니다:

• 물리적인 접근 제한: 게시판 도메인 외부에서의 부정한 직접 실행을 완벽히 차단.
• 궁극의 멀티태스킹 경험: 게시판 스레드를 여유롭게 열람/작성하는 동시에, 백그라운드에서 풀스크린 P2P 채팅이 상시 구동.
• 고밀도의 조작성: 드래그 리사이즈 가능한 사이드바, 여러 줄 텍스트 영역(textarea), 다크 모드 완벽 연동.

하지만 P2P 채팅 사용자가 늘어남에 따라 새로운 보안 위협이 다가왔습니다.

그것은 바로, 시그널링 서버로의 연결 남발 및 DoS 공격입니다.

아무리 P2P 본체가 서버리스(serverless)라 할지라도, 최초 방 매칭(시그널링 API)을 공격당해 서버가 다운되면 게시판 본체까지 피해를 입게 됩니다.

실제 서비스: https://2ch.biz/