들어가며


지난 글, “스타일 가이드로 웹서비스 개발하기”를 통해 스타일 가이드가 무엇인지, 그리고 웹서비스 개발에 스타일 가이드가 얼마나 중요한지 알아보았습니다. 스타일가이드는 단순히 디자인과 프론트엔드 개발의 참고안이 아닌, 서비스와 함께 성장하는 역할을 합니다. 서비스의 운영과 함께 지속적으로 업데이트되며 성장합니다. 

사용자에게 일관된 사용자 경험을 전달하기 위해 UI의 통일성과 확장성은 필수적입니다. 스타일 가이드는 이를 체계적이고 쉽게 할 수 있도록 도와줍니다. 또한, 점점 비대해지는 서비스의 뿌리 역할을 합니다. 

이번에는 스타일 가이드를 실제로 어떻게 작성하고 유지해가야 하는지 알아보겠습니다. 



어떻게 시작할까


하얀 캔버스 위, 비어있는 텍스트 에디터를 보면 난감합니다. 무엇을 만들지 먼저 고민해야 합니다. 먼저 스타일 가이드에 무엇이 들어가야 할지 구상해 봅니다. 서비스의 와이어프레임이나 화면설계가 미리 준비되어 있다면 매우 좋습니다. 그러면 이를 분해하는 작업부터 시작할 수 있습니다. 






화면설계에서 시작하기


서비스가 완성품이라면 스타일 가이드는 ‘조립’을 위한 ‘부품’의 모음입니다. 따라서 완성품을 분해하여 부품을 유추하는 과정으로 시작합니다.


화면설계를 분석하여 UI단위를 분리합니다. 버튼을 하나하나 따로 분리할 수도 있고, 버튼의 모음으로 분리할 수도 있습니다. 화면에서의 역할이나 목적으로 분리할 수도 있고, 개발 관점에서 <table>이나 <form>과 같은 HTML 태그 단위로도 분리할 수 있습니다. 어쨌든 부품을 만들기 위해 분해를 해야 합니다. 이 분해된 단위를 컴포넌트라고 합니다. 


컴포넌트를 나누는 기준은 매우 중요합니다. 너무 작은 단위로 나누면 “가이드”라는 말이 무색할 정도로 어렵고 복잡해질 것이고, 너무 큰 단위로 나누면 상황별로 재사용하기 어려울 수 있습니다. 저는 가장 중요한 기준은 ‘독립성’과 ‘재사용성’이라고 생각합니다. 분해된 ‘부품’은 너무 작지 않아야 합니다. 스스로 독립적인 “상태”를 가지고, “동작 또는 표현”할 수 있어야 합니다.


버튼을 예로 들어 보겠습니다. 버튼은 활성화, 비활성화, 마우스 오버에 대한 반응, 클릭 이후의 변화 등의 상태를 갖습니다. 그리고 가로, 세로, 여백(padding)과 품고 있는 텍스트의 크기와 같은 표현 값을 가집니다. 버튼의 역할을 부연설명하는 아이콘이 들어갈 수도 있습니다. 이 버튼은 독립적으로 존재하므로 하나의 컴포넌트라고 부를 수 있습니다. 버튼에 상태와 표현을 조금씩 변경하면 다른 상태, 모양의 버튼을 몇 번이고 재사용할 수 있습니다. 


화면설계서의 분해



화면설계가 없다면?


화면설계를 분해하면서 컴포넌트들을 정의하는 방법이 좋긴 하지만, 화면이 설계되기 전에 미리 스타일 가이드를 구성할 수도 있습니다. 웹서비스에 쓰일 부품부터 미리 정의해보는 겁니다. 웹서비스에서 자주 쓰이는 버튼, 드롭다운, 목록, 테이블, 양식(form)등을 미리 구상하여 통일성 있게 구성합니다. 

