스토리 홈

인터뷰

피드

뉴스

조회수 6124

UI 사용성 평가, 쉽고 간편하게 하는 방법 #2

지난 글에서 UI 사용성 평가를 간단하게 하는 방법에 대해 소개하였었습니다.UI 사용성 평가, 쉽고 간편하게 하는 방법 (https://www.theteams.kr/teams/143/post/64513)그리고 '진행순서&방법'에 대해서는 가장 중요한 부분으로써 따로 분리하여 더 자세히 소개하겠다고 글 말미에 알렸었는데 오늘 본 글을 통해서 바로 그 부분을 소개하고자 합니다. 따라서 이 글의 문맥을 이해하기 위해, 먼저 지난 글을 확인하시는 것을 권해 드립니다. (그냥 보시면 뜬금없는 전개...)먼저 지난 글을 통해 DIY 사용성 평가 방법의 ‘진행순서&방법’에는 다음과 같은 6단계의 순서로  이루어졌다고 소개하였습니다.인사(4분) > 배경 질문(2분) > 둘러보기(3분) > 과제(35분) > 심층질문(5분) > 마무리(5분)본 글 속 상황은 본격적으로 위 6가지의 진행과정이 시작되는 순간으로써 테스트 참여자와 진행자가 디바이스 앞에 나란히 앉아 있는 상황입니다. 그리고 이런 상황에 처한 진행자의 단계별 진행 방법을 자세히 소개합니다.또한 글을 시작하기에 앞서,내용의 대부분은 질문에 대한 부분이 차지하고 있는데 바로 이 질문이 사용성 평가의 핵심이기 때문입니다.그렇기에 꼭 당부하고 싶은 부분은 테스트 간 질문 시에는  ‘왜?’라는 이유를 들을 수 있는 개방형 질문으로 하는 것을 반드시 권합니다. 개방형 질문을 잘 사용할 경우 폐쇄형 질문으로는 결코 알 수 없는 깊숙이 숨겨진 부분을 발견할 수 있기 때문입니다. 이에 대한 재밌는 영상이 있어서 아래  첨부하였으니 재미 삼아 가볍게 보실 수 있습니다.사전 준비테스트하려는 환경의 디바이스 (PC나 모바일 등), 스크린 녹화 프로그램, 스크립트 및 평가지 등을 준비한다.모바일 애플리케이션 등을  테스트하기 위해서는 모바일 화면을 PC로 볼 수 있게 하는 미러링 도구가 필요한데, 찾아보면 다양한 도구가 존재한다. 알고 있는 맥 기준 무료 도구로는 다음과 같은 도구가 있다.iPhone - Mac기본 맥 애플리케이션인 ‘Quick Time Player’로 가능하다. 아이폰과 맥을 USB 케이블로 연결하여 앱 스크린을 녹화할 수 있다.Android - Mac&Windows'모비즌'(https://www.mobizen.com)이란 도구가 있다'Quick Time Player' 를 통한 미러링 녹화 화면1. 인사(4분)참여자가 진행과정을 이해한 상태에서 평가에 임할 수 있도록 진행방법을 설명한다.‘안녕하세요 저는  oo입니다. 우리는 만들고 있는 서비스를 평가해 보고자 하며 약 1시간 정도 소요될 예정입니다'…(중략)'우리가 평가하려는 대상은 참여자가 아닌 서비스라는 것을  기억해주세요. 참여자의 행동이 옳은지 그른지 판단하는 것이 아니므로 어떤 행동을 하시더라도 틀린 행동이 아닙니다. 그러니 실수할까 봐 걱정하지 않으셔도 괜찮습니다.'…(중략)‘부정적인 의견에 우리가 불쾌할까 봐 걱정하지 마시고 생각하는 바를 명확히 알려주세요. 개선점을 찾기 위해 진행하는 것이니까요. 머릿속에서 생각하시는 모든 것을 입으로 소리 내어 표현해주세요.'…(중략)‘어떤 질문이든 편하게 해주셔도 좋습니다. 다만 질문의 답은 바로 드리지 못할 수도 있습니다. 왜냐하면 도와줄 사람 없이 어떻게 행동하실지 알아보기 위해 진행하는 것이니까요. 끝까지 궁금증이 풀리지 않은 부분은 평가를 마친 후 알려 드리겠습니다.'…(중략)‘평가 중인 화면과 대화는 녹화되고 있으나 얼굴이 나오지는 않으니 안심하셔도 좋습니다. 또한 절대 공개되지 않습니다.'이러한 내용들을 미리 안내하는 것은 중요하다.참여자들의 솔직한 의견을 듣고자 함을 미리 알릴 수 있는 과정이자, 평가 중 여러 어려운 상황을 미리 방어할 수 있기 때문이다. 또한 얼굴이 녹화될까 봐 걱정하시는 분들이 대단히 많으니 이에 대해서도 미리 알려드리는 게 좋다.2. 배경 질문(2분)참여자에 대해 몇 가지 질문을 던지다. 참여자의 긴장을 풀어주며 사전 지식을 가늠할 수 있다‘직업이 어떻게  되시나요?... 정확히 어떤 일을 하는 직업이죠?'…(중략)‘그렇다면 평소 인터넷 또는 스마트폰 사용시간이 어떻게 되나요?'…(중략)‘어떤 목적으로 주로 사용하시는지 비율과 함께 대략적으로나마 말씀해주세요'…(중략)‘평소 어떤 서비스를 많이 사용하시나요... 왜죠?'참여자가 어떤 사람이고 사용 행동 패턴은 어떤지 대강 감이 올 정도의 질문 몇 개로 시작하는 게 좋다.만약 질문에 정확한 답을 듣지 못하더라도 괜찮다. 이 과정의 목적은 진행자가 참여자의 이야기를 주의 깊게 듣고 있다는 사실을 전하며 답하는 내용에는 옳고 틀림이 없다는 것을 확인해 주는 과정이다.3. 둘러보기(3분)서비스 첫 화면의 첫인상으로 서비스가 제대로 이해를 전달하는지 파악한다.‘아직 클릭 또는 터치하지 마시고 먼저 첫 화면만을 둘러본 뒤 전체적인 느낌을 말씀해주세요... 왜 그렇게 느끼셨죠?'…(중략)‘제일 처음 어떤 부분이 시선을  사로잡았나요?... 그것은 왜죠?'…(중략)‘이 서비스는 어떤 서비스로  추측되시나요?... 그것은 왜죠?'…(중략)‘이 사이트에서 도움될 만한 부분이 있는지 생각해보시겠어요?'…(중략)‘가장 먼저 무엇을 클릭 또는   터치하시겠습니까?... 선택한 이유는 무엇이죠?'첫 느낌을 물어볼 때 많은 사람들은 서비스의 미적인 부분에 대해서  이야기하기도 하지만 이 반응에  일희일비하지 않아도 괜찮다. 그보다 더욱 신경 써야 할 부분은 서비스 자체가 사용자에게 한눈에  이해되는 것이기 때문이다.  그리고 앞서 소개했다시피 질문 후 어째서 그렇게 생각하였는지 알기 위해 ‘왜?’라는 질문도 더하도록 한다.4. 과제(35분)평가의 핵심적인 부분으로 참여자가 일련의 과정을 수행하는 모습을 관찰하는 부분이다.‘이제 몇 가지 과제를 해볼 텐데 머릿속에 떠오르는 내용들은 소리 내어 말씀해주시면 도움이 됩니다'…(중략)‘가장 먼저 하고 싶던 부분을 스스로 진행해보세요'…(중략)‘왜 죠?... 지금 어떤 느낌이 드나요?...  그다음엔 무얼 하실 건가요?'…(중략)‘이제 과제를 하나씩 드릴 텐데요 ex. 회원가입 후 로그인해보세요... 비밀번호 잊었다고 가정하고 비밀번호를 찾아보세요'이와 같이 스스로 서비스를 마음껏 이용해 보게 한 뒤, 다음 차례로 미리 준비해둔 과제를 3~4개 제공한다. 그리고 참여자 스스로 생각과 의견을 많이 말할 수 있도록 좋은 질문과 함께 역시  ‘왜?’라는 이유를 묻도록 한다.5. 심층질문(5분)과제 간에 행동을 유도할까 봐 미처 하지 못했던 질문을 할 수 있다.‘과제는 다 마쳤고 몇 가지 여쭤보겠습니다. ex. 가이드가 있었는데 왜 스킵하셨나요?'…(중략)‘그렇다면 ex. 가이드에 주의를 기울이지 않은 이유는 무엇인가요?'…(중략)‘아까 질문에 답 못해드렸는데 그것은 ex. 갤러리 화면 이었습니다. 이에 대해 어떤 생각이 드나요?'위 예시의 질문들은 과제 수행 중 질문하였다면 참여자에게 미리 편견을 주거나 행동을 유도할 수 있었을 것이다. 때문에 이러한 종류의 문의는 꼭 심층질문으로 따로 빼서 질문하도록 한다. 질문에 답하지 못했던 부분도 마찬가지이다.6. 마무리감사인사와 함께 마친다.이것으로 스타트업에서 사용할 수 있는 사용성 평가 방법인 'DIY 사용성 평가' 방법에 대해 소개를 마쳤습니다.[사용자를 생각하게 하지 마 Don't make me think] 책의 내용을 참고하여 직접 실무에서 사용했던 방법들을 덧붙여 작성하였는데 역시 자세한 내용은 책을 추천합니다.쓰다 보니 ‘왜?’라는 질문을 짧게 넣기 위해서 공격적이고 단편적으로 작성된 경향이 있는 것 같습니다. 여러분이 실제 사용할 시에는 좀 더 부드럽게 질문하길 권해드리며, 또한 단편적인 면만이 아닌 '왜 좋고, 왜 나쁜지' 양측 의견을 모두 들을 수 있도록 질문하길 권해드립니다.한 달에  한 번씩 UX나 실무 관련 글을 작성하고자 합니다. 다음 글은 내년 1월에 뵙겠습니다.새해 복 많이 받으세요!참조 : [사용자를 생각하게 하지 마 Don't make me think]#텐시티 #UI #UX #사용성개선 #사용성평가 #업무프로세스 #인사이트
조회수 7564

협업을 위한 심볼 구조화, 플러그인으로똑똑하게 스케치 사용하기

Sketch App 도입은 Zeplin을 활용하여 효율적으로 개발자와 소통하기 위해 시작되었습니다. 도입하는 과정에서 안드로이드 UI를 담당하게 되었고, 심볼의 구조화와 적절한 플러그인의 사용을 통한 작업의 효율, 가지고 있던 문제점들을 해결하는 것에 중점을 뒀습니다.기존 작업방식과 문제점디자인 작업 패턴디자인 작업 패턴을 분석했을 때, 기존의 PSD 파일들에서 컴포넌트를 가져와 재조합하는 경우가 가장 많았습니다. 디자이너간 협업 시 최근 릴리즈된 디자인이 맞는지, 요소간 간격 같은 디테일한 부분에 대해 묻는 경우가 많았으며, 개발자와의 협업 시 지칭하는 용어가 달라서 생기는 커뮤니케이션 미스가 종종 발생했습니다. 구조화에 앞서, 분석하고 내린 작업의 키포인트는 다음과 같습니다.1. 최근 릴리즈된 디자인이 영향을 받는 모든 화면에 동기화되어야 합니다.2. 개발자와의 협업 시, 심볼의 네이밍을 기준으로 커뮤니케이션합니다.3. 디자이너가 사용 시, 시안 작업을 빠르고 편하게 할 수 있어야 합니다.4. 컴포넌트, 디자인 요소들이 서로 유기적으로 연결되어있어야 합니다.5. 시안 작업 시, 유저 데이터를 사용하기 편리해야 합니다.심볼 생성 기준심볼로 만들어야 하는 경우는 다음과 같이 정의했습니다.1. 다양한 상태값을 가진 요소2. 같은 크기의 영역 안에서 다양한 형태를 가진 요소3. GNB처럼 자주 쓰이는 컴포넌트4. 카드 형태의 디자인5. 아이콘Overrides 예시심볼 폴더 구조심볼 폴더 구조디자이너들이 사용하기 때문에 첫 번째 분류는 보이는 형태, 디자이너끼리 자주 사용하는 용어로 합니다. 두 번째 분류는 원활한 커뮤니케이션을 위해 목적 혹은 개발자분들이 사용하는 용어로 지정하며, 세 번째 분류까지 해야하는 경우 2 Column, 3 Column(스타일쉐어 내부에선 Grid라는 용어를 주로 사용합니다.)과 같은 다양한 변화에 대한 것이므로, 똑같이 커뮤니케이션에 용이하게 판단하여 결정합니다.Elements 폴더는 심볼을 구성하는 심볼들이 있는 폴더입니다. 직접 심볼 폴더트리를 타고 들어가 생성하는 경우는 없으므로, 분류에 더 목적을 두고 폴더 구조가 복잡해지는 것을 감수했습니다.그리고 Overrides를 대비하여 이해하기 쉬운 용어로 작성합니다.심볼의 활용자주 쓰는 컬러들을 심볼화하고 마스크 기능을 활용하면, 아이콘들의 색상을 더 편하게 변경할 수 있습니다. 추후에 브랜드 컬러, 그레이스케일이 변경되는 경우에도 컬러 심볼만 수정하면 큰 문제없이 바로 적용할 수 있습니다.플러그인의 활용작업에 주로 사용하는 플러그인은 Auto Layout, Button, Clipboard Fill입니다.Auto Layout의 Stacked Group 기능으로 심볼이나 요소들을 유기적으로 연결시킵니다. Button은 Tag, List item 등에 사용하며 짜잘한 수정작업을 줄여 시안작업에 더 집중할 수 있도록 합니다. Clipboard Fill은 스타일쉐어 특성때문에 활용 가치가 높은 플러그인입니다. 유저 이미지, 게시글의 사진을 스타일쉐어 웹에서 복사하여 시안을 작업할 때 활용합니다. 실 데이터를 사용하기 때문에 설득력이 높아지고, 조금 더 객관적으로 작업할 수 있다는 장점이 있습니다.플러그인 사용 Gif페이지 구성모든 화면이 모여있는 Master_Android.sketch 파일에서는 페이지로 분류합니다. 이 분류와 구글 드라이브 폴더 구조를 일치시켜 빠르게 파일을 찾을 수 있도록 하였으며, 탐색이 용이하기때문에 새로운 디자이너가 오더라도 쉽게 파악가능합니다.디자인 작업 프로세스시안 작업 시, 실제 데이터를 사용하여 설득력을 높이는 것을 가장 큰 목표로 합니다.1. 디자인 작업 전, 사용할 심볼들을 모두 Detatch합니다.2. 문제해결에 맞게 컴포넌트를 디자인합니다.3. 플러그인을 활용하여 웹에서 실제 데이터들을 가져와 채웁니다.4. 시안 작업이 끝난 후, 정리하여 Zeplin으로 내보냅니다.5. 심볼을 만들어야 한다면, Master파일 Symbols에 업데이트합니다.6. Master파일에 심볼을 사용하여 화면을 정리합니다.이 과정에서 생기는 큰 문제점은 모든 작업자가 심볼 구조화에 같은 기준을 가지고 있어야 한다는 점입니다. 생성 여부, 심볼 이름을 정하는 규칙 등에 대해 문서화하여 공유해도 익숙하지 않기때문에 실수가 생기기 마련입니다. 그래서 안정화되기까지 첫 구조를 잡았던 담당자가 정기적으로 확인하여, 다듬어나가는 것으로 결정했습니다. 비효율적인 방법일 수도 있지만, 동시에 구조화를 더 탄탄하게 하는 기회였습니다.잘가 포토샵.Sketch App의 업데이트에 따라 해결할 수 있는 방법이 달라지는 경우가 많았습니다. 그에 대비하여 의존성을 줄여나가는 고민을 계속하고 있으며 UI 뿐만 아니라, 작업툴 사용에 제약이 없다는 조건 하에 Overrides 기능과, Clipboard Fill, Auto Layout을 활용하여 다양한 템플릿 작업에도 사용할 수 있다고 생각합니다.#스타일쉐어 #개발팀 #개발자 #개발환경 #인사이트
조회수 3287

사용자 경험(UX)은 기획자, 디자이너가 이끌지 않는다

오랜만에(처음인가?) 조금 더 실무적인 글을 써보고자 한다. UX에 대한 내용이다.사용자 경험(UX)과 인간-컴퓨터 상호작용(HCI), 이 단어를 처음 들은 것은 아직 군인이었던 2010년이었다. 군대에서 생물학과 심리학에 큰 관심이 생겨 여러 권의 책을 읽었는데, 그 모든 학문적인 영역이 하나로 합쳐질 수 있다는 생각이 들어 매우 흥분됐던 기억이 난다. 그 이후로 지금까지 6년 동안, 사용자 경험에 대해 공부해왔고 창업을 한 이후에는 비캔버스의 사용자 경험 향상을 위해 2년째 달리고 있다.실무적으로나 학문적으로나 아직도 부족한 것이 많지만, 비캔버스라는 툴을 2년째 서비스하며 해온 고민들을 생각해보면 툴에 대한 사용자 경험만큼은 우리 팀만큼 전문성을 가진 사람이 많이 없을 것이라 생각한다. 비캔버스는 웹에서 동작하는 애플리케이션으로 포토샵과 같은 툴이다.TOOL이라는 서비스 특성상 사람들의 인식에서 정해진 영역이 강하지 않기 때문에, UI를 완전히 새롭게 설계하고 그것을 표준으로 만들 수 있다는장점이자 단점이 있다. 즉, 우리가 독특하게 UI와 UX를 설계하여 사용자에게 제시후, 익숙하게 만드는 '닻 내리기(Anchoring effect)식 전략'이 가능했다는 것인데 이 때문에 처음 비캔버스를 접하는 사용자들이 서비스를 어려워하는 경우도 많았다.올 초, 우리는 이러한 한계를 효과적으로 극복할 수 있는 모형을 찾았는데, 이 것이 우리의 전체적인 개발 프로세스에 큰 영향을 미쳐오고 있다. 오늘 이것을 공개하고자 한다.포스트잇 메모 기능을 개발한다고 가정해보겠다.참고로, 나는 인터페이스 관점의 UX를 '기능'과, 그 기능까지 찾아가는 '내비게이션'으로 분리하여 생각한다. 가령, 내가 여행지에 고깃집을 창업하기로 결심했다면, 고깃집 자체를 어떻게 운영할 것인지에 대한 것은 '기능'차원이다. 반면, 어떻게 사람들이 거리적인 동선이나 심리적인 흐름에 의해 내 고깃집에 도달할 지에 대해서 고민하는 것은 '내비게이션'에 대한 고민이다. 이번 예시는 포스트잇 메모 기능이라는 '기능'에 대한 내용으로 국한되어 있지만 이 모델 자체는 '내비게이션' 성격의 UX에도 사용할 수 있다.이런 UX/UI 개발에 대한 프로세스를 정립하는 일은 우리 팀의 특성상 반드시 필요한 것이었다. 비캔버스는 지금까지 2년간 디자이너 없이 순수 개발팀으로만 이뤄져 왔다. 즉, 주요 커뮤니케이션 상대인 내가 기획과 디자인뿐 아니라 마케팅 업무와 회사 대표일까지 하고 있는 상황에서 나와의 커뮤니케이션이나 토론이 아주 잦게 진행되는 것은 시간적으로 불가능했다. '이게 왜 이렇게 만들어지냐?', '이건 어떻게 만드냐'에 대한 질문이 잦을수록 내가 다른 업무를 볼 시간이 매우 적어졌고 개발팀도 수동적으로 일하는 것 같아서 매우 싫었다.그래서 올 초부터 이 프레임(모형)을 만들어서 개발 프로세스에 적용해왔는데, 결과는 매우 효과적이다. 서론이 길었다. 본론으로 돌아와서 내가 "포스트잇 메모 기능을 개발하자!"라고 개발팀과 이야기할 때는 이런 모델을 제시한다. 물론 이건 예시다. 실제로 적용할 때는 더 복잡하게 설계될 수 있다.기능 개발 커뮤니케이션에 활용되는 모델 1단계.1단계 - 고객 입장에서의 감정이입 단계보통 '새로 생길 기능은 이렇게 생겼고, 이렇게 동작한다'는 식으로 이야기하면 개발팀으로부터 '이럴 때는 어떻게 해? 저럴 때는 어떻게 해? 이거 누르면 뭐 나와?' 등 질문이 쏟아진다. 내가 기능 설계를 0부터 100까지 정확하게 다 설명하면 이런 내용으로 회의하는데 온종일 시간을 낭비하게 되며, 개발팀의 창의성과 고객에 대한 감정이입 능력을 말살시키는 것이라 생각한다.위 사진에서 볼 수 있듯, 포스트잇 메모 기능이 있기 전과 후가 어떻게 다른 지에 대해 먼저 설명한다. 이 기능이 사람들에게 어떻게 선물처럼 다가갈 수 있는지 말해주고, '사용자의 기능 사용 목적'을 추정하여 알려준다. 즉, '우리 팀', '내 의도'는 아직 등장도 하지 않는다. 내 이야기를 하는 것이 아니다. 내 머릿속의 기획을 이야기하는 것이 아니다. 우리 고객이 어떻게 이 기능을 사랑하게 될 것이고, 이 기능을 어떤 목적으로 활용하게 될 것인지 고객 사이드로 설명한다.나는 개인적으로 페르소나 분석을 싫어한다. 본래 페르소나의 목적은 특정 인터페이스에 대해 각기 다른 사람들이 어떻게 다른 패턴을 보이는지 파악하여 그 패턴을 바탕으로 UX를 개선시키는 게 목적이라 보는데, 지금 사람들이 하고 있는 것은 마케팅 차원의 인류 통계학적 고객이 누군지 파악하려 하는 건지, 서비스 UX를 개선시키려는 것인지 분간이 잘 안 간다. UX/UI 개선을 위해서는 페르소나 분석이 아니라, 우리 고객이 우리 제품을 사용하는 고객들의 패턴을 세부적으로 분류하고 그 분류된 특정 패턴의 고객들이 기능에 어떻게 다르게 반응하는지 등을 파악하는 것이 중요하다 생각한다.각설하고, 2단계로 돌입할 때가 됐다. 이제 고객에 대해 이해하고, 이 기능이 어떻게 작동하면 좋을 지에 대해 개발팀들도 머릿속에 생각과 아이디어가 생겼을 것이 분명하다. 내가 고객이라고 눈을 감고 상상하면 제품을 직접 돌려볼 수도 있는 그런 경지에 조금이라도 빠져든 것이다. 그럼 이제 2단계 논의가 가능해진다.2단계.2단계 - 고객을 위한 우리의 움직임을 결정이제 어떻게 움직일지 고민하는 단계다. 그전에 우리는 이미 고객이라는 상상 속에 빠져있으니, 고객 입장에서 포스트잇 기능을 사용해볼 때다. 포스트잇 기능을 사용할 때 외부적인 간섭이나 방해는 무엇이 있을까? 포스트잇이라는 게 액셀처럼 멋지게 구조화된 형태가 아니라서 상사가 내가 노는 줄 알고 눈치를 줄지도 모르겠고, 내 10년 된 17인치 모니터에서는 포스트잇 글자가 조금 작아 보일지도 모르겠다. 서비스 내부적인 간섭 요인도 이런 식으로 상상이 가능하다.이렇게 간섭 요인까지 봤으면 드디어 '우리 이야기', '내 기획'이 나올 때다. 아까 이야기했던 고객의 목적에서 외/내부 간섭 요인을 제거하면 우리의 기능 개발 목적을 손쉽게 설정할 수 있다. 어떻게 '이 기능을 만들지'에 대해서까지 불필요한 브레인스토밍 시간 필요 없이 단기간에 빠르게 도달할 수 있다. 이렇게 한 번 우리끼리 합의를 보고 나면 불필요한 질문과 회의가 매우 줄어든다. 스스로 이 모델을 참고하면서 '고객은 이런 목적을 달성하는 것이니 버튼은 이렇게 동작해야겠지?'라는 개발팀의 상상력이 작용하기 때문이다. 그런 뒤에 논의를 시작하면 발전적이면서도 짧고 굵은 토론이 가능하다.이렇게 목적까지 설정했으면, 이 기능을 음악으로 한 번 표현해보면 아주 재미있다. 가령, 이 기능을 쓸 때 사용자들의 머릿속에서 어떤 음악이 흘러나올 것 같은지 상상해본다. 이게 좀 어렵다면 이 기능을 사용하는 영상을 만든다면 무슨 음악이 어울릴지를 찾고 그 이유를 적어보면 된다. 그렇게 하면 단순히 논리적인 차원의 어떤 딱딱한 객체로써 기능을 보는 것이 아니라, 사용자와 우리를 호흡하게 만들어주는 살아있는 중간 매개자로서 바라볼 수 있다. 즉 서비스가 생명력을 갖는다고 생각하게 되는 순간이 찾아온다.3단계, 마지막 단계다.3단계 - 일할 때 항상 자신에게 묻기. '이것이 고객의 목적을 달성하는 길인가?'2단계에서 목적까지 다 세웠으니 이제 기획자는 기획을 하고, 디자이너는 디자인을 하면 되고 개발자는 개발을 하면 된다. 보통, 이때 커뮤니케이션에 항상 큰 문제가 생기곤 한다. 기획이 다 끝나서 개발팀에게 전달하면 싸움이 나거나, 개발자가 개발을 하다가 디자이너의 욕심을 발견하면 또 싸운다거나..이 모델을 활용하면 그러한 일이 줄어든다. '고객의 목적 달성'외에는 모든 팀원들이 오버를 하지 않게 된다. 나도 개발을 하면서 느꼈지만, 아무리 안중요한 기능이라도 쉬울 줄 알았는데 막상 안 풀리면 거기에 엄청나게 많은 시간을 할애하게 된다. 개발자의 욕심이 작용하는 것이다. 디자이너도 마찬가지다. '적합한 사이즈의 포스트잇을 만들어주자'에 많은 고민을 해야 할 디자이너가 포스트잇 색깔에 지나치게 많은 고민을 한다던지, 폰트 생김새나 여백 같은 것에 고민하는데 큰 시간을 할애하게 된다. 그것 또한 욕심인 셈이다. 서로 욕심부려서 결과물이 좋은 꼴을 본 적이 없다.우리가 고객의 입장에서 감정 이입하여 만들어낸 '고객의 목적'을 달성시켜주는데만 집중한다면 커뮤니케이션 시간이 월등하게 줄어들고 자기방어적인 입장으로 점철된 회의 또한 크게 줄어든다.즉, UX라는 것은 그저 디자인팀이나 기획자의 전유물이 아니다. 전체 팀이 일하는 프로세스가 오롯이 사용자 경험에 크게 영향을 미치며 기능 딜리버리 속도에도 크게 영향을 미친다. 물론, 우리 팀에서 이것이 가능했던 이유는 고객을 진심으로 사랑하고 낮에는 고객지원을, 밤에는 개발을 하는 고된 상황 속에서도 고군분투하는 개발팀이 있기에 가능한 것이었다. 이 기회를 빌어 우리 개발팀(경병현 이사님, 심중섭 팀장님)에 감사한다.수동적인 조직에서는 이러한 프로세스가 불가능할 수 있지만 이런 프로세스를 적용하기 위해 노력한다면 개발자가 하루 종일 코드만 보고 불평하고 있는 일은 줄일 수 있다. '이 거지 같은 걸 왜 만들어야 돼'라는 생각으로 개발을 하게 되면 개발 결과물도 후지고 일정도 늦어지며 자기 자신에게도 악영향을 미치게 된다. 그리고 그 부정적인 에너지는 고객도 무의식적으로 느낄 수 있게 된다.마치, 음식점에 갔는데 주인장이 성질을 내며 음식을 만들면 아무리 맛있는 음식도 아무런 맛이 느껴지지 않는 것과 같은 것이다. 화가 난 어머니가 차려주신 밥상의 밥은 왠지 잘 넘어가지 않는다. 우리가 개발을 하거나 서비스를 만들 때도 똑같다. 부정의 에너지가 서비스를 덮고 있으면 그 에너지는 우리가 모르는 새에 고객의 인식 속에 들어가 서비스의 사려 깊은 에너지를 말살시키게 된다. 실컷 부정적인 에너지 다 투여해서 고객의 입맛을 다 망쳐놓고 사용자 경험이 어떻고 버튼을 어디에 배치해야 되고 고민하는 것은 매우 이상해보인다.따라서, 우리에게는 이런 모델이 매우 중요했고 앞으로도 쭉 활용하게 될 것이다.어떻게 보면 무식하고 후져 보이는 전략이자 모델일 수 있겠지만, 유용하다 생각하는 사람들은 이를 잘 활용해 보기를 바란다. 막상 해보면 매우 좋은데, 순서가 가장 중요하니 순서를 바꾸면 안된다.1. 고객에게 감정 이입하기 (이 기능이 있기 전, 있고나서 고객의 행동 변화)2. 고객을 위한 우리의 움직임을 결정하기3. '이거 진짜 고객의 목적을 위한 길인가? 이 토론은? 이 회의는? 쓸데없는 시간낭비 아닐까?' 생각하기
조회수 1501

독서모임 스타트업에 개발자나 디자이너가 필요한가요?

트레바리는 독서모임을 운영하는 회사다. 멤버들이 책을 읽고, 독후감을 쓰고, 아지트에서 여러 사람들과 다양한 대화를 나눌 수 있도록 만들어준다. 아날로그적이려면 한없이 아날로그 할 수 있는 회사가 바로 트레바리다. 그러다 보니 트레바리의 첫 빌트인(?) 개발자 겸 디자이너인 나는 가끔 이런 질문을 받기도 한다. "트레바리에 개발자나 디자이너가 필요한가요?" 작년 11월과 12월, 개발과 디자인을 총동원해서 멤버십 신청 페이지의 UI/UX 개선 작업을 진행했다. 원래의 홈페이지보다 편하게 신청하도록 토스 결제를 연동하는 등 프로세스를 재편하였고, 판매할 프로덕트가 의도대로 보이도록 레이아웃을 다시 구성하였다. 컨텐츠의 가독성을 위해 컴포넌트들의 디자인도 깔끔하게 변경했다. 개선된 프로세스와 인터페이스라면 멤버십에 신청하는 사람들이 늘어날 거라고 확신했다. 홈페이지를 방문만 하고 멤버십에 신청하지 않은 이유는 '홈페이지가 불편하고 안 예뻐서'라고 생각했기 때문이었다.결론부터 말하자면 내 가설은 완전히 틀렸다. 개선된 홈페이지를 런칭했지만 방문 유저 대비 신청한 유저의 비율에는 큰 변화가 없었다. 다급히 주변에 조언을 구하기 시작했고 마켓컬리의 이지훈 님이 해주신 조언이 한참을 머릿속에 멤돌았다. "트레바리는 오프라인 경험이 메인이므로 홈페이지의 변화가 큰 효과가 없을 수 있음을 인정하고 시작해야 해요. 홈페이지는 광고를 보고 온 유저들이 독서모임에 가기 전까지 거쳐 가는 곳이에요."그렇다. 트레바리 홈페이지는 오프라인 독서모임에 참여하기 위한 건널목일 뿐이였다. 건널목이 아무리 좋다 한들 목적지가 탐탁지 않으면 사람들이 건너가지 않을 것이었다. 마찬가지로 홈페이지가 아무리 편하고 예뻐도 아지트에 와서 나누는 대화가 무의미하고 재미없다면 사람들이 트레바리를 찾지 않을 것이다.덕분에 트레바리 특성상 홈페이지를 위한 개발자나 디자이너 크루(=직원)가 필요한지 자문하게 되었다. 건널목 역할을 수행하는 홈페이지가 필요한 것이라면 이미 충분하다고 생각했다. 추가로 필요한 기능이 있다면 그때그때 적당한 프리랜서를 고용하는 게 합리적일 수도 있었다. 그렇다면 맨 위의 질문에 대한 대답은 "아니요. 필요 없어요. 프리랜서면 충분해요."가 되는 것이었다.내가 크루로서 잘 쓰일 수 있는 일은 무엇일까?얼핏 생각하기에 프리랜서면 충분해 보이지만 분명 내가 크루로서 잘 쓰일 수 있는 일이 있을 거라 생각했다. 그리고 그것을 오프라인 트레바리와 온라인 트레바리 사이에 간극이 있다는 점에서 찾았다.오프라인 트레바리는 꽤나 매력적이다. 한 시즌을 경험한 두 명의 멤버 중 한 명은 다음 시즌에도 멤버십을 신청한다. 물론 나머지 한 명까지 신청하게 만들게끔 개선할 부분들이 남아있지만 그래도 60%가 넘는 리텐션은 트레바리가 다시 올 만한 서비스라고 말해준다.온라인 트레바리는 사정이 다르다. 많은 사람이 방문하지만 금세 나가버린다. 지금의 트레바리 홈페이지는 트레바리가 뭐 하는 곳인지, 트레바리를 하면 어떤 사람이 될 수 있는지, 트레바리에서는 어떤 사람들을 만날 수 있는지 잘 알려주고 있지 않다. 미리 지인이나 미디어를 통해 트레바리의 매력을 알고 온 사람들만이 홈페이지를 샅샅이 뒤져본 후에나 어떤 곳인지를 엿볼 수 있다.이 불협화음을 잘 조율하는 일을 내가 잘 할 수 있겠다는 생각이 들었다. 나는 원래 작년 초까지 멤버였다가 트레바리 매력에 빠져 입사까지 하게 된 진성 유저였다. 덕분에 트레바리가 얼마나 좋은지, 어떻게 트레바리를 통해 예전보다 멋진 사람이 될 수 있는지, 트레바리에서 얼마나 좋은 사람들을 만날 수 있는지를 알고 있었다. 그리고 이것들을 동네방네 열심히 소문을 내고 싶은 사람이었다.트레바리 홈페이지가 오프라인 트레바리에 오기 위한 건널목이라면 건널목 입구에 삐까뻔쩍한 간판도 크게 달고, 안내판도 만들어 건널목 너머에 얼마나 멋진 곳이 있는지 넘어오고 싶게끔 기대감을 심어주고 싶다. 우리의 비전인 '세상을 더 지적으로 사람들을 더 친하게'처럼 내가 트레바리에 온다면 더 지적이고 멋진 사람이 될 수 있고, 사람들과 더 친하게 지낼 수 있음을 잘 설명해주고 싶었다. 사람은 자기가 정말 좋아하는 것을 설명할 때 지치지 않고 그 어느때보다 열심히 목소리를 높일 수 있다고 생각한다.물론 나 혼자서는 힘들 것이다. 그래서 다른 크루들과 같이 어떻게 잘 전달할 수 있을지 치열하게 고민해보기로 했다. 그 일례로 최근에 영훈님과 같이 사내 스터디를 시작했다. 이런 점들이 단순히 시키는 일만 해내는 프리랜서보다 훨씬 더 잘 쓰일 수 있는 크루로 만들어 줄 것이라고 믿는다. 아직 '그래서 구체적으로 어떻게?'까지는 고민을 끝마치지 못했지만, 드디어 어떤 방향으로 무슨 역할을 하는 사람인지를 결정하였다. 이 결정을 시작으로 올해는 '회사에 더 많은 기여를 할 수 있는 크루가 될 수 있지 않을까'하는 설렘과 '그러려면 훨씬 더 잘해야겠다'는 부담이 가득한 채로 일 년을 맞이하게 되었다.올 한 해 '세상을 더 지적으로 사람들을 더 친하게' 만들어줄 우리 크루들!#트레바리 #기업문화 #조직문화 #스타트업 #인사이트
조회수 1354

왜 우리 애 귀를 죽이고 그래욧!(브랜드행사와 브금)

공포영화를 볼 때 막 사다코가 튀어나오고 팝핀귀신이 끄어어억 대면 흔히 눈을 가리잖아요. 음, 그건 아무 소용이 없어요. 아니 오히려 더더더더더더 무서워지게 된답니다. 눈을 가려도 우리는 상상력이란 그림을 그려내거든요. 시각정보는 실제로 보는 정보보다 두뇌에서 처리하는 상상의 정보가 더 강해요. 더군다나 모든 정보가 차단된 상태가 아니잖아요? 왜냐!~ 소리가 들리고 있거든요. 눈이 가려지면 온전히 다른 감각에 의존하여 주변상황을 파악하게 되는데 당연히 어두운 극장에선 촉각이나 청각 등이 더 예민해질 수 밖에 없어요. 그래서 영화관에서 손잡고 막..으흐흐ㅡ흫흐흐흐 그러면 막 더 설레고 어쩌고... (아니 이 얘기가 아니고..) 소리로 들리는 정보의 힘도 더 강해집니다. 근데 영화에서 사운드작업은 제일 마지막에 이루어져요. 후시녹음이라도 하죠(물론 종종 동시녹음을 할 때도 있답니다. 현장감을 살리기 위해)  공포영화의 공포감을 극대화시키는 마지막 카드란 얘기죠. 그러니 대충 넣었겠어요?  그렇죠 아주 무서워죽어랏!!! 하고 넣었을 거예요. 눈을 가리는 순간 그 마지막카드가 아주 제대로 반고리관에 꽂혀서 두뇌를 뒤흔들어놓게 되는거죠. 게다가 상상력까지 동원되면 그날 잠은 다 잔겁니다.망했다. 머리도 못감겠어겁내 무서울 땐. 귀를 막으세요. 아니면 이어폰을 꽂고 별의커비BGM이라도 틀어놓던가. 확실한 이해를 위해 데이터가 충분하시거나 와파 접속중이시라면 영상하나 보고 오실께요.공포영화에서 배경음악을 바꿔버리면 어떤 느낌이 드는 지 느껴보세요.https://www.youtube.com/watch?v=XNk8TM9CBZQ<iframe width="700.000000" height="394.000000" src="//www.youtube.com/embed/XNk8TM9CBZQ" frameborder="0" allowfullscreen="">브금이 이렇게 중요해요.인간의 청각정보처리는 귀에서 이루어진다고 흔히 생각하지만, 생각보다 다양한 기관을 통해 소리를 처리한답니다. 간단하게 설명해볼께요. 대표적인 귀부터. 보들보들 가지고 놀기 좋은 귓바퀴가 하는 일은 두 가지입니다. 일단 만지작거리고 놀기 좋고, 소리를 모으는 역할도 해요. 그리고 소리는 귓밥이 쌓이는 외이도를 따라 안으로 들어갑니다. 외이도의 끝에는 고막이 있고 이곳은 스피커의 진동판처럼 얇은 막으로 되어있어요. (뺨을 잘못맞으면 압력차로 터집니다.지하철 개찰구를 지나다가 이어폰이 걸려 팍 뽑히면 귀가 멍해지기도 하구요.) 고막에 진동이 둥둥 울리면 그 주파수를 청소골에서 증폭시켜요. 트랜지스터와 같은 역할을 하죠. 더 선명해진 소리는 염증이 자주 생기는 중이를 통해서 달팽이관으로 들어갑니다. 그리고 달팽이관에 붙어있는 청신경을 통해 두뇌로 전기신호를 보냅니다. 두뇌는 그 신호를 처리해서 이게 고양인지 개인지 사람인지를 분간합니다.물론 대부분은 귓바퀴에서 모인 소리를 통해 듣지만 보시다시피 청각기관은 뼈로 둘러쌓여있어요. 그래서 얼굴뼈나 치아를 통해서 전달되는 진동을 인식할 수 있죠. 뼈나 피부로도 소리를 듣는거예요. 이렇게 전달된 진동은 내이로 직접 인식됩니다. 이걸 골전도라고 해요. 그래서 가끔 비싼 골전도이어폰을 착용하고 달리는 동네아저씨를 발견할 수 있는거죠. 이렇게 청신경을 통해 전달된 전기신호는 두뇌에서 일정한 처리를 거칩니다. 인간이 파악할 수 있는 진동수는 20~20,000Hz예요. 좋은 이어폰일수록 이 가청주파수와 거의 가까운 주파수를 들려주죠. 이 중에서 1,000~4,000Hz의 소리를 가장 잘 인식한답니다. 보통 일상적인 대화에서 나타나는 수준이예요. 그냥 알아두면 좋아요. 음악 이퀄라이저 조정할 때..등 도움이 될 수도 있으니.자 이제부터 재미있는 얘기를 하려고 합니다.우리가 귀공부나 하자고 이렇게 서론을 길게 뺀 건 아니니까요. 브랜딩은 물론 경영이론의 일종이 되었지만 그 근원은 심리, 역사, 사회, 문화, 신경정신학적인 내용들에 맞닿아 있습니다. 이 중 배경음악이라고 하는 것은 심리/생물학적인 요소를 포함해요보통 브랜드하면 생각나는게 로고, 슬로건, 브로슈어, 네온사인, 배너, 현수막, 회사소개서 등....온통 시각적인 부분만을 생각하겠지만.... 사실 시각정보는 굉장히 많이 왜곡됩니다. 정확도면에선 정말 꽝이라고 할 수 있죠. 그리고 시각정보는 '인지' 의 역할이 큽니다. 이것이 치킨이다! 를 확인하는 게 최우선 목표죠. 문제는 치킨을 보는 것만으로 침을 흘리는 이유는 시각의 기억이 아닌 후각(맛있는 냄새!) 과 미각(치킨맛!), 청각(고추바사삭!) 이 기억하는 정보들 때문이라는 겁니다. 맞아요, 경험과 감정을 만드는 것은 시각만이 아닙니다. 오히려 다른 감각기관들의 정보들이 훨씬 선명한 감정을 만들어내죠. 때문에 우리는 어떤 가게에서 풍기던 똥내나, 아줌마가 테이블을 닦았는데 물씬 풍기던 행주의 쉰냄새, 이맛도 저맛도 아닌 밍밍한 파스타,너무 까실까실해서 등을 간지렵혔던 니트또는 너무 시끄러워서 귀가 멍멍했던 카페, 담배냄새가 가득했던 그 노래방을 기억합니다.바로 귀, 코, 입, 피부를 통해서 말입니다.오늘은 그 중 '귀' 얘기를 해보려고 해요. 이미 서론이 충분히 길었으니 바로 본론으로 들어가볼께요 :)1. 음악은 걸음의 속도를 제어한다.막 그런 음악이 있어요. 이어폰 꽂고 듣으면서 걷다보면 걸음이 빨라지고 다 싸워 이길 수 있을 것은 간지터지는 곡들. 그건 확실히 기분만이 아닙니다. (물론 그렇다고 아무하고나 싸우면 져요.) 보통 물건을 천천히 봐야하는 매장에선 73bpm 이하의 음악을 선호해요. 요가나 명상을 하는 곳에선 60bpm 이하의 음악을 틀죠. 반면 빠른 이동과 회전율을 만들어야 하는 곳에선 93bpm이상의 빠른 템포를 선호합니다. 이건 사실 상식이죠.  모짜르트는 이러한 음악의 속도가 감정에 미치는 영향을 겁내 잘 알고있었나봅니다. 모짜르트 이전까진 일정한 속도의 연주가 관례였으나 이 분은 그런 것에 개의치 않고 연주속도를 다르게 만들어서 감정을 표현하셨죠. 그래서 오늘날까지도 엄마 뱃속 태아에게 비트의 참교육을 시전하시는 분으로 유명하달까요....광고영상을 만들거나, 오프라인 행사를 할 때의 배경음악은 어떨까요? 네트워킹이 빠르게 이루어지고 사람들의 활동을 활발하게 만들려면 확실히 둠칫둠칫거리는 빠른 비트의 배경음악을 까는 것이 좋겠죠. 편안하고 부드러운 음악은 모두를 너무 편안하게 만들어서 의자에서 엉덩이를 뗄 수 없게 만들어버리거든요.  2. 음악은 집중력을 제어한다.논문에 따르면 (숙명여자대학교 음악치료대학원 : 임상음악치료전공 2016.2 :  A meta-analysis of the effects of music activity on attention.  p. 63-78) 배경음악은 선택적 집중효과, 그러니까 어떤 특정사람의 말에 집중해서 빠져드는 데에 유의미한 효과를 보인다고 해요. 그 다음 지속효과, 그리고 자기통제력 순이었죠. 이 때 한 회기당 30~40분 정도의 청취가 최대의 효과를 보였다고 해요.  물론 여기엔 다양한 변인들이 존재하기에 오차를 감안하긴 해야해요. 보통 인간의 시각집중력은 성인기준 15분 내외라고 하죠. 공부하려면 적어도 15분은 있어야 집중기에 접어들수 수 있단 얘기예요. 청력도 마찬가지의 시간이 필요합니다. 그러니 어떤 행사나 컨퍼런스에 사람들이 충분히 녹아들게 만들려면 BGM에 노출될 충분한 시간을 주어야해요. 음악틀고 3분만에 시작할께요~~ 이러면 너무 다급한 느낌이 들어요. 그리고 그 BGM은 비슷한 비트의 (같으면 더욱 좋고) 같은 장르의 음악일수록 좋아요. 마마무노래 나오다가 갑자기 모짜르트 나오면 이상하단 얘기예요. 3. 음악은 추억을 부른다.90년도 브루너(Brunner)의 연구에서 이미 광고음악과 제품의 긍정적효과에 대한 상관관계는 증명된 바가 있습니다. 이건 뭐 이제 거의 정설에 가깝죠. 제목이 겁나 긴 논문에서도 (방송 광고에서 배경음악이 소비자의 기억과 태도에 미치는 영향 : 배경음악의 친숙도와 메시지 조화도를 중심으로 = (The) Effects of Background Music on Customers' Memory and Attitude toward Television Commercials, 전혜경, 2005) 논문은 복잡하지만 결국 결론은 하나였어요.브금이 대상과 잘 어울릴수록 긍정적 이미지가 더욱 강해진다!https://www.youtube.com/watch?v=YkUzDzRZznk<iframe width="700.000000" height="394.000000" src="//www.youtube.com/embed/YkUzDzRZznk" frameborder="0" allowfullscreen="">추억에 젖고싶은 분 클릭 비운의 게임이지만 아직도 OST하나만큼은 유저들을 눈물짓게 하는 테일즈위버의 브금입니다. 추억은 항상 미화된다고 하죠. 게임산업에서 OST에 엄청나게 공을 들이는 데에는 이유가 있어요. 실제 게임의 톤을 정리할 뿐 아니라 손과 눈이 바삐 움직이는 다양한 정보들을 음악이 연결시켜줄 수 있거든요. 그 바쁘게 움직이는 스타크래프트의 다양한 움직임이 테란OST 한방으로 이미지화되는 걸 보면 알 수 있지요.(물론 플레이해본 사람만) 배경음악이 삽입될 경우 뉴스, 게임, 상품에 대한 호감도와 기억력이 굉장히 올라간다고 해요. 보통 기억은 그걸 쪼매줄 하나의 실을 자꾸 찾으려고 하거든요. 음악은 그 역할을 아주 제대로 해주죠. 뉴스 초반에 막 짧게 서머리해주면서 긴장감 터지는 음악을 탛탛탛!!! 하면서 넣는건 긴장감과 더불어 해당 뉴스에 대한 단기기억력을 높이기 위함이예요.. 막 이런거 나올 때 나오는 음악 두두두두누두둔두두두누두두눈 우리가 90년대 발라드를 들으며 막 추억에 잠겨버리고 아직도 핸드폰에 S.E.S 노래가 있는 건 들을 노래가 없어서가 아녜요. 음악에 얽힌 그 때의 추억을 다시 재생하는 거죠. 그리고 반복된 기억은 계속 강화됩니다. 잊혀지지 않죠. 행사를 운영하거나 오프닝영상 BGM을 선정할 때는 다른 곳에서도 들을 수 있는...그리고 그걸 들으면 지금 이 현장을 떠올릴 수 있는 곡들을 선정해주는 게 좋아요. 그리고 행사안내 리플렛 뒷면엔 행사에 삽입된 곡 리스트를 넣어주는 거죠. 막 가끔 궁금해 미치겠을 때 있잖아요. 그럴 때 보라구요. 지금 나오는 노래 뭐지?! 차..찾고 싶어!!! 시끄러워서 검색이 안된대...아.....느아...이렇게 음악과 연계된 경험은 기억으로 자리하게 되고, 후에 그 음악만 들어도 현재의 감정을 거의 온전히 되새길 수 있어요.4. 스피커는 배치가 생명아까 귀 설명할 때. 귓바퀴가 소리를 모은다고 했잖아요. 이 때 사람은 양쪽 귀에 들리는 소리의 속도차이로 수평적인 거리를 판단해요. 흔히 알고있는 서라운드 효과가 이러한 원리를 적용한 거죠. 스피커의 위치와 방향에 따라 서로 귀에 도달하는 속도가 달라서 입체감이 만들어지는 거거든요. 반면 수직적인 높이는 음의 강약으로 구별 합니다. 문제는 행사장에서 가끔 층고가 너무 낮거나 스피커가 똥이라서 하울링이 거의 우리집 화장실 같을 경우예요. 심지어 스피커 위치가 머리보다 낮으면 바닥에서도 음이 튕기고 천장에선 울리고 사람들에 부딪혀 산란됩니다. 결국 '웅웅' 으로 마무리되는 사태가 벌어져요. 이런 웅웅댐은 소리가 오는 위치나 크기를 분간하기 어려워서 굉장히 사람을 어지럽게 만들어요. 토나오죠. 두뇌입장에선 이미 롤러코스터를 오만번은 탄 듯한 느낌일 거예요. Tip1.층고가 낮은 곳은 가급적 피해요. 어쩔 수 없다면 적어도 스피커 위치는 귀의 위치 정도로 올려주세요. 에코와 리버브는 빼주시고(노래방이 아니니까)Tip2.사회자가 스피커를 막지 마세요. 사회자에 막혀 소리가 다시 뒤로 반사되요. 보통 소리는 앞에서 오는 것을 파악하는 게 더 쉽게든요. 그래서 내 목소리를 듣기 위해 모니터링 스피커가 앞쪽에 있는 거예요. 근데 모니터링 스피커까지 설치할 정도면 그래도 어느정도 규모있게 진행되는 거니까 상관이 없을 것 같아요. 하지만 진짜 영세하게 진행하는 행사에선 교회스피커 두 개 놓고 할 때도 있거든요. 이럴 땐 적어도 스피커를 사회자 양 옆으로 벌려주세요. 사회자가 내 목소리가 잘 안들리면 더 크게 말하게 되는데, 청중에겐 아주 죽을 맛이 됩니다.Tip3.뒷벽과는 적어도 30~60cm 이상 떨어뜨려놓으세요. 뒷벽에 딱 붙여놓으면 그게 벽을 타고 울려서 온 공간이 웅웅대요. Tip4.청중기준으로 스피커는 양쪽에 위치하는게 맞지만, 양쪽이 너무 벌어지면 센터포커스...그러니까 소리의 집중점이 사라져서 주변사람들은 뭐가 뭔지 하나도 들리지 않아요. 공간의 너비를 4등분해서 1/4지점, 3/4지점에 각각에 위치하는게 좋아요. Tip5.스피커간의 직선거리가 100cm라면 청중과의 거리는 110~125cm가 적당합니다.Tip6.물론 이건 2개의 스피커를 활용할 때 얘기예요. 앞뒤양옆에 모두 있는 경우라면 청음을 통해 맞춰야 합니다. 소리를 청음할 땐 가운데서만 듣지말고 각 모서리에서도 들어줘야 해요. 모서리에 있는 사람의 귀를 어택해선 안되니까요.Tip7.벽면에 있는 스피커에서 나온 소리는 벽에 부딪혀 반사된다는걸 기억해야해요.  훨씬 크게 들립니다. 벽에서 반사되는 소리를 직방에서 들으면 귀가 아주 짜릿하죠. 청중의 자리위치는 벽에서 충분히 떨어뜨려 주어야 해요.5. 배경음악과 어울리는 구성이건 영상에선 기본중에 기본이고, 행사음악에서도 마찬가지입니다. 브랜드의 컨셉과 톤을 잘 나타내주는 음악을 셋팅하는 것도 중요하지만, 각각의 음악에는 비트와 멜로디가 있어요. 딱 배경음악 드랍더빝트! 하고 시작되면서 등장하고, 절정부분에서 잠시 멈췄다가 클라이막스 때 딱 뭔가 선보여주고, 음악 정리될 때 마무리 멘트하면서 fade out 되는 이런 구성이 필요하죠.스피치와 음악이 하나로 딱 연결되면 뭔가 기가 막힙니다. 우리가 가끔 영화에서 눈물을 주륵주륵 흘리는 건 사실 그 대사보단 브금때문일 가능성이 더 높아요. https://www.youtube.com/watch?v=nEh432koJH4<iframe width="700.000000" height="394.000000" src="//www.youtube.com/embed/nEh432koJH4" frameborder="0" allowfullscreen="">애기들 보여주려다가 부모님들이 오열하고 나왔다는 짱구 어른제국의 역습의 최애명장면인 히로시의 회상 장면입니다만.......처음보는 분들은 볼륨 끄고 먼저 장면만 보세요. 이 장면에서도 음악의 클라이막스와 짱구의 출생씬이 딱 맞춰져있어요. 짱구아빠가 피곤하게 퇴근하는 부분에선 잠시 볼륨이 줄어들죠. 아빠와 짱구 짱아가 다같이 웃는 장면에서 다시 볼륨이 업되구요.음악에 스토리가 연결되면 그 효과는 그 어떤 프로그램보다 강력해져요.요즘 브랜드관련 크고작은 행사들이 많은데...참여자들이 모일 때까지 아무 배경음악도 없이 그냥 조용하고 어색한 기다림의 시간을 방치하는 곳들을 많이 봤어요. 물론 어색함과 정적도 문제지만, 그 시간이 너무 아까운 거예요. 음악으로 사람들을 사로잡을 수 있는 절호의 기회거든요. 물론 다들 핸드폰만 보고있겠지만.. 그 와중에도 음악은 계속 귀에 맴돌고 있어요. 그리고 그 정보를 통해 대략적인 행사의 톤과 컨셉을 이해하게 되죠.쓰읍..오늘 행사 뭔가 이상한데....매장도 그러해요. 들어갔는데 마음이 조급해져서 빨리 나와야 할 것 같은 브금을 틀어놓는다던가.. 조용히 일하고 싶은 카페에서 굉장히 발랄한 음악들이 계속 나온다던가...분명 클래식이긴한데 볼륨이 아주 귀가 터질 것 같다던가...강의장인데 너무 스피커가 울려서 무슨 말인지 제대로 들리지 않는다던가.. 하는 사례 말이예요.브랜딩은 분명 가치와 스토리, 본질이 중요하지만 결국 그것은 인식하고 받아들이는 곳은 신체의 오감입니다. 감각을 불편하거나 힘들게 만들면 그 기억은 쉽사리 되돌이킬 수 없어요. 청각정보 중에서도 음악은 감정과 기억에 아주 큰 영향을 미칩니다. 브랜드를 각인시키고 싶은 사람들 입장에선 절호의 찬스죠.그 찬스를 놓치지 말자구용.
조회수 1019

로고를 보고 떠오르는 것들을 적어보았다(웃자고하는)

얼마전 흥미진진한 포스팅을 페이스북에 올려보았습니다.이런글이었죠. 뭐 사실 큰 취지는 없었습니다. 어그로나 끌어볼 심산이었는데, 예상외로 너무 적극적인 반응들을 보여주셔서 그냥 넘어가기가 죄송스러워졌습니다. 그래서 오늘 마음먹고 글을 써볼 참입니다.  세상에 널리고 널려서 이젠 더 나올 것이 있나 싶은데도 꾸준히 다양한 로고들이 등장하는 것을 보면 '인간과 침팬지가 무엇이 다른가? 에 대한 질문에 '인간은 로고를 만드는 동물이다.' 라고 답하는 것이 옳다고 생각됩니다. 로고는 병신같은 것부터 기가맥힌 것까지 그 종류와 퀄리티가 굉장히 다양한데 보통 이것은 가격과 비례하는 경우가 많습니다. 하지만 우리의 돈은 우리에게 있지 아니하고 주로 집주인이나 은행 또는 다음생애에 있으므로 좋은 로고와 굉장한 작업물들은 내생을 약속하기로 합니다. 노브랜드든 로고가 없든 뭐든 간에 세상엔 제품과 서비스의 수만큼의 로고가 존재하고 있습니다. 그 중 어떤 로고들은 로고만으로도 이미 그 브랜드에 대한 여러정보들을 끄집어낼 수 있습니다. 놀라운 일이죠. 예를 들어볼까요. 이 로고를 보면 딱 뭐가 떠오르세요. 그렇죠 존나 맛있음이 떠오릅니다. CU에서 3,000원에 팔고있단 정보와 함께, 어느 편의점엔 블랑이 있더라 없더라, 맥주에 자몽에이슬 한잔을 섞으면 블랑이 된다더라..라는 둥의 각종 가십거리, 정보, 경험들이 떠오릅니다.  반면에 블랑이 프랑스를 원산지로 한다거나 1664년 같은 숫자 정보나 밀로 만들어진 맥주라거나, 유명해지기 전까진 깻잎향맥주라는 오명을 안고있었다던가 하는 정보들은 알지 못합니다. 당연하죠. 보통 로고를 인식하거나 브랜드를 인식하는 것은 '경험'에 의해서니까요.하지만 경험이 없는 상태에서라면 로고는 어떻게 인식될까요? 사실 오늘의 포스팅은 그것이 궁금해서 해본 것입니다.  보통 애플! 하면 심플!(라임을 노림), LG하면 백색가전!, 삼성하면 이재ㅇ...아니 집행유.. 아니..아니;; 스타트업 아이디어 뺏.. 뭐..어쨋든 핸드폰이 생각납니다. 하지만 전혀 모르는, 한번도 경험해보지 못한 로고라면, 결국 로고자체의 느낌을 보고 브랜드의 느낌을 결정하게 되겠죠. 그래서, 오늘은 위에 써놓았다시피 '로고'를 보고 딱 떠오르는 이미지를 정리해보려고 합니다. 대부분의 로고들은 그냥 페친님들이 속하거나 운영하고 있는 회사의 로고들이라서 사실 저도 이 로고들에 대한 경험이 전무한 상태입니다. 그렇다고 이 회사를 직접 찾아보지도 않았습니다. 사전정보가 없는 상태라야 로고를 로고로만 볼 수 있으니까요 :) 시작합니다.음..아..어벤져스다. 젊은 사람들을 위해 뭘 가르칠 것 같은 느낌디자이너가 만들었구나. 근데 뭔진 모르겠음 무슨 클래스 같음. 좋은 것을 가르칠 것 같아.고래. 고래야. 하지만 난 이 브랜드의 의미와 고래의 뜻을 이미 알고있으므로 패쓰.육각형에 원탁의 기사마냥 6명이 둘러앉아서 도란도란 무슨 얘기를 할 것 같은 회사인데. 크라우드베이..라고 읽어야하나? 프리딕션 마켓 익스체인지라고 하는데.. 여튼 뭔가 사람들이 모일것같은 곳. 근데 마지막에 Y의 아래 라인이 뭔가 거슬려....그리다 만 것같은 느낌...길이가 좀 수정되면 좋을 듯!웅진 코웨이 냉온정수기.음..아..이건 뭔가 스포츠용품 파는 곳같은 느낌인데..그냥 폰트야. 그래 딱 그냥 폰트야..근데 F에 왜 빨간색이 있는지는 잘 모르겠지만..마이페어니까..음..뭔가.............. 공평? 공정?..스포츠같은데?... F의 색깔이 조금 거슬림. 채도조정이 필요할 듯!존나..강하다....강해. 방패야. 딱 그냥 모든 것이 방패. 중세시대 크루세이더의 영혼이 고르란히 느껴지는 폰트와 강렬한 레드드래곤의 루비색 동공과 같은 풀강 레어템 졸라 아머.... 방어력수치 +5음...이건......음..................페이스북의 손가락과..파워포인트 아이콘을 합쳐놓은?....건데 파란색인느낌...뭔가 문서관련된 그런것인것같은데....음..오브제 정리가 좀 필요한 느낌!! 이미지상으로 세마치장단의 덩기덕쿵덕에 트랜스오버 하우스믹스가 들어갔는데 피메일 보컬이 정인인 느낌?...뭔가... 음..뭔지 이것도 잘 모르겠어. 메이아일랜드 이름은 이쁜데.. 뭔가 항해느낌..근데 뭐하는 곳인진 아직 확 와닿진않음..폰트의 자간들을 좀 조정하면 좋을 듯!... 중간에 나침반은 좋아보이긴하는데.. 미디어나 굿즈에 쓰기에는 좀 무리수가 있는듯. 특히 북쪽에 M이 뭔가 거슬린달까.. 그 조각케익위에 못먹는 종이 있는 것 같은 느낌음..졸라 강렬해. 미래적이야. 2098년정도의 자동차회사의 느낌이야. 하늘을 날아다니는 TX-45를 개발해서 제5원소의 루리를 태우고는 시속560km로 서울부산을 45분안에 찍을 것 같은 그런 느낌..자동차에선 마찬가지로 풀볼륨업 스키드로우의 youth gone wild가 1.3배속으로 흘러나올 것 같이 강렬해.  이것저것 신경쓴것같음. 근데 전체적으로...내용에 대한 함의가 좀 들어가면 더욱 좋을 듯..음.... 뭔가 놀이를 하는 곳 같음. 하지만 난 팀버튼이 뭐하는 곳인지 이미 알고있지... 그래서 왜 저런 로고가 되었는지도 얼추 알 것 같아. 근데 색조합이 뭔가 조금 색 충돌이 있는 느낌, 채도조정이 조금 이루어지면 좋을 듯. 전반적으로 곡선과 볼드, 베이스라인도 조금 조정하면 이뻐질 듯! 지금은 스마일 입의 인디고가 너무 확 튀어서 나머지 선들을 짤라먹는 느낌이 다소 있음..  이미 알고있는 곳임.. 파란색이 매우 예쁘고 이쁜 파란색을 썼음. 다만 다른 색과 조합하기 힘든 색감이라서 흰색배경만 쓰길 추천.뭔가 뭐라고 해야할지.. 일단 매트릭스9인데....네모...매트릭스 ...9... 뭔진 모르겠음. AR업체라고 하셨는데 조금 더 의미가 추가되는 무언가가 있었음 좋겠음. 아직 너무 추상적이랄까.  디자인은 전체적으로 재수정해야 할 듯. 업체이름이 나름 의미가 담길 수 있는 느낌이라서...뭔가 잘하면 이쁜게 나올 것 같음. 하다못해..매트릭스가 항렬, 격자란 의미라면 3x3해서 9랑 연결시켜도 좋을 듯.음..이건.. 뭔가 교육이나 교육기획하는 곳같아. 이러닝같은건가?... 이 브레인이라고 했으니 그런거겠지?.. 옆에 네모 있는건..뭔가 연계교육같은걸 의미하나봐.강렬해. 까매. 굵어. 영어연수. 한국에서 한대. 궁금하긴 하네.... 지하철에서 많이 본 것 같음밑에 설명이 써져있어서 좀 반칙임. 근데..뭐랄까.  까만비밀봉지에 넣고 왼쪽으로 흔들면서 집에 돌아온 초밥10p세트같은 느낌. Z공간이 너무 크고 RI 공간이 너무 비좁아서 시각정렬을 조금 시켜줘야 할 것 같아요!..... 굉장히 왼쪽으로 몰린 느낌이야. 그리고..숙박이란 걸 나타내는 무언가가 있으면 심플하게 좋을 듯!~뭔 페이인데..아마 결제시스템인가봐. 앱 화면로고같기도 하고.근데 폰트가.. 출근시간 수원서울간 광역버스같아. 꽉....차있어. 간격조정필요!~ 그리고 PAY높이와 WARA높이는..굳이 다르게 할 필욘 없을 듯. 뭔가 리듬감을 주려는 의도였던 것 같음.  그냥.. 저 폰트 어디서 많이 봤는데..뭐드라..흐음..오. 피파 온라인인줄!오..내 스타일스러운 로고긴 하지만.. 뭔진 잘 모르겠어. 디버시티? 다이버시티? 뭔가 그런건데..TEA파는 곳인가보다.테로?.... 멋진데 뭔진 모르겠음. 미래적인 걸 파는 것같아. SF영화에 나오는 '우리는 희망을 선사합니다' 라는 슬로건을 내건 세계적 로봇기업같은 느낌이야.... 이쁜 금발, 단발여자가 우리의 로봇은 안전합니다!~ 하고 홍보하고 있고, 어딘가 골목에선 윌스미스가 살고있을 듯한..여긴 분명 10명정도가 모여서 테이블에 앉아있는데 테이블은 원목일거야. 그리고 카페같은 분위기의 노출콘크리트 인테리어에 편안한 복장의 청년들이 뭔가 왁자지껄 재밌는 것을 하거나, 서로 조별로 뭔갈 하거나..뭔가 유형검사를 하거나, 아니면 철학적인 주제에 맞추어 얘기를 하다가 와!!!! 담번까지 뭘 해오셔야 해요!!~라고 할 것 같은 곳이야. 로스터스..라고 적혀있는 걸 보니 뭔갈.....볶는곳? 그런건가. 원두업체!!!(아닌가?) 뭔가 식당, 레스토랑,요식업..그런느낌인데..또는..음.. 하얀색 인테리어가 있는 카페?로고보단 포스터 폰트같은 느낌. 느낌적인 것은....음....음악 큐레이션 업체인가?엮다라는 것때문에 '두'와 '름'을 묶은 것 같아. 근데 둘이 겹쳤다면 더 찐해져야 맞을텐데..뭔가..오히려 분리된 느낌. + 폰트 여백, 라인, 곡선, 정렬, 아래 '세상을 엮다' 등... 전반적으로 1차시안느낌. 위는 곡선인데 아래는 직선이고, 곡선과 직선라인이 부자연스럽게 섞인 ㅜ 부분, 그리고 'ㄹ'과'ㅁ'의 간격과 정렬도 다름....전체적으로 조금 재수정이 필요할 듯!컴터키면 젤 먼저 나오는 거다. 부팅 시 시작을 해제할까말까 고민된다는...ㅋㅋㅋㅋ둠칫둠칫, 왠지 폰트만으로도 밤을 샌것같은 느낌...근처 편의점에서 딸기우유랑 컵라면 먹어야 할 것 같음. 담날 오후4시까지 자야할 것 같아..데이터...베이스?.... 그라데이션이 조금 아쉬움.  광원도 서로 달라서 조금 이질적이라고 해야할까..전체적으로 색조정이 다시 이루어져야 할듯, 폰트조정도 함꼐!!~~~ DB의 초록색이..뭘 의미하는 걸까..내 생각엔..음..이건...뭔가..기술회사야!!! 그래...뭔가 R&D를 하거나 농업관련?..그런 느낌이야!내 친구가 하는 거. 처음엔 남양유업인줄 알았음......뭔가 핀터레스트에서 본듯한 느낌인데..빨리 만든 느낌이 있음. 오브제와 폰트의 볼드차이가 심해서....엉성해보인달까.. 큐브와 제이콥의 관계가 무엇일지는 모르겠지만... 뭔가 스타트업이란 것은 알겠음.......세리프와 산세리프가 섞이면 이런느낌인가?... 매우 오묘한 조합인데... 으 뭐랄까.. 음..투자회사같은 느낌?...중역들이 까만의자에 뒤로 50도정도 이상 넘어가는 통유리 89층 사무실에서 이사진 회의할 것 같은 그런...뭔가 사야할 것 같음. 백종원도시락 같은거음.. 손으로 적었다는 것은 잘 알겠음.비가 내리는..레인인가? 로프... 화장품..내지는....음... 뭔가 개발회사같기도 하고?음... 어떤 디자이너가 만든거지?...분명 디자이너가 손댄 느낌적인 느낌이긴한데..결과적으로 잘 모르겠음. 씨앗에서 나무까지인데...파크런..이면..뭔가 공원? 환경업체인가? 근데 그러기엔 색이 뭔가 주차장같기도 하고..주차앱인가???... Seeds to tree 가 너무 붙어있음. 글자간 자간, 위아래 간격, 베이스라인... 전체 그리드.. 오브제의 결합도 뭔가 좀....좀 어떻게 하면 이뻐질 것 같은 느낌.. 지금은 뭔가 2%부족!~재밌는거 많이 하는 곳연구소다 연구소야. 딱 그냥 연구소다. 모든 것이 연구소라고 말하고 있어. 총평. 음............ 사실 로고에 뭔가 점수를 매기거나 평가를 할 수는 없습니다. 그러나..전반적으로 공통된 문제가 3가지정도가 있네요. 일단... 뭔 말인지 모르겠습니다. 가독성이나 영문으로 읽히는 것, 한글로 읽히는 것 등..가시와 가독 둘다 떨어지는 경우들이 있습니다. 보통 로고는 텍스트보단 이미지로 정보처리되기 때문에.... 가시성이 더욱 중요해요. 근데..뭔가 오브제가..좀 산만한 느낌들이 많아요. 전체적으로 그리드가 많이 어긋난?두번째는 의미를 잘 모르겠어요. 오각형, 육각형, 곡선, 똥그라미..이것저것 있는데... 그것들이 모여서 어떤 의미를 만들어내는 지..쉽게 파악하기가 힘들어요. 보통 로고는 직관적이지만 함의성도 있는 것이 보통이니 한번쯤은 물어볼 수 있습니다. 이게 무슨 의미야? 라고 물었을 때... 아 이건 이거야. 하고 한마디로 딱 설명되면 좋죠. 72세컨즈 같은 경우는 아주 직관적이예요. 이렇게보면 7이고, 저렇게보면 2이야. 72. 딱 보이는데다가 2과7의 형태적유사성을 잘 결합해서 착시현상같은 느낌의 즐거운 경험을 주는 좋은 로고예요. 의미상으론!마지막 문제는..음 뭐랄까 이건 디자이너들 눈에 보이는 건진 모르겠지만. 핀터레스트나 어디서 베낀 티가 좀 난달까?.... 또는 있는 폰트 그냥 쓰거나... 아무색이나 썼다...라는 느낌이 딱 드는 경우가 많아요. 뭔가 열심히 하다가 그냥 대충 마무리지은 느낌이랄까요. 주로 베이스라인이나 정렬선, 미세한 자간, 라운딩 등에서 그런것들이 보이죠. 세련되려고 노력은 하는데... 음?하는 경우가 ...종종 있답니다.디자이너가 만든것과 아닌 사람이 만든것과 1년차 디자이너가 만든것, 또는 대학생에게 맡긴 것, 그냥 감각만 있는 분이 만든 것의 차이가 확연하게 보인달까요. 로고는 한 번 만들 때 이쁘게 잘 만들도록 합시다 :)그리고 많이 고민하고, 많이 수정해서...예쁘고 의미도 분명하면서 눈에 확 들어오는 기막힌 아이들이 탄생하길 기원합니다!~~~슝. ㅎㅎㅎ하지만 모든 로고는 다 숭고하고 가치가 있답니다.(급한 수습)헤헤
조회수 2325

헷갈리는 UI, 스티비는 이렇게 씁니다.

어떤 버튼을 넣어드릴까요?세상에 온전하게 혼자 만든 물건은 매우 드뭅니다. (풀스택이라는 개념도 있지만) 웹서비스 역시 여러 사람의 협업으로 만듭니다. 슬로워크에서 운영하는 이메일마케팅 서비스 스티비도 예외는 아닙니다. 살짝 말씀드리면 스티비는 기획/PM 1명, 디자이너 1명, 개발자 2명이 만들고 있습니다. 큰 조직은 아니지만 소통의 틈은 늘 존재하기 마련입니다.그중 하나가 UI 용어입니다. 동상이몽이라는 말처럼 각자 웹서비스 개발을 해왔지만, 모두가 같은 상황과 맥락에서 학습한 것이 아니고, 머릿속에 그리는 이미지가 달라 사용하는 용어가 서로 다를 수 있습니다. 그리고 같은 용어를 사용하면서도 그 의미와 구현된 결과물이 다를 수 있습니다.“‘드롭다운’이 들어가야 해요”라고 요청받고 나온 결과물은 ‘버튼을 클릭하면 아래로 펼쳐지는 메뉴’일 수 있습니다. 하지만 요청한 사람이 실제로 원했던 것은 <select>일 수 있다는 것이죠. 이런 소통의 틈을 채우기 위해 우리는 장문의 기획서를 쓰고 시간과 공을 들여 프로토타이핑을 합니다. 시간과 인력 자원이 허락된다면 아주 좋은 과정입니다. 하지만 자원이 적은 스타트업 팀에게는 부담스러울 수 있습니다. 모든 것이 비용이죠. 그저 “‘드롭다운’은 아래로 펼쳐지는 메뉴이고, 옵션 선택을 위해서는 셀렉트(<select>)를 쓰자”고 미리 약속하면 많은 부분이 해결됩니다. 그래서 UI 용어 통일은 중요합니다.이런 것이 헷갈리고, 이렇게 씁니다.몇 가지 사례를 살펴보겠습니다. 서비스를 2년 가까이 만들어 오면서 헷갈렸던 용어와 서로 약속을 통해 바로 잡은 것들, 그리고 아직도 헷갈리는 것들이 섞여 있습니다. 그리고 다른 팀에서 사용하는 의미와 또는 웹표준과 다를 수 있습니다. 그저 “스티비는 이렇게 쓰는구나”하고 봐주시면 되겠습니다.1. 버튼(button)버튼은 생각보다 다양합니다사용자의 클릭을 끌어내는 버튼. 마우스와 키보드를 가지고 할 수 있는 많은 액션이 있지만 무언가를 클릭하는 것만큼 직관적이고 친숙한 UX는 없을 것입니다. 그 중심에 버튼이 있습니다. 어떤 때는 이동을, 어떤 때는 실행이나 취소를 위해 버튼을 클릭합니다.버튼의 개념과 역할은 아주 명확한 것처럼 보이지만 프론트엔드 개발자 입장에서는 때로 ‘링크’와 혼동될 때가 있습니다. 어떤 것은 로 만들어진 링크로 만들어야 하고, 어떤 것은 <button>으로, 또 어떤 때는 <input type=”submit”>처럼 하기도 합니다. 하지만 표현되는 결과물은 마우스를 올리면 색이 변하는 ‘버튼’이죠. 보통 는 페이지의 이동을 나타내고, <button>은 실행이나 취소, <input type=”submit”>은 양식의 전송을 말합니다.스티비에서는 ‘버튼’, ‘링크’, ‘링크 버튼’을 혼용해서 사용합니다. 결과물은 버튼이지만 개발자의 재량에 따라 어떤 방식으로 구현할지 정합니다. 위 용어들에 대한 추가 질문은 따로 하지 않습니다. 그리고 SPA 방식으로 개발된 탓에 실제로 구분이 명확히 되지 않는 경우가 있습니다.* 이렇게 씁니다.→ “개발자가 알아서 한다”2. 팝업(popup)과 모달(modal)pop하고 뜬다고 다 팝업은 아님다음으로 헷갈리는 것이 팝업과 모달입니다. 과거 ‘팝업’은 작은 새로운 윈도우를 띄우는 기능을 말했습니다. 최근 팝업 차단이나 모던 브라우저들의 다중탭 기능 덕분에 많이 사용하지 않는 기능이 되었습니다만 아직도 많이 사용되는 용어입니다. 그리고 모달은 비교적 최근에 등장한 개념으로 화면 위에 레이어를 덮어 마치 새로운 창이 나타나는 것처럼 보여주는 방식입니다.“이 부분은 모달로 해주시고요.”, “다음 페이지는 역시 같은 팝업에서 이동하는 것으로…”. 이처럼 초기에는 위 용어를 혼재하여 사용했습니다. 새로운 윈도우를 띄우는 상황은 없거나 매우 희박하므로 소통에 큰 문제는 없었습니다. 다만 모달은 ‘기존(부모) 페이지와 맥락을 달리하는…”이라는 함의를 가지고 있습니다. 이런 경우는 되도록 ‘모달’이라는 용어로 통일하려고 합니다.* 이렇게 씁니다. → 팝업/모달은 중에 하나를 선택하지는 않지만 열리는 상황과 맥락에 따라 용어를 구분하면 좋다. 구현은 하나의 통일된 템플릿으로 진행한다.3. 얼럿(alert)항상 경고만 하는 건 아닙니다‘얼럿’은 사용자가 무언가 잘못된 길로 갔을 때, “띵”하고 뜨는 그 경고창입니다. 과거에는 브라우저에 내장된 기본 기능을 많이 사용했지만, 디자인과 사용성을 위해 최근에는 디자인이 입혀진 레이어로 구현된 유사 얼럿이나 하단에 위치한 토스트얼럿UI 등 다양한 변형이 사용되고 있습니다. “사용자가 취소하려고 하면 이런 메시지로 경고를 해주세요”라는 요청을 받는다면 개발자는 이것을 단순히 alert()으로 처리할지 상단에 뜨는 예쁜 레이어로 띄웠다가 일정 시간이 지나면 없앨지, 하단에 커다랗게 보여줄지 고민이 됩니다. 앞서 살펴본 모달 형식의 경고도 있으니 혼란은 커집니다.대부분 서비스가 그렇겠지만 스티비는 미리 설계된 얼럿 디자인을 사용합니다. 보통의 경우 당연히 이 UI를 사용하고, 추가 액션이 필요하거나 화면의 가운데 모달 형식으로 보여줘야 할 경우라면 디자인 작업물에 명시합니다. 화면에 붉은 글씨로 보여주는 경우도 있어 이 부분은 대부분 디자인 결과물로 소통합니다.* 이렇게 씁니다.→ 디자이너가 각 상황과 맥락을 파악하며 적당한 경고 방식을 선택, 디자인 작업물에 배치하여 개발팀에 전달합니다. (디자인 결과물은 제플린으로 전달합니다)4. 드롭다운(dropdown)과 셀렉트(select)그 누르면 뭔가 아래로 스르륵 나오는 그거결과부터 말씀드리면 ‘드롭다운’과 ‘셀렉트’는 다른 UI입니다. 하지만 비슷한 역할을 하는 경우가 있어 혼용하여 사용되는 것 같습니다. ‘드롭다운’은 하위 메뉴가 숨겨져 있다가 사용자의 마우스 오버나 클릭에 숨겨진 메뉴를 보여주는 UI입니다. 셀렉트는 <select>태그로 구현되며 사용자에게 내재된 옵션값 중 하나(또는 여러 개)를 받기 위한 양식 UI입니다.예쁜 디자인을 위해 레이어로 구현된 드롭다운처럼 구현한 셀렉트도 있고, 셀렉트인데 옵션의 선택에서 그치는 것이 아니라 선택과 동시에 페이지가 이동된다든지 하는 액션을 가진 경우가 있어 혼란이 생긴 것으로 생각됩니다.* 이렇게 씁니다.→ 초기 기획 단계에서 이 둘은 명확히 구분합니다. 사용자에게 어떤 값의 입력(선택)을 요구하기 위해서는 셀렉트를 사용합니다. 이때 디자인은 변형될 수 있지만, 선택이라는 핵심 기능은 그대로 둡니다.버튼 뒤에 숨겨진 메뉴를 표현하기 위해서는 드롭다운을 사용합니다. 하위 메뉴에서 어떤 액션이 있어야 한다면 드롭다운으로 합니다. 구현은 기획에 맞추어 진행합니다.5. 인풋(input)입력하는 곳인데, 마우스 갖다데면 색 바뀌고요. 입력하는 동안은 다른 색으로…‘인풋’, ‘입력창’, ‘필드’ 등 여러 이름으로 불리웁니다. 사용자에게 텍스트 형식으로 어떤 내용을 입력받기 위한 UI로 보통은 그냥 사각형이고, 여기에 테두리(border)나 옅은 배경(background)를 주어 사용합니다.딱히 헷갈릴 일이 없긴합니다. 하지만 뭔가 용어 통일을 한다면? 아마도 ‘텍스트 입력’이나 ‘텍스트 인풋’이 적당하지 않을까 합니다. 결과물은 입력을 위한 상자이지만 구현은 보통 <input>태그로 합니다. 하지만 단순히 인풋이라고만은 할 수 없는 것이 <input type=”checkbox”>나 <input type=”radio”>, <input type=”submit”> 같은 예외가 있기 때문입니다. “인풋으로 해주세요”, “인풋 중에 뭐요?”같은 상황이 생길 수 있습니다. 그렇다고 ‘텍스트 입력’이라고 한다면 <textarea>와 혼동할 수 있습니다. 구현 과정을 생각하여 되도록 명확한 용어가 사용되는 편이 좋습니다.* 이렇게 씁니다. → 무엇을 입력할지 디테일한 전달 필요. 용어 통일은 조금 더 논의해 본다.마치며쓰임에 따라, 상황에 따라 다를 수 있는 UI 관련 용어들. 각자 편한 대로 쓰면 되지 왜 꼭 통일해야 할까요? 오히려 하나의 단어로 통일하는 순간 그 단어만 제한되는 것은 아닐까요? 개발 조직마다 다르겠지만, 스타트업이나 스타트업처럼 작고 빨라야 하는 조직에서의 팀원 사이의 이런 작은 ‘싱크’들은 매우 중요합니다. 드롭다운을 열심히 그렸는데, 실제로 필요한 건 셀렉트였다면? 이렇게 소통이 어긋났을 때 발생하는 시간과 자원의 낭비가 줄어듭니다. 세세한 UI까지 디자이너가 그리는 시간을 줄일 수 있습니다. 미리 약속된 UI(일종의 스타일 가이드)가 있다면 개발자는 상세 디자인 없이도 기존 것을 재사용하면 되기 때문입니다. UI 용어의 싱크만 잘해도 많은 시간을 절약할 수 있습니다. 그 시간에 더 많은 아이디어를 실험하고 구현해볼 수 있습니다.#슬로워크 #스티비 #UI #디자인 #디자이너 #인사이트
조회수 1204

UI, UX 그리고 디자인 프로세스

 이 글은 아무래도 실무를 진행하면서 쉽게 잊게 될 수 있는 이야기 입니다. 실무를 하고 계신분들은 다시한번 상기할 수 있는 기회를, 준비를 하시는 분들에게는 꼭 필요한 인사이트를 드리고 싶네요:)"내가 만든 서비스를 보다 쉽고 재밌게 이용자들에게 제공하고 싶다."라는건, 세상 모든 기획자, 개발자, 디자이너 분들이 다 가지고 있는 궁극적인 목표입니다. 열심히 만든 서비스가 단순히 "보기 힘들어서, 서비스 외적인 부분에 결함이 있어서" 사용하지 못하게 된다면 그것만큼 화나는 경험이 없겠죠. 그런 의미에서 UI/UX는 서비스의 얼굴을 만드는 과정이기 때문에 엄청나게 중요한 역할을 차지합니다. 굳이 서비스를 제작하시는 분들이 아니더라도, UI, UX에 대한 이야기들은 많이들 들으셨을 텐데요, 두단어가 비슷하게 보일 수는 있지만, 기본적으로 UI와 UX는 큰 차이가 있는 단어라고 생각합니다. 1. UX (User Experience) 직역하자면 사용자 경험이고, 이용자가 재화나 서비스 등을 사용할 때 생기는 신체적 반응이나 심리적 기호도(또는 선호도), 그리고 상징적 상호적인 사회적 기준 등을 수집하고, 이에 대한 조사와 연구 등을 통해 "이용자가 더 맘에  들어할 수 있는 재화 또는 서비스."를 설계하는 큰  과정입니다. UX는 개발자 중심이 아닌 사용자 중심의 컴퓨터 시스템을 구축하기 위한 제록스사의 연구 중 HCI(Human Computer Interection) 연구에서 처음 사용된 개념이며, 처음엔 하드웨어에 집중된 연구였다고 합니다.  현재는 UX라는 개념이 컴퓨터와 관련된  것뿐만 아니라 모든 산업을 통해 제공되는 재화와 서비스 전반적인 사회의 흐름이나 문화에 이르기까지 널리 응용되고 있고, 이를 연구하기 위하여는 다방면의 관점과 지식, 시야를 가지고 접근해나가야 합니다. 2. UI (User Interface) UI는 아무래도 더 친숙한 개념이실 텐데요, 왜 아이폰이나 애플, 또는 샤오미 같은 전자기기 회사에 대한 이야기를 할 때 "UI가 직관적이고 혁신적이다." 이런 말 많이 들어보셨죠? 정말 간단히 설명하자면, 전자기기 또는 어플이나 웹을 사용했을 때 이용자들이 보게 되는 화면 구성을  이야기하는데요, 이용자들이 선호하는 구성, 배치, 콘텐츠 등을 UX 조사를 통해 분석하고, 조율하여 보다 직관적이고 빠르게 서비스를 이용할 수 있도록 하는 개념입니다.  보시다시피 UI는 사용자의 경험을 기반으로 하여 어느 위치에 어느 기능이 담긴 어떤 기호 또는 인포그래픽을 그리고 어떤 콘텐츠를 기입함에 따라 보다 쉽게 이용자들의 생산성을 향상 시키는 분야라고 할 수 있습니다.(자세한 이야기는 여기, 와 여기를 참조하세요!) 설명에서  보시다시피 UX가 UI의 개념을 포괄하는 것을 보실 수 있죠, 그렇다면 UX, 또는 UI 정보는 어떻게 얻을 수 있을까요? 기본적으로 여러분들이 초보 디자이너 또는 기획자 시라면, 성공적으로 돌아가고 있는 서비스들이나, 다양한 UI 제작 회사나, UX 에이전시들의 제작 리뷰, 리서치 결과 등을 벤치마칭 하는 것으로 디자인 프로세스를 시작들 하시곤 하죠. 물론 검증이 된 서비스의 틀을 사용하는 것은 기존 이용자들의 편의성을 이끌어 낼 수 있기 때문에 굉장히 효율적인 방법이라고 생각합니다. "이용자의 경험에  기반한다."라는 약속을 100% 지킨 제작 방법이니깐요. 그러나 유명한, 또는 큰 서비스들의 심미성이나, 배치만을 보고 그대로 따라 하는 디자인은 절대로 옳지 않은 판단이라고 생각합니다. 아이디어의 유용에도 이유가 있어야 합니다. 출처: http://austinkleon.com/steal/ 저는 디자이너는 아니지만 재화 또는 서비스를 기획하고 디자인하시는 분이라면, 자신이 제작한 디자인, 또는 목업작업에 내재된 인사이트를 정확하게 설명을 할 수 있어야 하고, 이를 위해 스스로 리서치에 대한 결과를 분석하고 판단할 수 있어야 한다고 생각합니다. 예를 들면, 서울시 지하철 바닥에 붙인 동그라미 스티커나 버스 정류장에 붙여 있는 빨간색 스티커를 보신 적이 있으신가요? 출처: http://news.sbs.co.kr/news/endPage.do?news_id=N1003310218출처: http://www.lgchallengers.com/career/young1829/20130118_inter/  경제(행동경제학) 용어로는 넛지 효과(Nudge Effect)라고 하는데요, 의연 중에 이용자의 결정에 개입하여 원하는 결과를 이끌어 내는 효과를 뜻합니다. 제가 생각하기에는 이러한 피지컬 한(또는 비져블 한) UX도 그냥 여기서 끝나는 것이 아니라, 응용을 통하여 다방면의 분야에 퍼질 수 있다고 생각합니다. "이용자의 심리적인 판단의 흐름을 읽고, 인지적 선호에 따라 이용자의 행동을 파악, 이용자에게 시각적인 제한을 줌으로써 공공이익을 유도할 수  있다."라고 개인적인 인사이트를  발전시킬 수 있는 것 이죠. 웹을  벤치마킹하는 것도 다르지 않다고 생각합니다, 분명히 같은 모양, 같은 색, 같은 배열로 서비스 디자인을 할 수 있지만, 개인의 연구와 조사를 통해 인사이트를 발전시켜 나감에 따라 정당한 디자인 프로세스를 진행하고, 인사이트를 기반으로 익숙한 UX에 새로운 UX를 적용하는 것이 가장 바람직하다고 생각합니다.#코인원 #블록체인 #기술기업 #암호화폐 #스타트업인사이트
