큐레이션 · 오픈 · 무료

Excalidraw

손으로 그린 듯한 미학을 특징으로 하여 속도와 단순성을 위해 설계된 협업 화이트보드 도구입니다.

01

디자인 DNA

빠른 아이디어 구상을 위해 준비된 연필과 빈 캔버스

02

컬러

부드럽고 중립적인 캔버스 배경 위에 고대비의 손으로 그린 듯한 선을 사용합니다.

03

타이포그래피

hand-drawn · humanist-sans · monospace

• display32px · 700
• body16px · 400
• caption14px · 400

로고와 캔버스 요소에는 손으로 그린 듯한 스타일의 글꼴을 사용합니다. · UI 요소, 메뉴 및 시스템 메시지에는 깔끔한 humanist-sans 글꼴을 사용합니다. · 캔버스 UI에는 표준 16px 기본 크기를 유지하여 높은 가독성을 확보합니다.

04

여백

엄격한 그리드보다는 캔버스 요소에 의해 결정되는 유연하고 유기적인 리듬을 사용합니다.

05

표면 (라운드 / 그림자 / 경계선)

UI 컨테이너에는 섬세한 1px의 중립적인 회색 테두리를 사용합니다.

0px 0px 0px 1px rgba(255, 255, 255, 1) · 0px 0px 1px 0px rgba(0, 0, 0, 0.17) · 0px 7px 14px 0px rgba(0, 0, 0, 0.05)

06

레이아웃

사용자 생성 요소들을 위해 절대 위치를 사용하는 무한 캔버스입니다.

07

모션과 인터랙션

도구 선택 및 UI 상태 변경을 위한 부드러운 전환 효과. · 상호작용 요소를 위한 미세한 변환 애니메이션.

상호작용 요소에 미세한 그림자 변화와 색상 변화가 적용됩니다. · 도구 선택 시 즉각적인 시각적 피드백이 제공됩니다.

08

컴포넌트

• button UI 컨트롤을 위한 섬세한 그림자가 있는 둥근 사각형입니다.
• card 설정이나 툴팁을 위한 간단한 테두리 컨테이너입니다.
• chip 테두리가 있는 둥근 사각형으로 표시되는 키보드 단축키 표시기입니다.
• input 깔끔한 테두리와 최소한의 스타일링을 가진 텍스트 입력 필드입니다.
• hero 중앙에 배치된 브랜드 로고와 주요 호출-to-액션 링크입니다.

09

보이스와 금지 목록

• 톤 도움이 되고, 직접적이며, 약간 비격식적인 어조입니다.
• 헤드라인 손으로 그린 듯하며, 표현력이 있고, 시각적으로 뚜렷합니다.
• CTA 명확하고 행동 지향적이며, 종종 키보드 단축키와 함께 표시됩니다.

• 다크 테마를 사용하지 마세요 — 스크린샷은 밝고 밝은 캔버스 배경을 보여줍니다.
• UI 요소에 날카로운 90도 모서리를 사용하지 마세요 — 스크린샷은 4px에서 12px의 border-radius를 선호함을 보여줍니다.
• 순전히 기계적이고 차가운 글꼴을 사용하지 마세요 — 스크린샷은 브랜드에 손으로 그린 듯한 글꼴을 두드러지게 사용합니다.
• 키보드 단축키를 숨기지 마세요 — 스크린샷은 UI 액션 옆에 명확하게 레이블을 표시합니다.
• 무겁고 어두운 테두리를 사용하지 마세요 — 스크린샷은 가볍고 섬세한 1px 테두리와 부드러운 그림자를 보여줍니다.
• 복잡한 다단계 레이아웃을 사용하지 마세요 — 스크린샷은 미니멀하고 캔버스 중심의 인터페이스를 보여줍니다.
• 피하기: 지나치게 기업적이거나 차가운 언어를 피합니다.
• 피하기: 복잡하거나 혼란스러운 안내 텍스트를 피합니다.
• 피하기: 탐색이 필요한 숨겨진 UI 요소를 피합니다.

10

팩 안의 실제 스크린샷

실제 페이지에서 캡처 · 실 computed styles

11

System Prompt

en · zh-CN · zh-TW · ja · ko