스토리 홈

인터뷰

피드

뉴스

조회수 955

나는 소셜벤처의 디자이너입니다

임팩트 커리어 Y 를 통해소셜벤처의 디자이너로 커리어를 시작한슬로워크 김해리 님임팩트 커리어 Y 2기로 slowalk(이하 슬로워크)에 입사한 김해리 님. 인턴기간을 마치고 정규직으로 전환되어 CX(고객경험)팀 내 디자이너로서 커리어를 이어가게 되었다. 디자인을 통해 조직과 사회변화에 기여하는 슬로워크 임의균 대표와 김해리 님을 함께 만나 보았다. *슬로워크 임의균 대표와 김해리 님. 인턴 기간 동안 CEO 직속 팀에 소속되어 한 팀으로 일했다.해리님은 입사 전 슬로워크를 알고 있었나요?해리 : 회사 이름을 알게 된 것은 임팩트 커리어에 지원하면서 부터에요. 그런데 예전부터 제가 슬로워크 작품을 많이 접해왔더라고요. 예를 들어 저희 집에서 가장 가까운 성북도서관 성북문화재단 로고가 마음에 든다고 생각했는데 알고보니 슬로워크에서 작업한 디자인이었어요.슬로워크가 임팩트 커리어 2기에서 유일한 디자인 포지션으로 참여하셨죠. 임팩트 커리어를 통해 디자이너를 채용하신 이유가 있나요?다른 직무의 동기와 관계 속에서 디자이너로서 배우는 것이 있을거라고 기대했어요.슬로워크 임의균 대표(이하 의균) : 예전에는 디자인이 결과물로 보여지는 것에만 그쳤다면 지금은 더 유연하고 그 경계가 없어졌다고 생각해요. 실제로 슬로워크 경영지원팀도 3년 전에 경영디자인팀으로 이름을 바꾸기도 했고요. 모든 영역에서 디자인과 디자인씽킹이 필요한 시대이고, 과정과 커뮤니케이션을 설계하는 것이 바로 디자인이라고 볼 수 있죠. 여러 직군과 협업할 수 있는 디자이너가 실제로 크리에이티브 작업도 훨씬 잘하시더라고요. 그래서 임팩트 커리어 Y의 부트캠프 과정을 거치면 좋은 커리큘럼 뿐만 아니라, 그 안에 다른 회사 신입/인턴 동기와의 관계 속에서 배우는 것이 있을거라 기대했어요. 소셜섹터에서 가장 필요한 직군 중 하나가 디자이너가 아닐까 싶은데요. 임팩트 커리어가 디자이너 분들이 소셜섹터 커리어에 도전하실 때 징검다리 역할을 해줄거라 생각합니다.*부트캠프 팀프로젝트의 마지막 발표중인 해리님. 디자이너가 만든 발표자료는 디테일이 달랐다.그렇다면 해리님 입장에서도 부트캠프가 진짜 도움이 되었나요?해리 : 네. 저는 부트캠프 과정 전부 다 도움이 된다고 생각해요. 특히 임팩트 체인을 설계해보는 시간이 기억에 남아요. 세션 때 슬로워크의 임팩트 체인을 그려보았는데 스스로 이해가 안되고 궁금한 점이 있었거든요. 회사에 입사하고 나서 대표님께 제가 설계한 내용을 보여드리고 이야기를 나누며 회사에 대해 더 알아갔어요. 부트캠프가 있었기에 슬로워크에 대해 더 잘 이해할 수 있었다고 생각해요. 또 동기끼리 입사 후에도 스터디를 만들어서 만나기도 하고, 각자의 회사생활을 공유하는 자리를 갖기도 했어요. 슬로워크 인턴으로서 저 한 명이 입사한 건데, 가치를 추구하며 일하는 임팩트 커리어 동기들이 가까이에 있어서 굉장히 힘이 됐어요.의균 : 저도 처음에는 슬로워크에 한 분의 인턴이 오시는데 잘 적응할 수 있을까 걱정했지만 임팩트 커리어를 통해 동기 커뮤니티 안에서 왔기 때문에 마음이 놓이더라고요. 해리님은 알아서 자생하는 인턴이었어요. (웃음)(자생하는 인턴) 해리님을 정규직 디자이너로 전환하신 이유는 무엇인가요?의균 : 회사를 14년 정도 운영하며 느낀 것은 디자이너의 탁월함도 중요하지만 태도가 훨씬 더 중요하다는 점이에요. 해리 님은 솔직함과 적극성 그리고 추구하는 가치가 저희 회사와 잘 맞다고 생각했어요. 디자인도 워낙 잘하시기 때문에 인턴 기간이 끝날 때쯤 디자인 팀에서 채용 티오가 나길 바랐어요. 마침 회사 내 조직 개편 시즌에 CX팀에서 채용을 원했고, 제가 해리 님을 추천했어요. 임팩트 커리어 과정에서 다양한 직군과 관계도 쌓고 습득한 게 있으니 분명 잘 해내실거라고 생각했거든요. 또 해리님이 가지고 있는 디자인 외 장점들과도 잘 맞을 것 같았고요.*임팩트 커리어 Y 2기의 부트캠프 중 라이프 셰어 MT에서 해리 님의 모습해리님 정규직 전환을 축하드려요! 3기에 오실 디자이너 분들에게 해주고 싶은 이야기가 있나요?부트캠프는 다양한 직군의 입사자들과 교류할 수 있는 장이에요.첫 째로 회사 근처 다양한 맛집을 섭렵하라는 거에요. 입사하고 나서 직원 분들과 밥을 먹으러 갈 때 여기저기 안내해드리면 굉장한 칭찬을 들을 수 있어요.(웃음) 두 번째는 다양한 직군의 입사자들과 교류하라는 거에요. 최대한 자신과 다른 직군의 사람들과 업무에 대해 이야기를 많이 나눴으면 좋겠어요! 그게 디자이너로서 임팩트 커리어를 가장 잘 활용하는 팁이라고 생각해요. #루트임팩트 #헤이그라운드 #임팩트커리어 #소셜벤처 #슬로워크 #디자이너공동채용 #인턴에서 #정규직으로 #회사찾는법
조회수 5055

스케치로 협업하기- Master파일을 활용해 통일된 디자인 컴포넌트 공유하기