조회수 1732

본질을 추구하는 그녀, 잔디 UI/UX 디자이너 Sophie를 만나다

본질을 추구하는 그녀, 잔디 UI/UX 디자이너 Sophie를 만나다 편집자 주: 잔디와 함께 하고 있는 멤버는 총 52명. 국적, 학력, 경험이 모두 다른 이들이 어떤 스토리를 갖고 잔디에 합류했는지, 무슨 일을 하고 있는지 궁금해하는 분들이 많습니다. 잔디 블로그에서는 이 궁금증을 해결해 드리고자 ‘맛있는 인터뷰’를 통해 ‘잔디’ 멤버들의 이야기를 다루고 있습니다.▲ 무차초를 선택한 Sophie와의 맛있는 인터뷰! 이제 시작합니다.◆ 짝짝짝! 맛있는 인터뷰 주인공으로 선택되신 것을 축하한다! 오늘을 위해 생각해 놓은 음식점이 있는지?날씨도 좋고.. 오늘은 멕시칸 음식을 먹어야 할 것 같은 날이다. 조금 걸어야 하지만 강남역 부근에 무차초(Muchacho)라는 멕시칸 맛집이 있다고 하니 그곳에 가보려고 한다. ◆ 멕시칸 음식을 먹어야 할 것 같은 날은 어떤 날인가?오늘처럼 날씨가 화창한 날이 그런 날이다. 이런 날에는 야외로 나가 부리토스나 퀘사디아를 먹어야 할 것 같다. ◆ 자기 소개 부탁한다반갑다. 디자인팀에서 모바일 UI/UX를 하고 있는 Sophie라고 한다. 맛있는 인터뷰 2회에 주인공인 유진님과 8회 주인공인 Diane님과 함께 일하고 있고, 잔디에 합류한지 벌써 10개월 정도 됐다. 맛있는 인터뷰의 순서가 이렇게 빨리 올 줄은 생각도 못 했다. ◆ 유진님과 특별한 인연이 깊다고 들었다학교에 다닐 당시 서로 모르는 사이였다. 하지만 같은 학교를 졸업하기도 했고, 전 직장에서 함께 일하기도 하며 남다른 친분을 쌓았다. 잔디에 합류하게 된 것도 유진님의 권유 덕분이었다. ◆ ‘잔디’에 들어오게 된 계기가 정말 궁금했다사실 타이밍이 좋았다. 전 직장에서 일이 ‘조금’ 힘들어 이직을 고민하고 있었는데, 마침 유진님이 연락을 주셨다. 에이전시에서 전체적인 기획부터 디자인까지 해야 하는 프로젝트를 맡은 적이 있었는데 유진님이 그 점을 기억하고 추천을 해주셨다. ◆ 유진님의 연락 한 통에 잔디 입사를 결심한 건가?꼭 그렇다기보단 유진님의 연락을 받은 뒤 잔디에 대해 알아보았는데 여러 조건이 마음에 들었다. 한참 성장하고 있는 회사라는 점도 마음에 들었고, 면접 절차가 유난히 까다롭다는 점도 마음에 들었다. ◆ 면접이 까다로운 것이 마음에 들었다니.. 특이한 것 같다이상하게 들릴 수 있는데 이 전 회사에서 일을 하며 괜찮은 사람을 채용하는 게 얼마나 중요한지 뼈저리게 배웠다. 사람을 쉽게 뽑다 보면 간혹 회사에 어울리지 않는 사람이 들어오기도 하고, 쉽게 떠나는 경향도 없지 않았다. 그래서 유진님이 잔디의 면접 과정이 굉장히 까다롭다며 걱정하실 때 오히려 그 부분이 잔디의 장점으로 와 닿았다. ‘사람을 굉장히 신중하게 뽑는 회사구나’ 라는 생각을 하게 됐고 직접 들어와 보니 팩트이기도 했다. 하지만 직접 면접 과정을 겪어보니 조금 힘들긴 하더라 (웃음)멋진 인재들의 열정이 깃든 업무용 메신저 ‘잔디’지금 무료로 사용해보세요! ◆ ‘잔디’로 옮긴 후, 어떤 점이 달라졌나?에이전시는 직계 구조가 명확한 편이다. 따라서 자신이 어떤 일을 해야 하는지 명확한 편이다. 반면 잔디는 자신이 해야 할 일을 스스로 찾아 하는 분위기가 강하다. “알아서, 열심히” 랄까? 처음에는 그 부분이 어색하기도 하고 어렵기도 했다. 이제는 많이 적응된 것 같다. 야근을 대하는 자세도 달라졌다. 이전 회사에서는 야근 하는 사람들의 얼굴이 퉁퉁 부어 있었다. 그런데 잔디는 모두가 열심히 야근을 한다. 억지로 하는 야근이 아니라니! 사실 처음에는 조금 충격적이기까지 했다. ◆ 쉬는 날엔 주로 무엇을 하는지?남들과 크게 다르지 않다. 집에서 쉬기도 하고 여행을 가기도 한다. 얼마 전에는 제주도 여행을 했는데 날씨도 따뜻하고 볼거리도 많아 좋았다. 과거엔 이것저것 구경하러 다니는 여행을 선호했다면 요즘은 여유 있는 여행을 하고자 노력한다. 아무래도 일을 하다 보니 쉬는 날에는 ‘힐링’이 필요한 것 같다. ▲ 마치 녹차 밭을 소유한 대지주 같다.◆ 대세로 자리 잡은 ‘힐링’을 말하는 것 같은데?음.. 최근 몇 달 간 힐링다운 힐링을 하지 못했다. 최근 이사를 했는데 엄마께서 ‘우리 집엔 디자이너가 있으니 네가 집을 잘 꾸며보렴!’하고 미션을 주는 바람에 팔자에도 없는 실내 디자인을 했었다. 인테리어 블로그나 잡지도 많이 보고, 쉬는 날에는 틈틈이 이케아(IKEA)에 찾아가 새로 이사 갈 집에 놓을 가구를 사느라 바빴다. ◆ Sophie님이 직접 꾸민 방은 어떤지 정말 궁금하다.이번에 이사하면서 이것저것 버린 게 많다. 그래서인지 이전 방에 비해 여유가 많이 생긴 느낌이다. 학생 시절 갖고 다니던 책이나 학교 과제 관련 물건들이 많아 정신없었는데 이제야 비로소 나만을 위한 휴식 공간이 생긴 것 같다. ▲ 그렇게 탄생한 Sophie의 새로운 보금자리◆ 물건 버리는 거 쉽지 않던데..맞다. 물건을 버리는 팁을 주자면 버릴 물건을 정한 뒤 ‘이걸 버려도 될까?’ 질문에 대한 답을 3초 안에 결정하면 된다. 그럼에도 불구하고 대답하기 어려운 물건이 있다면 과감하게 버려야 한다. 꼭 필요한 물건은 3초 안에 답이 나오기 마련이다. ◆ 정리 컨설턴트 같다얼마 전 ‘심플하게 산다’라는 책을 읽었는데 ’정말 필요한 것만 갖고 있으면 된다’는 구절이 와 닿았다. 빗자루를 예로 들자면, 우리에게 필요한 빗자루는 딱 한 개다. 굳이 여러 개를 가지고 있을 필요가 없다. ‘꼭 필요한 만큼만 소유하자’라고 마음먹으면 쓸모없는 것을 정리하는 게 그리 어렵지만 않더라. ◆ 심플함을 강조하는 Sophie가 생각하는 좋은 UI/UX란 무엇인가?UI/UX에서 심플함이란 정말 중요하다. 어떤 것을 계속해서 단순화하다 보면 결국 본질만 남게 된다. 본질만 남았다는 말은 다시 말하면 누가 보아도 그 의미를 쉽게 파악할 수 있다는 뜻이다. 심플함이란 결국 본질만 남기는 것이다.좋은 UI/UX를 추구하는 것도 ‘본질’을 추구하는 것과 같다. 꽃을 표현하는 데 있어 해나 구름은 필요 없는 군더더기일 뿐이다. 그런 것들이 있으면 정작 내가 전달하려는 꽃의 의미를 제대로 전달할 수 없게 된다. 정리해서 말하면 좋은 UI/UX란 누구나 쉽게 접근할 수 있고, 쉽게 그 기능을 유추할 수 있어야 한다. ◆ 어느덧 마지막 질문 시간이 왔다. 원래 발렌타인 계획을 물었어야 하지만 시간이 꽤 지났다. 발렌타인 데이에 무엇을 했는지 알려달라평범한 발렌타인 데이었다. 영화도 보고 밥도 먹고 그렇게 시간을 보냈다. 원래 발렌타인 데이엔 여자가 남자에게 뭘 주는 날이나 내 생일이 발렌타인 데이 바로 전이라 오히려 선물을 받았다. 감사하다. ◆ 다음 인터뷰이에게 묻고 싶은 질문은?여름이 오고 있다. 당신의 여름 휴가 계획이 무엇인지 궁금하다.#토스랩 #잔디 #JANDI #디자인 #디자이너 #디자인팀 #UX디자인 #UI디자인 #팀원소개 #팀원인터뷰 #인터뷰 #기업문화 #조직문화 #사내문화
조회수 2965

