Interactive Draw.io, 기술 문서 정복
브런치 개발자 이야기 100배 즐기기 (맛보기 편)
안녕하세요! iOS 개발하는 웅쓰입니다 :]
코로나가 급속도로 기승을 부리고 날도 풀리는가 싶더니 갑자기 추워지고 있는데요. 다들 건강 조심하시길 바라겠습니다.
이번에 쓰려고 계획했던 주제를 다음 달에 하는 게 좋을 것 같아서 적당히 가벼운 주제를 찾다가 Create Interactive Story-telling Technical Diagrams With Draw.io 라는 글을 읽었는데요.
읽고 '오 이거다!' 싶어서 오늘은 Draw.io 에 생기를 불어넣는 방법에 대해 적어볼까 합니다. 요즘 제가 하는 업무 중에 티스토리에 적용되어 있는 RIB 들을 정리하는 일이 있는데, 어떻게 하면 효과적이고 스마트하게 정리할 수 있을지 여러 방법을 시도해보고 있거든요... 이후에는 이걸 적용해서 좋은 활용 후기를 소개해드릴 수 있으면 좋겠네요.
Draw.io 란?
우선 Draw.io가 뭔지부터 말씀드려야겠네요. 아마 이미 많이들 사용하고 계실 수도 있는데 UML, ERD, Flowcharts 등등 다양한 다이어그램들을 쉽게 그릴 수 있는 무료! 온라인! 툴입니다. 구글 계정만 있다면 바로 사용해볼 수 있어요 :) 지니가 적어주셨던 작년 9월 매거진에 잠깐 등장했던 그 녀석이 맞습니다. 이번에 좀 더 알아보니 저는 정말 기능의 0.01% 정도만 사용하고 있었다는....
interactive Drawio
오늘은 브런치 개발자 이야기를 100배 즐기려면 어떻게 해야 하는지 단계별로 알아보면서 생기를 불어넣어 보겠습니다.
Step 1. layer 설정하기
네 가장 먼저 브런치 개발자들의 이야기 매거진 구독부터 해야겠죠?
가장 먼저 적절하게 layer를 나눠줘야 합니다.
위와 같은 도형을 하나 만들었다면 Cmd + Shift + L 또는 아래처럼 Layers를 눌러서 layers 열어줍니다.
+ 버튼을 눌러서 layer 들을 추가해 주고
layer 더블클릭 혹은 펜슬 버튼을 클릭해서 각 layer의 label을 바꿔줄 수 있습니다.
그리고 아래 그림처럼 더보기? 버튼을 눌러서 도형이 속할 layer를 바꿔줄 수도 있습니다.
포토샵처럼 show/hide, 잠금을 설정할 수도 있는데요. 오늘은 show/hide를 활용하는 방법을 알아보려고 합니다.
Step 2. ID 찾기 및 태그 부여
도형에 뭔가 하려면 각 도형부터 찾을 수 있어야겠네요. 각 도형은 자동으로 id가 부여됩니다.
도형을 우클릭해서 Edit Data 혹은 Cmd+M으로 각 도형의 데이터를 확인해봅시다.
이렇게 ID를 찾아서 활용하면 되는데요. 매번 저 길고 알 수 없는 ID를 사용하기 어렵겠죠?
당연히 간편하게 tags를 부여할 수도 있습니다. tags를 property에 추가하고 입력해주면 되는데요.
저는 step{인덱스}로 태그를 부여해주도록 하겠습니다.
Step 3. Action 추가하기
ID를 찾고 태그 설정 방법까지 알았으니 action을 해볼 차례입니다.
Step3 버튼을 누르면 아래 3번째 단계를 나타나게 해보고 싶습니다.
아까 Edit Data 열던 방식과 동일하게 Edit Link를 열어줍니다.
Option(Alt)+Shift+L 로 열 수도 있어요 :)
이 링크에 json 형태로 action을 줄 수가 있습니다. Step3 버튼에 step3 layer를 켜고 끄는 toggle 액션을 추가해볼게요. 아래와 같이 입력해줍니다.
data:action/json,{"actions":[{"toggle":{"tags":["step3"]}}]}
풀어쓰면 아래와 같은 형태입니다. 대괄호 안에 여러 개를 동시에 넣어줄 수도 있습니다.
(문서와 예제엔 여러 태그를 동시에 줄 수 있다고 나와있는데, 왜인지 tags를 여러 개 주면 동작을 안 하더라고요... ID는 되는데 뭐가 문젠지 잘 모르겠네요 ㅠ)
초록색 버튼을 하나 더 깔고 똑같이 액션 링크를 입력해주면
다음과 같이 layer가 toggle 되는 효과를 줄 수 있습니다.
+
추가적으로 toggle 외에도 다양한 효과를 줄 수 있는데요, 직접 다 해보진 못했으나 스타일 설정, highlight, opacity, fade in/out 등등 여러 가지를 제공하는 것 같아요.
아래 링크에서 Custom Link 들을 간단하게 조합해볼 수 있으니 궁금하신 분들은 확인해보시면 좋을 것 같습니다.
- create custom link: https://jgraph.github.io/drawio-tools/tools/link.html
..... 이번에는 제가 말도 안 되는 예제를 가져왔지만,,
잘 사용하면 서두에 말씀드렸던 글이나 drawio 사이트의 interactive 예제처럼 꽤나 전문적으로 다양하게 활용해볼 수 있을 것 같아요.
읽어주셔서 감사합니다.
.
.
.
우리는 채용 중
https://careers.kakao.com/jobs/P-12253
참고자료
Create Interactive Story-telling Technical Diagrams With Draw.io
https://drawio-app.com/interactive-diagrams-with-custom-links-and-actions/
https://jgraph.github.io/drawio-tools/tools/link.html
https://drawio-app.com/examples/
