안녕하세요! 2채널 호환 게시판 시스템인 "つゔぁいちゃんねる (2ch.biz)"의 개발 기록 제46회입니다.
지난번(제45회)에서는 데이터베이스에 레코드를 전혀 저장하지 않으면서도, HMAC 서명과 난독화 패킹을 통해 완벽한 보안을 실현하는 "암호화 자립형 스테이트리스 ID"를 완성했습니다.
백엔드의 암호 공학은 예술적인 수준에 도달했습니다. 하지만 아무리 뛰어난 아키텍처라 할지라도, **'일반 사용자가 헤매지 않고 직관적으로 사용할 수 있는 UI'**가 동반되지 않으면 그저 자기만족으로 끝날 뿐입니다.
"비밀번호를 설정한 후, 어떻게 친구들에게 방의 URL을 알려줘야 할까?"
"방에 들어가기 전에, 먼저 게시판 스레드에 초대 링크를 붙여 멤버들을 모으고 싶어!"
본고에서는 고도화된 암호 토큰을 사용자에게 전혀 의식시키지 않고, 버튼을 톡 누르는 것만으로 비밀 기지가 완성되는 '룸 ID 자동 발급 UI' 구축 기록을 전해드립니다!
채팅방을 만들 때의 사용자 심리를 관찰해보니, 개발자가 예상했던 흐름과는 약간의 차이가 있다는 것을 알게 되었습니다.
【개발자가 예상한 동선】
1. 방을 생성하고 입장한다
2. 채팅 화면이 열린다
...
하지만 실제 게시판 거주자들의 현실적인 행동 패턴은 다음과 같았습니다.
【실제 사용자의 행동 동선】
1. 스레드 작성 화면이나 댓글 작성 화면을 보고 있다
2. "지금 여기서 이야기하자"고 초대하기 위해, 방에 들어가기 전에 【초대 URL만 먼저 얻고 싶다】!
...
'방에 들어가지 않으면 URL을 얻을 수 없다'는 사양은 사용자에게 불필요한 탭 이동 스트레스를 강요하는 것이었습니다.
그래서 저희는 방 생성 폼 안에 '🎲 룸 ID를 생성' 버튼과, 발급된 ID를 그 자리에서 확인하고 복사할 수 있는 미리보기 카드(preview card)를 신설했습니다.
생성 폼의 비밀번호 입력란 바로 아래에 ID 생성 버튼과 미리보기 영역을 배치했습니다.
<!-- 룸 생성 폼 내부 -->
<div class="form-group">
<label>참가 정책</label>
...
모던 브라우저의 navigator.clipboard.writeText를 활용하는 동시에, 권한 오류 시 폴백(fallback)(execCommand)과 토스트 표시 기능을 구현했습니다.
// '🎲 룸 ID를 생성' 버튼의 클릭 핸들러
document.getElementById('p2p-gen-room-id-btn').addEventListener('click', async () => {
const policy = getSelectedPolicy();
...
/* 룸 ID 생성 미리보기 박스 */
.p2p-gen-id-box {
margin: 12px 0;
...
종합 테스트 스크립트를 실행하여 다음 완전한 플로우를 테스트했습니다.
-
비밀번호 설정 ➔ ID 생성:
policy="password", passcode="vip123"으로 생성 API를 호출. - room_p08e200775f (16자 난독화 ID)가 순식간에 반환되는 것을 확인.
-
사전 생성된 ID로 호스트 입장:- 생성된 ID를 사용하여 그대로 입장하며, 자신이 호스트가 되는 것을 확인.
-
미생성 시 폴백:- '🎲 룸 ID를 생성'을 누르지 않고 바로 '🚀 생성'을 눌렀을 경우에도, 내부적으로 자동 발급되어 끊김 없이 입장이 가능한 것을 확인.
암호화 스테이트리스 ID라는 고도한 백엔드 메커니즘 위에, 원클릭으로 ID를 발급하고 초대 URL을 복사할 수 있는 최고의 UI를 덧씌웠습니다.
이를 통해 사용자는 수학이나 암호의 어려움을 1mm도 의식하지 않고 안전한 P2P 채팅을 자유자재로 사용할 수 있게 되었습니다.
하지만 방이 생기고 사람이 모여들면, 다음으로 원하는 것은 **'방 이름(토픽)'**입니다.
"암호화된 ID(room_p08e200...)만으로는 어떤 방인지 알기 어렵다"
"'실황방'이나 '잡담' 같은 방 이름을 실시간으로 동기화하고, 브라우저를 리로드해도 자신의 단말기에 방 이름과 로그를 저장해 두고 싶다!"
본 서비스: https://2ch.biz/
