디자인 시스템 단계에 대해서 좀 더 설명 부탁드립니다.

안녕하세요. 좋은 질문 감사합니다.

여기서 이야기하는 프로토타이핑은 앱이나 웹사이트가 실제로 개발자에 의해 개발이 된 것이 아니지만, 되도록 만들어서 사용성 테스트를 할 때 사용자에게 써보도록 하는 수준으로 만드는 것을 이야기합니다.

디자인 시스템은..시스템의 뜻 그대로 체계를 만들어주는 것을 이야기하는데요. 앱이나 웹사이트를 가장 효율적으로 디자인 및 개발을 하고 사용자에게는 일관된 사용자 경험을 제공하기 위해 디자인을 체계화하는 것을 말합니다.

앱, 웹사이트를 디자인을 할 때에, 어떤 체계가 없이 디자인을 하게 되면 요소들의 종류가 우후죽순처럼 늘어나게 됩니다. 컬러, 폰트스타일, 버튼 등이 예시입니다. 이렇게 종류가 무수히 많아지면 생기는 문제는 크게 두가지가 있습니다. 첫째는 사용자에게 혼란을 줍니다. 예를 들어서 한 앱에서 화면이 바뀔 때마다 보여지는 버튼의 디자인이 일관성이 없다고 쳐볼게요. 화면이 달라질 때마다 색상과 모양, 스타일이 다다르다면 사용자의 입장에서는 버튼이 어디있는지 찾기가 어려워집니다. 버튼 뿐 만 아니고, 메인 타이틀의 폰트사이즈라든지, 카드 디자인이라든지, 사실상 대부분의 요소들이 일관성이 없으면 사용자에게 불편함을 초래합니다.

두번째 문제는 비효율성입니다. 디자이너는 어떤 화면을 디자인할 때에 재사용할 수 있는 것에 대한 정의가 없기 때문에 처음부터 다시 디자인해야 하며, 개발자도 마찬가지로 매번 다시 개발을 해야 하는 수고가 발생합니다. 그런데 디자인 시스템이 있으면 기준점이 있기 때문에 재사용을 하여 시간을 절약할 수 있습니다. 예를 들어 버튼의 경우 화면마다 동일하게 써도 된다면 굳이 다르게 디자인할 필요가 없는 것입니다.

한 가지 사례를 살펴보면 좋을 것 같아서 에어비앤비 사례를 가져와봤어요. 에어비앤비 숙박과 익스피리언스는 성격이 다른 화면인데, 보시면 버튼과 아이콘 스타일, 폰트 스타일 등에 있어서 일관성이 유지되는 것을 볼 수 있습니다. 이렇게 재사용되는 요소들을 디자인 시스템으로 묶어서 정의를 해 두면 새로운 화면을 디자인할 때에 꺼내서 쓰면 되기에 시간적으로 엄청난 절약을 할 수 있게 되는 겁니다.

참고가 되셨기를 바라고 더 궁금한 점이 있다면 언제든지 문의주세요.

감사드리고 새해 복 많이 받으세요!