Excalidraw – 손그림 스타일 화이트보드 & 다이어그램 도구 Docker 설치 가이드

작성자:


개요

Excalidraw는 손으로 그린 듯한 스타일의 다이어그램을 만들 수 있는 오픈소스 가상 화이트보드 도구입니다. 브라우저에서 바로 실행되며, 별도의 계정 생성이나 로그인 없이 즉시 사용할 수 있습니다. 직관적인 UI와 빠른 속도로 아이디어 스케치, 아키텍처 다이어그램, 플로우차트 등을 손쉽게 만들 수 있어 개발자와 디자이너에게 큰 인기를 얻고 있습니다.

GitHub: https://github.com/excalidraw/excalidraw
공식 사이트: https://excalidraw.com
GitHub Stars: 95,000+
라이선스: MIT

Excalidraw란?

Excalidraw는 “생각의 속도로 스케치하기”를 목표로 하는 화이트보드 도구입니다. 깔끔한 벡터 다이어그램 대신 손으로 그린 듯한 스타일을 제공하여, 완성된 결과물보다 아이디어 전달에 집중할 수 있게 해줍니다.

핵심 컨셉

  • Hand-drawn Style: 손그림 느낌의 친근한 다이어그램
  • Zero Friction: 로그인/가입 없이 바로 사용
  • Privacy First: 모든 데이터는 브라우저에 저장 (서버 전송 없음)
  • Real-time Collaboration: 링크 공유로 실시간 협업

주요 특징

1. 직관적인 UI

  • 학습 곡선 거의 없음, 바로 사용 가능
  • 깔끔한 미니멀 인터페이스
  • 키보드 단축키 지원 (빠른 작업)

2. 손그림 스타일 다이어그램

  • 독특한 Hand-drawn 느낌
  • 브레인스토밍, 아이디어 스케치에 최적
  • 완벽함보다 아이디어 전달에 집중

3. 다양한 도형 및 도구

  • 기본 도형 (사각형, 원, 삼각형, 다이아몬드)
  • 화살표 및 연결선
  • 자유 그리기 (펜 도구)
  • 텍스트 입력
  • 이미지 삽입

4. 실시간 협업

  • 링크 공유로 즉시 협업 시작
  • End-to-End 암호화
  • 동시 편집 지원

5. 다양한 내보내기 형식

  • PNG (배경 포함/제외)
  • SVG (벡터 형식)
  • Excalidraw JSON (재편집 가능)
  • 클립보드 복사

6. 라이브러리 시스템

  • 커뮤니티 라이브러리 (아이콘, 템플릿)
  • 자주 쓰는 요소 저장
  • 라이브러리 공유 가능

7. 프라이버시 중심

  • 브라우저 로컬 스토리지 사용
  • 서버에 데이터 전송 없음
  • 셀프 호스팅 시 추적 코드 없음

유사 도구 비교

항목ExcalidrawDraw.ioMiroFigJam
스타일손그림 (Hand-drawn)정형화된 다이어그램다양한 스타일플레이풀
가격무료 (Plus $6/월)무료프리미엄 ($8~/월)프리미엄
셀프 호스팅✅ 가능✅ 가능❌❌
협업✅ 실시간✅ (제한적)✅ 강력✅ 강력
로그인 필요❌ 불필요❌ 불필요✅ 필요✅ 필요
오프라인✅ 지원✅ 지원❌❌
학습 곡선매우 낮음낮음중간낮음
주요 용도스케치, 브레인스토밍기술 다이어그램워크샵, 협업디자인 협업
통합제한적Atlassian, Google150+ 앱Figma

언제 Excalidraw를 선택할까?

Excalidraw가 적합한 경우:

  • 빠르게 아이디어를 스케치하고 싶을 때
  • 손그림 스타일의 친근한 다이어그램이 필요할 때
  • 로그인/가입 없이 바로 시작하고 싶을 때
  • 프라이버시가 중요할 때
  • 개발자/엔지니어가 아키텍처를 빠르게 그릴 때

다른 도구가 적합한 경우:

  • 정형화된 기술 다이어그램 → Draw.io
  • 대규모 팀 워크샵 및 협업 → Miro
  • Figma와 통합된 디자인 협업 → FigJam
  • 엔터프라이즈 기능 및 보안 → Miro, Lucidchart

Docker Compose 설치