디자인 파일 버전 관리는 모든 디자인팀의 영원한 숙제입니다.StyleShare에서는 프로덕트 디자인 툴로 스케치를 사용합니다. 4명의 디자이너가 인당 한 프로젝트를 맡는 프로세스입니다. StyleShare라는 하나의 서비스 앱/웹의 유지보수와 새로운 기능을 빠르게 디자인하고 가이드화 합니다.여러 디자이너가 한 서비스를 작업하다 보면 디자인 파일과 심볼이 뒤죽박죽이 되기 마련입니다.그렇다고 손 놓고 열심히 작업만 하자니 스멀스멀 문제가 생깁니다. 누군가 질문을 통해서 수면 위로 떠오르죠.“최근에 사용했던 가장 작은 버튼 크기랑 Border 굵기가 얼마였죠?”이 질문은 여러 문제를 포함합니다.분명히 공통 컴포넌트가 있는데, 어떤 게 진짜인지 모르겠다.난 보통 2pt border가 진짠 줄 알았는데 여기선 왜 1pt를 사용했을까.개인이 모두 다른 페이지를 디자인하고, 1pt 단위까지 신경 쓸 여유를 없다 보면 디테일을 놓치는 경우를 종종 목격하게 되었습니다.결국 하지 않아도 될 커뮤니케이션을 하게 되고 작업하기 전 챙겨야 할 요소가 많아지면서 컴포넌트 정리 좀 하자! 는 니즈가 강력해지게 되었습니다.맞춤법 검사기처럼 내 작업물이 최근 디자인 컴포넌트 가이드에 위배되지 않았는지 검사해주는 봇이 등장하지 않는 이상, 처음과 중간과정마다 통일성을 위해선 개인이 챙겨야 합니다.UI Kit? Master File!회사에서 UI Kit를 만드는 건 디자인 리뉴얼이 아닌 이상 굉장한 비용이 듭니다. 그래서 StyleShare에서도 Kit를 대신할 무언가를 고민했습니다. 컴포넌트 정리하자고 Kit를 만들 순 없으니까요.그래서 현재 모바일 앱의 UI, GUI 컴포넌트를 정리하고, 가장 최신 버전으로 추린 파일을 만들었습니다.스케치에 얼마 전부터 심볼 라이브러리[1] 라는 기능이 추가되었습니다. 이 기능을 잘 사용하면 누구나, 어떤 파일이나 같은 심볼을 사용할 수 있습니다. 공유하고자 하는 심볼만 클라우드 드라이브로 잘 공유된다면요. (StyleShare에서는 구글 드라이브를 사용합니다)심볼과 같은 가장 작은 단위를 공유하는 것도 중요하지만결국 이 컴포넌트가 어디서 어떻게 활용되는가페이지 단위로 가장 최근 개선된 UI 디자인은 무엇인가위와 같은 실제 커뮤니케이션의 방해를 이루는 문제는 해결하지 못했습니다.그래서 StyleShare 디자인팀에서는 Master.sketch라는 이름의 한 파일을 운영합니니다. iOS, Android 모두요.거창한 이름처럼 이 파일에는 최근 작업된 UI 디자인과 컴포넌트가 모두 모여있는 스케치 파일입니다.우선 프로덕트를 큰 단위로 그룹을 나누었고 그 안에 속해 있는 모든 페이지 디자인을 아트보드로 나열했습니다.Search 기능 안에 포함된 다양한 페이지들(Artboard)그 안에는 실제 작업했던 Loading이나 Empty 화면까지 포함되어 있습니다.실제 페이지와 아트보드입니다.아이콘/컬러 팔레트 관리는 따로UI 컴포넌트 못지않게 중요한 요소는 아이콘과 색상 팔레트입니다.StyleShare은 아이콘이 많지 않습니다. 유저 콘텐츠가 화려하고 이미지 컴포넌트가 많다 보니 그림으로 UI를 나타내려는 페이지가 적습니다. 그래서 아이콘은 Master 파일 내에서 운영해도 충분했습니다.Icons/44*44부터 Icons/12*12 까지 6과 8배 수로 아이콘을 맞춰서 심볼로 만들었습니다.Styleshare IconsArrow와 Caret은 각 두 벌씩만 만들어 상하/좌우 반전으로 활용합니다.컬러는 Color.sketch라는 파일로 따로 운영합니다. 이 방법이 Nested Symbol[2]로 활용하기도 편하고 색상을 독립적으로 관리할 수 있습니다.색상처럼 잘 변하지 않는 요소는 여러 사람이 스쳐가는 Master 파일과 분리를 해 놓는 편이 실수로 수정될 여지가 적습니다.Styleshare Colors.sketch그래서 뭐가 좋아요?서비스의 모든 페이지를 한 번에 볼 수 있습니다.스케치만 가능한 방법입니다. 포토샵에선 상상도 못할 용량 수준으로 모든 페이지를 모아도 120MB 로 가볍습니다.서비스가 복잡해지면 작업자도 어떤 페이지가 있었는지 기억할 수 없는 지경에 이르게 되는데, 파악하기 쉽습니다.2. UI 컴포넌트의 사용처와 심볼을 동시에 확인할 수 있습니다.UI Kit는 깔끔한 맛은 있지만 활용도가 떨어집니다. 구글의 간지 나는 Material 디자인도 각 서비스에 맞게 활용해 다르게 사용됩니다. 독립적인 심볼과 기능에 맞게 활용한 실제 UI를 함께 보면서 쉽게 디자인에 응용할 수 있습니다.결국 모든 페이지는 심볼로만 각자 다르게 작업할 때보다 서로의 컴포넌트를 가져다 쓰며 통일성을 갖게 됩니다.3. Master 파일에서 서비스의 최신/최종 디자인을 확인할 수 있습니다.“우리 최근에 정했던 버튼 크기랑 Border 굵기가 얼마였죠?”의 저희 답변은 “Master 파일 열어보세요!”입니다.마치며작년부터 디자이너를 위한 버전 관리 툴이 다양해지고 있습니다. 그중에 Abstract[3]이 가장 좋은 평을 받고 있죠. 하지만 모든 좋은 툴을 현업에서 다 도입할 수는 없습니다. 조직 상황과 업무 프로세스에 적합한 지, 학습은 간단한 지, 비용은 얼마나 드는지.. 등등 고려해야 할 요소가 많습니다. 학습 비용 이상으로 효율을 내야 회사에서 좋은 툴이라 할 수 있으니까요.StyleShare에서는 스케치의 심볼 라이브러리, Master 파일↔구글 드라이브만으로 아직은 큰 문제없이 동기화를 하고 있습니다. 동기화는 끊임없이 노력하지 않으면 금방 티가 나는 작업이라 계속해서 고민을 해 보아야 할 것 같습니다.읽어주셔서 감사합니다.p.s. 스타일쉐어의 스케치 도입기+기반닦기는 이 글에서 보실 수 있습니다.[1] 스케치 47 버전부터 추가된 기능. (https://www.sketchapp.com/docs/libraries/)[2] 스케치 41 버전부터 추가된 기능. (https://www.sketchapp.com/docs/symbols/nested-symbols/)[3] 디자이너를 위한 버전 관리 툴 (https://www.goabstract.com/)#스타일쉐어 #개발팀 #개발자 #디자인팀 #디자이너 #협업 #스케치 #Sketch  #경험공유 #인사이트
조회수 975

내가 디자인 감각이 좀 있어서 말인데..

아니요. 감각 없으세요.....라고 얘기하고 끝낼 뻔.. 했지만, 조금 더 이야기를 해보도록 하겠습니다. 종종 직장상사든 클라이언트든 디자이너의 디자인에 저런 식으로 깜박이 켜고 들어오시는 분들이 있습니다. 피드백과 크리틱은 환영입니다. 목적을 위한 건전한 조언은 언제나 감사합니다. 하지만 본인의 디자인감각 자랑은 해당사항에 없다고 생각됩니다.짤막하게 몇 가지 얘기를 좀 해보도록 하겠습니다.1. 일단 디자인은 감각으로 만드는 게 아닙니다. 보통 집안에 누가 디자인을 했다거나여자친구가 디자이너라거나보고 배운 게 많다거나내 DNA에 숨겨진 진화론적 디자인염기체를 믿는 분들이 이런 말들을 하시던데...물론 감각이 있으시겠죠. 하지만 디자인은 감각으로 하는 게 아닙니다. 그럼 뭘로해요? 디자인은 논리로 하는거죠. 특히 일에 있어서의 디자인은 더더욱입니다. 맥락과 논리로 움직이는 겁니다. 갑자기 자주색이 잘어울릴 것 같은데?...싶어서 자주색을 본능적으로 집어넣거나 하지 않아요.2. 그 감각에는 근거가 없어요.왠지 그냥 그럴 것 같아서. 느낌적으로 딱 맞는..그런거. 뭔가 눈에 잘 들어오는 듯한 느낌..모든게 느낌과 그냥으로 설명되는 디자인감각은 딱 잘라서 무쓸모입니다. 이유를 설명할 수 없는 디자인은 인수인계를 할 수도 없고 결과평가도 할 수 없어요. 그건 그냥 우연의 산물이자, 당신이 없으면 나올 수 없는 한시적인 이벤트일 뿐입니다. 3. 그리고 진짜로 감각이 있어도 그렇게 얘기하면 안됩니다.내가 디자인감각이 좀 있어서 아는데....란 말은 굉장히 자기방어적인 얘기예요. 굳이 이렇게 방어치고 들어올 필요없습니다. 그냥 내 의견은 이래..라고 담백하게 얘기하면 되지, 뭘 굳이 감각까지 얘기하나요. 디자인 감각이란 것은 예쁜 색깔 고르고 오브젝트 위치잡는 능력이 아닙니다. 상대방의 디자인을 이해할 수 있는 능력이자, 디자인의 목적을 잃지 않고 기획단부터 매끄럽게 제작, 완료까지 이끌어나갈 수 있는 능력을 의미해요.그런 말은 쓰지 않도록 합시다.
조회수 1239

브랜딩은 정말 매출을 높여주는 걸까?

많은 클라이언트들의 고민 중 하나입니다. 브랜딩에 수백~수천을 쏟아붓고는 싶은데(실제로 쏟아붓기도 하고) 그게 매출로 이어질지에 대한 확신이 없어서 의뢰를 망설이는 경우.대부분 브랜딩을 언급하는 글에서는 매번 배달의민족, 산돌, 질레트, 애플, 현대카드, 화웨이, 알리바바 등 대단히 대단한 곳들의 사례를 언급하면서 이런저런 주장을 하는데... 이번 글은 그런 대단한 기업 얘기가 아니라 실제로 제가 했던 조그맣고 평범한 기업들의 얘기를 해보려고 합니다.브랜딩에 돈을 쏟았다.를 얘길하려면 먼저 정의내려야 하는 것이 있습니다. 브랜딩은 뭔가. 난 뭐에 돈을 쓴걸까. 정말 그게 브랜딩이긴 했을까? 브랜딩과 마케팅을 구분한다는 건 겁나 민감한 일이더라구요. 서로 부심이 쩔어서인지 조금만 영역을 넘어와도 '그건 마케팅이지!!' , '그건 브랜딩이지!' 하면서 갑론을박 오져버리니까요.브랜딩은 확실히 의식/심리적인 단계의 이야기에 가깝습니다.마케팅은 좀 더 행동, 공식, 루트, 설계단의 이야기에 가깝죠.일단 인식을 하고, 행동이 이루어지는 법이니까요. 혹시 여기서부터 빼액!!! 하실 수도 있는데 끝까지 들어보세요. 브랜딩과 마케팅은 인과관계처럼 미묘하게 비슷하면서 분리되어 있습니다. 하지만 우린 오늘 매출얘기를 해야하니 조금 재미없고 딱딱하게 가볼께요.1. 브랜딩과 마케팅은 뭘까.- 브랜딩매출은 돈에 관련한 얘깁니다. 숫자죠. 숫자니까 법칙이란 게 존재합니다. 매출은 A를 주고 B를 얻는 거예요. 그러니 교환관계에 있습니다. 플러스가 될지 마이너스가 될 진 사실 몰라요. 이걸 표현하는 가장 좋은 수단은 함수죠. 중딩때 배웠던 1차함수를 볼께요. y=nx이건 브랜딩입니다. x는 브랜드고 y는 인식입니다. 매출일수도 있겠네요. 원래 내가 x를 줬으면 고객도 동일하게 인식해야 하니까 y=x관계가 제일 이상적일 거예요. 하지만 브랜딩은 고객의 마음 속 필터를 거치죠.  n입니다. 어떤게 곱해질지는 모르죠. 그게 마이너스일수도 있고, 플러스일수도 있어요.  브랜딩전략의 역할은 n값이 1에 수렴하도록 조정하는 일입니다.- 마케팅마케팅도 함수관계에 있습니다. 매우 비슷하죠. 하지만 마케팅의 경우는 n의 값을 높이고 그걸 유지하는 데에 집중해요. 다음을 볼께요.y=x(n+1)-4(n+1)-4 부분은 x가 어떤 공식내에서 어떻게 움직이고 변환되는 지를 규정합니다. n값에서 1을 뺀 후그 값을 x에 곱하고거기서 4를 빼자.라는 일련의 프로세스를 의미합니다. 구매버튼을 누르는데 불필요한 배너를 없애고링크로 바로 연결할 수 있게 만든 후결제를 네이버페이와 카카오페이로 연동해서 쉽게하자.이런 식으로 행동과 법칙을 규정하니까요. 그래서 마케팅은 n값을 극대화시키는 데에 초점을 맞춥니다. 흔히 ROI라고 부르는 것이죠. 마케팅은 단순히 알리는 영역이 아니라, 그 이후의 단계에 대한 설정도 포함합니다. 알려서 찾아오고 싶은 고객들을 편하고 빠르게 접근할 수 있게 합니다. 구매 이후의 CS체계도 잡습니다. 고객관리와 구매고객 대상 이벤트 등등을 통해 리텐션을 유도하기도 합니다. 그리고 그 일련의 과정은 순환관계에 있습니다. 고객들을 빤짝 모았다가 담에만나요~해버리는 식의 이벤트가 아니죠.2. 브랜딩은 수익창출을 위한 걸까?네 맞아요. 모든 기업의 움직임은 수익창출을 위한 겁니다. 숨쉬는 것도, 봉사활동도, 직원들 밥주는 것도 모두 수익창출을 위한 일련의 행동들입니다. 직원복지가 쩔어버려서 다들 침대에서 일을 한다고 해도 결국은 그걸 통해 돈 많이 벌어와!!! 하는 게 궁극적인 목적이니까요. 김봉진대표님이 '배민다움'에서 언급하신 내용이 있었어요. 기업이 있고 브랜드가 있는게 아니라 브랜드를 위해 기업이 만들어진 것이라고. 오.... 정말 크게 동의합니다. 누군가가 의지가 있었고 그래서 사람을 모았고 일로 만들어보자!! 해서 생겨난 것이 기업입니다. 그래서 서로가 뜻을 모아 그 결과를 +값으로 만들기 위해 고군분투하는 거죠. 그러니 사실 브랜딩철학이 먼저있고 기업이 나중에 있는 게 맞습니다.단, 그건 철학에 대한 얘깁니다. 구체적인 브랜딩전략과 행동은 일을 하면서 꾸준히 발생하고 이어나가야 할 '업무'의 영역입니다. 이건 기업이 지구상에서 사라질 때까지 계속 되어야 하죠. 그리고 그 업무는 '수익창출'을 목적으로 하는 것이 맞습니다. 당장 단기적인 매출이 아니더라도 멀리보고 밑밥을 던지고 복선을 까는거죠.그런데 말입니다......3. 수익창출을 측정할 수 있는가?● 측정자체가 어렵다.레알로 중요한 부분입니다. 사실 이것에 대해선 하이젠베르크의 불확정성 원리를 먼저 언급할께요. 으 과학 싫어...하고 소름이 돋는 분은 건너뛰세요.불확정성원리는 양자의 위치와 운동량은 동시에 측정 불가능하다는 이론이예요. 무언가를 관측하기 위해선 빛이 필요해요. 빛은 광자라는 물질과 파동의 성질을 동시에 띠고있죠. 그래서 에너지란게 있어요. 요즘 같은 날 햇빛을 쬐면 온몸이 타버릴 것 같은 이유도 강려크한 에너지가 피부를 때리기 때문이니까요. 관측을 하기 위해 들여다보는 순간 광자가 주변의 전자에게 에너지를 부여하게 되요. 힘을 얻은 전자는 기분이 좋아 이리저리 뛰어다니죠. 이 정신사나운 전자가 광자를 어지럽게 만들고 다시 반사된 광자는 우리에게 엉뚱한 값을 선사합니다. 때문에 관측자체가 관측을 불가능하게 만드는 모순에 빠져드는 거죠.브랜딩도 비슷합니다.브랜드가 제대로 되었는지와 그게 어떤식으로 행동으로 발현되는 지에 대해 관측값을 찾기가 상당히 모호한 부분이 있어요. 제가 요근래 삼분의일 매트리스를 사려다가 잠시 포기했거든요. 그래서 이 사례를 좀 들어볼께요.1. 삼분의일 매트리스를 알고있다고 해서 당장 꼭 사는 건 아니다.2. 긍정적이미지만 있을 뿐 이름을 기억못할 때도 있다.3. 누군가에게 전달해서 다른 사람이 구매하는 경우도 있다.4. 구매의 시점이 언제가 될 진 장담할 수 없다.5. 구매이외에 다른 프로그램(워크샵, 강의, 이벤트)등에는 참여한다.6. 또는 별다른 브랜딩과 관계없이 그냥 디자인 때문에 사는 경우도 있다.7. 사고나서 오히려 이미지가 안좋아지는 경우도 있다.등등... '알고있다' 라는 인식 다음에 벌어지는 행동의 경우의수가 너무도 다양합니다. 이걸 일일이 측정하려면 엄청난 공수가 들어갈 거예요. 불가능하진 않을겁니다. 고객들의 행동을 트래킹하고 심층면접을 하거나, 히스토리를 계속 체크할 수도 있고, 구매고객의 로그를 분석(불법입니다.)할 수도 있고.. 취조를 할 수도 있죠. 최면을 걸수도 있겠네요. 하지만 현실적으론 이렇게까지 하는 곳은 없어요. 분명 삼분의일 매트리스는 좋은 제품일거예요. 일반 매트리스에 비해 원가를 절감했고 품질은 유지했다는 것도 알겠어요. 택배로 배송되니 용달비를 안내도 돼요. 네 맞아요, 그곳은 저에게 구매욕구를 주었어요. 에너지를 주었죠. 삼분의일이 광자가 된거고 전 전자가 된거예요. 침대구매에 뽐뿌를 받은 저는 이런저런 다른 침대를 뒤적거리다가 엉뚱하게 무인양품 침대를 사버렸어요. 뭐지?......물론 다음번엔 삼분의일을 사볼거예요. 가격은 사실 똔똔이거든요. 제 브런치를 볼께요. 제가 브런치를 시작한건 1년 전이예요. 지금은 9,300명 정도되는 사람들이 모였고 250만뷰가 넘었어요. 책도 냈어요. 사실 돈이 딱히 들어가는 일은 아니었지만 시간이 엄청 들어갔죠. 매출로 이어졌느냐! 네 맞아요. 작년대비 매출은 10배 이상 뛰었어요. 하지만 그 사람들이 무엇을 어떻게 보고 왔는지는 제각각이예요. 제가 회사소개서에 대해 글을 썼다고 회사소개서 의뢰가 오지 않아요. 심지어 어떤 분은 '넵병' 이후에 그냥 꾸준히 읽기만 하다가 어느 순간에 갑자기 생각나서 연락주셨대요. 분명 밑밥은 있지만 인과로 연결시키기엔 비약이 있어요.● 측정한다고 해도 그 결과를 신뢰하기 어렵다.어떻게 어떻게 정량지표를 만들어서 측정을 해봤다고 쳐요. 이번 오프라인 행사에 150명이 모였고 그중 30명이상의 가입고객을 유치하고 싶어요. 그래서 유치를 했어요. 이건 브랜딩이 된건가요?....현장분위기에 휩쓸렸을 수도, 아니면 은근 압박감에, 또는 그냥 기분에, 아니면 선물을 받기위해... 다양한 요소가 작용했을 수도 있어요. 그리고 그 이후 그들이 가입상태를 유지하고 구매로 이어지는 가를 끊임없이 트래킹할 수 있나요? 이론적으론 그렇게 해야해요. 하지만 대부분은 안하죠. 그건 엄청나게 공수가 들어가는 일이예요.4. 그럼 브랜딩은 어떻게 수익을 창출해??수익창출이란 건 경제적으로 두가지 의미가 있어요.- 많이 팔아서 수익을 높이는 방법- 많이 아껴서 비용을 줄이는 방법인풋을 줄이거나, 아웃풋을 늘리거나. 브랜딩은 엄밀히 인풋을 줄이는 쪽에 가까워요. 그럼 이런 반문이 돌아올거예요. '아니 브랜딩하는데 계속 돈이 들어가잖아요. 근데 어떻게 비용을 줄여요!!?'맞아요. 이렇게 대답할게요. 그건 당신이 브랜딩을 구축하기 위해 이것저것 만들고 정리하는 과정에 필요한 투자예요. 건물도 지을 때는 돈이 들어가요. 다 지어지고 입주를 해야 월세가 나오는거지. 한번 브랜딩이 제대로 구축되면 그 이후부턴 오히려 잡다한 비용의 낭비를 줄일 수 있어요. 1. 우리 고객은 페북을 안해요..것도 모르고 끊임없이 쏟아붓는 페북광고비를 줄여요2. 맨날 만들때마다 새롭게 다시 만들어야 해서 시간과 비용이 들어갔던 제안서도 하나로 통일할 수 있어요.3. 컨셉이 확실하니 굿즈를 제작할 때도 기획시간이 줄어들어요.4. 엉뚱한 것에 시행착오로 버리는 돈을 줄일 수 있어요.5. 정확히 색깔이 드러나는 브랜드는 특정팬층을 확보해서 고정매출을 유도해요.6. 이것저것 난잡하게 만드느라 직원들이 피곤해지지 않아요.7. 한 사람에게 업무가 과중되서 그만두는 사원이 줄어들어요.네, 브랜딩은 이런걸 위한 거예요. 비효율적이고 난잡한 행동들을 줄이고, 집중된 전략을 만들 수 있어요. 생산성을 높이고 내부비용을 절감할 수 있어요. 제가 누누히 얘기했지만 브랜딩은 일을 벌리는 게 아니라, 현재 있는 일을 정리하고 쳐내는 것이 우선이예요. 기업입장에선 시간, 인력, 기회가 모두 비용이예요. 브랜딩은 쓸데없이 빠져나가는 사람들의 에너지와 아까운 시간, 놓쳐버린 기회등을 잡아주는 역할을 해요.그렇게 수익을 늘리는 데에 기여해요. 우리가 로고를 바꾼다고 갑자기 사람들이 우르르 달려오지 않아요. 이건 명백해요. 그리고 우리기업이 좋다는 걸 인지하고 있어도 갑자기 달려들어서 구매하지 않아요. 매출이 아닌, 비용절감을 통해 수익을 높이는 거예요.5. 실제로 브랜딩을 하고 있긴 한가요?이제 이론적인 얘긴 버리고 이런 얘길 해요. 저는 지금도 내일도 일하는 사람이니까 '일' 자체에 포커스 하는 걸 좋아해요. 그러니 전략과 이론을 좋아하시는 분은 여기서 끝내셔도 되요.실제로 매출과 브랜드에 대해 고민하고 계신 분들에게 다시 묻고싶어요. 브랜딩을 했어요! 근데 돈이 벌리지 않아요! 라고 외치기 전에 먼저 생각해볼 게 있어요.1. 그 브랜딩을 혹시 한 두사람이 영혼을 갈아서 만들진 않았나요?2. 일을 벌리기만 한 건 아닐까요? 마무리가 정확히 이루어진 것들이 있나요?3. 벌린 일들은 확실한 근거나 동의가 있었던 건가요?4. 직원들이 브랜딩작업 때문에 오히려 다들 힘들어하고 있진 않나요?5. 일회성 이벤트에만 집중하고 있는 건 아닐까요?6. 엉뚱한 곳에 과도한 돈과 시간을 쏟아붓고 있는건 아닌가요?등등등..... 사실 브랜딩을 했어요! 라긴 하지만... 이게 브랜딩인가?..아님 마케팅인가?... 에 대해선 직원도 대표님도 잘 몰라요. 이게 수익창출을 목적으로 하는건가? 아님 유지관리를 위한건가?... 뭐지? 다들 헷갈려요. 어디서 들은 것들이 많아서 why에 대한 철학과 차별점을 구축하긴 하는데..그래서 그 다음 일은 어떻게 해야하는 지 잘 모르겠어요.그래서 일단 급한 대로 회사소개서부터 의뢰를 해요.또 돈을 썼어요. 근데...그 다음은 몰라서 머리를 긁적이고 있는거예요.6. 정리브랜딩이 매출을 높였는가! 에 대해서 측정은 현실적으로 어려워요. 저 명제 자체에 대해선 긍정하지만, 우리는 불확실한 것을 측정해선 안되요. 돈을 다루는 기업이라면 더더욱 말이죠. 정리해볼께요. y=x(n+1) 에서 n의 값을 높이기 위해 일련의 알고리즘과 루트를 설계하는 일은 마케팅이예요. y=nx 에서 n을 1로 수렴시키는 행동. 널부러진 것들을 하나로 모으고 쓸데없는 걸 쳐내고, 색을 분명하게 만들기 위해 쏟아붓는 비용과 시간은 브랜딩이예요.브랜딩으로 '비용절감'이 되었는가를 측정하는 편이 훨씬 빨라요. 멍때리는 시간을 줄이고, 불필요한 채널을 쳐내고, 제안서양식을 통일하고, 직원들의 복지가 증대되고, 고객응대가 원활해졌는지를 봐야해요. 쓸데없이 3장씩 쓰던 회의록을 1장으로 줄이는 게 브랜딩의 시작이예요. 난상토론을 하느라 힘만 빠졌던 회의가 짧고 임팩트있게 줄어드는 지를 봐야해요. 잠재적으로는 구매고객이 될 수도 있고, 매출증대에 기여를 할 거예요. 하지만 많은 분들의 고민은 그런 '언제가 될 지 모르는' 전략에 고민할 여유가 없을 거예요. 대표님들이 지금 이 글을 보시는 이유가 뭐예요. 당장 뭐가 안나오니까 미치겠는 거잖아요. 장기적으로 봐라~ 기다려라~ 한순간에 되는게 아니다...라는 얘기는 누구나 할 수 있어요. 당장 세금계산서를 받는 입장에선 좀 더 수치적이고 현실적인 '지금의 행동'이 필요해요.  그리고 그러한 용단들이 모여 하나의 브랜드 컬러를 만들어요. 그러니,지출항목에 좀 더 집중했으면 좋겠어요. 적어도 이제 갓 브랜딩을 고민하는 기업이나, 한참 시행착오를 겪었던 곳이라면 말이예요. 짧은 생각으로 쓴 글이니, 다른 의견 및 제가 모르는 객관적인 측정방식 또는 레퍼런스가 있다면 댓글 등으로 공유해주세요 :) 감사드립니다!
조회수 4026