완성품을 예측하여 부품을 만들기란 매우 어려운 과정입니다. 설계 전에 정확히 어떤 요소가 필요할지 미리 알 수 있을까요? 설계하면서 변경되는 경우도 많을 것입니다. 잘 설계된 부품을 조합했을 때 원하지 않은 모습이 나올 수도 있습니다.


그럴 때는 공개된 스타일 가이드를 참고하는 것이 좋습니다. 유명한 Bootstrap이나 Foundation과 같은 프레임워크의 구성을 살펴보겠습니다. bootstrap이나 foundation은 그 구성이 매우 방대하고, 많은 테스트를 거쳐 견고한 상태입니다. 처음부터 이런 완성도를 기대할 수는 없고, 작은 부분부터 참고합니다. 


방대한 프레임워크 안에서 우리에게 필요한 것들을 추리고, 여기서 우리의 부품 만들기를 시작합니다. Bootstrap의 CSS를 보면 기본적인 헤딩의 타이포그래피부터 테이블 양식(form), 버튼 등 기본 UI들이 미리 구성되어 있습니다. 세부 내용을 보면 상황에 맞게 적용할 수 있도록 여러 크기와 상태로 구성된 것을 볼 수 있습니다. 여기서 우리에게 필요한 것들만 취해봅니다. bootstrap에서는 4가지의 크기와 5가지의 상태를 가진 버튼이 있지만 우리 서비스에 필요한 것은 3개라면? 그냥 그렇게 구성하면 됩니다. 스타일 가이드는 언제든 추가, 보완할 수 있으니까요.



프레임워크의 구성 참고



컴포넌트 + @


우리 서비스는 매우 단순하니까 몇 가지 기본 컴포넌트만 넣기로 했습니다. 계속해서 Bootstrap의 CSS를 살펴보는데 “Helper classes”라는 것이 보입니다. 구성에는 텍스트 색상, 정렬, 상자의 정렬, clearfix 등이 있습니다. 이건 어떻게 쓰는 것이고, 어떻게 우리 서비스에 도움이 될까요? 디자이너와 개발자의 취향의 문제이지만, 컴포넌트 외에 서비스 구성을 돕는 이런 “헬퍼”가 필요합니다. 이 헬퍼는 컴포넌트처럼 명확히 눈에 띄고 독립성을 가지진 않습니다. 다만 여러 컴포넌트에게 두루 적용할 수 있는 정렬이나 자주 쓰이는 색상과 상태를 미리 준비해 놓은 것입니다. 이런 헬퍼들이 있어야 통일성있는 CSS 코드를 작성할 수 있습니다. 무엇보다도, 편합니다. 


컴포넌트의 공통적인 상태를 정의하는 헬퍼



HTML, CSS 작성하기 


컴포넌트 구성이 끝났다면 실제 서비스에 적용할 코드를 작성해야 합니다. 서비스의 동적인 부분은 우선 무시하고 HTML과 CSS로 컴포넌트. 즉, 부품들을 작성합니다. HTML 마크업을 할 때는 되도록 컴포넌트 단위로 작성하고, 이후 쉽게 복사하여 사용할 수 있어야 합니다. 컴포넌트의 역할과 상태를 정확하고 알기 쉽도록 class 이름를 지어줍니다. box, area와 같이 혼동할 수 있는 이름보다는 heading-box나 contents-area와 같은 구체적인 이름이 좋습니다. 


CSS는 컴포넌트의 복잡한 정도에 따라 길어질 수 있습니다. 다양한 상태를 표현해야 한다면 코드는 복잡해지고, 다른 컴포넌트의 스타일 간섭이 있을 수 있습니다. 이를 막기 위해 SASS와 같은 전처리기를 사용합니다. CSS 전처리기는 간결한 문법으로 작성하고 이를 CSS로 변환하여 적용하는 개발 편의 도구입니다. 대표적으로 SASSLESS가 있습니다. 작성하기 쉽고, 무엇보다 유지보수가 편합니다. 코드의 가독성도 매우 좋습니다. 컴포넌트의 이름 단위로 nesting한다면 굉장한 업무 효율을 기대할 수 있습니다. 



