이 글은 Campaign Monitor의 The Really Good Guide to Email Design (+ Bonus Checklist)를 저자의 허락을 받고 번역, 편집한 글입니다.이 글의 저작권은 원문의 저작자에게 있으며 문맥을 고려하여 표현을 수정한 부분이 있습니다. 정확한 내용이 궁금하신 분은 원문을 읽어보시기를 추천합니다.원문에는 Campaign Monitor의 기능을 소개하는 링크가 많이 포함되어있는데 글의 내용과 무관한 링크는 모두 생략했습니다.* 보충 설명이 필요한 부분에는 주석을 달았습니다.* 글이 꽤(?) 길고 여러가지(또는 이런저런) 내용을 다루고 있습니다. 한 번에 다 읽기보다는 궁금한 게 있을 때 필요한 부분만 찾아 읽는 것을 추천합니다.디자인도 멋지고 사람들이 미친듯이 클릭하는 이메일을 만들고 싶은가? Really Good Emails의 능력자들과 함께, 어떻게 하면 끝내주는 이메일을 만들 수 있는지에 대한 고민을 해결하기 위해, 당신의 이메일을 훨씬 더 멋지게 만들어줄 이메일 디자인 가이드와 체크리스트를 만들었다.이 가이드는 이메일 캠페인의 각 요소에 대한 디자인 모범 사례를 다루고, 보너스 체크리스트도 제공할 것이다.이메일 제목전통적인 의미의 “디자인 요소”는 아니지만, 이메일 제목은 구독자가 이메일을 오픈하게 만들어서 이메일의 매력적인 디자인을 볼 수 있게 하는, 그래서 이메일의 인게이지먼트를 높이는 가장 중요한 요소 중 하나이다. 이것만은 기억하자. 대문자와 의미없는 특수문자, 그리고 어떤 단어들은 지나치게 많이 사용하면, 스팸필터에 걸려서 이메일의 도달률을 떨어뜨릴 수 있다. 대신 이런 단어들*을 사용해보자.* 링크된 캠페인모니터의 The 15 Most Powerful Words in Subject Lines라는 글에서는, 이메일 제목에서 성과를 높이는 데 효과적인 단어로, 고객 이름, “Invitation”, “Introducting”, “We” 등을 꼽았습니다. 자세한 건 링크된 글에서 확인할 수 있습니다.이메일 제목에 CoSchedule의 헤드라인 분석 도구를 활용해보는 것도 좋다.제목은 길수록 좋다?이메일 제목이 길다고 꼭 좋은 것은 아니다. 모바일 디바이스, 브라우저, 이메일 클라이언트 등 이메일을 읽는 환경이 매우 다양하다는 것을 명심하자.Return Path의 데이터에 따르면, 이메일 제목의 길이는 65자 정도가 적당하다. 이메일 제목의 평균 글자 수보다 15자 많은 것이다. 41–50자의 이메일 제목의 비율이 가장 높지만, 오픈율은 61–70자*의 이메일 제목이 가장 높다고 한다.* 영문 기준입니다. 국문 기준으로는 30–35자입니다. 이후에 나오는 모든 글자 수도 영문 기준이며, 국문 기준은 영문의 절반이라고 생각하면 됩니다.이메일 제목에 심볼을 사용하는 것은 어떨까?“천 마디 말보다 한 번 보는 게 더 낫다”는 말이 있다. 이모지를 설명하는 데 이것만큼 좋은 말이 없다. 이모지는 이메일 제목에 아주 많은 영향을 준다. 단어를 대체해서 시선을 사로잡는 매력을 더해줄 뿐만 아니라 이메일의 오픈율을 높여준다. Experian의 리포트에 따르면 이메일 제목에 이모지를 사용한 브랜드의 56%가, 그렇지 않은 경우보다 오픈율이 더 높았다고 한다.#슬로워크 #스티비 #디자인 #디자이너 #꿀팁 #이메일 #마케팅 #마케터

