설계를 그림으로 확인하는 웹앱 -crubier-

개발자 회의가 끝나면 화이트보드는 각종 화살표와 도형으로 가득차있고, 책상은 포스트잇으로 덮여있다. 이제 대략적으로 테스트 코드를 통해 고객의 요구사항을 분석하기만 하면 된다. 

그리고 다음날..

어저께 작성한 화이트 보드를 다시 봤더니 뭔가 테스트 코드를 작성할 엄두가 나지 않는다. 뭔가 정리가 필요하다. 대부분 이 시점에서 개발자 vs 기획자의 첫번째 대첩이 발생한다. 기획자는 개발자의 설계를 100% 이해할 수 없고, 개발자는 기획자의 요구를 100% 반영할 수 없다. 

crubier가 필요한 순간

crubier는 기획자 vs 개발자의 단절을 막기 위해 등장한 웹 앱이다. 아래 사진을 보자.

사진이 작지만 왼쪽에는 코드, 오른쪽에는 UML이라는 점을 알 수 있다. 사실 오른쪽 그림은 UML이라기보다 순서도에 가깝다.(그냥 순서도라 하자) 그래서 기획자들과 의사소통하기에 더욱 좋다. 소프트웨어 설계 교육용으로도 가능할 듯하다.

좋은 점

* 디버깅

crubier는 자바스크립트에 대해서 디버깅 기능을 제공한다. 문법적으로 권고사항을 어겼을 때는 경고표시(화살표)가 나오며, 실행되지 않는 코드는 에러표시가 뜬다. 디버깅 기능은 자바스크립트로 코딩연습을 할 때도 꽤 유용하게 사용할 수 있다.

* ES6+ 지원 

class, 화살표, map, setter, getter, 등 ES6++이후의 새로운 명세를 대부분 지원한다. 코딩이 순서도로 변하기 때문에 예전 방식과 뒤엉키더라도 그림으로 본다면 누구나 이해할 수 있는 부분은 꽤 만족스럽다.

* 코드 업로드 & 순서도 다운

crubier의 장점은 언어에 관계없이 코드를 업로드 할 수 있고, 순서도를 다운받을 수 있다는 점이다. 자바스크립트 이외의 언어도 순서도로 만들 수 있는데 자바스크립트 이외의 언어를 시험해보지는 않았다. 아마도 되는 듯하다. 그리고 순서도 이미지를 다운받을 수 있는데, 해당 파일은 해상도에 관계없이 크기를 조절할 수 있는 svg포맷이기 때문에 프린트 하기에도 딱 좋다. 

아쉬운 점

물론 아쉬운 점도 있다. "순서도"라고 부를 수밖에 없는 그림은 연관, 상속, 합성, 집합과 같은 객체지향의 관계를 100% 반영하지 못한다. 반복, 조건문과 같은 논리적 흐름은 파악할 수 있지만 가장 중요한 객체들간의 '관계'를 정확하게 표시 못한다는 점은 다소 아쉬움으로 남는다.

하지만 crubier는 애당초 UML로 개발된 웹앱이 아니다. 

기획자와 개발자간의 의사소통을 위해서 제작된 만큼 프로젝트 성공을 위한 도구로 사용하면 될 듯하다.