웹상에서 블럭도를 간단히 그리는 방법 draw.io 사용하기
내 PC에 visio가 없다면 무료툴인 draw.io 를 사용해 보자
코드도사 사이트를 운영하다 보면 가끔가다 한번씩 “Block Diagram”을 그릴때가 있습니다. Block Diagram은 제가 회사를 다닐때에도 세미나를 하거나 개발 단계에서 검토를 할때 설명이나 전달용으로 주로 그렸던거 같습니다.
얼마전에 “VPN” 관련 글을 쓴적이 있었습니다. 위의 글인데요. VPN으로 외부에서 회사나 집으로 안전하게 접근하기 위해서 VPN 을 구축하고 해당 VPN 구성도를 설명하기 위해 Block Diagram 을 그리게 되었습니다.
바로 요 그림입니다. 사실 이 그림을 그리는것은 키보드로 글을 적는거 보다 “몇배”는 더 귀찮은거 같습니다.ㅋ 그럼에도 좀더 쉽게 설명을 드리기 위해서 이렇게 Block Diagram을 그리게 되었는데요, 이걸 그리려면 일반적으로는 마이크로소프트위 Visio 를 많이 씁니다.
그런데 이 프로그램은 라이센스 비용을 지불해야 하는 “유료” 프로그램입니다. 회사에서는 이미 비용을 지불하고 있어서 제가 돈을 지불할 필요는 없었지만 집에서는 Visio 를 구입하기가 망설여집니다. 그래서 다른 프로그램을 써야 합니다.
그래서 추천할만한 프로그램이 있습니다. 제가 오픈소스 추종자 답게 오픈소스로 제공되는 오피스 프로그램이 있습니다. 리브레오피스 입니다.
리브레 오피스는 리눅스 뿐만 아니라 윈도우즈에서도 무료로 설치가 가능합니다. 여기서 “Draw” 라는 프로그램이 있는데 이 프로그램을 설치하여 사용하면 마치 Visio 와 같이 Block Diagram을 그릴 수 있게 됩니다.
게다가 한글 지원도 되니 저같이 Visio를 살 돈이 없는 사람들에게는 일석이조인 셈이지요.
하지만 설치가 귀찮을 때도 있습니다. 예를 들면 노트북을 대여하거나 내 노트북에 리브레오피스를 설치하고 싶지 않을때도 있습니다. 이럴 때는 어떻게 할까요?
“draw.io” 를 이용하면 됩니다.
draw.io로 별다른 설치 없이 간단한 블럭도를 그려보자
draw.io 는 이름에서 알 수 있듯이 웹 브라우저로 접속하여 사용하는 “웹툴” 입니다. 그런데 웹툴임에도 불구하고 기능은 강력해서 굳이 Visio 가 없어도 Block Diagram 을 손쉽게 그릴 수 있습니다.
위 링크로 접속하면 draw.io 로 접속이 가능합니다.
접속을 하면 위와 같이 작은 시작 화면이 나타나는데 여기서는 새로 그려야 하기 때문에 “Create New Diagram” 를 눌러보겠습니다.
그러면 그리려는 블럭도의 포맷을 선택할 수 있습니다. 저는 Network 를 선택하여 네트워크 관련 블럭도를 그려보려고 합니다. 그런 다음에 포맷을 선택 후 “Create” 를 누르면 됩니다.
그러면 위와 같이 편집 화면이 나타납니다. 여기서 마치 파워포인트나 Visio 같이 내가 그리고 싶은 블럭도를 마음껏 그리면 됩니다. 웹 브라우저로 실행하지만 사용에는 전혀 불편함이나 어색함은 없습니다.
그런 다음에 작업이 완료되고 저장을 하기 위해서 메뉴에서 File – Save 혹은 Save as 를 하여 내 PC에 저장을 하면 됩니다.
그러면 위와 같이 저장 방법에 대해서 선택을 하게 됩니다. draw.io 에는 몇가지 클라우드 서비스나 깃랩, 내 PC, 브라우저 등으로 저장이 가능합니다. 저장 파일의 형태도 XML, png, svg, html 등등 여러 포맷을 지원하니 내가 선택하고 싶은 포맷으로 선택 후 저장하면 되겠습니다.
추후에 다시 블럭도를 편집하려면 XML File(.drawio) 를 선택해 줘서 저장 후에 추후 다시 불러와 편집이 가능합니다.
저는 draw.io 로 종종 Block Diagram 을 그리고 있는데 꽤 만족하고 있습니다. 어떻게 이렇게 웹 브라우저 상에서 구현을 했는데 프로그래머 입장에서 꽤나 궁금해지긴 하군요.