스토리 홈

인터뷰

피드

뉴스

조회수 650

소비자 마음을 읽는 광고 디자이너, 정은송

   소비자 마음을 읽는 광고 디자이너, 정은송 믹픽인사이드는 믹스앤픽스와 함께 성장하고 있는 구성원들의 이야기를 들어보는 시리즈입니다. 다양한 분야의 사람들이 모인 만큼 풍부한 이야기가 완성되었는데요. 각각의 개성들이 꿈을 향해 달려온 시간, 믹픽과 함께 나아갈 시간에 대해 나누며 우리가 하고 싶은 일로 꾸려나가는 회사를 그려봅니다.          Q1. 간단한 자기소개 부탁드립니다.  안녕하세요. 시각디자인 전공 광고 디자이너 정은송입니다. 특히 SNS 광고에 관심이 있어요.    Q2. 디자이너가 되기까지의 과정이 궁금해요. 입시 미술을 준비하다가 20살 때부터 프리랜서로 일을 했어요. 웹툰, 편집회사, 쇼핑몰 등 다양한 분야에서 경험을 쌓을 수 있었죠.    Q3. 다양한 분야를 접해본 것이 디자이너로서 값진 경험일 것 같아요. 콘텐츠를 제작할 때는 대세 흐름이나 최신 트랜드를 파악해야 해요. 그래서 다양한 디자인을 보고 경험한 게 디자인 기초를 다지는 데 많은 도움이 되었어요.    Q4. 회사에서 하고 계신 일을 구체적으로 말씀해주세요. SNS콘텐츠를 디자인하고 있어요. 또 이번에 새로 런칭할 쇼핑몰 홈페이지도 기획하고 있고요.    Q5. 디자인 작업을 할 때 어떤 걸 중요하게 생각하나요? SNS에 게시되는 콘텐츠의 경우, 디자인적 요소가 과다하면 너무 광고 같아 보여서 오히려 사람들이 거부감을 느낄 수 있어요. 그래서 되도록 깔끔한 디자인으로 신뢰를 주려고 해요.    Q6. 디자인 작업에 있어 어려운 점이 있을까요? 한 콘텐츠를 만들더라도 퀄리티를 높이기 위해서는 여러 소스 자료가 필요해요. 그래서 평소에 레퍼런스를 보고 자료들을 모아 놓죠. 또한, 디자이너 커뮤니티에서 정보를 공유하는 등 역량을 쌓기 위해 노력하고 있어요.    Q7. 어떤 디자이너가 되고 싶으신가요? 기획안을 받았을 때 머릿속에서 관련 이미지가 떠오르는 숙련된 디자이너가 되고 싶어요. 더불어 이 일을 즐기면서요.    Q8. 앞으로의 목표를 말씀해주세요. 소비자 반응을 끌어 낼 디자인적 요소를 연구하고 적용해가면서 성과 좋은 SNS 콘텐츠 디자이너로 자리매김하고 싶어요.
조회수 832

블록체인 진짜 하나도 모르는 디자이너의 독학일기(1)

독학을 시작했습니다. 스터디를 가려고 했는데 수많은 전문용어들이 제 영혼을 피폐하게 만드는 바람에 정신건강이 염려되었거든요. 포토샵도 혼자 배웠으니 이것도 못할까! 라고 자신있게 책을 폈는데 못할 것 같습니다.......그래도 산 책 값이 아까우니 읽고 공부한 내용들을 하나하나 정리해보고자 합니당! 블록체인 전문가님들이 혹시 이 글을 보신다면 노잼과 지루함내지는 유치함을 느끼실 수 있으니 엄빠미소로 지켜봐주시면 감사하겠습니다. 잘못된 부분이 있다면 바로 잡아주세요!!글을 쓰면서 5가지 원칙을 지킬겁니다.1. 꼭 써야하는 고유명사가 아닌 이상 어려운 단어는 쓰지 않습니다. 중학생 정도가 이해될 수준이길 제발 바랍니다...저는 블록체인을 이제 이틀 째 공부하고 있거든요.2. 가급적 팩트체크된 내용만 쓸겁니다.3. 제대로 공부하려면 경제사, IT기술, 코딩 등등..수많은 요소가 복잡하게 들어가지만 여기선 꼭 필요한 쏘옥 뽑아서 얘기할 겁니다. 4. 짧게 쓸 겁니다.5. 가끔 쓸 겁니다.(자주 쓰기 힘든 주제임..)시작합니당 :)블록체인이 왜 태어났는지 얜 뭔지부터 알아야 할 것 같아요. 그러자면 시간을 조금 되돌려서 우리는 어떻게 사고파는 경제활동을 해왔는지 살펴볼께요.1. 아주 오래전 = 기억하기종이란게 나타나기도 전 우리는 사과5개를 빨간집에서 해가 질 무렵에 씨앗10개와 교환했다. 는 걸 기억해야 했어요. 문제는 서로가 잘못 기억하거나 한 쪽이 다르게 우겨버리면 할 말이 없다는 거죠..철저히 신뢰와 기억에 의존한 거래였어요.2. 오래 전 = 나무나 가죽에 새기기원래 사람은 두 발로 직립보행 하기 전부터도 그림을 좋아했어요. 동굴에도 그리고 돌에도 그리고, 나무나 땅에도 곧잘 그림을 그렸죠. 뭔가 주고받는 물품이 많아지면서 기억하기가 힘들어지자, 이젠 가죽이나 나무 등등에 갯수를 남기기 시작했죠. 문제점은 그 가죽이나 나무가 훼손되거나 도난당하면 증명할 방법이 없다는 거에요.'동쪽 언덕 마을에서 온 또박이가 가죽3개를 사갔다.'3. 조금 오래전 = 종이에 적기(단식부기)종이가 발명되고 아라비아 숫자와 알파벳, 한글, 한자, 인도어 등등이 발달하기 시작하면서 문서를 남길 수 있게 되었어요!!! 문서를 남긴다는 건 굉장했죠!!!오랜 시간이 지나도 기록들을 잘 보관할 수 있었어요!! 거래를 할 때에도 수입과 지출을 한 번에 (가계부처럼) 적으면서 작은 종이에 많은 내용을 남길 수 있었답니다. 하지만..여전히 문제는 사람이었어요. 이를 위조하거나 없애버리면...? 또는 불에 다 타서 없어지면??4. 얼마 전 = 적은 걸 나눠가지기(복식부기)그래서 서로 함께 같은 내용을 공유하기로 했어요. 너 하나 나 하나. 그리고 그 과정을 감시하는 회계사. 이런 과정은 우리 조선시대에서도 아주 엄격했답니다. 특히 계문화가 발달했던 우리나라는 다양한 장부를 기록했는데 '용하기'라는 계의 장부기재는 정말 엄격한 원칙이 있었답니다!!1. 임시장부를 2부 작성해요. 이 때 회계담당자 이외 심지어 2명이 더 감시하고 있어요.2. 기재를 시작해요.3. 계원들이 다 모여야 하고 적은 내용을 크게 읽어요. 이 때 의심스러운게 있으면 이의제기나 수정을 해요.4. 계장과 두 명의 감시원이 있는 상태에서 최종수정해요. 그리고 계장이 서명해요.5. 중복된 장부가 있는지 확인하고 새 장부를 넣어 보관해요.엄청나죠???..놀라운 건 현재의 블록체인의 원리도 위와 비슷해요!! 다만 사람이 일일이 적고 감시하는 게 아니라 명령어에 의해 챡챡 처리되는 것 뿐이랄까요. 하지만 이것도 결국 '물질' 이다 보니....화재나 전쟁으로 인해 소실되어 버리면 그걸로 끝이었어요.5. 요즘 = 기관이나 중앙에 맡기기왕정체제가 아니라 민주주의와 시장경제가 도입되면서 은행이나 보험사, 카드사와 같이 경제활동을 담당하는 기업과 중앙기관이 생겨나기 시작했어요! 엄청나게 거대한 정보를 크으으은 서버나 금고에 보관할 수 있었어요. 그것은 영원해보이고 사람들은 오래도록 보관할 수 있다고 생각하니 관심을 끄기 시작했죠. 내 돈은 금고에 잘 있을 거니까요.하지만, 자본주의는 그런게 아니었어요. 은행은 내 돈을 다른 사람에게 대출로 빌려주고 그 이자로 돈을 벌어요. 그리고 다른 사람이 갚은 돈으로 다시 내 예금을 채우죠. 졸라 돌려막기인 거에요. 사람들이 끊임없이 돈을 빌리고 다시 갚을 수 있게 다양한 상품들을 만들어요. 이 방식은 굉장히 효율적이고 아무 문제가 없을 것 같이 보였어요.하지만, 해킹을 당했어요.은행을 털렸어요서브프라임 모지기론 사태처럼, 무리한 상품의 실패는 수백개의 기업을 무너뜨렸어요. 수많은 사람들의 돈이 한 순간에 날아갔어요.서버가 먹통이 되어 거래가 안되는 경우도 있어요.지진 등의 천재지변이 나면 내 기록은 사라지고 말아요.단순히 큰 사옥을 지닌 곳이니까 영원불멸할 것 같았던 중앙기관도 하루 아침에 무너질 수 있단 사실을 우린 수 차례 경험했어요. 그럼에도 우린 뭘 어떻게 해야할 지 몰랐어요. 우리가 할 수 있는 건 사고가 터지면 변호사를 써서 소송을 하는 것 뿐이었어요. 우린 은행의 상품이 정확히 어떤건지, 보험약관이 뭔지... 카드사는 어떤 원리로 움직이는지...내 세금은 어떻게 쓰이고 있는지...우리 돈이 어떻게 거래되고 내 돈을 가지고 그들이 무엇을 하는지 하나도 몰라요. 그냥 속수무책으로 그들만 믿고 있는 거예요. 6. 블록체인의 탄생 = 모두가 장부를 가질 수 있게그래서 생각해봤어요. 한 곳에 모여있으니 문제가 생긴다면, 쪼개면 되지 않을까? 은행 한 곳을 터는 것은 쉽지만 1,000여명을 한꺼번에 터는 것은 불가능할테니까. 계모임에서 쓰던 그 장부를 엄청나게 많이 만들어서 모두가 가지면 어떨까? 누굴 못 믿거나 위조하거나 털리거나 불나서 사라질 일이 없을 거 아냐?? 라는 생각을 말이죠. 그런데 친구가 질문을 하네요!!친구 : 그런데 어떻게??나 : 인터넷이 있잖아!! 내가 온라인상에서 거래하면 그 기록이 남잖아~ 그걸 모두가 공유하는거지! 친구 : 모두가 누군데?나 : 응 그건 이제부터 모아야해!!친구 : 그럼 어쨌든 모인 사람들에게 모두 공유하면 내가 어제 김치한포기 시킨것도 다른 사람이 알게 되는거야??나 : 아니지;;; 니가 뭘 시켰는지 그딴 건 관심없어..그냥 얼마 거래를 언제 몇시몇분몇초에 어떻게 했는가만 기록에 남는거야! 그리고 다른 사람은 그걸 직접 눈으로 볼 수 있는 게 아냐.생각해봐. 넌 브런치 로그인한 기록을 눈으로 다 볼 수 있어? 며칠 몇시에 얼마나 로그인했는지 알 방법이 없지? 하지만 그 기록이 있을까 없을까? 그렇지, 반드시 있다구. 범죄수사할때도 그러자나. 우리 화면에는 시간/내용밖엔 안뜨는 문자메시지지만, 실제로 서버에는 발신위치, 수신위치, 번호정보 등등이 모두 숨겨져 있잖아. 또 하나! 너가 네이버에서 틴트를 검색하면 나중에 페북에서 틴트광고가 뜨지 않아? 우리의 방문기록이나 클릭한 기록들이 모두 남아있기 때문이야.이렇게 우리가 눈으로 보는 화면 뒤에는 수많은 정보들이 컴퓨터만의 전기신호로 저장되어 있어. 우리가 말하는 장부도 이런 식으로 저장되어 있는거라구.  물론 필요하다면 그걸 화면으로 띄울 수 있는 명령어를 만들 수도 있겠지.친구 : 그건 이해했어, 내가 직접 볼 순 없지만 마치 사이트 방문기록처럼 어딘가에 거래내역이 다 남아있다는 얘기지?... 그런데 아까 지금부터 모아야 한다는 사람들은 어떻게 모으는거야??나 : 그건!!..바로!!!! 다음에 설명해줄께!!또 공부해서 돌아올께용!!
조회수 3016

