더팀스 사이트는 아직 얼마 되지 않은 젊은 사이트입니다. 더 좋은 서비스를 제공하기 위해 지속적으로 익명의 사용자 경험 데이터를 축적하고 이용자의 행동 패턴과 흐름을 실시간으로 분석하면서 꾸준히 사용성 좋은 사이트로 변모 시키는데 노력하고 있습니다. 그동안 저희 팀만의 사이트 개선 방식에 대해 공유할까 합니다.설계에 대한 역사닷컴 부흥기 시절, 많은 디자이너들은 화면 레이아웃에 대한 정답을 찾아가고 있었습니다.그 당시 대중에게 보급된 대부분의 컴퓨터 최소 모니터 해상도는 압도적으로 1024x768이 많았습니다.그리고 해당 해상도를 바탕으로 화면 구성에 대한 다양한 시도들이 일어났는데, 그중 절대적인 지지를 받던 레이아웃은 바로 960 Grid System 이었습니다.*자료 화면 960.gs 사이트 내 16그리드 방식 / 12 그리드 방식960gs는 해외 디자이너 커뮤니티에서 굉장히 많은 방법과 시도를 통해 얻어낸 또 한가지의 방법이었습니다. 960 grid 패턴을 적용하면서 아래와 같은 효과를 통한 콘텐츠 배치가 가능해졌습니다.1. 1024 최소 해상도에서 모든 콘텐츠를 유저들이 보기 편하게 안정적으로 공급할 수 있다.(스크롤 바를 포함한 창 옆의 모든 여백들을 제외하면 960 픽셀 내 표현할 수 있는 폭이 나옵니다.)2. 12개 혹은 16개로 콘텐츠 비를 쪼개어 문단 단위와 콘텐츠 단위를 block화 시킬 수 있고 홈페이지의 레이아웃을 잡는데 비교적 간단하다.웹 페이지의 근원이 오프라인 문서를 웹으로 표현하는 것에 그 시초가 있다 보니 다양한 시도가 나오게 된 것 같습니다. 지금은 변모했지만, 적극적으로 Grid System을 활용하는 다양한 방식을 소개하기 위해 아래와 같은 사이트도 있었습니다.*the grid system 사이트* 12 컬럼 기준으로 작업된 국내 네이버 사이트* 16 컬럼 기준으로 작업된 국내 다음 사이트유저 사용성 패턴 960 Grid 와 함께 다양한 UX 개선에서 여러가지 시도와 기법들이 나오기 시작했는데, 그 중 두가지 패턴이 Z-layout과 F-layout입니다.Z-layout은 2010년도에 UX 개선에서 꼭 필두로 배우고 넘어가야할 사이트 개선법중 하나였습니다. 다만, 2011년 이후로 너무나 다양한 화면들이 생겨났고 (2011년 아이폰을 기점으로 다양한 디바이스 탄생) 다양한 해상도를 지원하는 부분에서 비교적 절대적이다 라는 타이틀을 얻은지 얼마안되 내려놓게 되었습니다. 최근 대부분 좋은 UX경험을 주는 사이트들은 디바이스 형태에 맞춰서 반응형으로 컨텐츠가 읽기 편하도록 그 구성을 자유롭게 변경하는 타입을 취하고 있습니다.Z-layout의 근간은 웹 사이트에 접속하여 콘텐츠를 읽는 방식에서 위의 이미지와 같은 흐름으로 시선처리를 한다는 것 입니다. 따라서 가입률을 높히거나 사이트에 무언가 액션을 더 주기 위해 아래와 같은 방식으로 개선하면 좋다고 소개하고 있었습니다.사용자의 콘텐츠를 읽어들이는 시점이 1번에서 2번으로 다시 3번에서 마지막 4번까지.따라서 1번에서 먼저 브랜드 네임을 보여주고 가입 버튼을 한번 상기 시킨 후 마지막 4번 시점 처리에서 목표를 달성할 수 있도록 구성하라는 취지 였습니다.그 다음으로 콘텐츠를 퍼블리싱 하는 사이트에서 가장 많이 보이는 F레이아웃 입니다.F레이아웃 경우 정말 많은 테스트에 의해 정론으로 굳어졌다고 볼 수 있는 레이아웃 구조 입니다. 위와 같은 경우 히트맵을 확인해 본다면, 마우스가 머무는 곳과 시각이 F형태를 띄고 있는 것을 확인 할 수 있습니다.사이트에 접속하여 콘텐츠를 (주로 글) 소비하는 유저들은 아래와 같은 방식을 따르고 있다는 데이터 분석에 의거하여 내린 결론 이었습니다. 형태의 모습이 F형태를 띈다고 하여 F-layout 이라 부르고 있습니다.대부분의 F레이아웃 페이지를 떠올린다면, 워드프레스 형태의 사이트와 기사를 발행하는 사이트들에 많이 해당 레이아웃으로 배치한 것을 떠올릴 수 있을 것 입니다. 이러한 흐름으로만 콘텐츠를 배치해도 유저가 사이트에 머무는 시간을 획기적으로 늘릴 수 있으며, 적절한 광고 배치를 통해 수익을 올릴 수도 있을 것 입니다.F 레이아웃의 창시자 Nielsen Norman Group에서는 꾸준히 왕성한 UX관련 내용을 퍼블리싱중이니 함께 확인해도 좋을 것 입니다. ( https://www.nngroup.com/reports/ )사례 적용더팀스 사이트는 이러한 두 레이아웃 방식과 지금은 다양한 해상도로 인해 잘 사용되지는 않지만 960grid의 근간으로 설계된 bootstrap 12 컬럼 방식과 히트맵을 통해서 꾸준히 사이트의 흐름과 사용성을 개선해 나가고 있습니다.더팀스 팀이 사이트를 개선하는 방식중 가장 중요하게 여기는 것 중 하나는“사용성 좋은 디자인은 항상 스토리 라인을 가지고 있다.” 입니다.아래 이미지는 제가 함께 했던 회사의 2012년 9월의 메인 페이지입니다. 그 당시 꽤 많은 비용을 주고 뉴욕 출신의 모 그래픽 디자이너에게 해당 디자인을 부탁하여 나온 안이었습니다.위의 디자인 안으로 엄청나게 마케팅도 해보고 여러가지를 시도해 보았습니다.그러면서 확실하게 알게된 것은 사이트 내 너무나 많은 것을 알리고자 하면서 흐름이 무너졌다는 것 입니다. 분명 위의 Z-layout 방식을 통하자면 [디자인 의뢰하기], [콘테스트 구경하기]가 클릭율이 높아야하고, 흐름 내에서 동영상을 클릭해서 보는 것이 맞을 겁니다.그러나 기획자의 설계와 다르게 해당 페이지에서 가장 많이 클릭 된 부분은 “로고 디자인 배너” 부분 이었습니다.기획자는 우리의 사이트는 이러한 모든 것들을 한다라는 메시지를 주면서 다양하게 어필하고 싶어했지만, 실제 사이트를 이용하는 유저들은 “너희 서비스가 어떤 일을 하는 것은 관심이 없다. 다만 우리는 우리 회사의 괜찮은 로고 디자인을 해줄 수 있는 곳을 찾고 있을 뿐이다.” 라는 고객 답변이 대다수 였습니다.덧붙여서 마케팅 집행 자체도 클릭율이 높은 로고 디자인에 치중된 유저들이 유입되도록 설계 되어있었으니 사이트에서 말하는 것과 마케팅에서 말하는 것의 맥락이 같지 않아서 ROI가 좋을 수 없었습니다.이러한 패턴을 바탕으로 2013년 2월 데이터와 유저의 행동을 바탕으로 간략하게 맥락을 압축해서 메인을 내부 디자인 팀에서 리뉴얼 했습니다.먼저 크게 우리 사이트가 뭘 하는 것이다를 텍스트로 설명하기 보다는, 먼저 대표적인 포트폴리오를 이미지로 표현하고, 유저에게 느낌을 전달하는데 초점을 맞췄습니다. 해당 리뉴얼을 통해 얻게된 이점이라면 로고디자인을 하러 왔던 고객들도 먼저 포트폴리오를 둘러보고 로고와 패키지디자인을 함께 하고 싶다는 문의가 계속해서 들어왔다는 것 입니다.메인 페이지에서 먼저 구구절절하게 텍스트로 푸는 것이 아니라, 어떠한 것을 한다는 느낌을 전달하고 그 다음 스텝에서 하나씩 그 이야기를 풀어 나가는 방식을 취했습니다. 최종적으로 너무나 많은 것을 알아보고 싶은 고객에게는 상세한 페이지를 제공하여 그 갈증을 해소 시키는 방식으로 페이지를 구성 했습니다. *애플 아이폰 4 런칭때 사이트 모습*넷플릭스 메인 카피 및 버튼들사이트에 접속하는 유저는 메인 페이지에서 정말 몇 초 내 관심을 끌어내지 못한다면, 바로 창을 닫아버리고 맙니다. 같은 맥락에서 아무리 환상적인 서비스라도 초기의 관심을 끌지 못한다면, 유저는 바로 다음페이지로 넘어갈 여지조차 주지 않습니다.따라서 메인 페이지에서는 유저에게 먼저 관심을 끌게 만들고, 액션으로 이어질 동기를 끊임없이 만들어줘서 사이트 내 숨어있는 퍼즐을 맞추도록 해야 합니다.동기까지 부여까지 성공했다면 아래의 원칙을 지켜 사이트를 구성 합니다.1. 어필하고 싶은 페이지 내 포인트를 몇개로 잡을 것인지 (정말 엄청난 매출을 내는 사이트도 포인트로 집중을 두는 버튼이나 텍스트는 많아야 1-2개 입니다.)2. 유저들은 절때 글을 읽지 않는 다는 것을 떠올리고 시각적인 단서를 꾸준히 제시할 것3. 2번 기준에 의거하여 많은 텍스트는 불필요하며, 적절한 공간에 적절한 글의 양만 부여 할 것.4. 데이터를 통한 지속적인 사이트 개선을 실시할것위의 내용을 토대로 더팀스는 초기 전략을 구성 할 때 먼저 유저가 많이 머무를 수 있도록 소비 지향성을 가진 사이트로 운영이 되었습니다.*2016년 2월 기준 초기 더팀스 메인 화면초기 사이트는 현재 아래와 같은 모습으로 변경 되었습니다.*2016년 8월 기준 더팀스 메인 화면초기 더팀스 사이트는 회원가입을 하여 무언가를 할 수 없는 구성이었습니다. 대부분 소비성 콘텐츠로 이뤄져 있었습니다. 이는 사이트 내에서 무언가 행동을 유발시키고 액션을 취할 수 있는 개발이 마련 되지는 않았으나, 유저들이 이러한 기능이 있을 경우 호응이 있을지를 먼저 시장에 내놓고 테스트 하는 것이 더 중요했습니다. 다행히 생각하는 것 이상으로 호응도가 좋았기에  지속적으로 유저의 행동패턴을 반영하여 아래와 같은 사이트 작업의 개선이 시행됐습니다.*2016년 9월 기준 더팀스 메인 화면#더팀스 #THETEAMS #UX #UI #디자인 #UX디자인 #UI디자인 #인사이트 #서비스개선

사실 브랜딩을 이렇게 해라, 저게 맞다 백날 말하는 건 별 의미가 없습니다. 항상 옳은 방법은 원론적이고 방대하고 추상적입니다. 파괴하는 건 그저 말 한마디, 종이 한 장이면 충분하죠. 오우? 설마 한 번 브랜딩이 되면 쉽사리 바뀌지 않는다는 관성력을 언급하시려구요!? 물론 그렇습니다. 브랜딩은 '의도적 선입견' 을 만드는 과정입니다. 하지만 당신이 코브가 아닌 이상 남의 꿈 속으로 들어가 금고를 열게 아니라면 그것은 당신의 몫이 아닙니다. 우린 우리의 일을 할 뿐, 선입견을 만드는 건 고객들의 몫이죠. 그러니 뭔 전략을 통해서 브랜딩을 한다는 것은 어불성설입니다. 브랜딩 전략이란 말 자체가 어폐가 있다는 겁니다. 브랜딩의 전략은 이미 달성되었습니다. '회사'를 만들었잖아요!우리는 외부의 자극을 줄 뿐, 무엇을 떠올릴 지는 그들의 선택입니다.회사를 잘 운영하기 위해서 브랜딩전략을 짠다구요??? 그건 이상한 말입니다. 당신은 브랜드를 먼저 만들었고 그걸 달성할 수단으로 '회사'를 운영하는 것 뿐입니다. 그러니 이제는 운영단의 문제만 하나하나 해결해 나가면 되는 겁니다. 많은 대표님들이 오해는 이겁니다. 하아, 우리 회사는 브랜딩이 안되서 매출이 안나와.뭐라는...방구같은 소리지요. 브랜딩이 안된 게 아니라 그냥 운영이 개판인 겁니다. 직원들은 시무룩하고, 다들 회사에서 뭐하는 지 별 관심이 없습니다. 의욕도 없습니다. 방향은 이랬다저랬다를 반복하고, 가져다 쓰기나 베끼기식의 컨텐츠가 가득합니다. 3일 전에 한 얘기가 오늘 또 바뀌고, 회의만 계속되는데 말하는 사람은 없습니다. 당장 써야할 제안서가 너무 많으니 전체 회식은 다음 주로 미루기로 합니다. 미뤄서 회식을 했는데 결국 또 직원들은 그냥 하하호호 고기만 먹다가 집에 갑니다. 맡긴 일은 자꾸 늦어지거나 내 맘에 안듭니다. 질책합니다. 의욕이 떨어집니다. 대표도 직원도. 하지만 아이디어는 많습니다. 실행할 사람이 없죠. 이건 브랜딩의 문제가 아니라, 운영과 소통의 문제입니다. 생각을 하나 해보고 넘어갈께요.브랜딩은 고객과 회사만의 문제인가요??브랜딩은 고객과 회사만의 문제인가요??제가 앞선 글에서 얘기했던 내용이 있습니다. 브랜드는 직원과 회사 자체가 지니고 있는 성격, 그 기질이 자연스레 드러나는 것입니다. 정돈된 하나의 비쥬얼과 멘트, 일관된 행동과 철학을 통해서 말이죠. 결국 브랜딩은 사내문화에서부터 기인합니다. 뭐 복지데이 어쩌고 해서 금요일은 5시퇴근이 사내문화가 아닙니다. 아주 사소한 것부터 생각해봅시다. 서로 인사는 하나요? 손님이 들어오면 어떻게 응대하죠? 미팅은 어떤 식으로 해요? 호칭은요? 일이 끝나면 제깍제깍 보고 하던가요? 아니면 가지고 오라고 해야 가지고 오던가요? 결정권자와 실무자간의 커뮤니케이션을 보면 이 회사의 브랜딩이 어디를 향하고 있는지 아주 쉽게 파악할 수 있습니다. 때론 그 방향이 괌을 포위사격하는 형태를 띠며 자폭의 길을 보여주기도 하죠.그런 의미에서 오늘은 고객과 회사가 아닌, 내부의 소통에 대해 얘기해보려고 합니다. 직원들도 고개를 가로젓는 비지니스를 외부에 브랜딩하겠다는 건 말이 안되는 일이거나 그냥 사기치잔 얘기와 비슷하니까요. 브랜딩을 폭망시키는 멘트들! 지금 시작합니다.1. 예를 들어~ 다시 말하면~ 이해됨? 어떤 말이냐면..말이 많다.자꾸 예를 들지 마세요. 예를 드는 것 자체가 나쁘진 않지만, 결과적으로 말을 길게 만듭니다. 회의시간을 4시간으로 만든다구요. 30분이면 끝날 일이 자꾸 예가 붙어서 지구역사만큼 길어집니다. 직원들은 스트로마톨라이트가 되버려요. 굳어진 유기생명체 말이예요. 직원들을 태곳적 존재로 만들어서 지층속에 묻을 것이 아니라면 예를 들지말고 핵심만 딱 전달해주세요.  솔루션은 실무자들이 알아서 만드는 겁니다. 자꾸 예를 들어야 할 정도로 이해력이 좋지 않은 사람이라면 그냥 다른 일을 시키는 게 낫습니다.2. 내 친구가, 내 지인이, 내 사촌이, 내 선배가....지극히 개인적인 개인들의 경험을 실행의 근거로 삼지 마세요. 자꾸 회의시간에 '제가 아는 분이' 라는 얘기가 나오곤 하는데, 아는 분에 대한 데이터를 정확히 밝히던가 아니면 그 사례가 정확한 지 분석을 하고 얘기하는 게 좋습니다. 물론 그런 개개인도 다 고객이 될 수 있으니 중요합니다. 하지만, 더 중요한 건 우리 내부에서 일단 통일되는 것이 중요하잖아요. 종이를 집어던지던 고성이 오고가던 갈등이 있고 몸의 대화가 격렬해지는 한이 있어도 우리들끼리 의견을 합치고 지지고 볶고 해야합니다. 외부사람들의 의견을 끌어들이지 마세요. 차라리 그냥 내 의견이라고 하던가.3. 알겠지? (모르겠는데요..)이 짤 이외는 설명할 도리가 없다.중간이 없는 경우. 절차나 실무는 전혀 모르겠고. '자, 우리 이번 페이스북 좋아요!...지금 심각합니다. 이 정도로는 바이럴도 뭣도 안되요. 무조건 이번에 스폰서드 태워서 좋아요 30,000찍습니다! 다음주까지!'3일 후'팀장님 이번 컨텐츠 도달율이 괜찮은데 스폰서드 태우시죠.''응? 아 그거 거기에 돈 쓰지 말라고 하셔서 그냥 없이 해요.''네?? 그럼 목표치에 다다르기 힘들 건데.''응? 그럼 안되지. 이미 목표는 보고했는데.''뭐라고.요(와씨 반말나올뻔했네)?'무조건 하라고 하지말고, 서포팅을 해줍시다. 알겠지?가 만사장땡이 아니예요. 못 알아듣는 말이나, 불가능한 것 들을 말이 되는 것처럼 자꾸 포장하거나 모호하게 말하면 안되요. 말이란 게 원래 그렇습니다. 얘기 하면 할수록 점점 말이 되는 것 같거든요. 말하는 사람 입장에선. 듣는사람은 점점 미궁속으로 빠져들고.4. 사람은 원래..공자세요?공자세요? 우린 지금 일을 하는 거지, 인간본성에 대한 철학적 고찰이나 지극히 개인적인 가치관을 듣자고 모인 것이 아닙니다. 자신이 그런 모임을 싫어한다고 해서 남들도 싫어하는 건 아니라는 걸 좀 알았으면 합니다.5. 이렇게 하라고 했잖아.(저렇게 하람서요?)본인이 한 말은 기억해야 합니다. 굳이 전략 나부랭이가 아니더라도, 자꾸 뭔갈 갈아엎거나 기억못해서 딴얘기하는 건 브랜딩뿐만 아니라 전반적인 업무를 힘들게 합니다. 이것은 신뢰와 직결되는 문제로, 브랜딩을 위한 어떤 세부전략을 짜거나 회의를 해도 다들 '어차피 바뀔 거...' 라고 고개를 가로젓게 될 거예요!!6. 결론은, 정리하자면...결론은 하나만. 이건 심지어 5번보다 더 심할 수도 있는데, 5분전에 말했던 것과 지금 말한 결론이 다를 때도 있습니다. 보통 생각하고 말하는 게 아니라, 말하면서 정리되는 타입의 사람들이 이렇게 말하는데.....결정사항을 결정할 땐 애드립대잔치말고 명확한 오더를 주도록 합시다. 7. 그래, 니 말도 맞다.경청과 인정은 좋습니다. 하지만 모두의 말이 맞다고 해버리면....뭘 해야하는 지 알수가 없습니다. 경청은 하되 방향성은 잡아야 합니다. 브랜딩은 우리 비지니스와 사람들의 공통된 톤을 정하는 일입니다. 눈에 보이지도 않고 명확하지도 않은 그 '성격과 기질' 이란 것을 표현해내는 일은 아주 세부적이고 구체적이어야 합니다.  우리가 놀기 좋아하는 활발한 분위기의 색을 지니고 있다면 적어도 오프라인 이벤트를 할 때 어떤 텍스트와 어떤 드레스코드로 무장할 지..이렇게 외부로 드러나는 모든 요소들에 대한 결정을 해야하죠. 옷, 텍스트, 디자인, 제작물, 배너, 멘트, 응대방식 등 전방위적 요소에서 컨셉츄얼한 기획이 나와줘야 합니다. 브랜딩자체는 굉장히 모호한 개념이지만, 그걸 실행하는 단계는 어떤 것보다 구체적이어야 하죠. 그래야 고객이든, 내부직원이든 어떤 맥락에서 왜 이런걸 하는지 '이해' 할 수 있습니다. 두루뭉술의 덫에 빠져버리면, 공허한 말잔치만 계속됩니다.이건 사무실을 안개속으로 빠뜨리는 일이죠.   8. 근데...근데..이건 이렇잖아. 근데..이건 이럴 수 없는데? 근데....이러면 어떻해? 근데....내가 이래서 못해. 근데...근데...내 친구가..근데...(가능이 없음)9. 해봤는데..가카?...그 결과가 요즘 대한민국입니다. 지난 레퍼런스를 교훈삼는 것은 물론 좋습니다. 거듭 말하지만 그 레퍼런스의 맥락이 분명할 경우에 말이죠. 개인적인 경험도 교훈이 될 수 있습니다. 현 상황과 적절하다면 말이죠. 사이즈나, 성격이나, 상황이나, 업무적 측면에서 유사점이 많다면 리스크를 미리 방지할 수 있습니다. 하지만, '해봤는데...' 가 지니는 문제점은 이거죠.  그럼 해본 사람이 하셔야지, 한 사람은 본인이고 일은 딴 사람이 한다는 것.발언을 했다면 책임을 지고, 다른 사람들은 손놓고 있는게 아니라 서포트를 약속해주는 겁니다. 서로 무서워서 아무말 못하는 것보다 무서운 건, 내가 안 할거니까 아무말이나 내뱉는 것이죠.10. 일단은 ... 어쨌든..여튼..제가 꽤나 싫어하는 말 중 하나입니다. 앞서 말한 모든 말들을 깡그리 무시하고 맥락을 끊어버리는 말이죠. 브랜딩 뿐 아니라 마케팅, 디자인, 영업, 생산관리 뭐...어떤 파트가 되었던 이 단어는 좋지 않습니다. 맥빠지죠. 한참 열심히 회의하고 전략까지 쭉쭉 짜내고 있는데, 일단은 그거말고. 어쩃든, 여튼 해. 등...뭔가 상대가 지금까지 말했던 수많은 의견들을 단 2,3글자로 묵살시킬 수 있습니다. 무엇보다 세부적인 플랜이 나와야하는 브랜딩영역에서 이 단어는...그렇게 디테일하게 공들인 수많은 시간과 노력을 허사로 돌려버립니다. 한 번 무너진 것들은 다시 쉽게 쌓이기 힘들죠. 그렇게 브랜드는 점점 무너져 갑니다. 방향도, 의욕도 없이위의 10가지 멘트는 브랜딩을 망가뜨리는 말만은 아닙니다. 전반적으로 커뮤니케이션을 망치는 화법이죠. 하지만 브랜딩을 다루면서 굳이 이 주제를 꺼낸 이유는 우리가 생각하는 브랜딩에 대한 거창함과 거품을 걷어내고 싶었기 때문입니다. 위에서 언급했듯 색깔을 드러낼 수 있는 비쥬얼적, 기획/운영적 플랜은 아주 세부적으로 나와주는 것이 맞습니다. 그러나 그 전제는 회사 내부적으로 일단 통일된 의견과 이해입니다. 실제로 출퇴근을 하면서 프로젝트를 하다보면, 운영진의 회의가 끝나고 나온 후 직원들의 뒷담화를 자주 듣게 됩니다. 그 뒷담화에 편을 들어줄 생각은 없습니다. 가만 들어보면 본인들도 전혀 노력도 없이 그냥 월급이나 따박따박 받아가고 싶은 사람들도 태반이기 때문입니다. 컨텐츠를 만들려면 당연히 뛰어다녀야 합니다. 그건 기본중에 기본입니다. 자료조사를 해도 끊임없이 인터넷을 뒤져야 하고, 사람도 만나야 하고, 인터뷰, 콘티작성, 일정조율 등...모르면 공부해야하고, 안되도 되게 해야하는 경우가 많습니다. 그걸 그냥 주저앉아서 '난 그런거 못하는데 왜 나한테 시키고 지랄이야' 하면서 불평이나 하고 있는 사원들의 모습은 좋아보이지 않습니다.(많이 순화함) 하지만 여기서 잘잘못을 따지잔게 아닙니다. 그럼에도 불구하고 제대로 우리 회사의 색을 만들고, 또 살리고 싶다면...  대표님이 그토록 원하는 브랜딩을 성공으로 이끌기 위해선 어쨌든 이 브랜딩 액션을 수행해낼 수 있는 온전한 집단이 필요합니다. 대기업은 BX팀이 있으니 굳이 전 사원이 막 회의에 참여하고 이럴 필요가 없다고 칩시다.. 스타트업이나 중소기업에선...전 사원이 달려들어서 움직여야 하는 것이 맞습니다. 그 와중에 서로를 피곤하고 지치게 만드는 말들은 최소화시키는 것이 효율적으로도, 심리적으로도 좋지 않겠습니까.자칫 우리의 피곤한 표정과 서로를 등진 얼굴이...우리의 브랜드가 될 테니까요.

디자인과 예술의 차이를 물으면대부분 클라이언트가 있느냐 없느냐의 차이라고답하는 경우가 많다.내 작품인가? 고객의 작품인가?틀린 말은 아니지만,이 말에 순응하는 순간, 디자이너의 생각은수동적인 모드로 전환되기 시작한다.디자인이라는 업태가 고객의 요구를 기반으로디자인 역량과 해결책을 제공하여 수익을 얻는 구조라는 것을 인정하더라도 이 프레임에 빠져서는 안된다.여러차례 얘기하지만디자이너의 핵심 역량은 그림을 잘 그리거나멋지게 표현하는 것이 아니다.남들이 미처 보지 못하는 것을 발견하고,눈에 보이지 않는 것을 상상하고,자신의 생각을 남들이 이해할 수 있게  표현하는 능력이다.  남들이 보지 못하는 것을 표현하는 능력많은 디자이너들이 이런 유형의 클라이언트를접해봤을 것이다."요즘 그런 스타일이 괜찮던데...""그 브랜드처럼 해주세요""요런 느낌 좀 살려주면 좋겠는데요"눈에 보이는 것만 볼 수 있는 사람들은눈으로 본 것만을 믿는다.그리고 봤던 것 중에 선택할 수 밖에 없다.그 이상을 상상하거나, 받아들이지도 않는다.자신이 볼 수 있는 해상도로만 사고한다.그래서 좋은 creativity를 가진 디자이너도창의성을 수용할 클라이언트를 만나지 못한다면고객의 눈높이로 평준화될 수밖에 없다.때로는 고객의 사고를 확장시켜야 하고경험 너머의 risk를 감내할 수 있도록 설득해야 한다.디자이너가 yes man이 되는 순간 그들과 같이 망하게 되는 것이다.무조건 부정하라는 의미가 아니다.기획력이 필요하다는 것이다.기획력이 필요하다아무도 해보지 않은 것을 시도한다는 것은,누구도 경험하지 않았던 리스크를 감내시키는 것은고도의 전략이 필요하다.보지 못한 것을 볼 수 있게 해줘야 한다.상상하지 못한 것을 한걸음씩 상상할 수 있게 해줘야 한다.기획력이라는 것은논리적이어야 한다는 의미만은 아니다.치밀한 데이터로 설득하는 보고서를 쓰라는 의미도 아니다.상상력은 데이터로 입증할 수도 없다.다만, 클라이언트가 사고의 영역을 확장할 수 있게유도하는 과정을 기획하라는 것이다.많은 인터랙션과 교감과 교류가 있어야 한다.때론 논쟁하고 인정하고 생각의 빈틈을 파고들어야 한다.자주 이야기하고 확신을 줘야 한다.사례를 들고, 시뮬레이션하고, 구체적이어야 한다.상상력을 작동할 수 있게 긴장과 집착을 풀도록 해야한다.시간이 필요하고 신뢰가 필요하다.관계가 만들어져야하고 호감을 생성되어야 한다.그래서 어려운 것이다.그래서 순응하게 되는 것이다.디터람스가 브라운에서 그랬던 것처럼,나오토 후카사와가 무인양품에서 했던 것처럼,조나단 아이브가 애플에서 그랬던 것처럼,시키는 것을 잘하는 것이 아니라,주도하는 것이어야 한다.거들기만 할 뿐이 아니라,앞장서야 한다.기회를 기다리는 것이 아니라,주인이 되어야 한다.다행스러운 것은점점 그런 세상이 다가오고 있다는 것이 느껴지고,그런 능력을 요구하는 목소리가 커지고 있다는 것을체감하고 있다는 것이다.상대방을 움직이는 역량,클라이언트를 성장시키는 능력이 필요하다.언제까지나고집세고 개성강한 독불장군 디자이너로는세상을 바꿀 수 없다.사람을 움직이는 능력아티스트가 아니라디자이너이기 때문이다.

우리 회사도 브랜딩을 해보자!!! 라는 생각이 등장하고 나면 우리 회사의 대부분의 것들이 꼬져 보입니다. 이 브랜딩이란 게 참으로 단어도 멋지고 막 요즘 사방팔방 브랜딩난리이니, 안하면 뒤쳐진 것 같은 느낌과 동시에 브랜딩을 한다는 것이 막 새 집 이사가는 것 같은 설레임을 주기도 합니다. 뭔가 대단한 것을 하고 있는 듯한 기분도 들고, 이번에 확실하게 브랜딩을 해놓으면 막 우리회사가 여기저기 회자되며 사람들 입에 오르내리고 카페에서도 막 '너 그거 써봤어?' 라는 얘기가 오고가는 상상을 합니다. 브랜딩만 하면 우리 회사 졸라 짱이 되는거야!! 가즈아!!!!브랜딩 가즈아아아!! 하지만 현실은 좀 다릅니다. 브랜딩을 한다고 해서 뭐가 갑자기 바뀌는 것도 아니고, 대단히 엄청난 충격이 쎄게 오는 것도 아닙니다. 단시간내에 우르르 인기를 끈다고 해서 그게 지속되리란 법도 없고, 오히려 급격한 이미지구축은 '쟤 왜 저래?' 라는 갸웃거림을 자아내기도 합니다. 일단 설레이는 마음은 좀 내려놓고 브랜딩을 시작하기에 앞서 생각을 먼저 정리해보도록 하겠습니다. 그리고 생각을 정리한 자료를 가지고, 디자이너를 만나보는 것이지요. (또는 내부디자이너에게 요청하거나). 광대하고 우주적인 개념들을 크앙크앙거리며 열변을 토한다고 상대방이 쉽게 이해할 순 없습니다. 일단 미팅을 하고 내 생각을 잘 전달해서 최적의 결과물을 만들려면, 말하는 쪽에서 최대한 깔끔한 언어를 구사해주어야 합니다.준비할 내용이 있습니다.1. A4용지 여러 장2. 연필과 지우개3. 충언을 서슴치않는 직원 1명(팩트폭력역할)4. 지당하신 말씀이시옵니다 직원 1명(멘탈지킴이)5. 자료뭉치(외부레퍼런스와 내부사업자료 모두)6. 마음(멘탈 꽉 잡으시고)각 준비물들의 쓰임새는 아래의 미팅준비단계에서 차근차근 설명하겠습니다. 일단 준비가 완료되면 본격적인 생각정리 스텝을 밟아보도록 하죠.1단계 : 내부정리1. 브랜딩은 일을 벌리는 것이 아닙니다.2. 그러나 일이 생기는 것은 어쩔 수 없습니다.3. 새로운 일이 하나 생길 때는 기존의 일을 하나 줄일 수 있는 지 고민해야 합니다.4. 내부 업무부터 효율적으로 만듭니다. 여유공간을 주는 것이지요.5. 내부자료를 꺼냅니다(준비물5번)6. 우리 사업의 사업계획서와 제안서, 업무분장표, 프로젝트현황 등을 나열합니다.7. 우리는 도대체 왜 때문에 바쁘고 정신없는지 충신(준비물3번)으로부터 듣습니다.8. 지당한 말씀 격려를 받으며 멘탈을 잠시 다잡습니다.(준비물 4번)9. 내부에 쓸데없는 일들과 인력낭비를 쳐냅니다.10. 시간과 인력을 확보한 뒤 다음을 진행합니다.위 단계에서 시간과 인력이 확보가 되지 못했는데 억지로 브랜딩을 감행하거나, 원대한 꿈을 맘껏 펼치겠다고 하면 사무실의 7개지옥이 열리고 어디선가 켈베로스가 등장해 컴터를 다 씹어먹는 사태가 발행할 수 있습니다.대표님 마음이야 충분히 이해합니다. 빨리 브랜딩해서 챡챡 정리된 멋진 회사의 모습을 보고싶겠지만... 항상 일은 내가 아닌 실무자가 하고 있단 사실을 깨달아야 합니다. 일에는 순서가 있고 체계와 비용이 필요합니다. 사람이 하는 일이다보니 그렇게 우주적인 내용을 챡챡 만들어내기 힘듭니다.  직원들에게 인피니티스톤이라도 하나씩 크리스마스 선물로 주신다면 모르겠지만.우리 브랜드를 이해하려면 적어도 우주급빌런은 되어야 하지2단계 : 브랜드정리1. 대표님 자신과 직원들을 찬찬히 보십시다.2. 이 사람들을 한 마디로 묶으면 어떤 집단일까요3. 우리가 누구인지부터 규정합니다.4. 그 사람이 뭔 일을 하고 있는지 규정합니다.5. 그거 왜 하고 있는지 살핍니다.6. 누가 무엇을 왜 하는 지 문장으로 만듭니다.7. 여기까지는 그냥 브랜딩 경영서에 나오는 것들입니다.8. 그것과 상관없는 일들을 구별합니다.9. 그건 왜 시작하게 되었는지 생각해봅니다.10. 대부분 그냥 돈때문입니다.11. 일단 그것들은 저리 치워놓습니다.12. 6번내용을 실제로 구현하는 우리 회사의 정책은 무엇인지 살펴봅니다.13. 대부분 없습니다.14. 없으니까 미팅을 하는 거겠죠.15. 로고, 슬로건, 제안서, 회사소개서 등등을 쭉 꺼내옵니다.16. 6번과 관계가 있는지 살펴봅니다.17. 대부분 없습니다..18. 합리화시키지 않습니다. 딱 봤을 때 아니면 아닌겁니다.19. 만들어야 할 것들 리스트를 정리합니다.20. 각 제작물들의 역할과 기능을 정의합니다.내부 브랜딩정리는 참 어렵습니다. 크게 3가지 이유죠.우선은 합리화가 지립니다. 사람이 말은 하면 할수록 말이 된다고...생각이 많아지고 말이 계속될수록 이것도 말이 되고 저것도 말이 되는 것 같습니다. 하지만 소비자들은 그렇게 오랜 고민을 통해 브랜딩을 인식하지 않습니다. 직관적인 겁니다. 그리고 이성적이지도 않고 논리적인 것도 아닙니다. 그러니 6번을 규정했다면 그 기준에 맞춰서 나머지 것들을 판단합니다.두 번째는 애정이 넘칩니다. 어쨋든 사업초기에 애써서 고생해서 만든 눈물과 애환과 피와 땀이 녹아있는 사랑스러운 것들이라서 쉽사리 버리기가 힘듭니다. 제작물에 인격을 부여하지 마세요. 애정어린 옛 것들로 사업하는 게 아닙니다. 방향에 맞으면 남기고, 아니면 버립니다. 주로 대표님이 혼자 하기엔 마음의 상처가 너무 크니, 냉정하기가 이루말할 데 없는 직원에게 일임하도록 합시다. 마지막으론 6번 정리가 안됩니다. 6번의 잘못된 예를 보여드리겠습니다.; 열정 넘치는 사람들이 소비자의 행복을 위해 만드는 가치있는 생활가구세상 멋진 말을 다 가져다 붙이는 게 정의가 아닙니다. 정의...라는 것은 어떤 개념으로 일축되어야 합니다. 정의에 또다른 정의가 필요한 저런 문장은 그냥 똥입니다.; 가구덕후들이 모여 만든 원룸족들을 위한 공간창출 생활가구이렇게 '아, 1인가구 전문기업!' 으로 일축!!... 물론 퀸사이즈도 팔고 3인용 식탁도 팔겠죠. 하지만 그건 플러스알파인 겁니다. 우리가 이것저것 다판다고 해서 '이것저것 다팝니다.' 라는 식이라거나 (아예 다이소처럼 그걸 컨셉으로 가져갈 게 아니라면) 가치있는 가구를 팝니다 는 등의 어쩌라고?식의 문장들만 늘어놓는 것이 딱히 좋은 방식은 아닙니다. 일단 우리의 메인을 잡고 가는 겁니다. '메인은 이건데 너무 1인가구만 팔면 2인가구는 불편할까봐 이것도 팔고있어' 라는 식인거죠. 그래서 6번을 정의할 땐 아주 메인과 부가적인 영역을 잘 구분해야 합니다. 잘 모르겠으면 지금부터 정리해서 잡도록 합시다.아니 브랜드에 멋진 말 안쓰면 회사 기가 죽습니까3단계 : 미팅준비1. 2단계의 19,20번에서 준비한 리스트와 장표를 들고 갑니다.2. 6번문장도 숙지합니다.3. 제작의뢰를 합니다.4. 단가책정을 하거나 총 금액으로 합산합니다.5. 보통 저런 비쥬얼브랜딩 제작물을 따로따로 만들진 않습니다.6. 제작 후엔 관리가이드도 함께 요청합니다.7. 기한을 산정합니다.8. 디자이너와 레퍼런스 정리를 하고9. 이 다음부턴 보통 디자인 커뮤니케이션과 같습니다.10. 브랜딩담당 직원과 컨택포인트를 연결합니다.여기서 10번의 직원은 브랜딩총괄을 하란 것이 아닙니다. 디자이너와 커뮤니케이션 할 수 있는 채널을 압축시키는 것이지, 그 사람이 혼자 브랜딩하란 얘기가 절대 아닙니다. 근데 보통은 절대 아니라고 이렇게 말해도 어느덧 시간이 지나면 그사람이 독박쓰는 경우가 99%더군요. 그래서 직원들 사이에서 뭐 똥을 밟았니, 잘못 걸렸다느니 하는 소리가 나오는 겁니다. 업무분장할 땐 이걸 명확히 해줘야 합니다. 그 담당직원에게 '너가 다 하는 게 아니야.' 라고 달래봤자 소용없습니다. 다른 직원들에게 다른 일을 주는 것이 더 중요하죠.넌 디자이너와 컨택만 해넌 실무운영가이드를 만들어넌 현재까지 만들었던 기존 제작물 파일들모아서 외장하드에 봉인시켜넌 대외홍보용 채널 확보해놔넌 매장인테리어, 앱 리뉴얼 단가랑 프로세스 확인해이런 식으로 나누어주는 겁니다. 내부적으로 '아 쟤가 다하는구나.' 라는 분위기를 만들지 않는 것이 좋습니다.상처를 치료해줄 사람 어디 없나 가만히 놔 두다간 끊임없이 덧나 사랑도 사람도 너무나도 겁나 혼자인게 무서워 난 잊혀질까 두려워 상처를 치료해줄 사람 어디 없나...제발이렇게 미팅을 시작하도록 합시다. 비쥬얼브랜딩 미팅 이후의 제작단계는 디자이너가 알아서 할 일입니다. 물론 그 디자이너가 어떻게 브랜드제작물을 만드는가는 제 다른 매거진의 글의 링크를 통해 확인하시면 편하실 듯 합니다.1. 로고를 만들어보쟈2. 회사소개서를 만들어보쟈(1)3. 회사소개서를 만들어보쟈(2)4. 제안서를 만들어보쟈5. 컨셉을 잡아보자오늘 글의 본질은 '내 생각을 먼저 정리하고 미팅을 하자' 라는 것입니다. 제 경험상 미팅이 폭망하거나 또는 뭔 말인지 못 알아듣겠거나, 하기 싫거나 또는 해도 결과물이 이상하게 나오거나, 잘나와도 관리가 안되는 모오오오오오오오든 이유는 최초에 '제작의 목적' 자체가 흐지부지였기 때문입니다. 처음엔 그렇게 말하지 않았잖아요...흐르르그르흐르륵제대로 기한을 잡고 내부정리를 먼저 하라는 이유는 서로 언짢고 매너없는 경우를 피하기 위함입니다. 개인적으로 프로젝트하다가 '내부적으로 정리가 안되서요..좀 바빠서요...다음 주에 피드백 드릴께요..' 라는 식으로 계속 딜레이만 되거나 또는 컨택포인트라고 알려준 사람이 전혀 내용을 모르고 있거나, '확인하고 다시 연락드릴께요.' 라거나.... 아니 왜 자기 회사 브랜딩프로젝트를 직원이 확인을 해봐야 하는거지??? 애시당초 내가 몸담고 있는 곳의 정체성이 어떻게 바뀌는 지에 대한 공유와 협의가 전혀 이루어지지 않았다는 얘기 아닐까요. 대기업이나 BX팀이 따로 존재하는 경우는 그럴 수도 있을 것 같지만, 제가 저런 말을 들은 곳은 소위 '그래서는 안되는 곳' 들 이었습니다. 그러니 프로젝트를 시작하기전엔 일단 우리가 그 프로젝트를 잘 운영할 수 있는 여건인가? 를 확인해 보는 것이 서로를 위해 좋을 듯 합니다.그리고 2단계에서 먼저 브랜드정리를 하는 이유는 추후에 '아 맞다!!..' 또는 제작도중에 계속 방향이 바뀌고 딴 소리가 나오는 것을 최소화 시키기 위해서입니다. 시안에 대한 수정이 이루어질 순 있겠으나, 전체 방향자체가 바뀌어버리면 안되는 겁니다. 이것은 신뢰도에 문제이기도 합니다. 어쩃든 디자이너도 외부사람입니다. 일단 그에게 비춰지는 회사의 이미지를 생각해보세요. 이랬다저랬다 생각만 많고 정리도 안되어있고... 이런 느낌으로 다가가선 안될 듯 합니다.마지막으로 예산관리는 어떤 것들을 하느냐에 따라 다르지만, 솔직히 말해서 50만원들여서 제안서 하나 만드는 걸 브랜딩이라고 하지 않았으면 합니다. 그건 그냥 제안서 만드는 거지 브랜딩이 아닙니다. 비쥬얼브랜딩 프로젝트는 보통 개월단위 또는 연단위로 진행되고 예산도 보통 수백에서 수천까지 예상보다 훨씬 "많이"듭니다.그리고 제작되는 제작물의 가이드와 관리, 운영까지 모두 프로세스잡고 실제 보여지는 과정까지가 비쥬얼브랜딩이기 때문에 시안만 전달하고 안녕~하는 것은 그냥 디자인 작업한 거지 뭐 브랜딩했다뭐한다 얘기하기가 조금 이상한 부분이 있습니다. 디자인의 본질은 그 기능에 있습니다. 디자이너가 결과물의 기능을 100%책임질 순 없지만, 떠내보내고 나몰라라 하는 것도 웃긴 일입니다. 적어도 궤도상에 올리는 단계까지의 가이드는 제공해주는 것이 맞습니다. 가능하면 그 과정까지 인볼브하는 것이 좋구요.모두모두 깔끔한 정리로 깔끔한 미팅과 만족스런 결과물들로 새해를 시작하셨으면 좋겠습니다!!!~~메리 크리스마스 :)

