피드로 돌아가기
무료 SQL→ER 다이어그램 도구, 브라우저에서 실행되고 아무것도 업로드하지 않음
GeekNewsGeekNews
Frontend

무료 SQL→ER 다이어그램 도구, 브라우저에서 실행되고 아무것도 업로드하지 않음

Client-side SQL 파싱 및 뷰포트 컬링을 통한 제로 서버 ERD 시각화

neo2026년 6월 15일7intermediate

Context

기존 ERD 도구들의 필수 계정 생성 및 서버 업로드 방식에 따른 데이터 보안 우려 존재. 대규모 스키마 렌더링 시 DOM/SVG 부하로 인한 브라우저 성능 저하가 주요 병목 지점으로 작용.

Technical Solution

  • Serverless 및 Backend-less 아키텍처 설계를 통한 데이터 로컬 처리 및 프라이버시 보장
  • DOM/SVG 대신 캐시된 비트맵 래스터화 및 Viewport Culling 적용을 통한 수백 개 테이블의 부드러운 렌더링 구현
  • 모든 토큰의 소스 범위를 추적하는 SQL Parser 설계를 통해 주석 및 포맷을 유지하는 정밀한 식별자 변경 로직 구현
  • 스키마 데이터를 URL 내에 직접 직렬화(Serialization)하여 별도 저장소 없이 다이어그램 공유 기능 구현
  • WASM 도입 시 JS↔WASM 경계 비용 발생으로 인한 성능 저하 분석 후 순수 JavaScript 기반 최적화 선택
  • 프레임워크를 배제한 경량 설계를 통해 gzip 기준 약 32KB의 최소 파일 크기 달성

1. 대량의 그래픽 요소 렌더링 시 DOM 직접 조작 대신 비트맵 래스터화 및 뷰포트 컬링 검토

2. WASM 도입 전 JS-WASM 인터페이스의 오버헤드가 실제 계산 이득보다 큰지 벤치마크 수행

3. 데이터 보안이 중요한 도구 설계 시 Client-side Processing 및 URL 기반 상태 공유 패턴 적용

원문 읽기