Excalidraw

손으로 그린 듯한 다이어그램을 스케치하기 위한 가상 화이트보드 GitHub: https://github.com/excalidraw/excalidraw

---

개요

Excalidraw는 사용자가 독특한 손으로 그린 듯한 미학으로 다이어그램, 순서도, 와이어프레임 및 스케치를 만들 수 있는 무료 오픈 소스 가상 화이트보드 애플리케이션입니다. React 컴포넌트로 구축되어 npm 패키지로 게시되었으며, excalidraw.com에서 독립적으로 사용하거나 다른 애플리케이션에 직접 포함할 수 있습니다.

이 프로젝트는 처음에 Christopher Chedeau(vjeux)가 만들었으며, 이후 Google Cloud, Meta, CodeSandbox, Replit, Notion, Obsidian과 같은 회사에서 채택한 활발한 오픈 소스 커뮤니티로 성장했습니다.

---

핵심 기능

그리기 도구

• 기본 도형: 사각형, 원, 다이아몬드, 화살표, 선
• 자유 곡선 그리기 및 지우개
• 사용자 정의 글꼴(Excalifont)을 사용한 텍스트 도구
• 화살표 바인딩 및 레이블이 지정된 화살표
• 재사용 가능한 구성 요소를 위한 도형 라이브러리

캔버스 및 UI

• 줌 및 패닝 지원이 있는 무한 캔버스
• 다크 모드
• 실행 취소 / 다시 실행 기록
• 효율적인 워크플로우를 위한 키보드 단축키
• 사용자 정의 가능한 선 두께, 거칠기, 색상 및 채우기

협업 및 공유

• 공유 가능한 링크를 통한 실시간 멀티플레이어 협업
• 안전한 세션을 위한 종단 간 암호화
• 보기를 위한 읽기 전용 공유 가능한 링크
• PWA 지원 — 완전히 오프라인에서 작동
• 로컬 우선: 브라우저 저장소에 자동 저장

내보내기 및 통합

• PNG, SVG 및 클립보드로 내보내기
• .excalidraw JSON 형식으로 내보내기/가져오기 (열려 있고 사람이 읽을 수 있음)
• npm 패키지 @excalidraw/excalidraw를 통해 React 컴포넌트로 포함 가능
• Obsidian, VS Code 확장 프로그램, Notion 등과 같은 도구에 통합

현지화

• 여러 언어를 지원하는 완전한 i18n(국제화) 지원

---

기술 스택

계층	기술
프론트엔드	React, TypeScript
캔버스	HTML5 Canvas API
그리기	Rough.js (손으로 그린 렌더링)
글꼴	Excalifont (사용자 정의), Virgil (레거시)
패키지	npm에 @excalidraw/excalidraw로 게시
라이선스	MIT

---

사용 사례

• 시스템 아키텍처 다이어그램 — 기술 팀을 위한 비공식적이지만 표현력이 풍부한 스케치
• 와이어프레임 및 UI 목업 — Figma 이전의 빠른 로우파이 프로토타입
• 브레인스토밍 및 아이디어 구상 — 회의 또는 비동기식 시각적 사고
• 교육 및 프레젠테이션 — 손으로 그린 스타일은 콘텐츠를 쉽게 접근할 수 있도록 합니다.
• 문서화 — 위키, Notion 페이지 또는 README 파일에 라이브 다이어그램 포함

---

Excalidraw+ (프리미엄)

무료 오픈 소스 버전 외에도 팀은 다음과 같은 기능을 추가한 유료 클라우드 제품인 **Excalidraw+**를 제공합니다.

• 클라우드 스토리지 및 정리된 작업 공간
• 지속적인 협업 세션
• 캔버스 내 음성 채팅
• 프레젠테이션 모드(PPTX/PDF로 슬라이드 기반 내보내기)
• 권한 관리 및 게스트 공유
• 14일 무료 평가판 이용 가능

---

커뮤니티 및 채택

• 별: 90,000개 이상의 GitHub 별(가장 많은 별을 받은 화이트보드 도구 중 하나)
• 기여자: 800명 이상의 오픈 소스 기여자
• 사용처: Google Cloud, Meta, CodeSandbox, Obsidian, Replit, Slite, Notion, HackerRank
• 통합: VS Code 확장 프로그램, Obsidian 플러그인, Confluence 플러그인 등

---

시작하기

온라인 사용

https://excalidraw.com으로 이동하세요 — 가입이 필요 없습니다.

자체 호스팅 / 포함

npm install @excalidraw/excalidraw

import { Excalidraw } from "@excalidraw/excalidraw";

export default function App() {
  return <Excalidraw />;
}

로컬에서 실행

git clone https://github.com/excalidraw/excalidraw.git
cd excalidraw
npm install
npm start

---

요약

Excalidraw는 거친 가장자리와 유동적인 선으로 콘텐츠를 비공식적으로 유지하고 세련됨보다는 아이디어에 집중하게 하는 손으로 그린 듯한 미학을 의도적으로 수용함으로써 다이어그램 도구 중에서 두각을 나타냅니다. 제로 마찰 온보딩(로그인 불필요), 강력한 협업, 개방형 형식 및 React 라이브러리로 포함 가능한 기능의 조합은 전 세계 개발자, 디자이너 및 팀에게 최고의 선택이 됩니다.