#금융, ‘더 나은 선택’을 위한 UI 디자인

우리는 대부분의 일상생활을 손바닥만 한 기계 안에서 해결하는 세상에 살고 있습니다. 여러 사람들과 연락을 주고받고, 어느 때보다 빠르게 뉴스를 접하죠. 필요한 것들을 온라인에서 구입하는 것 또한 익숙한 일입니다. 생필품, 배달 음식, 가구나 가전 같은 커다란 물건들은 물론이고, 항공권, 호텔, 심지어는 가사 서비스까지도 휴대전화 하나로 해결할 수 있습니다.그러나 금융은 어떤가요? 근래 겪은 일 중 가장 지루한 경험을 떠올려보자면, 은행에서 번호표를 들고 기다리던 것입니다. 급여 통장을 개설하기 위해 점심시간을 활용해 은행을 방문했고, 1시간가량의 기다림 끝에 제 차례가 되었지만, 재직 증빙이 없어 통장 개설은 커녕 아무것도 못 하고 나왔어야 했던 그 기억... (멍청)금융 상품을 일일이 찾아보는 것도 예사 일이 아닙니다. 대부분 은행 홈페이지는 IE(인터넷 익스플로러)에 최적화되어 있고, 첫 방문 시에는 최소 3개 이상의 Active X 설치를 강요받기 일쑤이고요. 상담을 받아볼까 싶어 은행에 찾아가면 번호표 뽑고 30분 넘는 시간을 기다려, 은행원이 권유하는 한정된 내용만 접하게 됩니다. 들이는 비용에 비해 얻는 정보는 매우 제한적이죠.쇼핑을 하듯, 편하게 금융 상품을 고를 수 없을까?모두가 더 나은 선택을 할 수 있으면 하는 바람으로, 핀다(Finda)는 만들어졌습니다. 예적금부터 대출까지, 1 금융권부터 P2P까지를 망라하는 상품을 한 곳에 모았고, 키워드 검색과 필터링을 통해 원하는 결과를 얻을 수 있습니다. 약간의 시간만 투자한다면 조금 더 정확한 맞춤추천을 받아볼 수도 있습니다. 금융 계산기를 이용해 재무 계획을 세울 수도 있고, 특판 상품의 정보도 빠르게 접할 수 있습니다.소비자로 하여금 보다 적은 비용으로 금융 정보를 얻을 수 있게 하는 것이 첫 번째 목표였다면, 그다음 목표는 선택을 돕는 것입니다. 수많은 상품들을 비교하기 쉽게 만들기 위해 여러 고민을 하고 있으며, 런칭 이후에도 벌써 세 번이나 모습이 바뀌었습니다.#1. 오픈 베타 (2016년 1월) 2016년 1월, 오픈 베타 당시 상품 리스트의 모습입니다. 은행 로고와 상품명이 차지하는 공간이 다소 크고, 두 금리가 각각 무엇을 뜻하는지 모호해 보입니다. 그보다도 중요했던 문제는 상품 간 비교가 불편한 구조였다는 것입니다. 예를 들어 '월 상환금액'을 비교하려면, 아래 그림과 같이 시선을 여러 번 옮겨야 합니다. 당시 UI 개선을 위해 직접 정리했던 자료들이런 문제점을 보완하기 위해, 4월 정식 런칭을 기점으로 저희는 리스트 UI 개편을 진행했습니다.#2. 정식 런칭 (2016년 4월) 하나의 정보를 비교해보기 위해서는 시선을 일자로만 움직이면 되게끔 테이블 형태를 차용하는 시도를 했었습니다. 또 하나의 큰 변화는 '리뷰와 별점'이라는 새로운 정보가 생긴 것인데요. 각 상품에 대한 유저들의 평가를 일부 노출시켜 궁금증을 유발하고, 상품 상세 정보를 더 보게 유도하는 것이 목적입니다.그러나 문제는 여전히 존재합니다. 너무 많은 내용을 보여주려 했던 탓에 내용이 한눈에 잘 들어오지 않았고, 그래서 뭘 기준으로 상품을 골라야 할지가 명확하지 않았습니다. 또한 컨텐츠가 아닌 리스트에는 카드형 UI가 큰 메리트가 없다는 것을 느끼게 되었습니다. 가뜩이나 요소가 많은 가운데 박스와 그림자, 라인 등은 거추장스럽게 느껴졌고요. 이런 문제의식들을 가지고 있던 찰나, '키워드 검색 기능의 추가'라는 새로운 과제가 주어졌고, 그 기회를 틈타(?) UI 개편이 또 한 차례 진행되었습니다.#3. UI 리뉴얼 (2016년 7월) 7월 경 새롭게 선보이게 된 지금의 리스트 UI입니다. 한 항목 담기는 정보의 가짓수를 확 줄이고, 가장 중요한 숫자 하나만을 배치한 것이 가장 큰 변화입니다. 이 과정에서는 구글 캠퍼스 서울에서 진행했던 포커스 그룹 인터뷰 프로그램, <Campus Dogfooders>의 도움이 매우 컸습니다. 대출을 해보았거나 필요로 하는 사람들을 대상으로 상품을 고르는 데 있어 가장 큰 영향을 주는 정보가 무엇이냐고 물었고, 답변으로 '금리'가 가장 큰 비중을 차지했습니다. 그러나 개개인의 신용등급에 따른 금리 차이는 매우 크기 때문에, 필터를 이용해 본인의 신용등급을 입력할 수 있게 하였고, 그에 따라 다른 값을 리스트에 표시해주고 있습니다.2016년 5월에 진행되었던, 캠퍼스 서울의 Dogfooder with Fluenty & Finda▲ 등급에 따라 큰 차이를 보이는 전월 평균 금리또한 상품의 특징을 간결하게 표현하는 '#태그'가 추가된 것도 특징입니다. 대출이 필요한 사람에게 한도를 바로 조회할 수 있다거나, 심사 기간이 짧다거나, 모바일로 바로 대출이 가능하다거나 하는 것들은 매우 매력적인 옵션입니다. 태그로 필터링을 한다면 내가 원하는 조건에 부합하는 상품을 쉽게 찾을 수 있을 것입니다.이런 식으로 핀다는 부족한 점을 조금씩 보완해 나가고 있습니다. 현재 7가지 상품군 중, 주력으로 하는 곳 위주로 차근차근 업데이트를 진행하고 있습니다. 신용대출, P2P 대출, 그리고 P2P 투자 순으로 새 UI로 갈아입히는 중입니다. 조금 더 빠르게, 조금 더 편리하게. 쇼핑몰에서 상품을 고르는 것처럼, 보다 자연스러운 사용자 경험을 줄 수 있게끔 꾸준한 개선을 해나갈 것입니다. 금융 소비자들의 '더 나은 선택'을 위해서요.더 쉽고 더 합리적인 금융, 핀다가 만들어 가겠습니다. 핀다의 UI 디자이너, 채림 드림UI Designer, Chaerim from Finda#핀다 #디자인 #UI디자인 #철학 #팀원소개 #업무환경
조회수 15792