일단 명백하게 짚고 넘어가야 할 것이 있습니다. 브랜딩이라는 단어가 남발하는 요즘, 사실 이 단어자체가 올바른 표현인지 다시 생각해 볼 필요가 있다는 것이죠. 당초 Brand라는 어휘는 피부에 새긴 화상과 같은 낙인이나 흔적을 의하는 burn의 어원과 그 맥을 함께합니다. 브랜드라는 뜻이 라틴어로는 '불태우다' 라는 뜻이기 때문이죠.이는 당연히 무언가를 구별/식별하기 위한 '표식' 의 의미로 쓰인 것입니다. 그러니까 그냥 로고를 의미했던 것이었죠. 하지만, 요즘엔 그 의미가 많이 확장/변형되었습니다. 이유는 단순해요. 너무 많은 표식들이 생겨났기 때문입니다. 게다가 오래전엔 죄수나 사형수, 범죄자, 이상한애들에게 부여했던 것이 '낙인' 이었기에 사람들에게 매력을 어필할 필요가 없었어요. 그냥 그런 표식을 지닌 애들을 피하면 그만이었죠. 그러나 요즘의 브랜드는 비지니스자체이니 사람들의 마음과 지갑을 열게 해야합니다. '낙인'의 역할이 완전히 바뀌게 된 것이죠. 예전엔 낙인을 '구별' 하기만 하면 되었지만요즘엔 낙인을 '선택' 해야하는 시대가 되었습니다.구별과 선택은 다른 개념이예요. 구별은 인식의 개념이기 때문에 '아 그렇구나' 하고 끄덕이기만 하면 됩니다. 하지만 선택은 행동의 개념이라서 '하나를 선택하고 나머지를 포기하게끔' 해야 하죠. 이 때 기회비용이 발생하면서(심리적이든, 실물적이든) 브랜드는 그것 이상의 가치를 제공해야 하는 입장이 되었습니다. 그래서 수많은 눈요기와 정책, 장점, 특징들을 내세우며 "우린 가치가 있어!!" 라고 소리지르고 있는 상태가 바로 요즘입니다.자, 하지만 여기서 함정이 발생합니다. 위에서 말했듯 고객은 무언가를 선택할 때 얻는 이득과 기회비용 사이의 가치를 저울질합니다. 그리고 더 합리적인 선택을 하겠죠. 적어도 이론적으론 말입니다. 그러나 현실은 엉망진창입니다. 사람은 그리 합리적인 존재도 아니고 이득과 기회비용 사이의 가치를 정확히 판단하지도 못합니다. 게다가 그 판단의 기준은 지극히 개인적인 성향과 가치관에 좌우되기도 하고, 심지어 그 성향과 가치관이란 것은 트렌드와 다수의 압박 등 예상치 못한 변수들에 의해 기묘하게 변질되기도 합니다.상황이 이렇다보니, 일관적인 기묘하게 이상한 포인트에서 대박치는 회사가 있는가 하면, 정석대로 해도 영 반응이 시원찮은 경우도 많습니다. 때문에 브랜드를 하는 사람들이나 그걸 원하는 회사나 도무지 갈피를 잡기가 힘들어졌죠.  물론 데이터가 쌓이면서 일정 패턴이 발생했던 것은 사실입니다. 인지/사회심리학의 도움으로 인간 행동의 불특정성을 어느정도 규명해나가고 있는 것이죠. 그러나 그것이 규명되는 속도보다 사람과 시대의 변화속도가 훨씬 빠르다는 것입니다.사람의 행동이 이렇게 가변적이니 전략을 짜는 사람 입장에선 그것에 일일이 맞추다가 늙어죽을 것 같았을 겁니다. 그러다 누군가가 이런생각을 했겠죠. 사실 생각을 했다기보단 천성적인 마이웨이가 있던 사람이었을 겁니다. 그냥 하던거나 계속 해야겠다...라고. 그리곤 그냥 해오던 걸 꾸준히 계속 묵묵히 했더니. 생각지도 못했던 평가들이 등장하기 시작합니다. 부정적이든 긍정적이든 꾸준한 일관성은 캐릭터를 만들어냈고, 그들은 예측가능한 존재가 되었습니다. 보통 이러면 매력이 사라져야 맞는데, 오히려 그 일관성에 열광하는 팬층이 발생하기 시작했습니다. 그리고 그 팬층을 동경하던 어중간한 포지션에 있던 사람들이 그들을 따라서 유입되기도 했죠. 굳이 어디라고 얘기하지 않아도 익히 알려진 대부분의 성공사례의 기업들의 브랜딩 전략을 떠올려볼 수 있을 것 같습니다.이런 프로세스가 성공사례로 속속 등장하기 시작하면서 브랜딩은 더이상 '우리가 그들에게 무언가를 하는 것' 의 개념이 아니게 되었습니다. 나는 그냥 하던걸 잘하는 것이고, 브랜딩은 그것을 통해 "되어지는 것" 이죠. 그래서 브랜딩은 그 자체가 목적이 아니라 일종의 부수효과라고 하는 편이 오히려 맞을 것 같습니다.그러니 "Branding" ..브랜딩을 한다! 라는 능동적표현보단 "Branded" 브랜딩 되어진다.라는 수동적표현이 오히려 적절하지 않을까 싶네요.물론 반론의 여지가 있긴 합니다. 예를 들어 키엘의 경우 Lab느낌의 화장품매장을 컨셉화했고, 직원들에게 기본적인 의학적지식을 교육시키는 등 어떤 전략에 의해서 움직이고 있습니다. 또한 이것이 키엘의 브랜드를 명확하게 만들었으니, 이것은 화장품전문가를 원하던 고객들의 니즈를 파악해서 그에 응답한 것이 아니냐?! 라는 의견이 나올 수 있겠죠.Kiehl's : 약국에서 화장품을 판다!..라는 컨셉으로 직원들은 약사복을 입고있습니다. 맞는 말입니다. 물론 키엘은 수많은 서칭과 서베이, 내부회의를 거쳐서 최초컨셉을 기획하고 확장시켰을 것입니다. 그러나, 애플도 그랬고 다이슨도 그랬고 키엘이나 이니스프리, 에뛰드하우스도 그렇듯 고객이 이걸 원하니까 이걸하자! 라고 시작하진 않았습니다. 오히려 그렇게 색깔이 분명한 곳들은 최초의 리스크가 엄청났을 텐데 그런 관점에서 본다면 합리적이거나 효율적인 선택은 아니었겠죠. 그걸 원하지 않는 대다수의 사람들을 포기해야 했을 테니까요.  대신 그들이 선택한 것은 이게 시장이 원하든 원치 않든 내가 옳다고 생각되는 색깔을 일관성있게 밀어붙이고 유지하는 것이었습니다.  "너희가 원하니까 이걸 하겠습니다.." 가 아니고 "우린 이런 기업입니다." 라고 무심하고 담담하게 걸어가는 편을 택한 것이죠"너희가 원하니까 이걸 하겠습니다.." 가 아니고"우린 이런 기업입니다." 라고 무심하고 담담하게 걸어가는 편을 택한 것이죠.그러니, 브랜드라는 것은 이제 한 순간의 낙인과 표식의 의미가 아닙니다. 그것은 꾸준한 행동과 신념의 일관성을 의미하는 단어가 되었습니다. 그들은 모두가 아닌, 우리를 사랑하고 지지해주는 고객들을 위해 최선을 다했습니다. 사회적책임을 다하고 제품이면 제품, 서비스면 서비스 그 자체에 충실했습니다. 브랜드는 이런 일련의 과정과 시간을 통해 자연스럽게 축적되어가는 것이 아닐까 싶습니다.그러니 우리가 지금부터 알아볼 것은, 고객의 마음을 사로잡기 위해 안간힘을 쓰는 그런 종류의 것이 아니라 우리가 하던 일을 어떻게 꾸준히 지속시키고 깊이 있게 만들것인가를 고민해보도록 하겠습니다.#애프터모멘트크리에이티브랩 #브랜드 #브랜딩 #마케터 #마케팅 #디자인 #디자이너 #인사이트 #조언 #꿀팁

