디자인 툴에 관한 단상

시대가 지나도 장인은 도구 탓을 하지 않는다.

1. 디자인 툴 실력이 디자인 실력이라고 생각하던 시절이 있었다. 내가 디자인을 못하는 이유는 잘 다루지 못하기 때문이라고 생각했다. 새로운 툴은 뭐가 있는지 찾아보고, 책을 사거나 강의를 듣곤 했다. 무엇보다 어떻게가 더 중요하다고 생각했다.

2. 장인은 도구 탓을 하지 않는다. 그의 실력은 그의 도구에서 나오는 게 아니라 경험과 직관에서 나온다. 어떻게 만드는 지보다 무엇을 만드는지가 더 중요하다. 분야도, 툴도 상관없다. 프로덕트 디자인이든, UX 디자인이든, 인터랙션 디자인이든, 산업 디자인이든, 그래픽 디자인이든 상관없고, 포토샵이든, 피그마든, 스케치든, 아두이노든, 라이노든, 시네마 4D든, 뭐든 상관없다. 좋은 디자인은 툴에 달려있지 않다.

3. 이전 회사에서는 UI를 파워포인트로 그렸다. 처음에는 너무 불편했다. 이걸로 대체 무슨 디자인을 하나 싶었다. 더 좋은 방법이 있을 거라 생각했고, 이런저런 툴을 제안해봤다. 그러나 비용, 작업 환경, 협업 부서, 업무 프로세스의 제약이 너무 컸고, 워낙 큰 조직이다 보니 일개 실무자의 힘으로 할 수 있는 건 없었고, 파워포인트로 디자인하는 것에 적응해야만 했다. 그 안에서도 효율을 찾아야 했기 때문에 나름의 방법을 찾아나갔다.

1px는 1mm로 표현하여 UI가 설계에 그치지 않도록 했고, 12열 그리드 시스템을 강제적으로 사용하게 만들어서 레이아웃이 화면마다 들쭉날쭉하지 않도록 했다. 또한 모든 경우의 수의 디자인 컴포넌트와 UX 패턴을 만들어서 ppt 파일에 정의한 후 팀과 협력사에 배포하고, 디자인할 때 꺼내서 조립할 수 있게 했다. 세련된 방법은 분명 아니지만, 주어진 제약사항 안에서 할 수 있는 최선이었다. 처음에는 우왕좌왕했지만, 이내 파워 포인트로도 그럭저럭 괜찮은 화면을 그릴 수 있었다.

4. 플렉스는 프레이머를 쓴다. 코드로 구현한 디자인 시스템의 컴포넌트 위에 프레이머에서 프로퍼티를 조정할 수 있는 인터페이스를 붙여서 프레이머에서 디자인한 결과와 실제 구현체 사이의 차이가 없도록 했다. 이는 디자인을 보고 코드로 옮기는 과정에서 발생하는 개발자와 디자이너의 커뮤니케이션 비용을 낮추고 있으며, 코드를 이해하는 디자이너가 중간다리 역할을 하며 조율을 해나가고 있다.

개발 관점에서 고려된 인터페이스와 프레이머의 툴적인 한계로 인해 디자이너의 창의성을 제한하는 부분도 있고, 이 환경에 적응하는 데 걸리는 시간은 분명 있지만, 우리가 만들고 있는 복잡도 높은 B2B SaaS 프로덕트에서는 오히려 이런 제약사항이 현재까지는 효율성과 퀄리티 모두를 가능하게 하고 있다고 생각한다. 피그마가 현존하는 디자인 툴 중 가장 뛰어난 툴이라는 건 말해 뭐하냐만, 현재 우리 팀의 규모, 우리가 만들고 있는 프로덕트의 상황에서 프레이머는 최선의 선택이 아니었나 싶다.

나는 아이디어를 내거나 콘셉트를 만들 때는 피그마나 다른 툴을 사용하고, 실제 프로덕트에 들어가는 화면을 디자인할 때는 프레이머를 사용하는 식으로 적절히 나눠서 사용하고 있고, 필요한 경우에는 코딩도 조금씩 하면서 프레이머에 살을 붙이고, 프런트엔드와 디자이너 사이의 간극을 좁혀보려고 노력하고 있다.

5. 처음에는 어떤 디자인 툴을 다룰 수 있는지가 중요할 수는 있다. 그러나 경험과 연차가 쌓이고, 무엇을 디자인해야 하는지 알게 된다면, 툴은 별 상관이 없어 진다. 툴은 당신을 조금 더 편하게 해 줄 뿐, 디자인을 직접 해주는 건 아니기 때문에. 그렇다고 한 가지 툴을 고집해서도 안된다. 커뮤니티에서 어떤 툴이 떠오르고 있는지 예의 주시하며 나와 팀의 생산성을 높여줄 수 있다면 과감히 바꿀 수도 있어야 한다. 시대가 지나도 장인은 도구 탓을 하지 않는다.

한 때 나의 주력 디자인 툴이었던 아두이노