운영중인 프로덕트에 새로운 Gray Scale 적용 대장정

스타일쉐어 디자인팀은 한번에 디자인을 업데이트하는 시간의 한계와 비용때문에, 오래된 디자인 컴포넌트를 하나씩 개선하는 방향으로 디자인 개선을 진행하고 있습니다.그 중 하나인 Gray Scale 개선에 대해 이야기하려 합니다.서비스가 출시된 6년 전, 디자인팀에서 정했던 그레이 스케일은 5가지입니다.6년전 gray scale 색상값과 이름#222, #666… 대부분 단순한 코드입니다. 약 6년 전, 서비스 출시 시에는 브라우저마다 색상 구현에 제약이 있었기 때문에 가장 단순하며 어느 브라우저에서나 구현이 잘 되는 코드를 사용했었습니다.왜 바꾸나요?UI디자인에서 그레이 스케일의 역할은 정보의 강약, 계층 구분 등이 있습니다[1]. 인테리어에 비유하자면 벽지라고 생각합니다. 밝은 색의 소품을 배치해도 벽지가 어둡다면 결국 전체적으로 분위기는 어둡게 연출됩니다.스타일쉐어도 마찬가지로 새로운 기능이 추가되고, 계속 업데이트를 하지만 여전히 오래된 분위기를 지울 수가 없었습니다.여러가지 원인들 중에서 먼저 어둑어둑한 벽지를 새로 도배하기로 했습니다.저희는 코드상 순수한 회색 톤을 사용 중이었습니다. 코드상으로는 순수하지만, 우리가 눈으로 보는 Black, Gray, White는 실제로 #000000, #FFFFFF가 아닙니다. 우리 눈에 친화적이지 않은 색상입니다. [2]콘텐츠의 밀도가 높고 기능이 복잡해지면서 전체 UI 디자인을 가볍게 하는 방향으로 동의를 했고, 그레이스케일도 함께 변경하기로 했습니다. 쿨 그레이로요.2014 Material Design color palettes by Google순수계열의 회색은 Cool tone의 회색과 비교해보면 Warm 톤에 더 가깝게 보입니다.Cool tone 은 무게가 가볍습니다. 연상되는 단어는 청량함, 산뜻함, 가벼움입니다. 반대로 Warm tone은 따스한 분위기를 연출하기 때문에 안락함, 추억, 가정적인 분위기를 연출하기에 좋습니다.어떻게 바꿔요?1. 현재 쓰이는 색상값 모으기가장 먼저 iOS와 Android 개발팀에게 현재 서비스에 사용되고 있는 모든 색상값과 해당 Class를 함께요청했습니다.왜…?이 색들은 다 무엇…? 여기서부터 이제 노가다가 시작되었습니다. 다른 색을 제외하더라도 Gray색도 어마어마하게 늘어나있는 걸 발견했습니다.원래 디자인팀에서 정했던 그레이 스케일은 5개였는데 왜 이렇게나 많아졌을까. 서비스가 발전하면서 기능이 추가되고 복잡해지면서 디자이너는 #222와 #666 사이 그 어딘가의 톤을 필요로 했을 겁니다.통일성이 중요하다고 하지만 다양한 컴포넌트를 추가하기에 5개 회색조는 적었을 것입니다.이걸 다시 OS별 컬러 팔레트로 만들었습니다.iOS Gray scale 팔레트로 정리2. 그레이 스케일 변경하기그래서 색상 변화와 함께 가짓수도 늘리기로 했습니다.우선 가장 변화가 시급했던 Bg gray. 모든 분위기를 잡아먹는 배경 색상입니다. 배경색만 조금 밝게 해주어도 전체적인 분위기가 변합니다.새 배경색 #F7F8F9와 기존 배경색#F3F3F3Color Shade를 만들었던 순서는 아래와 같습니다.#F7F8F9 를 BG gray로 설정 후 회색조 정하기굳건한 철학적, 브랜드 접근 의미까지는 없습니다… 코드도 예쁘고 너무 Blue로 치우치지 않은 톤이라 정했습니다.특히 밀집이 높은 부분을 쪼개기다양한 Color Shades, Color Variation 방법론과 툴을 사용해 8개의 Gray Scale을 만들었습니다.3. 이름 정하기여러 사이트를 참고했었는데, 저희에게는 Google Material Design[3] 이름이 가장 적절했습니다.2014 Material Design color palettes by Google예전엔 기능을 이름으로 사용했습니다. border-gray, bg-gray처럼요.결과론적이지만, 잘못된 색상 이름때문에 색상이 계속 늘어났다고 생각합니다. 연한 회색을 사용하고 싶은데, border-gray를 사용하려니 ‘어, 이건 border는 아닌데..?’ 라며 망설이게 됐겠죠.처음 gray1, gray2, gray3… 으로 변경하려 했다가 취소되었습니다.‘몇 번이 제일 진한 회색인가?’ 라는 질문에 각자 다른 대답을 했기 때문입니다. 친절하지 않은 거죠.Font weight의 100, 200, 300 순서로 점점 Heavy해진다는 기존의 익숙한 위계를 사용했습니다. 이름도 가장 직관적이어야 한다는 병적인 집착으로 정말 오랜 고민끝에 최종 이름이 지어졌습니다.대장정의 결과 두둥!300과 700이 없는데, 색상 간 차이가 큰 경우는 가상의 중간값이 있다는 전제를 했습니다. 지금은 8개 셰이드지만, 유동적으로 색상이 추가될 수 있다고 판단했습니다.4. 적용마지막으로, 처음 개발자에게 받은 코드를 새로운그레이들로 하나씩 매칭시키는 작업을 했습니다.각 OS별 제플린으로 공유이 작업을 위해 귀찮더라도 처음부터 컬러 팔레트로 만들고 좀 특이한 부분은 이름까지 함께 표기했었습니다. 한 눈에 비슷한 톤끼리 쉽게 묶을 수 있고, 특이한 이름의 컴포넌트는 기능을 찾아서 그에 적절한 색상으로 매칭시킬 수 있습니다.흩어진 색상값들을 정리하고, 또 컴포넌트 이름을 붙이는 건 개발자에게도 편한 일입니다. 코드상으로도 깔끔하고 이름으로만 구현하면 되니, 디자이너와의 의사소통에서도 편한 일입니다.후기보통 컬러 스케일은 프로덕트 디자인 가장 처음에 합니다. 7년이 된 서비스 중간에, 디자인 업데이트 없이 색상값만 바꾸는 건 순전히 노가다일 수도 있습니다.하지만 물리적으로, 시간과 인력의 한계, 타이밍때문에 디자인 업데이트를 할 수 없다면, 작은 부분부터 천천히 개선하는 방향도 있습니다. 그리고 UI/UX 디자인을 한번에 업데이트하는 일보다 어떻게 보면 부담도 적습니다.가장 좋은 점은, 역시 커뮤니케이션입니다. 실제론 티가 많이 나지 않는 작업지만 사내에서 디자이너간, 디자이너와 개발자간 의사소통시 명확한 언어가 생긴 것입니다.색상 하나하나 함께 정한 디자인팀, 같이 이름을 고민해준 개발자분들에게도 감사합니다!읽어주셔서 감사합니다.#스타일쉐어 #디자인팀 #디자이너 #그레이스케일 #커뮤니케이션 #개발자 #의사소통 #협업 #팀워크
조회수 1365