데일리호텔을 모르는 고객들이 데일리호텔을 처음 만나게 되는 채널은 어디일까요?근본적인 접점 채널을 생각하다가 웹 사이트에 검색 시 처음으로 나오는 기업 웹 사이트를 떠올렸습니다. 그리고 알아본 결과 실제로 웹 사이트를 통해 앱 다운로드와 파트너 제휴가 꽤 이루어지고 있음을 알게 되었죠. 해서 이런 중요한 브랜드 채널에 부합하고자 사이트 리뉴얼을 결심합니다. (라고 말하고 비주얼 개선이 시급했다고 합니다..)기존 워드프레스로 제작되어있던 데일리호텔 웹 사이트의 일부입니다. 기존 페이지를 제작할 당시 인하우스를 통한 웹페이지 구현이 아니었기 때문에 페이지 유지 보수에 어려움이 있었습니다. 그리고 페이지 자체가 복잡하게 구현이 되어있어 콘텐츠 로딩에 시간이 많이 소요되고 있었습니다. 해서 생각했습니다.어설프게 수정할 바에, 다 뒤집어엎자.그렇게 할 시에 가장 첫 번째로 유지보수 및 관리가 용이해야 했습니다. 또한 데일리호텔의 '모바일 웹' 출시일을 맞추어 완료가 되어야 했기 때문에 빠른 시일 내에 제작이 필요했죠. 그래서 생각한 것이 '웹빌더'였습니다.워드프레스는 웹 사이트를 하나하나 구현시켜야 한다면 '웹빌더'는 이미 구현해놓은 플랫폼이 있어 원하는 대로 끌어다가 내용만 입력하면 되는 방식입니다. 즉, 워드프레스와 달리 별도의 호스팅이 필요 없는 샘이죠.1단계) 제안하기________________________________________하지만 비용이 들지 않았던 워드프레스와는 달리 웹빌더의 경우 편리한 만큼 플랫폼 사용 비용을 지불해야 하는 단점이 있었습니다. 해서 '웹빌더'를 사용해야 하는 이유에 대해 구성원들을 설득해야 했습니다.- 호스팅이 필요 없음 -> 구축기간을 단축시킬 수 있고 관리가 용이함- 반응형 웹 사이트(웹, 태블릿, 모바일) 구축이 가능함- 한 번의 결제로 무제한 트래픽과 용량 사용이 가능함- 큰 기술력을 필요로 하지 않음다행히도 기업 웹 사이트의 중요성을 구성원들이 알고 있었고, 그 개선 또한 시급하다는 것을 알고 있었기에 쉽게 다음 단계로의 진행이 이루어졌습니다.2단계) 페이지 구성 기획________________________________________다음 단계는 '그렇다면 어떻게 페이지를 설계해야 할까?'였습니다. 기존 웹 사이트는 내용이 중복으로 기재된 것도 많았고, 문장도 다듬어지지 않은 경우가 많았습니다. 해서 Flow는 물론 단어와 문장 선정도 다시 진행해야 했습니다.                                     페이지 구성 기획(Rough version)위 표처럼 AS-IS와 TO-BE를 비교하며 수정 및 보완해야 할 부분을 체크했습니다. 요소를 덜어내고 추가하는 가장 중요한 과정이었죠.3단계) 페이지 적용 및 제작________________________________________그다음 페이지에 위 구성을 적용시키고 단어 및 문장들을 다듬는 작업을 진행합니다. 내용을 삽입함과 동시에 어떤 이미지를 어떤 사이즈로 넣을지도 함께 설계하며 적용시킵니다.                                     수정된 기업 사이트의 'Home' 탭 일부                            수정된 기업 사이트의 'Partnership' 탭 일부또한 단순히 내용을 채워가기보다는 모델력(데일리호텔 모델 조인성)을 발휘할 수 있는 이미지/영상을 넣는다던가, 제휴 제안 입력폼에는 어떤 양식을 적용시켜야 한다던가의 디테일한 요소들을 설정 및 적용합니다.4단계) 개발 요건________________________________________웹 사이트 제작이 끝났다고 끝난 게 아닙니다. (어찌 보면 이것이 시작인 것을..) 이제는 설계해놓은 대로 연결되는 계정 및 링크를 연결시켜주는 작업이 필요합니다.                                       수정된 기업 사이트의 Footer페이지의 제일 하단에 있는 Footer를 예로 들자면 데일리에서 운영하는 각 SNS 채널들을 링크로 연결시켜주고, 회사소개서 PDF를 다운로드할 수 있도록 파일을 올려놓는 다던가, '문의'를 클릭했을 시에 설정해놓은 주소로 메일을 보낼 수 있는 창을 띄운다던가 등의 과정입니다.링크 정리까지 완료되었다면 이제는 완성된 웹 사이트를 고객들이 만나볼 수 있도록 웹마스터 도구에 등록하는 과정을 거칩니다. 웹마스터 도구 등록을 하지 않으면 흔히 고객들이 사용하는 네이버, 다음, 구글 등에서 페이지 노출이 되지 않기 때문에 제작을 하나 마나인 샘이죠.또한 데일리호텔 기업 웹 사이트로 들어오는 검색 키워드와 방문자 통계 등을 볼 수 있도록 GA Analytics 코드를 삽입하고, 웹빌더 서비스 측에서 임의로 만든 도메인을 데일리 측에서 설정한 도메인으로 변경 및 리다이렉트 시키는 과정을 거칩니다.마지막 단계) 감상________________________________________https://corp.dailyhotel.co.kr/마치며________________________________________이렇게 입사 이래로 항상 과제였던 부분이 해결이 되었습니다. 생각보다 워드프레스로 제작된 사이트와 데일리호텔 앱과 연결되어 있는 부분이 많아서 대안책을 찾느라 시간이 좀 걸렸지만 많은 분들의 도움으로 척척 진행되었던 프로젝트였던 것 같습니다. 하나하나 데일리의 색으로 물들여 가는 것도 보람차구요.그럼 다음 프로젝트를 기약하며! 총총________________________________________기획/진행 : Creative팀 & Product팀작성자 : Creative팀 Blair Ahn#데일리 #데일리호텔 #개발 #개발자 #디자인 #디자이너 #기획 #기획자 #협업 #성과 #인사이트 #경험공유 #후기 #일지