아마존의 56억 달러 성공에 감춰진 디자인의 비밀

아마존은 의심할 여지 없이 온라인 상거래에서 가장 영향력 있는 기업임에 틀림없다.미국 온라인 판매의 약 44%는 아마존을 통해서 이루어진다. 이는 대략 1/3의 미국인들이 아마존의 프라임 멤버십을 이용한다는 것을 의미한다.작년에만 56억 달러의 수입을 거둔 아마존은(비록 이중 연방정부에 낸 세금이 한 푼도 없어서 문제가 됐지만), 프라임 멤버십을 계속 이용할 것이라고 응답한 사용자가 전체 회원의 95%에 달한다.하지만 이런 것을 가능하게 한 아마존의 디자인에 대해 언급하는 사람은 거의 없다. 지금은 유명해진 아마존의 리더십 원칙들 살펴보면, “고객에 대한 몰입” 그리고 “발명과 단순화” 라는 오직 두 가지 원칙만이 제품과 서비스 개발에 대한 디자인적 방식과 관련이 있다.그런데 이런 두 가지 원칙에도 디자인에 관해 구체적으로 언급된 부분은 없다.미적인 관점에서 봤을 때, 아마존의 웹 스토어는 단순하지도 않고 예뻐 보이지도 않는다. 보통 그 두 가지를 좋은 디자인의 조건이라고 보는게 일반적인데 말이다.대신에, 아마존은 사용자 경험, 프로세스 및 기능을 단일화 하는데 중점을 두었다. 많은 디자이너들에게 있어, 비주얼적으로 난잡해보이는 아마존 디자인이 성공했다는 발상은, 다소 혼란스럽게 느껴지기도 한다. 그렇다면, 디자이너 입장에서, 미적으로 아름다워 보이지 않는 아마존의 디자인이 왜 사람들에게 먹히는지를 어떻게 해석해야 하는 것일까?아마존 디자인의 성공은 쇼핑 업계의(디지털이든 실제 물건이든, 럭셔리든 저가품이든) 가장 위대한 4가지 원칙을 지켰기 때문이다. 그들에게 있어서, 그 위대한 원칙은 첫째,1. 투명성프라이싱과 구매 과정을 분명하게 만들며, 누구나 쉽게 이해할 수 있어야 한다.얼핏 보면 아마존은 특별히 투명해 보이지는 않는다. 그간 아마존의 가변적 가격 모델을 생각해보면, 우버의 혐오스러울 정도의 급격한 가격 인상, 혹은 여행객들을 괴롭히는 비행기나 호텔의 급격한 가격 변동과 유사한 점이 있었다.그래서 아마존 역시 투명성 부족으로 비판을 받았으며, 벌금도 부과 당해 왔다. 비록 소비자들은 이러한 가변적 가격 모델에 신경 쓰지 않지만, 그들 나름대로 가장 싼 가격을 찾으러 조사를 하는 것에는 아주 익숙하다. 따라서 아마존의 가변적 가격 정책이 다른곳보다 특별하다고 할 수는 없다.그렇다면 왜 이용자들은 아마존의 가변적 가격 정책만 관대하게 받아들여 주는 것일까?가장 가능성 있는 이유로는, 아마존이 자신들의 프라임 서비스를 통해 온라인 쇼핑의 두 가지 장애물을 제거해줬기 때문이다. 그 중 하나는 배송에 있어 숨겨진 가격이고, 다른 하나는 온라인 쇼핑이 매장에 가서 사는 것보다 느리다는 인식이다. 프라임 서비스의 성공은 사용자가 쉽게 이해할 수 있도록 디자인을 잘 설계했기 때문인데, 1년 서비스 신청을 하면 2일 무료 배송을 받을 수 있고, 오스카 상을 받을 만한 훌륭한 영화들도 볼 수 있다. 이러한 프라임 서비스의 투명성(이해하기 쉬운)은 아마존으로 하여금 쇼핑에 있어 가장 주목할 만한 인터랙션 디자인을 만들 수 있게 하였다. 단순함과 우아함을 동시에 보여주는 아마존의 원클릭 구매 시스템(최근에 특허가 만료되는) 역시 이에 포함된다. 이 시스템은 아마존의 대쉬 버튼 디자인뿐만 아니라 아마존의 인공지능 비서인 Alexa가 만들어지는 초석을 마련하기도 했다.2. 실체성사람들이 두 가지, 혹은 여러가지 제품들 중 하나를 고를 때, 훌륭한 쇼핑 디자인은 그러한 제품 선택 과정을 실체적으로 보여주고 바로 결정을 내릴 수 있게 만든다. 따라서 사람들은 선택에 대한 정보를 잘 알게 된 상태에서 자신감 있게 결정을 할 수 있게 된다.아마존의 상품 표시 페이지는 엄청난 목표를 이룰 수 있게 기획되었다. 이용자들로 하여금 모든 제품의 특성을 쉽게 이해할 수 있게 한 것 역시 이에 포함된다. 보통 한 가지 물건만 파는(옷이나, 신발, 자동차 부품 등) 쇼핑몰 사이트에 가보면, 그 단일 물품의 특성에만 맞춰서 정보를 보여주곤 한다.이와는 대조적으로, 아마존은 상상할 수 있는 모든 제품을 팔 수 있도록 디자인 되었다. 이는 아마존은 다른 특정 품목이나 브랜드를 파는 사이트와 달리 상품 표시와 검색 결과 페이지가 우아하고 깔끔하게 보이지는 않는다는 것이다. 아마존은 이렇게 겉보기에 단점으로 보이는 것을 자신들만의 자산으로 변화시켰다. 아마존의 모든 상품 표시 페이지는 똑같은 모듈과 구조를 사용하고 있는데, 이는 일관성이 있기 때문에 이용자들로 하여금 어떤 상품을 검색하건 그 특성을 쉽게 이해하게 만든다.3. 신뢰성사람들은 자신들이 이용하고 있는 곳이 정직한 곳인지 알고 싶어한다.인터넷 쇼핑몰로써 아마존은 퍼스트-파티 판매(아마존에서 직접 판매하는 상품)와 써드-파티 판매(아마존의 전체 판매의 대략 절반을 구성하는)를 둘다 운영해야 하기 때문에, 일관성 있는 이용자 경험을 디자인한다는 자신들의 약속을 지켜야 하는 아마존은 큰 도전에 직면해 있다고 할 수 있다.한 가지 아마존의 쇼핑 운영에 대해 실망스러운 부분이 있다면, 그것은 여러 판매자들이 파는 물품을 검색했을 때이다. 예를 들어 어떤 판매자가 가장 믿을만한지, 배송비는 포함되어 있는지, 이용자들이 신뢰할 수 있다고 평가한 판매자는 누구인지와 같은 점들을 살펴보고, 자신 있게 결정하기까지는 많은 수고가 든다.이렇게 된 데에는 아주 흥미로운 이유가 있다. 아마존은 Etsy와 eBay와는 대조적으로 판매자들이 자신들만의 판매 페이지를 만드는 것을 꾸준히 막아왔다. 아마존에서 유저들은 쇼핑만 하기 때문에, 판매자들은 그저 아마존이 아직 하지 못하는 상품 조달과 배송만 하는 일꾼으로 보이기 마련이다. 이는 Uber와 Lyft에 등록된 운전 기사들이 회사가 자율주행차를 기다리는 동안 임시로 쓰는 과도기적 노동자들처럼 보이는 것과 유사하다.아마존이 직접 파는 상품과 서드-파티 판매자들이 판매하는 상품이 통합돼서 검색되는 것으로 인한 사용자들의 혼란과 불편은, 배송과 반품 절차라는, 사용자들이 훨씬 더 심각하게 받아들이는 문제에 일관적인 경험을 주기 위함이라고 아마존은 주장한다. 당신이 어떤 물건을 직접 아마존을 통해 사건, 혹은 아마존 마켓플레이스를 통해 사건 간에, 당신은 어쨌든 그 물건을 아마존에서 샀다고 느낄 것이다. 이는 아마존으로 하여금 아마존 프라임의 이틀 배송 시스템과 반품 프로세스를 서드-파티 판매자에게까지 적용 시킬 수 있게 만들었다. 이렇게 모든 배송과 반품 절차를 통합시키는 것의 목적은 어떤 물건이든 아마존에서 사는 유저들과 핵심적인 신뢰 관계를 구축하기 위함이다. 이와 반대로 만약 아마존이 서드-파티 판매자들 각각 이런 과정을 컨트롤 할 수 있게 허용했다면, 신뢰를 구축한다는 아마존의 목표는 훨씬 더 이루기 어려워 졌을 것이다.4. 유익함사람들이 자신들이 무엇을 원하지는 지, 무엇이 필요한 지 항상 아는 것은 아니다. 훌륭한 쇼핑 디자인은 사람들이 원하는 것을 예측해서 그것을 능동적으로 제공하는 것에 있다.아마존의 상품 상세 정보 페이지가 그 상품의 다양한 정보를 보여줄 수 있는 것처럼, 아마존의 검색 인터페이스(왼쪽 필터와 하단 카테고리 내비게이션)는 확장성이 뛰어나고 매끄럽게 조정되어 사용자들이 상황에 맞는 선택을 할 수 있게 해주기 때문에, 원하는 것을 바로 찾을 수 있다.하지만 아마존의 상품 디스플레이 페이지처럼, 왼쪽에 표시되는 검색 필터는 특정 상황에서는 카테고리에 완벽하게 맞춤으로 보이지 않는다. 예를 들어, 신발을 검색한다고 했을 때 아마존의 검색 툴과 자포스(아마존이 소유한 신발 전문 쇼핑몰)의 네비게이션을 비교해 보자. 자포스의 툴은 사용자 경험에 일관성을 부여해서 사용자들이 새로운 것을 배울 필요 없이 시스템을 통해 찾고자 하는 것을 빠르게 찾을 수 있게 하여 아마존이 가진 단점들을 해결하고 있다.디터 람스(독일의 유명 디자이너)가 말했듯이, 좋은 디자인은 제품을 쓸모 있게 만든다아마존의 비주얼적 디자인은 날씬해 보이지도, 간단해 보이지도, 아름답지도 않고 유저들의 감성적인 부분도 건드리지 않지만, 그 자체로 대단히 유용하다. 아마존의 기능과 그에 따른 미학은 효율적인 쇼핑 경험을 제공하는데 확실히 맞춰져있다. 사실, 아마존은 디지털 브루탈리즘의 일종으로 묘사될 수도 있다. 그것은 직접적이고 효율적이며, 가능한 사람들의 요구를 가장 덜 까다로운 방법으로 충족시켜 주려는 이상적인 목표를 가지고 있다.아마존의 성공은 디자인 업계에서 인정하고 싶지 않아 하는 한 가지 원칙을 분명하게 보여준다. 그것은 바로 ‘성공한 디자인이 꼭 아름다울 필요는 없다.’ 이다. 물론, 디자인이란 것이 그저 미적인 과제에 불과하다는 관념은, 연구 중심의 디자인적 사고가 실제로 널리 사용되며 오래 전에 틀렸음이 밝혀졌지만, 그래도 잘 디자인 됐다는 것이 꼭 아름다울 필요는 없다는 생각은 여전히 받아들이기 힘들 수도 있다. 디자인이라는 관점에서 아마존의 성공을 분석하기 위해선 그 인터페이스의 겉모습만큼이나 안에 숨겨진 시스템적 디자인 역시도 봐야 할 필요가 있다. 아마존의 디자인 철학은 사람들에게 많이 알려지지는 않았지만, 디자인으로 유명한 회사인 애플이나 이케아만큼이나 세계에 많은 영향을 끼쳤다. 아마존을 보면서 디자인이 별로 중요하지 않다고 생각하는 것은 분명한 실수다.아마존이 보다 나은 유저 경험을 만들기 위해 계속 애쓰고 있는 이러한 디자인 원칙들은 경쟁자들 입장에서 보면 기회가 될 수 있다는 사실에 주목할 필요가 있다. 각각의 원칙들을 뜯어보면 사람들이 쇼핑에 있어서 무엇을 중요시하는 지 알 수 있기 때문이다. 아마존은 회사가 앞으로 더 커짐에도 이런 원칙들을 고수할 수 있을까? 다른 경쟁사들이 사람들을 만족시킬 수 있는 더 나은 시스템을 만들 수 있을 때가 무르익은 것 같기도 하다. 개인적으론 월마트, 그들을 주목하고 있다.*글쓴이인 Jason Brush는 Creative and UX at Possible의 전무이며, LA에 있는 회사 지점에서 창의적인 사용자 경험 디자인을 감독하고 있다. POSSIBLE에서의 수상 경력 외에도, 그는 UCLA 파사데나에 있는 Art Center College of Desing에서 강의도 진행하고 있다.원문 : fastcodesign#더팀스 #THETEAMS #디자인 #디자이너 #인사이트 #아마존 #UX
조회수 1845