담당자 : "아!! 맞다 그 자료 곧 넘겨 드릴게요."담당자의 황급함이 카톡과 라이언의 땀방울로 전해졌습니다. 요즘은 효율적인 업무용 이모티콘이 많아서 매우 다양한 감정표현을 섬세하게 할 수 있는 것 같아요. 15분 뒤 담당자에게서 연락이 왔습니다담당자 : "제가 잘못 알았나 봐요. 그 자료는 제 쪽이 아니라 다른 쪽 담당자가 담당이라서 그쪽에서 드릴 거예요."디자이너 : "그분과 직접 컨택할 순 없나요? 어떤 채널로 주시는 거예요?”담당자 :  "잠시만요!”잠시라고 한 잠시가 흐르고 다시 연락이 왔습니다. 보통 잠시라고 하면 우린 그 동안 다른 일을 하기가 참 힘들잖아요? 예를 들면 배가 아파도 화장실에 가기도 뭐하고..밥을 먹으러 카페에서 나가기도 뭐합니다. 심지어 담배 한 대 피러나가는 것도 좀 애매하죠. 그냥 잠시동안 네이버뿜이나 보면서 기다리고 있어야 하는거죠. 근데 그 잠시가 좀 길어지면 초조해지기 시작합니다.초조해..초조하다고...담당자 : "메일로 보내 드렸다고 하네요! 혹시 받으셨나요?"디자이너 : "네네, 메일로 오긴 왔는데 그럼 이 건은 이분께 드려야 하나요?"담당자 :  "아니요, 그냥 저에게 주시면 돼요!"디자이너 : "그럼 수정 피드백이나 추가 자료 요청은 어떻게 해요?"담당자 :  "아… 음 그건 그분께 받아야 하는데… 그럼 잠시만요!”마찬가지로 잠시가 흐른 뒤 재차 받은 연락은 이러했습니다.담당자 : "그럼 필요한 자료 말해 주시면 제가 요청해서 보내라고 할게요!"디자이너 : "아니, 그러지 말고 그냥 담당자님이 한 번에 해 주시면 안돼요?"담당자 :  "아, 그럴까요?"받은 프로젝트는 사용 설명서와 홍보용 브로슈어에 대한 건이었습니다. 그런데 설명서와 브로슈어의 담당자가 달랐던 것이죠. 일단 담당자 중 누가 선배고 기가 더 센지 알 순 없지만, 작업 시간 중 45분이 '잠시만'을 기다리다가 사라진 것은 명백했습니다. 아마도 다른 담당자에게 자꾸 물어보는 걸로 봐선 그 분에게 약점이 잡혔거나 빚을 졌다거나, 이것도 저것도 아니면 둘이 참..별로 안친한가보다..는 사실을 잘 알겠더라구요.다..담당자님께..여..쭤보고...중요한 건 이런 거예요.누가 전달하고 누가 컨펌하는가 다음 사례도 한 번 볼까용. 어느 중소기업의 회사 소개서와 로고 리뉴얼 건이었는데, 아무래도 담당자가 육두품 신입이고 팀장님은 성골 귀족 정도 되었던 것 같습니다. 수화기 너머 담당자가 긁적이며(보이진 않았지만 분명 긁적였을 것이다) 입을 열었어요.담당자 : "아, 보내 주신 콘셉트 시안은 잘 받았고요. 이제 팀장님께 보고해서 결정한 뒤에 알려 드릴게요."디자이너 : "그럼 콘택트 포인트는 어디로 정리할까요?"담당자 : "일단 저에게 연락주시면 제가 팀장님한테 연락드리도록 할게요."디자이너 : "네(일단 뭐…) 알겠습니다."이렇게 마무리한 뒤 하루가 지났다. 아니 팀장님이면 아무리 멀어도 지척에 있을 텐데, ‘혹시 어디 출장을 가신 건가’ 싶어 재차 연락을 했지요. 급하다고 했던 건이라서 저도 조급하긴 마찬가지니까요.디자이너 : "어제 말씀드린 콘셉트 시안은 어떻게 결정되었나요?"담당자 :  "아, 그게 팀장님께는 보고가 올라갔는데 일단 세 개 중에 하나로 말씀은 하셨거든요. 근데 이사님께도 보고를 드려야 하는데 지금 잠시 자리를 비우셔서 돌아오시는 대로 확인해서 알려 드릴게요!"팀장님과 이사님 등장새로운 미션의 등장. 이.사.님. 그렇게 하루가 또 지났습니다.. 보통 "잠시 자리를 비우셔서"에서 '잠시'는 열두 시간 정도를 의미하는 것 같아요. 어쩌면 우린 슈뢰딩거의 야옹이마냥 평행우주에서 서로 다른 시간을 보내고 있는 지도 모르겠습니다. "어떻게 진행하는 게 좋을까요?"라고 이번에는 이모티콘 없이 보내 보았습니다. 사실상 소심한 투정을 부린 것이지요. 마침표는 너무 심할 것 같아서 그래도 물음표로 마무리 지어보았습니다. 효과는 미미했습니다. 한참 뒤 담당자에게서 메시지가 왔습니다.담당자 : "아…, 이사님께서 확인은 하셨는데, 대표님과 확인해서 피드백 주신다고 하네요."끝판왕 등장끝판왕 등장. 대.표.님. 대표님까지 올라갔으니 하루가 더 넘어가겠구나 생각하며 닭볶음탕에 소주를 한잔하고 있었습니다. 어차피 오늘은 글렀으니 오늘의 술은 오늘 마시는 것이 좋을 듯 했죠."대표님께서 내일 중으로 바로 알려 주시겠다고 하네요!!"라고 밤 12시에 온 카톡을 보니 마음이 짠해지고 애틋해지면서 뭔가 뜨거운 것이 뭉클하니 올라오는 듯한 기분이었는데, 닭볶음탕이 매워서 그랬나 봅니다. 예상대로 다음 날이 되어서야 답변이 오긴 왔습니다.담당자 : "일단 모든 콘셉트를 확인은 했는데, 혹시 좀 더 다른 형태의 시안 한 개만 더 보면 좋을 것 같다는 의견이 나와서요! 세 번째 콘셉트에서 조금 심플한 느낌으로 하나만 더 부탁드려도 될까요?"디자이너 : "대표님과 이사님 쪽에서 나온 피드백인가요?"담당자 : "네네."그렇게 하나의 시안을 더 만들어 보내 준 뒤 다시 처음으로 되돌아가 팀장, 이사, 대표(역시나 이사님은 자리를 비우셨고, 대표님은 밤 12시에 피드백을 주신 모양)를 거쳐 실무자에게 되돌아왔습니다. 정식 시안은 시작도 못한 채 컨셉 정하는데만 정확히 8일이 걸렸습니다. 결과는 어떻게 되었을까용?네…. 결국 3일 만에 회사 소개서를 만들어야 했고 로고는 만들지 않는 걸로 했어요. 내 500만원 어디감.... 음. 서두가 길었지만 본론은 간단합니다. 디자인 의뢰하기 전에 미리 컨셉회의랑 제작부수, 페이지구성 등등은 미리 끝내놓도록 합시다. 그 후에 디자이너 찾아도 늦지 않습니다. 디자이너는 미팅 후 아무리 늦어도 2,3일 내로 바로 작업에 착수할 수 있어요. 그런데 구우우욷이.... 미리 계약맺어놓고 한도끝도없이 대기만 타게 하고있으면 서로 긴장하고 피곤해지기 시작하거든요.언제까지요?..그리고 핵심은 실무자에게 권한을 주세요. 위에서 회의와 구성을 어느정도 가닥 잡았으면 이제부턴 니가 알아서 해라..라고 어느정도 맡겨야해요. 자꾸 세세한 것, 토시 하나, 컬러 하나까지 대표님까지 보고가 올라가면 그 시안은 억겁의 세월이 흘러 역사속으로 사라지고 말거예요. 만약 그 실무자를 못믿겠으면 본인이 직접 커뮤니케이션 하세요. 그 불안불안함을 안고 그 미더운 분에게 맡기곤 자꾸 본인에게 가져와서 확인 맡으라고 하면..결국 본인의 일만 늘어나는 거거든요.서로 힘든 일이 아닐 수 없습니다. 1. 몇 일까지 시안3개로 추려서 가꼬와.2. 그 중 가장 괜찮다고 생각되는 거 1,2,3순위 잡아줘.3. 그 이유를 써줘.하고 그냥 맡기는 게 짱입니다. 이게 자꾸 안되는 이유는 3가지가 있더라구요.1. 윗사람이 굉장히 자기의견 반영을 좋아하시는 분이다.(뭐라도 한 마디 꼭 하고싶으신 분)2. 회장님의 심기를 건드리는 어떤 것을 잘못넣으면 진짜 큰일나는 회사 (생각보다 많습니다. 특히 대기업 대상 행사나 디자인할 때는 회장님의 언어, 그 분의 말, 가치를 표현하는 데에 있어 괴이이이잉....장히 신중해야 합니다. 띄어쓰기도 틀리면 안되거든요.회장님 타노스인줄)3. 실무자가 진짜 일을 못하는 경우거의 과반수 이상의 경우는 1번 케이스가 많았습니다. 뭔가 팀장님이 시각디자인과 출신이라던가... 미술가 집안 분이시라거나, 또는 대표님이 유독 디자인에 덕력이 있다거나..아니면 디자인과 상관없이 뭐라도 한 마디 해야 직성이 풀리시는 스타일이라던가. 이런 식이죠.음 이건 딱 잘라서 간단하게 말씀드릴 수 있을 것 같습니다. 디렉션 방식이 이렇게 오르락내리락 계단타기만 하고 있으면 잘나올 디자인도 망합니다. 이건 명백한 사실이예요. 수많은 사람들을 거치며 말이 더해지고 그 말이 오르내릴 때마다 조금씩 바뀌거든요. 디자인은 길을 잃고 쑥대머리가 됩니다. 그리고 결국 비싼 돈 들여서 이상한 시안을 받을 거고시간은 시간대로 썼을거고실무자는 지쳐버렸을 거고디자이너는 고개를 가로 저으며 떠날겁니다.이런 대우주적 비극을 막기 위해.....우리 모두 실천해봐요. 1프로젝트 1담당자 1컨택포인트 니 선에서 정리하기, 정리된 것만 나에게 보고!