SASS로 간결하게 




마치며


세상에 100가지 웹서비스가 있다면 개발방식도 100가지가 있을 것입니다. 어쩌면 100가지를 넘을 수도 있습니다. 디자이너와 개발자의 취향에 따라 많은 선택지가 있어 같은 사람이 같은 서비스를 만들어도 다른 결과물이 나올 수 있기 때문입니다. 내 머릿속에 서비스의 지도가 한 번에 그려진다면 어쩌면 스타일 가이드는 필요하지 않을 수 있습니다. 하지만 점점 커지는 서비스의 구석구석을 모두 기억하는 것은 불가능합니다. 무엇보다 우리는 혼자가 아니어서 하나의 결과물을 다수가 만들고 있습니다. 

여러 사람이 만들어도 마치 한 명이 작업한 것처럼 UI의 품질과 통일성이 보장되고, 지속적인 확장이 가능한 이유는 이런 스타일 가이드가 존재하기 때문입니다. 


스타일 가이드는 그 자체로 영감의 원천이 될 수도 있습니다. 컴포넌트를 분리하고 조합하는 과정에서 새로운 아이디어를 얻을 수 있고, 지속적으로 업데이트를 통해 서비스 품질을 향상시킬 수 있기 때문입니다. 아주 작게 시작할 수 있습니다. 스크린 단위의 화면을 디자인하기 전에 스타일 가이드를 고려해 보는 것은 어떨까요.





작성: 문윤기


Posted by slowalk


요즘 워드프레스와 같은 CMS(Contents Management System)를 기반으로 홈페이지를 제작하는 경우가 많아지면서, 콘텐츠를 관리하기가 더욱 수월해졌습니다. 개발자나 제작사를 거치지 않고 직접 글을 게시하거나 편집할 수 있게 되었지요. 

그래서 웹사이트 제작 프로젝트를 진행할 때 관리자의 글 편집 기능을 좀 더 신경 쓰게 되는데요. 슬로워크에서는 콘텐츠를 깔끔하게 정리하여 게시할 수 있는 본문 작성의 가이드를 드리기도 합니다. 가이드에 맞춰 공지나 새 소식에 게시할 글을 작성하면, 별도의 디자인이나 퍼블리싱 과정 없이 본문의 요소를 표현할 수 있습니다.


본문 스타일가이드의 예본문 스타일가이드의 예



본문의 스타일을 고민하기에 앞서, 게시물의 원고를 준비하는 단계를 생각해봅시다. 스타일 가이드를 잘 만들어두었다고 해도, 원고의 적절한 가공이 없으면 그 내용을 효과적으로 전달하기 어렵습니다. 


제목은 어떻게 쓸 것인지, 단락은 어떻게 나눌 것인지, 어느 부분에 표와 이미지를 활용할 것인지 고민해보셨나요? 또한, 종이 위의 보고서를 만드는 것이 아니라 웹사이트에 글을 올릴 것이므로 웹의 속성을 고려할 필요가 있습니다. 적절한 콘텐츠 표현을 위해 어떠한 고민이 필요한지, 요소별 체크포인트를 알아봅시다.



텍스트 - 소제목을 활용하거나 단락을 구분합니다.텍스트 - 소제목을 활용하거나 단락을 구분합니다.


1. 텍스트

- 제목과 본문을 구분하였는가: 제목의 단계를 활용하여 내용의 상하/포함 관계를 나타냅니다.
- 소제목으로 구분하였는가: 내용이 길고 단락마다 주요 내용이 다르다면 소제목으로 구분해보세요.
- 요약글을 더했는가: 가독성이 높아집니다.
- (본문 영역의 너비가 넓다면,) 단을 나눠서 글을 썼는가: 가독성을 높이는 데 도움이 됩니다.
- 전체 글의 양이 적절한가: 웹은 스크롤이 되기 때문에 본문의 양이 많아도 괜찮을 것 같지만, '스크롤의 압박'이라는 말도 있지요. 읽기 부담스러운 양의 본문은 사이트 이탈을 유발할지도 모릅니다.