Genius? Jininus!

나는 인생을 살면서 많은 "천재"들을 만났다. 스타트업에 있다보면 더더욱 "영재""천재"로 불리는 수 많은 사람들을 보게 된다. 그들은 학문적으로 놀라운 성과와 스펙을 보유하고 있었다. 아마 당신이 한 회사를 운영하는 사람이거나 인사 담당자라면 분명 혹할 것이다. 하지만 정작 나는 같이 일하고 싶었던 사람이 단 한 명도 없었다. 주변에서는 천재들과 같이 일하면 성공할 것이라고 생각하지만, 사업적 결과물과 두뇌는 별개의 문제라고 나는 생각한다. 대단한 능력을 가지고도 빛 없이 사라진 사람들을 얼마나 많이 보았는가. 물론 나도 대단한 사람과 일하고 싶다. 그러나 그 기준을 "영특함"에 국한시키고 싶지는 않다. 사업적으로 혹은 사회적으로 더 나은 미래를 후손에 물려주기 위해서는 그 이상의 "무언가"가 필요하다. 지금부터 나에게 그 "무언가"를 가르쳐 준 "진짜 천재"에 대한 이야기를 하고자 한다. 그에 대한 이야기를 하기 전에 나에 대한 이야기를 가볍게 하고자 한다. 5년 전만 해도 나는 비전과 목표가 없었다. 어려서 부터 돈 욕심만 많았다. 대학교를 다니면서도 돈을 벌 수 있는 방법이면 수단과 방법을 가리지 않았다. 한 일화로 당시에 학원 강사 아르바이트를 하고 있었는데 도매시장에서 트렌디한 문구류를 사와 수업을 가르쳤던 중/고등학생에게 팔았다. 시간과 행동에 제약이 있는 학생들은 수업 시간에 벌어지는 소소한 쇼핑에 돈을 지불했다. 그러나 끝이 좋지 않았다. 학생의 부모님에게 알려져 결국 학원에서 해고 조치 되었다. 지금의 내가 돌이켜보면 엄청나게 창피한 일이다. 학생들에게 단순한 편리와 재미를 줄 순 있었지만, 돈 말고는 남는게 없었다.20대의 대부분은 가치 없는 돈벌이의 연속이었다. 혹자는 말한다. 우선 돈 벌고 가치 있는 곳에 쓰면 된다고. 그러나 이런 식의 무의미한 접근은 내가 가야할 길이 아니라고 느꼈다. 인생에서 가치 있는 일을 찾아야 했다. 그때 발견했다. 혁신, 도전, 열정이 정말 실천되고 있는 세계가 있다는 것을. 스타트업이라는 단어조차 생소했던 시기였다. 심지어 IT라는 분야를 그 전까지 제대로 공부해 본 적도 없었다. 스타트업의 "ㅅ"도 모르던 내가 이 세계에 적응할 수 있는 방법은 뛰어난 사람들과 함께 시작하는 것 뿐 이었다. 온갖 미사여구로 괜찮은 연봉과 복지를 내세우는 기업도 꽤 있었다. 그러나 나에게 가장 중요한 건 "내가 성장할 수 있는지"와 “구성원”이였다. 꽤나 당연한 조건으로 기업을 찾았음에도 불구하고 찾을 수가 없었다. 그러다가 첫 스타트업으로 선택한 게 라우드소싱 이라는 작은 팀이었다. (찾게 된 과정에 대해서는 다른 글을 통해 소개하겠다) 안정적인 연봉도 없고, 확실한 미래도 없었지만 내가 이 팀과 같이 해야겠다 결정한 건 "권진" 이라는 단 한 사람 때문이었다. 모든 기업이 그렇지만 누구나 회사에 합류하면 3개월간의 수습기간을 거친다. 스타트업이라고 예외는 아니다. 오히려 더 냉정하게 자신을 되돌아 보는 시간을 가져야 한다. 나는 내 스스로를 입증하고 싶었다. “제가 3달 안에 이 회사가 성장할 수 있는 계약들을 가져오겠습니다. 그 정도 능력도 발휘 못한다면 제 발로 나가겠습니다” 3달 동안 권진은 일에 대해서 전혀 간섭하지 않았다 . 팀워크에 있어서 가장 중요한 부분은 신뢰라고 생각한다. 하지만 신뢰라는 부분이 친하다고 해서 혹은 비전과 목표가 같다고 해서 생기는 것이 아니다. 각자의 위치에서 최고의 성과를 목표로 내고, 한계를 뛰어넘어 성장하는 모습을 보여줄 때 강력한 신뢰가 생긴다. 서로가 같이 일하고 싶은 마음을 만들어 주는 것.이게 팀워크의 핵심이다. 나는 나대로 권진은 권진대로 각자가 맡은 일들을 완벽하게 수행했고, 우리는 그 일들을 하나의 사업으로 만들어 갔다. 그는 나에게 따로 주저리 주저리 피드백을 하지 않았다. 하지만 행동으로 결과물의 중요성을 보여주었고, 나는 3달동안 7건의 B2B 계약을 성사시켰다.애초에 같이 할 사람을 정할 때는 모든 부분을 면밀히 살피고 고민해야 하지만, 내가 같이 하기로 결정 했다면 상대가 최고의 결과물을 낼 수 있도록 믿어주는 것. 내가 배운 첫번째 교훈이었다.실력을 보여주었다고 환상적인 Fit일까? 누구든 본인이 만들어 내는 결과물을 혼자만의 능력이라고 오판하기 쉽다. 내가 영업처를 설득하고, 계약서를 체결해 왔기 때문에 내가 없었으면 이 계약도 없었을 것이다. 감각적이고 환상적인 디자인을 뽑아냈는데 이건 순전히 나의 재능에 의한 것이다. 팀원들이 이런 생각들을 하기 시작한다면 그 팀은 단시간 내에 모래성처럼 무너질 것이다. 권진은 개인이 만들어 내는 결과물도 팀원들이 각자의 분야에서 해 온 노력들의 최종산출물이라고 생각한다.영업처를 설득할 수 있었던 건, 우리 팀이 환상적인 서비스를 만들어 주었기 때문이다.나의 디자인은 기획팀과 마케팅팀의 노력을 하나로 담은 것 뿐이다.톱니바퀴처럼 팀원들이 맞물려 돌아가며 서로의 존재에 대해 감사함을 느낄 때 놀라운 일이 벌어진다. 내가 배운 두번째 교훈이다.권진이 지켜온 2가지 요건이 계속 좋은 사람을 팀으로 영입할 수 있었던 강력한 요소였다고 생각한다. 나의 실력을 우리 팀에 입증하는 것. 나의 결과물은 우리 팀 노력의 산물 이라는 것.권진과 함께 일하며 느낀 그의 주요한 능력은 개발도 디자인도 아니었다. (물론 이 2가지도 잘한다)팀 내의 균형을 맞추고 팀원들이 끊임없이 성장하게 도와주는데 있다. 개성 넘치는 팀원들을 하나의 비전으로 묶어서 성장할 수 있게 하는 사람을 나는 살면서 권진 이외에는 아직 본 적이 없다. 장담컨데, 만약 현재 더팀스 대표가 권진이 아니라 다른 사람으로 바뀐다면 팀원들은 전부 팀을 나갈 것이다. (연봉이 대폭 인상된다 할지라도)그래서 나는 이걸 Jin in Us 라고 명칭했다. 권진이라는 확실한 구심점 안에 개성넘치는 팀원들이 한 몸처럼 목표로 향해가는. 나는 앞으로 대표라는 역할을 할 생각이 없다. 권진 이라는 사람보다 대표의 역할을 충실히 수행할 자신이 없어졌기 때문이다.리더십이라는 분야가 있다면 그는 천재가 아닐까?내가 우리 팀에 합류시키고 싶은 사람이 있을 때면 하는 단골멘트로 이 글의 마무리를 짓는다.“우리 팀의 권진을 만나보세요. 분명히 함께 하고 싶을 겁니다”#더팀스 #THETEAMS #천재디자이너 #풀스택개발자 #CEO #리더십 #경험공유 #팀원자랑 #팀원소개 #회사의자랑
조회수 7488

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

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을 활용하여 다양한 템플릿 작업에도 사용할 수 있다고 생각합니다.#스타일쉐어 #개발팀 #개발자 #개발환경 #인사이트
조회수 1625

어니스트펀드 디자인, 고객을 먼저 배려하다.