Adwords로 YouTube 동영상 광고 집행 방법

출처 : 구글 이미지여러분의 브랜드 영상을 유튜브를 통해 광고를 하고 싶으신가요? 오늘 오피노의 글에서는 YouTube 동영상 광고를 Google 애드워즈 캠페인과 함께 설정하는 방법에 대해 알아 보겠습니다.사실 유튜브 영상광고는1) 유튜브 채널에서 집행하는 광고 집행2) 구글 애드워즈에서 유튜브 광고 집행의 두 가지 방법이 있습니다.하지만 성과를 파악하고, 데이터에서 인사이트를 찾고, 조금 더 정교한 리마케팅을 진행하기 위해서는 단순히 그냥 유튜브 광고를 집행한다 할지라도 구글 애드워즈의 계정과 함께 연결하여 사용하여야 의미있는 성과를 창출해내실 수 있습니다.# 1 : 애드워즈 캠페인 설정 여러분이 여러분의 비즈니스의 잠재 고객을 파악하고 이 잠재 고객에게 가치있는 브랜드 영상을 만들어 애드워즈에서 광고를 집행하면 여러분의 YouTube 채널의 성장까지 함께 도울 수 있습니다. 순전히 광고를 기반으로 한 YouTube 채널 제작은 효과가 없지만 고품질 콘텐츠를 제공하고 광고가 적합한 잠재 고객을 타겟팅하는 경우 애드워즈 캠페인은 채널에 부가적인 유기적 도달율을 부여하고 자연히 브랜드 인지도 성장을 촉진 할 수 있습니다. 당연히 애드워즈 계정이 필요하겠지요. 가지고 있지 않으신 분들이라면 바로 구글애드워즈를 검색창에 검색하셔서 계정을 만드세요!그런 다음 애드워즈 계정을 YouTube 채널에 연결하세요. 도구 -> 결제 및 설정 아이콘 (몽키스패너 모양)을 클릭하고 연결된 계정을 선택한 다음 YouTube를 클릭하세요. 그런 다음 아래 이미지처럼 따라해보세요 :)애드워즈 계정의 기본 설정을 완료하면 애드워즈에서 새 캠페인을 만들 준비가 된 것입니다. 왼쪽 열에서 캠페인을 선택하시고, 파란색 원의 + 기호 아이콘을 클릭하고 나타나는 메뉴에서 새 캠페인을 선택하시면 됩니다. 아마 GDN 광고를 집행해본 경험이 있으신 분들은 익숙하실 것입니다 !표시되는 캠페인 유형 화면에서 동영상 옵션을 선택합니다. 그런 다음 애드워즈 캠페인에 대한 두 가지 목표 중 하나를 선택하거나 따로 목표없이 캠페인을 만들 수 있습니다. 1) 브랜드 인지도 및 도달 범위 : 브랜드 인지도 및 도달 범위를 선택하면 소액의 광고가 많은 사람들에게 도달 할 수 있지만 검색 결과에는 나타나지 않습니다. 이 목표는 새로운 시청자와 구독자에게 자신의 채널과 콘텐츠를 알리려는 크리에이터 분들에게 좋습니다. 2) 제품 및 브랜드 고려 사항 :이 목표를 사용하면 사람들이 제품을 조사하거나 쇼핑하면서 YouTube 검색 결과에 광고가 게재됩니다. 이 목표는 가능한 소비자에게 제품, 도구 또는 서비스를 홍보하기 위해 권장됩니다.다음 화면에서 캠페인의 예산 및 기타 세부 정보를 설정합니다. 먼저 캠페인에 여러분이 알아볼 수 있는 캠페인 이름을 지정하세요. 그런 다음 일일 예산을 설정하세요. 좋은 시작 예산은 하루에 1만원입니다. 표준 게재 방법 (기본적으로 선택됨)은 광고가 하루 종일 게재되도록합니다. 공격적인 게재 방법은 당초 예산의 대부분을 사용합니다.네트워크 영역에서 광고가 관련없는 웹 사이트에 게재되지 않도록 디스플레이 네트워크에서 동영상 파트너 확인란을 선택 취소합니다. YouTube에서 YouTube 동영상을 홍보하려고하므로 YouTube 검색에서만 광고를 게재하고 싶기 때문입니다.참고 : Google 디스플레이 네트워크에 광고를 게재하지 않으려는 경우 의도적으로 캠페인에 대한 하나의 입찰 전략으로 만 제한됩니다. 그 입찰전략이 바로 최대 조회 당 비용 (CPV)입니다. 다른 입찰 전략 옵션은 Google 디스플레이 네트워크에 광고를 게재하는 경우에만 사용할 수있는 최대 CPM (1,000 회 노출 당 비용)입니다. 동영상 크리에이터들은 조회수가 아닌 노출 수에 집중하고자합니다. 이렇게하면 새로운 시청자가 가장 많이 찾는 위치와 시간에 광고가 노출됩니다.언어, 위치 및 기기 설정은 광고 캠페인의 잠재 고객을 좁히는 데 도움이됩니다. 이 캠페인에서 광고 그룹을 만들면 잠재 고객 인구 통계 및 관심 분야에 대한 추가 옵션이 표시됩니다. 언어의 경우 잠재 고객이 주로 영어를 사용하는 경우 영어를 사용하는 사용자만 타겟팅 할 수 있지만 YouTube 동영상이 여러 언어로 인기 있거나 동영상에 자막이있는 경우 여러 언어를 선택하여 더 많은 사람들에게 다가갈 수 있습니다.위치 설정을 통해 잠재 고객의 위치를 조정할 수 있습니다. 예를 들어 동영상 블로그에 미국 기반 잠재 고객이있는 경우 미국 거주자 만 타겟팅하세요. 그러나 위치 타겟팅을 단일 국가보다 넓게 또는 좁게 만들 수 있습니다. 필요한 경우 국가 또는 위치를 제외 할 수도 있습니다. 일반적으로 여러분의 잠재고객들이 구사하는 언어가 사용되는 대상 국가를 말하는 것이지요.기기 설정은 광고가 iOS 기기하고만 관련된 경우 유용합니다. 그러나 기기 타겟팅은 거의 도움이되지 않으므로 그렇게해야하는 이유가 확실한 경우가 아니면 기기를 따로 지정하지 마세요. iOS 관련 동영상을 제작하더라도 iOS 관련 동영상에 관심이있는 사용자는 누구인지 알 수 없습니다. 게재 빈도 설정을 사용하면 개별 사용자가 광고를 보는 횟수를 제한 할 수 있습니다. 조회수뿐만 아니라 노출 수를 제한 할 수 있습니다. 인스트림 게재 위치 광고의 경우 조회수를 조정합니다. 검색 게재 위치 광고의 경우 노출 수를 제한하는게 좋습니다. 애드워즈는 광고가 게재 될 때마다 노출 수를 표시합니다. 애드워즈에서 게재 빈도 설정을 위해 조회수를 계산하려면 사용자가 광고에 참여하거나 30 초 이상 (또는 30 초 미만의 전체 동영상) 시청해야합니다. 예산을 최대화하려면 노출 수를 일일 2 회로 제한하는 것이 좋습니다. (주당 5 ~ 10 회로 제한). 우리가 의도하는 광고 캠페인의 목적에 따라 게재 빈도 설정 전략은 달라질 수 있겠지요.콘텐츠 제외 기능을 사용하면 민감한 콘텐츠 및 콘텐츠 유형을 필터링하여 기본 콘텐츠 필터보다 약간 더 나은 잠재 고객을 확보 할 수 있습니다. YouTube의 표준 필터는 효과가 있지만 옵션을 조정하면 관련성없는 카테고리의 웹 사이트, 동영상 및 모바일 앱에 동영상 광고를 게재하지 않아도됩니다. 아래 그림의 설정을 사용하면 필터의 수준이 강해집니다. 그러나 DL-MA 디지털 콘텐츠 레이블을 사용하면 콘텐츠가 성숙한 경우 (예 : 다큐멘터리) 광고가 표시됩니다. 콘텐츠에 라벨이 지정되지 않은 경우 광고를 게재하면 도움이됩니다. 실시간 스트리밍 비디오 및 게임 확인란을 선택하면 사람들이 라이브 스트리밍이나 게임을 시청하는 동안 광고에 참여하지않기 때문에 유용합니다.광고 일정 설정은 균등하게 순환 게재 (예산을 빠르게 사용하지 않음)하거나보기에 최적화 할 수 있습니다. 특정 시간 프레임이 시청자에게 가장 잘 작동하는 것으로 알고있는 경우 광고를 게재 할 특정 시간 또는 요일을 설정하세요. 예를 들어 유튜브 애널리틱스로 여러분의 유튜브 채널을 분석할 때, 주말 조회수가 더 많고 월요일에 조회수가 더 많지 않으면 월요일보다 주말에 동영상을 더 자주 홍보 할 수 있습니다. 캠페인 설정이 완료되면 다음 단계는 캠페인 내에 광고 그룹을 설정하는 것입니다.# 2 : 캠페인 내 광고 그룹 구성하기하나의 애드워즈 캠페인에서 여러 개의 광고 그룹을 만들 수 있습니다. 광고 그룹에는 광고를 통해 홍보하려는 여러 YouTube 동영상이 포함될 수 있겠지요. 제가 설명하고 있는 전략들을 이해하고 YouTube 동영상을 홍보하는 광고 그룹 설정을 선택하면 전반적인 캠페인과 관련하여 광고 그룹을 구성하는 방법을 이해하는 것이 도움이될 것입니다. 각 광고 그룹이 동일한 키워드 또는 YouTube 콘텐츠 (특정 YouTube 채널 또는 동영상에 광고를 게재하므로 게재 위치라고 함)를 타겟팅해야합니다. 타겟팅은 특정 키워드를 검색하는 사람들이나 특정 YouTube 채널을 보는 사람들과 같이 동영상을 보는 사람을 결정합니다. 또한 그룹의 모든 동영상은 인스트림 광고 유형이나 검색광고 유형 중 하나를 사용합니다. 다양한 광고 유형에 따라 광고가 YouTube에 게재되는 위치가 결정됩니다. 인스트림 광고는 사용자가보고 싶어하는 YouTube 동영상보다 먼저 표시되지만 검색 광고는 시청자가 시청하는 모든 동영상과 함께 검색결과로써 표시가 될 수 있습니다.우리 브랜드가 두 가지 언어를 사용하고 있는 비즈니스 채널 (헝가리어 및 영어)이 있고, 이 전략에 대한 캠페인 및 광고 그룹 구조를 구성하려고 한다고 가정해보겠습니다. 헝가리 및 영어로 동영상을 게시하고 언어에 따라 해당 동영상에 대한 캠페인을 분리하세요. 각 캠페인에 대해 광고 유형 및 타겟팅을 기반으로 광고 그룹을 만듭니다. 즉, 각 캠페인에 대해 다음 광고 그룹을 포함시켜야합니다. 검색 게재 위치 검색 키워드 인스트림 게재 위치 인스트림 키워드 그런 다음 모든 광고 그룹에서 두 가지 유형의 동영상 광고 크리에이티브를 추가하세요.이 구조를 사용하면 각 캠페인의 예산을 최대화 할 수 있습니다. 각 캠페인의 광고는 서로 경쟁하며 가장 성공적이고 관련성이 가장 높은 광고에 예산이 소진됩니다. 영상광고는 굉장히 엄청난 기능이 있는데, 예를 들어 잠재 고객이 인스트림 광고를 볼 때 지불해야하지만 사용자가 광고를 건너 뛰기(Skip)로 선택하면 비용을 지불하지 않습니다. 마찬가지로 검색 광고의 경우 사용자가 클릭하여 광고를 보는 경우에만 비용을 지불하게됩니다. 이 구조의 또 다른 장점은 검색 광고에 대한 적절한 타겟팅을 수행 한 후 인스트림 광고를 쉽게 삭제할 수 있다는 것입니다.인스트림 광고는 조회수를 높이고 특히 게재 위치 타겟팅을 통해 투자 수익을 높일 수 있습니다. 하지만 검색 광고의 조회율은 훨씬 높습니다. 타겟팅이 제대로 완료되면 인스트림 광고는 대부분 시청자가 싫어하므로 이탈 할 수 있습니다. 잘 배치 된 디스커버리 광고는 고객들을 끌어당기는 자석같은 효과가 있지요. 사용자는 제목과 미리보기 이미지가 흥미로운 경우 적극적으로 클릭합니다. 광고를 검색 광고로 전환하는 이 기능을 사용하면 많은 이점을 얻을 수 있습니다. 좋은 조회율을 제공하고 YouTube 채널을 구독할 가능성이 더 큰 관심있는 시청자만 유도 할 수 있습니다. 그렇게함으로써 시청자와 진정한 관계를 구축하게됩니다.# 3 : 캠페인에 대한 각 광고 그룹 만들기캠페인에서 첫 번째 광고 그룹을 만들려면 캠페인 세부 정보 바로 아래 광고 그룹 만들기 영역으로 스크하세요. 알아볼 수 있게 그룹 이름을 설정하시고,  입찰가 영역에서 최대 CPV 입찰가와 인기 동영상 조정을 추가합니다.최대 CPV 입찰가는 잠재 고객이 광고를 클릭 할 때 지불하고자하는 최고 가격입니다. 예를 들어 최대 조회 당 0.10 달러 인 경우 최대 CPV 입찰가 입력란에 값을 입력하십시오. 그런 다음 한 달 동안 1,000 명이 동영상을 통해 광고를 보게되면 캠페인의 예산 중 2/3를 지출하게됩니다 (하루에 5 달러 또는 1 개월에 150 달러 정도기준으로). 인기있는 동영상에 대한 입찰가를 조정하면 YouTube에서 가장 인기있는 동영상이나 채널에 동영상 광고가 게재 될 확률이 높아집니다. 최대 CPV 입찰가의 비율로 입찰가 조정을 입력하십시오. 따라서 최대 CPV 입찰가가 0.10 달러이고 인기있는 동영상에 대한 입찰가 조정이 10 % 인 경우 광고가 상위 YouTube 콘텐츠에 표시되고 다른 사용자가 광고를 클릭하면 $ 0.11을 지불하게됩니다. 애드워즈의 인구 통계 영역에서는 성별, 연령, 자녀 유무 및 소득별로 잠재 고객을 정의 할 수 있습니다.잠재 고객에게 도달하는 데 도움이되는 인구 통계학적 타겟팅 설정을 확인하려면 YouTube 채널 애널리틱스를 확인하세요. 동영상마다 가장 적합한 옵션은 당연히 콘텐츠에 따라 다릅니다. 기본적으로 모든 인구통계학적 타겟팅 옵션이 선택되어 있습니다. 잠재 고객에 대한 지식과 상호작용을 토대로 주제에 대해 장기적인 관심을 갖고 있거나 주제를 연구중인 YouTube 사용자를 타겟팅 할 수 있습니다. 맞춤 동일 관심 분야 잠재 고객을 타겟팅 할 수도 있습니다. 귀하의 동영상에 대한 인지도를 높이려면 여러분의 첫 번째 광고 배치 옵션에 중점을 둡니다. 맞춤 동일 관심 분야 잠재 고객은 특히 유용할 수 있습니다. 예를 들어, 채널이 기술에 관심이있는 사람들에게 호소하는 경우 기술 및 미디어 및 엔터테인먼트 및 라이프 스타일 및 취미와 같은 관련 옵션을 선택할 수 있습니다. 적절한 방법으로 컴퓨터 및 주변 장치에 관심이있는 구매 의도 잠재 고객을 선택하세요.(GDN을 집행하는 방식과 유사합니다.)광고 타겟팅을 더욱 세분화하기 위해 키워드, 주제 또는 게재 위치 (YouTube 채널 또는 동영상)를 사용할 수 있습니다. 애드워즈로 동영상을 홍보하기 시작하면이 세 가지 중 하나를 선택하십시오. 둘 이상의 방법을 사용하여 잠재 고객을 타겟팅하면 잠재 고객을 너무 많이 좁혀져 광고비 소진이 안될 수도 있으니 항상 주의하시길 바랍니다 !게재 위치 타겟팅은 동영상 광고를 특정 YouTube 채널이나 동영상으로 타겟팅 할 수 있기 때문에 매우 유용합니다. 예를 들어 Gary Vaynerchuk 동영상을 시청중인 사람들을 타겟팅하려면 전체 채널을 타겟팅하면됩니다. 실제로 광고시장에서 굉장히 강력한 기능이라고 평가받고 있습니다.# 4 : 동영상용 광고 만들기캠페인 및 광고 그룹 기준을 설정하면 홍보하려는 동영상을 추가 할 수 있습니다. 광고를 작성할 때 각 광고는 애드워즈 광고 정책을 준수해야합니다. 첫 번째 광고를 만들려면 광고를 만들 수있는 영역까지 아래로 스크롤하세요. 링크를 YouTube 동영상에 붙여넣고 인스트림 또는 검색 광고 유형을 선택하세요. 범퍼 광고 유형은 다음에 따로 설명드릴 예정입니다. 광고에 자동으로 생성되는 사진을 선택하세요. 옵션 중 하나는 동영상 용으로 디자인한 미리보기 이미지입니다. 다음으로 광고 제목과 설명을 추가하세요. 세부 정보를 입력하면 모바일 버전과 데스크톱 버전간에 전환되는 광고 미리보기가 오른쪽에 표시됩니다. 광고의 기본 방문 페이지는 선택한 상태로 유지하려는 동영상의보기 페이지입니다. 마지막으로 광고 이름을 지정하시면 모든 과정이 끝이납니다.첫 번째 광고 설정이 끝나면 계속해서 광고 그룹을 만들고 각 그룹에 동영상을 추가 할 수 있습니다. 그룹을 만들려면 애드워즈 대시 보드에서 캠페인을 연 다음 파란색 더하기 기호를 클릭하세요. 그룹 내에 새 광고를 만들려면 그룹을 열고 파란색 + 기호를 클릭하여 광고 작성 옵션을 표시하세요.# 5 : 애드워즈 애널리틱스를 통해 동영상 광고 실적을 평가할 수있는 주요 통계이 기사 앞부분에서 언급했듯이 타겟팅이 올바른 경우 최상의 결과를 얻을 수 있습니다. 광고 실적을 모니터링하려면 애드워즈 대시 보드에서 광고 분석을 확인하고 다음 사항에 특히 주의하셔야합니다.조회수 조회율 비율 75 %까지보기 속도 시청 시간 참여 (좋아요 및 댓글) 또한 광고 그룹 설정에서 중복 키워드를 찾아보세요. 마지막으로 동영상 콘텐츠를 확인하시고, 동영상이 처음 10 초 이내에 사람들의 시선을 사로 잡도록하고 시청자가 내 동영상을 좋아하거나 구독하도록 장려하는 등 행동을 촉구하도록 유도하는 장치가 필요합니다.결론 YouTube 잠재 고객에게 우수한 콘텐츠를 만들기 위해 투자 한 후 애드워즈를 사용하여 YouTube 동영상을 홍보하면 플랫폼에서의 인지도를 높이고 채널 성장을 도울 수 있습니다. 광고가 여러분의 동영상에 제공하는 가시성은 여러분의 컨텐츠의 유기적 도달에 힘을 실어줍니다. 또한 이 글에 실려있는 다양한 전략론들을 사용하면 필요한 모든 옵션을 포함하는 캠페인을 구성 할 수 있습니다. 또한 이 조직은 광고 실적을 기반으로 캠페인을 모니터링하고 조정하는 데 도움이됩니다. 초기 애드워즈 캠페인을 실행 한 후에도 캠페인에 리마케팅 광고를 포함해야합니다. 어떻게 생각하시나요? 애드워즈로 YouTube 동영상을 홍보해 보세요! 애드워즈에서 동영상 홍보를 시도했다면 어떤 기술이 효과가 생길지 생각해 봅시다 :)퍼포먼스 마케팅 에이전시, 오피노 바로가기
조회수 5782