엄마가 간만에 간장게장 만들어주겠다고 맘먹고 꽃게를 한 뭉터기 사와서 모래를 걷어내고 있는데, 자식놈이 들어와서 갑자기 "빨리 되지? 나 배고프니까 30분안에 해줘."라고 하면 어떤 결과가 펼쳐질까요. 엄마의 손이 상완부와 부드러운 둔각을 이룬 채 빠르게 비행하며 나의 등짝에 아름다운 접점을 만들겠죠. 가속도와 질량의 곱으로 만들어진 힘F가 등짝에 열상과 부분골절, 피부괴사를 초래할 수도 있습니다. 찰진 스윙사실 제목을 좀 자극적으로 뽑긴 했지만, 클라이언트의 '금방 되죠?' 의 의미는 두 가지가 있습니다.1. 시켜서 죄송해요...너무 어려운 건 아니죠?....라는 죄송과 민망의 의미가 있고.2. 별 것도 아닌거 얼른 해라. 라는 의미가 있습니다.분명 의도는 다르지만, 둘 다 오해의 소지가 있긴 하죠. 지금 이 글은 클라이언트님들을 위해 쓰는 글이므로 이럴 땐 어떻게 얘기해야 하는지 간략하게 알아보도록 합시다. 요즘 제 글이 갈수록 길어지는 것 같아서 오늘부턴 스압없이 좀 짧게 줄이려고 합니다. :) 배려 오졌다.상황을 하나 들어볼께요.“이거 건물만 하나 얼른 만들어 주시면 돼요.”“언제까지 수정해 드려야 해요?”“지금 급하게 필요한 거라서… 한 시간 내로 될까요?”아이소메트릭 디자인 중이예요. 그 3D처럼 노가다해서 만드는 보기에 그럴싸한 기똥찬 디자인방식이예요. 기존에 만들어 놓은 빌딩 이미지 말고, 좀 다른 형태의 빌딩 모양이 필요하다고 추가 제작 요청이 들어왔는데, 말미를 한 시간 주고 있는 거죠. 말은 단어와 뉘앙스로 이루어집니당. 커뮤니케이션은 이 둘의 조합에서 호불호가 갈리기 마련인데 이 대화를 자세히 뜯어보면 이러한 거죠.하하하하...하하..하.. 디..자이..너 ...님..이거=저기…건물만=다른 것은 안 시킬 테니하나=딱 하나만얼른=얼른 끝나…겠죠?만들어 주시면=부탁드려요돼요=죄송사실 이 말이었을 겁니다. 난 그렇게 믿고 싶어. 하지만 다른 의미였을 수도 있겠죠?얼른 되지?이거=그래 이거건물만=~만 ‘단지 그것만’=다른 것은 안 시킬 테니하나=두 개가 될 가능성도 있다.얼른=쉬운 거 아니냐만들어 주시면=한 시간 내로돼요=줘라이런 식으로 말이예요. 음, 사실 우리가 다른 사람의 일을 100% 이해하기란 어렵습니다. 뭘 해봤어야 알지. 설사 해봤더라도 그 사람의 사정과 내 사정은 분명 다를테니까요. 그래서 보통 다른 사람에게 뭔가를 요청하거나 지시할때는 팩트만 전달하는 게 좋습니다. - 어려운 일은 아니에요.- 그냥 간단하게 할 수 있는 일인데- 마이너한 수정 사항이에요- 몇 개만 바꾸면 돼요.- 가벼운 수정 사항이에요.이런 말은 내 의견이죠. 어려운 지 아닌지는 내가 안만들면 모를 일이예요. 간단한 지 복잡한 지도 마찬가지죠. 마이너한 수정사항이라고 하지만 사실 무조건 하나를 지우는게 마이너가 아니예요. 본문 하나를 통째로 들어내면 나머지 배치를 전부 바꿔야 하니 이건 마이너가 아니라 일을 벌리는 것과 같죠.하나만 건드려도 우르르 무너지는 게 또 디자인이라구..몇 개만.. 음 뭐 시키는 입장에선 몇 개뿐이겠지만 그 몇 개가 만들어내는 난장판을 고려해보면 단순히 그것만 띡 바꾼다고 될 일은 또 아니더라구요. 가볍고 무겁고도 만드는 사람이 결정할 부분이구요. 아래의 10가지 수정요청 예시를 보여드릴께요.1. 왼쪽정렬을 가운데정렬로 바꾸기2. 중간에 텍스트 하나를 통째로 날리기3. 전체적인 색감 바꾸기4. 상하좌우 여백 더 주기5. 하단에 내용 추가하기6. 없던 요소를 만들어 내기(특히 벡터 요소)7. 텍스트 폰트 수정하기8. 크기가 서로 다른 사진 위치 변경하기9. 난데없이 그래프 추가하기10. 전체적인 톤 수정하기흔히 간단한 것처럼 보이지만 레이아웃을 건드는 작업들입니다. 시키는 사람은 '지워/옮겨/넣어' 와 같이 간단하게 던질 수 있지만 만드는 사람입장에선 오늘 밤도 뜨겁게 불태울 수 있는 액션스릴러물이 될 수도 있어요. ㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋ기사 참..대박사건이다 진짜물론 일은 해야합니다. 그러니 밤을 새든 어렵든 쉽든 복잡하든 많든 적든 정당한 요청이면 하는 게 맞아요. 저런 요청을 하지 말란 소린 절대 아닙니다.당연히 수정피드백이나 추가요청은 하셔야 해요. 단!이런걸 요청할 때 뒤에 이상한 말을 덧붙이지 않는 걸로 손가락 걸고 약속복사코팅팩스공증!그냥 간단하게 말하는게 좋아요."중앙에 회사소개문구를 왼쪽정렬로 맞춰주시고 위치도 왼쪽에 맞춰주세요. 언제까지 될까요?""음, 3시간 정도 필요해요.""약간 아슬아슬 할 수 있을 것 같은데 혹시 2시간 안엔 어려울까요?""해볼께요.""감사합니다."라고 깔끔하게 대화하시면 됩니다. 넘겨짓고 단정짓고 판단하는 건 꼭 일이 아니더라도 어떤 대화에서건 중요한 법이니까요. 찡긋.