지금 세상은 모두 새롭게 디자인되어가고 있다. 우리가 물건을 구매하고 사용하는 방법도 그에 따른 생활 방식도 바뀌고 있다. 이런 흐름 속에서 우리가 접하는 가장 보수적인 서비스 중에 하나인 금융서비스도 피해갈 수 없다. 이렇게 빠르게 바뀌는 시장 상황에 고민해야만 하는 부분은 이윤 창출만이 아니라, 비즈니스의 장기적인 성공을 돕는 탄탄한 디자인 전략이다.Adam Grant펜실베니아 와튼스쿨의 경영학 교수, Adam Grant는 'Give and Take'라는 책을 통해 진정으로 성공하기 위해서는 조건 없이 주변의 성공을 돕는 Giver가 되라고 강조한다. 열심히 일하고, 운도 따라주고, 실력까지 있다 해도 이익만을 추구하는 Taker라면 단기적인 목표를 이룰 뿐이라고 이야기하고 있다.바로 이 부분이 어니스트펀드에 합류하기 전 뉴욕과 서울에서 커머스, 엔터테인먼트, F&B, 소셜 등 다양한 서비스를 개발하며 가장 크게 느꼈던 부분이다. 고객이 인지하지도 못했던 어려움을 해결하고 당연하게 넘겼던 부분까지 섬세하게 배려하여 감동을 주었을 때, 단순히 매출을 올려주는 제품이 아니라 고객의 삶을 변화시키는 경험을 디자인했을 때, 그 서비스는 고객의 마음을 얻고 성공할 수 있었다.올해 1월 어니스트펀드 제품개발팀의 Head of Design으로 합류한 후, 가장 큰 고민이 바로 고객을 배려하는 디자인 전략을 세우는 일이었다. 어니스트펀드가 추구하는 정직, 신뢰, 미래, 안전 등의 가치는 보이지 않는 부분까지 고객을 배려해서 디자인해야만 얻을 수 있는 귀중한 자산이고, 현재 어니스트펀드는 Honest Design Thinking이라는 디자인 전략을 통해 다양한 고객을 배려하고 가치를 실현하는 제품과 서비스를 만들어가고 있다.  What is Honest Design ThinkingDesign Thinking이란 고객의 니즈와 욕구를 실현하는 전략과 개발 방법을 찾는 과정이다. 혁신적인 디자인 회사 IDEO의 CEO, Tim Brown은 다양한 제품과 서비스를 디자인하며 기업의 차별화를 위해서는 사업전략, 제품 개발, 마케팅 등 모든 프로세스에 Design Thinking 방법론을 적용해야 한다고 말했다. 이러한 Design Thinking을 어니스트펀드에 적용한 것이 바로 Honest Design Thinking이고, 어니스트펀드 팀원과 실제 고객들이 함께 참여했던 Honest Camp로 시작하였다. Honest Camp는 일방적인 인터뷰 방식이 아닌 고객과 함께 금융서비스를 직접 만들어가는 과정을 통해 진심으로 고객이 얻고자 하는 것이 무엇인지 공감하고 효과적으로 고객을 분석하였다. 이를 통해 서로의 말과 행동을 관찰하고, 생각과 감정을 파악하여 내재된 가치를 찾아나간다. 따라서 금융, 공기업, 프리랜서, 취준생, 워킹맘 등 20대 여대생부터 40대 유통 사업가까지 다양한 경험과 라이프스타일을 가진 사람들이 참여하였다.  Honest Camp를 통해 발견한 고객 가치와 분석 결과를 토대로 어니스트펀드의 신규 제품 및 서비스를 개발하고 평가하는 과정까지 진행되는데, 이 과정에서는 어니스트펀드의 디자이너부터 마케터, CFO, 대출 심사자, 서버 엔지니어, CS 담당자 그리고 대표까지 어니스트펀드를 책임지고 있는 모두의 의견이 반영된다.Honest Camp : IntroHonest Design Thinking 프로세스는 1) Honest Camp를 통해 고객을 최대한 깊게 공감하고, 2) 행동을 관찰하여 문제점과 기회를 발견한 후, 3) 빠르게 개발하여, 4) 사용성이 아닌 가치 실현을 평가하는 4가지 단계로 이루어져 있다. 하나하나 자세히 살펴보도록 하겠다.4 Steps in Honest Design Thinking1.  공감하기 (Persona + Empathy + Journey map) PersonaHonest Camp에서 Millennial과 GenX 고객 등 다양한 고객들을 성향에 맞게 팀으로 구성하였다. 서로에게 다양한 질문을 던지며 자신들을 대표하는 실질적인 페르소나를 팀별로 만들었다. 팀원들의 성격, 라이프스타일과 목표를 닮은 총 5명의 페르소나가 탄생했다.예를 들어, 김동준(32)이라는 페르소나는 Idealistic Freelancer으로 대표되는 남자이다. 이 시대를 자기 뜻대로 살아내는 Millennial 세대로서 자유롭지만 항상 바쁘고 영감을 받기 위해 여행을 자주 하는 등 자신을 위한 지출이 많다. 투자 경험은 많이 없지만 불로소득을 원한다. 지금보다 더 멋지고 자유로운 삶을 위해 이민을 고민한다.Honest Camp : PersonaEmpathy각 페르소나가 주로 어떤 말(Say)과 행동(Do)을 하는지, 무슨 생각(Think)과 감정(Feel)을 갖고 살고 있는지 깊게 논의했다. 또한 주위에서 보고(See) 듣는 (Hear) 것들은 무엇이 있을지 발견했다. 그리고 대표적인 어려움(Pain)과 꿈꾸는 것(Gain)을 공감했다. 예를 들어, 김동준의 어려움은 늘 주변을 챙겨야 하고, 수입은 안정적이지 않은데, 항상 자신을 포장해야 하는 압박을 느끼는 것이다. 반면 유명강사로 성공하고 싶고, 자수성가하여 자유롭게 살고 싶은 꿈이 있다.Honest Camp : EmpathyJourney map마지막으로 각 페르소나의 금융 관련 목표(1억 모으기, 내 집 마련, 대출 완납 등)를 선정하고 목표를 이루기 위한 Journey map을 팀별로 그렸다. 각 단계마다 어려움을 해결하기 위한 기능, 서비스, 콘텐츠, 상품 등 다양한 아이디어를 교환하고 감정 곡선을 추가하여 어려움이 해결되었는지, 원하는 가치를 이루었는지 확인했다. 당장은 현실적으로 불가능해 보여도, 창의적인 아이디어를 위해 상상할 수 있는 범위를 제한하지 않았다.Honest Camp : Journey mapHonest Camp : Journey map2. 발견하기 (Customer values + Idea map + MVP Scenario) Customer valuesHonest Camp에 참여한 다양한 사람들의 행동을 분석하고 페르소나를 연구한 결과 5가지 고객 가치를 발견하였고 아래와 같이 과감하게 공개한다.Idea map고객가치를 실현할 수 있는 기능, 서비스, 콘텐츠, 상품 등 신선한 아이디어를 논의하였고 비즈니스적인 영향력과 개발 리소스를 고려하여 최종 MVP (Minimum Viable Product)를 선정하였다. Honest Design Thinking : Idea mapMVP 시나리오각 페르소나별로 MVP 시나리오를 제작하고 다시 한번 회사 내에서 In-house 캠프를 열었고, 팀원들과 함께 우리가 선정한 MVP가 진정한 고객가치를 실현 할 수 있는지에 대해 다시 한번 검증하였다.  Honest Design Thinking : In-house Camp3. 개발하기(UX + Design + Prototype)본격적으로 하나의 서비스로 개발하기에 앞서 완성된 UX 및 디자인 전략에 따라 홈페이지 내 정보구조(IA), 사용자 경험 (Use-case scenario), 화면 설계(Wire frames), UI 디자인을 진행 중이다. 또한, 다양한 디자인 컨셉을 추출하고 발전시키는 동안 빠르게 프로토타입을 제작하여 Minimum Viable Product를 Most Valuable Product로 발전시키는 과정을 거친다. 4.  평가하기 (Evaluate)가장 중요하지만 놓치기 쉬운 것이 평가하는 과정이다. 고객가치과 사용목적이 자연스럽게 연결되도록 제품, 서비스, 콘텐츠 등이 올바른 자리에서 제 기능을 하고 있는지 확인하고 또 확인해야 한다. 현재 진행 중인 디자인과 프로토타입 평가가 완료되면 올해 안에 새로운 어니스트펀드를 만나볼 수 있을 것으로 기대한다.Outro다양한 팀원 그리고 고객들과 함께 만들어내는 Honest Design Thinking 과정에 정답은 없다. 그렇기 때문에 어떤 결과를 가져올 것인가에 대한 불안감을 느끼기도 한다. 대부분 이 과정이 어렵다고 느끼는 이유는 우리가 사는데 바빠서 본질적인 문제를 파악하고 효율적으로 해결할 기회가 많지 않았기 때문이다. 가장 중요한 스킬은 믿음이다. 나 자신과 주변을 먼저 파악하고 다른 이를 배려하는 마음에서 시작이 되어야 아무리 어려운 문제도 쉽게 해결할 수 있다고 생각한다.Steve Jobs, 2015Honest Camp에서 애플의 창업자인 스티브 잡스 영화의 마지막 장면에 대한 이야기를 했었다. 스티브 잡스는 위 장면에서 십 수년간 부인해왔던 딸, 이제 막 대학생이 된 리사에게 다가가기 위해 자신의 믿음을 아주 쉽게 설명하였다.I’m gonna put thousand songs in your pocket.잡스는 벽돌같이 투박하게 무거운 워크맨 대신 심플하고 가볍지만 1,000개의 음악을 자유자재로 들을 수 있는 아이팟을 만들기 위해 음악 시장 전체를 뒤흔들어야 하는 어려움이 있었지만, 그의 믿음은 고객의 삶을 변화시키는 새로운 비즈니스 모델로 이어지고 그가 사라진 지금도 성공을 거듭하고 있다. 대부분의 사람들은 지금까지 복잡하고 까다롭고 불친절한 금융 서비스에서 많은 기회를 알지 조차 못했다. 어니스트펀드는 금융을 정직하게 바꾸는 비전을 토대로, 저성장 저금리 저출산 등 답답한 시대를 살아가는 사람들이 자신의 자산을, 크던 작던 상관없이, 최대한으로 활용하여 원하는 삶의 방향으로 나아갈 수 있다고 믿는다. 고객들은 상품에 투자하기 전에 얼마나 정직하고 안전하게 어니스트펀드가 고객의 자산을 생각하고 관리하고 있는지에 집중한다. 그런 믿음이 쌓여서 우리는 지금까지 올 수 있었고, 앞으로도 어니스트펀드가 숫자보다 다양한 고객의 불편함과 삶의 가치에 집중하는 시간이 많아질수록 당신의 마음을 놓치지 않을 거라고 믿는다. #어니스트펀드 #디자인 #디자이너 #철학 #고객중심 #인사이트
조회수 3037

14. 어니스트펀드 로고 제작 스토리

