스타일 가이드로 웹서비스 개발하기

들어가며

저는 슬로워크의 이메일마케팅 서비스 스티비의 프론트엔드 개발자입니다. 현재 스티비는 정식버전을 한창 개발하고 있는데요, 개편을 진행하면서 프론트엔드 개발 프로세스에 대해 많은 고민을 하게 되었습니다. 무엇보다 웹서비스는 유용하고 쓸만해야 합니다. 즉, 사용자에게 도움을 주면서 그 과정이 쉽고 편해야 합니다. 쓰기 편한 웹서비스는 명확한 UI를 제시하여 사용법의 학습이 쉽고, 한 번 학습하면 다시 익힐 필요 없도록 통일성있는 UI를 가져야 합니다. 

오류와 경고를 표현할 때, 보통 오류는 빨간색으로 경고는 노란색으로 표현합니다. 하지만 어떤 페이지에는 빨간색이 너무 많이 쓰여서 예외적으로 오류를 보라색으로 할 수도 있을 것입니다. 이런 결정을 내리는 경우는 드물겠지만 과거의 방식처럼 웹서비스를 페이지(화면) 단위로 디자인한다면 충분히 일어날 수 있는 일입니다. 실제로 같은 역할을 하는 상자의 윤곽선 색상이나 굵기, 여백이 화면마다 다른 경우가 많습니다. 

이런 혼란을 막기 위해 등장한 것이 ‘스타일 가이드(style guide)'입니다. 웹서비스 화면을 디자인할 때 참고하는 가이드 문서입니다. 스타일 가이드에 맞춰 개발하면 사용자에게 통일성 있는 UI를 제공할 수 있습니다. 

스매싱매거진의 ‘Designing Modular UI Systems Via Style Guide-Driven Development’에서는 스타일 가이드를 기반으로 한 디자인을 ‘스타일 가이드 주도 개발(Style Guide-Driven Development)라고 합니다. 스타일 가이드 주도 개발은 과거의 개발 방식과 어떤 점이 다른지 알아보고 좋은 스타일 가이드들을 살펴본 뒤, 실제로 스타일 가이드를 작성해보도록 하겠습니다.

무엇이 다를까

페이지(화면)을 그린다 vs. 컴포넌트를 만든다

스타일 가이드 주도 개발은 과거 화면 단위의 개발과 대조되는 개념입니다. 이전에는 웹서비스를 사용하면서 사용자가 마주하는 모든 페이지(화면)을 하나씩 디자인해 왔습니다.(이하 ‘페이지 주도 개발’) 주로 포토샵을 사용하여 웹서비스 화면을 그립니다. 자주 쓰는 컬러 스와치를 미리 구성하여 사용하고, 공통된 레이어나 그룹은 복사하여 사용하지만 기본적으로 화면의 모든 내용을 직접 그리고 위치시킵니다. 

스타일 가이드 주도 개발에서는 화면부터 디자인하지 않습니다. 어떤 화면이 필요하다면 필요한 구성을 작은 단위로 쪼갭니다. 그리고 그 쪼갠 단위들을 공통점을 기반으로 묶어 작은 단위로 기획하고 디자인합니다. 제목을 클릭하면 내용이 보이는 아코디언 UI는 보통 자주 묻는 질문(FAQ) 화면에서 볼 수 있는 UI입니다. 목록에는 제목이 먼저 보이고, 제목을 누르면 해당하는 내용이 보입니다. 여기서 FAQ 페이지를 직접 그리는 방식과 아코디언 UI의 한 부분을 먼저 그리는 방식의 차이가 드러납니다. 즉, 페이지 주도 개발은 빈 화면에 내용물을 더하면서 시작하고, 스타일 가이드 주도 개발은 내용물을 쪼개면서 시작합니다.

완성 vs. 조합

페이지 주도 개발은 화면의 완성을 목표로 합니다. 사용자에게 제시될 화면과 완벽히 유사한 화면을 그리고, 그대로 개발해야 합니다. 하지만 스타일 가이드 주도 방식의 목표는 부품(컴포넌트)의 제작과 조합입니다. 필요한 부품을 만들고, 이들을 각기 테스트한 뒤 전체를 조합하며 화면을 구성해 갑니다. 