지난 3월 두 명의 남자를 만났다. 릭오웬스(Rick Owens)처럼 파격적인 옷을 즐겨 입는 남자와, 유니클로(Uniqlo) 매장의 마네킹처럼 베이직한 느낌의 남자. 파티플래너 같은 자유분방한 느낌의 남자와, 공대생같이 딱 맞아떨어지는 것들을 좋아할 것 같은 남자. 서로 다른 이미지의 두 남자에겐 묘하게도 몇 가지 공통점이 있었다. 그들은 한국에서 태어나 영국에서 디자인을 공부했다. 직업은 물론 나이 또한 비슷했다. 그래서 궁금해졌다. 디자인을 통해 서비스를 개선하고, 고객들에게 더 나은 경험을 제공하고자 하는, UI/UX 디자이너들의 이야기가.     Q: 디자인에 관심을 갖게 된 계기가 있었을 것 같은데, 궁금하다. 준태님준태: 어려서부터 뭘 만들고 부수는 것을 좋아했다. 특히 가전제품. 그래서 기계공학과에 진학했는데, 생각했던 것과 배우는 것이 너무 달라 고민을 했었다. 그러던 중 군대에 가게 되었고, 군대에서 산업디자인에 대해 알게 되었다.  (그의 첫인상에서 공대생이 느껴졌던 건 역시 이유가 있었다.) 영준님영준: 어릴 때부터 그림 그리는 걸 좋아했다. 꼬꼬마 시절엔 부모님을 따라 교회에 가서, 예배시간 내내 주보에다가 그림을 그리기도 했다. 중학교 때는, 자작 만화책을 만들어 반 책꽂이에 꽂아두기도 했다. 돌이켜 보면 상상하는 것, 표현하는 것에 관심이 많았던 것 같다. 그러다 보니 자연스럽게 디자인을 진로로 정하게 되었다.  (참고로, 그의 첫 작품인 만화책의 제목은 분식 축구단이라고 했다. 떡볶이, 순대, 튀김, 오뎅 등이 축구를 하는 내용이라고… )  Q. 흥미롭다. 디자이너 하면 다 비슷비슷할 것이라고 생각했는데, 참 많이 다른 것 같다. 대학생활은 어떻게 보냈나?  준태: 군대에서 산업디자인 길을 알게 된 뒤, 학교를 그만둘 생각까지 했었다. 특히 내가 다녔던 한양대학교 서울캠퍼스에는 디자인학부가 없어서 더욱 고민이 컸다. 하지만 복학한 뒤, 미술 수업을 들으면서, 기계공학과 산업디자인 사이에 공통점이 많다는 사실을 알게 되었다. 특히 산업디자인이 아닌 미술학과 수업밖에 들을 수 없었던 상황에서, 기계공학과 수업은 미술과 산업디자인 사이의 간극을 메워줄 수도 있다고 생각했다.   ※ 디자인과 기계공학이 결합된 준태님의 작품들Slide Air Purifier by 준태. 창문을 열듯이 손을 오른쪽으로 밀면 공기청정기가 작동하는 것이 인상적이다.Digital Photo Frame with Printer by 준태. 프린트와 사진 인화가 가능한 디지털 액자이다.영준: 돌이켜 보면, 군대 가기 전까지는 게임에 미쳐있었던 것 같다. 특히, 스타크래프트를 많이 했다. 클랜을 만들기도 하고, 유명한 클랜에 가입해서 활동하기도 하고 했다. 매주 주말에는 게임 상 내에서 하는 클랜 회의에도 참석할 정도로 빠져있었다. (아.. 스타크래프트를 잘 해서 팬클럽도 있었다는 이야기도 들었는데, 인기가 참 많았겠다.)  하하. 그건 잘 모르겠다. 복학한 이후에는, 게임에 대한 관심이 디자인으로 옮겨갔다. 디자인 관련 책들은 닥치는 대로 읽었고, 국내에서 열리는 대부분의 디자인 전시 및 세미나에 참석했던 것 같다.  대학교 4학년 때는 학교 생활보다 전시, 세미나, 캠페인 같은 대외적인 디자인 활동에 열중했어다. <외침 프로젝트>라는 사회적 디자인 모임을 만들어 활동하기도 했고, 직접 전시나 캠페인을 개최하기도 했다. 2년이란 시간이 정말 빠르게 지나갔던 것 같다. Q. 두 분 모두 디자인에 대한 열정이 대단했던 것 같다. 무언가 그렇게 열중할 수 있다는 점이 참 멋지다. 그렇다면, 가장 좋아하는 디자이너나 작품이 있는가?   준태: 좋아하는 작품은 따로 없다. 디자이너는 조나단 아이브를 좋아한다. 이유는 애플.  영준: 밀튼 글레이저. 한 장의 포스터가 가지는 디자인의 힘을 동경한다. 특히, 911 테러 직후 그가 디자인했던 I LOVE NY MORE THAN EVER 포스터를 가장 좋아한다.※ 영준님 작품에는 그가 동경하는 포스터 작품들이 많다. 특히 사회, 정치적인 목소리를 포스터 한 장에 강렬하게 담아 내곤 한다.1. D.P by 영준. 그림을 작게하거나, 멀리 떨어져서 보면 그림 속에 있는 메시지(글자)가 드러난다. 2. 포스트 전태일은 누구인가 . by 영준. 3. Is It Possible to Compare? by. 영준. 두 명의 인물을 합성하여 제작한 포스터. 그 누구도 다른 이와 결코 비교되거나 정의내려질 수 없다는 것을 담고자 했다.    Q. 두 분 모두 개성이 뚜렷한 것 같은데, 상대방의 포트폴리오를 처음 보았을 때 느낌이 어땠나? 서로가 바라본 첫인상은 어땠는지 역시 궁금하다.  준태: 핀다에 입사할 당시, 디자이너를 두 명 뽑았다는 사실에 조금 놀랐다. 그 후 영준님의 포트폴리오를 보게 되었는데 나와 스타일이 참 많이 다르다는 느낌을 받았다. 그제야 왜 두 명을 뽑았는지 이해가 되었다. 영준님의 작품은 그래픽, 시각적인 것들이 많았다. 특히 세련되면서도 간결한 포스터 작품에서 강렬한 인상을 느꼈다. 작품만 보았을 때는 고집이 세지 않을까 걱정했는데, 생각과 다르게 잘 통해서 작업할 때 참 좋다.  영준: 준태님의 포트폴리오는 준태님의 인상과 비슷하게, 정갈하고 깔끔한 느낌이었다. 나 역시도 나와 스타일이 많이 다르다는 걸 느꼈다. 하지만, 서로가 잘 맞아서 그런지 일을 함께 할 때는 큰 차이를 느끼지 못하는 것 같다.   Q. 가장 최근 한 디자인이 핀다에서 신용카드 페이지 리뉴얼 작업이라고 알고 있다. 준태, 영준 : 그렇다.    Q. 본인들이 가장 처음 만든 신용카드는 무엇이었나.    영준: 현대카드 M. 대학원 졸업하고 취업을 막 했을 때쯤 운명같이 현대카드 광고를 봤다. 당시 광고 카피가 ‘다듬다 현대 카드스럽게.’ 였는데 너무 마음에 들었다. 무조건 현대카드 M을 써야겠다는 생각을 했다. 그 외에도 현대카드를 사용하는 이유는 참 다양하다. 현대카드는 단순한 카드가 아니라, 특권이자 티켓, 혹은 하나의 문화이다. 현대카드 라이브러리, 현대카드 콘서트 등 현대카드를 사용하는 사람들만이 즐길 수 있는 문화생활들이 있다. (그래서 이태원을 매주…..)  매주는 아니다. 그래도 이태원 가는 걸 좋아하긴 한다. 유학 갔다 온 뒤에는 체크카드만 사용하고 있는데, 곧 현대카드 ZERO를 만들 예정이다. 이유는, 흰색 그리고 세련됨.   준태 : 영준님이 만들겠다는 현대카드 ZERO. 딱히 디자인적인 이유 때문에 만든 건 아니다. 어디든 기본적으로 3개월 무이자가 되고, 0.7%지만 조금씩 다 할인된다는 점이 마음에 들었다.  나는 사실 현대카드를 컬처용으로 즐겨본 적은 없다.   영준: 그건 죄다.  준태: 너도 애 낳고 살아봐라. 그런 시간이 있나!! 사실 처음 신용카드를 만든 것도 와이프 노트북을 사주고 싶어서였다. 체크카드로는 무이자 할부가 안돼서, 신용카드를 만들었다.(이런 사랑꾼……그럼 영준님이 처음 산 것은?) 영준:  나 역시 노트북, 아니 맥북. 나는 내 노트북을 샀다. 당연하지. 내 카든데!  Q. 나에게 디자인이란? 그리고 금융이란?  준태: 둘 다 너무 어렵다. 디자인은 처음부터 지금까지, 그리고 앞으로도 어려울 것 같다. 다만 내가 하고 싶은 일을 하며 살 수 있다는 것이 너무나 감사한 그런 분야이다. 죽기 전에는 꼭 제품 디자인을 해보고 싶다. 금융 역시 디자인만큼이나 어려운데, 그래도 요즘 조금 말랑말랑 해지는 것 같아 다행이기도 하다.  영준: 꾸준히 알아가고 싶은 두 분야이다. 디자인이라는 기본적인 개념은 불변이긴 하지만, 기술의 발전과 시대 상황에 따라 디자인의 역할도 급변하고 있기 때문에, 디자인을 업으로 살아가기 위해서는 꾸준히 자기계발을 해야 한다고 생각한다. 물론, 금융도 마찬가지로 변화하는 상황에 따라 다양한 부분에 대해서 심도 있게 알고 싶은 욕심이 있다.  영준님의 작품이 던지는 메시지처럼, 우리 모두 각기 다른 성격과 특성을 가지고 있으며, 그 누구도 타인과 비교당하거나 비슷하게 정의 내려질 수 없다.  하지만 동시에 아이러니한 점은, 독창적이고 혁신적인 결과물은 서로 다른 성향의 사람들이 함께 고민하고 의논할 때 탄생하게 된다는 것이다.  서로 다른 성격의 두 디자이너가 만들어갈, Finda의 새로운 모습이 기대되는 시점이다. #핀다 #팀원소개 #디자인팀 #디자이너 #조직문화

