디지털 디자인 시스템은 오늘날 디지털 제품을 개발하고 서비스하는 모든 기업이 주목하고 있는 주제입니다. 이 글을 통해, 이러한 흐름이 단순한 유행에 그치지 않기를 바라며 논의를 시작해보려 합니다. 디자인의 기원을 어디까지 거슬러 올라가야 할지 고민한 끝에, 서양에서 인쇄 기술이 발전한 시점으로 돌아가고자 합니다. 당시 콘텐츠는 주로 말, 글, 그리고 그림을 통해 전달되었으며, 이를 저장할 수 있는 유일한 수단은 인쇄 매체였습니다. 우리나라의 직지심체요절이나 오랜 세월을 견딘 건축물들이 이러한 역사를 증명하고 있습니다.
산업혁명과 시민혁명, 그리고 두 번의 세계대전을 거치면서 우리는 인쇄 매체보다 음성 및 영상 중심의 콘텐츠 소비 생활을 이어왔습니다. 이는 컴퓨터로, 그리고 더 나아가 스마트폰으로 발전해왔습니다. 이러한 관점에서 평면 조형 디자인에서는 타이포그래피를 디자인하고, 그림과 사진을 인쇄하며, 적절한 배치를 고민해왔습니다. 이러한 배경에서 웹사이트 디자인이 등장했고, 디지털 서비스 디자인이 탄생했습니다. GUI라는 인터페이스의 개발로 인해 그래픽 디자이너들이 디지털 세계에서 활약하게 되었다는 것은 이 시대의 큰 흐름이라 할 수 있습니다.
이와 같이 길게 설명한 이유는, 디지털 서비스에 적합한 디자인 도구와 방법론, 그리고 디자인 교육이 현재 충분히 이루어지지 않고 있다는 결론을 내리고자 함입니다. 과거 그래픽 디자인에서는 인쇄된 이후에는 수정이 불가능했습니다. 한 번 출판된 책을 다시 회수하는 것은 말이 되지 않았습니다. 따라서 당시 디자이너들은 완벽함을 추구하며 밤을 새워가며 조형에 대해 고민하고, 인쇄소에 파일을 넘기며 비로소 안심할 수 있었습니다. 적어도 초기 세대의 디자이너들은 그러했습니다.
그 당시 사용하던 디자인 도구는 쿽(Quark)과 같은 프로그램으로, 파워포인트와 크게 다르지 않은 구조를 가지고 있었습니다. 텍스트와 EPS 이미지를 배치하고, 간격을 맞추며 그리드를 신경 쓰는 작업이 주를 이루었습니다. 현재도 인쇄 매체 쪽에서는 인디자인(InDesign)을 사용하며 동일한 방식으로 작업을 이어가고 있습니다. 그러나 디지털 분야에서는 상황이 많이 변화할 필요가 있다고 생각합니다.
저는 마지막으로 포토샵으로 웹디자인을 작업하던 세대에 속합니다. 제가 포토샵으로 디자인을 작업했다고 하면, 요즘 디자이너들은 말이 안 된다고 생각할 것입니다. 반응형 웹사이트와 웹앱이라는 개념이 도입되고, 시장에서 인증을 받았기 때문입니다. 그리고 교육을 통해 이를 익힌 디자이너들은 이를 자연스럽게 이해하고 있습니다. 반응형 웹에서 가장 중요한 것은 픽셀(pixel) 개념보다는 벡터(vector) 개념이었으며, 고정된 화면보다는 변동 가능한 브레이크포인트가 중요했습니다. 이 시기에 벡터와 브레이크포인트를 다룰 수 있는 툴이 등장했으니, 바로 스케치(Sketch) 앱입니다.
스케치 앱을 사용하면서 10명이 필요했던 작업이 3명으로 가능하다는 것을 확인했을 때, 우리는 환호했습니다. 야근이 그때부터 크게 줄어들었다고 기억합니다. 페이지 단위로 작업하던 것이 메뉴나 기능 단위로 작업할 수 있게 되었고, 일일이 픽셀을 재어 가이드를 만드는 과정에서 벗어나 제플린(Zeplin)에 파일을 업로드만 하면 자동으로 픽셀과 스펙이 생성되는 시대가 열렸기 때문입니다.
하지만 포토샵에서 스케치로 전환될 때, 픽셀에서 벡터로, 그리고 한 화면에서 여러 화면을 볼 수 있게 된 점은 획기적이었습니다. 그러나 이는 큰 틀에서 보면 파워포인트 방식과 크게 다르지 않습니다. 단지 스티커를 붙이고 글을 쓰던 공책을 디지털 서비스로 옮겨놓은 것에 불과합니다. 그렇다면 디지털 서비스의 도구를 변경한다는 것은 어떤 개념일까요?
디지털 제품 디자인이 고정되지 않는다는 점을 고려하면, 우리는 그 틀을 바꿀 수 있습니다. 예를 들어, CTA 버튼의 차원에서만 봐도 동일한 서비스 내에서 CTA 버튼의 색상과 모양이 다를 수 있습니다. 이는 서비스의 특성에 따라 다르지만, 일반적으로 최종 CTA 버튼은 사용자 학습 측면을 고려하여 통일하는 것이 바람직합니다. 초기 구축 시에는 분명 변수를 통제하여 안정적인 서비스 UI/UX를 구축할 수 있지만, 시간이 지남에 따라 다양한 케이스가 발생하게 됩니다. 이 과정에서 다양한 버튼들이 생겨나기 시작합니다.
이를 통일하려면, 과거의 디자인 방식에서는 모든 것을 하나로 모아 통합하고, 이를 공포한 후 지키는 것은 디자이너, 퍼블리셔, 개발자 각 개인의 몫이었습니다. 그러나 디지털 환경에서는 이는 적절하지 않습니다. 너무 많은 이해관계자가 있고, 인력 교체도 빈번히 이루어지는 환경이기 때문입니다. 따라서 통합된 CTA 버튼을 공포함과 동시에 기획자, 디자이너, 퍼블리셔, 개발자 등이 함께 보고 확인할 수 있는 틀이 필요합니다. 또한 이들이 사용하는 용어를 통일해야 합니다. 이것이 디자인 시스템을 구축하기 위한 첫 번째 조건이며, 버전 관리나 변경 사항을 통제할 때에도 반드시 필요한 작업입니다. 변경이 이루어지면, 변경된 컴포넌트를 모두가 사용할 수 있는 틀을 마련해야 합니다.
결국 디지털 디자인 시스템에서 가장 중요한 것은 구성원 간 원활한 커뮤니케이션을 위한 토대를 마련하는 것입니다.