얼마전 부터 마크다운(Markdown)으로 작성하는 문서 작성에 많이 꼿혀 있읍니다. 이전에는 단순이 html을 쉽게 generating하는 기능만 있었는데 최근에 어플리케이션들은 각자의 특성과 용도에 맞게 확장하여 기능을 제공하고 있습니다. 저는 가급적 Publishing만 할 문서이면 이제 마크다운을 이용하여 작성하고 있습니다.

이 글은 제가 지금까지 “괜찮네..” 라고 생각되는 도구들을 정리하는 차원에서 적는 글입니다. 사견(私見)이 다분하니 감안하고 읽고 참조하시고 더 좋은 도구가 있으면 추천도 부탁드리겠습니다.

1. Marp

얼마전에 Pycon Korea의 발표자료들을 죽 봤는데 50%이상의 자료들이 이 Marp로 작성된 pdf였었습니다. 업무용을 작성되고 있는 기업들이 만들어내는 파워포인트들을 보면 기능들이 너무 많이 제공이 되어 결과물들을 보면 여러가지 기능들이 산만하게 얹혀있는 느낌을 지울수가 없습니다. Marp는 마크다운이 제공하는 깔끔한 기능에 문서 크기 및 문서 구분을 해 주는 자체 스크립트를 내장, 파워 포인트 페이지 및 A4, A5 용지 등의 크기를 정해 문서 작성을 할 수 있습니다. 폰트 사이즈를 세밀하게 정하려면 약간의 Hack이 필요한데 이는 스타일 태그를 쓰면 간단히 해결가능합니다.

<span style="font-size:11pt">/*11포인트로 기본 사이즈 셋팅*/

그리고 markdown에서 가장 취약점이 표 그리기 입니다. makrdown문법의 표 그리기는 rowspan이나 colspan을 전혀 지원하지 않지요. 저는 이의 보강을 위해 html온라인편집기 를 사용하여 테이블 코드를 생성하여 붙여넣기를 하고 있습니다.

결과물은 아래와 같은 느낌으로 작성이 됩니다. 저는 협업이 필요한 경우를 제외하고는 대부분 문서를 Marp로 작성하여 pdf로 공유하고 있습니다.

2. GUIFlow

정부 과제 및 감리 대응등을 하다 보면 많은 개발산출물들을 작성해야 합니다. 화면 흐름도, 화면 정의서, 기능 정의서 등을 작성시에 내부적으로 일정 가이드가 있으면 좋겠지만, 가이드가 없는 경우가 많고 가이드가 있다 하더라도 파워포인트 등 오피스 도구로 이를 그려내기는 어렵지는 않지만 상당히 귀찮고 신경이 쓰이는 작업 입니다.

여기 화면흐름도 작성을 위한 마크다운을 이용한 흐름도 생성기가 있습니다. 아직은 0.3.2 정도의 버전이라 기능이 그렇게 안정적으로 돌아가진 않습니다. 한글 처리도 다소 미숙합니다. 그리고 큰 단점중의 하나는 사용설명서가 없어 사용을 하려면 여기저기 웹 서핑을 해야 한다는 것입니다.

화면흐름도의 양식은 딱 정해진 것은 없습니다만, 여기에서 사용하는 양식은 아래와 같습니다.

[화면 명]  --> 화면명 입력
화면 설명   --> 해당 화면에 대한 설명 입력. 가급적 화면 요소에 대한 설명을 자세히 
---
화면요소#1  --> 화면 요소(버튼, 이미지, 입력 창 등) 
화면요소#2

화면 요소 아래행에 ==> 을 넣고 여기에서 전이될 다른 화면명을 넣으면 위 그림과 같이 타원형으로 전이될 화면명이 자동으로 생성됩니다.

결과물을 저장은 스크립트만 txt파일로 저장 가능합니다. 오른쪽의 다이어그램의 저장은 아래화살표(⬇️) 를 클릭하면 클립보드로 이미지가 복사되어 별도의 파워포인트 파일이나 이미지 편집 프로그램에 붙여넣기를 하여 저장해야 합니다 .

화면흐름도의 중요성은 다른 분의 블로그를 참조하시기 바랍니다. 제품 기획에서 화면흐름도가 정의안되어 있으면 뼈대가 없는 것과 마찬가지 입니다.

IT스타트업 외주 개발 왜 실패할까?

3. Stackedit.io

아쉬울 때 사용가능한 마크다운 에디터 입니다. 제가 이 사이트를 언급한 이유는 다름이 아닌 UML –> 시퀀스 다이어그램 작성 기능 때문입니다.

원래는 Javascript API형태로 Mermaid라는 라이브러리가 있습니다. 이를 사용하려면 Frontend프로그래밍에 대한 지식이 좀 있어야 하는데요. 전 없습니다. T_T;

다행히 Stackedit사이트는 이 API를 내장하고 있어 시퀀스 다이어그램 기능을 제공하고 있어 간단한 부분은 쉽게 그릴 수 있습니다 .

스크립트는 sequence 아래 부분 입니다. 부분 입니다. 스크립트가 어떻게 구현되는지는 위 이미지를 보시면 잘 알 것 같습니다. 그 외에 FlowChart도 같이 지원을 합니다만, 제 경험상 FlowChart는 작성방식이 좀 복잡하여 잘 안쓰게 되는 것 같습니다. Flow Chart 예제는 아래와 같습니다.

결과 다이어그램은 저는 html로 저장을 하여 이를 다른 문서에 붙여넣어 사용을 하고 있습니다.