Skip to content

D-SKET Canvas

회의에서 오간 이야기를 누가 정리하지 않아도, 마인드맵으로 떨어지는 상상을 해보세요. D-SKET Canvas는 화면 공유와 음성(STT)을 받아 대화를 구조화하고, 자연어로 다이어그램을 그려주는 AI 캔버스입니다.

회의 중 나눈 이야기가 마인드맵으로 — 화면 공유·STT로 대화를 구조화하는 AI 캔버스.

제품 개요

Canvas는 크게 두 가지 일을 해요. 하나는 말과 화면을 듣고 구조를 만드는 것, 다른 하나는 그 구조를 캔버스에 시각화하는 것입니다.

회의 음성을 STT로 텍스트화하고 LLM이 요점을 뽑아 "이건 큰 가지, 저건 잎" 식으로 정리해요. 자연어 명령만으로도 텍스트를 마인드맵이나 다이어그램으로 바꿉니다. 이렇게 만든 결과는 JSON Canvas(오픈 표준) 형식으로 저장되어, 다른 도구와도 주고받을 수 있어요.

핵심 스택

  • 백엔드: NestJS(TypeScript) + TypeORM + PostgreSQL. TypeORM으로 스키마를 관리하고 PostgreSQL에 데이터를 둡니다. Redis로 캐시, MinIO로 이미지·첨부를 저장해요.
  • AI 계층: 여러 LLM(Claude/OpenAI/Gemini)을 함께 쓰는 Multi-LLM 구조입니다. 스트리밍은 Vercel AI SDK v6의 SSE Streaming으로 내려줘요.
  • 프론트엔드: React + Vite, Zustand로 상태, Tailwind로 스타일, dnd-kit으로 드래그 시각화를 다룹니다. WebSocket으로 실시간 협업을, Three.js로 캔버스의 인터랙션·3D 렌더링을 처리해요.
  • 인프라: Kubernetes + Helm으로 배포하고 ArgoCD(GitOps)와 GitLab CI로 흐름을 자동화합니다. 앞단은 Kong과 Cloudflare가 받습니다.
  • 보안·배포 옵션: On-premise 배포, SSO, 감사로그, SLA를 제공하고, BYOK로 고객사 키를 가져올 수 있어요. 데이터 암호화는 AES-256-GCM을 씁니다.

기술 하이라이트

  • 자연어 → 다이어그램 (🟢 운영) — "이 내용을 마인드맵으로" 같은 명령 하나로 텍스트가 구조화된 그림으로 바뀝니다.
  • STT + LLM 음성 → 구조화 (🟢 운영) — 회의 음성을 받아 요점을 뽑아 마인드맵으로 만들고, 실시간·비동기 협업으로 함께 편집할 수 있어요.
  • 실시간 협업 (🟢 운영) — WebSocket으로 캔버스 상태를 참여자들 사이에 실시간 동기화해 함께 편집합니다.
  • JSON Canvas 저장 (🟢 운영) — 오픈 표준(Open Standard) 형식이라 캔버스 데이터를 다른 앱과 교환하기 쉽습니다.
  • Obsidian Plugin (🟢 운영) — Obsidian 워크스페이스에서 곧바로 캔버스를 만들고 불러옵니다.
  • 버전·코멘트·내보내기 (🟢 운영) — 변경 이력을 남기고 코멘트로 토론하며, PDF·SVG로 내보냅니다.
  • AI 에이전트 조합 (🟢 운영) — 다이어그램을 그리는 비주얼 에이전트와 회의를 정리하는 서기 에이전트가 함께 동작합니다.
  • 품질·접근성 (🔵 적용) — Playwright로 UI를 검증하고, Lighthouse로 성능을, 웹 접근성 기준을 함께 점검합니다. 라이브 데이터 파이프라인으로 실시간 데이터를 화면에 흘려보냅니다.

동작 흐름 한눈에

Canvas가 회의 한 번을 처리하는 길을 따라가 보면 이렇게 이어져요.

  1. 화면 공유가 켜진 상태에서 회의 음성이 STT로 텍스트화됩니다. 동시에 보이는 화면도 받아들여요.
  2. LLM이 텍스트를 읽고 요점을 뽑아 마인드맵 구조로 만듭니다(비주얼 에이전트 + 서기 에이전트).
  3. 구조는 JSON Canvas 형식으로 저장돼 캔버스에 그려지고, 참여자들이 WebSocket으로 실시간 함께 편집할 수 있어요.
  4. 정리한 결과는 PDF·SVG로 내보내거나, Obsidian 워크스페이스에 남겨 이후에도 다시 꺼내 봅니다.

Vercel AI SDK v6의 SSE Streaming 덕분에 LLM 답이 한꺼번에 오는 대신 조각조각 흘러들어와요. 회의가 끝날 즈음엔 이미 정리된 마인드맵이 화면에 서 있을 정도로 빠르게 반영됩니다. 다중 테넌트 격리와 BYOK·AES-256-GCM 암호화는 별도로 적용돼요.

사용 사례 / 실제 적용

  • 회의 정리: 화면 공유를 켜고 대화하면, Canvas가 마인드맵으로 정리해서 회의록 겸 브레인스토밍 보드가 됩니다.
  • 아이디어 구조화: 자연어로 "발표 구성도를 그려줘" 하면 즉시 다이어그램이 생겨요.
  • Obsidian 워크플로우: 노트를 Obsidian에 두고 Canvas 플러그인으로 시각화, JSON Canvas로 이어받습니다.

운영 중인 제품이라 이 흐름이 실제 서비스에서 함께 돌아갑니다. 협업·버전 기능이 붙으면 이 페이지를 계속 갱신할게요.

더 알아보기