Draw It 플러그인으로 도표, 다이어그램, ppt 를 워드프레스에 넣기

Draw.io 플러그인은 정말 좋아요.

컨텐츠를 보기 좋게 퍼블리싱 할려면, 디자인을 해서 이미지를 만들어서 보통 워드프레스 미디어 도구로 올려서 링크를 걸게 되는데.

좀 더 생각을 바꾸면, Draw.io 를 통해 도표, 디자인, 대부분의 UI 설계 단계에서 아주 말끔한 결과물을 뽑아낼 수 있습니다.

이번에 저희가 의뢰 받아서 개발 중인 http://kfpec.or.kr 이라는 곳의 단체표준제정사업의 진행과정이라는 곳에 다이어그램이 들어가 있는데요.

이것을 제작하는 과정을 통해 Draw.io 를 통해 무엇을 할 수 있을까 고민해보시기 바랍니다.

우선 Draw It 를 사용하기 위해서는 Draw.io 에 가입을 해야 합니다.

google facebook 으로 회원가입이 가능하니깐 구글로 로그인하신 다음에 Draw.io 가시고 인증 창 뜨는 것 동의 누르시면 세션이 연결됩니다.

draw.io 에서 제작한 결과물은 Google Drive 나 Device (자신의 컴퓨터) 에 저장할 수 있고, import 와 export 기능을 사용할 수 있습니다.

Save 는 자동으로 이루어지고요.

일단 플러그인 설치하기 메뉴에서 키워드에 Draw.io 를 검색합니다.

설치하기 클릭을 하면 draw.io 를 불러들이기 위해서는 Editor 의 버턴을 눌러 생성하게 됩니다.

위의 예시는 Drawio 로 제작한 컨텐츠를 비쥬얼컴포저 Backend Editor 에서 보았을 때의 화면이고요. Backend Editor 에서 Edit text block 을 눌러 에디터툴을 불러와야 겠죠 ?

에디터 툴의 상단에 DrawIt Diagram 이라는게 보이시죠 ?

새로운 다이어그램을 만들려면 위의 버턴을 누르시면 되고요.

만약 다이어그램을 만든 다음에 그 다이어그램을 수정하실려면 마우스로 다이어그램으로 제작한 이미지 (png) 나 svg 를 클릭한 후에 저 버턴을 누르면 됩니다.

자, 그럼 시작 해 볼까요? 저 아이콘을 클릭합니다.

그럼 아주 큰 화면이 열리면서 화면을 가리게 되는데요.

메뉴 축소 버턴을 눌러서 가리는 것을 없애주세요.

DrawIt 의 왼쪽 프레임에는 선택가능한 각종 오브젝트들이 나와 있는데, powerpoint 보다 훨씬 유용하고 쓸만한 것들이 많습니다.

위의 예시처럼 그냥 단순하게 라운드 있는 사각박스에 화살표 붙여서 제작하면 심플한 레이아웃을 만들 수 있습니다.

작업이 끝나면 Save 를 하는 순간 자동으로 방금 작업한 결과물은 png 파일로 저장이 되면서 이미지 파일로 저장이 됩니다.

텍스트 보기로 보면 저런 식으로 들어가 있고요, 이미지를 클릭 한 다음 에디터툴의 DrawIt Diagram 버턴을 누르면 에디팅 가능하게 바뀌더라고요.

신기하죠 ?

PPT 에 각 종 다이어그램을 웹으로 표현하려 하면 파워포인터나 일러스터보다 워드프레스의 DrawIt 플러그인이 더 좋아 보입니다.

중요한 것 하나, 여기서 제작한 작업물은 언제던지 버턴 한 두 번 열여서 수정이 가능하고, png 뿐만 아니라 svg 로도 퍼블리싱할 수 있습니다.

다만 플러그인 제작자도 svg 로 퍼블리싱은 보안 이슈로 권하지는 않는다라고 하고, 기본 속성값도 png 로 퍼블리싱하고 있습니다.