표 - 데이터의 정렬을 확인합니다표 - 데이터의 정렬을 확인합니다


2. 표

- 표의 형태로 표현하기 적합한 콘텐츠인가: 단순히 레이아웃을 위해 표를 사용하지는 않았나요? 행과 열로 구분할 수 있고 여러 항목의 비교가 필요한 내용인지 살펴봅시다.
- 행과 열의 수가 적절한가: 행과 열이 너무 많으면 특히 모바일 디바이스에서 표에 담긴 내용을 파악하기 어려울 수 있습니다.
- 데이터의 정렬을 확인했는가: 숫자 데이터는 오른쪽 정렬을, 일반적인 글자 데이터는 왼쪽 정렬을 합니다. 표의 제목 행은 그 데이터 정렬과 같이 합니다. 되도록 가운데 정렬은 사용하지 않습니다.





3. 도식

- 도식으로 표현하기 적합한 콘텐츠인가: 도식은 주로 그룹 사이의 관계를 나타내거나, 구조, 변화를 나타낼 때 유용합니다. ex) 조직 구조도
- 다른 요소로 대체할 수 있는가: 웹상에서 도식을 사용하기가 쉽지는 않기 때문에 꼭 필요한 부분에만 사용하세요. 절차나 순서를 알려주는 내용에는 화살표 특수기호만 이용해도 좋습니다. 
- 도식의 크기와 형태가 웹사이트에 적절한가: 표와 마찬가지로, 도식을 가로나 세로로 너무 길게 표현하면 오히려 내용을 파악하기 어렵고, 모바일 환경에서는 별도의 도식 이미지를 준비해야 할 수도 있습니다.



이미지 - 이미지에 대한 설명을 캡션으로 표기합니다(예: 슬로워크 블로그)이미지 - 이미지에 대한 설명을 캡션으로 표기합니다(예: 슬로워크 블로그)




4. 이미지

- 캡션을 표기하였는가: 사진이나 이미지에 설명을 덧붙이면 본문 내용의 이해에 도움이 됩니다. 
- 이미지와 텍스트를 섞어 작성하였는가: 되도록 본문 전체를 웹 포스터 형태의 단일 이미지로 게시하거나, 이미지만 올리는 경우를 피하세요. 로딩 속도를 지연시킬 수도 있고, 특정 내용을 찾기 위한 검색에도 큰 도움이 되지 않습니다. 
- 이미지의 비율이 적절한가: 반응형 웹의 경우, 가로로 긴 와이드 이미지는 모바일 환경에서 너무 작게 보일 수도 있습니다. 



링크 - 링크를 단락과 구분하여 구분한다(예: DMZ국제다큐영화제 웹사이트)링크 - 링크를 단락과 구분하여 구분한다(예: DMZ국제다큐영화제 웹사이트)




5. 링크

- 링크와 링크가 아닌 요소를 구분하였는가: 링크 텍스트를 밑줄이나 다른 색상으로 구분해주세요. 클릭할 수 있는 것인지 명확히 해주는 것이 좋습니다. 링크를 단락과 구분하여 별도로 표시하는 것도 좋습니다. 이미지 자체에 링크하기보다는 텍스트로 링크를 표시하여, 사용자가 실수로 클릭하거나 이미지 확대 보기와 혼동하지 않도록 하세요.




웹상에서 글쓰기도 다른 글쓰기와 크게 다르지 않습니다. 다만 몇 가지 특징을 알고 준비한다면, PC와 모바일 모든 환경에서 보기 좋고 이해하기 쉬운 글을 쓸 수 있습니다. 사이트를 통해 제공하는 정보는 결국 방문자들을 위한 것입니다. 같은 내용이라도 쉽고 적절하게 표현하였는지 한 번 더 확인해보세요.







작성: 오예슬


Posted by slowalk


들어가며