변화와 역동 vs. 통일과 안정

페이지 주도 개발은 화면을 통째로 디자인하므로 각 화면마다 개성있는 표현을 넣을 수 있고, 역동적인 디자인을 제시할 수 있습니다. 반면, 스타일 가이드 주도 개발로는 통일성 있는 UI와 안정적인 동작을 보장할 수 있습니다. 한 번 사용할 때 잦은 조작이 필요하거나 오랫동안 사용해야 하는 웹서비스는 통일성과 안정성이 중요합니다. 하지만 남과 다른 브랜드 가치를 표현하거나 사용자에게 감성적인 소구가 필요한 경우는 안정보다는 역동성이 필요합니다. 웹서비스의 목적에 따라 개발 방식에 차이가 있을 수 있습니다. 

아코디언UI

부품의 조합으로 다양한 가구가 된다. IKEA

스타일 가이드 주도 개발은 왜 필요한가

스타일 가이드 주도 개발은 사용자와 개발팀(기획자, 디자이너, 개발자)에게 모두 이점을 가져다 줍니다. 통일, 확정, 효율입니다. 각 장점을 차례로 알아보겠습니다.

통일

사용자에게 통일성 있는 UI를 제공할 수 있습니다. 사용자가 웹서비스를 사용하면서 만나는 모든 UI는 기존에 학습되었거나, 새로이 학습해야 하는 것들입니다. 웹의 역사만큼 표준 UI의 학습이 진행되어 왔지만 여전히 사용자는 UI에 대한 학습이 필요하고, 더군다나 새로운 기능과 가치를 제공하는 서비스라면 반드시 거쳐야할 관문입니다. 너무 어렵거나 일관성이 없는 UI는 사용자에게 혼란을 주고, 이는 이탈을 야기합니다.

스타일 가이드를 만들고, 이에 따라 화면을 구성한다면 최소한 통일성은 보장됩니다. A 화면에서 배운 UI조작법을 B, C, D 화면에서 재사용할 수 있습니다. UI에 익숙해지면 사용자는 안정감을 갖게 되고 더 효율적으로 서비스를 사용할 수 있게 됩니다. 또한 스타일 가이드를 통해 미리 UI 부품들을 만들어 보면서 떨어져 있는 화면 간의 공통점을 찾아낼 수 있고, 각 화면의 조건에 따라 생길 수 있는 혼란을 미리 막을 수 있습니다.

확장

한 번 만든 UI 부품은 언제든 재사용할 수 있습니다. 여러가지 상황과 조건에 테스트가 된 부품이므로 어떤 화면에 넣어도 큰 문제 없이 작동할 것입니다. 최근의 웹서비스는 과거와 달리 매우 많은 화면을 담습니다. 과거의 ‘이전’, ‘다음' 버튼을 통해 화면의 전환으로 해결했던 것과 달리 최근에는 하나의 화면에서 다양한 콘텐츠가 유기적으로 등장하고 사라집니다. 사용자의 인터랙션도 다양해져 상황과 변수가 굉장히 다양해졌습니다. 이렇게 수많은 화면과 조건을 하나씩 그려서 대응할 수는 없습니다. 스타일 가이드를 작성하고서 이를 조합하면 그럴 필요 없이 화면들을 만들어 낼 수 있습니다. 

린스타트업의 관점에서도 스타일 가이드 주도 개발은 매우 가치가 있습니다. 빠른 시장 변화에 맞추어 아이디어를 서비스로 만들어 제공하려면 뛰어난 확장성이 꼭 필요합니다. X라는 기능을 테스트해보고 싶을 때, X화면을 기획하고 디자인하여 개발할 필요 없이 기존의 UI 부품들을 조합하여 빠르게 개발하여 테스트할 수 있습니다. 

효율

뛰어난 확장성은 효율로 이어집니다. 앞서 말했듯 시장의 변화에 맞춘 서비스의 개발 속도는 매우 중요합니다. 기존의 기능을 개선하거나 새로운 기능을 만들 때도 스타일 가이드 주도 개발은 이점이 많습니다. 새로운 UI를 만드는 작업은 스타일 가이드의 ‘업데이트'로 생각할 수 있습니다. 새로운 기능이 기획되면 우선 스타일 가이드화 시킵니다. 이 과정에서 다른 UI와의 통일성을 확인할 수 있고, 화면마다 다른 상황과 조건에 대입해 볼 수 있습니다. 스타일 가이드는 그 자체로 작은 프로토타입 역할을 하므로, 이를 업데이트하면 해당 UI에 대한 기본적인 개발과 테스트를 할 수 있습니다.

