GeekNews BeeBS
정보

BeeBS의 기술 스택 이야기

구루 조회 1095 댓글 8

BeeBS는 게시판을 다시 구현하면서, 요즘 웹에서 기대하는 편집·검색·공유·모바일 경험을 더해보려는 프로젝트입니다.

현재 BeeBS가 어떤 기술로 구성되어 있고, 왜 그런 선택을 했는지 가볍게 소개합니다.

한눈에 보는 기술 스택

  • 언어: TypeScript
  • 프론트엔드: React + Vite
  • 서버: Node.js + Hono
  • 에디터: Tiptap 기반 WYSIWYG, Markdown 저장
  • 데이터베이스: PostgreSQL + Drizzle ORM
  • 테스트: TypeScript 검사, 프로덕션 빌드, Playwright E2E
  • 배포: Docker, Nginx, CloudFront

프론트와 서버를 모두 TypeScript로 작성해서 게시판 기능, API 응답, 에디터 데이터 구조를 한 언어 안에서 일관되게 관리합니다.

특별한 이유라기보다는 현재 구현 목적에 가장 잘 맞는 언어+에코시스템이라고 판단했습니다.

React와 Hono

React는 목록·글 상세·에디터·팝업처럼 상태 변화가 많은 화면을 담당하고, Hono 서버는 API뿐 아니라 검색엔진과 링크 공유에 필요한 SSR HTML도 만듭니다.

SEO 고려 때문에 직접 주소로 들어오면 서버가 제목, 설명, Open Graph, 구조화 데이터를 포함한 HTML을 먼저 보내고, 이후 React가 댓글·반응·로그인 상태 같은 상호작용을 이어받습니다.

Node 서버 하나가 API, SSR, 빌드된 정적 파일을 함께 제공하므로 초기 운영 구조를 작게 유지할 수 있는 것도 장점입니다.

글은 Markdown, 편집은 WYSIWYG

화면에서는 Tiptap 에디터로 편하게 작성하지만 DB에는 Markdown 텍스트를 저장합니다.

이 방식은 다음 두 가지를 함께 얻기 위한 선택입니다.

  1. 사용자는 Markdown 문법을 몰라도 보이는 그대로 편집할 수 있습니다.
  2. 데이터는 특정 에디터의 복잡한 내부 JSON에 강하게 묶이지 않습니다.

코드 블록, 이미지 URL, 외부 임베드, Hex처럼 BeeBS에 필요한 요소는 Markdown 의 확장 기능 및 자체 확장을 통해 처리합니다.

작은 서버에서도 버티는 구조

BeeBS는 처음부터 큰 서버를 전제로 하지 않습니다. 공개 목록, 글, Hex 상세 페이지는 개인화 정보를 분리해 CDN과 ETag로 캐시할 수 있게 만들었습니다.

반면 로그인 세션, 내 반응 여부, 관리자 API 같은 데이터는 no-store 경로로 분리합니다. 캐시를 강제로 전부 지우는 운영 대신 짧은 TTL, stale-while-revalidate, 파일명 해시로 자연스럽게 갱신합니다.

목록과 관리자 데이터는 한꺼번에 전부 읽지 않고 페이지네이션과 추가 로딩을 기본으로 적용합니다.

인증과 안전장치

가입과 로그인은 이메일 매직링크와 GeekNews 계정 연동을 지원합니다.

가입 후에는 패스키를 등록해 이메일 링크 없이 로그인할 수 있습니다. BeeBS는 사용자 비밀번호를 직접 받거나 저장하지 않습니다.

설계 원칙

BeeBS의 기술 선택은 작게 시작하고, 공개 읽기는 빠르게, 개인 데이터는 분리하고, 수정 이력과 대화의 맥락을 보존하는 것에 맞춰져 있습니다.

아직 계속 다듬는 중입니다. 사용하면서 느린 화면, 어색한 흐름, 이해하기 어려운 기능이 있다면 글이나 댓글로 남겨주세요.

빠르게 개선해 보겠습니다.

댓글

  1. kecan0406

    웹사이트가 전체적으로 빠릿빠릿하게 느껴지는게 정말 좋네요

  2. 홍민희

    저도 Hono와 Drizzle ORM 조합을 좋아하는데, 반갑습니다. Fedify 사용하면 ActivityPub도 쉽게 붙일 수 있을 것 같은데, 한 번 고려해 주시면 좋을 것 같습니다!

  3. 구루

    앗 네 ㅎㅎ 근데 현재는 작은 서버 운영을 목표로 CDN 캐시 중심으로 설계하고 있어서, 발송을 수반하는 외부 통신은 현재 조금 부담이 있습니다. 운영 여력을 보면서 Fedify 도입도 고려해 보겠습니다. 좋은 제안 감사합니다!

  4. tenshi

    가입/로그인 경험부터 세심하게 설계되었다는 게 느껴지네요. 정말 빠릿빠릿한게 좋군요!

  5. channprj

    멋집니다!! 아마 의도하신 기능일 것 같지만 활동명(닉네임?)이 나중에 수정이 가능하면 더 좋을 것 같습니다. 빠르게 가입하고 나중에 수정하려고 보니 안 되네요. ㅠㅠ

  6. 구루

    아 기본적으로 수정은 불가능하게 해두었는데요. 고민해보겠습니다

  7. 구루

    활동명 변경 기능 추가해 두었습니다. /me 에서 확인 가능합니다.

  8. kecan0406

    GeekNews 팀의 개발이야기도 궁금합니다~ 좋은 서비스를 만드는 노하우가 궁금하군요 ㅎㅎ..