4momentary: 일회용 실시간 통신 프로토콜 및 3D 스페이스 릴레이

데이터베이스가 필요 없는 무마찰 일회용 채팅 프로토콜. 흑백 브루탈리즘 미학, 3D 좌표 공간 텔레메트리, BYOK AI 컴패니언을 결합.

라이브 데모 • [비공개 저장소]

---

프로젝트 개요

• 역할: 단독 개발자 및 리드 풀스택 아키텍트 (처음부터 100% 독자 개발)
• 라이브 데모: 4momentary.vercel.app
• 저장소: 비공개 저장소
• 기술 스택: Next.js 16 (App Router, Turbopack), React 19, TypeScript, Tailwind CSS v4, Lucide React, Upstash Redis, PeerJS (WebRTC), DeepSeek AI API, Web Audio API, Canvas API
• 핵심 성과: 1초 미만의 일회용 채팅방 생성 속도, 영구 추적 0건, 사용자 계정 0개, 데이터베이스 메시지 저장 0건, 룸 만료 시점(T)에 완전한 데이터 파기를 보장.
• 요약: 4momentary는 Next.js 16, React 19, Tailwind CSS v4로 제작된 브루탈리즘 스타일의 무마찰 일회용 통신 프로토콜입니다. 룸 만료 시점(T)에 모든 데이터가 소멸한다는 수학적 설계를 바탕으로 일회용 멀티채널 로비, 브라우저 캔버스 기반 1MB 이미지 공유, WebRTC P2P 릴레이, 인터랙티브 3D 공간 레이더 지도, 그리고 페르소나 지침과 웹 도구를 갖춘 클라이언트 측 BYOK AI 컴패니언(The Moth)을 제공합니다.

---

수학적 기초 및 제품 철학

시스템 전체의 아키텍처는 다음과 같은 엄밀한 수학 공식으로 정의됩니다:

4momentary(T) = ∫₀ᵀ ( peers ⊕ messages ) dt − accounts − archive − tracking

room'(t) = peers(t) ⊕ messages(t)   [0 ≤ t < T]

lim (t → T⁻) room(t) = ∅

핵심 용어 정의:

• room (룸): 이름과 공식 카운트다운 시계를 갖춘 독립 공간. 추가 설정 불필요.
• channel (채널): 룸 내부의 무제한 하위 스트림으로, 각 채널마다 독립된 대화 기록을 유지.
• category (카테고리): 채널 이름을 변경하지 않고 독립적으로 구성되는 논리적 폴더 그룹.
• link (링크): 단 하나의 깔끔한 URL. 초대 수락, 회원가입, 앱 설치 불필요.
• timer (타이머): 30분부터 24시간까지 서버 공인 카운트다운. 호스트는 언제든 조기 종료 가능.
• ⊕ (추가): 도착하는 즉시 실시간으로 추가되는 참여자 및 메시지.
• − accounts (계정 제외): 가입자도 로그인도 없음.
• − archive (아카이브 제외): T 이후에는 어떤 메시지나 첨부파일도 남지 않음.
• − tracking (추적 제외): 쿠키, 애널리틱스, 사용자 프로파일링, 광고 픽셀 없음.
• T (만료 시점): 룸과 할당된 모든 메모리가 완전히 소멸하는 불변의 타임스탬프.
• ∅ (공집합/소멸): 단순한 '소프트 삭제'가 아니라, 물리적으로 삭제할 데이터조차 남지 않는 상태.

---

해결하고자 한 문제와 전략적 기회

• 감시와 영구 아카이브의 부담: 현대 메신저(Discord, Slack, Telegram, WhatsApp)는 대화 내용, 첨부파일, 소셜 그래프, 행동 로그를 클라우드에 영구 저장합니다. 짧은 임시 회의조차 영구적인 디지털 흔적을 남깁니다.
• 온보딩 마찰: 스탠드업, 장애 대응, 디자인 검토, 인터뷰, 게임 전력 회의용 임시 공간을 만들 때도 회원가입과 앱 설치가 강제됩니다.
• 비대해진 인터페이스: 기존 툴들은 화면 가득 알림 배지와 화려한 장식으로 대화의 집중을 방해합니다.
• 우리의 기회: 흑백 브루탈리즘 미학, 1클릭 룸 생성, 완전한 비영구성 프라이버시 보장, 경량 AI 지원을 통합한 군더더기 없는 도구를 구축하는 것.