얼마 전 ‘어.바.시’에서 어니스트 팀에게 어니스트펀드 로고 제작 스토리와 디자이너의 프로젝트 진행과정에 대해서 들려드렸다. 디자인에 관심이 많은 몇몇 팀원에게는 어니스트펀드 로고의 의미에 대해서 알려드린 적이 있지만, 팀 전체에게 설명할 기회가 없었다. 그래서 이번 어.바.시를 통해 로고의 정확한 의미를 설명하고 우리의 본질이 무엇인지 한 번 더 되짚어보는 시간을 가졌다.‘어.바.시’는 한국형 TED라고 불리는 ‘세.바.시(세상을 바꾸는 시간)’에서 따온 이름이다. 하지만 나는 어.바.시를 ‘어니스트하게 바뀌는 시간’으로 새롭게 풀어내고 나의 생각을 정직하게 이야기할 수 있는 자리로 만들었다. 어.바.시에 대한 설명을 간단하게 덧붙이자면 ‘개인과 팀의 성장을 위해 개인이 알고 있는 지식을 공유하는 자리’로, 짧게는 매주에 한 번 씩 팀원들이 돌아가며 어.바.시를 빛내주고 있다.<어니스트펀드의 가장 핫한 공간 agora에서 열린 어.바.시>어니스트펀드가 세상에 나타나기 전, 우리는 무수히 많은 고민을 하고 또 했다.“우리가 만들고 싶은 브랜드는 어떤 모습일까?”“우리가 가장 잘할 수 있는 본질에 집중하자!”그렇게 브랜드의 본질이 되는 ‘정직’이라는 키워드가 수면 위로 올라왔고, 우리는 ‘어니스트펀드’라는 본질에 집중하지 않을래야 않을 수 없는 브랜드 네이밍으로 출발선 너머에 발을 내딛었다.내딛은 첫 발이 브랜드 네이밍이라면 다음으로 내딛을 발은 브랜드의 얼굴인 로고 디자인일 터.<루피가 염원하는 프라다(좌)와 우버(우)의 이미지>“프라다같이 고급스럽고 세련된 느낌이면서 동시에 우버처럼 모던하고 간결한 이미지가 좋겠다!” 루피(서상훈 대표 영어 이름)는 정직(Honest)이라는 키워드 하나만으로 로고 디자인이 어려울까 봐 어마어마한 도움(?)말을 건네 왔다.바를 정(正)자를 고급스럽고 세련되게 획을 그어 모던하고 간결한 이미지의 로고를 디자인하려다가 참았다.난감했다. 정직이라는 추상의 끝판 키워드와 어니스트펀드(HonestFund)의 짧지 않은 브랜드명을 어떻게 하면 잘 풀어낼 수 있을까…1. 활용도를 고려하다멋진 로고를 기대하며 나를 바라보던 팀원들의 눈빛이 아직도 선하다. 그 눈빛들을 저버릴 수 없기에 나는 고민하고 또 고민했다.우선 어니스트펀드라는 브랜드가 어떻게 운영될지 생각해보았다. P2P금융의 핵심은 ‘온라인 플랫폼’이다. 거품 없는 효율적인 금융시스템을 만들기 위해서는 온라인 플랫폼이 정답이다. 그렇다면 고객들과의 소통이 대부분 온라인상에서 이뤄질 텐데, 각기 다른 온라인 환경(ex. 브런치, 페이스북, 자사 웹사이트 등)에 적용할 수 있는 로고가 필요하겠다는 생각이 들었다.그리고 어니스트펀드는  두세 글자의 간편한 브랜드명이 아니기에 한눈에 어니스트펀드를 전달할 수 있는 상징적인 무언가가 필요했다. 그래서 시의적절하게 사용 가능함과 동시에 상징적인 의미를 담을 수 있는 심볼을 가진 시그니처 타입(Signature Type)을 선택했다.<심볼과 로고타입, 시그니처 타입에 대한 설명>2. 심볼(Symbol)에 의미를 담다HonestFund의 약자인 HF를 활용해 심볼을 디자인했다. 앞서 말했던 것처럼 우리의 본질이 너무 추상적이어서 이미지화시키기 쉽지 않을뿐더러, 비교적 긴 브랜드명(대부분의 게임에서도 여섯 글자까지 ID길이를 제한하지 않던가…!)이기에 줄여서 표현할 수 있는 약자가 필요했다. HF도 H와 F의 대소문자 조합을 어떻게 하느냐에 따라 각기 다른 스토리로 심볼을 풀어낼 수 있다.<핀터레스트에 HF logo를 검색했을 뿐인데… 이렇게 다양한 로고가 존재하다니…!>HF, hf, Hf 정도로 추려내고 어떤 스토리를 심볼에 담을까 고민했다. 우리가 하고 싶은 이야기는 무궁무진했지만 간결하고 직관적인 스토리로 압축해야 했다. 가령 우리가 무슨 일을 하려는 지 1분 내의 짧고 굵은 설명이 필요한 것처럼 말이다. 새로운 중・저금리 시장, 대출자와 투자자의 효과적인 연결, 혁신적인 기술 바탕의 플랫폼… 이것들을 정직이라는 본질로 이뤄내는 것이 우리 스토리 핵심이다.2-1. 크리에이티브한 여정HF, hf, Hf를 그리고 또 그렸다. 스케치를 보자니 이것들이 알파벳인지 외계어인지 알아볼 수 없을 정도로 춤을 추고 있었다.필자는 극심한 창조활동을 하거나 철야를 하면 방언이 터지는 버릇이 있다. 이 상황을 즐기지 않으면 답이 없다는 것을 본능적으로 느끼는 것인지, 체력적으로는 고되지만 이 순간을 즐기려고 노력하는 아우성인 듯하다. 마치 어린아이들에게 그림을 그리며 설명하듯 hf를 그리며 우리의 브랜드 스토리를 중얼거렸다.< 아 지난 날 의식의 흐름이여… Adios…!>그러다가 거짓말처럼 뇌리에 스쳐 지나간 스케치가 있었는데 그게 바로 지금 로고의 초안이 되리라고 상상이나 했겠는가…2-2. Story Visualizationhf에 새로운 중저금리 시장에 혁신적인 기술을 바탕으로 대출자와 투자자를 효과적으로 연결해준다는 스토리가 담긴다면 어떨 것 같은가? 저 가늘고 작은 소문자 2개에 묵직한 스토리를 담아낸 다는 자체가 과해 보일 수 있지만, 너무나 완벽하고 깔끔하게 맞아떨어졌다. 중얼거리며 한 낙서(?)가 로고의 결정적인 키 비주얼(Key visual)을 안겨준 셈이다.2-3. hf심볼에 담긴 의미h의 세로획은 대출시장 범위를 상징한다. 위로 올라갈수록 고금리 시장을 의미하며 밑으로 내려올수록 저금리 시장을 의미한다. 어니스트펀드는 대출시장의 거품을 제거하여 중・저금리시장을 선도하기 위한 서비스이기에 비교적 밑에 포지셔닝된다.정직한 중・저금리시장을 만들기 위해서는 우량 대출자 모집부터가 시작이다. 대출자를 의미하는 ‘하단의 점’은 곧 어니스트펀드 서비스의 출발점을 의미한다. ‘상단의 점’은 투자자를 의미하는데, 하단의 점이 상단의 점까지 이어지면서 ‘대출자에게는 더 낮은 금리(Low point)를, 투자자에게는 더 높은 수익률(High point)을 제공’한다는 스토리를 그려낸다.f의 가로획은 대출자와 투자자가 연결되는 스토리 위에 위치하는데 이것이 바로 ‘어니스트펀드 플랫폼’을 의미한다.대출자와 투자자를 연결하고 금리의 거품을 제거하기 위해서는 비즈니스 모델이 필요하다. 어니스트펀드는 혁신적인 기술력을 바탕으로 금융시스템을 변화시켜 나갈 금융 플랫폼이다.3. 보도니(Bodoni)로 쓴 HonestFund< 보도니 서체는 ‘보그(VOGUE)’ 잡지 타이틀 서체로도 유명하다. >보도니 서체는 학부시절 디자인사 수업시간에 처음 알게 됐다. 보도니는 대표적인 모던 스타일 서체로 ‘가로 획과 세로획의 대비가 뚜렷한 매력적인 서체’라는 정도만 기억하고 있었다. (‘보도니’는 영어 서체의 이름이다. 흔히 알고 있는 맑은고딕, 나눔고딕처럼 ‘맑은’, ‘나눔’과 같은 서체의 이름이다.)< 수직선과 수평선의 조화가 아름다운 보도니로 쓴 어니스트펀드 >HonestFund 로고타입(위 그림에서 설명했듯이 로고 구성에 있어서 hf가 심볼이라 한다면, HonestFund는 로고타입이라고 한다.)에 쓰일 서체는 어떤 것이 좋을까 고민하다가, 수평・수직의 조화가 어니스트펀드의 ‘정직함’을 함의할 수 있지 않을까 하여 보도니 서체에 대해 조금 더 자세히 알아보았다.3-1. 보도니와 디돈양식(Didone Style)보도니 서체에 대해 설명할 때 크게 강조되는 부분이 두 가지가 있다. 하나는 앞에서 간단하게 언급한 ‘모던스타일’, 그리고 다른 하나는 ‘디돈양식’이다. 모던스타일(Modern Style)은 가로・세로 획의 선 굵기가 강한 대비를 이루고, 기존의 펜글씨와 명확한 차이점을 나타내는 현대적 서체 양식을 말한다.< 보도니와 흡사한 디도(Didot) 서체(좌), 그리고 활자를 찍어내는 모습(우) >디돈양식(Didone Style)은 대표 서체인 디도(Didot)와 보도니를 결합한 이름이다. 18세기 수학적 형태와 비례미를 반영하여 완성한 ‘킹스로만체(King’s Roman)’를 기본으로 삼은 양식으로, 기존의 서체들보다 기하학적이고 수학적 원리를 훨씬 더 끌어낸 서체가 바로 보도니다. 이것이 가능했던 이유는 질 좋은 종이 개발과 활자 조각기의 정교화, 인쇄용 잉크의 고급화 등 인쇄술 발달로 얻어낸 결과이기 때문이다.3-2. 보도니가 가진 역사와 정신을 취하다< 글자 획 끝의 유무를 가지고 산 세리프체(위)와 세리프체(아래)를 구분한다. >보도니 서체를 알아가면서 우리가 추구하는 브랜드 방향성과 맞닿아있는 부분이 많다는 것을 느낄 수 있었다.세리프체(명조체)의 클래식한 아름다움과 산세리프체(고딕체)의 군더더기 없는 깔끔함이 동시에 느껴지는 서체로 유명한 보도니는 기존 금융권들이 가지고 있는 묵직함과 핀테크 기업의 심플한 매력을 동시에 담기에 충분한 서체다. 수학적 원리로 그려지는 보도니가 보여주는 정교한 이미지 또한 우리가 취해야 하는 정직과 맞닿아 있었다.< 수학적 원리를 바탕으로 그려지는 보도니 서체와 나란히 쓰일 수 있도록 심볼 디자인 역시 논리적으로 그려내기 위해 좋은 비율을 철저하게 구상했다. >보도니는 발전시킨 인쇄술로 타이포그래피 역사의 큰 획을 그었고, 어니스트펀드는 혁신적인 기술력을 바탕으로 금융시스템을 변화시킬 것이다. 어니스트펀드도 보도니처럼 혁신적인 기술로 금융계에 큰 획을 그을 것이다.4. 맺으며어니스트펀드는 혁신적인 플랫폼을 지향하기에 급변하는 ‘대 온라인시대’의 물살을 잘 타야 한다. 구글이 아이덴티티를 리뉴얼하여 발전시키 듯, 우리도 시의적절하게 브랜드를 조금씩 발전시켜 나갈 것이다. 훗날 로고의 형태에서는 초심으로 머릿속에 그려낸 어니스트펀드의 큰 그림이 보이지 않을지도 모르겠다.브랜드를 반으로 나눈다면  ‘변해도 되는 것’과 ‘변하지 말아야 할 것’으로 나눌 수 있다. 로고 디자인은 그 시대 사정에 맞게 변할 순 있지만, 우리가 만들고자 했던 새로운 중・저금리 시장, 그것을 혁신적인 기술로 선도하는 모습, 그리고 누구나 정직하고 싶지만 아무나 정직할 수 없다는 것을 알기에  우리가 직접 만들고자 한 ‘정직한 금융’은 변하지 말아야 할 모습이다.금융과 IT를 결합하여 기존의 대출·투자 경험을 혁신하는 P2P금융 스타트업, 어니스트펀드의 이야기가 연재될 팀 브런치에 많은 관심 부탁드립니다.어니스트펀드에 대해 더 알고 싶으시다면, 어니스트펀드 홈페이지를 방문해보세요.#어니스트펀드 #디자인 #로고 #로고디자인 #인사이트 #디자이너 #CI #CI제작 #성장 #후기
조회수 1118

[앵커리어랩]연구보고서 디자이너 '김상은'