디자인이 서비스 승패를 좌우한다?

 오늘은 오랜만에 UI와 UX에 관한 이야기를 해 보겠습니다. 많은 분들이 생각하시길, "UI의 심미성은 서비스에서  엄청나게 중요하며, 이러한 심미성이 없다면 요즘 시대엔 절대 성공할 수 없어!"라고 생각하실 수 있습니다. 분명히 UI라는 요소는 이용자들을 "사용"으로 이끄는 하나의 중요한 요소이기 때문에 분명 틀린 말은 아니죠, 그러나 UI의 심미적인 요소가 없다고 그건 실패하는, 또는 좋지 않은 서비스일까요? 우리나라의 "중고나라"를 알고 계시죠? 오늘도 평화로운 이 중고나라는 중고물품을 거래할 수 있는 국내 최고의 개인 거래 사이트입니다. 저 역시 중고거래를 자주 하는 편인데요, 대학교 공부를 하던 미국에서는 거의 집에 있는 대부분의 물건들을 중고로 구매했고, 그때 이용했던 것이 학교 게시판, 그리고 지금부터 말씀드릴 "Craigslist"입니다.  Craigslist는 재화나 서비스의 판매를 위한 개인 광고, 직업, 주택 공급, 이력서, 토론 공간 등을 제공하는 안내 광고 웹사이트입니다. 1995년 크레이그 뉴마크가  Bay Area, San Francisco에서 시작한 이 서비스는 2000년 다른 미국 도시들로 확장을 시작, 현재는 50개여 개의 나라에서 운영 중이라고 합니다.(참고: http://bit.ly/21ssAw5) 서비스 이용자들은 남녀노소를 가리지 않고, 주로 사용했던 또는 사용하던 가구 등을 사고팔기도 하고, 개인과 개인 간 중고차를 거래하고, 구인구직에서 외주 의뢰까지 할 수 있는 등 미국의 "중고나라"를 넘어 거의 모든 "재화나 서비스에 대한 거래"를 중개하는 플랫폼입니다.  이 부분에서 많은 분들이 "왜 UI, UX 이야기하다 뜬금포여?"라고 생각하실 수 있을 텐데, 바로 제가 이야기하고 싶은 것이 이 Craigslist의 웹사이트의 레이아웃입니다.-아직도 이런 사이트가 있다는것이 믿어지십니까?! 심지어 아직도 엄청나게 많은 거래가 이루어 지고 있습니다.(출처: https://seoul.craigslist.co.kr/)(출처: https://sandiego.craigslist.org/search/sss 딱 보시기에도 1995년 이후 메뉴에 대한 심미적인 어떤 변화도 하고 있지 않다는 것은 굳이 말씀드리지 않아도 알 수 있겠죠? 이렇게 심미적인 부분에서의 변화 없이도 Craigslist는 미국인들이 전 세계적으로 아직도 즐겨 사용하고 있는 서비스입니다. Craiglist는 어떤 사람들에게는 잉여로 , 어떤 사람에게는 정말로 필요한 재화나 서비스를 매개로 이용자들을 쉽게 이어 주는 플랫폼을 만들었고, 이를 위해, 심미적 아름다움보단, "이용자들이 어떤 문제를 가지고 있고, 어떤 것들을 필요로 하는지"에 대한 고려를 모토로 사업을 이어온 결과, 올해로 22년 차인 이 서비스는 아직도 같은 레이아웃으로 서비스를 이어가고 있습니다. 결국 말씀드리고 싶은 건, "서비스의 이용을 결정짓는 가장 코어(Core)한 요소는 디자인적으로 이쁜 것보다는 사용자들이 필요한 것을 쉽고 빠르게 제공해 주는 것"이라는 겁니다. (사실 이 "디자인, Design"이라는 것이 "시각화", 또는 "심미적 만족을 늘리는 프로세스"가 전부가 아니기 때문에 이렇게 말하는 것도 뭐하지만... 이 부분은 다음에 글로 찾아뵐게요!!) 우리가 기획하고 제작하는 서비스도 마찬가지예요. 물론 우리나라에서 제작을 하다 보면 디자인, 아니 "시각화"에 대한 후킹이 많은 요소를 차지하고 있는 건 사실이지만, 이러한 "후킹(Hooking)" 보다는 "우리가 서비스를 통해서 어떤 가치를 전달할 것인가, 또 서비스를 통해서 어떤 문제사항을 해결할 것인가"에 대한 생각을 더 해야 한다는 것이 저의 개인적인 생각입니다. 내가 만든(또는 만드려 하는) 서비스에 대하여 열심히 기획을 하다 보면, 가끔씩, 우리가 처음 생각했던 "문제 해결이나 가치 전달"에 대한 내용들은 잊고, 디테일한 것들을 보는 것 때문에 정말 중요한 것들을 놓치는 일이 생각보다 많아요.  우리 학생 시절 선생님들이 "학습목표"라는 것을 항상 화두로 시작하셨던 것 기억하시나요? 어떻게 보면 맹목적인 정보전달만이 목표라면 "학습목표"를 설명하고 설명하는 것보단 정보의 전달에 집중한다면 더 빨리 더 많은 정보를 전달할 수 있지만, 목표를 설정하는 것이 학생들의 이해와 가치 전달에 더 큰 역할을 하기 때문에 그렇게 교육을 진행한다고 합니다. 우리도 내가 또는 우리 회사가 만들 서비스에 대해1. 당연히 사람들이 잘 이해하고 필요한 서비스라고 생각하겠지2. 모호하더라도, 이쁘면 쓰겠지> 그러니 난 디자인으로 승부 보겠어!!라는 실패한 일반화의 오류를 범할 수 있습니다.  UI에 대한 많은 연구를 하는 것이 나쁘다는 이야기를 하는 것은 절대 아닙니다. 그러나, 진짜 가치 전달을 위한 서비스를 제작한다면, 내가 제작한 서비스에 대하여 사람들이 사용할 수 있는 "당위"를 찾고 그러한 당위를 실행하기 위하여 어떤 식으로 어떻게 접근하고 무엇을 해결해야 할 것인지를 아는 것이 좋은 기획의 방법이라고 생각합니다.오늘도 읽어주셔서 정말 감사합니다, 좋은 하루 보내세요!#코인원 #블록체인 #기술기업 #암호화폐 #스타트업인사이트
조회수 637

“진지충이라 이런 질문에 쉽게 대답 못하는데...”

이번 인터뷰 주자는 진지충의 의미를 재발견하게 만든 임철규 디자이너다. 지금까지 진지충은 매사 진지한 자세로 주변 사람들을 답답하게 만드는 부류라고 생각했는데, 임철규표 진지충은 비슷하면서도 다르다.  숨 쉬는 시간 내내 디자인만 생각하는 것 같은 진지한 사람이지만, 그런 덕분에 누구보다 자신의 작업에 열정적이며 높은 퀄리티를 만들어내 타인들의 부러움을 사는 사람이기도 하다. 동시에 엄청난 반전 매력의 소유자기도 하다. 진지하게 몰입하면 나오는 의외의 귀여운 모습 때문에 철큐티(철규+큐티의 줄임말)라는 별명을 가지고 있으며, 별명이자 사모임 이름인 철큐티엔 회원이 무려 4명이나 된다는 사실...! 왠지 다가가기 힘들 것 같은 ‘진지함’에 망설일 순 있지만, 용기 내 다가가 몇 마디만 나눠보면 그의 ‘진중함’이 꽤 매력적이라는 사실을 머지않아 알 수 있다.[사모임 ‘철큐티’ 회원들에게 전달받은 사진]먼저 철규님에 대해 소개해주세요!음....   바로 B.A.T에서 하는 업무 질문으로 넘어갈까요? (웃음)B.A.T에서 가장 오래 몸담고 있는 BX 디자이너로 주로 브랜드 디자인 작업을 하고 있습니다. 입사하자마자 B.A.T 아이덴티티부터 시작해 1년 넘게 KT&G 상상 스타트업 캠프 (이하 상스캠) 브랜드 디자인을 맡아 진행 중이며, 중간중간 다른 프로젝트들 서포트도 하고 있죠.방금도 대답했지만, 어떻게 보면 B.A.T의 원년 멤버인 셈이잖아요. 이곳을 오래 다닌 사람으로서 회사에 대한 이야기 좀 해주세요.단언컨대 B.A.T의 가장 큰 재산은 사람이라고 생각합니다. 사람들이 좋지 않다면 이 바쁘고 힘든 업무들을 절대 버틸 수 없거든요. 그리고 디자이너로서 무엇보다 각각 장점이 다른 디자이너들과 서로 좋은 영향을 주고받을 수 있다는 것이 좋습니다. 각자의 아이디어와 개성을 살려 서로 다른 시안을 뽑아내는 디자이너들과 함께 일하다 보니 스스로도 디자인의 시야와 사고가 넓어지는 것 같거든요. 그리고 에이전시 업의 특성상 눈코 뜰 새 없이 바쁜 비정기적인 일정이 굳이 꼽을 수 있는 단점인데, 이는 에이전시를 벗어나지 않는 이상 종사자들이 견뎌내야 할 숙명이지 않을까요?회사에서 얻는 것 중 만족도가 가장 높은 게 뭔지 궁금해요.점점 더 나아지고 있는 부분인데, 최대한 업무에 집중할 수 있도록 만들어주는 환경이요. 최근 들어 관리해주시는 다솜님이 복귀하시면서 과도하게 몰리는 업무 양도 조절되고, 디테일한 부분들까지 신경 써주셔 오롯이 디자인에만 집중할 수 있는 환경이 조성된 것 같습니다. 그리고 연봉도 동종업계보다 평균 이상을 먼저 제시해주셔서, 그에 대한 걱정이나 스트레스 없이 만족하며 다니고 있습니다. 곧 있을 두 번째 연봉협상도 기대 중입니다. (타이밍을 노린 것 같으니(?) 밑줄 쫙. 그때 초롱초롱 빛나던 그의 눈빛을 잊을 수가 없다...)아무리 만족도가 높다고 해도 사람인지라 고민은 있을 수밖에 없잖아요. 일을 하면서 혹은 회사를 다니면서 생기는 고민은 어떻게 푸는 편이에요?아무래도 일이란 건 클라이언트의 만족과 연결되는 부분이라 개인의 만족을 모두 충족시킬 순 없다고 생각합니다. 거기서 충족시키지 못했던 부분들은 사이드 프로젝트로 채우려 하죠. 대신 너무 과하지 않게 나름의 규칙도 정했습니다. 첫째, 다양한 분야에 관심 갖고 스크랩해두기. 둘째, 퀄리티에 타협하지 않기. 셋째, 이마저 스트레스로 느껴질 때가 오면 잠시 멈추기. 이렇게 하다 보니 스트레스도 많이 받지 않고 본업에 소홀해지지 않게 되더라고요.[(위) KT&G 상상 스타트업 캠프 브랜딩, (아래) 사이드 프로젝트 개념의 개인 작업]고민마저도 일처럼 느껴지지 않는 일(?)로 푼다는 말인 것 같은데요.. 대단해... 다른 관심사가 있다면요? 디자인 말고요!게임을 정말 좋아합니다. 아, 그러고 보니 게임 캐릭터들 색감이나 콘셉트를 아이데이션에 반영하는 경우도 꽤 있었네요. 게임을 스트레스 푸는 도구로 주로 사용하지만, 일에도 끌어올 수 있는 부분들이 많은 것 같아요.이것마저 일로 연결하다니! (웃음) 디자인에서 벗어난 철규님의 모습을 끌어내는 것이 목표였는데 포기할게요! 일하면서 가장 보람을 느꼈던 순간에 대해서 말해주세요.상스캠이 입사초 처음 사수 없이 혼자 클라이언트와 일하게 된 프로젝트라 커뮤니케이션 및 컴플레인의 대처 능력 등이 능숙하지 않아 꽤나 고생했었어요. 그럼에도 불구하고 대표님이 믿고 맡겨주었는데 아, 사실 저 말고 할 사람이 없기도 했고. (웃음) 더 잘하고 싶어 매번 행사가 끝날 때마다 개선점들을 모아 다음 행사 제안에 반영하며 발전하기 위해 노력했습니다. 클라이언트도 점점 저를 신뢰해주었고, 덕분에 시도해보고 싶었던 것들도 해볼 수 있었죠. 1년 동안 진행된 행사 모두가 목표치를 상회하는 모객 달성, 성공적인 마무리를 하게 되어 큰 보람을 느꼈습니다.보람에 대한 이야기를 하다 보니 문득 든 생각인데.. 뜬금없지만 지금 행복해요?진지충이라 이런 질문에 쉽게 대답하지 못하는 편인데요... 행복하다고 확답할 수는 없지만, 절대 불행하지는 않은 것 같아요. 내가 좋아하는 일을 업으로 삼고 있다는 것을 큰 행운으로 생각하고 있거든요.철규님에게 B.A.T란?앞으로도 계속 일하고 싶은 회사. 디자이너에 대한 중요성을 알고 배려해주려고 하는..(짧은 대답을 원했지만, 역시나 진지하고 길게 이야기를 한 관계로 이하 생략함에 양해를 구하며. 결론은 좋다는 말입니다!)
조회수 3142

HIG 비교 분석

HIG__HIG__는 __Human Interface Guidelines__의 약자로 비주얼 적인 디자인 규칙을 설명하고, 작업 동작에 대한 설명과 기능적인 설명을 통해 애플리케이션 __개발을 어떻게 하면 좋을지에 대한 방식을 추천한 개발 문서__입니다. 그 대표적인 예로 iOS HIG와 Android HIG 두 개가 있습니다. 이번 글에서는 두 가지의 HIG 대한 특징에 대해 알아봅시다.iOS HIGiOS HIG는 iOS의 애플리케이션을 개발하는 데 있어서 아주 중요한 문서입니다. 왜냐하면 이 문서가 앱 개발을 할 때 __기본적으로 지켜줘야 할 부분들을 설명__하고 있고, 그 내용이 지켜지지 않을 시 __App store에서 거절(reject) 될 수 있기 때문__입니다. 따라서 iOS HIG를 꼭 읽고 가이드라인에서 제시한 기준에 따라 개발을 하셔야 합니다.iOS HIG는 아래와 같은 내용을 담고 있습니다.플랫폼의 특성휴먼 인터페이스 원칙어플리케이션 디자인 전략iOS로 전환한 어플리케이션 사례사용자 경험 가이드라인iOS 기술 가이드라인iOS UI 요소 가이드라인아이콘과 이미지 가이드라인Android HIGAndroid HIG 또한 개발할 때 참고하면 좋습니다. iOS HIG처럼 기본적으로 지키지 않으면 거절(reject) 되거나 하지는 않지만, __Android가 제공해주는 다양한 기능을 설명__해주었습니다. 하지만 해당 문서는 플랫폼의 특성 등의 UI 요소들에 대한 내용이 부족하므로 __Android Design을 함께 참고 해서 보시면 개발하시는 데 도움__이 되실 것입니다.Android HIG와 Android Design는 아래와 같은 내용을 담고 있습니다.애플리케이션 개발 원칙어플리케이션의 비주얼 스타일 가이드 라인Android UI 패턴 가이드라인아이콘 디자인 가이드라인작업 디자인 가이드라인메뉴 디자인 가이드라인두 HIG의 애플리케이션 개발 가이드라인 비교iOS : iOS HIG안에 휴먼 인터페이스 원칙을 보면 사용자가 직접 선택해야 한다든지, 눈으로 보고 선택해야 된다든지 하는 내용이 있습니다. 그것을 보면 iOS는 사용자 중심 관점을 가진 개발 가이드라인이라는 것을 알 수 있고, 개발자에게 애플리케이션 개발 전략에 대한 내용도 가이드라인에서 제시하고 있습니다.Android : Android HIG안에 애플리케이션 개발 원칙을 보면 강력한 화면과 소리로 즐거움을 제공하거나, 다양한 기능에 대한 내용이 있습니다. 그것을 보면 Android는 심미성 중심 관점, 기능성 중심 관점을 가진 개발 가이드라인이라는 것을 알 수 있고, 개발자에게 애플리케이션 개발에 대해 iOS와 달리 개발 전략보다는 다양한 기능이 있으니 개발자의 자유에 맡겨 다양하게 개발하는 것을 가이드라인에서 제시하고 있습니다.두 플랫폼에 대한 UI 가이드라인 비교플랫폼에 따른 UI 크기 설정의 차이iOS : iOS는 디바이스들이 한정되어 있기 때문에 아이콘이나 레이아웃이 일정합니다. 따라서 iOS HIG에서 제시한 UI 크기를 지켜주셔야 합니다.Android : Android는 디바이스들이 해상도가 다 다르고 디스플레이들이 다양하다 보니 레이아웃 최적화를 해야 합니다. Android Design에서 이를 해결하는 방법으로 두 가지 방법을 제시하였습니다. 기본이 되는 중간 크기에서 일정 비율로 높이거나 줄이고 아니면 아예 큰 크기의 디스플레이로 시작하여 필요하다면 일정비율로 줄이는 방법을 권장하고 있습니다.터치 동작에 의한 플랫폼의 행동 비교iOS HIG는 터치 동작을 드래그나 대상을 선택하는 행동을 하는 것으로 정의하였습니다.Android Design에서는 터치 동작을 단순한 터치와 오래 누름을 통한 터치 두 가지로 나누어 정의하였습니다. 단순한 터치는 iOS HIG와 같으나 오래 누름을 통한 터치는 컨텍스트 메뉴나 컨텍스트 액션 바를 사용하는 데 이용됩니다.알림 기능에 대한 비교두 플랫폼 모두 짧은 단어들로 명시하기를 원합니다. 그러나 기술적인 문제나 어떤 설명이 필요한 상황이면 사용자에게 충분히 설명해야 합니다.iOS : iOS HIG에 경우 알림 버튼이 2개일 경우 항상 왼쪽 버튼이 어두운색이어야 하고 오른쪽은 밝은색이어야 한다고 정의합니다. 왜냐하면 가끔 사용자가 내용을 읽어보지 않고 버튼을 누르는 경우도 있기 때문에 오른쪽 버튼은 안전한 기본 작업을 수행하게 하여야 합니다. 위험성을 가진 액션을 제공할 경우 취소버튼을 오른쪽 버튼으로 하여 밝게 해야 합니다. 그렇지 않은 안전한 액션일 경우 취소 버튼을 왼쪽에 어둡게 배치해야 합니다.Android : Android Design에서는 알림 버튼의 배치나 색에 대하여 어떠한 가이드라인을 제시하지 않았습니다. 그러나 배치와 색에 관하여 다양한 디자인을 사용할 수 있도록 다양한 배치와 색에 대해 기술하였습니다.BAR 기능에 따른 비교1현재 뷰의 제목을 나타냅니다. 그리고 뷰의 이동을 나타낼 수 있는 버튼을 추가할 수 있으며, 뷰에 있는 내용을 관리할 수 있는 버튼을 추가할 수 있습니다.2뷰나 모드를 빠르게 전환을 할 때 주로 사용합니다. 모드 요소들에 대한 기능 버튼을 가지는 기능으로서 사용하면 안됩니다.3디스플레이를 전환할 때 주로 사용합니다. 위의 Bar와의 뷰나 모드전환보다는 더 크게 디스플레이가 전환한다고 생각하시면 더 알아들으시기 쉬우실 것입니다. 그리고 액션을 제공하거나 모드 요소들에 대한 기능 버튼을 제공할 때 사용합니다.차이점Tool BarBottom BarTab BarTop BarNavigation BarMain Action BariOSAndroid가이드라인에서 주로 버튼의 사이즈나 최대 몇 개까지 버튼을 배치하는지에 기술하였습니다. 그리고 Tab Bar와 Tool Bar 모두 아래에 있어 사용하기 때문에 두 가지를 같이 사용하지 못합니다.가이드라인에서 주로 버튼을 기능에 따라 다양한 모양으로 나누었습니다. 그리고 iOS와는 달리 Top Bar와 Bottom Bar의 위치가 나뉘어 있어서 두 가지의 기능을 동시에 사용 가능합니다.각 플랫폼별 고유 기능iOS : iOS HIG에서 iOS만의 고유 기능을 들자면 그 대표적인 예로 액션 시트를 들겠습니다. Tool Bar에 있는 버튼을 눌러서 일종의 선택을 표현하는 기능입니다. 액션 시트는 위에 있을수록 사용자 눈에 잘 띄고 위험성 있는 버튼은 빨간색으로 사용해야 합니다. 그리고 사용자가 가끔 홈 버튼을 누르려다 화면의 아래쪽을 누르는 경우가 있으므로 맨 아래 버튼은 취소 버튼으로 해야 합니다.Android : Android HIG에서 Android만의 고유 기능을 들자면 그 대표적인 예로 Holo와 Navigation Bar에 대해 들겠습니다. 둘 다 이번에 ICS 로 업그레이드되면서 나온 기능입니다. Holo에 경우 단조로운 Android의 스타일을 다양하게 바꾸기 위해 나온 기능입니다. Android의 Navigation Bar의 경우 iOS의 Navigation Bar와 엄밀히 말하면 다릅니다. Virtual Navigation Bar로 예전에 디바이스에서 버튼으로 있던 것을 Bar 형태로 가지고 온 것입니다.글을 마치면서이번 글에서는 대략 두 종류의 HIG에 대해 다뤄 봤습니다. 실제로 저희 앱에 가이드라인의 내용을 적용하였고 가이드라인에 대한 자세한 내용이 궁금하시면 아래의 링크를 참조해 주시길 바랍니다.iOS HIG : iOS Human Interface GuidelineAndroid HIG : Android Human Interface GuidelineAndroid Design : Android ICS Design#스포카 #HIG #디자인 #애플리케이션 #앱디자인 #프로토콜 #협업 #가이드라인 #인사이트 #꿀팁
조회수 1456

이노버즈미디어의 대표 미남, '박충선 디자이너'

안녕하세요, Y입니다! 지난 옐로피플 스토리에서 뷰신 나나가 첫 번째 인터뷰로 소개되면서 엄청난 화제를 몰고 왔는데요. 이번 두 번째 타자는 바로바로 YDM 소속의 디지털 마케팅 에이전시 이노버즈미디어의 대표 꽃미남 박충선 디자이너 입니다!Y: 안녕하세요! 옐블 독자들을 위한 자기소개 부탁 드려요! 박충선: 안녕하세요, 이노버즈미디어에서 브랜드 콘텐츠를 만들고 있는 디자이너 박충선입니다! 반갑습니다! Y: 브랜드 콘텐츠라! 정확히 어떤 일인지 궁금합니다박충선: 쉽게 말해서 각 기업 브랜드들이 페이스북, 인스타그램 등 소셜미디어에 발행하는 이미지를 제작하는 거죠. 현재는 롯데카드랑 글로벌 스포츠 의류 브랜드인 스파이더 코리아를 맡고 있어요. 아래와 같은 식으로 각 브랜드의 소셜미디어 콘텐츠를 제작하고 있습니다.Y: 본인이 느끼는 이노버즈만의 특별한 점이나 자랑할만한 사내문화가 있나요? 박충선: 사실 이노버즈가 제 첫 직장이라 다른 회사들과 비교하긴 어렵지만, 여기서 1년 4개월동안 몸담으면서 느낀 것은 정말 수평적이라는 거예요. 서로 눈치보지 않고 말할 수 있는 분위기다 보니 정말 다양하게 싱크빅 돋는 아이디어가 많이 나오죠 :) 또 매월 두 명씩 뽑아서 전 직원 앞에서 다양한 주제로 스피치를 해요. 업무에서 벗어나 본인이 흥미를 느끼는 분야 등 개인적인 이야기로 진행하기 때문에 서로를 알아가는데 큰 도움이 되는 것 같아요. 또 인턴과 신입사원은 물론 임직원들을 위한 다양한 교육과 지원을 해주는 것도 이노버즈만의 특별한 점인 것 같아요.출처 : 이노버즈 페이스북Y: 박충선님의 주제는 뭐였나요? 박충선: 저는 아직 안 했어요!ㅋㅋㅋㅋ 샤이가이라서.. Y: 샤이가이셨구나ㅋㅋㅋㅋ 네 다음질문 드릴게요! 기억나는 재미있는 에피소드가 있나요?박충선: 인턴기간에 업무와는 별개로 동료들에 대한 콘텐츠를 만들었어요. 이노버즈 가족 한 명 한 명에 대해 웹툰형식으로 만들었는데 친해질수록 디스(?)내용을 조금씩 넣어봤거든요. 그러다 보니 반응도 좋았고 다들 다음 편은 어떤 디스가 나올지 기대해줘서 재미있었어요ㅋㅋㅋ 역시 까야 제맛이라고……Y: 드라이플라워 고문이라니ㅋㅋㅋㅋ앞으로 드라이플라워 볼 때마다 죄책감들것 같아요ㅋㅋㅋ 그나저나 디자인 팀이라 남자가 많이 없을 것 같아요! 박충선: 이노버즈에 처음 입사했을 때 디자인 실에 저 포함 두 명 빼고 전부 여자분들이었어요. 처음엔 좀 걱정이 됐는데, 다들 좋으신 분들이고 형들처럼(!) 편하게 대해 주셔서 좋았어요ㅎㅎ Y: 다 여자분들이면 회식이 많이 없겠어요! 박충선: 왜 때문에 그런 생각을…… 저보다 잘 드세요 다들 (또르르)Y: 빨리 넘어갈게요!! 이노버즈/옐로모바일에 바라는 점이 있다면? 박충선: 일을 한다는 건 돈을 버는 것도 중요하지만 함께 일하는 사람들, 그리고 회사에서 임직원들을 대하는 자세가 엄청 중요한 것 같아요. 앞으로도 지금처럼 인간관계를 중요시 여기고 직원 한 사람 한 사람을 우선시하는 회사였음 좋겠어요. Y: 마지막 질문입니다! 앞으로는 어떤 일을 해보고 싶으신가요? 충선: 아주 먼 미래에는 디자인을 접목한 카페나 술집을 운영하고 싶어요. 당장은 원래 하고 싶었던 미술을 배워서 지금 하는 일에 적용시켜보고 싶습니다. 앞으로도 재미있는 컨텐츠로 브랜드에 좋은 영향을 미치는 디자이너가 되겠습니다! 저와 이노버즈 많이 응원해주세요! 
조회수 1252