[디자인] 웹 디자이너의 끝내주는 자소서 쓰기

안녕하세요. 프리모아입니다. 예전에 소프트웨어 개발자들을 위한 죽여주는 이력서 쓰기라는 컨텐츠로 글을 썼었는데요. 그 때 답글로 '웹디자이너를 위한 이력서 쓰는 방법' 도 알려주라는 말이 있었습니다. 그래서 오늘은 웹 디자이너를 포함한 디자이너 종사자 분들을 위한 이력관리와 자기소개서를 쓰는법을 알려드리고자 글을 씁니다. 웹 디자이너 신입은 왜 초봉이 낮을까요? 전문 기술직인 반면에 웹디자이너 신입 초봉이 2,000도 못 받는 곳이 수두룩 할 정도로 웹디자이너 시장은 임금기준이 낮습니다. 그 이유 중의 하나가 웹디자이너 학원으로 인한 시장 포화상태 때문입니다. 웹디자인 학원에서는 전공과 무관하게 3개월 속성으로 가르치고 웹디자이너 지망생을 찍어내다 시피 하다보니 매년 웹디자이너 지원자가 넘쳐나게 됩니다.요점은 시장 '회귀성' 입니다. 나를 대체 할 수 없는 웹디자이너로 포장을 하는 것이 첫 번째 입니다. 그리고 회귀성을 만들기 위해서는 관점을 바꿔야 합니다.웹 디자이너의 실무능력은 디자인이 아닐 수도 있습니다. 물론 웹디자이너의 가장 핵심적인 실무 스킬은 디자인 시안을 뽑는 능력과 디자인툴을 얼마나 완숙도 있게 다루느냐 입니다. 하지만 대부분 포토샵, 일러스트레이터, 에프터이펙트와 같은 툴을 어느 정도 다루고, 이력서에는 중, 상급이라고 쓰지 하급 이라고 쓰는 사람은 없습니다. 그러면 회사 입장에서는 지원자들을 평가할때 이러한 디자인 툴로 인한 기술적인 차이는 사실 큰 차이가 안난다고 볼 수 있습니다.때문에 관점을 바꿔서 디자인에 기획적인 부분을 넣어야 합니다. 기획서를 쓰라는게 아니라 디자인 과정에 기획적인 의도와 역량이 들어간다는 걸 보여줘야 하는 것이지요. 웹사이트의 그래픽적 요소에 대한 이유와 의도, 의도자의 컨셉을 어떻게 해석하였는지 등을 보여주는게 채용 담당자에게는 매력적으로 보일 수가 있지요.디자인 툴이 아닌 다른 활용 도구들과 벤치마킹 사이트를 보여줘야 합니다. 포토샵이나 일러스트레이터 같은 디자인 툴 외에 인포그래픽 툴 또는 사이트를 활용해 포트폴리오를 만들고 이를 어필하는 것도 좋습니다. 예를 들어 Piktochart 같은 경우도 자기소개서를 PPT로 만들 때 시각적인 퀄리티를 높여주는 요소가 됩니다. 또한 웹디자이너 실무자들이 벤치마킹을 위해 많이 사용하는 Behance, Awwwards와 같은 디자이너 포트폴리오 사이트를 최대한 활용하는게 좋습니다. 위 사이트에 작업물 또는 포트폴리오를 올리고 링크를 걸어두면 궂이 얘기를 안해도 해당사이트를 활용하는걸 보여줄 수 있고, 디자이너의 트렌드를 읽는 감각적인 눈을 은연 중에 어필할 수 있지요. 웹디자이너에게 중요한 것은 포트폴리오 > 활용 툴 능력 > 경력 의 중요도 순입니다. 디자인 계통의 특성상 경력이 높다고 디자인을 잘하는 것은 아닙니다. 색채나 레이아웃 등 감각적으로 타고난 사람들이 어쩔때는 경력자들보다 뛰어나기도 합니다. 때문에 경력자들은 경력을 무작정 어필하는 것보다 시각적으로 내가 어떤 유형과 분위기의 디자인을 구사하는 웹디자이너 인지를 보여줄 필요가 있습니다.쉽게 얘기하면 공기업과 프로젝트를 많이 해본 웹 디자이너와 벤처나 스타트업의 프로젝트를 많이 해본 웹 디자이너 각각 웹 디자인 분위기가 다르다고 느껴집니다. 때문에 포트폴리오를 제작할 때 컨셉별로 또는 작업물 분류 카테고리를 적용하여 구성을 하고 지원하는 회사의 성향에 맞춰 카테고리를 재구성해 지원 하는 것도 전략이라고 볼 수 있습니다. 어젯 철야작업을 하였더니 글쓰다 체력이 방전되었습니다. 때문에 경력직 웹디자이너를 위한 끝내주는 자소서는 3탄으로 찾아뵙겠습니다. 털썩..#프리모아 #자소서 #디자이너 #디자인팀 #인사이트 #경험공유 #꿀팁
조회수 1302