밍케터)  인터뷰에 임하시는 각오 부탁드려요! 말량광이) 인터뷰를 그만할 때가 되지 않았나..ㅎㅎ아니에요! 열심히 해야죠. 하하!밍케터)  (밍무룩...)제1장. 키보드와 함께하는 손_ 디자인의 원천밍케터) 회사에서 하시는 일 소개 좀 해주세요.말량광이) 음..일단 웹 디자인, 앱 디자인, 캐릭터 디자인 등 각종 디자인을 도맡아 하고 있습니다.디자인 결과물 중 빙산의 일각.JPG  아 각종 쇼핑도 도맡아 하고 있습니다. 오늘은 화이트 보드를 구매했습니다! 회의실에 걸 예정인데 배송비가 비싸서 고민이네요… 흠!쇼핑 결과물 중 빙산의 일각.JPG 밍케터)  자소설닷컴 디자인 철학이 궁금합니다!! 알려주세요!!말량광이) 자소설닷컴 초기에는 ‘신뢰도’에 중점을 두었어요! 아무래도 개인의 소중한 정보가 들어있는 곳이니까요~이번 시즌에 사이트를 리뉴얼 하면서 분위기를 다르게 꾸몄어요.지금의 자소설닷컴은 또래 같은 느낌이에요.“무겁고 딱딱”에서 “재미있고 유쾌”로 정리가 되었죠!밍케터)  네네 동의합니다! (끄덕끄덕)자소설닷컴 메인컬러에도 변화가 있던 것으로 아는데요! 말량광이) 가장 초반에는 노란색+회색이었구 그다음 버전에는 남색+주황색이었어요! 현재는 주황색 + 회색입니다! 밍케터)  혹시 도입해보고 싶은 색 있으신가요?말량광이) 형광색이요.(단호) 현재처럼 기능에 최적화된 사이트가 아니라면 꼭 써보고 싶어요.밍케터)  혹시 사이트 디자인을 변경하시는 과정에서 재미있었던 에피소드 있으신가요?말량광이) 자소설닷컴 초기 작업할 때는 그래픽에 빠져있었어요.유행에 따라서 그래픽을 화려하게 넣었었죠!사람들은 이쁘다 이쁘다 했는데 정작 쓰는 사람들은 많이 튄다고 느꼈었나 봐요!한 번은 사이트 사용자분 중에 이직을 준비하시던 분이 회사에서 사이트를 몰래 사용하고 있는데 '너무 눈에 띈다'라는 의견을 주셨던 적도 있습니다!밍케터)  자소설닷컴의 모든 디자인을 전적으로 담당하고 계시잖아요~? 가장 힘든 디자인과 가장 즐거운 디자인을 꼽는다면?말량광이) 재미있는 디자인은 얼마 전 진행했던 유니브 엑스포 제작물 같은 것들이요! 유니브 엑스포 제작 결과물 중 빙산의 일각.JPG 재미없는 디자인은 홈페이지 디자인이요… ㅎㅎㅎ더 이상 넣을 공간이 없는데 중간중간 기능추가가 되니까 꾸역꾸역 넣고 있습니다...ㅎㅎ 채팅도 중간에 넣었죠… ㅎㅎㅎㅎㅎ그런데 대표님이 광고를 넣는다고 하셔서 당황스러웠어요ㅎㅎㅎㅎㅎㅎㅎㅎㅎㅎㅎ최대한 티 안나게 넣어야죠! 밍케터)  디자이너님으로서 팀원들을 색으로 표현해 주세요! 간단한 이유와 함께!  문케터 문규 -> 철쭉"이상하게 발랄해요. 그냥 발랄이 아니고, 엉뚱하게 발랄해요"주케터 주연 -> 라임"상상도 할 수 없을 만큼 발랄해요. 문규씨와 주연씨의 발랄함 정도는 비슷한 것 같아요"밍케터 민지 -> 빨강"딱 부러진다는 느낌이에요. 열심히 하기도 하고, 말투나, 일 처리도 그렇구요" 데이터 초롱 -> 브라운 "차분하니 묵직한 느낌이 있어요.가벼운 스타일의 사람이 아니에요."pm 상호 -> 남색"진중하고 발랄함의 경계에 있는 사람이에요.남색이 그런색이에요" 개발 선빈 -> 겨자"말할 때 핵심을 톡톡 찌르는게 있어요.그리고 알게 모르게 웃겨요." 대표 수상 -> 초록색(feat. 대표로서)"성실한 느낌이요. 회사에서의 대표님 색은 바름, 착한 대표님, 청년의 모습이에요"대표 수상 -> 베이비 블루(feat. 남친으로서)             "애같아요. ㅎㅎ"  제2장. 취준이_제 2의 인격밍케터) 자소설닷컴의 공식 마스코트 취준이 소개해주세요!말량광이) 캐릭터 디자인을 한 번도 해본 적이 없어요 사실! 파워퍼프 걸 참조해서 그래픽으로 만들어 놨던 애를 발전시켰죠!초반엔 참 미국스러운 친구였어요.다중이 취준이.JPG 밍케터)  취준이 공식 이모티콘화에 대해서 어떻게 생각하시는지?말량광이) “~~~너무 귀찮아~~~~”농담이구요~ 사업화해서 수익을 5:5로 나누면 할 마음이 있습니다.ㅎㅎ밍케터)  취업 못 하게 생긴 취준이에게 격려의 한 마디 해주세요!말량광이) "넌 머리스타일만 바꿔도 괜찮을 거야 ^^" 사실 열심히 하는 순.진.한 취준생.바로 우리네 모습 아니것어요~밍케터)  (급 구수한 마무리다)    제3장. 입_철두철미한 피드백의 근원밍케터)  매일 문케터(=페이스북 콘텐츠 담당)에게 디자인 피드백을 해주시고 계시잖아요? 디자이너님께 문케터의 존재란?말량광이) 우선 가르쳤던 사람 중에는 제일 발전속도도 빠르고, 퀄리티 좋고, 의욕 넘치고 그렇습니다.ㅎr….그런데 고집이 있어요. 예를 들면 핑크색, //사선// 같은 것들? 밍케터)  가장 고쳐주고 싶은 점 한 가지만 꼽으신다면요?말량광이) 글자 자간 행간을 맞춰주고 싶어요. 에이 그래도 다 괜찮은 편이에요~아 ,그리고 선 두 개 쓰는거?에이 그래도 진짜 다 괜찮은 편이에요~아, 그런데 가독성도 더 높게 해주고 싶고…밍케터)  (문케터의 콘텐츠는 다 괜찮은 편이지만 핑크, 사선, 선 두개, 자간과 행간, 가독성 부분에 고칠 점이 있다.보고있나 문케터?)밍케터)  제보를 받은 부분이 있습니다. 데이터 전문가 초롱 씨에게 항상 메이크업을 해주고 싶다고 하셨다던데, 어떤 메이크업을 해주시고 싶으셨나요?말량광이) 한 번 해드린 적 있어요!초롱 씨가 아이라인을 그리고 왔는데 ‘아, 저거 더 예쁠 수 있을 것 같은데…’란 생각이 들더라구요.집에 가는 초롱씨에게 세미스모키를 해줬죠.ㅎㅎ결과적으로 맘에 들었는지 알 수 없어요...ㅎㅎ*그래서 초롱초롱초롱씨에게 제가 물어봤습니다*알 수 없는 그녀의 속마음.jpg밍케터)  디자인뿐만 아니라 마케팅 쪽에 대한 감각도 뛰어나신 것 같아요. 평소 디자인과 마케팅 분야에서 영감을 얻기 위해 어떤 노력을 하고 계신가요?말량광이) 마케팅을 배운 적은 학교 다닐 때 수업을 들은 것 외에는 없어요. 그런데 사업 시작하면서 다 같이 마케팅을 해야 하는 상황이어서 책도 읽고 타 서비스 분석을 많이 했어요. 요즘은 마케팅 동향도 파악하고, 브랜딩 쪽으로 많이 공부하고 있습니다.디자인은 계속 봐야 해요. 순수 예술 전공이라 친구들과 그림얘기도 많이 나누고, 다양한 디자인도 많이 보구요.음...디자인을 본다기보다 예술을 많이 보고 있어요. 요즘은 경계가 뚜렷한 편은 아니에요!  제4장. 발가락_인간 김상은의 삶의 애환밍케터)  발가락 부상 중이십니다. 어쩌다 이렇게 되신 것인지…말량광이) 회사의 미래가 달린 일이었어요.제 노트북에는 회사 디자인과 관련된 모든 것들이 다 들어있어요.즉, 노트북을 잃으면 모든 것을 잃는 것이죠.그런 노트북이 바닥에 떨어져 버려서…제 발을 내어주었습니다... 불가피한 선택이었고, 지금도 옳다고 믿고 있습니다.밍케터) (보고 계시나요? 대표님?) 삶의 무게_뒷모습.JPG  밍케터) 또 제보를 받은 부분이 있습니다. 신체와 관련된 에피소드가 많던데… #강릉#방충망#파괴왕 이게 다 뭐죠..?말량광이) 아?? 이거 어떻게 알았어요???? 하하하하pm 님이 얘기했어요? 하하하하하아니~ 야외에서 고기를 굽다가 옆에서 불이 났어요. 물을 뿌려야 하니까 방안으로 들어가려다가 방충망을 못 봤어요!팅겨 나왔습니다! 하하! 제5장. 속눈썹_나의 베스트 OF 베스트 부위속눈썹이요.컬링이 정말 잘 되는 속눈썹이에요.한 번 올라가면 내려가지 않아요.착한 속눈썹이죠. ㅎㅎ   결론. 앵커리어 공식질문1. 나에게 앵커리어란?언제 여기까지 왔지? 시작은 집 앞에 카페였는데, 사업을 하고 있고 회사도 컸어요.초반엔 정말 동아리의 느낌이었는데, 지금은 회사 같은 느낌이 들어요.성장이 눈에 보여서 좋습니다. 2. 자소설닷컴을 한 마디로 표현하면?취준생의 와이파이.#앵커리어 #팀원소개 #인터뷰 #팀원자랑 #기업문화 #조직문화
조회수 1184

이곳을 이렇게 바꿔주세요.(빙빙돌려 설명하지 않기)

이젠 좀 질릴 정도로 진부한 소재가 되었습니다. 그런 거 있잖아요. 너무 밝지 않은 화이트톤, 빈티지하면서도 뭔가 개성이 살아있는 느낌..등의 표현말예요. 그래서 오늘은 서론을 길게 끌지 않겠습니다. 짧게 정리하고 바로 넘어갈께요. 1. 클라이언트가 디자이너의 용어를 알 필욘 없습니다.2. 하지만 그게 아무말이나 하란 얘긴 아닙니다.네, 사실 핵심은 이겁니다. 명도니 채도니, 레이아웃이니 이런 용어들 안쓰셔도 됩니다. 모르는 게 당연합니다. 디자이너들도 클라이언트가 이런 용어 모른다고 막 불평하고 답답해하고 그러면 안됩니다. 어차피 서로 일하는 분야가 다른 것일 뿐입니다. 디자이너도 클라이언트 업계에서 쓰는 용어 모르는 건 매한가지니까요. 다만, 서로 뭔가 말을 할 때 '명확하게' 말할 필요는 있습니다. 지금부터 땋땋 찝어드릴 께용. 오늘은 짤이 없어요!!! 텍스트만 재미없게 우르르 써놓을 거예요.ㅋㅋ왜냐면 오늘은 딱히 짤이 어울리지 않는 쒸익쒸익 내용이거든요!1. 채도는 색의 진하기를 말합니다. '진하게/연하게' 라고 표현합니다. 2. 명도는 밝기를 말합니다.(색과 관계가 없습니다.) '밝게/어둡게' 라고 표현합니다.3. 색상은 '계열'이란 말로 표현합니다. 빨강계열, 노랑계열이라고 말합니다. '느낌' 이 아닙니다. 빨강느낌, 노랑느낌...이 아닙니다. 노랑느낌은 어떤 느낌인가요. 뭔가 간이 안좋아보이는 느낌이랄까. 느낌 쓰지 않습니다. 느낌싫어. 느낌아니예요. 4. 색앞에 형용사는 하나만 붙입니다! .(진한 빨강 / 연한 빨강 / 밝은 빨강 / 어두운 빨강) 이렇게 씁니다. 두 개 붙이지 않습니다. '어두운데 밝은 빨강 느낌....' 이렇게 말하지 않습니다. 5. 한 문장에 하나씩만 지시합니다. 이 로고 지워주시고, 타이틀 좀 크게 해주고...어쩌고.이렇게 기차놀이 하지 않습니다. 반드시 넘버링을 하고, 각 번호엔 하나씩만 지시합니다. 1)상단 로고 지워주세요.2)타이틀 글자 조금만 키워주세요.3)이미지에 선을 굵게 해주세요. 등등6. ~했으면 좋겠습니다..이런 어미는 되도록 피하세요.물론 예의차리려고 하는 말인건 알지만, 괜히 문장만 길어지고 난잡해집니다. 해라! 마라! 정확하게 끝맺음 해주시는 게 좋아요. 좀 강해보이기도 하구요. 이를 테면 이런 식입니다.어려우시겠지만, 이미지 부분을 조금 더 밝게 바꾸면 어떨까 싶은데, 디자이너님 생각은 어떠세요? 너무는 말고 약간만 밝게해서 글자가 조금 잘 보였으면 해서요 ㅎㅎㅎ..부탁드리겠습니다.ㅠㅠ이렇게 안하셔도 됩니다.- 글자가 잘보이도록 이미지 밝기 조정 부탁드립니다.라고 말하시면 됩니다.7. 위에서부터 말해주세요. 상단부터 수정사항을 순서대로 말해주세요. 위 아래 위위 아래 와리가리 하다보면 뭔가 엉망진창이 되거나 기껏 맞춰놓은 무언가가 또 틀어지곤 합니다. 8. 큰 것부터 작은 순서대로배경/이미지/전체 톤/컨셉이 바뀌는 게 먼저입니다. 자잘자잘한 텍스트 수정이나 굵기 수정 이런건 큰 것들이 맞춰진 뒤에 하는 겁니다. 보통 피드백줄 때 의식의 흐름대로 막 넘버링하면 마구 섞이기 마련입니다. 일단 수정 할 걸 다 나열한 뒤에 순서대로 넘버링해주세요. 이건 비단 클라이언트 뿐 아니라 디자이너도 마찬가집니다. 뭔가 할 말이 있거나 요청사항이 있다거나..또는 시안전달시에 설명을 덧붙일 때도 큰 틀부터 세부사항으로 말하는 겁니다.9. 미리 드렸어야 하는데..란 말은 하지마세요.미리 주셨어야 하는 건 미리 주셔야 합니다. 이를테면 컨셉 레퍼런스라던가, 바뀐 텍스트라던가, 꼭 써야만 하는 이미지파일 등등 말입니다. 혹시나 다른 팀에서 받아야 하는데 다른 팀원이 나를 견제하는 중이라서 파일을 안넘겨주고 있다면 "이러저러해서 이틀정도 늦어질 것 같아. 그 전에 다른 작업부터 부탁드린다."이런 식으로 언지가 있어야 합니다. 물론 나도 당신이 이기길 바라기 때문에 이틀정도는 충분히 기다려드릴 수 있습니다. 승전보와 함께 파일을 주시기 바랍니다.10. 빈티지한 느낌 어쩌고 이런 말 하지마세요.그런 컨셉을 얘기하는 거라면 차라리 본인이 예쁘다고 생각했던 이미지파일을 주세요. 이런 컨셉이면 좋을 것 같다~ 라고. 하나만 주면 눈치채기가 좀 어렵습니다. 보통 2,3개 정도는 받아봐야 그 레퍼런스들의 공통점을 분석할 수 있거든요. 그러니 서로 피곤하게 '세련되면서도 인간미가 있는 느낌...' 이런 우주적인 표현말고 그냥 그림으로 얘기하도록 합시다.11. 자꾸 모순된 표현을 하는 이유.'밝은데 탁한 느낌, 어두운데 너무 어둡진 않은 느낌' ....얼핏보면 말도 안되는 오퍼같지만 이게 무조건 잘못된 건 아닙니다. 예를 들면 기괴한데 아름다운 느낌. 팀 버튼이랄지, 길예르모 델토로 감독의 영화들을 떠올려보시면 쉽게 이해가 되시죠? 어둡고 음침한 배경에 인간미넘치는 괴물과 꽤나 희망적인 사랑을 얘기하고 있잖아요. 또는 쓸쓸하면서도 찬란한 느낌도 가능은 하겠네요. 총천연색의 오렌지빛 배경에 쓸쓸한 피사체 하나랄까요. 근데 이것들을 가만 보면, 공통점이 있습니다. 그렇죠. 배경의 톤은 하나입니다. 그 내부의 사물이나 인물이 부가적인 분위기를 만들어내는 거죠. 셰이프오브워터란 영화에서 사랑얘기를 빼버리면 그냥 인어괴수 영화가 되버리고 맙니다. 크리스마스의 악몽에서도 잭이 뭔갈 깨닫는 씬이 없었다면 그냥 악몽 그 자체로 끝나버릴 이야기에요. 우리가 흔히 얘기하는 '빈티지하지만 세련된' 느낌이란 건 굳이 풀자면 배경은 빈티지하지만 그 안에 오브젝트는 세련된 느낌일 거에요. 1980년대의 올드한 집이 배경이지만 내부의 소품들은 굉장히 고풍스럽고 고급진 금장이 군데군데 박힌 상태죠. 네, 무슨 말인지는 잘 알겠습니다. 다만 표현을 저렇게 해버리면 안되는 거예요. 앞으로 굳이 저런 식의 주문을 해야한다면 배경은 어떻게 / 사물,사람은 어떤 상태를 나누어서 얘기해주세요. 그냥 앞뒤 다 잘라버리고 한꺼번에 얘기해버리면 굉장히 난해해지고 맙니다.오늘의 이야기 끝 :) 
조회수 2116

