본문 바로가기

스타일가이드

(5)
스타일 가이드 작성하기 들어가며 지난 글, “스타일 가이드로 웹서비스 개발하기”를 통해 스타일 가이드가 무엇인지, 그리고 웹서비스 개발에 스타일 가이드가 얼마나 중요한지 알아보았습니다. 스타일가이드는 단순히 디자인과 프론트엔드 개발의 참고안이 아닌, 서비스와 함께 성장하는 역할을 합니다. 서비스의 운영과 함께 지속적으로 업데이트되며 성장합니다. 사용자에게 일관된 사용자 경험을 전달하기 위해 UI의 통일성과 확장성은 필수적입니다. 스타일 가이드는 이를 체계적이고 쉽게 할 수 있도록 도와줍니다. 또한, 점점 비대해지는 서비스의 뿌리 역할을 합니다. 이번에는 스타일 가이드를 실제로 어떻게 작성하고 유지해가야 하는지 알아보겠습니다. 어떻게 시작할까 하얀 캔버스 위, 비어있는 텍스트 에디터를 보면 난감합니다. 무엇을 만들지 먼저 고민해..
웹에서 글 쓸 때, 이것만 체크하세요 요즘 워드프레스와 같은 CMS(Contents Management System)를 기반으로 홈페이지를 제작하는 경우가 많아지면서, 콘텐츠를 관리하기가 더욱 수월해졌습니다. 개발자나 제작사를 거치지 않고 직접 글을 게시하거나 편집할 수 있게 되었지요. 그래서 웹사이트 제작 프로젝트를 진행할 때 관리자의 글 편집 기능을 좀 더 신경 쓰게 되는데요. 슬로워크에서는 콘텐츠를 깔끔하게 정리하여 게시할 수 있는 본문 작성의 가이드를 드리기도 합니다. 가이드에 맞춰 공지나 새 소식에 게시할 글을 작성하면, 별도의 디자인이나 퍼블리싱 과정 없이 본문의 요소를 표현할 수 있습니다. 본문의 스타일을 고민하기에 앞서, 게시물의 원고를 준비하는 단계를 생각해봅시다. 스타일 가이드를 잘 만들어두었다고 해도, 원고의 적절한 가공..
스타일 가이드로 웹서비스 개발하기 들어가며 저는 슬로워크의 이메일마케팅 서비스 스티비의 프론트엔드 개발자입니다. 현재 스티비는 정식버전을 한창 개발하고 있는데요, 개편을 진행하면서 프론트엔드 개발 프로세스에 대해 많은 고민을 하게 되었습니다. 무엇보다 웹서비스는 유용하고 쓸만해야 합니다. 즉, 사용자에게 도움을 주면서 그 과정이 쉽고 편해야 합니다. 쓰기 편한 웹서비스는 명확한 UI를 제시하여 사용법의 학습이 쉽고, 한 번 학습하면 다시 익힐 필요 없도록 통일성있는 UI를 가져야 합니다. 오류와 경고를 표현할 때, 보통 오류는 빨간색으로 경고는 노란색으로 표현합니다. 하지만 어떤 페이지에는 빨간색이 너무 많이 쓰여서 예외적으로 오류를 보라색으로 할 수도 있을 것입니다. 이런 결정을 내리는 경우는 드물겠지만 과거의 방식처럼 웹서비스를 페이..
2015 슬로워크 블로그 인기글 10 2015년 슬로워크 블로그에서 어떤 글이 인기 있었을까요? 페이스북 참여 수 순으로 가장 있기 높았던 글 10개를 소개합니다. 10위: 추천! 웹디자인 스타일 가이드 7가지 (9월 2일) ➔ 더 읽기 웹사이트 스타일 가이드는 '패턴 라이브러리', 'UI 툴킷', 'UI 가이드라인' 등 여러 방식으로 소통됩니다. 웹사이트를 만드는 개발자, 디자이너, 콘텐츠 제작자에게 도움이 되는 잘 만들어진 7가지 스타일 가이드를 소개합니다. 9위: 슬로워크의 색다른 시도, '최고지속가능성책임자'를 영입했습니다! (4월 29일) ➔ 더 읽기 슬로워크는 2015년 CSR 분야의 전문가를 CSO로 영입했습니다. 최고지속가능성책임자(Chief Sustainability Officer)는 세계에서 기업의 사회적 책임을 적극적으로..
추천! 웹디자인 스타일 가이드 7가지 스타일 가이드의 개념은 ‘패턴 라이브러리’, ‘UI 툴킷’, ‘UI 가이드라인’ 등등 소통하는 방식은 각양각색입니다. 어떤 단어로 소통하는 것은 중요하지 않습니다. 하지만 그 의미는 우리가 통일할 필요가 있는데요. 스타일 가이드는 웹사이트를 만드는 이들을 위한 설명서와 재료라고 할 수 있습니다. 이들은 개발자가 될 수 있으며, 디자이너, 콘텐츠 제작자, 혹은 협력업체의 사람일 수도 있습니다. 스타일 가이드의 의미를 알아봤는데요. 이제는 비교적 잘 만들어진 7가지 스타일 가이드를 소개합니다. 에어비엔비(AIRBNB) 에어비엔비의 UI 툴킷은 폼의 입력필드, 메뉴, 광고와 툴바 등의 가이드를 가지고 있습니다. 특히 흥미로운 것은 그들만의 컬러 테마를 만들어서 보여줬다는 점이죠. 웹디자인은 뎁스와 대비 등 다..