콘텐츠로 이동

D-SKET Webbuilder

노션에 글을 쓰면 그게 그대로 웹사이트가 된다면 어때요. D-SKET Webbuilder는 바로 그 일을 하는 No-code 웹빌더입니다. 노션 데이터베이스·페이지에 적은 내용이 즉시 사이트에 반영되고, 문서는 물론 한국에서 흔히 쓰는 HWP 문서까지 웹에서 변환·게시합니다.

노션에 적은 내용이 즉시 웹사이트로 — 한국 문서(HWP)까지 웹에서 다루는 웹빌더.

제품 개요

대부분의 웹빌더는 편집기 안에서 사이트를 짭니다. Webbuilder는 그 대신 이미 작성된 노션 문서를 소스 삼아 사이트를 만듭니다. 별도 CMS를 쓸 필요가 없죠. Notion API로 노션 데이터를 읽어와 템플릿에 꽂고, 사용자가 정한 도메인으로 게시합니다.

여기서 끝이 아니라 실시간·양방향 동기화가 핵심이에요. 노션에서 내용을 바꾸면 사이트에도 곧바로 반영되고, 구조 변화는 충돌 해결과 자동 재시도를 거쳐 안정적으로 따라갑니다. 그리고 이 제품의 가장 다른 점은 한국 문서 지원이에요. HWP 문서를 XML로 파싱해 웹 콘텐츠로 바꾸고, 템플릿에 바인딩해 동적 문서를 생성합니다.

핵심 스택

이 제품은 백엔드가 크게 두 계열로 나뉩니다.

  • 백엔드: Kotlin/Spring Boot + JPA, Spring Security. 문서·동기화 API는 NestJS/TypeScript + TypeORM으로 이어받습니다.
  • 프론트엔드: Next.js/React 위에 Tailwind CSS로 스타일을 잡고 TypeScript로 타입을 관리합니다. 노션 콘텐츠와 템플릿을 뿌리는 렌더링 역할을 하며, Three.js로 3D 요소가 어우러진 사이트도 만들 수 있어요.
  • 연동: Notion API + OAuth/JWT 인증, OpenFeign·OkHttp로 외부 API 호출, CQRS 패턴으로 조회와 명령을 분리합니다.
  • 저장·성능: MongoDB 캐시, Redis로 Rate Limit과 HTML 캐시, AWS S3에 콘텐츠·에셋을 저장합니다.
  • 수익·배포: Toss Webhook으로 결제(에스크로·정기결제)를 처리하고, SEO·Analytics·Form Builder·CRM 연동을 얹습니다. 멀티테넌트 구조에 스테이징·예약 발행을 제공해요.

기술 하이라이트

  • 실시간·양방향 동기화 (🟢 운영) — 노션 변경을 감지해 사이트에 반영하고, QoS를 지키기 위해 백그라운드 리프레시로 늦은 갱신을 따라잡아요.
  • 충돌 해결과 자동 재시도 (🟢 운영) — 동시 편집이 겹치면 어느 것을 살릴지 정하고, 실패한 동기화는 자동으로 재시도합니다.
  • HWP/HWPX 변환 (🟢 운영) — hwp.js·libhwp으로 하이브리드 파싱해 HWP 문서를 읽습니다. HWP/PDF를 웹으로 변환하고 템플릿 바인딩으로 동적 문서를 만드세요. Hancom 호환성을 지켜 표 구조 분석과 폰트·정렬·줄바꿈·레이아웃을 보존합니다.
  • 다양한 문서·이미지 처리 (🟢 운영) — OCR로 이미지 문서를 텍스트화하고, 멀티모달 문서 분석도 지원해요. 텍스트/이미지 PDF 생성은 Puppeteer, 프레젠테이션 생성은 pptxgenjs, 이미지 최적화는 Sharp.js(+ WebP)가 담당합니다. 자체 렌더링 엔진으로 정렬과 레이아웃을 잡고, K-생산성도구와 연동합니다.
  • 멀티테넌트·배포 (🟢 운영) — 고객사마다 독립 영역을 두고 도메인 등록대행사 API로 커스텀 도메인을 연결하며, 프록시 서버가 콘텐츠 호스팅을 중계합니다.
  • 보안·속도 (🟢 운영) — CSP로 스크립트 실행을 제한하고 응답 압축으로 페이지 전송량을 줄입니다.

동작 흐름 한눈에

Webbuilder가 한 요청을 처리하는 길을 짧게 따라가 보면 이렇게 이어져요.

  1. 사용자가 Notion OAuth로 노션을 연결합니다. 여기서 받은 토큰(JWT)으로 Notion API에 접근해요.
  2. Background Refresh가 노션의 변경을 주기적으로 확인하고, 바뀐 내용을 가져옵니다.
  3. 가져온 콘텐츠를 템플릿 렌더링으로 웹 HTML에 꽂아, MongoDB 캐시와 Redis HTML 캐시에 저장해요.
  4. 사용자가 발행하면 멀티테넌트 스테이징 영역에서 검토하고, 예약 발행 시점이면 프록시 서버를 통해 커스텀 도메인으로 게시됩니다.

한쪽의 업데이트가 다른 쪽과 겹치면 충돌 해결이 우선순위를 정하고, 실패한 동기화는 자동 재시도가 다시 시도해요. 이 순서만 잡아두면 "노션에 쓰면 사이트가 알아서 따라온다"는 경험이 거의 그대로 구현돼요.

사용 사례 / 실제 적용

  • 문서형 사이트: 노션 DB의 글을 그대로 블로그·공지로 게시하고, 수정 시 사이트까지 자동 반영합니다.
  • 한국 문서 웹화: HWP·HWPX·PDF 문서를 업로드하면 웹 페이지로 변환해 게시합니다. 폰트·표·레이아웃이 원본에 가깝게 남아요.
  • 커머스·결제 연동: 에스크로·정기결제를 Toss Webhook으로 붙여, 게시된 사이트에서 바로 결제 흐름을 태웁니다.

지금은 운영 중이라 이 기능들이 실제로 요청·발행·결제에 걸쳐 동작합니다. 새 기능이나 연동이 붙으면 updated와 함께 이 페이지를 갱신할게요.

더 알아보기