창의적인 생각을 자유롭게 그리는 화이트보드 Excalidraw

Excalidraw는 개발자와 디자이너를 위한 오픈소스 화이트보드 도구다. Wireframe과 diagram 작성 도구 중에서도 가장 직관적이고 강력한 기능을 제공한다. 이 가이드에서는 Excalidraw의 핵심 기능과 활용 방법을 다룬다.

소개

Excalidraw는 웹 기반의 드로잉 도구로, 개발자와 디자이너가 아이디어를 시각화하는 데 최적화되어 있다. 직관적인 interface와 다양한 function을 통해 빠르게 prototype을 만들 수 있다. 웹 브라우저에서 excalidraw.com에 접속하거나 로컬에 설치해서 사용할 수 있다.

Excalidraw의 활용 분야는 아래와 같다

• 빠른 wireframe 제작이 필요할 때
• 팀과의 아이디어 공유와 협업이 필요할 때
• 복잡한 system architecture를 시각화할 때
• UI/UX design을 빠르게 프로토타이핑할 때

Guide

Getting Started

로컬에서 사용하려면 npm, yarn, pnpm 중 선호하는 패키지 매니저로 설치하면 된다. pnpm을 사용하는 것을 권장하는데, 설치 명령어는 다음과 같다

pnpm add @excalidraw/excalidraw@latest

설치 후 React 프로젝트에서 사용하는 기본 예제 코드는 아래와 같다

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

function App() {
  return (
    <div style={{ height: "500px" }}>
    <Excalidraw
      initialData={{
          appState: { viewBackgroundColor: "#ffffff" },
        elements: [],
        }}
      />
    </div>
  );
}

설치가 완료되면 바로 드로잉을 시작할 수 있다. 기본적인 드로잉 방법은 매우 직관적이다. R 키를 누르면 rectangle을, C 키를 누르면 circle을 그릴 수 있다. L 키로 line을 그리고, D 키로 diamond를 빠르게 생성할 수 있다. 텍스트는 T 키를 눌러 입력할 수 있으며, 폰트 크기는 Ctrl/Cmd + +/- 로 조절할 수 있다.

요소를 선택하고 이동할 때는 V 키를 사용한다. 요소를 drag하여 이동하고, Shift + drag로 여러 요소를 선택할 수 있다. Alt + drag를 사용하면 요소를 복제할 수 있어 빠른 작업이 가능하다.

자주 사용하는 초기 설정은 아래와 같다

1. Dark mode 설정: appState: { theme: "dark" }
2. Grid 설정: gridSize: 20
3. Export 설정: exportScale: 2

Basic Features

주요 tool은 아래와 같이 구분된다

• 기본 도형: rectangle, circle, diamond, arrow
  • rectangle: UI component, container 표현에 활용
  • circle: icon, button, node 표현에 활용
  • diamond: decision point, condition 표현에 활용
  • arrow: flow, relationship 표현에 활용
• 텍스트: 다양한 font와 크기 지원
  • 제목: 24px, Bold
  • 부제목: 18px, Semi-bold
  • 본문: 14px, Regular
  • 설명: 12px, Light
• Line: straight line, curve, arrow, dotted line
  • straight line: 기본 연결선
  • curve: 자연스러운 flow 표현
  • arrow: 방향성 있는 관계 표현
  • dotted line: 선택적/가능한 관계 표현
• 색상: background color, line color, opacity 조절
  • Primary: #1a73e8 (Google Blue)
  • Secondary: #5f6368 (Gray)
  • Accent: #ea4335 (Red)
  • Background: #ffffff (White)
• Style: line weight, dash style, corner radius
  • line weight: 1px (thin), 2px (normal), 4px (bold)
  • dash style: solid, dashed, dotted
  • corner radius: 0px (sharp), 4px (rounded), 8px (pill)

Additional Features

추가적인 function은 아래와 같이 구성되어 있다