서비스 단계별로 개선하기

안녕하세요. 스포카 UX 디자이너 남유정입니다.서비스를 만드는 회사나 팀에서는 많은 경우 애자일, 린 등의 방법론을 실천하기 위해 노력합니다. 하지만 실무를 진행하다 보면 여러 가지 상황들로 인해 길을 잃습니다. 추정시간은 이미 예측을 벗어났고, 목표했던 배포 날짜도 한참 지나가 버립니다. 특히 서비스 대규모 업데이트를 앞둔 경우, 이러한 문제는 더욱 심화됩니다.이번 포스팅에서는 서비스 개선을 위해 대규모 업데이트를 목표했다가, 단계별로 서비스를 최적화하는 방식으로 전략을 선회하면서 이를 위해 어떤 과정을 거쳤는지를 실사례를 들어 소개합니다.스프린트 단위로 일하는데, 서비스는 워터폴한 아이러니실무를 하다 보면 서비스 배포 주기를 늘어지게 하는 요인은 여러 가지가 있습니다. 특히 저희의 발목을 잡았던 주된 요인은 다음과 같았습니다.기존 코드로 인해 기능 추가 및 디자인 개선이 어려워 새로 만드는 결정을 함별도의 제품 라인을 만들어서 신규 서비스를 선보여야 하는 비즈니스 상황이 발생함요구사항을 모아보니 서비스 설계가 비대해졌음서비스 사용 환경상 잦은 배포가 쉽지 않은 경우가 있음때로는 잦은 업데이트로 인한 고객이 피로감을 호소함이런 일들을 겪으면서, 업무는 매주 스프린트 단위로 진행하면서도 서비스 배포 주기가 짧게는 1달, 길게는 6개월을 넘기기도 하는 기형적인 상황이 발생했습니다. 버그를 고치거나 사소한 요구사항을 반영하는 이슈들은 그나마 스프린트 주기와 일관성을 가졌지만, 새 기능을 업데이트 하거나 신제품을 선보이는 프로젝트를 진행할 때에는 일정이 엿가락처럼 늘어지곤 했습니다.신기능이나 신규 서비스는 운영 중인 제품이 아니라 사용하는 고객이 없음사용하는 고객이 없으니 피드백이나 인입이 없어, 타임라인에 둔감해짐특히 기존 제품을 리뉴얼 하려고 할 때코드 유지보수가 어렵고, 크고 작은 빚이 많아서 새로 만드는 선택을 함멀쩡히 돌아가는 기존 기능을 똑같이 새로 만드는 비용이 추가됨릴리즈 시기가 미뤄지면서 그간 수집된 요구사항이 더 추가됨미뤄짐의 무한 반복이런 문제를 반복하던 중, 저희는 전환점이 되는 사건을 맞이했습니다.가장 많이 쓰는, 개선점이 산처럼 쌓인 서비스 개선을 시작하다저희는 2017년 3분기에, 도도 포인트 어시스트라는 프로그램을 개선하고자 마음먹었습니다. 결제 후 점원이 매장 POS나 컴퓨터에서 결제 금액을 입력하면 적립할 포인트를 계산해주는 프로그램이며, 다음과 같은 특징을 갖고 있습니다.도도 서비스 라인업 중 유일한 윈도 설치형 프로그램구형 POS가 많은 한국 매장 환경상, 윈도 XP까지 동작을 커버해야 하는 제품홀로 분리된 개발환경, 회사 내 윈도 개발인력 많지 않음상기한 이유로, 2012년경부터 메이저 업데이트 없이 유지보수만 하던 제품덕테이핑된 코드와 서비스 설계, 디자인이 매우 많이 남아있는 제품그럼에도 POS를 주로 쓰는 한국 특성상 고객이 가장 많이 사용하는 프로그램이 서비스를 개선하기로 결정한 만큼, 몇 년 동안 쌓여있던 요구사항을 모아서 신기능을 추가하고 전체 설계를 개편하면서 최신 디자인도 반영하는 거대한 목표를 세웠습니다. 더불어 신기능 설계와 디자인을 진행하는 동안 POS 기기와 도도 포인트 프로그램 간 통신 환경 안정화까지 도모하는 큰 마일스톤도 함께 진행하기로 했습니다. 그래서 통신 환경 안정화를 우선 진행하는 약 3주간, 리뉴얼할 서비스의 전체 기능 설계와 디자인 작업을 완료했습니다.01. 배포 전략을 재고하다프로젝트를 한창 진행하던 중, 사소한 요구사항 응대를 위해 결제 금액을 편하게 입력할 수 있도록 00 버튼을 추가하는 간단한 이슈를 진행했습니다. 그런데 이 기능을 업데이트하고 나서 매장의 항의가 빗발쳤습니다. 00 버튼을 추가하는 김에, 숫자 패드 배열을 최신 버전으로 변경하고 중복으로 있는 액션 버튼을 하나로 줄인 간단한 이슈였습니다. 하지만 업데이트를 진행한 날, 강도 높은 여러 매장의 피드백을 듣고 급하게 00 버튼을 제외한 모든 변경사항을 롤백해야만 했습니다.제품 변경 후 강한 피드백을 받고 하루만에 롤백롤백 후 검토해보니, 이 변경사항은 문제가 있을 수밖에 없었습니다. 결제 금액을 입력하여 적립 포인트를 계산하는 행위는 매우 간단한 행동처럼 보이지만 다음과 같은 특징이 있었습니다.이 행동의 수행 횟수는 매장의 일일 결제 횟수와 같으며, 매우 빈번하게 수행됩니다.행동의 수행 시간은 짧은데, 클릭 이벤트가 매우 많이 일어나는 행동입니다.하루 200번의 결제가 일어나고, 평균 결제 금액이 12,350원이라고 가정할 경우, 각 결제당 6회(숫자 패드 5회, 적립 버튼 1회)의 클릭, 하루 총 1,200번의 클릭 이벤트가 발생합니다.하루 1,200번의 클릭이 발생하는 화면의 배열을 하루아침에 바꿈으로써, 매장의 혼란이 극대화될 수밖에 없었습니다.특히 이 행동은 수행할 때의 집중도가 상대적으로 얕고, 화면의 배열을 거의 외우다시피 하여 순간적으로 수행하는 것이라 더욱 문제가 되었습니다.집중도가 높고 여러 화면을 넘나들어야 하는 전체 흐름이 긴 행동은, 버튼 배열과 디자인의 변경사항에 상대적으로 혼란을 덜 겪습니다. (예, 목록에서 고객을 찾아 선택하여 메시지를 작성하고 발송함)이 일을 겪은 후 제품 개선 진행에 대한 팀 내 불안감이 커졌습니다. 큰 규모의 업데이트를 생각하며 일을 진행하고 있었으나, 더욱 신중하게 접근하지 않으면 나중에 더 큰 반발이 있을 수도 있겠다는 사실을 뼈저리게 느꼈습니다.02. 고객이 부담스러워하지 않는 단위로 배포하자이 문제를 해결하고자, 부분 배포 전략을 수행하는 것을 제안했습니다. 제안한 내용은 다음과 같습니다.우리가 가장 중요하게 해결하고자 하는 문제가 무엇인가?리뉴얼 자체가 목적이 아니다. 해결하려는 문제를 다시 분명히 하자.고객이 최대한 자연스럽게 업데이트 내용을 받아들일 수 있는 순서와 단위로 배포하자.‘이번 업데이트의 개선사항은 무엇입니다.’를 한 마디로 설명할 수 있는 단위로 나누자.기존의 행동 흐름에서 자연스럽게 연결되는 시나리오를 가진 기능을 먼저 배포하자.새로운 기능을 추가한다면, 기존의 행동, 디자인과 공통 속성이 있는 것을 먼저 배포하자.몇 년간 고객이 학습한 부분을 계승하면서 최신 디자인 기조를 담을 수 있도록 하자.각 단위는, 작업부터 실 배포까지 추정 기준 2주일 내로 가능한 단위인지 점검하자.이에 따라 리뉴얼할 사항들을 쪼개서 전체 리스트업 하고, 새롭게 단위를 나누어 우선순위를 배열했습니다.리뉴얼할 사항을 적절한 단위로 쪼개서 배포 순서를 결정03. 배포 단위에 맞게 중간 전략을 설정하다우선순위를 재배열한 후, 이상적인 상태의 설계와 디자인을 쪼개서 현 버전에 부분적으로 신기능이 들어가도 전체 서비스 사용 흐름과 디자인에 문제가 없도록 중간 단계를 재설정했습니다. 또한 기능을 구현하고 있는 동안에는, 바로 다음에 구현될 기능만 잘라 워킹 프로토타입을 만들어서 내부 테스트를 다시 수행했습니다.이상적인 상태에서 한 단계 정도 수준을 낮춘 중간 전략을 설정04. 검증 단계를 더 추가하다기능 구현 이후에는 로컬에서 QA를 하는 것이 아니라, 나이틀리 빌드1 배포 버전으로 실 서버에서 동작하는 제품을 사용하면서 QA를 진행할 수 있도록 했습니다. 이 과정에서 서비스 교육팀, CS팀 등과도 함께 QA를 진행하여, 변경사항에 대한 사내 공유를 강화했습니다.QA가 완료된 후에는 전체 고객에게 바로 배포하지 않고, 부분 배포 기간을 1주일 두어 적어도 30명의 고객이 1주일간 사용해보고 크리티컬한 문제가 없다고 판단된 후 전체 배포를 진행했습니다.효과신규 기능이 올라갈 때의 프로세스를 전체적으로 변경한 후, 다음과 같은 장점을 경험했습니다.1. 예측 가능한 작업 추정추정 기준 2주일 이내로 배포할 단위를 설정했기 때문에, 추정 예측이 훨씬 높아졌습니다.2. 업데이트 내용에 집중된 고객 피드백 수집하루 수십 번~수백 번을 사용해야 하는 제품이기 때문에 고객이 업데이트로 인한 변경사항을 학습해야 하는 피로도가 지나치게 높으면, 개선된 부분에 대한 피드백을 듣기 어려웠습니다. 최악의 경우에는 새로운 기능에 대한 피드백을 듣기도 전에 손에 익은 예전 버전으로 롤백해달라는 요구를 듣기도 했습니다. (실제로 릴리즈의 형태로 업데이트를 강행한 제품은 지금도 종종 이런 문제가 있습니다.)하지만 배포전략 변경 이후에는 한 번의 업데이트에 고객이 집중할 수 있는 하나의 변경 사항을 제공함으로써, 고객은 업데이트된 하나의 기능에만 집중하여 사용할 수 있고, 저희도 업데이트한 기능에 집중된 피드백을 들을 수 있었습니다.3. 활발한 사내 공유부분 배포하기로 전략을 수정한 것은, 고객뿐 아니라 사내에서도 효과를 발휘했습니다.처음 진행한 내부 테스트는 리뉴얼할 제품의 전체 설계와 디자인을 완료하여 제품 전체를 워킹 프로토타입으로 만들고, 약 20분 동안 1명당 10여 개의 과업을 수행하게 하여 피드백을 받는 방식으로 진행했습니다. 사내 직원이라 해도 개편 내용을 그날 처음 확인하는 것이라 변경사항이 지나치게 많기 때문에, 다소 분산된 의견이 수집되었습니다. 또한, 과업 수행 시간이 길어 테스트의 집중도가 저하되는 문제도 있었습니다.그러나 배포 전략 변경 이후에는 배포될 단위별로 워킹 프로토타입을 다시 쪼개서 만들고, 한 번에 하나의 내용에 대해서만 테스트를 진행한 후 피드백을 수집했습니다. 덕분에 훨씬 몰입이 높은 환경에서 테스트가 진행되었고, 한 내용에 대한 심층적인 피드백을 수집할 수 있었습니다.단계별 배포 전략 수행 이후 cafe study 리서치 방식의 변화또한 내부 테스트 자체가 제품 변경사항에 대한 사내 홍보 역할을 하는 부차적인 효과도 있었습니다. cafe study 형식으로 내부 테스트를 진행하니, 곧 배포를 앞둔 신기능이 무엇인지 사내에 자연히 홍보가 되어, 타 부서에서도 여러 채널로 배포 일정을 먼저 물어오기도 했습니다.특히 서비스 교육팀이나 CS팀에는 얼마 전에 눈으로 확인하고 피드백을 준 내용이 업데이트된다는 안정감을 줌과 동시에, 고객이 한 번에 이해할 수 있는 단위만큼 업데이트되기 때문에 업데이트로 인한 인입량이 감소하여 해당 부서의 부담도 줄였습니다.염두에 둘 것어떤 업데이트 안내 문구가 친절하게 느껴지는가?1. 어떤 점이 개선되었는지 고객에게 쉽게 안내해야 합니다.고객이 업데이트를 실행한 전/후 어떤 점이 개선되는지, 또는 어떤 기능이 추가되는지 안내하는 것은 매우 중요합니다. 설명이 필요 없을 정도로 서비스 설계를 잘 했다 하더라도 아무런 안내가 없다면, 시간을 들여 업데이트를 진행한 고객에게 개선점을 스스로 찾으라고 하는 꼴이 됩니다. 사소한 버그를 수정했다 하더라도, 어떤 부분을 수정하고 개선한 것인지 간결하고 구체적으로 안내되면 고객에게 기본적인 신뢰감을 줄 수 있습니다.2. 업데이트를 기꺼이 수행한 고객을 실망하게 하지 않아야 합니다.업데이트 이후 ‘이상하다. 버그 없네’ 할 수 있다면 좋겠지만, 대개 예상치 못한 문제가 발생할 확률은 항상 존재합니다. 이때 자칫 단계별 배포 작업에만 집중하면 다음 스텝에 배포할 내용을 구현하는 것만 계획하고, 업데이트 직후 모니터링을 소홀히 하기 쉽습니다.최신 업데이트 버전을 바로 설치한 고객은 우리 서비스를 가장 활발히 사용하고 있는 고객일 것입니다. 하지만 업데이트를 일찍 진행한 고객일수록 문제를 빨리 밟을 확률은 더 높습니다. 특히 단계적으로 배포하여 업데이트 횟수를 늘린다면, 서비스를 활발히 쓰는 고객이 문제를 겪게 될 빈도는 더욱 늘어납니다.따라서 단계별로 배포 횟수를 늘릴수록 테스트 코드를 추가하고 QA 프로세스를 강화해야 합니다. 그럼에도 문제가 발생했다면 빠르게 문제를 해결할 수 있도록, 업데이트 직후에는 모니터링과 문제 상황에 대응할 여유 슬롯을 두는 것을 잊지 않아야 합니다.여담1. 이상적인 시나리오와 디자인 작업의 필요성에 대하여이번에는 약 3주간의 기간을 거쳐, 리뉴얼할 제품의 이상적인 전체 시나리오와 디자인 원칙을 먼저 확립하고 이를 팀 내에 공유한 후, 최종 목표로 가기 위한 쿠션 역할을 하는 중간 전략을 다음에 설정하는 방식으로 프로젝트를 진행했습니다. 중간에 전략을 변경한 것이긴 하지만, 최초에 작업한 이상적인 상태의 제품 설계는 중간 전략을 설정할 때 ‘기준선’의 역할을 함과 동시에, 팀 내에 제품의 전체 방향성을 공유하는 매개의 역할을 했습니다.이러한 효과를 체험했으므로 다음에도 프로젝트 수행시 제품 설계와 디자인의 최종 목표에 대한 작업을 선행하려 합니다. 하지만 이때 작성하는 이상적인 시나리오와 디자인은 ‘반드시 그렇게 되어야 하는 목표’가 아닌, 공유와 매개, 중간 전략을 위한 기준이 되는 역할을 해야 합니다. 또한 이번에는 이 작업에 3주가량 시간을 썼는데, 보다 최적화할 수 있는 방향을 모색하고 있습니다.2. ‘레거시’라는 단어의 제한적인 사용에 대한 팀 내 논의서비스를 오랜 기간 운영하다 보면, 자연히 팀 내에서 ‘레거시(legacy)’라는 단어를 자주 사용하게 됩니다. 하지만 현재 고객이 사용하고 있는 서비스를 받치고 있는 코드나 디자인을 습관적으로 레거시라고 이야기하는 것은, 서비스를 ‘뜯어고쳐야 할 대상’으로만 바라보게 되는 부작용이 있어, 이 단어를 최대한 자제하여 사용하자는 팀 내 논의가 있었습니다.4. 함께 읽으면 좋은 아티클 소개Things You Should Never Do, Part I 트렐로 서비스를 개발한 것으로 유명한 프로그래머 Joel Spolsky의 글입니다. 이미 돌아가는 서비스의 코드가 엉망이라고 생각한다고 하여, 섣불리 재작성을 시도하는 것을 ‘절대 하지 말아야 할 일’이라고 이야기합니다. 코드 뿐 아니라 서비스 설계와 디자인에도 적용되어야 할 내용입니다. 이 아티클이 수록된 책은 한국어로도 번역되어 있습니다.마치며저희는 아래와 같은 상황에서 많은 시행착오를 겪으며, 안정적으로 기존 서비스의 개선 프로젝트를 실행하는 방법을 이번에 배웠다고 생각합니다.서비스를 운영한 지 7년 차. 제품 설계와 디자인, 코드 모든 것에 많은 빚이 남아있었습니다.그러다보니 전체 서비스를 개편하는 설계를 하고, 디자인을 전면 개편하고, 코드도 뒤엎는 시도를 2016년부터 지속하여 수행했습니다.그 과정에서 제품을 만드는 사람과 이를 받아들여야 하는 고객 모두가 매우 힘들다는 것을 경험했습니다.여러 해 동안 서비스를 유지보수 해온 팀이라면, 제품 개선에 자연히 많은 욕심이 생깁니다. 하지만 기존의 시나리오와 디자인, 코드 베이스로 오랜 기간 서비스를 해왔다면, 현재의 서비스 또한 어느 정도 ‘고객이 이해하고 사용할 수 있는 상태’라는 믿음을 가져야 합니다. 또한, 서비스를 무조건 대규모로 개선하려고 하는 시도가 자칫 이를 사용하는 고객을 더욱 괴롭게 하는 일이 되어서는 절대로 안 될 것입니다.이번 경험을 계기로 크리에이터 팀 내에서는 이 내용을 백서처럼 공유하고 프로세스를 정하여, 다른 프로젝트를 수행할 때에도 최대한 비슷한 방식의 프로세스를 밟기 위한 정규화를 진행하고 있습니다. 읽어주셔서 감사합니다.#스포카 #UX #디자인 #디자이너 #사용성개선 #인사이트 #일지 #후기
조회수 1013