피드백에 대처하는 스타일쉐어 이야기

오랜만에 올리는 글입니다. 그동안 여러 차례 글쓰기를 시도했지만, 가장 글감으로 쓰고 싶었던 프로젝트가 런칭 전이라 조심스러웠습니다. 하지만 이제 런칭했으니 여러 가지 이야기를 해보고 싶습니다.스타일쉐어가 얼마 전 앱 2.0을 런칭했습니다. 길다면 길다고 할 수 있는 대략 8개월간의 시간 동안 부지런히 준비했습니다. 그러나 반응이 썩 좋지만은 않습니다. 그래서 이번엔 수많은 유저들의 피드백에 대처하는 스타일쉐어 (디자인) 팀의 이야기를 하고자 합니다.런칭 후, 가장 많이 받은 피드백은 스타일 피드1에 썸네일 뷰2를 만들어달라는 것이었습니다. 사실 가장 많은 것은 구 버전으로 돌려달라는 것입니다. 하하<meta charset="utf-8">피드백에 어떻게 대처했느냐를 이야기하기 전에 왜 넣지 않았는지에 대해 먼저 이야기할 필요가 있겠네요. 스타일 피드를 구상했을 당시 썸네일 뷰에 대한 고민이 없었던 것은 아닙니다. 썸네일뷰가 가진 이슈는 ‘썸네일 뷰를 제작한다면 디자인팀과 개발팀에서 공수를 들이게 될 텐데, 썸네일 뷰는 과연 그만한 가치가 있는가?’ 였습니다. 당시 저는 없어도 된다고 생각했습니다. 디자이너로서 부끄러운 이유이지만, 썸네일 뷰가 없어도 스타일 피드의 기능은 이용할 수 있다고 생각했기 때문이었습니다. 프로젝트를 하루라도 빨리 런칭하는 것이 더 바람직하다고 생각했던 제 생각이 반영되어 있습니다. (그렇게 생각했던 까닭은 나중에 이야기하겠습니다)썸네일 뷰의 가치에 접근하는 다른 시선도 있었습니다. 통계적 접근이었습니다. 썸네일 뷰를 사람들이 얼마나 눌러보는지 통계를 내려는 시도가 있었지만, 디자인팀의 능력으로는 의미 있는 해석을 하는 데에 한계가 있었습니다. 썸네일 뷰에 대한 적극적인 고려가 있었다면 어떤 식으로든 해석을 했겠지요. 하지만 디폴트 뷰 방식이 블로그 뷰3였고, 적극적인 고려 또한 코스트가 들어가는 일이었기 때문에 용두사미라고, 썸네일 뷰 이슈는 그렇게 묻혀졌습니다.그 이후, 썸네일 뷰가 필요하다는 유저들의 적극적인 피드백이 쏟아졌습니다. 예상 외의 부분에서 컴플레인이 발생해 당황했지만, 중요한 것은 그 피드백을 반영하느냐 안 하느냐이죠. 유저들이 갑작스러운 서비스 변화에 적응하는 부분이라고 생각하기엔 적극적인 피드백이 많았습니다. 그래서 런칭 후 첫 업데이트에 모든 팀이 썸네일 뷰를 넣기 위해 고군분투했습니다. 운영팀은 썸네일 뷰를 넣어달라는 유저들의 피드백 메일을 응대하고, 디자인팀은 썸네일 뷰를 디자인하고, 개발팀은 그것을 구현했습니다. 현재 디자인된 썸네일 뷰는 간단하지만, 꽤 많은 고민 끝에 나온 결과물입니다.<meta charset="utf-8">현재 썸네일 뷰 기능이 들어간 2.0 버전과 썸네일 뷰 기능을 지원한 예전 0.9 버전0.9 버전에선 네비게이션 바에 뷰 토글 버튼이 있었다.썸네일 뷰는 뷰 방식 토글 버튼과 썸네일 뷰 자체 두 가지를 디자인해야 했습니다. 썸네일 뷰가 서비스 자체에서 얼마나 중요한 것인지 고려하여 뷰 토글 버튼의 위치를 선정하고, 카드 베이스 방식으로 바뀐 피드에 어울리게 썸네일 뷰의 여백을 조정했습니다. 카카오 스토리라는 유사한 디자인을 가진 좋은 선례가 있어서 참고되었습니다. 저희가 내린 결론은, 썸네일 뷰는 서비스 자체에서 중요하지 않지만, 기존에 뷰 토글 기능을 이용해오던 스타일쉐어 유저에게는 사라지면 불편한 기능이라는 것이었습니다. 그러므로 기존과 같이 중요한 자리는 내주지 않았지만, 기능 자체는 사용할 수 있도록 디자인했습니다.스타일쉐어 2.0 디자인 당시 주안점은 ‘구조와 디자인이 새롭게 바뀌어야 하지만 기존 유저들이 낯설어하지 않아야 하므로 낯설지 않게 할 수 있는 부분 (=새롭게 바뀌지 않아도 되는 부분)이 있다면 최대한 그렇게 하자’는 것이었습니다. 하지만 되짚어보니, 자기만족을 위한 주장이 아니었나 싶습니다. 스타일쉐어는 갈아엎고 싶고, 유저들은 고려해야 하는데, 깊게 고민할 시간은 없으니 나온 결론이 아니었을까요? 새롭게 바뀌지 않아도 되는 부분에만 기존 디자인을 투사하는 단순한 방식이 아니라, 유저들이 스타일쉐어에서 겪은 기존의 경험에 새로운 디자인을 조심스럽게 투영했어야 했던 것은 아니었을까 하는 생각이 듭니다. 유저들이 낯설어 하는 것을 조심하자는 주안점을 두고 있었음에도 낯섦을 떠나 불편하게 하다니, 제가 정말 유저들을 고려하긴 한 것이었는지 많이 생각할 수 있는 사건이었습니다.이번 스타일쉐어 2.0에 쏟아진 적극적인 피드백을 받으며 스타일쉐어 팀은 유저들의 사용 패턴 연구에 더욱 적극적인 태도를 가지기로 했습니다. 그리고 유저들이 학습하고 적응하는 시간의 중요성을 단단히 느끼고, 이번 2.0 버전처럼 새롭게 뒤엎는 업데이트는 자제하기로 했습니다.혹시 깜짝 선물 준비해보신 적 있으신가요? 개인적으로 깜짝 이벤트, 깜짝 선물을 무척 좋아하기 때문에 받고 나서 좋아할 사람들의 반응을 기대하며 항상 성심껏 선물을 고릅니다. 이번 스타일쉐어 2.0도 저에겐 유저분들께 드리는 깜짝 선물과 같았습니다. 그래서 하루라도 빨리 런칭하는 것을 유저들을 위한 것으로 생각했습니다. 하지만 긍정적인 피드백을 받아보고 싶은 마음에 서두르기만 했을 뿐, 영리하게 준비하지 못했네요. 지나치게 적극적인 피드백이 쏟아지는 탓에 마음이 아플 때도 있지만, 비로소 제가 스타일쉐어를 제 것이라고 여길 만큼 많은 부분을 디자인했다는 사실에 뿌듯하기도 합니다. 앞으로 더욱 멋지고 사랑스럽게 스타일쉐어를 디자인하겠습니다.Style feed. 스타일쉐어 앱을 켜자마자 보이는 discover feed입니다. ↩Thumbnail view. 사진을 바둑판 배열로 볼 수 있는 뷰 방식 입니다. ↩Blog view. 페이스북처럼 게시물 형태로 사진을 보는 뷰 방식 입니다. ↩#스타일쉐어 #디자인 #디자이너 #디자인팀 #인사이트 #후기 #일지 #경험공유

기업문화 엿볼 때, 더팀스

로그인

/