draw.io 의 벡터 파일과 아래아 한글

draw.io 의 로고

draw.io는 순서도를 깔끔하게 만들 수 있는 정말 유용한 웹사이트 중의 하나이다. 과거 순서도는 파워 포인트나 아래아 한글의 도형을 이용해서 만들었지만, 가끔 새로운 것도 시도해 보고 싶어서 최근에 과제 목적으로 잠깐 써봤다.

draw.io의 기본적인 저장 형식은 XML이나 HTML로 저장이 되지만, 내보내기 기능을 통해 JPEG, PNG, SVG, PDF등 여러 형식으로 만들 수도 있었다.

내가 넣고 싶었던 그림^[각주:1]

과제를 하면서 순서도 파일을 이미지가 아닌 SVG 파일로 만들어 아래아 한글에 첨부를 해보면 어떨까? 라는 생각에 내보내기 기능을 통해 SVG 파일을 만들어서 아래아 한글에 그림으로 삽입해봤다.^[각주:2] 그랬더니 지원하지 않는 그림 형식이라며 오류가 나온다. 브라우저에서는 잘 읽히는데, 한글에서는 왜 이럴까...

ᄒᆞᆫ글

❌ 지원하지 않는 그림 형식입니다.

내가 겪은 메세지

혹시나 PDF 문서로 첨부는 될까 해서 draw.io 에서 PDF 형식으로 저장 한 다음 붙여넣기를 시도해 보았으나... 안타깝게도 한글은 PDF를 지원하지 않아서 첨부가 불가능 했다.

그래서 이번에는 또 다른 벡터 포맷인 WMF로 붙여넣어 보기로 했다. drow.io 에서는 WMF 내보내기를 지원하지 않아서 SVG 파일이나 PDF 파일을 우선 만든 다음에 cloudconvert.com 을 통해 변환해야 했다.

우선 SVG 파일을 WMF로 변환해서 한글에 붙여놓아 보았다. 그랬더니 일부가 [Not supported by viewer] 라는 문구로 대체되거나  '</br>' 과 같은 줄바꿈 태그가 적용되 않는다는 것을 확인했다.

SVG -> WMF 로 변환 할 때

혹시나 해서 draw.io 에서 PDF로 내보낸 후, WMF 로 변환을 한 뒤 아래아 한글에 첨부를 해보았다. 그랬더니 블록은 보이지만 블록 내부의 글자가 제대로 표시 되지 않았다.

PDF -> WMF 로 변환 할 때

SVG -> WMF 변환시 발생하는 문제의 원인은 아마도 SVG를 WMF로 변환할 때 사용한 cloudconvert.com이 HTML 라벨을 지원하지 않아서 생기는 문제인 것 같았다.^{[각주:3][각주:4]}

그리고 PDF -> WMF 변환시 발생하는 문제의 원인은 변환 중에 글자 정보가 깨져서 그런게 아닌가 추측을 해볼 수 있었다.^{[각주:5][각주:6]}

정말 벡터 그래픽으로는 한글 파일에 첨부를 못하는 것일까? 하고 고민을 하던 찰나... PDF의 텍스트가 깨진다면 Inkscape의 PDF 불러오기 기능 중, PDF의 텍스트를 텍스트 대신 선(텍스트가 아닌 벡터 그래픽)으로 바꾸는 Poppler/Cairo Import를 사용하면 어떨까 생각을 해서 당장 시작해봤다.^[각주:7]

Inkscape의 PDF 불러오기 설정

Inkscape에도 WMF로 저장하는 기능이 있었지만, Inkscape로 저장하니 아래아 한글에서는 그림 일부분만 표시되어 SVG로 우선 저장을 했다.^[각주:8] 그 뒤에 cloudconvert.com을 사용해 SVG를 WMF로 변환했다. 그래도 일부분만 나오는 것은 똑같았다.