---

아키텍처 및 기술적 의사결정

1. 인메모리 엣지 릴레이 및 Redis TTL 자동 소멸

• 제로 데이터베이스 코어: 룸의 라이프사이클은 서버의 휘발성 인메모리(/api/room/[roomId])에서 완전히 동작합니다.
• Redis TTL 안전장치: Upstash Redis 사용 시, 남은 시간과 일치하는 엄격한 TTL이 부여됩니다. 카운트가 0이 되면 Redis가 수동 가비지 컬렉션 없이 키를 즉시 자동 제거합니다.
• 서버 권한의 시간 동기화: 만료 시점(expiresAt)은 서버에서 엄격히 검증됩니다. 만료 후에는 API가 즉시 HTTP 403을 반환하여 추가 메시지 전송을 차단합니다.

2. 직접 WebRTC P2P 메시 네트워크

• P2P 직접 데이터 채널: 동일 룸 내의 브라우저는 PeerJS와 공개 STUN 서버를 통해 직접 WebRTC 연결을 수립하여 극도로 낮은 레이턴시를 구현합니다.
• 원활한 폴백: 기업 방화벽이나 대칭형 NAT로 P2P 연결이 차단될 경우, 클라이언트는 서버 인메모리 릴레이로 매끄럽게 전환됩니다.
• 멀티 탭 BroadcastChannel: 동일 기기에서 열린 여러 탭은 BroadcastChannel API를 통해 네트워크 대역폭 낭비 없이 실시간 동기화됩니다.

3. 멀티채널 및 카테고리 계층 구조

• 스키마 오버헤드 제로: 채널은 별도 DB 테이블 없이 메시지에 부착되는 메타데이터 태그(Message.channelId)로 가볍게 처리됩니다.
• 접을 수 있는 카테고리: 채널을 폴더(Message.categoryId)로 그룹화하여 백엔드 설정 없이 Discord 스타일의 정돈된 구조를 제공합니다.
• 채널 격리: 대화 목록, 멘션, 검색은 선택된 채널로 제한되며, 전체 시스템 공지만 모든 채널에 공통 노출됩니다.

4. 3D 공간 레이더 지도 및 텔레메트리

• 3차원 가상 좌표 매핑: 모든 룸은 고유한 가상 3D 공간 좌표 (X, Y, Z)를 부여받습니다.
• 인터랙티브 3D 레이더: 사용자는 3축 궤도 레이더에서 궤도 회전, 이동, 줌, 좌표 워프를 통해 활성화된 룸을 자유롭게 탐색할 수 있습니다.
• 디더링 나비 사용자 무리: 접속 중인 유저는 공간을 유영하는 애니메이션 나비 군집으로 시각화되어 실시간 활성도를 직관적으로 보여줍니다.

5. 클라이언트 측 1MB 미디어 파이프라인 & Beehive 색상 선택기

• Canvas 인브라우저 압축: 클립보드(Ctrl+V)나 파일 선택으로 입력된 이미지는 HTML5 Canvas를 통해 자동으로 다운샘플링되어 1MB 용량 제한을 엄격히 준수합니다.
• 일회용 미디어: 전송 전 썸네일 검토, 브루탈리즘 풀스크린 라이트박스 뷰어를 지원하며 룸 만료 시 복구 불가능하게 소멸합니다.
• 39셀 Beehive 벌집형 팔레트: 맞물린 SVG 육각형 디자인으로 배경 밝기에 맞춰 텍스트 대비(isLightColor)를 자동으로 계산합니다.

6. The Moth: BYOK AI 컴패니언 및 디렉티브 마켓플레이스

• 개인 키 사용 (BYOK): 사용자의 DeepSeek API 키로 구동되며, 키는 브라우저 sessionStorage에만 저장되고 서버나 대화록에는 절대 남지 않습니다.
• 디렉티브 마켓플레이스: 도타 코치(Dotabuff/Dotafury 패치 분석 문법 내장), 스포츠 애널리스트, 수리과학, 리서치, 비즈니스 등 맞춤형 지침을 탑재.
• 안전한 웹 검색 도구: DuckDuckGo 검색 및 서버 경유 웹페이지 읽기를 지원하며, 메모리 캐싱 및 개인 식별자 마스킹을 적용.
• 다른 룸 하위 컴패니언 파견: 여러 룸에 동시에 어시스턴트를 배치(deploy_companion)할 수 있습니다.