사전 요구사항

  • Docker 및 Docker Compose 설치
  • 최소 512MB RAM
  • 저장 공간 100MB+ (이미지 제외)

기본 설치 (가장 간단)

Excalidraw는 Stateless 애플리케이션으로, 모든 데이터가 브라우저에 저장됩니다. 별도의 데이터베이스나 볼륨 설정이 필요 없어 설치가 매우 간단합니다.

1. 디렉토리 생성

mkdir -p ~/docker/excalidraw
cd ~/docker/excalidraw

2. docker-compose.yml 작성

services:
  excalidraw:
    image: excalidraw/excalidraw:latest
    container_name: excalidraw
    ports:
      - "5000:80"
    restart: unless-stopped

3. 컨테이너 실행

docker compose up -d

4. 접속 확인

브라우저에서 http://서버IP:5000 접속

리버스 프록시 연동 설치 (프로덕션 권장)

HTTPS와 도메인을 사용하는 프로덕션 환경에서 권장되는 설정입니다.

docker-compose.yml (Traefik 연동)

services:
  excalidraw:
    image: excalidraw/excalidraw:latest
    container_name: excalidraw
    restart: unless-stopped
    labels:
      - "traefik.enable=true"
      - "traefik.http.routers.excalidraw.rule=Host(`draw.example.com`)"
      - "traefik.http.routers.excalidraw.entrypoints=websecure"
      - "traefik.http.routers.excalidraw.tls.certresolver=letsencrypt"
      - "traefik.http.services.excalidraw.loadbalancer.server.port=80"
    networks:
      - traefik-network

networks:
  traefik-network:
    external: true

Nginx 리버스 프록시 설정

server {
    listen 80;
    server_name draw.example.com;
    return 301 https://$server_name$request_uri;
}

server {
    listen 443 ssl http2;
    server_name draw.example.com;

    ssl_certificate /etc/letsencrypt/live/draw.example.com/fullchain.pem;
    ssl_certificate_key /etc/letsencrypt/live/draw.example.com/privkey.pem;

    location / {
        proxy_pass http://127.0.0.1:5000;
        proxy_http_version 1.1;
        proxy_set_header Upgrade $http_upgrade;
        proxy_set_header Connection "upgrade";
        proxy_set_header Host $host;
        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        proxy_set_header X-Forwarded-Proto $scheme;
    }
}

협업 기능 포함 설치 (커뮤니티 버전)

공식 Docker 이미지는 협업 기능을 지원하지 않습니다. 협업 기능이 필요하다면 커뮤니티에서 제공하는 포크 버전을 사용할 수 있습니다.

excalidraw-collaboration 사용

git clone https://github.com/alswl/excalidraw-collaboration.git
cd excalidraw-collaboration/basic
docker compose up -d

docker-compose.yml (협업 버전 예시)

services:
  excalidraw:
    image: kiliandeca/excalidraw:latest
    container_name: excalidraw
    ports:
      - "5000:80"
    environment:
      - VITE_APP_BACKEND_V2_GET_URL=http://localhost:8080/api/v2/scenes/
      - VITE_APP_BACKEND_V2_POST_URL=http://localhost:8080/api/v2/scenes/
      - VITE_APP_WS_SERVER_URL=http://localhost:8080/
    restart: unless-stopped

  excalidraw-storage:
    image: kiliandeca/excalidraw-storage-backend:latest
    container_name: excalidraw-storage
    ports:
      - "8080:8080"
    environment:
      - STORAGE_URI=redis://redis:6379
    depends_on:
      - redis
    restart: unless-stopped

  redis:
    image: redis:7-alpine
    container_name: excalidraw-redis
    volumes:
      - ./redis-data:/data
    restart: unless-stopped

참고: 커뮤니티 버전은 공식 지원이 아니므로 안정성을 직접 확인하세요.

컨테이너 관리

기본 명령어

# 시작
docker compose up -d

# 중지
docker compose down

# 로그 확인
docker compose logs -f excalidraw

# 재시작
docker compose restart

# 업데이트
docker compose pull
docker compose up -d

헬스 체크

# 컨테이너 상태 확인
docker ps

# 리소스 사용량 확인
docker stats excalidraw

활용 팁

1. 키보드 단축키

