많은 개발팀에서 프로그램팀의 코딩 작업 없이 디자이너가 입력값들을 직접 제어할 수 있도록 스크립트Script나 데이터 테이블Data Table을 사용한다.

하지만 개발이 지속되다보면 너무 많은 양의 스크립트나 테이블들이 생산되게 되고 전체적인 작업 흐름을 쉽게 파악하기 위해 "구조도 또는 상관도"라고 불리는 간단한 도식을 만들어 사용하게 되는 경우가 있다.

최근에 작업한 Data Tabl은 새로 제작해야하는 테이블이 5개, 이미 만들어진 것과 연결해야하는 테이블이 5개, 도합 10개의 테이블이 서로 연결지어진 작업이었다. 따라서 작업에 앞서 팀원들에게 간단히 설명하기 위한 상관도를 그릴 필요성을 느끼게 되었다.

개인적인 작업 스타일이 실제 테이블 제작에 앞서 마인드맵(Ex. Freemind. 다운로드)으로 먼저 컬럼 리스트를 추려보는 편인데 마인드맵을 펼치다보니 왠지 서로 연결된 컬럼들을 선으로 이어 가시적으로 상관도를 표현하면 좋겠다는 생각이 떠올랐고, 직전 프로젝트에서 잠시 배웠던 언리얼 엔진Unreal Engine 3의 키즈멧Kismet 방식을 차용하면 어떨까 하는 생각이 머리를 스쳤다.

언리얼 엔진의 키즈멧은 디자이너가 직접 여러가지 소스들을 제어할 수 있도록 제공되는 인터페이스로 작업물은 아래 [그림 1.]과 같은 형식으로 나타난다.

[그림 1. 키즈멧의 간단한 예시]

[그림 2. 키즈멧의 다소 복잡한(?) 예시. 연습용으로 만들었던 AI Test 로직이라 흐름이 어렵지 않지만, 실제 개발된 게임들의 키즈멧은 몇백배는 더 복잡하게 만들어진 경우도 많이 볼 수 있다]

항목과 항목들을 드래그&드랍으로 간편하게 연결하면, 위 그림처럼 선으로 연결되어 각 항목간의 상관 관계를 직관적으로 알아볼 수 있다는 장점이 있다.

물론 키즈멧도 작업량이나 방식에 따라 알아보기 어려울 정도의 복잡한 그림과 선으로 표현되게 되는 경우가 많지만, 이번 상관도 작업은 10개의 테이블에 대한 흐름만 표현하면 됐기 때문에 큰 문제는 없을 것으로 판단되어 제작에 들어갔다.

아래는 완성된 상관도 그림이다.

[그림 3-1. Kismet Style로 작성한 Data Table 상관도]

[그림 3-2. 3-1에서 공통 부분인 String과 Graphic을 제거한 뒤 재배치한 모습]

공통적으로 거의 모든 테이블이 참조하게 되는 String(텍스트 테이블)과 Graphic Resource(이미지 테이블)는 주요한 흐름이 아니기 때문에 다른 색상의 가느다란 점선으로 표현해 시계를 가리지 않도록 구성하고, 메인이되는 녹색 박스들의 Monster부터 World까지의 흐름을 검은색 굵은 선으로 표현했다.

키즈멧의 특징인 입출력(Input/Output) 항목에 대한 표현을 활용해 박스의 왼쪽 면에 입력 컬럼을 표시해 어떤 칼럼이 어떤 테이블을 참조하는지 설명하는 것을 중점적으로 표현하려 노력했다.

[그림 4. 두달 전 작업물]

불과 두달 전에 만들었던 흐름도(위 [그림 4.])와 비교해 볼 때 확실히 어떤 부분이 서로 연관되는지 가시적으로 보인다는 점에서 그래도 절반은 성공했다는 생각이 들지만, 전체적인 배치마저 키즈멧의 아날로그적인 배치를 사용하다보니 시선의 흐름이 부자연스러워 진 점은 추후 개선이 필요한 것으로 보인다.

PS. 혹시라도 언리얼 키즈멧을 학습하고 싶은 분이 계시다면, 다음의 링크를 통해 학습하시기를 권장합니다.

키즈멧 관련 페이지: http://udn.epicgames.com/Three/KismetUserGuideKR.html