전문가만 아는 페이스북 광고디자인 제작법 TOP 5

페이스북 광고를 하는 것은 쉽지만 잘 하는 것은 어렵습니다. 그리고 매일매일 더 힘들어지고 있습니다. 더 많은 광고주들이 페이스북 광고의 잠재력을 깨닫고 뛰어들면서 경쟁이 더 치열해져 광고가 금방 돈 낭비로 바뀔 수 있습니다. 페이스북으로 많은 광고를 해봤지만 아직도 제가 만든 새로운 캠페인들로 많이 배우고 있습니다.그러나 결국, 페이스북 광고의 성공은 두 가지 중요한 요소로 정의됩니다. 1. 제품에 대한 욕구를 불러일으키는 동시에, 사용자의 관심을 끌어 모을 수 있는 훌륭한 디자인 2. 리타겟팅(특정 웹사이트 내에 행동을 보인 유저들에게 다시 광고를 노출 시키는 것) 사용자들을 설득시켜 여러분의 비즈니스에서 전환을 이루어낼 훌륭한 페이스북 광고 디자인을 만드는 효과적인 방법론을 알려드리겠습니다. 1) 항상 다양한 디자인을 테스트해라   아무리 강조해도 지나치지 않습니다. 그 어떤 가설도 지레짐작하지 마세요. 항상 모든 항목을 테스트하세요. 여러분의 기존 페이스북에 대한 지식이나 경력에 관계없이, 항상 광고의 디자인과 대상을 모두 테스트하세요. 새로운 캠페인을 만들 때마다, 적어도 4개 이상의 다른 페이스북 광고 디자인을 생각해 내고 각각의 광고를 테스트해보세요. 예를 들어 서로 두 개의 다른 텍스트를 가지고 두 개의 다른 이미지를 테스트 할 수 있습니다.(이미지 2개 x텍스트 2개=4개의 베리에이션)AdEspresso라는 기업은 일러스트레이션을 자주 사용합니다. AdEspresso 페이스북 페이지에 있는 포스트들은 각각의 개성있는 디자인을 가지고 있고, 광고에도 잘 사용하고 있지만, 자세히 들여다보면, 그 전략이 다소 빗나갔다는 것을 발견할 수 있습니다.                        다운로드당 비용: 1,816원                                             다운로드당 비용: 3,385원 위 자료를 보면, 사람이 들어간 사진 이미지 광고가 AdEspresso가 자주 사용하는 일러스트레이션 광고보다 거의 두 배나 더 효율이 좋았습니다. 다시 한번 말씀드리지만, 모든 것을 시험해 보세요. 말도 안된다고 생각하던 아이디어도 괜찮습니다.  텍스트와 이미지를 다양하게 베리에이션하여 광고 피로도를 줄이고 광고 효율을 감소시키는 게재 빈도를 줄여보세요.   2) 사용자 페르소나를 제작하라   대부분의 기업들은 각기 다른 특성을 가진 고객세그먼트를 가지고 있습니다.  잠재고객 페르소나를 만들게 되면, 여러분의 페이스북 광고 디자인 역량을 향상시킬 뿐만 아니라, 잠재고객들에게 전반적으로 더 나은 서비스를 제공합니다. 먼저, 각 잠재 고객 유형별로 개인 정보를 기록합니다.  남자인지 여자인지, 하는 일은 무엇인지,  잠재 고객들이 여러분의 제품을 사용하여 해결하고자 하는 가장 큰 문제는 무엇인지.. 잠재고객 페르소나를 생성한 후에는 그들의 문제를 직접 해결해줄 수 있다는 내용의 페이스북 광고를 디자인하세요. 여기 두 가지 'Adespresso'광고가 있습니다. 하나는 스타트업들을 타겟으로 하고 다른 하나는 미디어 대행사를 대상으로 합니다. Startups는 최대한 빨리 성장하고자 하는 고객의 욕구를 강조합니다.  에이전시들은, 페이스북 광고를 더 빠르고 효율적으로 할 수 있다는 메시지를 강조합니다. 3)고객 후기를 활용해라   소비자 구매 결정에서 가장 영향력 있는 요소가 무엇인지 아시나요? 바로 '두려움' 입니다.사람들은 돈을 잃는 것과 잘못된 선택을 하는 것을 두려워하기 때문에 당신의 제품을 선뜻 사는 것을 두려워 할 것 입니다. 이것이 바로 무료 상품들이 효과적인 이유입니다. 하지만 돈에 관한 이야기에 국한되지는 않지요.  공짜 = 무위험 = 무부담 물론, 저는 여러분의 제품을 무료로 나눠 주어야 한다고 말하는게 아닙니다. 저는 단지 여러분이 페이스북 광고 디자인에 고객 후기를 추가함으로써 고객들의 우려를 해결할 필요가 있다고 제안하는 것입니다. 꼭 특정 좋은 리뷰를 가지고 있지 않더라도, 대규모 사용자 기반을 활용할 수 있습니다. Dropbox의 광고로 예를 들면, Dropbox는 잘 알려져 있음에도 불구하고 광고에서 여전히 100,000개 이상의 기업이 Dropbox에 의존하고 있음을 강조합니다. 특정 좋은 리뷰가 없더라도, 대규모의 통계적 수치로 자신들의 강점을 강조하는 것이지요. 사용자들이 이 광고를 보고 어떻게 반응할까요? 10만개의 기업들이 사용하고 있다니요! 모든 사람들과 그 주변사람들이 Dropbox를 사용하고 있다면, 거기에는 무슨 이유가 있을 것입니다. 곧 그 제품은 좋은 제품임에 틀림없고, 이 많은 사람들의 선택이 모두 틀릴 일 없으니 제품을 사용하는 것에 대한 두려움이 없어질 것 입니다. 4) 사용자들이 특정 행동을 유도할 만한 장치(CTA)를 사용해라 페이스북 광고에 특정 행동을 유도할 수 있는 장치(CTA)를 추가하는 것은 클릭율을 높이거나 광고의 매력을 높이지 못할 수도 있지만 전반적인 전환 속도를 향상시키고 전환 비용을 절감할 수 있습니다. 왜냐하면 좋은 CTA는 광고마찰을 줄여 주기 때문입니다.  만약 사용자가 당신의 광고의 CTA를 클릭하고 당신의 랜딩 페이지에 도착한다면, 다음에 무엇을 해야 할지 생각하는 시간을 낭비할 필요가 없습니다.  사용자는 이미 랜딩페이지에 도착해서 어떤 행동을 해야 하는지 알고 있을 것이고, 의도한 행동을 빠르게 수행할 것입니다. 왜냐하면 'eBook다운로드하기', '상담신청하기'와 같은 CTA를 광고를 통해 유도하였기 때문입니다.   5) 일관성을 유지해라 CTA처럼 일관성은 마찰을 줄이고 사용자가 원하는 작업을 완료하는 데에 도움이 됩니다. 만약 누군가가 당신의 광고를 클릭한다면, 그것은 그들이 당신의 이미지와 메시지, 그리고 당신이 제공하는 것을 맘에 들었기 때문입니다. 클릭한 후에는 광고에서 본 것을 보강하는 랜딩 페이지로 연결됩니다.  광고를 보강하는 랜딩 페이지에는 광고와 동일한 이미지와 표현을 사용하고, 단지 당신의 제품과 그들이 왜 그것을 사야 하는지에 대해 좀 더 자세히 설명하세요. 사람들은 웹 사이트를 몇 초 만에 보고 결정합니다. 바로 한 눈에 읽히지 않으면 사용자들을 잃게 될 것 입니다.  페이스북에서 빨간 운동화 광고를 보고 클릭했는데 랜딩페이지의 운동화 중 빨간 신발이 없다면 아마 사용자는 바로 떠나게 될 것 입니다.                             오피노 자세히 보러가기
조회수 1830