단축키기능
1선택 도구
2사각형
3다이아몬드
4타원
5화살표
6선
7펜 (자유 그리기)
8텍스트
9이미지 삽입
Ctrl+D복제
Ctrl+G그룹화
Ctrl+Shift+G그룹 해제
Ctrl+L잠금
Alt+드래그복사하며 이동

2. 라이브러리 활용

Excalidraw는 다양한 커뮤니티 라이브러리를 제공합니다:

  • https://libraries.excalidraw.com 에서 라이브러리 탐색
  • AWS, GCP, Azure 아이콘
  • 네트워크 다이어그램 요소
  • UI/UX 와이어프레임 컴포넌트
  • 플로우차트 요소

3. 유용한 활용 사례

용도설명
아키텍처 다이어그램시스템 구조, 마이크로서비스 설계
플로우차트프로세스 흐름, 의사결정 트리
와이어프레임UI/UX 초기 스케치
브레인스토밍아이디어 정리, 마인드맵
회의 노트시각적 회의록, 개념 정리
교육 자료개념 설명, 튜토리얼 이미지

4. 내보내기 팁

PNG 내보내기:
- 배경 포함/제외 선택 가능
- 고해상도(2x, 3x) 내보내기 가능

SVG 내보내기:
- 벡터 형식으로 확대해도 깨지지 않음
- 웹사이트, 문서에 삽입하기 좋음

Excalidraw JSON:
- 나중에 다시 편집 가능
- 팀원과 파일 공유 시 유용

보안 고려사항

셀프 호스팅 시 보안

# 보안 강화 설정 예시
services:
  excalidraw:
    image: excalidraw/excalidraw:latest
    container_name: excalidraw
    ports:
      - "127.0.0.1:5000:80"  # localhost만 바인딩
    restart: unless-stopped
    read_only: true  # 읽기 전용 파일시스템
    security_opt:
      - no-new-privileges:true

권장 사항

  1. 리버스 프록시 사용: 직접 노출 대신 Nginx/Traefik 뒤에 배치
  2. HTTPS 적용: Let’s Encrypt로 SSL 인증서 적용
  3. 접근 제한: 필요시 Basic Auth 또는 SSO 연동
  4. 정기 업데이트: 최신 이미지로 주기적 업데이트

트러블슈팅

1. 페이지가 로드되지 않음

# 컨테이너 상태 확인
docker ps

# 로그 확인
docker logs excalidraw

# 포트 확인
netstat -tlnp | grep 5000

2. 협업 기능이 작동하지 않음

공식 Docker 이미지는 협업 기능을 지원하지 않습니다. 협업이 필요하다면:

  • 공식 excalidraw.com 사용
  • 커뮤니티 포크 버전 사용 (예: kiliandeca/excalidraw)

3. 파일 저장이 안 됨

Excalidraw는 브라우저 로컬 스토리지를 사용합니다:

  • 브라우저 데이터 삭제 시 작업 내용 손실
  • 중요한 작업은 반드시 파일로 내보내기
  • .excalidraw 파일로 저장하면 나중에 다시 열기 가능

Excalidraw+ (유료 버전)

Excalidraw는 무료 오픈소스이지만, 추가 기능이 포함된 Excalidraw+ 유료 서비스도 있습니다:

기능무료Excalidraw+
기본 드로잉✅✅
실시간 협업✅✅
클라우드 저장❌✅
AI 기능 (Text-to-Diagram)❌✅
프레젠테이션 모드❌✅
비공개 라이브러리❌✅
가격무료~$6/월

마무리

Excalidraw는 “완벽한 다이어그램”보다 “빠른 아이디어 전달”에 초점을 맞춘 도구입니다. 손그림 스타일의 친근한 느낌이 오히려 브레인스토밍이나 초기 설계 단계에서 부담을 줄여주고, 협업을 더 자연스럽게 만들어줍니다.

추천 대상

  • 아이디어를 빠르게 시각화하고 싶은 개발자
  • 아키텍처 다이어그램을 자주 그리는 엔지니어
  • 회의 중 실시간 스케치가 필요한 팀
  • 프라이버시를 중시하는 사용자
  • Miro/Figma가 과한 느낌인 분
  • 로그인 없이 바로 사용하고 싶은 분

Excalidraw의 철학

“The goal is to make it feel like you’re sketching on paper, but with the benefits of digital tools.”

3분이면 설치하고, 바로 그리기 시작할 수 있습니다!

참고 자료



댓글 남기기