저는 슬로워크의 이메일마케팅 서비스 스티비의 프론트엔드 개발자입니다. 현재 스티비는 정식버전을 한창 개발하고 있는데요, 개편을 진행하면서 프론트엔드 개발 프로세스에 대해 많은 고민을 하게 되었습니다. 무엇보다 웹서비스는 유용하고 쓸만해야 합니다. 즉, 사용자에게 도움을 주면서 그 과정이 쉽고 편해야 합니다. 쓰기 편한 웹서비스는 명확한 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 디자인에 대한 철학과 꼼꼼함을 느꼈습니다. 이처럼 스타일 가이드는 개발편의뿐 아니라 브랜드 경험을 향상시키고, 신뢰를 쌓게하는 도구가 될 수도 있습니다. 


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


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



작성자: 스티비 개발 문윤기
Posted by slowalk



2015년 슬로워크 블로그에서 어떤 글이 인기 있었을까요? 

페이스북 참여 수 순으로 가장 있기 높았던 글 10개를 소개합니다.




10위: 추천! 웹디자인 스타일 가이드 7가지 (9월 2일) ➔ 더 읽기



웹사이트 스타일 가이드는 '패턴 라이브러리', 'UI 툴킷', 'UI 가이드라인' 등 여러 방식으로 소통됩니다. 웹사이트를 만드는 개발자, 디자이너, 콘텐츠 제작자에게 도움이 되는 잘 만들어진 7가지 스타일 가이드를 소개합니다.




9위: 슬로워크의 색다른 시도, '최고지속가능성책임자'를 영입했습니다! (4월 29일) ➔ 더 읽기



슬로워크는 2015년 CSR 분야의 전문가를 CSO로 영입했습니다. 최고지속가능성책임자(Chief Sustainability Officer)는 세계에서 기업의 사회적 책임을 적극적으로 실행하는 글로벌 기업에서만 찾아볼 수 있는 직책인데요, 슬로워크의 지속가능성을 위한 CSO의 고민을 들어봅니다.




8위: 화장을 지운 인형, Tree Change Dolls! ➔ 더 읽기 



아이들이 가장 좋아하는 장난감은 아마 인형이 아닐까요? 화려한 화장을 한 인형은 비현실적인 미에 대한 선입견을 심어줄 수 있습니다. 호주의 한 아티스트는 아이들에게 각자의 개성과 매력이 진정한 아름다움임을 가르쳐주는 화장을 지운 인형을 만듭니다. 작가의 텀블러 페이지에서 화장을 지우기 전과 후의 모습을 확인해보세요.




7위: 출력과 인쇄, 무엇이 다를까? ➔ 더 읽기 



'출력하다'와 '인쇄하다'의 차이를 아시나요? 두 용어의 차이를 정의했습니다. '출력', '인쇄' 두 과정과 장단점을 인포그래픽을 제작했습니다. 인쇄물이 필요한 프로젝트 담당자라면 '출력'과 '인쇄' 중 어떤 방법이 더 적합한지 알 수 있습니다.




6위: 디자이너 부럽지 않은 인포그래픽 만들기 ➔ 더 읽기 



일러스트레이터나 포토샵과 같은 디자인 툴을 사용할 수 없어도 쉽게 인포그래픽을 제작할 수 있는 사이트를 소개합니다. 소개된 사이트를 통해 잘 만들어진 인포그래픽의 색상 구성, 차트 형태 등을 공부해보는 것도 더 좋은 인포그래픽 만들기 위한 하나의 방법입니다.




5위: 도시의 동물들을 위한 작은 표지판, #TINYROADSIGN ➔ 더 읽기 



도시는 사람 외에도 여러 생물이 공존하는 공간입니다. 우리가 여러 생물과 도시 공간을 공유함을 상기시키는 동물들을 위한 표지판을 소개합니다.




4위: 비영리단체를 위한 10가지 뉴스레터 팁 ➔ 더 읽기 