지난번 '문돌이가 개발자랑 일할만큼만 프로그래밍 익히기'에 이어 PM 시리즈의 일환으로 이번에는 PM으로서 디자이너 역할을 대신할 수 있는 방법론에 대해 논해보고자 한다. 아 우선 두가지 미리 가드 치고 들어가고 싶은게 있는데 첫째, 여기서 PM이라 함은 Product Manager, 즉 본인이 직접 자식처럼 키우고 가꾸고 있는 프로덕트가 있고 이를 잘 살려나가기 위해 개발자, 디자이너, 마케터 등등 다양한 분야의 전문가들과 함께 일하는 사람들을 의미한다는 것과, 둘째, 이 글의 요지는 '디자이너가 아직 없어서...' PM이 어설프게 디자이너 역할을 대신할 수 있는 방법론이지 'PM이 디자이너 제끼고 디자이너 되는 법'이 아니라는 것이다.가장 이상적인 스타트업 팀은 아마도 3명의 팀원이 개발자1, 디자이너1, 하려는 분야 전문가1 이렇게 이루어진 팀이겠지만 (또는 기술스택이 높은 분야면 개발자2, 디자이너1) 이렇게 이상적으로 디자이너를 품어서 팀 꾸리고 시작할 수 있는 스타트업이 많지 않을거라 생각한다. 특히 웹/모바일 분야의 제품을 구상하고 있는 초기 스타트업이라면 당장 프로토타입이라도 만들어서 런칭하는게 중요하기 때문에 아무래도 정식 디자이너까지 꾸려서 팀빌딩 하는건 많이 부담스러울 것이다.따라서 (내 경우처럼) 높은 확률로 당신의 스타트업에는 개발자(들)와 (디자인 해본적 없는) 기획자만 있게 될 것이고, 이 때 가장 중요하게 터지는 문제가 바로 '개발자가 참고해서 개발할 수 있는 디자인물과 디자인파일들이 없다' 이다. 사실 이런 경우 보통 만렙 개발자들은 본인들이 와이어프레임만 보고도 알아서 웹사이트 돌아다니면서 이미지 앉히고 아이콘들은 폰트어썸 같은 라이브러리에서 그럴싸한거 적용하고 메뉴바나 네비게이션 같은것도 그럴싸한 라이브러리 찾아서 적용해 버림으로써 해결하기 때문에 크게 문제될 것은 없지만, 아마도 속으로는 이렇게 생각하고 있을 가능성이 크다. '아니 도대체 저xx가 하는일은 뭐야?!'당신 개발자가 속으로 이렇게 생각하고 있을수도 있다...자, 이제 본론으로 들어가서, 그러면 아직 디자이너가 없는 팀에서 PM이 디자이너 역할을 대신할 수 있는 방법론에 대해 논의해 보자. 본 방법론은 '모바일 앱'을 디자인하는걸 전제로 작성하였고, 이 방법론이 성공적이기 위해서는 다음의 전제조건들이 필요하다.1. 나는 와이어프레임을 많이 그려봤고, 대략적인 앱의 인터페이스 구성 및 흐름에 대해 어느정도 알고 있다.2. 나는 맥북을 가지고 있다.3. 나는 $99짜리 프로그램 구입할 만한 돈이 있다.Step 1. 와이어프레임 만들지 말고 기능플로우 차트만 만들어서 개발자랑 상의하기웹/모바일쪽 제품 담당하는 PM들이 가장 많이 하는 일들이 아마도 와이어프레임을 아주 멋있게 그려서 파워포인트 (또는 키노트)에 멋드러지게 얹은 다음에 개발자와 디자이너에게 전달하는 일일 것이다. 그런데 사실 자세한 와이어프레임은 1/내가 대규모 조직에 있어서 많은 사람들에게 동일한 정보를 전달해야 하거나 2/누군가에게 컨펌을 받아야 해서 뭔가 보여줄게 있어야 하는경우들이 아니라면 위에 언급한 스타트업에서는 별로 필요하지 않다. 오히려 개발자 앉혀놓고 종이에다가 쓱쓱 그려서 보여주면 10분이면 끝날일을 하루 걸려서 파워포인트에 그리고 있는 시간이 더 아까울 뿐이다. (어차피 개발자들은 핵심만 보기 때문에 저 기능플로우가 종이에 끄적거려져 있던 멋있게 파워포인트에 그려져 있던 아무 차이도 없고 중요하게 생각치도 않는다.)따라서 1분1초가 아까운 스타트업에서 저거에 시간낭비하지 말고 그냥 슬랙이나 에버노트에 대충 기능플로우 차트만 만들어서 개발자랑 바로 상의하고, 기술적으로 된다 안된다 시간낭비다 등등 의견 수렴하고 다시 수정해서 보여주고... 요런 식으로 코어 기능들과 그 흐름을 빠르게 결정하는게 훨씬 효율적이다. 개발자와 상의할 기능플로우 차트에는 보통 다음 내용들이 들어간다.1. 기능 섹션과 해당 섹션의 세부기능들 정의 - 기능 섹션이라 함은 유저가 앱을 사용하는 여정상에 각각 큰 덩어리를 정의해 주는것을 말한다. 예를들면 온보딩, 회원가입, 메인화면, 유저 프로필 등등 큰 덩어리를 정의하고 각 섹션에 필요한 세부 기능들을 나열하는 작업이다. 2. 코어 기능과 추가 기능의 구분 - 프로토타입 단계에서 요 기능이 없으면 우리 앱이 제시하는 핵심가치 제공이 절대로 불가능하다고 생각되는 진짜 꼭 필요한 기능만 골라낸다. 뭐 있으면 좋거나 핵심가치 제공에 도움이 되는 기능들이지만 이게 없다고 해서 앱을 제대로 사용하는게 아예 불가능하다..가 아닌 기능 요건들은 다 쳐내서 서 프로토타입 런칭 이후에 순차적으로 적용시킬 기능들을 나열하고 스케줄링 한다.3. 서비스 플로우 (선택) - 와이어프레임 그리듯이 순차적인 서비스 흐름도를 그리는건데, 개발자와 상의하기 전에 종이에 미리 그려서 가져가도 상관없지만 개인적으로 위에 1, 2번만 잘 정해서 가져가면 어차피 개발자랑 상의하면서 이건되고 이건 안되고 하면서 다 작살이 나기 때문에 3번을 미리 그려갈 필요가 없다... 그냥 1, 2번을 개발자랑 상의해서 컨펌한 후에 3번을 같이 머리 맞대고 (종이에) 그리면 된다 (파워포인트 제발..여기다 그리지 말아줘..).이런 현란한 와이어프레임 그리고 있을 시간에 얼른 개발자랑 기능요건만 정해서 상의하자. Step 2. 디자인 아카이브에서 맘에드는 화면 매칭하기위에서 개발자랑 머리 맞대고 대충 종이에 서비스 플로우 그렸다면 이제 본격적인 디자이너스러운 업무의 시작이다. 각 단계별 화면마다 우리가 벤치마킹 할(이라고 적고 '적당히 베끼기 쉬운'이라고 읽는다) 참고화면들을 디자인 아카이브 사이트들을 열심히 돌아다니면서 수집한다. 디자인 아카이브는 정말 많은데 여기서는 필자가 자주 쓰는 사이트 3군데만 소개하도록 한다.1. CollectUI.com고퀄의 모바일/웹 관련 디자인, 인터렉션들이 각 기능섹션별로 정리된 아카이브 이다.콜렉트UI는 아까 얘기한 각 기능섹션 또는 유저태스크 별로 필요한 화면 디자인이나 인터렉션 디자인들이 잘 정리된 아카이브인데, 그 하나하나 퀄리티가 매우 뛰어나다. 예를들어서 온보딩 관련 디자인을 찾아보고 싶으면 왼쪽 사이드바에서 onboarding을 검색해 보면 해당 메뉴가 나오고 수 많은 앱들의 온보딩 화면들이 모아져 있다. 주로 아이폰 위주이긴 한데 가끔 안드로이드에 최적화된 디자인도 찾을 수 있다.2. Behance의 Interaction Gallery전 세계의 디자이너들이 작업한 코퀄의 앱/웹 디자인 아트워크만 모아놓은 갤러리이다.비핸스는 비전공자들도 많이 찾아보는 유명한 사이트가 되었지만, 이 갤러리를 아는 사람들은 드물거라 생각한다. 원래 옛날에 앱디자인갤러리 (http://www.appdesignserved.co/)라는 사이트가 비핸스에서 저런 고퀄 디자인 아트워크만 묶어서 보여줬었는데 어도비에서 비핸스로 통합시킨 것 같다. 아무튼 전 세계의 잘나가는 디자이너들의 수려한 아트워크를 볼 수 있는 갤러리인데, 여기서 내 앱과 기능요건이 유사하거나 비슷한 분야에 있는 앱 위주로 아트워크를 찾아서 클리핑 한다.3. 핀터레스트 검색핀터레스트는 검색어가 중요하다.핀터레스트를 모르는 사람은 없어도 내 주변에 '핀터레스트 하고 있어'라고 말하는 사람은 한국에서 본 적이 없을 정도로 아직 우리나라 사람들한테는 생소한 사이트 이다. 여기는 사람들이 스크랩 하고 싶은 자료들을 마치 냉장고나 칠판에 핀 꼽아서 수집해 놓듯이 모아놓는 사이트인데 역시 디자이너들이 많이 쓴다. 내가 만일 앱 온보딩 디자인을 여기서 찾고자 하면 Mobile app onboarding라고 치고, 특정 버전의 온보딩만 검색해 보고자 하면 app onboarding iOS, 또는 app onboarding android 이런 식으로 검색하면 된다.Step 3. 스케치 프로그램 구입하기이제부터 가장 중요한 단계다. 내가 디자이너 대타를 하기로 마음 먹었다면, 그리고 당신이 맥북 유저라면 (혹시 맥북 유저가 아니면 포토샵으로 해야 하는데 이건 벡터기반이 아니여서 어렵다.. 그냥 이 기회에 미래를 위해 투자하는셈 치고 맥북 하나 장만하심이 어떨지..) 고민하지 말고 스케치라는 프로그램을 구입하도록 한다. 가격은 A사처럼 치사하게 월별 과금방식이 아닌 쿨하게 한번에 $99이다. (혹시 맥북의 앱스토어에서 구입하면 더 비쌀수도 있다. 애플의 치사한 수수료 때문에.. 꼭 웹사이트 들어가서 구매하길 바람)스케치는 비전공자의 벡터기반 디자인작업을 마법처럼 쉽게 만들어준다. 고민하지 말고 구입하자.보통 디자인 작업은 벡터로 이루어지는데 이는 기기마다 화면 사이즈가 다 제각각인지라 이를 픽셀 기반으로 작업해 버리면 화면 사이즈를 키울때 마다 깨지게 된다. 벡터로 작업하면 적합한 사이즈로 손실 없이 export가 가능하다. 어도비로 이 작업을 하려면 일러스트레이터를 만질 줄 알아야 하는데, 솔직히 우리가 정식 디자이너 될것도 아니고 그냥 임시로 대타 하는건데 저걸 월별로 돈내면서 설치해서 또 겁나 복잡한 인터페이스 공부하면서 낑낑대느니 난 고민하지 말고 스케치를 사용할 것을 추천한다. 스케치는 일단 인터페이스가 웹/모바일 디자인하는데에 특화되어 있고 일러스트레이터는 그래픽 디자인, 아트 디자인, 일러스트 디자인 등등 훨씬 더 복잡한 세계의 디자인까지 커버해야 하는 프로그램이기에 당연히 인터페이스가 스케치보다 10배는 복잡하다.하지만, 역시 우리는 비전공자이기 때문에 스케치가 아무리 쉽다 한들, 여기서 뭘 어떻게 작업을 시작해야할지 생각하면 막막해 질게 뻔하다. 이 방법론은 step 4 부터 자세하게 보여줄테니 겁먹지 말자.Step 4. 컬러 선택 및 심플한 앱 로고 디자인혹시 디자인 전공자가 보기엔 말도 안되는 얘기일수는 있으나... 필자의 개인적인 생각으로 모든 디자인의 시작은 메인 컬러 잡는것 부터라고 생각한다. 즉, 내 앱에서 메인으로 쓸 컬러를 일단 정하고 나면 향후 디자인은 그 한 컬러를 중심으로 통일해서 쓰기만 하면 결과물이 제법 나쁘지 않게 나오기 때문이다. 보통 비전공자들의 디자인이 패망하게되는 대표적인 이유가 메인컬러를 여러개 써서 촌스러워 보이는 건데 사실 본인들은 내 디자인이 왜 촌스러워 보이는지 잘 모른다. 예를 들어 보자. 메인 컬러는 한개만 써야 촌스러워 보이지 않는다.여기 두개의 컬러 조합이 있다. 일단 딱 봐도 1번이 2번에 비해 10배는 깔끔한 느낌이다. 물론 디자인 전공자들은 이를 이론적으로 구분 가능하다. (배색-보색 관계가 어쩌고 저쩌고) 하지만 우리 비전공자는 그런거 모르고 느낌으로 해야 하기 때문에 이런식의 접근이 필요하다.1. 메인컬러라 함은 우리가 보기에 눈에 띄는 컬러를 말한다. - 위의 예시에서 당연히 오렌지 색은 엄청나게 눈에 띄는 색이니까 메인컬러, 2번 디자인의 네이비색도 눈에 띄니까 메인컬러, 역시 2번 디자인의 어설픈 초록색도 눈에 띄니까 메인컬러이다. 하얀색, 회색계열은 눈에 띄긴 하지만 보색관계에 의해 눈에 띄는 거니까 그냥 메인컬러로 아예 생각하지 말자.2. 메인컬러 2개 이상 쓰지 말자. - 2번 디자인처럼 메인컬러를 여러개 써버리면 우리같은 비전공자들이 컬러 배치할 경우 99.9%의 확률로 촌스러워 진다. 나중에 앱 기능이 복잡해 지면 더 점입가경이다. 따라서 메인컬러는 반드시 한개로만 가고 나머지는 메인컬러에서 색을 좀 빼서 색을 만들거나 흰색, 회색 계열로 가는게 제일 안전하다.자, 그러면 메인컬러를 어디서 어떻게 결정하지? 이를 위해 내가 자주 쓰는 컬러 사이트들 2곳을 소개한다.1. ColorHunt.co각 컬러 배색의 윗 줄이 메인 컬러 들이다.컬러헌트는 다양한 색깔 조합을 스펙트럼으로 구성해서 모아논 컬러 아카이브 이다. 여기서 밑 색깔들은 볼거 없이 맨 윗띠의 메인컬러들만 보면서 색깔을 골라서 헥스코드를 기록해 놓는다. (헥스코드는 보통 #2794EB 요런식으로 적혀있는 코드를 말한다) 'hot' 이나 'popular' 탭을 누르면 인기 많은 색들을 볼 수 있다.2. Colovely 스페이스를 눌러가면서 랜덤하게 컬러를 보여준다.여기는 컬러헌트에서 색 찾기도 귀찮거나 잘 모르겠을때 들어가서 그냥 스페이스바를 눌러대면 랜덤하게 컬러를 제안해 주는 사이트 이다. 어떤 알고리즘으로 색을 추천해 주는지는 모르겠지만 그냥 스페이스 계속 눌러대다 보면 제법 끌리는 색깔 많이 보여준다. 맘에드는 색이 있으면 역시 헥스코드를 기록해 놓는다.이렇게 메인 컬러를 결정했으면 다음 단계는 심플한 로고를 만드는건데, 만일 본인이 의기양양하게 로고를 디자인해 보고 싶으면 말리진 않겠으나 로고 디자인의 세계는 정말 심오한 세계이기 때문에 괜히 건들지 말자. 그냥 내가 하는 방법대로 해보도록 한다.1. 그냥 깔끔해 보이는 폰트에 메인컬러를 적용해서 만들기위의 문돌이닷컴의 예를 들어 보자. 당신이 메인컬러를 저 오렌지색으로 결정했다면 가장 무난한 로고 배치는 오렌지색을 백그라운드컬러로, 폰트컬러는 하얀색으로 하는 것이고, 나눔고딕이나 산돌고딕과 같은 무료 폰트를 활용해서 앱 로고를 저런식으로 심플하게 만들어 볼 수 있을 것이다.메인컬러를 배경색으로, 폰트를 흰색으로 배색하는것 만으로도 깔끔한 앱 로고가 나온다.2. Dribbble에서 벤치마킹(이라고 쓰고 베낀다고 읽는다) 하기드리블은 아까 소개한 비헨스같은 디자인 아카이브인데, 주로 그래픽 디자인이 단컷으로 모여있는 아카이브이다. 여기에서 simple logo, 또는 simple app logo라고 치면 참고할만한 디자인이 많이 검색된다. 최대한 타이포크라피 중심의 심플한 디자인을 참고하여 본인의 앱 로고를 디자인 해 보도록 한다.드리블에서 최대한 심플한 앱 로고를 찾아서 벤치마킹 해본다.Step 5. 스케치 디자인 컴포넌트 및 아이콘 아카이브 활용하기자 이제부터 본격적인 앱 스크린 디자인 시작이다. 이제 메인컬러도 선택 했고, 앱 로고도 만들었지만 역시 비전공자 입장에서 어디서부터 시작할지 막막할 것이 뻔하다. 이를 위해 준비한 비장의 무기가 있다. 바로 스케치로 디자인한 파일들을 무료로 쓸 수 있게 해주는 아주 감사한 스케치 디자인 컴포넌트 아카이브들 두 군데를 소개하겠다.1. Sketch App Sources제법 오래된 아카이브로 수 많은 스케치 디자인 파일을 무료로 다운받을 수 있다.2. Sketch Repo생긴지 얼마 안된 사이트이지만 모던하고 세련된 디자인들이 많이 올라온다. 역시 무료.위 2개의 사이트에서 UI kit, app design 등의 검색어를 입력하면 아예 필요한 앱 화면이 미리 디자인 된 무료 UI kit 파일을 다운받을 수 있다. 여기서 중요한건 다음과 같은 기준에 부합하는 파일을 다운받아야 하는 것이다.1. 이미지 배경이 아닌 단색 위주의 배경으로 구성되어 있고 메인컬러를 한개만 쓴 것2. 내가 하려는 앱과 유사한 분야의 UI kit. (예를들면 메신저 앱을 개발할 거면 메신저 킷)3. 메뉴바 구조가 일반적이거나 자연스러운 것내가 다운받은 뉴스피드 관련 앱 UI kit이다. 단색위주의 평이한 메뉴 구조로 디자인 되어 있다.본격적인 디자인을 하기 전에 개발자에게 메인이 되는 스크린 사이즈를 물어보도록 하자. iOS를 예로 들어보면 어떤 개발자는 iPhone 6 plus의 큰 화면 기준으로 디자인해서 컨스트레인을 좁혀나가는 방식을 선호하는 개발자가 있고, 반대로 iPhone 5의 작은 화면 기준으로 스페이스를 넓혀나가는 방식을 선호하는 개발자도 있다. 이에 맞추어 아트보드의 스크린 사이즈를 결정하도록 한다. 스케치는 친절하게도 아트보드를 클릭하면 기기에 맞춘 아트보드 스크린 사이즈가 이미 선택되어 있으니 클릭만 하면 된다.스케치에는 이미 기기별로 아트보드 사이즈가 세팅되어 있어서 선택만 하면 된다.이제부터 마법을 부려보자. 방금 다운받은 UI kit을 우선 위에서 선택한 스크린 사이즈에 맞추어 크기를 바꿔 준다. 이때 주의할 것은 각 스크린의 폴더를 전체를 잡아서 크기를 변경해 주어야 비율대비 변경이 가능하다. (마치 파워포인트에서 각 요소를 그룹으로 묶어서 크기를 변경해 주어야 깨지지 않고 비율대비 변경이 가능한 것과 같은 원리이다.) 위의 킷은 메인컬러를 붉은색 하나만 쓴 것을 알 수 있다. 저 부분을 모두 아까 우리가 정한 오렌지색 계열의 메인컬러로 바꾸고, 불필요한 요소는 삭제하고 컨텐츠를 내가 하려는 컨텐츠로 변경해 준다. 또한 크기를 변경하면서 정렬이 흐트러 진 것도 다시 맞춰준다.메인컬러 하나만 바꿔도 느낌이 확 다르다.위의 UI kit은 iOS라기 보다는 안드로이드에 어울리는 디자인이다. 특히 하단의 탭메뉴바가 지나치게 안드로이드 스럽다. 이를 iOS 스럽게 바꿔보자. 예를들어 저 문돌이닷컴 앱의 3개 메뉴가 '이벤트,' '뉴스,' '채팅' 이런 식으로 구성되어 있다고 가정해 보자. 우선 탭바의 높이를 좀더 높혀주고 (이건 구글링 조금 해보면 아이폰 탭메뉴바 높이가 얼마인지 금방 찾을 수 있다) 아이콘을 다른걸로 교체해 줘야 한다. 여기서 부딪치는 문제가 비록 iOS에 기본 아이콘을 쓰면 괜찮지만 적당한 아이콘이 없을 경우 당신이 직접 디자인해 줘야 하는데, 아이콘 디자인이 어디 쉬운일인가? 걱정할 것 없다. 이를 또한 마법처럼 해결해 주는 사이트가 있다. 바로 Noun Project이다.눈프로젝트 사이트에서 필요한 아이콘을 찾아 SVG 파일로 다운받는다.개발자들이 오픈소스 운동에 열심히 참여하는 것 처럼 여기도 본인의 디자인력을 수 많은 사람들과 공유하는 아주 훌륭한 디자이너들이 올린 수 많은 아이콘들을 png와 svg로 다운받을 수 있다. 뭐 모르는 사람도 있으리라 생각되지만 참고로 png는 픽셀기반, svg는 벡터기반이다. 우리는 스케치에서 벡터기반으로 작업하고 있기 때문에 svg 파일을 다운받도록 한다. 다운받은 아이콘을 스케치로 불러온 후 크기를 조정하고 컬러도 우리의 메인컬러로 변경해서 다음과 같이 적용해 봤다. 덤으로 로딩파일도 한번 만들어 봤다.물론 디자이너가 보면 코웃음 치겠지만 뭐 이정도 디자인이면 프로토타입으로는 나쁘지 않다. Step 6. 제플린에 디자인 가이드 올리고 개발자에게 디자인 파일 넘겨주기드디어 마지막 단계이다. 보통 디자이너들은 개발자에게 디자인파일 넘겨줄때 다음 두개를 준다.1. 디자인 가이드 - 이건 스크린에 각 요소들의 크기가 몇 픽셀이고, 간격을 얼마고 뭐 이런것들을 상세하게 표시해 준 가이드를 말한다.2. 디자인 파일 - 각종 아이콘, 이미지 등등 개발에 필요한 파일들을 다양한 파일 사이즈로 익스포트해서 전달해 준다.우선 디자인 가이드는 역시 우리가 이거 만드려면 엄청난 노가다인데, 이를 마법처럼 쉽게 해주는 프로그램이 또 있다!! (고맙게도 1개 프로젝트까지는 무료이다.) 바로 제플린이라는 프로그램이다.제플린을 사용하면 디자인가이드 만들 필요 없이 알아서 생성해 준다.제플린을 다운받으면 스케치와 자동으로 연동이 되고, 스케치에서 제플린으로 업로드하고 싶은 아트보드를 클릭한후 plugin에서 제플린으로 업로드를 클릭하면 알아서 제플린으로 업로드 된다. 그리고 나서 제플린으로 개발자를 초대하면 끝. 개발자는 여기서 저 버튼들의 크기가 얼마이고 여백을 얼마이고 컬러의 헥스코드는 뭐고 이런 내용들을 쉽게 확인 가능하다.디자인 파일은 사실 제플린에서 개발자가 바로 내려받는게 가능한데, 이것도 조금 노가다일 수 있으니 직접 익스포트해서 깔끔하게 전달해 주자. 스케치에 보면 내가 익스포트하고 싶은 요소를 클릭해서 우측 하단에 보면 어떤 사이즈로 익스포트할지 선택할 수 있는 기능이 있다. 아이폰 개발할때는 보통 기본 스크린 사이즈에서 2배 파일, 3배파일을 같이 줘야한다. 파일명에 @2x가 2배파일, @3x가 3배파일을 의미하고 스케치에서 알아서 파일명까지 형성에서 익스포트 해 준다.2x가 2배파일, 3x가 3배파일이고 서픽스도 알아서 스케치가 생성해 준다.이때 주의할 것은 파일명인데, 개발자들은 보통 나름의 파일명 규칙이 있다. 이건 꼭 개발자에게 물어보고 컨벤션에 맞춰서 파일명을 정하도록 하자. 찾기 쉽게 작성하는게 중요하기 때문에 보통은 이런식으로 작성한다.[종류]_[섹션명]_[이름]예를들면 탭바에 있는 채팅 아이콘을 2배파일로 추출한다고 하면 파일명은 '[email protected]'가 되는 것이다.여기까지의 사이클을 한 2-3번정도 경험해 보면 이제 어느정도 우리 문돌이가 디자이너 대타 역할을 수행하기에는 어느정도 가능해 질 것이다. 이 외에도 사실 앱 스크린샷, 앱스토어 아이콘 등등 개발자에게 전달해야 할 파일들이 많은데, 이것 역시 위의 레퍼런스 사이트들을 잘 찾아보면 수 많은 무료 양식이 있어서 쉽게 벤치마킹(이라고 쓰고 베낀다라고 읽는다) 할 수 있다.다시한번 강조하지만 이 방법론은 어디까지나 '디자이너가 아직 없어서 문돌이가 디자이너 역할 대신하는 법' 이지 '문돌이가 디자이너 되는 법'이 절대로 아니다. 디자인의 세계는 정말 깊고 심오해서 초보 디자이너 되는게 초보 개발자 되는법 보다 더 어려울 수도 있다. 특히 요즘 많은 사람들이 남발해 대는 UX라는 단어도 심리학에 기반을 둔 매우 심오한 영역인데 사람들은 그냥 'UX = 보기좋은 디자인' 요렇게 생각해 버리는 경향이 있다. 뭐 UX까지 안가더라도 그래픽디자인의 세계 역시 구도, 배치, 컬러 등등 공부해야 할 것이 매우 많은 세계이니 괜히 넘보지 말고 우리는 그냥 기획자 본연의 업무에 충실하도록 하자.다음 글에서는 역시 같은 맥락으로 문돌이 PM이 초기 스타트업에서 마케터의 역할을 대신하기 위한 야매스러운 방법론에 대해 논의해 보고자 한다.글쓴이는 스팀헌트 (Steemhunt) 라는 스팀 블록체인 기반 제품 큐레이션 플랫폼의 Co-founder 및 디자이너 입니다. 비즈니스를 전공하고 대기업에서 기획자로 일하다가 스타트업을 창업하고 본업을 디자이너로 전향하게 되는 과정에서 경험한 다양한 고군분투기를 연재하고 있습니다.현재 운영중인 스팀헌트 (Steemhunt)는 전 세계 2,500개가 넘는 블록체인 기반 앱들 중에서 Top 10에 들어갈 정도로 전 세계 150개국 이상의 많은 유저들을 보유한 글로벌 디앱 (DApp - Decentralised Application) 입니다 (출처 - https://www.stateofthedapps.com/rankings).스팀헌트 웹사이트 바로가기