7. 브루탈리즘 멀티 테마 엔진

• 5가지 건축학적 테마:
  • 4momentary (Noir): 흑요석 단색 블랙 (#000000 배경, 순백색 외곽선).
  • Stark White: 고대비 종이 질감 브루탈리즘 (#ffffff 배경, 짙은 검은색 실선).
  • Terminal Phosphor: 레트로 CRT 녹색 인광 (#050a05 배경, 네온 그린 폰트).
  • Newsprint: 신문 용지와 목탄 잉크 감성 (#f4efe6 배경, #141311 텍스트).
  • Industrial: 청사진 도면 스타일의 시안과 슬레이트 (#091018 배경, #00e5ff 포인트).
• 모바일 퍼스트: 100dvh로 고정된 뷰포트로 가로 스크롤을 방지하고 Web Audio API를 활용한 간결한 햅틱 사운드를 제공.

---

핵심 지표 및 시스템 스펙

---

프라이버시, 보안 및 법적 보장

1. 절대 수집하지 않는 항목: 이메일 주소, 전화번호, 개인 비밀번호, 분석용 트래킹 픽셀, IP와 대화록을 연결하는 영구 접속 로그.
2. 브라우저에 보관되는 항목: 표시 닉네임, Beehive 색상, 테마 설정은 localStorage에 저장됩니다. DeepSeek API 키와 비공개 룸 토큰은 sessionStorage에만 보관되며 탭을 닫으면 즉시 파기됩니다.
3. 릴레이가 실시간으로 보관하는 항목: 현재 참여자 명단(25초 주기 하트비트), 룸 토픽, 3D 좌표, 전송 중인 메시지 패킷.
4. 확실한 소멸 보장: 타임스탬프 T에 도달하는 즉시 모든 메모리가 반환됩니다. 만료된 룸 접근 시 HTTP 404가 반환되어 추가 읽기나 작성이 원천 봉쇄됩니다.

---

프로젝트 회고 및 향후 과제

• 학습한 교훈: 영구 데이터베이스 없이 다중 탭 및 기기 간 실시간 동기화를 구축하기 위해 BroadcastChannel과 인메모리 TTL 맵의 결합이 매우 효과적이었습니다.
• WebRTC 안정성: PeerJS 데이터 채널과 엣지 라우트 간의 유연한 자동 폴백 구조가 사내 폐쇄망 환경의 사용자에게 필수적이었습니다.
• 향후 계획: Web Crypto를 사용한 세션별 종단간 암호화 서명 도입 및 3D 공간 지도에 다차원 클러스터링 알고리즘을 추가할 예정입니다.

---

기여한 부분

• 프로토콜 및 백엔드 설계: 인메모리 룸 스토어, Redis TTL 소멸 로직, 서버 주도형 카운트다운 동기화, Edge API 릴레이 라우트 구현.
• 프론트엔드 및 UI/UX 디자인: 흑백 브루탈리즘 비주얼, 5가지 테마 팔레트, 100dvh 모바일 레이아웃, 39셀 Beehive 색상 선택기 개발.
• 3D 텔레메트리 및 공간 맵: 3차원 좌표 투영, 궤도 카메라 제어 및 나비 파티클 무리 연출.
• AI 컴패니언 및 툴링: BYOK DeepSeek 컴패니언(The Moth), 지침 마켓플레이스, 도타 패치 구문 분석 및 웹 검색 도구 구현.
• 품질 관리 및 검증: Next.js 16 / React 19 빌드 에러 0건, ESLint 경고 0건, Impeccable 품질 규격 완벽 준수.

---

실시간 배포 및 저장소

• 라이브 배포: Vercel에서 프로덕션 배포 중: 4momentary.vercel.app。
• 저장소 접근: 비공개 저장소 (처음부터 끝까지 100% 독자 구축된 독립 IP).