CIFF(China International Furniture Fair) Part②공용가구(로비·라운지/퍼블릭) 

안녕하세요-!오늘은 저번에 포스팅한 상해가구박람회 Part①오피스가구에 이어서Part②공용가구(로비·라운지/퍼블릭)을 소개하도록 하겠습니다-오늘 소개드리는 Part②공용가구(로비·라운지/퍼블릭)는 좀 더 알록달록하고 다양하기 때문에 Part①오피스가구보다 재밌게 보실 수 있을 거 같아요!그래도~Part①오피스가구 한번 보고 오시는 거 추천드립니다 :)http://blog.naver.com/dongyeondesign/221113926835이제부터 Part②공용가구(로비·라운지/퍼블릭)를 소개하도록 하겠습니다. 가장 먼저 1인용 소파 입니다.  1. 1인용소파광저우가구박람회에서는 모듈소파를 많이 볼 수 있었는데 상해가구박람회에서는 대부분 1인용 소파였으며다양한 컬러를 사용하여 보는 순간 예쁘다! 하는 제품들을 많이 볼 수 있었답니다. 또한 직선보다는 곡선으로 이루어진 소파가 많았으며다리는 원목 또는 철재로 심플한 디자인으로 이루어진 소파가 많이 있었습니다. 휴게공간은 물론 사무실, 집에서도 사용할 수 있는 소파랍니다 :)앞에서 말씀드렸다시피 다양한 컬러를 사용하였고 곡선으로 이루어진 소파가 많죠?투톤으로 이루어진 컬러도 많이 볼 수있었답니다 투톤으로 되어 단조롭지않고 감각적으로 보인답니다 :) 2. 스툴다음은 스툴입니다. 1인용소파가 많아진 만큼 가볍게 사용할 수 있는 스툴도 많아졌답니다. 기존에 나오는 원형이나 사각형 외에 디자인이 가미 된 제품들을 많이 볼 수 있었는데앉기 편하게 오목한 디자인이라던가 이동이 용이할 수 있게 손잡이를 부착한 디자인 더나아가 높낮이 조절이 가능한 스툴까지 디자인뿐만 아니라 기능성까지 갖춘 스툴을 많이 볼 수 있었답니다!알록달록한 원형스툴은 앉아서 옆에 손잡이를 당기면 내려가고 일어나서 손잡이를 당기면 올라가는 제품입니다. 기존 사무용의자와 기능이 동일하다고 보면 될거같아요!가벼운 미팅공간에 딱딱한 사무용의자보다 이런 스툴의자를 두면 월씬 더 감각적이며 효율적인 미팅 공간이 될 거같아요! 조금 다른 스타일의 스툴입니다. 바의자 타입의 스툴이며 높낮이 조절이 가능한 제품이랍니다 :)3. 다용도의자, 소파다음은 다용도의자입니다. 가볍게 사용할 수있는 의자 또는 소파라고 생각 하시면 됩니다.위에서 보여드렸던 1인용 소파의 경우 안락느낌이 강한 반면 지금 소개드리는 의자와 소파는로비공간, 휴게공간, 회의공간, 카페 등 다양한 곳에서 사용가능한 소파랍니다 :)등좌판의 경우 플라스틱, 패브릭, 인조가죽, 펠트 등 다양한 소재로 마감이 되었으며다리는 철재, 다이캐스팅, 목재 등으로 이루어져 있답니다. 4. 플라스틱 사출 의자다용도의자 중 한가지인 플라스틱 사출의자입니다.  많은 종류의 플라스틱 사출의자를 볼 수 있어 별도로 소개드릴려고합니다 :)플라스틱 사출의자는 컬러가 다양하며 가볍고 곡선적이라는 특징이 있습니다.  5. 파티션세워두는 파티션 입니다. 구획을 나눌때 파티션을 많이 사용하는데 기존 파티션은 전체를 가리기때문에 답답할 수 있습니다. 광저우가구박람회에서도 볼 수 있었던 디자인이 들어가 세워두는 파티션입니다. 별도의 설치 없이 세워두기때문에 심플하며 편리하답니다!또한 디자인이 들어가서 재미있게 연출할 수 있답니다!6. 그 외그 외 귀여운 소파 테이블과 캐비닛 등 다양한 제품들이 전시되어있었답니다 상해가구박람회에서 본 공용공간은다양한 컬러의 소파와 투톤으로 이루어진 소파들을 많이 볼 수 있었습니다.또한 아기자기하며 곡선을 가미한 디자인을 많이볼 수 있었답니다공용공간 쪽은 광저우가구박람회와는 조금 달라진 트렌드를 볼 수있는 박람회였습니다!이상으로 Part②공용가구(로비·라운지/퍼블릭) 포스팅을 마치겠습니다 :)#상해 #가구박람회 #중국상해가구박람회 #ciff #외국가구박람회 #중국상해 #가구추천 #가구제안 #소파 #테이블
조회수 2287

헷갈리는 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 #디자인 #디자이너 #인사이트

기업문화 엿볼 때, 더팀스

로그인

/