데일리 트루어워즈란?데일리호텔 300만 고객의 150만 개 '트루리뷰'로 선정한 2017년 데일리 고객에게 가장 사랑받은 스테이&고메 어워즈입니다.사실 예전부터 데일리에서 직접 스테이&고메를 선정하여 고객분들께 좀 더 보장된 서비스를 제공하고 싶었지만 최대한 투명하고 객관적이게 업장을 선정하고 싶다 보니 그 발판이 만들어지지 않았다고 판단되어 마음속에 묵혀놓은 캠페인이었죠. 하지만! 앞서 소개드렸듯이 데일리호텔 리뷰 노출이 가능해짐에 따라 직접 다녀온 고객들에 한한 100% 솔직한 후기를 바탕으로 어워즈를 선정할 수 있게 되었어요.그리고 데일리 트루어워즈를 널리 알리기 위해 온라인 콘텐츠는 물론이거니와 앱 내의 UI 적용, 업장에 세워질 오프라인 트로피 제작이 필요했습니다. 무형의 서비스를 유형으로 만들기 위한 과정이었죠.심볼 Symbol.제일 먼저 '데일리 트루어워즈'를 알릴 수 있는 시그니처 심볼을 제작합니다. 심볼은 온라인 콘텐츠에는 물론 UI 같은 좁은 영역에도 사용되어야 했기 때문에 얼마만큼의 요소를 넣을 것이고, 축약을 한다면 어떤 요소를 덜어낼 것인지 고민해야 했습니다. 트립어드바이저 사례위 사례에서 볼 수 있듯이 실제로 사용되는 심볼은 따로 있으나 UI의 좁은 영역에는 축약형을 사용하는 형태를 띄어야 했죠.그리고 심볼이 상징적으로 표현해야 하는 요소가 무엇인지 정의하고 적용되는 온/오프라인 매체의 특성을 파악하여 쉐입을 반영합니다. 위와 같이 '데일리 트루어워즈'는 투명함, 소중함, 완벽함을 전달하고자 했고 그것을 표현하기 위해 '보석, 육각형' 즉, 데일리의 심볼로 어워즈 심볼형태를 제작해야겠다고 생각이 되었습니다.그리하여 많은 피드백과 수정 후 완성된 심볼! 이 심볼은 SNS 및 타 업장 오프라인 제작물로도 배포될 것이기 때문에 사용 규정 가이드도 함께 만들어줍니다.이제 남은 과제는 '이 형태를 UI 내에 어떻게 적용할 것인가'라는 것이었습니다. UI 적용.우선 '데일리 트루어워즈'는 마케팅팀에서 제안했고, 앞으로도 꾸준히 운영할 장기 서비스였기 때문에 마케팅적으로 필요로 하는 노출 위치, 노출 형태, 노출 워딩 등을 먼저 UI/UX 측에 요청했습니다.(보통 아이콘, 심볼 같은 요소는 Creative 디자인팀에서 진행하지만 UI에 적용될 시에는 UI에 맞는 레이아웃 및 UX가 필요하기 때문에 UI 디자인팀과 협업하여 진행합니다.)업장 리스트에서 보여지는 뱃지 요청 예시필터화면 요청 예시(좌) / 업장 상세화면 요청 예시(우)먼저 고객이 예약을 하는데에 있어 '데일리 트루어워즈'가 도움이 되어야 했기 때문에 예약을 하는 과정에 많이 노출이 되는 것을 바랐습니다. 하지만 이미 업장 리스트에는 호텔 등급, VR여부 표기, 만족도, 트루 리뷰 개수, 데일리 리워드 여부 뱃지, 좋아요 버튼이 노출되고 있었기 때문에 무엇을 추가하기에는 포화상태였죠. 해서 업장 상세화면에만 '데일리 트루어워즈'표기를 하기로 협의하게 됩니다.적용된 화면또한 원래는 UI에 '데일리 트루어워즈'심볼의 요소를 줄여 적용시키는 것을 생각하였으나 레이아웃 및 그룹핑 문제로 인해 위 이미지처럼 월계수 잎만 들어가게 됩니다. 대신 '월계수 잎은 데일리 트루어워즈다.'라는 것을 인지시키기 위해 워딩 옆에 '?' 아이콘을 추가하고 클릭 시 팝업의 형태로 풀버전 심볼과 간단한 설명이 나오도록 page를 추가합니다.적용된 화면또한 앱 내 더보기 탭에 '데일리 트루어워즈'를 설명하는 탭을 추가로 넣어줍니다. 언제든 유저들이 찾아볼 수 있도록요!트로피 Trophy.'데일리 트루어워즈'를 앱과 각 SNS 채널에 노출했다면 이제는 업장에 상을 부여하는 동시에 데일리호텔을 홍보할 수 있는 트로피 제작이 필요했습니다. 호텔 및 고메 업장에 놓일 것이기 때문에 업장주가 받았을 때 가치를 부여하고 로비에 놓고 싶을 만큼의 퀄리티가 필요했어요. 여러 레퍼런스와 시안들을 검토하고 최종으로 발주업체를 선택합니다. (기획자 더스틴의 피땀눈물)#데일리호텔 #데일리트루어워즈그리고 이렇게 스멀스멀 올라오고 있는 '데일리 트루어워즈' 인증샷에 뿌듯해합니다. 사실 개인 SNS에 올려주시는 것 까지는 생각하지 못했지만 꽤 많은 분들이 계속해서 인증샷을 올려주시고 계셔서 뿌듯하네요.(ㅎㅎ)데일리 트루어워즈 2019를기약하며.데일리 트루어워즈 2018은 1/10부터 2/28까지 약 한 달 보름 정도 홈 배너에 노출이 되었습니다. 그리고 고생한 만큼의 성공적 성과를 가져왔습니다. 트루 리뷰를 통해 투명하고 합리적인 업장들을 고객에게 소개하는 동시에 업장 측에도 어워드라는 좋은 경험을 안겨드린 것 같아 좋은 경험이었다고 생각합니다. 이번해에는 어떤 스테이와 고메가 활약을 할지 궁금해지네요.그럼 내년에 '데일리 트루어워즈 2019'로 뵙겠습니다! :)기획/진행 : Creative팀작성자 : Creative팀 Blair Ahn#데일리 #데일리호텔 #디자인 #인사이트 #디자인후기 #일지