제대로 콘텐츠 디자인하기 – 판타지 편

수많은 도서 분야 중 리디북스가 가장 집중하고 있는 5개의 장르를 아시나요? 바로 리디북스 홈페이지를 상단 메뉴를 구성하고 있는 일반, 로맨스, 판타지, 만화, BL 장르입니다. 저는 리디북스 콘텐츠팀 디자이너로서 이 5가지 장르에서 진행하는 프로모션 디자인을 담당하고 있습니다. 5가지의 장르 모두 개성이 뚜렷한 만큼 디자인하는 방법도 조금씩 다른데요, 이번 포스팅에서는 5개의 장르 중 판타지 장르의 콘텐츠디자인 이야기를 들려드리겠습니다.판타지는 어둠의 다크?처음 판타지 장르의 콘텐츠디자인을 시작했을 때, 바탕색은 어둡게, 포인트 컬러는 채도가 높은 색을 사용하여 강한 대비를 표현하는 것이 전형적인 특징이었습니다. 저도 그 특징에 따라 일단 어두운 배경을 만들고 하나하나 요소를 넣으며 작업하였습니다. 그렇게 몇 개의 판타지 콘텐츠의 디자인을 하며 도서들을 접하다보니 판타지 도서가 어둡고 강한 이야기도 있지만 신이나 마법, 초현실 등 다양한 주제들로 세분화되기 때문에 맹목적으로 어두운 분위기로 디자인하는 것이 옳은 것이 아니라는 생각이 들었습니다. 그럼 어떻게 디자인을 해야 다양한 판타지 콘텐츠들에 각각 걸맞은 옷을 입힐 수 있을까? 하는 고민이 시작되었습니다.초반 판타지콘텐츠 디자인 작업. 바탕은 어둡게, 타이틀은 밝게.판타지는 세계다.판타지라는 단어가 갖는 특징은 뭘까 생각해보았습니다. ‘현실이 아닌 이상, 상상의 세계’. ‘개개인이 꿈꾸는 세상’, ‘현실의 극한적 왜곡’ 등등 여러 가지로 생각할 수 있는데요, 저는 개인이 환상을 담고 있는 ‘공간’이라는 느낌이 들었습니다. 실제로 많은 판타지 소설들은 이계, 사이버 세계, 중세, 현대. 초현실 등 시공간적 배경을 담고 있습니다.그래서 판타지 도서의 이벤트 페이지를 디자인 할 때 해당 소설이 가진 공간적 배경을 활용한다면 판타지 소설을 더욱 판타지답게 보여줄 수 있겠다고 생각하였습니다. 독자의 입장에서 볼 때도 소설 특징이 반영된 이벤트 페이지를 보면, 마치 그림책을 보듯이 도서에 대한 이해가 훨씬 이해가 쉬울 것이란 확신도 들었습니다.판타지 디자인 = 공간감과 입체감이후 저는 디자인을 할 때 구성 요소를 ‘공간 안에 넣는다’는 생각을 갖고 공간감 만들기에 집중하였습니다. 많은 게임 웹사이트가 좋은 참고자료가 되었습니다. 평면적인 디자인에 익숙했던 터라 입체적인 판타지 디자인 결과물은 굉장히 색다른 느낌이 들었습니다. 시각적으로 멋지기도 하지만 공간감 때문인지 몰입하게 만드는 힘이 있어서 시선을 강하게 잡았습니다.또한 ‘어둡게 표현한다’는 제한을 없애고 여러 컬러를 활용하여 몽환적이거나 신비로운 느낌의 다채로운 판타지 콘텐츠를 만들었습니다. 어떤 방식으로 디자인을 하더라도 공간감이라는 규칙이 있었기 때문에 통일감이 생겼고 이 특징은 자연스럽게 판타지 카테고리의 아이텐티티가 되었습니다.다양해진 컬러와 공간감의 표현입체적인 공간 연출법공간감을 연출하기 위해서는 어떻게 해야 할까요? 실내 이미지 사용, 구성 요소에 입체감 주기, 그림자 넣기 등등 많은 방법이 있습니다. 하지만 이중 가장 중요한 요소를 고르자면 바로 ‘빛’입니다. 가상의 조명을 왼쪽, 정면, 오른쪽에 배치한다고 생각해보세요. 가끔은 역광까지 알맞은 위치를 선정하고 그에 맞는 광량을 요소별로 적용하면 입체적인 느낌이 살아납니다.이 때, 일률적으로 똑같은 빛 효과를 주기보다는 위쪽 오브젝트엔 하이라이트와 강한 그림자 효과를, 아래쪽 오브젝트는 밝은 부분을 줄이고 음영 위주로 표현해주는 것이 좀 더 자연스럽게 공간연출을 할 수 있습니다. 막혀있는 공간이 아닌 하늘, 들판을 배경으로 사용한다 해도 빛을 이용하면 쉽게 공간감을 표현할 수 있습니다.배경레이어 위에 타이틀을 올린 예시배경에 빛을 주고 각 폰트에 같은 레이어 스타일을 적용한 예시광원에 따라 자연스럽게 빛 효과를 준 예시맛깔나는 효과공간감을 연출했다면 이제 효과라는 양념을 추가해 좀 더 맛깔나게 페이지를 구성해야 합니다. 너무 과해서 촌스럽지만 않다면 개인의 역량껏, 마음대로 구성해 볼 수 있기 때문에 가장 재미있는 작업입니다. 기본적으로 많이 사용하는 효과는 포토샵 블렌딩 모드 중 ‘linear dodge’와 레이어 스타일 중 ‘bevel and emboss’입니다.1) Linear DodgeLinear Dodge는 흰색 부분을 유지한 채 검은색에 흰색을 추가해 더욱 밝게 해주는 기능으로 발광 효과를 내는 데 주로 사용합니다. 검정 바탕색에 흰색이 블렌딩 되면서 빛을 내기 때문에 경계선을 뚜렷하게 하는 것보다 blur를 주어 그라데이션을 만들면 빛나는 효과를 더욱 살릴 수 있습니다.2) Bevel and EmbossBevel and Emboss는 평면레이어에 입체감을 주는 효과입니다. 각 항목별로 수치를 조정하여 양각, 음각, 높이와 빛 방향, 빛과 그림자 색 등등 다양한 표현을 이 하나의 기능 안에서 구현할 수 있습니다. 하나씩 조절해보며 자신이 내려고 하는 효과에 맞는 수치를 찾고 적용하면 됩니다. 특히 이 효과를 서체에 적용하려고 할 때 중요한 팁을 드린다면 바로 ‘폰트 선택’입니다. 고딕체에 적용하는 것보다 세리프체나 획의 굵기의 변화가 많고 특이한 모양의 폰트에 적용하면 효과가 더욱 살아납니다. 특이한 폰트가 없다면 기본 폰트선택 후 Convert to Shape하여 일부러 변형을 주어 사용하면 극대화된 효과를 볼 수 있습니다.마치며판타지 도서의 다양한 개성을 표현해보려고 시작한 방법들이 이제는 리디북스 판타지 디자인의 전반적 흐름이 되어 뿌듯하기도 하지만 이것이 정답은 아니라고 생각합니다. 처음 일을 시작했을 때 맹목적으로 어둡게 디자인을 하던 시절의 잘못을 반복하지 않기 위해 요즘은 다시 입체적인 것, 효과를 주는 것이 맞는 것인지, 과하지 않은지 반문하고 있습니다. 디자인 트렌드는 계속 변하고 새로운 것이 생겨나기 때문에 틈틈이 좋은 방법이 있는지 찾아보기도 하구요. 더 멋진 판타지 장르 콘텐츠 디자인을 위해 오늘도 열심히 고민하겠습니다. 감사합니다.#리디북스 #디자인 #디자이너 #콘텐츠 #콘텐츠디자인 #콘텐츠디자이너 #개성 #장르 #판타지 #공간감 #입체감 #광원효과 #고민 #작업후기

기업문화 엿볼 때, 더팀스

로그인

/