티스토리

운클라우드
Wooncloud Blog
운클라우드
  • 분류 전체보기
    • 이야기
      • 일기
      • 개발일지
      • 제품 리뷰
      • 기타
    • 정보
      • 유용한 사이트
    • 개발 아카이브
      • HTML, CSS
      • Javascript
      • SVELTEKIT
      • Node Js
      • JAVA
      • Spring
      • 코드 저장소
      • 라이브러리
      • 개발 관련 지식
      • AWS, Cloud, Server
      • DATABASE
    • 스터디
      • 정보처리기사
      • 친절한 SQL 튜닝 스터디

블로그 메뉴

  • 홈
  • 방명록
  • 운구름 웹
  • 벨로그
  • 깃허브
  • 리틀리
  • 도시부엉

인기 글

최근 글

태그

  • 튜닝
  • 리뷰
  • API
  • javascript
  • 폰트
  • 정보처리기사
  • SQL
  • 마크다운
  • TurboFan
  • 이클립스
  • 웹디자인
  • CSS
  • 자바스크립트
  • 회고
  • 라이브러리
  • Java
  • html
  • 스터디
  • 자바
  • 코드저장소
전체 방문자
오늘
어제
hELLO · Designed By 정상우.
운클라우드

Wooncloud Blog

손으로 그린듯한 다이어그램 툴 - Excalidraw
정보/유용한 사이트

손으로 그린듯한 다이어그램 툴 - Excalidraw

2022. 11. 13. 23:01
반응형

Excalidraw
Excalidraw

개요

Excalidraw는 손으로 그린듯한 러프한 다이어그램을 그리는 툴입니다.

이번에 추천하는 프로그램은 정말 정말 추천하는 프로그램 중 하나입니다.

 

많은 사람들이 PPT로 순서도를 그리죠.

하지만 PPT는 순서도를 그리는데 최적화되지 않기 때문에, 사용성에 불편함이 많이 있습니다.

 

Excalidraw는 이런 순서도를 쉽게 그릴 수 있게 최적화되어 있습니다.

그리고 프로그램이 가볍고 브라우저 환경에서 사용합니다.

가장 좋은 기능은, 공유 세션을 만들어서 다른 사람을 초대해 함께 협업할 수 있는 것이 큰 장점입니다.

 

 

https://excalidraw.com/

 

Excalidraw — Collaborative whiteboarding made easy

Excalidraw is a virtual collaborative whiteboard tool that lets you easily sketch diagrams that have a hand-drawn feel to them.

excalidraw.com

 

 

도구 툴 사용법

Excalidraw screen
Excalidraw 화면

그림은 임의로 그린 이미지입니다. 예전에 Java Object 클래스를 설명할 때, 잠시 만들었던 것입니다.

상단 메뉴에는 도구 툴들이 있습니다.

 

1. 마우스 커서 모드

2. 사각형 그리기

3. 마름모 그리기

4. 원 그리기

5. 화살표 그리기

6. 실선 그리기

7. 그림 그리기

8. 텍스트 삽입

9. 이미지 추가

0. 지우개

 

도형 툴

Excalidraw shape tool
사각형 툴

도형 툴을 사용하면 도형 선의 색상, 배경색, 선 굵기, 선 커스텀 등 여러 기능을 사용할 수 있습니다.

 

화살표 툴

Excalidraw arrow tool
화살표 연결

화살표 툴의 좋은 점은 도형과 도형을 연결하는데 간편하고, 화살표 선이 연결되면 연결된 도형을 계속 따라갑니다.

많은 툴들이 이런 기능이 없어서, 모양이 변경될 때마다 대공사가 일어날 경우가 많습니다. 😭 

 

선 툴

Excalidraw Line Tool
선 툴 사용하기

선 툴은 직선도 되고 곡선도 되고, 선을 이어서 도형도 만들 수 있습니다.

도형 툴에서 없는 기능이 있으면 선으로 이어서 원하는 모양을 만들 수 있습니다.

 

그리기 툴

Excalidraw drawing tool
그리기 툴 사용하기

그리기 툴은 펜으로 그림을 그리는 툴입니다.

만약에 한 붓으로 도형이 완성되면 위의 사진과 같이 도형 내부를 채웁니다.

 

그 외 다양한 기능

Excalidraw and more
다양한 기능

불러오기, 내보내기, 이미지 저장 등 기능이 있지만 실시간 협업 기능이 가장 눈에 띄고 좋아 보입니다.

 

실시간 협업

실시간 협업 기능을 이용해서, 함께 협업할 사람과 브레인스토밍을 하고 피드백을 받을 수 있습니다.

실시간 협업 메뉴를 누르면 아래와 같이 팝업창이 뜹니다.

Excalidraw real-time collaboration
실시간 협업 시작 팝업창
Excalidraw real-time collaboration 2
협업 세션 오픈 후 팝업창

실시간 협업을 실행하면 공유할 수 있는 url과 자신이 누군지 표시할 이름을 적을 수 있습니다.

그리고 암호화를 사용한다고 보안이 강력하다는 어필을 하네요.

위의 url을 협업하고 싶은 사람들에게 공유하면 세션에 접속할 수 있습니다. 

 

 

라이브러리 사용

Using the Excalidraw library
오른쪽 상단에 책 모양의 버튼 하나가 있다.

오른쪽 상단에 책 아이콘의 버튼이 있습니다.

이 버튼은 라이브러리를 사용하는 버튼입니다.

화면에 표시할 그림이나 여러 다이어그램에 자주 쓰는 아이콘들을 다운로드하고 사용할 수 있습니다.

Using the Excalidraw library 2Using the Excalidraw library 3
라이브러리 스토어와 추가한 라이브러리

이미 사람들이 만들어둔 아이콘, 다이어그램 등을 라이브러리에 추가해서 사용할 수 있습니다.

라이브러리에는 다양한 콘텐츠가 있습니다. 아래처럼 필요한 라이브러리를 찾아서 더욱 활용도를 높일 수 있습니다.

 

Excalidraw libraries
Excalidraw libraries 2

 

 

 

기타

Excalidraw 블로그

https://blog.excalidraw.com/

 

Excalidraw Blog

Virtual whiteboard for sketching hand-drawn like diagrams

blog.excalidraw.com

Excalidraw 깃허브

https://github.com/excalidraw/excalidraw

 

GitHub - excalidraw/excalidraw: Virtual whiteboard for sketching hand-drawn like diagrams

Virtual whiteboard for sketching hand-drawn like diagrams - GitHub - excalidraw/excalidraw: Virtual whiteboard for sketching hand-drawn like diagrams

github.com

 

반응형
저작자표시 비영리 변경금지 (새창열림)

'정보 > 유용한 사이트' 카테고리의 다른 글

fffuel - Free SVG generators, color tools & web design tools  (0) 2024.07.21
코드 예쁘게 이미지화 해주는 사이트 모음  (0) 2023.01.09
코드를 예쁘게 이미지로 만들어주는 툴 - carbon.now.sh  (0) 2022.11.13
JSON 구조를 그래프로 보자! JSON Crack  (3) 2022.09.04
Tables Generator - HTML과 Markdown 테이블 쉽게 만들기  (0) 2021.09.02
    '정보/유용한 사이트' 카테고리의 다른 글
    • fffuel - Free SVG generators, color tools & web design tools
    • 코드 예쁘게 이미지화 해주는 사이트 모음
    • 코드를 예쁘게 이미지로 만들어주는 툴 - carbon.now.sh
    • JSON 구조를 그래프로 보자! JSON Crack

    티스토리툴바