저희 뱅크샐러드 디자이너들은 매일 복잡한 금융상품 정보와 금융정보를 다룹니다.어쩌면 제가 평생 한 번도 알지 못했을 어려운 예/적금의 이자율 표, 읽어도 모르겠는 카드 혜택 설명서들을 보자니, 처음엔 참 막막하고 어떻게 보면 답답하기도 했습니다. 예/적금에 가입하면 그냥 받는 줄만 알았던 두꺼운 책자를 한 페이지 안에 설명해야 한다니요.정말 제 두뇌로는 안 되겠구나 생각을 하기도 했습니다. 자유로운 여백이나 레이아웃을 사용하기도 어려웠고, 정보를 빽빽하게 담아내기 바빴습니다. 퀼리티 좋은 금융 사진은 찾을 수 없었습니다. 어느 이미지 사이트를 뒤져도, 1980년대 통장 같은 이미지들만 있었기에 저희는 아름다운 이미지는 여행이나 음식 앱에 주어진 특권이라 생각하기도 했죠. 디자인 욕심은 버려야 하는지, 팀 전체가 해탈의 경지에 이르고 있었을 때 이런 고민이 들기 시작했습니다. 우리는 어떤 디자인을 하는가? 어떤 디자인을 해야 하는가?그 고민으로부터 저희의 디자인 철학이 탄생하게 되었습니다. 그 과정과 이유를 공유하고자 합니다.뱅크샐러드의 정체성은 '나의 자산을 한눈에 관리할 수 있게 하고, 나에게 맞는 금융 상품을 추천하는 것’입니다. 자산 관리라는게 돈많은 자산가만 받을 수 있는 거창한 것으로 생각하지만, 사실 누구에게나 필요한 일입니다. 사실 ‘금융’이란 분야는 일상생활과 아주 밀접한 관계입니다. 처음 용돈을 받거나 저금을 한 경험, 처음 내 힘으로 일해서 받아본 첫 월급, 결혼을 준비하기 위한 자금 마련, 서울로 올라와 홀로 시작한 자취 생활, … 이 중요한 순간들은 한 사람에 인생에서 기억에 남는 큰 순간들일 겁니다. 이 모든 순간에는 '금융'이라는 존재가 항상 함께 했습니다. 저금은 어떤 어린이 통장을 만들어서 시작했을 것이고, 월급을 받기 위해서 입출금계좌가 필요했을 겁니다. 결혼자금을 마련하면서는 적금을 들기도 하고 대출을 받기도 했겠지요. 이렇게 생각하면 은행은 나의 생활에 맞게 잘 활용해야 하는 대상입니다. 하지만, 현실은 그렇지 않습니다. 은행의 관문은 너무 높아서 은행원이 하는 말의 반쯤을 못 알아듣고 대답만 하고 오는 경우가 허다합니다.은행에서 금융 서비스를 이용할 때, 고객이 스스로 판단하고 더 유리한 것을 고르는 경우는 흔치 않습니다. 보통 은행 직원이 추천하는 예·적금을 들게 되는데 그게 나에게 가장 높은 금리를 주는지는 확실하지 않습니다.뱅크샐러드는 쉽고 정확하게 정보를 제공하여 사용자 스스로 정보를 해석하고 판단할 수 있도록 도움을 주려고 합니다. 그 목적을 달성하기 위해서 저희가 꼭 지켜야 하는 디자인 가이드를 정했고, 저희만의 디자인 철학이라 칭하고 있습니다.1. 누구에게나 정확하고 공정한 디자인금융 정보는 누구에게나 공정해야 합니다. 그리고 정확해야 합니다.‘누구에게나’ 라는 조건 안에는 “장애의 유무나 연령 등과 관계없는 모든 사람”을 포함합니다. 저희가 첫 번째로 시도한 것은 색각이상자도 저희 서비스를 불편함 없이 사용할 수 있도록 하는 것입니다. 국내 인구 중 남성의 5.9% 여성의 0.4%는 색각이상을 가지고 있습니다. 금융 앱의 특성상, +는 초록색으로 -는 빨간색으로 적/녹을 병행하여 사용하는 경우가 많은데, 그때 항상 흑백으로 바꾸어 확인하거나 굵기의 변화를 주려 합니다.예산 그래프의 적/녹 명도 차이‘정확하고 공정함’ 이라는 말은 정확하기만 하여도 공정하지 않을 수 있다는 깨달음에서 나왔습니다.사실만은 보여줌에도 왜곡이 생길 수 있습니다. 특히 말을 많이 꼬거나 숨기는 금융상품 설명의 경우 더더욱 그러합니다. 예를 들어 아래 이미지의 경우 반쪽 사실만 보여줌으로써 공정성에 영향을 미칠 수 있습니다. 그렇다고 하여 저 정보가 틀린 것은 아닙니다. 하지만 공정하진 않습니다.월스트리트 저널 인포그래픽 가이드 발췌저희는 사실을 보여줄 뿐만 아니라 판단에 도움을 주는 균형 잡힌 정보, 즉 공정한 정보를 보여주려고 노력합니다. 뱅크샐러드에는 카드 혜택 설명이 있습니다. 단순하고 깔끔하게 보여주기 위해서 제약사항을 안 보여줄 수도 있지만 (그럴 경우 디자이너의 마음이 더 편할지도 모릅니다) 그건 반쪽짜리 정보니 혜택이 축소되어 보이거나 확대되어 보일 수 있습니다.카드혜택 정보를 모두 상세히 나열한 디자인2. 직관과 논리가 적절하게 배합된 디자인너무 직관적이면 함축적이기 때문에 이해가 어렵고 너무 논리적이면 해석이 어렵거나 지루합니다.직관적 : 판단이나 추리 따위의 사유 작용을 거치지 아니하고 대상을 직접적으로 파악하는. 또는 그런 것.직관적인 것은 거두절미하고 딱 결론만 말하는 것입니다. 'A는 B다’라고 단정을 짓는 것은 사용자가 스스로 판단을 어렵게 합니다. "가장 좋은 카드는 00 카드다”라고 말한다면, 쉽겠지만 왜 그런지 이해하지 못하고 납득하지 못합니다.논리적 : 말이나 글에서 사고나 추리 따위를 이치에 맞게 이끌어 가는 과정이나 원리. 또는 그러한 것.논리적인 것은 하나하나 이유를 설명하고 이해를 돕는 것입니다. 하지만 이것도 너무 과할 경우 지루하고 쉬운 것을 더 어렵게 만들기도 합니다. 두 가지가 적절하게 배열되어 있어야 이해가 쉽다고 생각합니다.직관적인 요약과 이어지는 논리적인 계산 결과 (카드 상세 설명 페이지)양극단의 것은 너무 함축적 어서 이해가 어렵거나, 지루합니다.저희는 주로 직관적으로 내용을 제시하고 논리적으로 이해를 돕는 방식을 택합니다.이 순서대로 배열했을 때, 가장 이해가 쉽고 사용자 스스로 판단을 내릴 수 있게 되는 것을 경험했습니다.3. 사용자에게 깨달음을 줄 수 있는 디자인뱅크샐러드는 사용자가 모든 결정을 해주는 것을 지향하지 않습니다. 어쩌면 이해하지 않고 그대로 따르는 것은 아무것도 알아듣지 못하고 은행 직원의 말만 듣고 결정하는 적금과 다를 바 없기 때문입니다. 사용자가 스스로 납득이 가는 선택을 하고, 정확한 판단을 돕는 것이 디자인과 기술의 역할이라고 생각합니다. 저희는 기술과 커뮤니케이션을 통해 모든 사람이 스스로 더 이로운 결정을 하고 삶에 금융을 잘 활용하는 모습을 지향합니다. 이러한 철학에 따라, 저희는 금융상품 추천과 더불어 금융에 대한 이해를 돕는 매거진을 제공하고 카드를 선택할 때 고려해야 하는 조건들을 칼럼으로 제공합니다.https://banksalad.com/contents/153현실적으로 말하자면, 저희의 철학이 모든 디자인에 100% 녹아있는 것은 아닙니다.런칭 일정에 바빠서 또는 현실적인 제약들에 영향을 받아 소홀하게 점검하고 넘어가기도 하고 나중에 아쉬움이 남을 때도 잦습니다. 하지만 중요한 것은 저희의 태도라고 생각합니다. 얼마 전에 인상 깊게 본 기사가 있었습니다 '뉴욕타임스가 161년 만에 자신들의 오타를 정정했다’라는 내용이었는데 사람의 이름을 본문과 제목에 잘못 써서 제목에서는 노스럽, 본문에서는 노스롭이라고 기제한 일이었습니다. 같은 사건을 한 뉴스가 정정보도를 하면서 인용하여 더 유명해지게 되었습니다.여기서 중요한 것은 오타를 정정했다는 것이 아니라 ‘정확한 보도’를 위한 뉴욕타임스의 태도라고 생각합니다. 자신들의 부정확함을 인정하고 더 정확함을 추구하려는 태도가 뉴욕타임스를 더 정확하게 만들었던 것 같습니다.저희 뱅크샐러드 디자인팀도 매번 이런 가이드가 지켜지지 않을지라도, 발견하면 바로 개선하려는 태도를 지니려 노력합니다. 사무실 한 쪽에 항상 저희 디자인 철학이 적혀있습니다. 이것을 보고 양심에 찔리기도 하고 다시 마음을 다잡기도 합니다.뱅크샐러드 디자인팀은 누구나 금융을 쉽게 이용할 수 있는 디자인을 해 나가겠습니다.#레이니스트 #뱅크샐러드 #디자인 #디자이너 #인사이트 #디자인철학 #디자인후기 #후기

