2015년 12월에 시작한 베타 테스트를 마치고 드디어 오늘, 스티비 정식버전을 출시합니다.

기획부터 대량 발송 후 성과 측정까지, 이메일마케팅의 모든 과정을 담았습니다.

정식버전 출시를 기념하여 라이트 요금제를 11월 30일까지 무료로 제공합니다.


마케팅 성과를 한 눈에 확인할 수 있는 대시보드

마케팅 성과를 지난 주와 비교해 보고 얼마나 개선됐는지 바로 확인할 수 있습니다. 모바일과 데스크톱 중 어떤 디바이스에서 더 많은 반응이 일어났는지 쉽게 알 수 있습니다. 조만간 스티비 사용자 평균 데이터와의 비교 기능도 선보일 예정입니다.


국내에서 가장 간편한 A/B 테스트

이메일 제목, 발신자 이름, 발송 스케줄로 A/B 테스트를 할 수 있습니다. 간편한 비율 설정으로 빠르게 성과를 개선하세요.


프레젠테이션을 만드는 것처럼 쉬운 콘텐츠 에디터

베타 버전에 비해 콘텐츠 저장 방식을 개선했습니다. 많은 인기를 끌었던 지도 상자에는 한국 실정에 맞게 다음 지도 API를 적용했습니다. 대량 발송 기능의 필수 요소인 푸터 상자가 추가되었습니다.


월 4회까지 무료로 발송할 수 있는 요금 체계

스티비 조사* 결과, 국내에서는 마케팅 이메일을 월 평균 3.25회 발송하고 있습니다. 이에 따라, 구독자 5,000명 기준으로 월 4회까지 발송할 수 있는 스타터 요금제를 무료로 제공합니다. 이메일마케팅을 적극 활용해 성과를 극대화하려는 분들을 위해서는 월 8회 발송이 가능한 라이트 요금제와 무제한 발송이 가능한 스탠다드 요금제를 제공합니다. 정식버전 출시 기념으로 라이트 요금제를 11월 30일까지 무료로 사용할 수 있습니다.



이 밖에도 쉽고 즐겁게 이메일마케팅을 실행할 수 있도록 저희 스티비 팀이 개발한 다양한 기능을 정식버전에 담았습니다.

스티비 사용 중 불편한 점이나 개선사항이 있으면 언제든 support@stibee.com으로 알려주시기 바랍니다. 신속히 응답드리겠습니다.


스티비 팀 조성도, 임호열, 문윤기, 조은지, 이학진 드림



* 스티비 조사는 2015년 12월 9일부터 26일까지 마케팅 실무자 185명에게 온라인 설문으로 진행했습니다. 자세한 조사 결과는 스티비 웹사이트에서 확인할 수 있습니다.

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

마케팅 , 디자인 에이전시가 

만들 있습니다. 

슬로워크는 디자인 에이전시입니다. 프린트 디자인, 디자인, 브랜드 디자인, 인포그래픽 디자인 등을 지난 10 왔습니다. 최근 디자인 에이전시들이 다른 분야의 회사에 인수되거나 스타트업에 투자하거나 자체 브랜드 제품을 개발하는 시장 변화에 대응하기 위해 다양한 시도를 하고 있습니다.


디자인 툴의 발전은 디자인 에이전시에게 직접적인 위협입니다. 디자이너가 없어도 어느 정도의 퀄리티를 보장해 줍니다. 점점 기능이 개선되고 가격이 저렴해지며, 가성비 측면에서 디자인 에이전시보다 뛰어난 경쟁력을 가지게 것입니다. 디자인 에이전시가 새로운 툴과 경쟁하기 어렵다면, 스스로의 경험을 활용하는 방법이 있습니다. <스티비> 이런 맥락에서 시작된 슬로워크의 새로운 시도입니다.


<스티비> 이메일 뉴스레터 발송 서비스입니다. 많은 마케팅 조직들이 뉴스레터를 제작할 외부 업체에 의뢰합니다. 기존의 뉴스레터 발송 서비스가 있긴 하지만 디자인 완성도가 떨어지거나 사용이 불편하여 결국 전문가의 도움이 필요했습니다. 슬로워크도 수많은 뉴스레터 디자인 프로젝트를 수주해왔고, 과정에서 고객의 어려움을 이해하게 되었습니다.


<스티비> 디자인 에이전시가 하던 역할 자체를 서비스로 만들어 제공합니다. 슬로워크는 이러한 시도를 다른 영역으로도 확장해 나갈 계획입니다. 뉴스레터 디자인 외에도 디자인 에이전시의 경험을 바탕으로 경쟁력 있는 도구를 만들 있는 분야는 많이 남아 있습니다.


