노현근Frontend Engineer · Seoul
13 · 사이드 프로젝트 · 프론트엔드·앱 개발

Rutsubo

일본 출판만화에 도전하는 창작자의 신청, 자료, 멘토 매칭, 세션 채팅을 하나로 연결한 회원제 멘토링 플랫폼입니다. 공개 사이트, 회원 인트라, 운영 콘솔, Electron 셸을 한 모노레포로 운영합니다.

기간2026.04 - 진행중
역할프론트엔드·앱 개발
소속사이드 프로젝트
분류Web · Desktop
스택
  • Next.js
  • React
  • TypeScript
  • Tailwind CSS
  • Supabase
  • PostgreSQL
  • RLS
  • Realtime
  • TipTap
  • ProseMirror
  • KaTeX
  • Recharts
  • Electron

배경

출판만화 멘토링은 콘텐츠 사이트보다 운영 판단이 많습니다. 회원 등급과 의뢰권, 신청 분류, 익명 멘토 배정, 세션 채팅, 등급별 자료 접근을 실제 운영 흐름에 맞게 연결하고자 했습니다.

문제

자동화할 상태 전이와 사람의 판단을 보존할 구간을 나누면서도, 회원·멘토·운영자가 자기 범위의 데이터만 보도록 안전한 권한 경계를 만들어야 했습니다. 공개 검색 요구와 회원 보안 요구가 다른 화면을 함께 운영하는 것도 주요 과제였습니다.

접근

  • 공개 Web·회원 Intra·Admin을 검색과 보안 요구에 맞게 분리
  • 멤버십·의뢰권 신청, 운영자 승인, 의뢰서, 멘토 배정, 세션 생성 흐름 구현
  • Supabase RLS와 Storage Policy를 실제 접근 제어 경계로 설계
  • TipTap JSON 기반 자료실에 표·코드·수식·차트·콜아웃·체크리스트 구현
  • 한국어·일본어·영어 URL, hreflang, canonical, JSON-LD, preview noindex 구성
  • 만화 말풍선·효과음·속도선·세로 일본어 primitive를 포함한 디자인 시스템 구축
  • service role key를 기기에 싣지 않고 운영 Web을 감싸는 얇은 Electron 셸 구현

성과

  • 회원 신청부터 멘토 배정·세션 채팅까지 운영 흐름을 하나의 권한 모델로 연결
  • server/client 공용 로직 경계와 production SSR 점검 규칙을 운영 장애에서 도출

돌아보며

결제와 매칭을 무조건 자동화하지 않고, 현재 운영 규모에서 사람의 판단을 보존하며 반복 상태 전이와 권한만 시스템화했습니다. 자료 상세 500 장애 후에는 공용 정규화 로직을 directive 없는 모듈로 분리하고 production build의 SSR 점검을 규칙화했습니다.

함께 일하기 좋은 구조와
오래 쓰이는 제품을 만듭니다.

제품과 팀의 문제를 함께 풀 기회가 있다면 편하게 연락 주세요.

© 2026 노현근Seoul, KR