Adobe XD(이하, XD)는 Sketch, Balsamiq 등의 프로토타이핑/와이어프레임 툴에 대항하기 위해, Comet이라는 프로젝트 이름으로 시작된 Adobe의 프로토타이핑 툴입니다.그동안 그래픽 디자인 툴에서 Adobe의 영향력은 절대적이었습니다. 하지만 UI 디자인에 특화된 툴들이 등장하기 시작하면서 Adobe의 입지는 좁아졌고, 이런 상황을 극복하기 위해 출시된 툴이 바로 XD입니다. 저는 페이퍼 UI 작업을 하면서 8개월 동안 XD를 사용해왔습니다. XD를 실무에서 사용하며 느낀 점과 어떤 기능을 사용해 UI 디자인을 진행했는지 이야기해 보려고 합니다.XD를 도입하게 된 배경현재 UI 디자인 영역에서 가장 높은 점유율을 보이는 툴은 스케치일 것입니다. 빠르고, 편리하며, 다양한 익스텐션으로 UI 디자인에 최적화된 모습을 보여주고 있습니다. 이렇게 많이 사용되고 있는 스케치에 비하면 출시 된 지 얼마 되지 않은 XD는 아직 부족한 점이 많습니다. 그런데도 불구하고 현재 XD를 이용해 페이퍼 UI 디자인하는 것에 대해 만족하고 있는데요, 그 이유는 다음과 같습니다.UI 디자인에 제약이 많은 PAPER리디북스에서 판매하고 있는 PAPER와 PAPER Lite(이하 페이퍼)는 2015년 10월에 출시한 리디북스 전용 전자책 단말기입니다. 일반적인 LCD와 달리 EPD(Electrophoretic Display)를 사용한 제품입니다.EPD 패널은흑백만 표현 가능하다는 점흑백도 (실질적으로) 16단계만 표현할 수 있다는 점반응 속도가 느리다는 점특징이 있습니다. 이러한 특징 때문에 일반적인 모바일 디바이스와는 다른 방향으로 UI를 디자인해야 합니다.빠르게 작업하고, 쉽게 공유할 수 있는 XD하지만, 그러한 제약 덕분에 XD를 사용해보는데 더 좋은 환경이 되었습니다. 디테일한 패스 제작이 불가능한 점이나 UI 요소에 필요한 스타일을 완전히 표현할 수 없다는 XD의 단점은 페이퍼 UI 디자인을 하는 데 큰 문제가 되지 않았습니다. 오히려 빠르게 프로토타입을 진행하고 바로 공유할 수 있는 점이 다양한 팀과 함께 진행해야만 하는 페이퍼 UI 디자인에 큰 장점으로 다가왔습니다.XD의 강점올해 초부터 지금까지 XD를 통해 페이퍼 UI 작업을 진행했고, 기능이 부족했음에도 계속 사용해온 이유는 크게 세 가지였습니다.1. 기존 Adobe 툴 사용자에게 익숙한 UIXD를 사용하기 시작하면서 처음 느낀 장점은 기존 Adobe 툴과 UI가 비슷해 적응하기 쉽다는 점이었습니다. 이는 새로운 툴임에도 불구하고 사용성의 진입 장벽을 낮춰주는 역할을 합니다. 스케치를 처음 시작했을 때 느꼈던 낯선 작업 환경과 적응하는데 걸렸던 시간을 생각한다면 오랫동안 써왔던 툴과 비슷한 경험을 제공하는 XD의 장점이 드러납니다. 스케치 또한 적응하면 능수능란하게 사용할 수 있겠지만 당장 입문자에게 편리한 쪽은 XD라 생각합니다.2. 빠른 플로우 제작 시간/과정다른 툴들과 다르게 XD는 디자인 화면과 프로토타입 화면을 유연하게 왔다 갔다 할 수 있습니다. ‘디자인’ 탭에서 각 화면 디자인을 끝낸 후 바로 ‘프로토타입’ 탭으로 전환해 플로우를 구성할 수 있습니다. 프로토타입을 제작하는 방법도 UI 요소와 각 화면 사이를 노드로 연결하는 방식이라 쉽고 빠르게 플로우를 검증할 수 있습니다. 일반적인 LCD 기반 기계와 달리 페이퍼는 디스플레이의 한계가 많아서 UI 테스트가 많이 필요합니다. 이럴 때, 유용합니다.3. 쉬운 공유 기능이렇게 만들어진 플로우를 다른 팀과 손쉽게 공유할 수 있다는 것도 큰 장점입니다. 프로토타입을 제작하고 버튼 몇 번만 눌러주면 Adobe 서버에 업로드되고 공유 링크가 만들어지는데 이 링크를 전달해 다른 팀의 의견을 받을 수 있습니다.XD를 이용해 페이퍼 UI 디자인해보기그럼, 실무에서 어떻게 XD를 사용하고 있는지 간단히 소개해보려고 합니다. 보여드릴 예시는 암호를 입력해 구매목록에 접근하는 기능입니다.디자인 : 기본 UI 디자인벡터/텍스트 툴을 이용 기본 UI 디자인기본 UI 요소들은 XD에서 충분히 표현할 수 있으므로 버튼, 토글스위치, 프로그레스 바, 텍스트 등의 UI 요소는 XD에서 바로 작업합니다. EPD의 특성상 컬러를 다양하게 사용할 수 없으므로 검은색(#000000), 회색(#333333, #666666, #999999), 흰색(#FFFFFF)만 컬러 셋에 등록해두고 사용합니다. XD에서 작업하기 힘든 복잡한 모양의 아이콘은 일러스트레이터에서 작업한 후 패스를 복사해 붙여넣기 합니다.디자인 : 반복 그리드XD에서 호평을 받는 그리드 기능을 이용해 책 목록을 만들어 보겠습니다. 리디북스 서점이나 뷰어에서 가장 많이 보이는 레이아웃이 ‘책 목록’인데 이러한 그리드 구조를 XD에서는 손쉽게 만들 수 있습니다. 책 커버 이미지, 제목, 저자 등 개별 항목을 선택한 후 ‘반복 그리드’를 적용해줍니다. 그리고 그리드 전체 크기와 각 항목 사이의 간격을 드래그로 조절해주면 책 목록을 쉽게 만들어낼 수 있습니다. 스케치에서는 Craft 같은 플러그인을 이용해야 하는 기능이지만 XD에서는 별도의 플러그인 없이 구현할 수 있습니다.디자인 : 프로토타이핑각 화면이 완성되었다면 프로토타이핑을 진행합니다. 이번 예시에서는 ‘내 서재에서 구매목록 탭’ → ‘암호 확인’ → ‘구매목록’으로 이동하는 프로세스를 구현합니다. XD의 프로토타입 탭으로 이동한 후 ‘구매목록’ 텍스트를 선택하고 노드를 ‘암호 입력’ 페이지로 연결해줍니다. ‘암호 입력’ 페이지에서는 아트보드 전체를 ‘구매목록’ 아트보드로 연결합니다.온라인 공유프로토타입 확인을 위한 공유 링크 만들기프로토타입을 완료했다면 오른쪽 위의 ‘미리 보기’ 버튼을 눌러 이상이 없는지 확인해보고, 타 팀에 공유할 링크를 만듭니다. 오른쪽 위의 ‘온라인 공유’를 클릭하면 제목, 섬네일 이미지를 지정할 수 있고 링크 업데이트나 새 링크를 눌러 웹에서 확인할 수 있는 링크를 복사할 수 있습니다. 이제 이 링크를 타 팀에 전달하고 피드백을 받으면 디자인 과정이 완료됩니다.XD에 바라는 기능제가 담당하고 있는 페이퍼 UI 디자인을 할 때는 XD의 불편함이 그리 크지 않습니다. 페이퍼 UI 특성상 세밀한 디자인이 필요하다기보다 전체 흐름을 점검하며 사용자 경험의 단계를 줄이는 것이 더 유용한 경우가 많기 때문입니다. 하지만 이러한 상황에서도 XD에 아쉬운 점이 있는데 몇 가지 부족한 점을 꼽아보겠습니다.1. Photoshop/Illustrator 파일 호환Adobe에서 출시한 툴답게 단축키와 인터페이스가 포토샵/일러스트레이터를 많이 닮아있습니다. 하지만 파일 호환성은 만족스럽지 않은데요, 일러스트레이터 파일이나 포토샵 파일을 불러오는 것이 불가능합니다. 가져올 수 있는 파일은 SVG와 JPG, PNG 등의 비트맵 이미지뿐입니다. 저는 따로 파일을 가져오지 않고 일러스트레이터에서 패스를 복사 → XD에 붙여넣는 방식으로 작업하고 있습니다. 포토샵 파일은 어렵더라도 일러스트레이터 파일은 손쉽게 들고 올 수 있으면 좋겠습니다.2. 가이드 추출 및 공유스케치는 Zeplin, Sketch-measure 같은 훌륭한 가이드 익스텐션이 존재합니다. 각 오브젝트의 위치와 크기, 코멘트를 공유할 수 있는 툴인데요, 아쉽게도 XD에서는 가이드를 생성하고, 전달하기가 마땅치 않습니다. 별도로 이미지를 제작하거나 문서로 전달해야 한다는 게 아쉽네요.3. 레이어XD에는 레이어 패널이 없습니다. 일러스트레이터처럼 ‘앞으로 가져오기/뒤로 보내기’ 등의 높낮이 개념은 존재하지만, 포토샵에서 볼 수 있는 레이어 패널은 없습니다. 그래서 오브젝트를 레이어 별로 정리하거나 조절할 방법이 없는데요, 차후 지원되면 좋겠습니다.4. 심볼스케치에는 UI 요소나 반복적으로 사용할 요소를 만들어두고 재사용할 수 있는 심볼 기능이 있습니다. 포토샵의 스마트 오브젝트와 비슷한 개념인데요, 대표 심볼을 수정하면 모든 심볼에 반영이 되어 편리하게 사용할 수 있다는 점이 좋은데, 아직 XD에는 이런 심볼 기능이 없습니다. 그래서 거의 비슷한 요소들을 복사 → 붙여넣기 해야 한다는 단점이 있습니다. 반드시 추가되면 좋겠습니다.5. 컬러 관리마지막으로 컬러를 관리할 수 있는 기능이 없습니다. 포토샵에서는 Swatch를 통해 컬러 세트를 관리할 수 있는데 XD에서는 자주 사용하는 컬러를 등록할 수는 있어도 별도의 파일로 추출 → 공유하는 것이 불가능합니다. 특히, 리디북스에서는 RSG(Ridibooks Style Guide)를 통해 컬러를 일관되게 사용하고 있는데요, XD에서는 이러한 컬러 세트를 사용할 수 없어 아쉽습니다. 미리 컬러를 등록해둔 XD 파일을 이용해 작업을 시작하고 있지만 좀 더 세심한 컬러 관리 기능이 도입되면 좋겠습니다.다음 업데이트가 기대되는 툴그동안 디자이너에게 포토샵과 일러스트레이터의 위상은 높았습니다. 하지만, 어느 순간부터 UI 디자인의 무대가 웹에서 모바일로 이동하고, 모바일 UI 디자인이 필요로 하는 다양한 기능들을 가지고 있는 툴에게 자리를 내주게 되었습니다. 하지만, Adobe도 가만있지 않고 기존의 툴에서 부족한 점이 무엇인지 정확히 파악하고, 그 부분을 쉽게 사용할 수 있는 XD를 출시하게 된 것이죠.디자이너의 입장에서는 아직 아쉬움이 많지만 간단하게 만들 수 있는 그리드, 빠르게 진행할 수 있는 프로토타이핑, 그리고 만든 프로토타입을 쉽게 공유할 수 있는 기능 등 XD만의 특별한 부분도 많아 계속 XD를 통해 작업해볼 생각입니다. 또, 정식 버전으로 출시된 후 한, 두 달에 한 번씩 업데이트되고 있는데요, 업데이트 내용을 보면 XD가 어떠한 방향으로 나아가야 할지 Adobe가 잘 알고 있음을 느낄 수 있었습니다. 앞으로도 발전할 XD를 기다리며 글을 마칩니다.맥 사용자이고 Adobe에 회원 가입이 되어있다면 무료로 XD를 사용할 수 있습니다.http://www.adobe.com/kr/products/experience-design.html#리디북스 #디자인 #디자이너 #Adobe #XD #AdobeXD #꿀팁 #디자인꿀팁 #UI #페이퍼UI #반복그리드 #프로토타이핑 #공유기능

안드로이드 앱 디자인은 처음인데요안드로이드 앱 디자인 처음 접하게 되면 dp, px(픽셀), Dpi이란 말을 듣게 됩니다. 안드로이드는 다양한 스마트폰 화면 크기와 해상도를 지원하고 있기 때문에 필요한 개념입니다. 처음에는 헷갈리기 쉽지만 생각보다 어렵지 않습니다. 그리고 이와 관련된 지식을 알고 있으면 디자인,개발 작업에 도움이 됩니다.스크린의 실제 단위 Pixel많이 들어봤을 법한 픽셀은 화면을 구성하는 최소 단위입니다.Pixel 단위는 화면의 전체 화면 크기와 상관없이 지정한 수치만큼 표시되는 절대적 표시 단위이므로 안드로이드에서는 Pixel보다 dp 단위를 사용하는 것이 개발이 이루어질 때 수월합니다.그 이유는 아래 DP단위 개념을 설명에서 알 수 있습니다.DPIDPI는 Dot Per Inch로 1인치에 들어가는 픽셀을 나타내는 단위입니다. 예를 들면 100DPI는 1인치당 픽셀이 100개 포함된다는 것을 말합니다. 개수가 많을 수록 고밀도이며 안드로이드에서 주요 DPI는 아래와 같습니다.DPI기준ldpi120dpimdpi160dpi (기본)hdpi240dpixhdpi320dpixxhdpi480dpixxxhdpi640dpi안드로이드의 기준 DPI는 160 DPI 입니다. 160 DPI인 경우 밀도 독립단위 DP와 PX이 같은 크기를 갖습니다. 즉, 16DPI에서는 1dp는 1px이 됩니다.다양한 디바이스 크기에 대응하기 위해 필요한 DPDP는 픽셀 독립 단위입니다.화면의 크기가 달라도 동일한 비율로 보여주기 위해 안드로이드에서 정의한 단위이며 큰 화면,작은 화면에 상관 없이 같은 크기로 나타납니다.예시1) 같은 사이즈의 애플리케이션에 Low, Medium, High-density 화면에 PX 단위로 크기를 지정했을 때예시2) 같은 사이즈의 애플리케이션에 Low, Medium, High-density 화면에 DP 단위를 지원했을 때위의 예시들을 보면 안드로이드에서 왜 DP단위를 써야 하는지 알 수 있습니다.위의 개념들을 실무에 응용DP, Px, DPI는 안드로이드 앱 디자인 할 때 꼭 알아야 합니다. 실제로 디자이너는 디자인 후 이미지를 보내줄때 해상도별로 Png파일을 보내줘야 하고 개발자도 리소스 파일을 해상도별로 관리해야 합니다.DP와 PX의 단위 변환개발을 하다보면 DP를 PX로 바꿔줘야할 경우가 있습니다. 안드로이드 레이아웃을 코드 작성 할때 는 DP를 사용할 수가 없기 때문입니다.사용하는 공식은 아래와 같습니다.px = dp * 단말 DPI/기본 160dp = px * 기본 160/단말 DPImdpi 지원 단말일 경우 dpi는 160 이므로 1dp 160/160 = 1pixel이 됩니다.xxhdpi 지원 단말일 경우, 5dp를 pixel로 계산하면5dp 480/160 = 15 pixel 이므로 xxhdpi 단말의 5dp는 15pixel이 됩니다.단위 변환을 계산해주는 도구디자이너는 가이드를 작성할 때 DP계산이 필요하고 개발자는 코드를 작성할 때 PX 계산이 필요합니다.머릿속으로 계산이 빨리 되면 상관없겠지만, 일하면서 여간 쉬운 일은 아닙니다.(숫자에 약한 디자이너라면 더더욱…!) 그래서 계산이 힘든 사람들을 위해 작업 시간도 줄여주는 도구 몇가지 소개합니다.1. Android DP/PX converter   각 화면 밀도 별로 dp 를 pixel 로 pixel 을 dp 로 간단하게 확인 해 볼 수 있다.(바로가기)2. Pixplicity DP/PX converter   각 화면 밀도 별로 pixel, dp, sp, mm, inch, pt 로 계산 값을 확인 할 수 있다. (바로가기)3. Cracker9의 Unit Converter   디자이너가 작업하면서 쓰기 유용한 포토샵 플러그인이다. (바로가기)안드로이드 앱 디자인 하실 때 도움이 많이 되셨으면 좋겠습니다.#에이치나인 #디자이너 #개발자 #협업툴 #크래커나인 #솔루션기업