이메일은 죽지 않았습니다

도구가 문제일 뿐입니다. 

이메일은 가장 보편적인 온라인 커뮤니케이션 수단입니다. 이메일을 하나의 서비스라고 가정한다면 MAU( 달에 이상 사용하는 사람) 한국에서 1,600 명에 이릅니다. 페이스북 한국 MAU 비슷한 수준입니다. 해외에서는 스마트폰의 보급으로 이메일 사용률이 늘어나고 있기도 합니다. 버즈피드 이메일을 매우 중요한 마케팅 채널로 사용하고 있으며, 미국의 뉴스레터 발송 서비스 메일침프 1년에 350 명이 새로 가입하고, 이메일 발송량이 전년 대비 2 증가했습니다. 하지만 한국에서 이메일은 여전히 천덕꾸러기 신세입니다. 많이 사용하지만, 그만큼 많은 스트레스를 유발합니다. 슬로워크는 이것을 시대에 맞지 않는 뉴스레터 발송 서비스 때문이라고 판단했습니다. 



그래서 모바일에 맞는 이메일 뉴스레터 발송 서비스 <스티비> 만들었습니다. <스티비> 사용하면 누구나 쉽게 모바일에 최적화된 뉴스레터를 제작할 있습니다. 복잡한 발송 과정을 최소화하고 단계별 도움말을 제공해서 수신자가 뉴스레터 내용 자체에 집중하게 만듭니다. <스티비> 사용하면 뉴스레터의 오픈율과 클릭률을 높여 마케팅 효과를 극대화할 있습니다. 



<스티비> 이메일마케팅의 

끝판왕을 꿈꿉니다. 

지난 4월부터 직접 뉴스레터를 발행하기 시작했습니다. 모바일 시대에 맞는 이메일이 무엇인지 연구했습니다. 마케팅 효과를 극대화하려면 제목을 어떻게 작성해야 하는지, 발신자 이름을 가지고 A/B 테스트를 어떻게 설계해야 하는지 고민했습니다. 결과를 매주 뉴스레터로 발행했고, 어느새 1,600명에 이르는 구독자가 생겼습니다. 뉴스레터 발송 서비스를 만든다면 무엇보다 스스로의 뉴스레터를 제대로 제작하고 발송할 있어야 된다고 생각했습니다. 그것이 스티비 뉴스레터이며, 연구 결과가 <스티비> 서비스 곳곳에 녹아 있습니다. 


지금의 <스티비> 누구나 쉽게 모바일에 최적화된 뉴스레터를 제작할 있는 서비스입니다. 코딩 지식 없이 클릭 만으로 완성도 높은 뉴스레터를 작성할 있습니다. 텍스트 버튼 크기를 미리 지정해 가독성을 높이고 클릭률을 높일 있으며, 로고 이미지 색상을 추출해 본문에 바로 적용하는 콘텐츠 편집이 용이합니다. URL 입력 만으로 외부 콘텐츠를 본문에 붙여넣을 수도 있습니다.  


가까운 미래에는 사용자별 데이터에 근거한 가이드를 제공해서 이메일마케팅의 성과 개선을 보장하도록 발전시킬 계획입니다. 궁극적으로는 이메일마케팅의 끝판왕이 것입니다. 그간 누구도 시도하지 않았던 엄청난 기능들을 준비하고 있습니다. 



하나의 이메일에는 하나의 메시지

<스티비>에서 마음껏 보내세요. 

지난 9월부터 세이브더칠드런코리아, 서울시 청년허브, 서울시NPO지원센터, 은행권청년창업재단 디캠프(D.CAMP), ()쏘카, ()스포카, ()가든하다, ()한국모금가협회, ()녹색교통운동 다양한 규모의 스타트업, 공공기관, 비영리단체와 함께 클로즈 베타 서비스를 진행하며 기능을 개선하고 완성도를 높였습니다. 


하나의 이메일에는 하나의 메시지라는 스티비의 철학에 따라 이메일을 간결하고 효율적으로 보낼 있도록 정액제로 과금합니다. 횟수에 상관없이 필요한 이메일을 목적에 맞춰 발송할 있습니다. 2016 3 31일까지는 누구에게나 무료로 제공하며, 스타트업, 비영리단체, 사회적기업은 기간 이후에도 무료로 서비스를 이용할 있습니다. 

지금 바로 무료 베타서비스에 가입하세요. 스티비의 꿈에 동참하세요. 





Posted by slowalk