바로 09 커서로 마인드맵 그리기

박현규25 / 35절읽는 시간 약 4분

앞에서 우리는 마크다운이라는 개념을 처음 익히고 프레젠테이션과 워드 문서를 작성했습니다. 마크다운으로는 문서 작성만 할 수 있을까요? 그렇지 않습니다. 마크다운의 사용 방법은 무궁무진한데 이번에는 마인드맵, 흐름도, 수학 수식 등 아이디어를 더 풍부하게 표현할 수 있는 마크다운 활용법을 소개합니다.

기억하고 있나요?

마크다운에서 제목에 사용하는 기호는 무엇이었나요?

마크다운 문서를 워드로 변환하는 도구 이름은 무엇이었나요?

정답: # 기호입니다.

정답: Pandoc입니다.

이 방법은 보고서 작성과 같은 일상 업무는 물론이고, 앞으로 바이브 코딩으로 여러분만의 서비스를 기획하고 설계하는 데도 요긴하게 쓰일 겁니다. 예를 들어 서비스의 전체적인 흐름을 설계할 때 ‘이 버튼을 누르면 어떤 화면으로 넘어가는지’ 흐름도를 그린다거나, 서비스에 들어갈 데이터의 구조를 마인드맵으로 시각화할 수도 있겠죠?

마크다운과 함께 동작하는 Mermaid라는 시각화 문법을 사용하면 마인드맵을 쉽게 그릴 수 있습니다. 물론 여러분은 이 문법을 몰라도 괜찮습니다. 단지 ‘Mermaid로 ~를 해줘’라고 시키면 되는 거죠. 그럼 계속해서 마인드맵을 그려보겠습니다.

커서에서 Mermaid 마인드맵을 확인하려면 Marp를 설치했던 것처럼 확장 프로그램을 설치해야 합니다. ‘Mermaid’로 검색하여 ‘Markdown Preview Mermaid Support’를 찾고 [Install]을 눌러 설치하세요.
Mermaid로 애플의 역사 문서를 바탕으로 마인드맵을 그려보라고 하겠습니다. 마크다운 문서를 컨텍스트로 추가한 다음 [Agent] 모드로 부탁하면 됩니다.

NOTE

여기서는 마인드맵만 그리지만 Mermaid로는 흐름도를 그리는 등 다양한 그림을 그릴 수 있습니다.

프롬프트

이 문서를 바탕으로 Mermaid로 마인드맵을 그려주고, 마인드맵만 표현한 파일을 새로 만들어줘.

AI 답변

Mermaid 마인드맵 파일을 생성했습니다. apple_history_mindmap.md 파일에는 애플의 역사를 시기별로 정리한 마인드맵이 포함되어 있습니다. 마인드맵 구조: • 설립과 초기 성장 (1976-1984): 설립, 애플 I, 애플 II, IPO, 매킨토시 • 어려운 시기와 재기 (1985-1997): 스티브 잡스 퇴임, 경영난, 복귀 • 혁신의 시대 (1998-2011): iMac, iPod, iTunes Store, iPhone, iPad • 팀 쿡 시대 (2011-현재): 주요 제품 및 혁신들 • 현재: 현재 상태와 생태계 Mermaid를 지원하는 마크다운 뷰어(GitHub, GitLab, 일부 에디터)에서 마인드맵이 렌더링됩니다.

파일을 보면 텍스트만 가득이지만 프리뷰로 결과를 보면 멋진 마인드맵이 보입니다.
더 멋진 마인드맵을 보고 싶다면 Mermaid 문법을 지원하는 웹사이트를 이용하면 됩니다. mermaid.js.org는 무료로 Mermaid 마인드맵 프리뷰를 제공합니다. 테마도 다양합니다. 사이트에 접속한 다음 오른쪽 위에 보이는 [Open Editor] 버튼을 누릅니다. 그러면 Pro를 추천할 텐데 [Start Free]를 눌러 화면을 넘어가면 됩니다.

마인드맵 프리뷰 사이트 : mermaid.js.org

나타난 화면 왼쪽에는 Mermaid 텍스트를 입력할 수 있는 입력 창이 있습니다. 여기에 에서 받은 apple_history_mindmap.md를 그대로 복사하고 붙여넣으면 됩니다.

NOTE

주의할 점은 mindmap으로 시작하는 부분부터 ``` 이전까지만 복사해야 한다는 겁니다.

그러면 실시간 프리뷰로 마인드맵이 나타납니다. 테마를 바꾸고 싶다면 왼쪽 위에 있는 [Playground] 버튼을 누르고 버튼을 누른 뒤 테마를 바꾸면 됩니다.

마음에 드는 테마로 이미지를 만든 다음 캡처해 사용하면 간편하게 멋진 마인드맵을 문서에 넣을 수 있습니다.