다이어그램을 수정할 때마다 상자와 화살표를 다시 옮기기 번거롭다면, 구조를 텍스트로 적어보세요. C2D에서 간단한 서비스 흐름을 그림으로 만드는 방법을 알아봅니다.
개발 문서에 시스템 구조를 설명하려면 상자와 화살표를 그리게 됩니다. 처음 그릴 때는 괜찮습니다. 문제는 서비스가 바뀐 뒤입니다. 상자 하나를 추가했더니 선이 겹치고, 이름이 길어지니 주변 상자를 다시 옮겨야 합니다. 그림 내용보다 정렬에 더 많은 시간을 쓰기도 합니다.
C2D는 다이어그램의 내용을 텍스트로 적고, 그 내용을 SVG 그림으로 바꿔주는 도구입니다. 예를 들어 Client가 API에 요청하고 API가 DB를 조회한다는 관계를 몇 줄로 작성합니다. 변환하면 상자와 연결선이 들어간 그림이 만들어집니다.
그림을 직접 고치는 대신, 구조를 설명하는 텍스트를 고치고 다시 변환합니다.
C2D의 사용 방식
C2D는 어떤 그림에 잘 맞을까요?
C2D는 상자와 화살표로 관계를 보여주는 그림에 잘 맞습니다. 웹 서비스가 어떤 서버를 거치는지, 앱이 어떤 외부 API와 연결되는지, 업무가 어떤 순서로 진행되는지 설명할 때 사용할 수 있습니다.
| C2D로 만들기 좋은 그림 | 다른 도구가 더 편한 작업 |
| 웹 서비스 구성도 | 화면 디자인 시안 |
| API 요청 흐름 | 매출이나 방문자 수 차트 |
| 서버와 데이터베이스 관계 | 사진이나 삽화 중심의 설명 |
| 간단한 업무 순서 | 자유롭게 꾸미는 포스터 |
처음부터 큰 시스템 전체를 그리려고 하면 상자와 선이 너무 많아집니다. ‘사용자 요청이 어디를 거치는가’처럼 그림으로 답할 질문 하나만 정하는 것이 좋습니다. 이번에는 Client, API, DB 세 개만 사용해보겠습니다.
1. 먼저 상자에 들어갈 이름을 적습니다
C2D에서는 그림에 나올 대상을 module로 적습니다. Client 상자를 만들고 싶다면 module Client라고 씁니다. 같은 방법으로 API와 DB도 한 줄씩 추가합니다.
| 입력할 내용 | 그림에 나타나는 대상 |
| module Client | 서비스를 사용하는 클라이언트 |
| module API | 요청을 처리하는 API |
| module DB | 데이터를 저장하는 DB |
이름은 짧게 쓰는 편이 좋습니다. 상자 안에 설명을 모두 넣으면 상자가 커지고 그림이 복잡해집니다. 자세한 설명은 다이어그램 아래의 본문에서 풀어쓰고, 상자에는 대상을 알아볼 수 있는 이름만 남깁니다.
2. 상자 사이의 관계를 한 줄씩 연결합니다
상자를 만들었다면 이제 어느 쪽에서 어느 쪽으로 이동하는지 적습니다. Client --request #1--> API라고 쓰면 Client에서 API로 향하는 요청을 표현할 수 있습니다. 그 아래에 API --> DB를 추가하면 API와 DB도 연결됩니다.
연결선을 한꺼번에 많이 넣지 말고 한 줄을 추가할 때마다 결과를 확인해보세요. 화살표 방향이 반대라면 시작 이름과 도착 이름을 바꾸면 됩니다. 선이 너무 많아 읽기 어렵다면 위치를 계속 조정하기보다 그림을 두 장으로 나누는 것이 더 알아보기 쉽습니다.
3. Convert를 눌러 그림을 확인합니다
텍스트를 입력한 뒤 Convert를 누르면 오른쪽에 다이어그램이 표시됩니다. Client, API, DB 상자가 모두 있는지 먼저 봅니다. 그다음 화살표가 의도한 방향으로 이어졌는지 확인합니다. 그림이 만들어졌다는 사실보다, 처음 보는 사람이 흐름을 이해할 수 있는지가 중요합니다.
- 필요한 상자가 모두 표시됩니다
- 화살표가 올바른 방향으로 이어집니다
- 이름과 연결선이 서로 겹치지 않습니다
- 그림만 봐도 시작점과 도착점을 알 수 있습니다
위치를 바꾸고 싶을 때만 좌표를 사용합니다
자동으로 만들어진 위치가 마음에 들지 않을 때는 모듈 뒤에 위치를 적을 수 있습니다. 미리보기의 module API at 2,0처럼 작성하는 방식입니다. 다만 처음부터 모든 상자에 좌표를 넣을 필요는 없습니다. 기본 결과를 먼저 보고, 꼭 필요한 상자만 옮기는 편이 수정하기 쉽습니다.
4. 그림이 복잡하면 내용을 줄입니다
상자가 늘어나고 선이 여러 번 교차한다면 배치가 잘못된 것만은 아닙니다. 한 그림에 너무 많은 이야기를 넣었을 수 있습니다. 전체 시스템을 보여주는 그림과 로그인 요청만 보여주는 그림을 따로 만들면 각각 훨씬 이해하기 쉬워집니다.
| 그림 하나가 답할 질문 | 넣을 내용 |
| 서비스는 어떻게 구성되어 있나요? | 주요 서비스와 저장소 |
| 로그인은 어떤 순서로 처리되나요? | 로그인에 참여하는 구성 요소 |
| 장애가 나면 어디를 확인하나요? | 요청 경로와 실패 지점 |
5. 만든 SVG와 원본 텍스트를 함께 보관합니다
C2D로 만든 결과는 SVG 형식이라 웹 문서나 README에서 선명하게 볼 수 있습니다. 결과 그림만 보관하지 말고 C2D에 입력한 텍스트도 함께 저장하는 것이 좋습니다. 나중에 서버 이름이나 연결 관계가 바뀌었을 때 원본 텍스트를 고치고 다시 변환할 수 있기 때문입니다.
파일 이름도 역할이 드러나게 정합니다. 전체 구성은 system-overview, 로그인 흐름은 login-flow처럼 구분하면 나중에 필요한 그림을 찾기 쉽습니다. 구조가 바뀌면 원본 텍스트와 SVG를 함께 수정합니다.
처음에는 상자 세 개로 시작해보세요
처음부터 실제 서비스 전체를 옮길 필요는 없습니다. Client, API, DB처럼 익숙한 대상 세 개를 적고 화살표 두 개를 연결해보세요. 변환 결과를 확인한 뒤 이름을 바꾸거나 상자를 하나 추가해보면 C2D의 작업 방식을 금방 이해할 수 있습니다.
C2D의 장점은 그림을 예쁘게 꾸미는 데 있지 않습니다. 구조를 텍스트로 남기고, 내용이 바뀌었을 때 빠르게 다시 그릴 수 있다는 점에 있습니다. 현재 제품 기능과 공개 경로는 FNT-WORKS C2D 소개에서 확인할 수 있습니다.
댓글
0개아직 표시된 댓글이 없습니다.