이메일 뉴스레터는 비영리 단체의 소식을 알리고 참여를 유도하는 매우 중요한 도구인데요, 그저 '하던 대로'가 아닌, 마케팅 효과를 얻을 수 있는 10가지 뉴스레터 제작 팁을 공유합니다.




3위: 리플릿, 어떻게 접는게 좋을까? ➔ 더 읽기 



디지털 마케팅이 증가하면서 종이로 만들어진 홍보물은 점차 줄어들고 있습니다. 두꺼운 제본 형식의 인쇄물보다는 한 장으로 이루어진 리플릿의 비중이 높아진다고 하는데요, 리플릿 기획 과정에서부터 반드시 고려해야 할 기본적인 접지 방법을 소개합니다. 디자이너가 아니더라도 리플릿을 의뢰하는 경우가 종종 있다면 꼭 읽어보세요. 더 효과적으로 정보를 전달할 수 있습니다.




2위: 웹디자인에서 자간, 행간에 대한 고찰 ➔ 더 읽기 



웹디자인에서 행간과 자간을 어떻게 다뤄야 할까요? CSS와 포토샵의 단위 차이를 이해하고 디자이너와 개발자 모두 만족하는 방법을 알아보세요.




1위: 디자이너가 아니어도 괜찮아! 글꼴 다루기 ➔ 더 읽기 



보고서, 기획서, 프레젠테이션 등 우리는 일상에서 수많은 문서를 만듭니다. 보기 좋은 문서와 그렇지 않은 문서의 차이를 만드는 데는 여러 요소가 있는데요, 그 중 중요한 것은 글꼴입니다. 김은영 디자이너의 책 '좋은 문서디자인 기본 원리 29는' 비디자이너도 보기 좋은 문서를 만들 수 있는 원리를 쉽게 설명하는데요, 몇 가지 유용한 팁을 공유합니다.




Posted by slowalk


스타일 가이드의 개념은  ‘패턴 라이브러리’, ‘UI 툴킷’, ‘UI 가이드라인’ 등등 소통하는 방식은 각양각색입니다. 어떤 단어로 소통하는 것은 중요하지 않습니다. 하지만 그 의미는 우리가 통일할 필요가 있는데요.


스타일 가이드는 웹사이트를 만드는 이들을 위한 설명서와 재료라고 할 수 있습니다. 이들은 개발자가 될 수 있으며, 디자이너, 콘텐츠 제작자, 혹은 협력업체의 사람일 수도 있습니다.


스타일 가이드의 의미를 알아봤는데요. 이제는 비교적 잘 만들어진 7가지 스타일 가이드를 소개합니다.



  1. 에어비엔비(AIRBNB)


에어비엔비의 UI 툴킷은 폼의 입력필드, 메뉴, 광고와 툴바 등의 가이드를 가지고 있습니다. 특히 흥미로운 것은 그들만의 컬러 테마를 만들어서 보여줬다는 점이죠.






웹디자인은 뎁스와 대비 등 다양한 위계를 포함하고 있습니다. 여러분이 브랜드컬러를 3~4개 정도 제한하고 싶을 수도 있지만, 작업자들 입장에서는 그 다양한 위계를 가공하는 데는 한계가 있을수도 있습니다. 작업자들을 배려해서 다른 색상테마를 추가해보세요.




  1. 모질라재단(MOZILLA FOUNDATION)

모질라재단은 파이어폭스를 만든 비영리단체입니다. 모질라재단은 그들의 온라인콘텐츠 스타일을 통일하기 위해 ‘샌드스톤(Sandstone)’을 만들었습니다. 샌드스톤은 스타일과 폼, 작은 버튼부터 전체 그리드까지 모두 이해하기 쉽게 만들었습니다.



모질라재단의 디자인 통합 컨셉은 모든 것을 똑같이 만드는 것을 의미하지 않는데요. 그들의 스타일 가이드는 각각 다른 환경에서 적용되었을 때 적절한 예시를 가지고 있습니다.