팀으로 협업하는 경우에도 스타일 가이드는 중요한 역할을 합니다. 미리 약속된 디자인 패턴을 서로 공유하여 작업자마다 같은 품질의 명확한 결과물을 만들어 낼 수 있습니다. 또한 정확한 커뮤니케이션을 위한 참고 지표가 될 수 있습니다. ‘제목을 누르면 내용이 나오는 상자'라는 모호한 말보다는 미리 정의된 아코디언UI를 함께 보면서 논의하는 편이 낫기 때문입니다. 

좋은 스타일 가이드 구경하기

스타일 가이드를 직접 만들기 앞서 좋은 스타일 가이드를 살펴보겠습니다. 수많은 웹서비스와 브랜드에서 자체적으로 개발한 스타일 가이드를 공개하고 있습니다. 이들을 참고하여 좋은 스타일 가이드의 특성에 대해 살펴보겠습니다.

먼저 Mailchimp의 Pattern Library를 살펴보겠습니다. 메일침프에 쓰이는 여러가지 UI 구성을 분류별로 정리해 두었습니다. Style Guide가 아닌 Pattern Library라는 이름을 쓰고 있는데, 이를 통해 UI 구성 하나 하나를 ‘패턴'이라고 정의하는 것을 알 수 있습니다. 즉, 메일침프가 생각하는 스타일 가이드는 반복될 수 있는 디자인 부품으로서의 UI입니다. 

각 화면의 레이아웃을 결정하는 그리드 시스템부터 타이포그래피, 폼, 내비게이션과 같은 자주 쓰이는 UI를 디자인과 용법, HTML 코드까지 상세하게 정의하고 있습니다. 메일침프는 이미 많은 기능을 갖춘 커다란 서비스이지만 계속해서 보완되고 확장하고 있습니다. 개발 결과물의 품질을 보증하고, 무리없는 확장을 위해 이러한 ‘패턴 라이브러리'는 반드시 필요한 존재입니다. 

다음은 스타벅스의 웹스타일 가이드입니다. 웹디자인에 관심있는 분은 한 번 쯤 봤을 수도 있습니다. 수년 전에 개발되어 스타일 가이드에 대한 개념도 희박하던 때, 많은 작업의 참고가 되었던 곳입니다. 아쉽게도 마지막 업데이트는 2014년이지만 웹/모바일 기반의 기업이 아님에도 웹스타일 가이드를 가지고 일관된 UI와 통일성 있는 사용자 경험을 주었다는데 큰 의의가 있다고 생각합니다. 

styleguide.io에서 더 많은 스타일 가이드를 찾아 볼 수 있습니다. 스타일 가이드 제작에 대한 많은 정보를 제공하고, 예시와 팟캐스트(!)까지 제공하고 있습니다. 

마치며

스타벅스와 메일침프의 공개된 스타일 가이드를 보면서 어떤 생각을 하셨나요? 개인적으로 스타벅스의 스타일 가이드에서는 웹사이트를 방문한 고객에 대한 세심한 배려를 느꼈고, 메일침프의 패턴 라이브러리에서는 메일침프의 UI 디자인에 대한 철학과 꼼꼼함을 느꼈습니다. 이처럼 스타일 가이드는 개발편의뿐 아니라 브랜드 경험을 향상시키고, 신뢰를 쌓게하는 도구가 될 수도 있습니다. 

사용자에게 편리하고 안정된 서비스 경험을 주고, 개발팀에게는 효율과 품질을 위한 강력한 도구가 되는 스타일 가이드는 단순히 웹서비스를 위한 기반작업을 넘어 그 자체로 ‘살아 있는' 서비스의 일부라고 생각해야 할 것입니다. 

다음에는 이런 스타일 가이드를 어떻게 구성하고 작성해야할지 알아보도록 하겠습니다.