리버티게임:Mermaid

• 도움말 목차로 가기

Mermaid는 소프트웨어/서비스의 설계에 필요한 UML(Unified Modeling Language) 다이어그램을 그리기 위해 고안된 모델링 언어입니다.

리버티게임에서는 Mermaid 파서 확장 기능을 통해 게임 기획 및 설계를 한눈에 보이는 그림으로 그릴 수 있습니다.

사용법

기본적으로 다음과 같은 형태로 작성합니다. 해당 다이어그램 문법 예시는 공식 GitHub 저장소 안내문에 있는 순차 다이어그램 예에서 가져왔습니다.

{{#mermaid:
stateDiagram-v2
[*] --> Still
Still --> [*]
Still --> Moving
Moving --> Still
Moving --> Crash
Crash --> [*]
}}

결과는 다음과 같습니다.

순차 다이어그램 그리기

리버티게임 내 게임의 절대 다수를 차지하는 하이퍼텍스트 어드벤처 게임의 기획을 작성한 후 설계를 할 때에 가장 적절한 UML 다이어그램으로 순차 다이어그램을 꼽을 수 있습니다. 순차 다이어그램은 현재 프로그램이 있는 상태와 사용자의 링크 클릭 같은 이벤트(Event)로 행동을 취해야 할 때 다른 상태로 옮겨가도록 표시하는 전이 화살표로 구성됩니다. 위 그림을 살짝 변형해 '링크게임'이라는 게임이 있다고 치고 설계도를 볼까요?

{{#mermaid:
stateDiagram-v2
title: 링크게임
1: 링크게임/상황1
2: 링크게임/상황2
success: 링크게임/통과
end: 링크게임/엔딩
fail: 링크게임/패배
title --> 1
1 --> fail
1 --> 2
2 --> 1
2 --> success
success --> end
}}

결과는 이렇습니다.

여러분들이 만든 게임에 엔딩이 하나 뿐일 때 게임의 타이틀 문서(최상위 문서)를 맨 위의 검은 점, 게임의 엔딩 문서를 맨 아래 점으로 가정하면 여러분의 하이퍼텍스트 링크 게임은 위 그림을 엄청난 규모로 키운 모양이 될 것입니다. 왜냐하면 각 문서를 상태로 보고, 문서를 이어주는 링크를 화살표로 생각하면 문서 하나 추가할 때마다 상태를 나타나는 네모가 하나씩 늘어나기 때문입니다. 사용자가 링크를 클릭할 때마다 화살표를 따라 다음 문서로 이동하는 모양을 순차 다이어그램을 통해 한 눈에 볼 수 있습니다. 그럼 다른 사람이 여러분의 게임 제작을 도와줄 때 어떻게 문서를 연결할지 알 수 있습니다.

그럼 어떻게 저것을 작성할까요? 먼저 Mermaid로 순차 다이어그램을 작성하려면 다음과 같이 시작합니다.

{{#mermaid:
stateDiagram-v2

그리고 다음과 같이 끝나야 합니다.

}}

그 사이에는 먼저 (키 이름) : (값 이름) 형태로 키-값 쌍을 적어서 상태를 정의해야 합니다. 상태의 이름을 영어랑 숫자를 섞어 여러분이 원하는 대로 적절히 정해 키(key) 이름으로 삼으시고, 값 이름에는 보통 문서 이름을 경로까지 전부 넣습니다. 예를 들어 key1 : 링크게임/시작 과 key2 : 링크게임/끝 두 개의 상태를 한 줄씩 적었다고 합시다.

상태를 다 정의했다면 이제 그 아래에 한 줄 씩 (키 하나) --> (다른 키 하나)로 이름을 이어 전이 화살표를 만들어 줍니다. key1 --> key2처럼 말이죠. 화살표 양쪽의 키는 위에서 적었던 키 이름 대로 정확하게 똑같이 적으셔야 합니다.

{{#mermaid:
stateDiagram-v2
key1 : 링크게임/시작
key2 : 링크게임/끝
key1 --> key2
}}

그러면 이렇게 연결이 됩니다.

이제 상태를 더 적고, 전이 화살표를 더 추가하면 여러분의 게임에 필요한 만큼 설계도가 되는 그림을 그릴 수 있습니다. 다른 사람과 함께 게임을 만들 때 필수적이고, 여러분이 프로그래밍을 한다면 설계도가 더 중요합니다! 한 번씩 Mermaid를 쓰는 법을 연습하시면 좋은 게임을 만들기 쉬워집니다!