여러분의 웹 스타일 가이드가 매우 중요한 컨셉을 가지고 있다면, ‘샌드스톤’같은 방식은 일관성을 지키는데 큰 도움이 될 것입니다. 나중에 어떤 가이드를 더 포함할지라도, 지향점이 기준이 되기 때문입니다.




  1. 디스커스(DISQUS)

댓글 시스템으로 유명한 디스커스는 스타일 가이드를 ‘브랜드와 스타일’과 ‘구성요소’로 나눴습니다. 웹디자인에서는 인하우스 디자이너와 그들의 API를 쓰는 사용자들을 위한 스타일 가이드를 만들었습니다.





때때로 여러분은 디스커스처럼 하나의 작은 구성요소만 디자인해서, 수 많은 사람들이 사용해야 되는 경우도 있습니다. 여러분이 이런 경우라면 공개는 물론이고, 잘 보이는 곳에 배치해야 합니다.




  1. 우버(UBER)

우버의 스타일 가이드는 타이포그래피와 위계에 중점을 뒀습니다. 디자인에 따라 타이포 획의 굵기를 어떻게 적용할지 그들만의 방식을 만들었습니다.





더욱 매력적인 것은 그들의 브랜드 아이덴티티를 지도와 같은 UI에도 적용했다는 점입니다.  차량 예약 서비스라서 지도가 중요한 역할을 하기 때문에 더욱 신경 썼을 것입니다.






우버는 지도의 출발지, 목적지의 선까지도 아이덴티티를 부여했습니다. 여러분의 브랜드가 특정분야에 관련된 서비스라면, 그 분야에서 중요한 UI 요소에 아이덴티티를 어떻게 녹여낼 것인지 고민해봐야합니다.



  1. 메일침프(MAILCHIMP)

요즘은 웹 서비스들이 더욱 복잡해지면서, 스타일 가이드에 고려할 점도 그만큼 많아졌습니다. 예를 들어 메일침프는 3가지 다른 스타일의 그래프를 제공합니다.







또한 그들은 메일침프만의 아이콘 ‘프레디콘’을 만들었습니다. 이렇게 브랜드만의 아이콘을 만드는 것은 시간이 오래 걸릴수도 있지만, 브랜드 성격에 특화될 수 있다고 생각합니다.






  1. 에버노트(EVERNOTE)

에버노트팀은 드리블(Dribbble)에 디자인결과물을 올렸습니다. 에버노트의 아이콘, 일러스트레이션, 뱃지, 레이아웃 등 많은 것을 공유하고 있는데요.  





내부에 스타일 가이드를 만드는 방식과 다르게, 사용자들에게 오픈해서 피드백을 직접 받고 반영하고 있습니다. 여러분도 디자인 결과물을 커뮤니티에 공유해보세요. 수 많은 사용자들의 피드백에 많은 도움을 받을 수 있을 거에요.



  1. 버진 아메리카(VIRGIN AMERICA)


버진 아메리카 항공사의 최근 웹사이트 개편은 항공 예약 시스템에 혁신을 가져왔다고 회자되고 있는데요. 작업을 진행한 에이전시 워크앤코(Work & Co)는 케이스 스터디를 직접 웹사이트에 공유했습니다.



물론 디자인 스타일 가이드도 작업도 중요하지만, 왜 이런 결과물이 나왔는지 스토리텔링이 가미가 된다면 더욱 좋을 것 같네요.






이 7가지 사이트 외에도 훌륭한 스타일 가이드는 많습니다.

findguidelin.es를 보시면서 벤치마킹 스타일 가이드를 많이 찾아보세요.







*스타일 가이드 툴


스타일 가이드 제작을 어렵게 생각하지 마세요. 이미 스타일 가이드를 만드는 좋은 도구들이 나와있습니다. 그 중에 몇 가지 소개합니다.


Stylify, Bynder, Patternlab, Fabricator, Frotify, Style Guide Boilerplate, HugeInc Styleguide






출처: Canva



by 원숭이발자국

Posted by slowalk