디자인 시스템 방랑기 — 툴과 틀에 대해서

디지털 디자인 시스템은 지금 디지털 프로덕트를 만들고 서비스하는 기업이라면 누구든 관심을 가지고 있다. 이것이 단순한 유행이 되지 않기를 바라며, 글을 시작해보고자 한다. 디자인을 어디까지 거슬러 올라가야 할까 많은 고민을 하다가, 서양에서 인쇄가 발달한 시점으로 돌아가고자 한다. 당시 콘텐츠는 말로 하는 것과 글로 이야기를 전달하는 것 그리고 그림으로 전달하는 방식이 있었다. 당시에 콘텐츠를 저장할 수 있는 것은 당연히 인쇄매체 밖에 없었다. 우리나라에 직지심체요절처럼 그리고 오래 살아남은 건축물처럼.

산업혁명과 시민혁명 그리고 두 번의 세계대전을 지나오면서 우리는 인쇄매체보다 음성 그리고 영상에 더 치중된 콘텐츠 소비 생활을 했다. 그것이 더 발전해 컴퓨터가 되었고 더 발전해 스마트폰이 되었다. 이 관점에서 평면 조형 디자인에서는 무엇을 했는가? 당연히 타이포그래피를 디자인했고, 그림과 사진을 인쇄하고 적절한 배치를 고민했다. 그리고 이 바탕에서 웹사이트 디자인이 생겼고 디지털 서비스 디자인이 생겼다. 그리고 GUI라는 인터페이스가 개발되면서 그래픽 디자이너들이 디지털 세계에서 활약하게 되었다고 보는 것이 큰 흐름이다.

이렇게 길게 이야기한 것은 디지털 서비스에 적절한 디자인 툴과 디자인 방법론 그리고 디자인 교육을 우리는 하고 있지 않다는 결론을 이야기하고자 한다. 과거 그래픽 디자인에서는 한번 인쇄된 이상 돌릴 수 없었다. 다시 발행하지 않는 이상 서점에 풀려버린 책을 다시 회수하는 것은 말이 되지 않았다. 그래서 당시 디자이너는 완벽에 완벽을 기하고 밤을 세워 조형에 대해 고민하고 인쇄소에 파일은 넘기면서 안심을 하고 작업을 종료할 수 있었다. 적어도 우리들의 디자이너 1세대는 그렇게 했다.

그때도 디자인 툴은 쿽이었고, 파워포인트와 크게 다르지 않은 구조로 되어있었다. 텍스트와 EPS이미지를 얹고 간격을 맞추고 그리드를 신경 쓰는 작업을 했다. 지금도 프린트 미디어쪽은 인디자인을 사용하고 같은 방식으로 고민을 하고 있다. 하지만 디지털 쪽은 상황이 많이 바뀌어야 한다고 생각한다.

내가 마지막 포토샵으로 웹디자인을 치던 세대이다. 내 뒤로 들어왔던 디자이너들에게 포토샵으로 디자인을 쳤다고 하면 말이 안 된다고 생각한다. 왜냐하면 반응형 웹사이트, 웹앱이라는 개념이 도입되었고 시장에서 인증을 받았고 그 바탕으로 교육을 받았는지는 모르겠으나 그들은 그것들을 알고 있었다. 그 반응형에서 가장 중요한 것은 pixel 개념보다 vector 개념이 더 중요했고, 고정되어 있는 화면 보다 변동되는 브레이크 포인트가 더 중요했다. 이 시기에 Vertor와 브레이크 포인트를 만질 수 있는 툴이 있었다 바로 스케치 앱이다.

스케치 앱으로 10명이 필요하던 작업이 3명이서 가능하다는 것을 확인했을 때, 우리는 환호했다. 야근이 그때를 기점으로 많이 줄어들었던 것으로 기억한다. 페이지 단위로 치던 것을 메뉴 혹은 기능 단위로 칠 수 있게 되었고, 일일이 픽셀을 제서 가이드를 만들어야 했던 시기에서 벗어나 제플린에 파일을 업로드만 하면 픽셀과 스펙을 자동으로 만들어줬기 때문이다.

하지만 포토샵에서 스케치로 넘어올 때, 픽셀에서 벡터로 한 화면에서 여러 화면으로 볼 수 있는 것이 획기적인 기능이었다. 하지만 이것은 큰 들에서 파워포인트 방식과 다르지 않다. 스티커를 붙이고 글을 쓰는 공책을 그냥 디지털 서비스로 옮겨 놓은 것뿐이다. 그럼 디지털 서비스의 툴의 툴은 바꾼다는 것은 어떤 개념일까?

디지털 프로덕트 디자인은 고정되어 있지 않다는 것을 생각하면 틀을 바꿀 수 있다. CTA 버튼 차원에서만 두고 보자. 같은 서비스이더라도 CTA 버튼이 색상 모양이 다다른 경우가 있다. 이것은 서비스 특성에 따라 다르지만 일반적으로 최종 CTA 버튼은 사용자 학습 여건을 고려해 통일하는 것이 바람직하다. 초기 구축 때는 분면 변수와 가능성을 통제해 안정적인 서비스 UI/UX를 구축할 수 있다. 하지만 시간이 지나고 서비스가 발전할수록 많은 케이스가 생기게 되고 이 과정에서 많은 버튼들이 생기기 시작한다.

이것을 통일하고자 하면 과거 디자인 틀에서는 다 모아서 하나로 만드는 방법을 쓰고 그 방법을 공포한 다음 이것을 지키는 것은 디자이너 개개인의 몫이 되고 퍼블리셔, 개발자 개개인에게 돌아간다. 하지만 디지털은 그러면 안 된다. 너무 많은 이해관계자가 있고 인력 교체도 빈번한 환경이다. 그렇기 때문에 통일한 CTA 버튼을 공포함과 동시에 기획자, 디자이너, 퍼블리셔, 개발자 등이 다 같이 보고 확인할 수 있는 틀이 있어야 하고 이들을 같이 사용할 수 있는 용어가 통일되어야 한다. 그것이 디자인 시스템을 구축하기 위한 첫 번째 조건이다. 그리고 더 나아가 버전 관리 혹은 변경 사항을 통제할 때도 반드시 필요한 작업이다. 변경이 이루어지면 변경된 컴포넌트를 다 같이 사용할 수 있는 틀을 만들어야 한다.

결국 디지털 디자인 시스템에서 가장 중요한 틀은 구성원들 간 원활한 커뮤니케이션을 할 수 있는 토대를 만드는 것이다.

--

--

Hello World. I’m Product Manager in Soeul. I will help you level up ux and save all your project.

Love podcasts or audiobooks? Learn on the go with our new app.

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store