사내 Technical Talk 시간 때 발표했던 자료. 2022. 04.

1. Draw.io 활용
200% 끌어올리기
박대성
1

2. 우리는 의사소통이 항상 서로 원할 한가요?
2

3. 찰떡 같이 알아 듣는 동료가 있을 수도 있습니다.
3

4. 백문이 불여일견
 백 번 듣는 건 한번 보는 것만 못하다.
4

5. Draw.io 란
 웹 기반(HTML5, Javascript) 의 다이어그램 소프트웨어
5

6. 무엇을 할 수 있나요?
ERD
순서도
UML
https://drawio-app.com/examples
6

7. 장점은 무엇인가요?
 무료입니다.
 설치하지 않고 어디서든 사용이 가능합니다.
 다양한 클라우드 스토리지를 지원하고 공유가 가능합니다. (몰론 파일로도 공유가 됩니다.)
 한국어 지원
7

8. draw.io의
활용도를 200% 끌어올릴 수 있는 팁들
자주 사용하는 것만 엄선한 10가지의 숨겨진 기능들.
8

9. 팁1. 도형 추가
 우측 하단의 그 외 도형을 선택 후 도형 추가
9

10. 팁2. 스케치 스타일
 우측 상단 스타일 탭에서 스케치 선택 또는 각 객체의 스타일 탭에서 스케치를 선택
10

11. 팁3. 빈 공간에 연결 시 도형 복사
 상단 추가도구 메뉴에서 [빈 공간에 연결시 도형 복사] 선택
11

12. 팁4. 내보내기
 내보낼 도형을 선택 후 파일메뉴 -> 내보내기 -> PNG 또는 JPEG 선택 -> 테두리 두께
설정
12

13. 팁5. 연결선 점프
 겹치는 연결선의 스타일 탭에서 [연결선 점프] 항목 변경
13

14. 팁6. 연결점 편집
 객체 선택 후 우클릭 -> 연결선 편집
14

15. 팁7. 윤곽과 레이어 윈도우
 상단 보기 메뉴 -> 윤곽과 레이어
15

16. 팁8. 스크래치 패드
 좌측 도형 패널 -> 스크래치 패드 영역에 자주 사용하는 객체 끌어다 놓기
16

17. 팁9. 플로우 애니메이션
 연결선 선택 후, 스타일 탭 하단에 [Flow Animation] 옵션 체크
17

18. 팁10. 데이터 편집
 우측 다이어그램 탭에서 [데이터 편집] -> 속성 이름과 값 입력
 해당 속성 값을 사용할 객체 선택 후 우클릭 -> 데이터편집 -> 변수화 체크
 텍스트 라벨에 %속성명% 사용
18

19. 감사합니다.
Q & A
19