디자인 시스템과 디자이너
디자인 시스템에 대한 생각
내가 어릴 때는 전집의 시대였다. 전집이라는 것은 책을 한두권 사는 것이 아니라 수십 권을 한 번에 사는 방식이다. 우리집엔 윤석중 전집이란 것이 있었다.
그림이 이쁘지 않았지만, 글을 읽게 되면서 여러 권 보게 되었다. 그중에 청기와 장수라는 동화가 있었다. 아주 어릴 때의 기억인 것 같다. 청기와 장수는 청기와라는 기와의 종류를 만들 수 있는 기술을 가진 장인이었다. 그러나 청기와 기술을 남에게 알려주는 것을 꺼렸기 때문에 청기와를 만드는 방법은 청기와 장수의 죽음과 함께 사라지고 말았다.
왜인지 모르지만, 나는 이 동화를 굉장히 오랫동안 기억하고 있었다.
디자이너가 사라지면, 디자인도 사라진다.
디자이너가 떠나면, PSD 파일이 남는다. 남아 있다면 다행스럽다. 요즘은 각종 벡터 파일도 남아있어야 한다. 그런데 가끔 보면, 비트맵 이미지만 남은 경우도 있다. 디자이너가 사라지면, 디자인도 사라진다. PSD라도 남아 있지만, 그 제목은 '최종의_정말최종의_진짜마지막.psd'거나, Layer923만 가득한 1GB짜리 파일인 경우가 많다.
photoshopetiquette.com그래서 대부분의 회사는 디자인 자원이 결핍되어 있다. 있다고 해도 회사의 디자인 역량의 대부분은 디자이너가 가지고 있다. 디자이너들은 각자의 환경에서 배운 각자의 방법대로 디자인 결과물을 만들고, 각자의 방식으로 보관한다. 가끔은 디자인 가이드를 만든다. 하지만 디자인 가이드는 재미없고 융통성 없는 자서전 같은 것이 되어 아무도 보지 않는다. 전통적인 가이드는 무겁고, 어렵고, 지루하다. 그리고 정작 필요할 때는 어디 있는지 보이지도 않는다.
프로그래머들의 경우는 그들만의 라이브러리가 있고, 에셋이 있다. 공통으로 작업하기 위한 프레임웍이 있고, 철학이 있다. 하지만, 그들과 함께 하는 디자이너들에게는 그런 규칙이나 자원은 적은 편이었다. 디자이너에겐 폰트 패밀리와 그리드와 레이아웃, 색상 코드와 이미지 리소스가 있지만 그걸 어떻게 사용하고 발전시켜야 하는지에 대한 정보는 많지 않다. 디자이너에게 트렌드는 있지만, 한 회사 내부에서 반복적으로 사용하며 개선해 나갈 수 있는 패턴이나 프로세스를 가진 경우는 드물었다.
규칙이 필요하지만, 규칙에 대해 이야기하지는 않는다.
최근 디자이너들은 브랜드를 많이 이야기하고, 글에 대해 이야기한다. UI Deisgn, UX Design, Visual Design, Ixd Design, Brand Design, Product Design... 디자인은 빠른 속도로 여러 가지 개념의 디자인으로 분화하면서 전문화되고 있다. 그래서 풀 스택 디자이너 같은 말을 하기도 한다.
이런 용어들은 이제 막 시작하는 초년생들에게 큰 혼란을 준다. 어떤 분야에 얼마큼 투자해야 하며, 어떤 분야에서 노력해야 하는지, 분야들 간에 구분은 무엇인지도 고민하는데 많은 시간을 낭비하기도 한다. 규칙이 필요하지만, 규칙에 대한 이야기는 잘 하지 않는다.
웹디자인의 시대가 시작되었다고, 편집 디자이너가 사라지지 않는다. 마찬가지로 앱 디자인이 나온다고 웹 디자이너가 사라지진 않는다. 항상 디자이너는 있다. 하지만 매번 디자이너는 제자리에서 시작한다.
디자인은 창의적이고 신성하고 프라이빗한 천재성이고 그것을 감히 규칙 따위로 얽어매려 해서는 안 되는 영역으로 보는 사람도 있다. 하지만 장기적이고, 반복적이고, 복잡한 작업에는 규칙이 꼭 필요하다.
디자인 시스템
디자인을 하기 위해 방법과 가이드, 참고 자료로 다양한 디자인 시스템(design system)이 공개되고 있다. 어떤 디자인 시스템은 명료함을 최고의 가치로 둔다. 이런 시스템에서는 명확한 인식을 위해 비주얼 요소들과 컴포넌트들의 관계가 필요하다. 다른 시스템은 접근성에 가치를 둔다. 그럴 경우, 장애가 있는 사람들을 위한 폭넓은 접근성과 대체 콘텐츠, 색상과 명도 처리가 필요하다. 제품을 사용하는 사람은 외국인이 될 수도 있고, 제품의 생태계에 참여하고 싶은 사람도 있을 것이다. 디자인 시스템은 목적에 따라 콘텐츠를 해석하는 것부터, 비주얼, 사용자 피드백 방법까지 다양한 것들을 포함하고 있고, 웹을 통해 누구나 접근할 수 있다.
Hudl Design System, Uniform 코드와 비주얼 디자인을 보여준다.
DropBox의 웹사이트로 만들어진 가이드라인 중 일러스트레이션에 대한 부분
MS의 Fluent Design System의 디자인적인 특징
MATERIAL DESIGN에서 각 컴포넌트의 높이를 위한 가이드
Workday Canvas Design System의 사용자 인터뷰 가이드어떤 사람은 '시스템'이라는 것에 대해서 거부감을 가지고 있다. 시스템은 인간의 창조성을 제한하고, 평이하고, 조악하고 대중적인 결과물을 낸다고 생각한다. 복사와 붙여 넣기, 다른 이름으로 저장 기능이 있는 프로그램으로 작업을 하면서 한 땀 한 땀 핸드메이드로 만들어야 좋은 디자인이 나온다고 생각한다. 나무를 깎아 조각을 만들거나, 붓으로 그림을 그린다면 맞는 말이다.
하지만 이 글을 읽는 사람들의 대부분은 디지털 제품을 만드는 디자이너일 것이다. 앱이나 웹, 혹은 스크린으로 서비스되는 무언가를 만들고 있을 것이다. 그리고 디지털 디자인의 숙명은 업데이트다. 업데이트는 변화이고, 변화가 누적될수록 효율성, 일관성, 확장성이 필요하기 때문이다. 디자인 시스템은 프로그램 코드를 포함한 동적으로 관리할 수 있으며, 그 자체도 버전을 올려서 개선할 수 있다.
나무 하나를 자를 때는 톱이나 도끼, 그리고 두툼한 팔뚝만 있으면 된다. 하지만 숲을 벌목할 때는 그에 걸맞은 시스템이 필요하다. 숲에는 다양한 나무가 있고, 나무를 자르는 일은 반복되기 때문이다.
가끔 신입 디자이너들은 웹사이트 하나 만드는데, 혹은 광고 배너 하나를 만드는데, 얼마나 걸리냐고 묻는다. 능숙한 사람이 만들면, 10분에 1장일 수 있다. 만일 자동화된 시스템이라면 1분에 수백개의 배너도 사이즈별로 만들 수 있다. 실제로 알리바바는 자사의 플랫폼 타오바오를 위한 이벤트로 자체 개발 인공지능(AI) ‘루반(鲁班)’을 통해 4억개의 특별 배너를 제작했다.
https://designsystemsrepo.com/
Design Systems Repo란 사이트는 여러 가지 디자인 시스템에 대한 링크와 글을 모아놓는 곳이다. 디자인을 막 시작하는 초년생이나 좀 더 쓸만한 디자인 가이드를 만들고 싶은 분은 방문해 보시기 바란다.
요즘 많은 사람들이 이야기하는 브랜드의 성장, 사용자 경험의 관리를 위해서는 많은 커뮤니케이션이 필요하다. 그러려면, 어제의 작업물을 충분히 활용하고 좀 더 나은 내일의 결과물로 계속 재탄생시켜야 한다.
시스템과 효율성에 대해서 불안감과 혐오를 가진 사람이 있을 수 있지만 우리는 인공지능 알파고가 큰 충격을 시대에 살고 있다. 효율성에 대한 정의는 기계적인 반복성에서 사람들과 함께 더 나은 방법과 규칙을 고민하는 효율성으로 발전할 것이다.
처음부터 거대한 디자인 시스템을 만들 수는 없다. 하지만, 규칙을 함께 만드는 일은 쉽게 시작할 수 있다. 그리고 규칙을 공유하고 개선해서 도구로 사용할 수 있다면, 좋은 결실을 얻을 수 있을 것이다.
디자인 시스템에 대한 미디엄 글을 모아두는 노션입니다.
https://www.notion.so/pliossun/Design-System-03a069a8ca8644cf87d9ed0c8977033f