• Layer Management
  • 요소를 layer로 구분하여 관리
    • Background Layer: 배경 요소
    • Content Layer: 주요 콘텐츠
    • Annotation Layer: 설명과 주석
    • UI Layer: 인터페이스 요소
  • layer 순서 변경으로 요소 겹침 제어
    • Ctrl/Cmd + ]: layer 위로 이동
    • Ctrl/Cmd + [: layer 아래로 이동
  • layer 잠금으로 실수 방지
    • Ctrl/Cmd + Shift + L: layer 잠금/해제
  • layer 그룹화로 복잡한 구조 관리
    • Ctrl/Cmd + G: 선택 요소 그룹화
    • Ctrl/Cmd + Shift + G: 그룹 해제
• Grid System
  • 정밀한 정렬을 위한 grid 활성화
    • 기본 grid: 20px
    • 세밀한 grid: 10px
    • 대형 grid: 40px
  • grid 크기 조절로 세밀한 작업 가능
    • Ctrl/Cmd + ,: grid 설정
    • Ctrl/Cmd + .: grid 표시/숨김
  • snap 기능으로 요소 정렬 용이
    • Ctrl/Cmd + Shift + S: snap 활성화/비활성화
  • custom grid 설정으로 프로젝트별 최적화
    • UI Design: 8px grid
    • Architecture: 20px grid
    • Flow Chart: 40px grid
• Style Preset
  • 자주 사용하는 style을 preset으로 저장
    • UI Component Style
    • Architecture Style
    • Flow Chart Style
  • 일관된 design 유지
    • Color Palette
    • Typography
    • Spacing
  • 팀 프로젝트에서 design system 구축
    • Shared Library
    • Component Library
    • Style Guide
  • AI 기반 style 추천 기능 활용
    • Auto Layout
    • Style Matching
    • Color Harmony

Performance & Optimization

효율적인 사용법은 아래와 같이 정리할 수 있다

• Keyboard Shortcuts
  • Basic Operations
    • Ctrl/Cmd + Z: undo
    • Ctrl/Cmd + Shift + Z: redo
    • Ctrl/Cmd + D: duplicate
    • Ctrl/Cmd + G: group
    • Ctrl/Cmd + Shift + L: layer lock
  • Advanced Operations
    • Ctrl/Cmd + Shift + C: style 복사
    • Ctrl/Cmd + Shift + V: style 붙여넣기
    • Ctrl/Cmd + Shift + A: 전체 선택
    • Ctrl/Cmd + Shift + F: 요소 찾기
    • Ctrl/Cmd + Shift + E: export
• Template System
  • 자주 사용하는 layout을 template으로 저장
    • UI Wireframe Template
    • System Architecture Template
    • Flow Chart Template
  • 팀 프로젝트에서 일관된 design 유지
    • Design System Template
    • Component Library
    • Style Guide
  • 빠른 prototyping 가능
    • Mobile App Template
    • Web App Template
    • Dashboard Template
  • AI 기반 template 추천 활용
    • Layout Suggestion
    • Component Arrangement
    • Style Matching
• 실무 최적화 팁
  • 파일 관리
    • 주기적인 backup (최소 1일 1회)
    • version 관리 (주요 변경사항마다)
    • cloud sync 활용 (GitHub, Google Drive)
  • 성능 관리
    • 불필요한 요소 제거
    • layer 구조 최적화
    • 주기적인 canvas 정리
  • 협업 최적화
    • 작업 영역 분리
    • 주기적 save
    • 변경 이력 추적

Troubleshooting

자주 발생하는 issue와 solution은 아래와 같다

• Performance Issues
  • 요소가 많을 때 느려지는 현상
    • solution: 불필요한 요소 제거
    • solution: layer 구조 최적화
    • solution: group화로 요소 수 감소
  • 대용량 파일 처리 시 memory 관리
    • solution: 주기적인 canvas 정리
    • solution: 불필요한 history 제거
    • solution: export 후 새 파일로 작업
  • 렌더링 성능 저하
    • solution: 복잡한 도형 단순화
    • solution: text 요소 최소화
    • solution: layer 수 제한
• Collaboration Issues
  • 동시 편집 시 conflict
    • solution: 작업 영역 분리
    • solution: 주기적 save
    • solution: version 관리 전략 수립
  • 변경 이력 추적
    • solution: GitHub 통합
    • solution: 주기적 commit
    • solution: 변경사항 문서화
  • 파일 공유 문제
    • solution: cloud storage 활용
    • solution: export 형식 최적화
    • solution: 권한 관리 설정
• Export & Import Issues
  • 해상도 문제
    • solution: exportScale 조정
    • solution: SVG 형식 활용
    • solution: PNG 최적화
  • 호환성 문제
    • solution: JSON 백업
    • solution: SVG 변환
    • solution: PNG fallback

Reference

• Excalidraw 공식 문서 - 기본 사용법과 API 문서
• GitHub Repository - 소스 코드와 이슈 트래킹
• Excalidraw Blog - 공식 블로그와 사용자 스토리