소프트웨어 설계를 하다 보면 UML 다이어그램으로 표현해야 할 일이 종종 있다. 객체지향 설계이거나, 여러 가지 모듈이 연동되어 동작하는 시스템이거나 또는 상태 변화를 설명해야 할 때 UML 다이어그램은 아주 좋은 표현 방법이다.

다이어그램은 그림이다. 컴퓨터를 이용해 그림을 그리려면 그림판과 같은 도구가 필요하다. (물론 그림판으로 다이어그램을 그리는 장인은 게으른 개발자 중엔 없으리라 생각한다) 당연하게도 오래전부터 UML 다이어그램을 그리기 위한 많은 도구가 개발되어 사용되고 있다. 역사와 전통을 가진 IBM의 Rational 시리즈, Boland의 Together Architect, MS의 Visio 그리고 국산 UML 도구의 대명사 Plastic을 오픈소스화한 StarUML 등이 대표적이라 할 수 있다. UML 도구는 아니지만, PowerPoint나 Keynote 같은 프레젠테이션 도구를 이용하는 ppt 장인들도 있다. 모두 강력한 도구임은 분명하다. 그런데 모두 GUI를 가진 도구이다. 마우스를 이용하기 위해 키보드에서 손이 떨어지면 생산성도 떨어질 것 같아 자괴감이 드는 개발자들에게는 굉장히 귀찮은 도구가 아닐 수 없다.


키보드만으로 다이어그램을 그릴 수는 없을까?

우리는 이미 오래전 키보드만으로 진행하는 텍스트 기반의 온라인 RPG 게임인 MUD를 경험했다. 커맨드를 입력하고, 뇌내(腦內) 그래픽카드를 풀가동해 머릿속에 화려한 맵을 그리며 게임을 했던 바로 그 경험 말이다. 연식 인증?

mud-game

MUD 게임의 이 화려한 그래픽을 보라!


그 경험처럼 텍스트만으로 다이어그램을 표현해보자.

Alice -> Bob: Authentication Request
Alice <- Bob: Authentication Response

예제는 Alice가 Bob에게 인증을 요청하고 Bob이 요청에 대한 응답을 주는 절차를 표현한 간단한 문장이다. 이름과 화살표, 그리고 동작을 직관적으로 설명하고 있다. 그대로 다이어그램으로 바꿀 수 있으면 좋을 것 같다. 그리고 그런 일이 실제로 가능하다. 오픈소스 UML 도구인 PlantUML을 이용하면 된다.

plant-uml-logo

이제 다이어그램도 공장에서 찍어내겠어!


PlantUML을 이용해 예제를 시퀀스 다이어그램으로 변환하면 다음 그림과 같다.

seq-diagram

Awesome!! GUI 도구를 이용해 같은 다이어그램을 그리려면 인스턴스 둘을 끌어다 놓고, 라벨링을 두 번 하고, 화살표를 두 번 연결하고, 또 라벨링을 두 번 해야 한다. 우리의 손은 마우스와 키보드를 넘나들며 바쁜 시간을 보낼 수밖에 없다. 게다가 칼각을 원하는 강박증 환자라면 어긋난 1 ~ 2 픽셀에 스트레스를 받으며 저주받은 손을 원망하고 있을 것이 뻔하다.


설치 방법

PlantUML은 Java로 구현되어 있으므로 JVM만 돌아갈 수 있으면 어떠한 머신에서도 동작한다. 가장 쉬운 설치방법은 웹사이트의 다운로드 페이지에서 미리 컴파일된 jar 파일을 받아 사용하는 것이다. 이클립스나 IntelliJ를 이용한다면 플러그인으로 설치할 수도 있다. 역시 웹사이트를 참조하자.

키보드에서 손을 떼기 싫어서 PlantUML을 사용하려는데, 웹사이트에서 내려받기 위해 마우스를 잡아야 한다는 것이 모순으로 느껴질 수도 있다. 그런 키보드 성애자분들에게는 cli를 이용해 설치하는 방법을 추천한다.

Ubuntu

$ sudo apt-get install plantuml

CentOS

$ sudo yum install plantuml

macOS

$ brew install plantuml


사용 방법

시퀀스 다이어그램을 표현했던 앞의 예제를 PlantUML 문법으로 표현하면 다음과 같다.

@startuml
Alice -> Bob: Authentication Request
Alice <- Bob: Authentication Response
@enduml

그대로 txt 파일로 저장하고 plantuml을 실행하면 위와 같은 다이어그램 이미지 파일이 생성된다.

$ plantuml filename.txt

클래스 다이어그램은 다음과 같이 표현할 수 있다.

@startuml
class Class01 {
  String data
  void methods()
}
Class01 <|-- Class02
@enduml

거의 코드 수준이다. 개발자에게 이보다 더 좋은 문법이 있을 수 없다. 역시 txt 파일로 저장하고 plantuml을 실행하면 다음과 같이 클래스 다이어그램이 생성된다.

class-diagram

그렇다면 스테이트 다이어그램은 어떨까?

@startuml
[*] --> Running: Start
Running --> Pause: Pause
Pause --> Running: Resume
Running --> [*]: Stop
@enduml

state-diagram

시퀀스 다이어그램의 문법과 거의 흡사한 문법으로 스테이트 다이어그램을 얻을 수 있다.

이 밖에도 유즈케이스, 액티비티, 컴포넌트 다이어그램 등 UML 다이어그램 대부분을 간단하고 직관적인 문법으로 표현할 수 있다. 다이어그램에 따라 문법이 조금씩 다르지만, 전체적으로 볼 때 직관적이다 하는 그런 기운이 느껴진다. 자세한 문법은 역시 웹사이트를 참조하자. 한글 매뉴얼을 제공하고 있어 쉽게 학습할 수 있다.


약을 한번 팔아보자.

다이어그램을 그려야 하는데 다음과 같은 문제가 있어 어려운 분에게 이 약 PlantUML을 강력하게 추천한다.

  • 키보드에서 손을 떼면 생산성이 떨어진다고 생각하는 키보드 성애자
  • 마우스를 사용하면 생산성이 떨어진다고 생각하는 마우스 혐오자
  • 마우스 때문에 손목이 아픈 손목 터널 증후군 환자
  • 1 ~ 2 픽셀이 어긋나 있는 것을 두고 볼 수 없는 라인 강박증 환자
  • bash와 vi가 없으면 아무것도 할 수 없는 리눅스 덕후
  • MUD 게임의 향수에 젖어 있는 아재 개발자
  • 회사에서 고가의 UML 도구를 사주지 않아 파워포인트로 한 땀 한 땀 그리고 있는 PPT 장인

이제 PlantUML로 글 쓰듯 다이어그램을 그려보자.