그래서 또 한참 고민하다가, 한글에서 WMF 대신 EMF도 지원하는 것을 발견했다. Inkscape에서 EMF로 파일을 저장하고 한글에 붙여넣기를 했다.^[각주:9] 그랬더니 정말 잘 표시가 된다...

온전히 변환된 걸 확인할 수 있다

혹시나 싶어서 PDF가 아닌 SVG파일을 불러와도 될까? 했는데, SVG 파일을 읽으면 Inkscape에서도 [Not supported by viewer] 가 나타나는걸 볼 수 있었다.

요약

한글에 벡터 그래픽으로 draw.io 그림을 불러오기 위해 아래와 같은 절차를 거치면 된다.

1. Inkscape를 설치
2. draw.io 에서 PDF로 내보내기
3. Inkscape에서 저장된 PDF 열기
    - 불러오기 옵션으로 Poppler/Cairo Import를 선택해야한다.
4. EMF 형식으로 저장
    - 저장 옵션은 Convert Text To Path만 선택했다.
   

참... 힘들다. 이렇게 해버리면 SVG편집을 하기가 힘들긴 하지만 일단은 되긴 하니까...

그냥 차라리 PNG로 첨부 하거나 부록으로 첨부한다고 명시하고 PDF로 따로 제출하는게 나은 것 같다.

여담

• 참... 이게 무슨 짓인지... 그냥 PNG로 첨부하는게 낫겠다. 한글은 벡터 파일 지원에 좀 약한것 같아 아쉽다.
  
  
  
• 혹시라도 아래아 한글이 PDF 끼워 넣기가 지원 된다면 정말 멋질탠데, HWP 구조상 힘들어서 기능을 안 넣는건가 싶다.
  
  
  
• draw.io의 내보내기 기능을 통해 SVG로 만들어진 파일은 IE11과 호환이 잘 안되서 </br> 태그가 난무하는 것을 볼 수 있는데, 이 점은 draw.io 개발팀도 인지 하고 있다고 한다. 그런데 그 문제를 다룬 글이 2017년 10월에 올라왔는데, 현재까지 수정이 안된 것을 보면 고치는게 힘드나 보다.
  
  
• IE11에서 표시가 잘 안되는 것을 보니, draw.io를 사용할 때, Word wrap과 Formatted text 체크를 풀고 사용하는 것도 한 번 고려해 봐야겠다. 해당 옵션을 사용하지 않으면 IE11에서 문제가 없다고... 그런데 그러면 줄 바꿈이 되나??
  

출처

draw.io 로고 - draw.io

[본문 SVG 파일]

drawio_logo.svg

testdiagram_original.svg

testdiagram.svg

testdiagram2.svg

1. 아래에 후술한 방법대로 Inkscape를 통해 변환을 한 파일이다. 그래서 IE11에서도 잘 보인다... [본문으로]
2. 아래아 한글의 버전은 2014VP 현 상태 기준으로 가장 최근 버전으로 업데이트 되어 있었다. [본문으로]
3. 이 문제는 IE11 에서 SVG 파일을 열때와 동일하게 현상이었다. 알고보니 해당 프로그램의 뷰어나 편집기가 HTML 포맷을 잘 지원하지 못해서 그런거라고 한다 [본문으로]
4. 참고: desk.draw.io/support/solutions/articles/16000042487 [본문으로]
5. PDF를 다른 뷰어로 열었을 때는 글자 출력/복사가 정상적으로 된다. [본문으로]
6. 혹시나 싶어서 PDF를 다른 사이트로 SVG 변환을 해봤는데, 한글을 비트맵으로 변환해버리는 등, 문제가 완벽히 해결되지는 않았다. [본문으로]
7. Inkscape의 버전: Inkscape 0.92.3 (2405546, 2018-03-11) [본문으로]
8. Inkscape로 열면 잘 표시되는 걸 보아, 파일 규격에 문제가 있는 것 같다. [본문으로]
9. 저장 시에 EMF Output 설정 화면이 나오는데, 여기서 Convert Text To Path를 제외하고는 다 체크를 풀었다. [본문으로]