안녕하세요, 엘리스입니다.지난번 블로그 글에서 엘리스가 일하는 방식을 프론트엔드 팀 리더 휘동님께서 직접 이야기해주셨는데요, 오늘은 '디자인팀은 어떻게 일하는가'를 인터뷰를 통해 샅샅이 밝혀보도록 하겠습니다!간단한 자기소개 부탁드려요.Jane저는 디자인팀의 지인이라고 합니다. 디자인팀에서 기획과 UX, UI 쪽을 주로 담당하고 있습니다.Youhyun안녕하세요! 저는 디자인팀의 유현입니다. 전 엘리스에서 UI와 브랜드 디자인을 주로 하고 있어요. 이메일 디자인이나 마케팅 콘텐츠도 지원하고 있구요. 토끼가 등장하는 건 거의 제 손길이 닿았다고 보시면 됩니다. :)엘리스에 합류하게 된 이유는 무엇인가요?Jane학부 1학년 때 코딩 수업이 필수였어요. 이때 코딩에 대한 안 좋은 기억이 있었는데 이후 재미있는 수업들을 들으며 극복하게 되었구요. 사람들이 코딩에 대해 갖는 거부감이나 두려움을 알아요. 디자인적으로 이걸 쉽고 친근하게 풀어내고 싶다는 생각으로 합류하게 되었어요.Youhyun한 워크숍에서 웹 코딩 수업을 들으면서 코딩의 재미를 알게 되었어요. 내가 디자인하고 직접 웹사이트까지 만드는 게 너무 재밌는 거예요. 그래서 저는 디발자가 되고 싶었어요!ㅋㅋ. 좋은 기회로 엘리스라는 회사를 알게 되었는데 심지어 코딩 교육이고, 여기에 있는 귀여운 캐릭터들도 너무 좋더라구요. 바로 합류를 결정했죠.요즘 하고 있는 디자인 작업은?Jane엘리스에서는 매 분기마다 목표를 정하고 프로젝트를 해요. 이번 분기 목표는 선생님, 조교와 같은 교육자가 좀 더 편하게 저희 서비스를 사용하는 거예요. 그 일환으로 교육자가 수업자료를 올릴 때 기존에 코드로 작성해야 했던 것을 GUI(Graphical User Interface)화 하는 작업을 하고 있어요. 이 프로세스를 개선하면 교육자가 실습 콘텐츠의 퀄리티를 좋게 만드는 데에만 신경을 쓸 수 있기 때문에 교육 자료의 질도 높아질 거라고 생각해요.Youhyun퍼블리케이션 디자인을 하고 있어요. 퍼블리케이션은 선생님이 프로그래밍 과목을 만들고 검수 과정을 거쳐서 학생들에게 공개하는 것까지의 과정을 말해요. 이 기능은 작년에 출시되었는데, 지금은 그동안의 사용자 불편점들을 반영하여 개선하는 작업을 하고 있어요.개인적으로 좋아하는 디자인 작업은?Jane저는 Sketch나 최신 디자인 툴을 테스트해보는 것을 좋아해요. 각종 디자인 툴과 플러그인을 활용해보면서 파일, 레이어, 심볼 관리를 더 잘할 수 있는 방법을 고민하죠. 요즘에는 엘리스만의 디자인 시스템을 어떻게 구축하면 좋을지에 대해 생각하고 적용해보고 있어요.Youhyun출력물 작업을 좋아합니다. output을 내 손으로 직접 만질 수 있는 거요! 코드 챌린지, 데이터 챌린지 때 X배너, 현수막, 상금 판넬, 스티커 등을 만들었는데 너무 재미있었죠. 특히 스티커는 많은 분들이 좋아해 주시고 노트북에도 붙이시는 걸 보는데 정말 뿌듯하더라구요. 또 하고 싶은데... 요새 프로덕트를 만들어내는 것 때문에 바빠서 작업을 못하는 게 아쉽네요.Q. 후드와 우주복을 입고 있는 토끼 스티커 말하는 거죠? 토끼는 왜 후드를 입고 있나요?Youhyun왜냐하면 저희 모두 후드를 유니폼처럼 입고 다니며 너무나 사랑하기 때문에^^*. 저희 엘리서들을 엘리스 마스코트 토끼에 반영해보았습니다.지난 1년간 엘리스 디자인의 방향성은?Jane엘리스는 처음에는 대학교나 기업처럼 프로그래밍 교육이 필요한 기관을 대상으로 서비스를 제공했어요. LMS(Learning Management System, 학습 관리 시스템)라고 해서 좀 더 기관에 맞는 딱딱한 느낌이 컸어요. 그러다가 일반 수강생을 대상으로 플랫폼과 수업을 제공하는 아카데미가 생기면서 유저가 더 재미있고 편하게 사용할 수 있도록 지난 1년간 디자인이 변화해 왔죠. 어려운 것은 그러면서 동시에 기관을 서브해야 한다는 거예요. 이 둘의 사용 케이스가 굉장히 달라요. 항상 양쪽 모두를 고려하면서 사용성을 좋게 만들기 위해 고민을 많이 하는 것 같아요.Youhyun비전공자들도 쉽게 코딩을 배울 수 있도록 디자인하는 것. 비전공자들이 보기에 새까만 코드 에디터는 낯설고 어려워 보여요. 전공자보다 접근성이 떨어질 수밖에 없죠. 하지만 엘리스의 비전은 누구나 쉽게 코딩을 배울 수 있도록 하는 거예요. 코딩 외적인 어려움은 불필요한 장애물이라고 생각해요. 그래서 비개발자 관점에서 최대한 쉽고 직관적인 플랫폼, 사용성에 대한 고민을 많이 해요. 지난 1년간 쉬운 사용성을 위해 디자인해왔다고 생각해요.디자인 리뷰 및 개선 방법?Youhyun매주 끊임없는 디자인 미팅을 통해서 보다 완성도 있는 프로덕트를 디자인하려고 해요. 팀 차원에서는 운영팀에서 학생과 선생님의 애로사항을 듣고 개선점을 제안해요. 이를 바탕으로 개발팀과는 기술적인 부분을 고려해서 디자인을 변화시켜 나가죠.JaneGA등의 데이터 툴을 이용해서 사용자의 다양한 사용패턴을 수치화해요. 뿐만 아니라 유저 인터뷰를 통해서 사용자의 다양한 의견도 수렴하죠. 이 밖에 A/B 테스팅하는 과정 등의 리뷰 프로세스를 다듬어 나가고 있어요.엘리스 디자인 팀 업무 방식의 장점?Youhyun저희는 팀원 한 명 한 명이 온전히 하나의 프로젝트를 담당해요. 책임이 전적으로 주어지는 일이기 때문에 부담이 크기도 하지만 온전히 나의 힘으로 운영팀, 개발팀과 협업을 이끌어내면서 프로젝트의 결과를 만들어 낸다는 성취감이 굉장히 커요. 그동안 힘을 기울였던 것이 하나의 큰 결과물로 나오는 걸 볼 때는 정말 뿌듯하죠.Jane다재다능한 팀원들과 함께 일할 수 있다는 것. 또 처음부터 끝까지 해볼 수 있고, 자유와 책임이 크게 주어진다는 것. 어떤 한 가지 업무에 자신의 역량을 한정짓는 게 아니라 전체적으로 필요한 부분을 주도적으로 생각하면서 계속 논의점을 제시하고 보완해나가야 해요. 디자인 프로세스 자체를 직접 만들어낼 수 있다는 게 큰 매력인 것 같아요.브랜드 컬러는 왜 보라색인가요?Jane원래는 지금처럼 보라색이 아니라 하늘색 엘리스이던 시절도 있었어요. 제가 들어오기 전 이곳의 개발자 수인님 및 개발팀에서 포스터를 만들고 로고를 만들었던 때가 있었죠... 디자인팀이 생기고 처음으로 했던 게 브랜딩 작업이었어요. 보라색을 한 이유는 특이한 색을 원했기 때문이에요. 저희가 이상한 나라의 앨리스를 모티브로 하니까 신비로운 느낌을 주고 싶었어요.Youhyun그리고 보라색이 잘 쓰면 고급진 느낌을 주거든요. 저희 모티브가 동화나라이긴 하지만, 마냥 아기자기하지만은 않다!ㅋㅋ라는 느낌으로 해석하길 바라고 있어요. 그러고 보니 팬톤 선정 올해의 컬러가 보라색이네요. 큼큼. 저희가 올해를 빛내야죠!엘리스 최애 캐릭터는?Youhyun당근 토끼죠.Q. 이유는 무엇인가요? 먼저 엘리스 캐릭터들을 소개해주실 수 있나요?Youhyun토끼, 체셔캣, 도도새, 애벌레, 모자장수, 하트 여왕, 카드병정이 있어요.저는 백점 맞은 토끼(?)(※ 코드 문제를 풀어 100점을 받으면 토끼가 신나 하며 튀어나옵니다.) 튀어나올 때가 너무 좋아요! 이 토끼는 사람들이 코딩하는 데에 좀 더 동기부여가 되도록 하기 위해서 탄생했는데요, 실제로 수강생 분들의 반응도 너무 좋아요.Jane캐릭터 스토리도 있어요. 토끼는 학생들의 안내자 역할이에요. 항상 등장해서 어떻게 해야 하는지 알려주고 100점을 받으면 같이 기뻐해 줘요. 체셔캣은 퀴즈를 내는 존재예요. 알쏭달쏭하고요. 학생들에게 퀴즈를 내서 시험에 빠뜨리는 존재예요. 그리고 저도 토끼를 가장 좋아합니다. 일반적인 토끼보다 더 귀여운 것 같아요. 얼굴이나... 손 같은 게...함께 일하고 싶은 디자이너 상이 있다면?Youhyun코딩에 대한 관심, 지식이 있다면 더 일을 재미있고 빠르게 하실 수 있을 거예요. 그리고 주도적으로 디자인을 이끌어나갈 수 있는 분이었으면 좋겠어요. 프로덕트 디자인의 과정은 운영팀 및 개발팀과의 끊임없는 논의의 과정이기도 하기 때문에 논리적인 설득과 커뮤니케이션에 능하신 분이면 더 좋을 것 같아요.Jane논리적으로 자신의 디자인을 풀어낼 수 있는 분이요. 엘리스의 비전은 코딩의 진입장벽을 낮추고 끝까지 포기하지 않고 이수할 수 있는 프로그래밍 교육을 만드는 거예요. 이를 위해서는 디자인적으로도 사용자 입장에서 생각하고 설명할 수 있어야 해요. 보다 완성도 있는 프로덕트를 디자인하기 위해서 어떻게 하면 사람들이 더 쉽게 엘리스를 사용하고 잘 사용할 수 있는가를 함께 고민할 수 있는 분이었으면 좋겠어요.새로 올 팀원과 어떤 것을 함께 만들어가고 싶으신가요?Youhyun사무실 공간 디자인이요! 사무실 인테리어를 함께하고 싶네요. 엘리스 사이트뿐만 아니라 엘리서를 위한 공간도 브랜딩 하는 거죠! 이런 걸 하고 싶은 게 제 바람입니다. 서울 오피스 함께 꾸미면 너무 재미있을 것 같아요.Jane지금은 디자인팀이 3명인데 앞으로 규모가 더 커지면 디자인팀만의 문화를 함께 만들어가고 싶어요.Youhyun정말 리더다운 답변이네요.후드 입고 오시면 격하게 반겨드립니다! 엘리스에서 만나요!