스토리 홈

인터뷰

피드

뉴스

조회수 894

루프 속 브랜딩: 벌려놓은 일과 마무리되는 일

일이 생기다, 일이 밀리다.일이란 게 참 그렇습니다. 오늘의 일이 끝났다고 내일 일이 없는 것이 아니죠. 심지어 오늘의 일이 안 끝났다면 내일의 일은 괴물이 되기 시작하고, 그렇게 하루이틀 밀리다보면 '아!!...난 왠지 백수에 적성이 있지 않을까?!' 싶어집니다.바로 백수야!!흔하게 일이 밀리는 프로세스는 다음과 같습니다.오늘 다 끝내지못한 PPT 나머지 8장은 내일로 넘어갑니다.내일은 보도자료 작성과 행사기획, 카드뉴스제작, 블로그글쓰기을 해야합니다. PPT를 만들다보니 블로그가 또 다음 날로 밀렸습니다.다음 날엔 또 그 날의 일이 있는데 블로그도 해야합니다.그런데, 그 순간 대표님이 어디가서 IR해야하니 PPT좀 만들자고 합니다.(아니 욕! 엊그제 만들었잖아!? 욕욕) 하지만 하라니까 해야죠.문제는 오늘의 일을 끝낼 수 없게 되었습니다. 난데없이 IR제작이 추가되면서 오늘 일 몽땅과 블로그작성도 또 미뤄집니다.그렇게 일주일이 지나니 블로그는 아예 누락되어버렸고, 월요일날 혼납니다. IR먼저 만들으래서 만들었는데, 왜 다른 일 못했냐고 꾸중을 듣습니다.협력업체에선 빨리 자료달라고 메일이 옵니다.겨우 IR 제작이 끝나서 지난 일주일간 밀린 것을 하려고 보니 양이 엄청납니다.이번 주에는 행사준비가 시작되는데, 이걸 다 하다간 아무것도 못할 것 같습니다.음. 해결책이 있습니다. 밤의 신에게 소원을 비는 것이죠. 새벽포텐으로 이 일을 마법처럼 끝낼 수 있게 해주세요...소원이 이루어졌습니다. 이번 주의 모든 저녁약속을 취소되었고...꿈의 야근이 시작됩니다. 여기서 꿈은 '비몽사몽'을 의미합니다. 대부분, 일이란 건 한 번 밀리기 시작하면 종잡을 수 없이 계속 밀어내기식으로 진행되다가 새로운 일이 하나 들어오는 순간부터 사채이자를 빌려쓴 카드 돌려막기의 폐해를 몸소 느낄 수 있게되는데..이 일 빼서 저걸 막으면, 저기에서 또 다른 일이 생기고... 도무지 정리가 안되고 하면 할수록 많아지는 느낌만 들게 됩니다.특히 브랜딩업무는 더더욱 그렇습니다. 브랜딩이란 단어는 굉장히 설렙니다. 사람들이 보통 이 단어를 들으면 희망과 꿈이 가득해지고 흥분을 하는 경향이 있더라구요. 그러나 엄밀히 따지고 보면 브랜딩은 딱히 새로운 시작을 알리는 축포 같은 게 아닙니다. 사실 명백히 따지면 시작부터 이미 되어있었어야 하는 걸 이제서야 하고 있는 거죠. 그리고 이제부터 브랜딩을 할끄야!!!! 라는 외침은 새해 해돋이를 보면서 올해는 살을 뺼거야!!! 와 같은 느낌의 결심의 톤과 비슷합니다. 브랜딩은 '기질과 속성'에 가까운 것인지라 결심으로 해결될 문제는 아닙니다. 기존의 일들을 정립하기원래 말도 잘 못하고 응..너가 좋으면 나도 좋아...스러운  웹툰주인공같은 성격을 지닌 세희씨는 2017년 내내 호갱으로 아스트랄하게 살다가 새해가 되어 문득 생각했습니다 '이렇게 살아선 안돼!!! 이제부턴 거칠거 강렬한 카리스마를 뿜을거야!!' 라고 결심을 했습니다. 다음 날 팀장님이 '세희씨 이런거 잘하지? 이거 세희씨가 해~' 라고 던진 썡뚱맞은 업무앞에서 그녀는 과연 결심을 지킬 수 있을까요.하루아침에 무언가가 슉~하고 바뀔 순 없습니다. 더군다나 원래 기질과 맞지 않은 옷을 입으려고 할 땐 더더욱 심각해지죠. 해결책이야 일반적인 자기계발서에 나오는 얘기와 비슷할 것 같습니다. 자신을 알고 어쩌고 뭐 하는 것이죠. 브랜드는 매출과 확장의 목표가 분명하므로 단순한 자기성찰을 넘어서 구체적인 '행동'이 추가되어야 합니다. 그것도 아주 명백한 결과를 낼 수 있는 행동들 말이죠.그런데 브랜딩을 한다고 해서 시작되는 행위는 대부분...좀 어딘가 동떨어진 느낌의 업무가 추가되는 느낌입니다.브랜딩 = 새로운 전환점! 시작, 터닝포인트! = 회사소개서 리뉴얼???과 같이 말이죠. 목적과 행위가 좀 따로논다는 느낌이 있지 않나요? 대부분의 회사 브랜드 프로젝트의 목적은 '우리 회사의 아이덴티티를 정립하고 알리겠다!' 입니다....그렇다면 일단 '정립'을 해야하고 '알려야하죠. https://dribbble.com/shots/1618339-Brand-Identity-System정립이란 건 = 태양계를 만드는 일과 같습니다. 핵심을 태양위치에 두고 회사를 구성하는 메인 BM과 부가적인 BM을 내행성계와 외행성계로 나누어 궤도에 돌리는 일이죠. 중간에 자잘한 것들은 소행성계에 넣어놓고 우리 회사의 영향력이 어디까지 미치는 지 시장의 범위를 정해서 헬리오포스(태양의 힘이 미치는 태양중력영향권)를 규정합니다.과학실에 있던 태양계 모형마냥 항상 지구를 돌리면 톱니바퀴장치로 다른 아이들도 빙글빙글 돌아가곤 했는데...이것과 유사하다고 생각됩니다. 예를 들어 태양. 즉 핵심가치가 "일은 먹고살자고 하는 거다."라고 해봅시다.'식사'라는 키워드로 7개 행성이 그 가치를 공전하기 시작합니다.내행성(주요BM)3개는 "도시락/샐러드/간편식" 제조와 배달입니다.외행성(보조BM)4개는 "강의/건강검진서비스/앱광고/굿즈판매" 입니다.그리고 중간에 "행사, 이벤트, 무슨 R&D사업유치, IR, 박람회, 해외지사 설립" 부수적인 이슈들이 있죠. 일단 브랜딩에서 업무구분을 할 때 중요한 건 무엇이 안쪽에 있고 무엇이 바깥에 있는지..어떤게 큰지 작은지를 나누고 구분하는 일입니다. 정립이란 건 "제대로 세운다" 라는 의미입니다. 회사에서 하는 일이 하나가 아닌만큼 하나가 자빠지면 우르르 넘어지기 시작하는데 그게 유튜브 도미노영상처럼 아름답게 넘어지진 않더라구요. 그냥 뜯다가 터져버린 아몬드후레이크처럼 사방에 널브러지는 거죠.위와 같이 일종의 동심원구조의 궤도를 구축했다면 각 궤도를 구성하는 상세한 업무들을 생각해봐야 합니다. 행성에 딸린 위성과 같은 느낌이죠. 업무를 정리하다.기존의 일을 정리하는 방식은 3가지로 구분할 수 있습니다.1) 없애거나2) 합치거나3) 바꾸는것이죠. '줄인다' 라는 표현은 좋아보이긴 하지만..절대량이 똑같다면 어떨까요? 100의 일을 해야하는데 하루2시간씩 50일을 해던걸 1시간으로 줄여 100일을 한다?... 어차피 똑같거나 아니면 더 힘들어질 수 있습니다. 우리가 신경써야 하는 건 절대량100을 80으로 줄이는 겁니다.쓸데없는 일들은 없애는 것이 맞습니다. 작게는 자잘하게 많은 서류작성이나, 출장계획서, 복귀 후 보고서(심지어 이런것도 있음) 등 불필요한 양식들을 정리해내고 크게는 소행성계에 있거나 외행성계에 있는데 지나치게 업무시간을 많이 할당하고 있거나 메인업무가 오히려 밀리는데 심지어 딱히 가성비도 좋지 않다!!..라고 하면 그냥 STOP! 해야죰. 존버는 답이 아니니까요.유사한 업무끼리는 합치는 게 좋아요. 소개서와 제안서는 비슷한 부분이 많아서 제작시에도 모듈화시킬 수 있는 부분이 있다면 또 새롭게 소개페이지를 만들고 간지를 제작할 필요가 없죠. 모든 PPT양식을 하나로 통일해서 지정된 디자인으로만 사용한다면, 필요할 때마다 템플릿 디자인을 다시 해야할 필요도 없죠. 내용만 갈아끼우면 되니까요. 지금까지 쓰던 서류철을 웹클라우드서비스로 바꿔서 데이터정리를 한다거나, 협업툴을 바꿔보거나 일반 종이계약 과정을 전자계약으로 바꾼다거나 하는 등 자동화/간소화 시스템을 활용해서 업무의 효율을 높이는 방법도 있어요. 이는 절대량100을 줄이진 않지만 내 능력치10에서 빛나는반지를 장착하여 +3의 어드밴티지 효과를 부여해주죠. 궤도정립과정에서 각각의 일들이 구체적으로 등장해준 후 위와 같이 각 일에 대해 마이너한 리뉴얼을 거치고 나면 그 떄 비로소 새로운 일을 만들 수 있습니다.후우..드디어그리고 실제로 위와 같이 마이너하게 업무정리를 하기 위해선 상당부분이 통일/정리/자동화가 이루어져야 하죠. 이미 이 과정자체가 브랜딩의 기초단계를 만드는 역할을 하기도 하고, 이 후에 새롭게 진행될 일의 절대량도 현저하게 줄어드는 꿀이득을 누릴 수 있죠. 일을 시작하다.이제 일을 시작해봐야겠습니다. 무슨 일을 어떻게 시작할 지는 앞서 적은 매거진 내용을 통해 언급했으니 구체적인 내용은 '뒤로 가기'를 누른 후 지난 1~14화를 쭈루룩....(이렇게 조회수를 늘리나요..)우리가 여행갈 때 셀카봉은 빼먹어도 되지만, 신발을 안신고 갈수는 없잖습니까. 일을 함에 있어도 중요한 요소와 부가적인 요소가 존재합니다. 초등학교 국어시간에 배웠던 6하원칙을 모두 지키라는 건 너무 가혹한 일이므로 3가지만 지키도록 하죠.'누가/언제/어떻게'무엇. 에 해당하는 건 이미 과업으로 정해졌을 테니 위의 3가지만 정확하게 잡아보도록 합시다.1) 누가...는 업무분장을 의미합니다. 지난 회의실에 브랜딩에서 익히 정리했던 내용이지요. 다시 한 번 요약하자면 정/부를 정확히 쪼개고 누구에게 보고하고 누가 컨펌하느냐 하는 사람에 대한 체계를 잡는 일입니다. 이게 제대로 안잡혀있으면 내 일이야? 네 일이야? 하다가 결국 일은 구멍이 났는데 책임지는 사람은 아무도 없고 돈만 날리는 경우가 종종 있습니다. 2) 언제. 는 데드라인을 의미하죠. 마무리 시점을 잡는 것 이외에 각 단계별 일정을 구축하고 다른 협업자와의 일정조율을 하는 모든 일을 포함합니다. 달력으로 하는 일이니만큼 책상위엔 2018년 예쁜 달력이 반드시 있어야 할 듯 합니다.3) 어떻게...는 업무방식에 대한 얘기이죠. 커뮤니케이션만 담당하고 외주로 돌릴 것인지, 직접제작 할지 아니면 TF팀을 구성할 지 등등 부터 오프라인/온라인 등의 채널 잡기, 구체적인 기획안에 적히는 콘텐츠의 내용들을 의미합니다. 이를 종합해보면 다음과 같은 과업지시 내용이 등장하죠.그래! 리플렛을 만들어서 우리 앱을 소개해보자!~라는 목표가 생겼다면"지혜가 정을 잡고, 가희가 부를 잡아. 각 업무분장은 지혜가 기힉/커뮤니케이션을 잡고, 가희가 자료조사/취합/전달의 역할을 하자. 자료조사는 12일까지, 취합전달은 13일까지 그리고 그동안 지혜가 컨택을 담당하고 13일에 디자이너에게 전달하는 걸로. 22일까지 1차시안을 완료하고 30일까지 최종시안 인도받아서 30일날 인쇄넘기는 걸로 정리한당. 리플렛은 오프라인 행사장에서 나눠줄 용도라서 2,000부 정도 인쇄 진행하고 AI원본파일 요청하고 해당비용에 대한 이슈는 알려줘요. 리플렛 내에 들어갈 내용은 기존 리플렛을 참고하되 업데이트된 부분들에 대한 정리와, 우리 브랜드가이드에 맞춰서 디자인리뉴얼에 초점을 맞추자."로 정리가 된달까요. 그럼 업무확인은 어떻게 하느냐.. 13일날 전달확인 / 22일 1차시안 확인 / 30일 최종시안 수령확인 으로 3번만 하면 됩니다. 누구에게 확인할까용? 지혜씨죠.인쇄이슈는 최종시안 컨펌 후 다시 과업지시로 전달합니다. 뭐 이 때 실무자는 대략 고민을 해봐야죠. 사이즈나 부수를 대략 확인했으니 인쇄비용에 대한 견적을 미리 받아야 할 거고, 비교견적을 내고 결재를 미리 올려야겠죠. 인쇄 및 수령일자를 확인하고 감리일정도 미리 업체와 조율해야 합니다. 택배방식도 확인해야합니다. 박람회 일정이 그리 넉넉치 않으니 일반배송으로 할지 다마스퀵으로 할 지 등등. 조금 더 깨어있는 현대인이라면 2,000부가 행사장에서 모두 소진되지 않을 것임을 알고있을 겁니다. 그렇다면 배포 후 남은 리플렛은 어디에 어떻게 활용하면 좋을지에 대한 B안을 가져갈 수도 있겠죠. 이런식으로 일을 줄이고 쳐내고 정리한 후 새로운 일을 잘 오물거려서 끼워넣는 방식으로 총량을 맞춰가는 게 정말 중요합니다. 일이 과다하게 쌓이기 시작하면 모든 일의 퀄이 떨어져갑니다. 퀄이 떨어진단 얘기는 브랜드관리가 허술해지기 시작한단 얘기고 헛점이 많아지는 것이죠. 내부업무에서 허점이 늘어나기 시작하면 반드시 고객접점까지 그 영향이 미칠 수 밖에 없어요.클레임 피드백이 안되거나, 간담회가 엉망이 되거나, 베타테스터 모임이 허접해지거나...또는 제품납품 일정, 서비스UX의 문제가 개선되지 않는 등...브랜드이미지와 운영관리가 똥망이 되어갑니다.회사소개서가 예쁘지 않아서 브랜딩이 안되는 게 아니예요.무리한 회사소개서 제작때문에 브랜딩이 어려워지는 것이죠. 내일은 전체회의를 하면서 태양계를 한 번 그려보는 게 어떨까용 (강츄) :)
조회수 956

백만고객이 흥분할 컨셉을 잡아보자.

오늘은 컨셉에 대한 이야기를 해보려고 해요. 영어는 씨오엔씨이피티. 콘셉(ㅌ) 죠. 사전적의미에선 (명사)광고·디자인 등에서, 그 속에 담고자 하는 기본적인 생각. 라고 쓰여있네요. 뭐 꼭 광고나 디자인 뿐 아니라 요즘엔 컨셉의 적용범위가 더욱 넓어졌으니 그냥 우리가 일상적으로 일고 있는 '중심이 되는 생각이나 행동의 자세' 정도로 재정의내리기로 합시다. 왜 하필이면 백만고객이란 말을 붙였냐면 ....제 브런치글의 누적뷰가 곧...100만이 되기 때문이죠. (쥬륵) 그냥 뭔가 감격스러워서 흐어엉어웅어우어엉 한 마음에 그만..다시 컨셉얘기로 돌아와서, 우선 컨셉의 어원부터 살펴볼께요. 일단 컨셉은 라틴어 conceptum ‘초안, 개요’에서 나온 단어입니다. 이 단어는 Con + Cept + um 으로 쪼개집니다. Con은 together의 뜻으로 고등시절 그놈의 어원보카를 통해 많이들 공부했던 그것이랍니다. Cept는  take, hold의 뜻을 지니고 있지요. um은 라틴어의 명사어미입니다. 그러니 컨셉이란 단어를 풀어보면 '모두 모아서 잡는다' 라는 정도가 되겠군요. 흩어져있는 이것저것들을 한데 모아서 하나로 묶는 중심축을 의미합니다.그런데 무엇이 흩어져있고 어떻게 모으는 것일까...하는 구체적인 얘기가 필요할 듯 하네요. 일단 흩어져있는 것들은 아래와 같은 것들입니다.- 이미지의 톤- 텍스트의 톤- 밖에서 보는 우리와 실제의 우리- 업무스타일과 사업의 색깔- 정신, 영혼, 동공의 초점(특히 연휴끝난 오늘..)등이 흩어져있는 것들이죠. 이런 것들을 하나로 묶는 것은 아래의 원칙들입니다.1. 일정한 톤의 이미지와 구도(찍을 때 항상 이렇게 이런톤으로)2. 텍스트의 어미와 문장의 길이, 수식의 정도3. 일관성있는 업무체계4. 일관성있는 투입자금(덜덜)5. 모두가 뼈속깊이 인지하고 있는 우리의 색깔6. 월급날내가 가는 이 길이 어디로 가는지 알수 없찌마안 알수 없찌마안 알 수 없찌마안회의할 때마다 브랜드의 색이 자꾸 바뀌는 듯한 느낌은 사실 우리 모두가 공통적으로 지니고 있는 대전제가 없기 때문이예요. 소위 사고의 울타리가 없으면, 생각이 역회전시킨 탱탱볼마냥 이리저리 튀어다니다가 결국 뒷동산으로 흘러가버리기 일쑤니까요. 컨셉은 밖에서 보는 것보다 팀원전체가 무의식중에 인지하고 있는 우리 회사의 색깔을 의미해요. 그래야 '이것은 우리의 색이 아니다, 이것은 기다.' 라는 것을 명확하게 잡아낼 수 있겠죠. 그래서 오늘은 일반적인 7가지 컨셉들을 한 번 늘어놓아 보려고 해요. 이 중 우리의 컨셉과 가장 유사한 것은 어떤 것인지 알아보는 것도 아주 재미있을 것 같아요. 또 그러한 컨셉을 표현하는 다양한 수단은 무엇이 있는지도 스리슬쩍 잡아보려고 합니다. 크크큭 반, 진지함 반으로 주절거려보도록 하겠어요~꼬.1. 진지한 컨셉부릅. 진지. 엄격. 세상. 시리어스우린 장난따윈 치지않아. 우린 전문적이야. 숫자를 선호하지. 우리의 제안서는 숫자가 가득해. 우리는 농담을 하지 않아. 부릅... 스러운 컨셉의 진지진지한 색입니다. 사실 진지한 컨셉은 여러가지로 제약이 있긴 합니다. 명량,회오리바다와 같은 SNS상에서 진지한 컨셉의 컨텐츠의 사활을 장담하긴 어렵죠. 특히나 몇 초안에 시선을 끌어잡아야 하는 경우라면 더더욱 그렇습니다. 그러나, 시간을 들여서라도 신중하게 결정을 해야하는 것들. 그러니까 오늘 점심 뭐먹을까....같은..(=개소리) 게 아니고.... 계약이나 금융, 분석, 정보를 다루는 곳들의 경우에 많이들 쓰고 있는 것 같아요. 이를테면 전자계약을 진행하는 모두싸인같은 경우는 이번에 로고리뉴얼을 통해서 기존의 귀욤귀욤한 캐릭터느낌(눈코입달린)에서 좀 더 각지고 전문적인 느낌을 살릴 수 있는 컬러대비를 강조했더라구요. 이처럼 객관적인 신뢰가 필요한 비지니스에선 확실히 키치키치뱅뱅한 느낌보다는 각! 대비! 선명! 이런것들이 도움이 되는 것 같아요.표현방법 : 강렬한 색 대비!, 각!, 모서리!, 날카로움!, 정장!, 킹스맨구두, 만년필, 시종일관 진지한 어투, 숫자, 안경, 꾹다문 입술, 컨설팅모드 노트북 등..주의사항 : 시종일관 진지한 어투일때는 문장을 짧게 치셔야 해요. 이런 비지니스들의 소개문구나 텍스트들의 문제점은 자꾸 같은 말을 반복할 위험이 있다는 거예요. 데이터위주의 객관적사실 나열은 글이 짧아질 수 밖에 없는데, 괜히 그 공백을 메우고자 했던 말을 다시 또 하는 경우가 많더라구요. 중복문장과 어설픈 개그, 괜한 수식어 등은 빼버리고 3형식의 짤막한 문장들로 텍스트의 속도감을 높이는 것이 더 중요해요.디자인적으로는 대비를 주되, 배경과 메인심볼의 색을 보색대비시키진 마세요. 배경이나 심볼 둘 중 하나는 무채계열로 빼면서 하나의 색을 죽여주는 편이 좋아요. 보색대비란 것은 둘 다 힘이 쎄다는 얘기이니 디자인에 긴장감이 높아지거든요.2. 우린 미쳤어! 컨셉비글들의 모임. 대혼돈의 게이트시종일관 비글모드인 이 분들은 회의시간에도 아크로바틱, 컨텐츠도 판타지아스럽고, 내놓는 이벤트도 뭔가 탈우주적인 아무말들이 가득합니다. 책상위엔 덕질의 흔적이 가득하고 떠오르면 부아아아아아 밀어부치는 거친 추진력을 보여줍니다. 시행착오도 많지만, 그것조차도 우린 미쳤다라는 컨셉으로 '그래 우린 실수를 했어!!! 하하하하하 이거 미안하게 됬군그래!!후후후후...' 라는 느낌.표현방법 : 거친 워딩! 폭풍 짤, 일상이 덕질, 아무말 텍스트, 키치한 디자인, 특이한 패션, 사무실에 비글키우기, 다육이에 이름붙이기 등등주의사항 : 비글컨셉은 신선하고 독특한 경험을 선사하지만, 행동이 튀는 범위가 넓기때문에 그것을 잘 잡아줄 수 있는 치밀한 기획이 필요해요. 기획단계에선 '하면 안되는 것' 을 강력하게 설정하시는 편이 좋아요. 그리고 규제완화의 제1법칙이죠. 안되는 것만 규정하고 모든 것을 허용한다라는 모토 아래 디테일한 것들을 설정해가시는 편이 좋아요. 디자인적으로는 두 가지 방법이 있는데, 키치하고 세련된 느낌의 특정폰트, 특정이미지, 캐릭터를 이용해서 행위자와 행위를 부각시키는 방법이 있어요. 이 방법은 초기에 설정시간/비용이 꽤나 들지만 이리저리 튈 수 있는 기획방향을 잡아줄 수 있는 캐릭터를 구축할 수 있다는 장점이 있답니다. 다음은 떠돌아다니는 짤과 거친 그림, 조악하고 막 써놓은 텍스트를 컨셉으로 밀고 나가는 것인데, 비용이나 제작시에 수고가 덜하지만 호불호에 대한 리스크와 자칫 낮은 퀄리티로 인식될 수 있는 만큼, 신중해야해요.이러한 키치한 컨셉의 비지니스에서 가장 중요한 것은 홍보나 마케팅컨텐츠는 유쾌하고 장난스럽지만 실제 운영에 구멍이 생겨서는 안된다는 점이예요. 할 때는 확실하게 한다. 라는 느낌이 없으면 유쾌와 장난끼가 '전문성의 부족' 으로 인식되기가 쉽답니다.3. 세상친절한 컨셉성은이 므앙그윽 하옵니다!고객님이 너무 감사한 스타일. 고객은 한 줄 후기를 남겼지만 우린 3줄씩 남겨주는 타입. 클레임이 생기면 직접 찾아가서 하나하나 얘기를 들어보고 사과문과 함께 보상에 관련된 어떤 언급을 하며 상왕전하를 극진히 모시는 느낌표현방법 : 관복, 삼보일배, 친절터지는 댓글, 필력, 웃음이모티콘, 사과문양식, 끊임없는 트래킹, 만족도조사주의사항 : 고객입장에선 최고의 경험을 할 수 있는 컨셉일수도 있겠습니다만, 운영입장에선 굉장히 많은 리소스가 들어가는 일일수도 있습니다. 흔히 직접적인 B2C서비스를 하는 비지니스에서 이런 컨셉이 더러 있더라구요. 나쁜 것은 아니지만, 극진히 여겨주는 것을 머리부터 말끝까지 씻겨드린다..라기보단 우린 씻고나오셔서 춥지않도록 실내에 온풍기를 틀었다...라는 정도의 특정한 차별화포인트만 잡아두는 편이 좋을 것 같습니다.디자인적으로는 부들부들하고 깔끔한 플랫계열의 아이콘, 컬러가 주로 쓰입니다. 거부감을 최소화 시키고 메시지의 강도를 완화시키기 위해 폰트나 컬러로 이미지구축을 하는 경우가 많습니다. 주로 이런 컨셉일 경우엔 고객과의 접점컨텐츠가 굉장히 많이 생성되는 편이라서, 업무의 리소스절약을 위해서 어느정도의 레이아웃과 양식은 템플릿화 시켜서 움직이는 것이 좋습니다.4. 엄청솔직한 컨셉우린 진실만을 얘기하므로, 거짓됨은 없다. 단채 신채호선생님의 서서 굽히지 않는 진솔함의 후예들. 블로그가 없다, 홈페이지도 사실 만들 돈이 없다..라는 것조차도 과감히 까줌. 사실 5가지 정도가 불안하지만, 나머지 한 개는 자신있는 타입. 이런 솔직함은 호불호가 갈리긴 하지만, 리스크를 선공개함으로써 추후 생기는 후폭풍을 최소화시키거나 오히려 신뢰감을 상승시키는 효과를 누릴 수도 있습니다. 그러나 이러한 솔직함이 방어적인 밑밥이 된다면 사람들은 금새 알아차리므로, 계속 성장/개선하는 모습을 보여주지 않으면 솔직함이 진부해질 수 있다는 단점이 있죠.표현방법 : 가난을 드러내기, 서서 세수하기, 회사소식 자주 공개하기, 개선사항 주기적 업데이트, 장점 하나만 어필하기, 약점에 대한 리스팅과 고객참여 간담회주의사항 : 위에서도 언급했던 솔직함이 진부해지지 않으려면 꾸준한 개선들을 주기적으로 업데이트해주고 알려야합니다. 좋은 방법은 역시 고객과 함께 만들어나가는 것이지요. 고객참여 간담회나, 피드백대토론회, 상품체험회 등 온오프라인에서 각종 프로그램과 발빠른 움직임으로 빠르게 움직이고 변화해간다는 모습이 병행되어야 합니다. 그러므로 이러한 컨셉은 우린 솔직하니까 됐어. 라는 식이 되버리는 순간 위험해진다고 할 수 있죠. 어느 컨셉보다 빠른 행동력을 필요로 하는 것 같습니다.5. 매우심플한 컨셉제가 운영하는..애프터모멘트 제안서..이건 제 컨셉인 것 같습니다. 제안서디자인만 봐도 그냥 대충 알 수 있듯이 심플함을 강조하고 있습니다. 심플함이 내포하는 것은 정리된, 깔끔한, 시크한, 논리적인, 단순한, 쉬운 등의 의미가 있겠네요. 사람들이 어려워하거나 복잡하다고 생각하는 것들을 다루는 비지니스일수록 이러한 컨셉은 빛을 발하는 것 같습니다. 그러나 리스크도 만만찮게 크죠. 일단 표현할 수 있는 이미지나 텍스트의 양이 줄어들면서 한 줄 한 줄의 무게가 커집니다. 함축으로 인한 오해를 살 수도 있고, 또한 이러한 심플함에 대한 개인적 호불호도 존재하기 마련이죠. 디자인이나 가구, 직관적인 UX/UI가 필요한 쇼핑몰 등에서 많이 쓰이는데.. 요즘엔 카카오뱅크처럼 복잡함과 대적하기 위한 금융/공공서비스등의 인프라에서도 종종 이러한 컨셉이 보입니다.표현방법 : 하얗. 화이트. 백색. 백색의 사루만...여백. 공백. 빈 곳. 무채색. 포인트. 하나. 딸랑. 아이콘. 기호. 단어주의사항 : 사진 한장, 문장 하나에 신경을 매우 크게 써야합니다. 어미나 접속사 하나도 크게 신경써야 하죠. 심플함은 쳐내는 것이 아니라 함축시키는 일입니다. 그러나 함축을 했다고 해서 단어가 추상적으로 변해버리면 안됩니다. 구체적인 단어를 언급하되, 그 단어가 상징하는 의미가 공통적으로 끄덕거릴 수 있는 것들이어야 하고 직관적으로 아항!~스러워야 합니다. 그러니 단어선정과 이미지선정에 큰 공을 들여야 한답니다.그리고 그렇게 공을 들인 것이 오해를 사거나 무의미해질 수 있는 리스크가 굉장히 큽니다. (가끔 이런건 됬고 그러니까 자세한 소개서나 좀 줘보세요..라고 하는 곳들이 있을 수 있습니다.)6. 옛것추억의 컨셉체크..당신은 대체..아날로그 감성을 자극하는 비지니스도 있습니다. 요즘 인기터진 구닥도 그러할거고, 이번에 드롭박스의 리브랜딩도 다시 레트로한 디자인으로 돌아갔더군요. 추억을 자극하는 아날로그식 필카의 디자인을 따론 라이카나 올림푸스카메라의 디자인도 그렇습니다. 패션쪽에서는 이미 순환주기가 기정사실화가 되었고, 한 때 유행하던 플랫디자인을 넘어서 요즘엔 다시 폰트, 패턴, 양식단순화, 네온 등의 디자인이 뜨고있습니다. 감수성과 공감대를 기본으로 한 이러한 컨셉은 비지니스의 특수성과 타겟층의 연령층에 대한 제한이 있지만, 금액이나 성능등의 객관적인 정보를 뛰어넘는 감성기반 비지니스라는 점에서 매니아/팬층을 만들기가 용이합니다.표현방법 : 옛 것, 아날로그, 불편하게 만들기, 안보여주기, 쇼케이스, 팝업스토어, 복고디자인, 이미지위주의 컨텐츠주의사항 : 아날로그 컨셉은 기본적으로 이미지를 위주로 합니다. 또한 그 이미지에 대한 공통적인 이해와 공감이 있어야 합니다. 또한 우위컨텐츠가 있어선 안됩니다. 예를 들어 노란색의 작은 생명체라고 했을 때, 보거스를 떠올리는 사람과 피카츄를 떠올리는 사람이 있다고 쳐볼께요. 물론 보거스도 미친 인기의 결정체지만, 노란색의 캐릭터에서 피카츄를 이겨먹기가 쉽지 않습니다. 이미 사람들의 기억속의 '원형이미지'에는 노란색=피카츄라는 공식이 성립이 되어버린 상태이죠. 이렇게 옛 컨텐츠를 끄집어낼 때는 사람들의 무의식속 원형이미지를 잘 고려해야해요. 더불어서, 단순한 이미지...보단 '행동'을 끄집어내는 것이 훨씬 효과적입니다. 구닥이 대표적인 예라고 할 수 있죠. 감동이란 그 때의 행동과 느낌을 재현하는 것에서 시작되니까요.7. 트렌드세터의 컨셉천년은 앞서간 비타스의 우주왕자사교파티..반면, 시대를 앞서가는 느낌의 얼리어답터, 트렌드세터의 느낌을 가득 담은 컨셉도 있겠습니다. 이러한 컨셉에선 '이걸 놓치면 당신은 늦는거야!' 라는 편승심리를 자극하는 경우가 많습니다. 가장 대표적인 것들이 사교육이나 전자기기 등등이 있겠죠. 신제품의 발매주기가 빠른 핸드폰도 비슷합니다. 예전엔 핸드폰광고가 무슨 화소, 램, CPU등 다양한 성능위주에 맞추어졌다면 요즘은 AI, 섬세함, 인식기술, 모바일페이, 플렉시블, 카메라기능 등 기술위주에 초점이 맞추어지고 있습니다. 성능이야 잘 굴러가면 되는것이지만, 기술에 뒤떨어진다고 생각되면 불안해지기 때문이죠. 지금은 이런시대야! 당신의 삶은 더 나아질 수 있어! 를 언급해주면서 세계관을 만들어주는 것입니다.표현방법 : IF를 통해서 불안과 기대를 동시에 자극하기, 체험관 마련, 체험서비스, 문구로 자극하기, 동영상, 이미지활용하기, 미래적인 복장, 얼리어답터/매니아/팬층 만들기주의사항 :이러한 트렌드세터의 컨셉에서 중요한 것은 그 기술과 트렌드가 고객의 삶과 직접적으로 어떤 연관이 있는가? 하는 것입니다. 당신의 삶을 풍요롭게 바꿉니다. 따위의 멘트는 아무짝에도 쓸모가 없어요. 그러니까 풍요를 뭐 어떻게 뭐가? 라는 것이 중요하죠. 그래서 미래기술을 다룬 SK나 금호타이어등의 CF를 보면 정확하게 어떻게 당신의 삶이 바뀌는지 에피소드와 영상으로 풀어냅니다. 또는 그러한 기술의 발전의 접점이 항상 인간을 향해있다는 감성수렴의 메시지로 마무리하죠. 그러니 표현상의 주의점은 항상 '구체적인 생활접점' 의 에피소드로 접근해라는 것입니다. 그리고 그 생활접점의 편리함을 숫자나 영단어가 아닌, 감성적인 메시지로 풀이될 수 있어야 해요. 숫자는 그 뒷단의 문제입니다.대략 7가지의 컨셉을 한 번 정리해보았어요. 매우 일반적이고 잘 알려진 컨셉들입니다. 이러한 컨셉 이외에도 본인만의 색을 살릴 수 있는 어떠한 특이한 컨셉이 있다면 아주 흥미진진한 비지니스 브랜딩이 될 수 있으리라고 생각해요. 여기서 흥미진진하단 것은 꼭 즐겁고 돈을 많이 번단 얘긴 아닙니다. 그지가 되어 길바닥에 나앉는 것도 흥미진진한 일에 포함되니까요. 색이 강렬하고 분명하단 것은 그 색에 대한 호불호가 명확해진단 것을 의미합니다. 분명 싫어하는 사람들도 등장하기 마련이죠. 제 글도 어느덧 그러한 지경이 되었...(와씨....유명해졌나봐) 컨셉은 분명 비지니스의 성향에 따라 어느정도 사회적인 선입견이 있습니다. 금융은 정장, 디자인은 자유로움, 마켓쪽은 트렌디한.. 이런식의 고유한 이미지들이 이미 장착되어 있죠. 그러나 요즘엔 이러한 이미지를 깨버리면서 새로운 컨셉을 넘나드는 비지니스들도 많아진 것 같습니다.클라우드 웹하드서비스와 아트웍의 만남이랄까..금융서비스와 귀요미의 만남언론기능과 키치함의 만남이랄까?기존의 이미지를 깨버린 신선함은 많은 주목을 받기 마련이고, 추후 그 기대와 인기에 부응하는 것은 또 다른 영역의 일이 될 수 있겠습니다. 물론 어느쪽도 쉬운 길은 아니겠으나 분명한 사실은 브랜딩에 있어서 초기컨셉을 설정하지 못하면, 어떤 방식으로든 스르르 사라지게 될 것이라는 사실입니다. 특히 요즘같이 다양한 컨텐츠가 무한 생성되는 시대에는 더더욱 그렇죠.조금 덧붙이자면 컨셉은 만들기보다 유지하는 것이 훨씬 어렵습니다. 제 글의 컨셉은 딱히 뭔진 모르겠으나, 사이다같은 팩폭과 술술 읽히는 말랑한 문체라고들 많이 얘기해주시더라구요. 그러나 주제에 따라 이러한 문체가 장애물이 될 때가 종종 있습니다. 그러나 그럼에도 불구하고 이 문체를 꾸준히 유지하면서 병맛을 지켜나가는 것이 또한 저의 숙명이죠. 사실 글쓴다고 돈이 되는 것은 아니지만, 일종의 독자들과의 의리랄까요. 그런 실낱같은 뭔가 끈끈함이 생겨나고 있습니다.제 입장에서 글 쓸때의 컨셉을 유지하는 것은 끝임없는 드립연구와 찰진 비유와 예시를 찾아내는 것, 날마다 네이버뿜과 오유를 뒤적이며 그럴싸한 사진들을 찾아내고, 브랜딩서적들을 까칠한 눈으로 읽어주는 것들이랄까요. 놀라운 것은 클라이언트와 하루만 대화를 하지 않아도 그 감이 급속도로 떨어져간다는 사실입니다. 한 일주일만 지나도, 내가 그런적이 있었나? 싶을 정도로 사람의 적응력과 빡침을 잊는 속도란 굉장하더군요. 오전까지만 해도 빡쳐서 막 글쓸 거리가 넘쳐났는데, 오후되니 벨기에초코케익 한 줌 떠먹고 눈녹듯 사라지는 극딴적인 간사함..하아....이렇듯 시간과 감떨어짐, 케익등으로 인해서 컨셉유지가 안되는 저의 간사함을 보면서 기업입장에선 이 일이 얼마나 힘들 것인가를 유추해볼 수 있겠습니다.때문에 컨셉을 유지하고, 컨셉을 방해하는 일들을 쳐내는 것에는 또다른 맥락의 노력이 필요할 것입니다. 이 얘기는 다음에 하려고 합니다. 배가 고프기 때문이죠. 화장실도 마렵구요. 제가 컨셉을 방해하는 잡다한 것을 쳐내는 방식은 굳이 커피를 마시고 화장실을 참아가며 글을 쓰는 것입니다. 초고도의 집중력을 발휘할 수 있고, 마음이 급해서 한숨에 쭈욱 글을 써내려갈 수 있죠. 하지만, 좋은 방법은 아닌 듯 하니 좀 더 현명하고 건강한 방법을 찾아들고 다음 시간에 뵙도록 하겠습니다. 빠잉.
조회수 1179

클라이언트가 폰트를 바꿔달라고 하면, 폰트를 바꿔주자.

클라이언트가 폰트를 바꿔달라고 했습니다. 분명 우리가 배우고 공부한 바로는 폰트를 바꾸면 그리드나 밸런스가 틀어질 테죠. 레이아웃도 다시 맞춰야 하고 자간, 행간, 심지어 컨셉도 다시 바꿔야 합니다. 그러니 디자이너 입장에선 '그냥 그것만' 슉 바꾼다고 될 문제는 아닙니다. 모든 것의 밸런스를 고려해서 픽셀단위로 고민과 두통과 다양한 손짓 발짓이 필요한 것이죠. 두 손을 공손히 관자놀이에 대면 거칠고 사나운 맥박을 느낄 수 있습니다.  자, 여기까지는 디자이너의 사정입니다.음.. 하지만 결론부터 얘기하면, 이러한 디자인적 고충을 클라이언트가 이해하고 알고 있어야 할 필요는 없습니다.  앞서 말씀드린 고충은 디자이너만이 알고있는 사실이죠. 그리고 이러한 내용을 반영해서 마음대로 추가적인 액션을 하는 것을 클라이언트는 이해하지 못합니다. 디자이너 입장에선 생각해서 이것저것 다 맞춰서 반영해줬는데 왜 원래대로 해달라고 하는거지?? 싶을 수도 있어요.  이렇게 갈등이 시작됩니다. 클라이언트의 오더는 디자이너 입장에서 쉽게 납득하기 힘든 수준의 것들이고, 디자이너의 불평불만은 클라이언트 입장에선 이해할 수 없는 것일 테니까요. 네, 당연히 디자인은 각 요소의 치밀한 유기성과 미적 설계를 고려해야 합니다. 그렇다면 이러한 논리적인 디자인의 예술성과 심오함을 이해하지 못하는 클라이언트는 비난받아 마땅한 존재인가요? 물론 무리한 요구를 시전하며 디자이너의 설득과 주장을 원천봉쇄하는 쇄국정책자들도 있습니다만, 일반적인 경우에선 먼저 디자이너는 일을 제대로 하고 있는 지 셀프체크가 좀 필요한 부분도 있습니다.  굳이 현실적인 우선순위를 따지자면, '업무의 효율성'이 먼저예요. 디자인은 상대의 욕망을 구현하는 과정이라고 생각합니다. 특히 업무로써의 디자인은 더더욱요.  대다수의 '업무' 라는 것은 무형의 아이디어와 고민을 실체로 드러내고 증명하는 과정입니다. 그러니 내가 공부한 게 짱이고, 교수님이 말해준(물론 뭘 딱히 말해주지 않았다고 해도) 것들이 진리이고, 진짜최종.PSD 페이지에 있는 썰들이 생명수가 아닙니다. 상황이 곧 정답이죠.상황이 곧 정답이다.일을 하는 상황에선 내 지식과 고집만 내세운다고 뭔가가 해결되지 않습니다. 지식과 고집이란 건 그 근거와 상황에 따라 이렇게저렇게 조율이 가능해야 해요. 게다가 대부분 디자이너가 하는 일이란 것은 디자인적으로 완벽한 뭔가를 만드는 게 아니라 전체적인 일이 굴러가는 하나의 과정 중에 존재하니까요. 디자이너에게 셀프체크가 필요한 이유는 꼭 일을 잘하자~ 라는 개념이 아니라, 추후 진짜 문제가 불거졌을 때 디자이너는 어떻게 대응했는가. 에 대한 이슈로부터 자유로워지기 위한 자기방어의 최소한이기도 합니다. "너도 일을 개판으로 했구만?" 이라고 반격당하지 않으려면, 뭐랄까. 뭔가 틀이 있는 디자인업무체계를 만들어놓는 것이 좋겠죠.물론 디자인적인 퀄리티를 높이고 치밀하고 디테일한 디자인에 집중하는 것은 좋습니다. 당연히 그래야 하죠.  그러나 그 목표가 자기만족이나 내 습관에 의한 당연한 디자인을 만드는 것이 아니라, 전체 맥락에서 좀 더 발전적인 방향에 초점이 맞추어져야 하는 것이 현명한 선택이 아닐까 싶습니다.디자이너가 디자인을 초월적으로 잘하는 것은 중요한 일이지만, 그것만 잘해서는 오퍼레이터 그 이상도 이하도 아닐테니까요 . 진짜 중요한 것은 '안'을 제공하고 결과를 만들고 그것에 책임지는 일이 아닐까요.오늘은 클라이언트와 업무처리를 하는 과정에서 수정/피드백 등의 상황을 어떻게 풀어나가야 하는 지 정리해보았어요. 물론 상황이 정답이라는 말처럼, 케바케의 경우가 많을테니 필요하신 몇몇 포인트만 살펴보시면 좋을 듯 합니다.1. 폰트를 바꿔달라고 했으면, 폰트를 바꿔주도록 하자.그리고 나머지 부분이 이렇게 수정되면 더욱 디자인적으로 좋을 것 같다고 첨언을 덧붙인 레포트로 제공하는 방법을 택해봅시다. 자꾸 덧붙이고 다른 것까지 손을 대다보면, 디자이너 본인도 힘들고 클라이언트에게선 '왜 폰트를 바꿔달랬는데 위치를 바꿨느냐??' 라는 말이 나오기 마련이니까요.2. 만약 도저히 내 손이 폰트만 바꾸는 것을 허락하지 않는 다면 다른 요소를 바꾸기전에 미리 클라이언트와 상의를 해보자'디자인적으로 봤을 때 이러이러한 부분이 충돌하면 결과물이 꽤나 좋지 않게 나올 수 있으니, 좋은 방향으로 몇 가지를 같이 수정해 보려고 합니다. 어떻게 생각하십니까?' 라는 완곡한 표현을 선택해 봅시다. 3. 2번도 클라이언트가 못 알아듣는다면?일단 폰트만 바꾼 이상한 시안을 1안, 그리고 내가 생각하는 좋은 방향을 2안으로 잡아서 두 개를 주도록 합시다. 사람은 눈으로 보기전까진 상상속의 그 시안이 항상 완벽하다고 생각합니다. 사람의 머리는 항상 부족한 것은 퉁치고, 어설픈 것은 두루뭉술하게 만들고, 무언가를 빠뜨리고 자꾸 왜곡시켜버리니까요. 그래서 기획단계에서 텍스트만 보고 상상할 때는 완벽하고 멋진 골드드래곤같은 것들이 머릿 속 가득 펼쳐집니다. 그게 시안으로 나오고 실제 서비스로 만들어지는 과정을 봐야...아..이것이 참으로 생각같지 않은 것이구나.... 하고 무릎과 이마를 동시에 타닷탓탓 치며 깨닫게 되죠.4. 3번을 할 시간이나 여유가 없고 클라이언트도 완고하다면?사실 시안을 두 개 만드는 건 디자이너에겐 두 배의 시간이 걸리는 일이니, 굳이 만들기 전에 일단 눈치상 '아, 저 분은 거의 최영장군이다.' 싶은 느낌이 든다면 그냥 바로 이번 포인트를 생각해봅시다."폰트만 바꿔서 결과물 퀄이 떨어지는 것이 이 전체 프로젝트를 폭망시키는 일인가?"만약 그렇지 않다면 그 정도 핸디캡은 그냥 감수하도록 해요. 일을 빠르게 진행시키고 넥스트로 넘어가는 것이 더 중요합니다. 내 쪽에서 로딩이 걸려있으면 여러사람이 피곤해지고 다시 피드백이 오기까지 시간만 늘어지는 악순환이 시작되죠. 결과적으로 그 피해는 다시 디자이너가 입게 됩니다. 특히 내부가 아닌 독립해서 외주로 진행되는 경우엔 커뮤니케이션 속도가 더욱 느려지는 점을 고려하지 않을 수 없어요. 데드라인은 정해져있습니다!~. 커뮤니케이션이 느려진단 것은 결국 디자이너의 밤잠이 사라진다는 의미죠. 게다가 영원히 애인따윈 사귈수도 없고, 우울해지고...지구가 멸망할 수도 있어요.5.  4번을 생각했을 때 "이따위 시안을 시장에 냈다간 진짜 뉴스에 나올 수 있겠다..." 라는 판단이 선다면 이따위 시안을 내 손으로 만들었다는 사실을 인정하지 못하겠거나, 울트론을 만들었단 느낌이 들거나, 뭔가 크게 잘못되었다 싶으면 정식 미팅요청을 하자. 대면미팅으로 직접 조율을 시전하는 것이죠. 이 능력이 없거나, 무섭거나, 말을 잘 못하거나, 그런 교육과 경험이 없다고 징징대는 건... 안타깝고 슬프지만...  어떻게 할 수 없습니다. 누굴 탓할 수 있는 게 아니죠.6.  변경사항들이 생기거나 미리 유의해야 할 사항이 있다면 클라이언트에게 미리 공지를 하자. 일 다 터지고 나서 '그건 원래 그럴 수 있는거예요.' 라고 가르치듯 말하고, '디자인도 인쇄도 모르면서 나한테만 뭐라그래!' 라고 불평불만하는 건 말이 안되는 일입니다. 예를 들어 인쇄를 하면 당연히 색이 좀 더 어둡고 진하게 나올 수 있어요. 또는 절단면에 따라 일부가 잘릴 수도 있고, 특수한 제작건이면 비용이 더 청구될 수도 있고, 박/홀로그램/형압/음각 등등 다양한 이펙트가 들어갈 경우엔 포토샵 Mock-up 과 완전히 같은 제품이 만들어지지 않을 수도 있습니다. 종종 비에 젖으면 번질 수도 있고, 색이 바랠 수도 있습니다.  이러한 모든 사항에 대해 미리 고지를 해줘야죠. 장마철에 28일짜리 행사를 한다고 칩시다. 거대 현수막을 코엑스 전면에 부착했다고 생각해봐요. 비가 오고, 벼락이 치고 바람이 불고 하겠죠. 당연히!! 제작을 담당하는 디자이너는 이 현수막의 수명이 얼마나 될 지, 기상에 따라 어떤 데미지가 있을지 대략이라도 알려줘야 하는 것입니다. 이상한 결과물이 나오거나, 추후에 문제가 터지는 것에 대해서 클레임을 제기하는 건 당연한 일입니다. 아니 하다못해 우린 음식이 짜다고, 매운짬뽕이 맵다고, 츄리닝 실밥이 터졌다고, 바지 사이즈가 작다고도 반품교환환불을 하잖습니까. 우린 설명의 의무가 있습니다. 그건 제작단의 일인데 그걸 왜 디자이너가 알아야 하냐?! 라는 의견도 있던데.. 되도 않는 소리라고 생각합니다.  당연히 알고 있어야 합니다. '해봤다.' 라고 얘기해서 다들 입사하고 포폴제출하고 했을텐데...'해봤다.' 라는 말의 의미는 쉽게 놓칠 수 있는 이런 부분을 알고있다는 얘기입니다.왜 모든 여행상품의 하단에 '해당 내용은 현지사정에 따라 바뀔 수 있습니다.' 라는 문구 하나가 적혀있는지. 그 힘이 얼마나 거대한 지에 대해 생각해볼 필요가 있어요.7. 시안을 설명하고 안을 제시할 땐 디자인용어를 잔뜩 넣어 그리드와 레이아웃이 어떻고 컬러콤비가 이렇고, 시각적효과가 어떻고 를 말해봐야 소용없습니다.  디자인 이론이란 것은 그것이 전체 프로젝트의 결과물에 관련한 실질적인 적용이 가능할 때 의미가 있습니다. 이론은 현재 만들어진 시안을 설명하기 위한 주절주절이 아니죠. 이 시안이 완성되기 까지의 생각의 흐름을 알려주는 게 더 중요합니다. 흔히 디자인 포트폴리오를 보다보면, 설명이라고 써놓은 것들이 복잡한 용어와 컬러코드를 잔뜩 적어서 '이 시안'에 대해 설명하곤 하는데... 그것보단 '어떻게 이 시안을 만들게 되었는지?' 가 더 궁금합니다. 시안에 대한 PT발표나 클라이언트 미팅을 할 때는 디자이너만 알 수 있는 전문용어가 아니라, 왜? 어떻게? 무슨 효과가 있는지? 어떤 기대를 할 수 있는지, 근거는 무엇인지..등등을 얘기해주는 게 좋습니다.또한 이론을 들어 개선안을 내놓고 싶다면, 그 이론이 어느지점에 어떻게 적용되서 어떻게 개선되어야 좋은 것인지 말할 수 있어야 합니다. 뇌과학원리를 알고 심리학이론, 인지편향이론, 시각원리를 아는 것은 좋지만, 그러니까 그게 우리 일에 무슨 관련이 있는지를 설명할 수 있어야 하는 것 아닐까요.8. 제대로 알고 있는 지에 대한 자기검열도 가끔 필요하다 .  이건 언젠가 제가 꼭 하고 싶던 얘기입니다. 디자인이론의 대부분은 심리학과 인지이론에 기초하며,  취향과 인지편향, 인식/인지이론, 학습이론 등 다양한 갈래의 학문들과 크고작은 접점을 지니고 있습니다. 내가 알고 있는 디자인 지식이 온전한 진실이 아닐 가능성도 염두해둬야 하죠. 심리학은 지금 이 순간에도 새로운 이론들과 반증들이 드러납니다. 두뇌의 인지체계에 대한 내용도 매년 새로운 이론들이 등장해요. 10년 전에 대학교에서 배운 어떤 지식이나, 3,4년전에 클라이언트와 일하면서 경험했던 그 단편적인 사실만이 진리가 아닙니다. 더불어 올바른 지식을 알고 있다고 해도, 실상 디자인에선 지식 그 자체보다 그게 시장에 드러났을 때 어떤 효과를 주는가가 더 중요해요. 샤넬이 굴림체를 써서(물론 코딩상의 문제였지만) 네이버 전면에 배너를 내걸든, 동부화재의 로고가 DB손해보험으로 변경되며 해괴하게 바뀌든, 드롭박스의 리브랜딩이 꽤나 난해한 수준이라고 해도 소비자가 대거 탈퇴하거나 해당 회사에 대한 만족도, 인지도가 떨어지는 사태는 없었습니다. 반면 이론적으로 완벽하고 내 인생에 두 번 다시 없을 크리에이티브 요정의 역작이라고 해도 정작 시장의 반응은 싸늘할 때도 있죠. 디자이너는 4,5번의 내용을 통찰할 수 있어야 해요. 9. 그런 경험과 교육을 받은 적이 없다고 억울해하는 경우가 종종 있습니다. 디자이너가 된 것에 대해 불가촉천민처럼 괴롭고 험난한 인생길에 들어선 것처럼 자기연민에 허덕이는 분들도 가끔 볼 수 있었습니다. 분명 디자인업무는 힘들고 피곤한 일입니다.. 하지만 두 가지를 말하고 싶어요. 모든 일은 힘들고 피곤합니다. 하루종일 사전박스에 사전을 집어넣는 단순노동이나, 마케팅/기획자같이 머리가 터지는 전략을 짜는 사람들이나...모두 각자 나름대로의 고충과 힘겨움이 있습니다. 디자인만 특별히 죽을 맛이고 이것이야 말로 지구상에 둘도 없는 사탄의 직종이다... 라는 논리는 그냥 굉장히 이상합니다.또 하나. 자꾸 디자이너는 시간도 없고 힘들고 피곤해서 공부할 시간도 성장할 시간도, 새로운 것에 도전할 시간도 없다고 하는 분들도 있는데...사회탓, 회사탓, 시스템탓, 선배들이 만들어놓은 하향평준화 탓을 하며 어차피 디자이너는 야근과 박봉에 쩔어사는 지하세계존재들이야 라고 서로 다독이고 울먹이며 화이팅하는 동안 누군가는 이악물고 공부하고 자신만의 BM을 찾아내고 있다는 사실도 잊지 말았으면 합니다. 10. 그럼에도 분명 나쁜 클라이언트도 있다. 일방적인 무시와 비상식적인 요구, 업무와 관련없는 모독 등으로 디자이너들에게 큰 고충거리로 남는 분들이 있는 것도 사실입니다. 저두 숱하게 겪어봤구요. 이런 현실과 슬픔은 비단 디자이너 뿐만 아니라 이 험난한 자본주의를 살아가는 모든 직군에게 해당될 수 있겠네요. 이럴 때는 소주를 마시며 함께 '으이구..디자이너로 살아간다는 것이 이렇다..쯧쯧' 하면서 서로 등을 다독일게 아니라 서류로 승부하도록 합시다.. 계약서도 제대로 안쓰고, 도장도 안찍고, 선급금도 안들어왔는데 일에 착수하고, 영혼까지 너덜거린 후에 눈물흘리는 건 소용없었습니다.. 결국 털리는 건 내 영혼과 통장이죠. 독립을 하고 싶고, 디자이너로 정당한 댓가를 받고 내 것을 지키고싶다면 그 만한 공부가 필요한 것 같아요. 헤엑?!! 내가 그걸 어떻게 공부해애앵?!?! 이라고 하지만... 막상 해보니 민법총론도 공인중개사 인강 한 달이면 대략 쉽게 이해할 수 있더라구요. 계약법도 요즘엔 사방팔방에 정보 투성이입니다. 너무 많아서 문제죠. 세무업무 등도 몰라서 못했다..라고 하기엔 주변에 너무 능력자들이 많고, 126에 전화만 걸어도 과도하게 친절해서 조금만 더 친절했다간 다과상이라도 놓고 마주앉아 얘기해야 할 것 같더라구요.디자이너는 해당분야의 전문가입니다. 특히 독립을 했고 개인사업자로 자리매김하기 위해선, 자신의 모든 선택과 행동에 책임질 마음과 실력이 필요하다고 생각해요. 전문가라 함은 상대방의 비용과 시간과 노력을 아껴줄 수 있고 결과물과 그 파급효과를 극대화시킬 수 있는 사람을 의미합니다. 혼자만 알고 있고 내 입에서만 맴도는 불평으로 홀로 슬퍼하는 모습은 전문가같아 보이진 않아요. 우리 모두 전문가가 되어보아요 :)
조회수 15844

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

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

디자인씽킹과 린 스타트업의 공통점

2010년, 스탠포드 대학(Stanford University)으로 석사 유학을 떠났다. 왜 스탠포드여야만 했는지는 2가지 이유에서였다. 내게 디자인씽킹(design thinking)이라는 새로운 사고 방식을 알게해 준 아이데오(IDEO)의 창업자 데이빗 켈리(David Kelley)를 만나는 것과, 세계 혁신의 중심인 실리콘밸리의 창업 문화를 배우고 싶다는 것이었다. 이전 포스트에서 다뤘듯이 디자인씽킹의 핵심은 (1) 사람들이 무엇을 필요로 하는지 관찰하고 탐색해나가는 니드파인딩(needfinding), (2) 이렇게 발견된 니즈를 충족시켜주기 위한 솔루션을 반복적인 실험을 통해 검증해나가는 프로토타이핑(prototyping)이다. 정말 흥미롭게도, 실리콘밸리의 전설적인 창업가 스티브 블랭크(Steve Blank) 교수의 린 론치패드(Lean Launchpad) 수업에서 나는 디자인씽킹과 동일한 접근을 배웠다. 국내에서는 스티브의 제자인 에릭 리스(Eric Ries)가 2011년 발간한 린 스타트업(The Lean Startup)이라는 책이 크게 화제가 되었는데, 린 스타트업 전략의 핵심은 (1) 기존의 수십, 수백장짜리 사업 계획서를 쓰는 것이 아니라 사업의 핵심 구성 요소와 주요 가정들을 정의하는 비지니스 모델 캔버스(business model canvas)를 작성하고, (2) 이 가정들을 검증하기 위해서 끊임없이 잠재 고객을 만나 테스트하면서 이 캔버스를 수정하는 것이다. 스탠포드 유학에서 만난 교수님들. 데이빗 켈리(출처: ideo.com)와 스티브 블랭크(출처: entrepreneur.com)디자인씽킹과 린 스타트업 방법론은 무언가를 필요로 하는 사람, 즉 잠재 고객을 모든 프로세스의 중심에 둔다는 점에 공통점이 있다. 잠재 고객이 어떤 것을, 어떤 이유로, 어떻게 필요하는지는 아직 아무도 알지 못하기 때문에 이에 대한 가정(hypothesis) 수립이 선행되어야 하고, 이를 검증하기 위한 솔루션의 반복(iteration) 실험이 수반되어야 한다. 린 스타트업에서는 이러한 반복이 비지니스 모델 캔버스에서 정의하고 있는 9가지 요소 중 하나 이상을 크게 뒤집는 경우 이를 피봇(pivot)이라 부른다. 그런데 디자인씽킹이나 린 스타트업 방법론을 실제에 적용할 때 흔히 범하는 실수 2가지가 있다. 첫째, 너무 거대한 가정을 수립하는 것이다. 가정을 최대한 정교하게 쪼개어 하나의 유닛(unit) 단위로 만들지 않으면 반복적인 실험을 함에 있어서 어떠한 이유로 본 가정의 검증이 성공했는지, 실패했는지 알기 어렵다. 린 스타트업 방법론에서 최소 기능 제품(minimum viable product)을 강조하는 이유가 여기에 있다. 가정이 너무 거대하면 이 가정을 검증하기 위한 최소 기능 역시 거대해질 수 밖에 없고, 초기 실험을 위해 너무 많은 리소스가 들어갈 뿐만 아니라 검증의 결과 해석도 어려워진다.둘째, 린 스타트업 방법론을 빠른 제품 개발과 피봇으로 잘못 해석하는 것이다. 린 론치패드 수업을 마치고 스탠포드를 자퇴하며 창업했던 스타일세즈에서 우리 팀이 가장 치명적으로 범했던 실수다. 나의 경우와 마찬가지로, 많은 사람들이 린 스타트업 방법론을 "한두달 안에 빠른 속도로 제품을 개발하고, 반응이 좋지 않으면 아이디어를 뒤집는 방법론"으로 잘못 해석하는 경우가 있다. 하지만 개발할 제품의 스펙을 정의하는데 있어서 앞서 언급한 정교한 가정 수립이 선행되지 않으면, 엉뚱한 제품을 개발한 후 엉뚱한 방향으로 방향을 틀면서도 어디서부터 잘못된 것인지 제대로 파악하기가 힘들다.디자인씽킹과 린 스타트업 방법론 모두 실리콘밸리에서 시작된 실증적 접근 방법이다보니 사실상 맥락을 같이 하고 있는 것으로 생각된다. 다음 포스트에서는 이 방법론들을 잘못 해석함으로 인해서 스타일세즈 창업 때 범했던 실수들을 좀 더 구체적으로 복기해 볼 예정이다.
조회수 350

"제 능력치를 더 시험해보고 싶어요."

사랑방처럼 옹기종기 모여 이야기꽃을 피워내고 있거나 호탕한 웃음소리가 들리는 쪽으로 시선을 돌리면 항상 존재하고 있는 사람이 있다. 바로 B.A.T 영상 디자이너이자 분위기 메이커를 담당하고 있는 나은아다. 그녀는 제 나이다운 흥과 체력뿐만 아니라 제 나이답지 않은 광범위한 정보와 감성을 보유하고 있는 긍정적인 TMI 의 표본이다. 그래서인지 번-아웃 되어 지친 분위기의 전환이 필요하거나 뇌의 과부화로 아이디어가 고갈이 되었거나 등 꼭 필요할 때마다 찾게 된다. 인터뷰가 필요한 지금, 아니나 다를까 또 그녀를 찾았다.머리 색이 여름처럼 산뜻해진 나은아 님, 당신에 대해 말해주세요!어제 염색했는데, 색 잘빠졌죠? 아, 맞다 인사부터 해야지. 안녕하세요, B.A.T에서 영상 디자이너를 맡고 있는 나은아입니다! 플레이그라운드 브루어리, 오늘의 건강 등 디지털 페이지에 업로드되는 영상 및 모션 콘텐츠를 비롯해 KT&G 상상 스타트업 캠프의 영상 콘텐츠 시리즈를 만드는 등 다양한 제작 업무를 맡고 있습니다. 촬영이 필요한 경우엔 현장에 직접 나가 사진이나 영상을 찍어오기도 해요.B.A.T에서의 업무는 어때요? 만족도로 따진다면요. 나이에 비해 일찍 일을 시작한 편이라 B.A.T에 오기 전에도 여러 곳에서 일을 했어요. 주로 PD가 있는 포스트 프로덕션에서 일을 해왔는데, 방송 프로그램은 거의 정해진 템플릿이 있고 PD가 이미 기획해 놓은 상황에 투입되다 보니 단순히 제작만 하는 실무자 느낌이 강했습니다. 그런데 B.A.T에서는 제가 콘셉트를 잡고 그에 맞는 스토리보드를 짜고 촬영 및 편집까지 다 할 수 있게 된 겁니다. 내가 생각한 대로 연출하고 작업물을 낸다는 것이 얼마나 즐거운 일인지 몰라요. 덕분에 제 능력치를 깨달을 수 있게 되었죠. 저를 온전히 믿고 맡겨주시는 것도 감사하고, 스스로가 잘 해낼 수 있다는 자신감까지 있기에 만족도가 높은 편입니다!오, 자신감 좋은데요! 그 자신감은 언제, 어떻게 하면 나오나요?클라이언트 쪽에서 반응이 좋으면 '아, 내가 잘했구나' 하는 생각이 들면서 뿌듯함에 제 자신을 칭찬하곤 합니다. (웃음) 그리고 프로젝트 구성원끼리 혹은 내부 다른 동료들이 보고 작업물을 보고 아낌없이 칭찬해줄 때도 매우 기분 좋고 자신감 뿜뿜 돋아요.[KT&G 상상 스타트업 캠프 데모데이 티저 영상을 위한 3D 타이포 모델링 작업]  최근 마블 티저처럼 만든 KT&G 상상 스타트업 캠프 데모데이 영상 완전 멋있었어요! 내부에서도 잘 만들었다고 칭찬이 자자했잖아요.흐흐, 맞아요. 진짜 뿌듯하고 기분 좋았습니다! 사실 갑자기 기분 좋아질 때도 있는데, 영상 작업 끝내고 출력할 때 렌더링 바만 올라가도 너무 신나요~그건 그냥 직업병 아니에요? (웃음) B.A.T에 오래 머무른 사람으로서, 좋은 부분과 조금은 아쉬운 부분에 대해 과감 없이 말해주세요.스타트업이다 보니 무엇보다 개개인의 역량을 최대의 최대로 이끌어 낼 수 있고, 하고 싶은 걸 빠르게 도전해 볼 수 있다는 것이 큰 장점 아닐까요? 특히 ‘이런 건 어떨까요?’라고 의견을 내면 주저하지 않고 ‘그럼 그럴까?’ 하는 답변이 돌아오는 게 너무 좋아요! 대신, 다들 열정과 기량이 넘치다 보니 많이 바쁘고 외근이 잦은 분들이 많아 얼굴을 자주 보지 못하는 것이 아쉬워요. 퇴근 후 홍대에서 술 마시자고 말로만 하고 있는데… (비장한 표정으로) 이번달엔 진짜로 만날 거에요.아참, 잊어버릴 뻔 했는데 B.A.T 사무실이 예뻐요. 제가 꾸며서 그런 거 맞고요. (웃음) 잠시 머리 식힐 동안 담소를 나눌 수 있는 푹신한 소파가 있고, 다양한 간식들과 머신 커피도 준비되어 있고, 귀여운 배티도 있어요!배티가 뭐예요?로봇 청소기요! 로봇 청소기에 이름을 지어주자는 의견이 나와 내부적으로 네이밍 공고를 했어요. 디자이너 임철규 님이 B.A.T에 TY를 붙여서 배티로 하는게 어떻냐고 말하는데 와 이거다 싶더라고요. 심지어 BATTY라는 단어 뜻 자체도 '약간 제정신이 아닌' 이더라고요. 우리와 딱이다 싶었죠. 흐흐아! 제가 배티 그림도 그렸는데, 보실래요?[B.A.T의 자타공인 능력자답게, 뚝딱 그려낸 로봇청소기 BATTY]더 이상 인터뷰가 산으로 가기 전에 (웃음) 마지막으로 B.A.T 지원자들에게 한마디 한다면.어서오세요!환영합니다!그리고 저랑 같이 맛있는 점심을 드실 분들도 항시 모집하고 있습니다!역시 마지막까지 TMI인 그녀였다.. 
조회수 6102

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 #사용성개선 #사용성평가 #업무프로세스 #인사이트
조회수 1102

똥바크 UX 디자인 이야기

나는 바크 (Bark)라는 이름의 개의 대화법을 적용하여 주변의 서로 모르는 사람들과 소소한 소통이 가능하게 만들어주는 위치기반 채팅 서비스를 운영하고 있다. 이에대한 디자인 이야기는 예전에 쓴 '대화의 장벽을 허무는 UX' 글을 참고하시길 바란다. 오늘 글에서는 이번에 새롭게 런칭한 신기능 이면에 고민했었던 UX 기획 이야기를 좀 풀어보고자 한다.소셜미디어 메인 인터페이스의 양대산맥: 타임라인 VS 카드스와이프개인적인 의견이지만, 세상의 수백가지의 소셜미디어 서비스들의 메인인터페이스는 사실 페이스북으로 대표되는 타임라인 방식과 틴터로 대표되는 카드스와이프 방식으로 양분된다고 생각한다. 타임라인 방식이란, 유저의 메인화면에 사람들이 포스팅한 컨텐츠를 순차적으로 (Chronological Order) 아래로 스크롤 하며 보여주는 방식을 말하고, 카드스와이프 방식이란 컨텐츠를 하나씩 메인화면에 띄워주고, 유저는 제안된 컨텐츠를 왼쪽/오른쪽으로 스와이프 하는 방식으로 컨텐츠를 소비하는 인터페이스를 말한다.유저 입장에서 위 인터페이스가 어떤 의미가 있는지 우선 생각해 보자. 우선 타임라인 방식의 경우 유저의 컨텐츠 소비 편의성에 초점이 맞춰져 있다. 유저가 수 많은 소셜미디어 계정에서 올라오는 컨텐츠를 직접 찾아다닐 필요 없이 그냥 메인 피드에서 순차적으로 보여지는 컨텐츠를 스크롤 쭉쭉 내려가며 소비하는, 마치 잘 차려진 밥상에서 내가 먹을 음식만 젓가락으로 콕콕 찝어가며 소비하는 방식이다. 옛날 원조 소셜미디어인 싸이월드나 마이스페이스와 비교해보면 이 타임라인 방식이 얼마나 편리한지 이해할 수 있다.싸이월드는 유저가 일일이 게정을 들어가서 컨텐츠를 소비하는 방식이였다. (사진 출처 - http://zodiacsword.tistory.com/211)반면, 틴더로 대표되는 카드 스와이프 방식은 타임라인 방식과 싸이월드같이 계정에 일일이 들어가서 컨텐츠를 소비하던 방식의 장점을 적절하게 섞은 방식이다. 타임라인 방식의 경우 발생하는 가장 큰 문제는 크게 1) 차려진 밥상에 음식이 너무 많을 경우 모든 음식을 맛보기가 힘들다는 것과 2) 계정보다는 컨텐츠가 부각되어 사람들을 '소셜라이징'하게 만들기 보다는 '수동적 소비'만 하게 만든다는 단점이 있다. (실제로 페이스북 계정의 45% 이상이 Lurkers, 즉 컨텐츠 업로드 없이 수동적으로 남의 컨텐츠만 쳐다보고 있는 사람들이라는 통계도 있다.)페이스북의 45%는 컨텐츠 공유 없이 타인의 컨텐츠만 소비하는 사람들이라고 한다.카드 스와이프 방식은 위에 언급된 단점을 절묘하게 개선하면서도 여전히 유저 편의성을 유지시키는 방식이라고 할 수 있다. 즉, 유저는 여전히 타임라인 방식 처럼 다른 사람 계정을 일일이 들여다 볼 필요 없이 잘 차려진 밥상을 수동적으로 소비만 하면 된다. 하지만 밥상에 있는 음식을 하나씩 내 앞에 들이밀어줌으로써 내가 직접 맛보면서 음식을 계속 먹을지, 버릴지를 결정할 수 있게 해 주고, 더 나아가 그 음식이 맘에 들었을 때 음식을 만든 사람과 추가적인 교류를 유도하는 방식인 것이다.위치기반+즉시성에 맞는 인터페이스란바크 앱이 유저에게 전달하고자 하는 핵심 경험은 '언제 어디서나 지금 바로 내 주변과의 교류'라고 할 수 있다. 즉, 바크에서 컨텐츠가 소비되는 방식의 핵심 성공요인은 (Key Success Factors) '지금 내 주변'이라는 위치기반의 맥락 조성, 그리고 '즉시 주변 사람들과 감정을 교류'한다는 컨텐츠 공유-소비의 즉시성 담보 이 두개에 모든게 달려있다고 해도 과언이 아니다. '개처럼 서로 짖다'의 UX 이면에는 사실 저 두가지 KSF를 달성하기 위한 중요한 목적이 있는 것이다. 이 목적을 달성하기 위한 새로운 컨텐츠 공유 인터페이스로 위에서 언급했던 타임라인 방식과 카드 스와이프 방식은 모두 다음과 같은 이유로 부적합하다.1) 즉시성이란 몇시간만 지나면 이미 즉시성의 가치를 잃고 만다.타임라인 방식은 스크롤을 아래로 조금만 내려가도 (카드스와입 방식은 스와입을 옆으로 10번만 해도) 이미 반나절 전, 어제, 심지어 몇일 전 컨텐츠 까지 쭉쭉 읽어 내려가기 마련이다. 이미 몇 시간 전의 일도 가물가물 해질 정도로 바쁜 세상에서 살아가는 현대인들에게 타임라인 방식으로는 즉시성이 담보된 컨텐츠를 교환한다는 목표를 달성시키기 어렵다. Short-term memory 연구로 유명한 Atkinson and Shiffrin의 논문에도 인간의 단기 기억 용량은 최대 30초를 넘기지 않는다고 나와있다. 즉, 이미 30초만 지나가도 해당 기억은 working-memory에서 long-term memory영역으로 넘어가거나 사라진다는 뜻이다. 물론 타인의 컨텐츠가 몇시간 전에 형성된거랑 본인의 단기기억과는 아무런 관련이 없는 얘기지만, 얘기하고자 하는 바는 인간의 '즉시성'이란 그만큼 하루, 이틀의 단위가 아닌 한시간, 두시간의 아주 짧은 term에 해당하는 영역이라는 걸 강조하기 위함이다.2) 밥상을 차려주는 순간 이미 위치기반의 맥락을 잃고 만다.타임라인이던 카드스와입 방식이던간에 대부분의 소셜미디어 메인화면은 자체 알고리즘에 의해 유저에게 컨텐츠 밥상을 차려주기 마련이다. 아무리 내 근처에 있는 컨텐츠를 위치순으로 정렬해 준다 하더라도 이미 밥상을 차려줘서 보여주는 순간 위치기반의 맥락을 형성시키기 매우 어렵다고 생각한다. 이유는 두가지가 있는데, 첫째, 위치 기반이란 '나'라는 객체와 '주변'이라는 객체들이 한 공간영역에서 구분 가능해야 형성되는 개념인데 타임라인, 카드스와입 방식 모두 '나'라는 객체는 생략해 버리기 마련이다. 또한 '주변'을 느끼게 만드는 인터페이스는 그저 필터에 '가까운 순'이라는 버튼 하나가 다이다. 유저가 그 '가까운 순'이라는 필터를 지속적으로 기억해주고 있지 않는 한 스크롤을 조금만 내려가도 이게 '위치기반 이구나' 하는 맥락 형성은 실패하게 된다.이런 이유로 바크에는 타임라인이나 카드스와입과는 다른 새로운 방식의 컨텐츠 소비 인터페이스 고안이 필요하게 되었다.Locale Mapping과 개의 대화법과의 결합위치기반 맥락을 가장 잘 살려줄 수 있는 인터페이스는 사실 우리에게 이미 너무나도 친숙한 인터페이스가 존재한다. 바로 지도기반 (Locale Mapping) 인터페이스 이다. 유저에게 유저 객체와 주변객체를 공간영역에 뿌려주는 지도기반만큼 위치기반 맥락을 잘 전달할 수 있는 인터페이스는 존재하지 않는다. 문제는, 이 로케일맵핑 방식을 소셜미디어의 컨텐츠 공유 방식과 적절히 결합시키는 것인데, 이게 쉬운 과제는 아니다. 이미 Periscope라는 라이브스트리밍 앱에서 지도기반의 스트리밍 인터페이스를 구현한 이력이 있지만, 유저 편의성 부분에서 단점이 많아 지금은 타임라인 방식과 지도기반을 병행해서 보여주고 있고, 타임라인 방식이 메인 인터페이스로 변화되가고 있다.유저가 직접 포인팅 된 컨텐츠를 클릭해서 들어갔다 나갔다를 반복해야 하는 로케일 맵핑은 소셜미디어 컨텐츠 공유 인터페이스로서 유저에게 절대로 편리한 방식이 아니고, 이를 아무리 변형한다 해도 기본 골격상 유저 편의성을 담보하기 쉬운 방식이 아니기 때문에, 우리는 아예 방향성을 바꿔서 유저로 하여금 이런 불편함을 감안해서라도 로케일 맵핑방식이 당연하다고 여기게끔 하는 스토리를 부여하고, 이를 컨벤션화 하는 방법을 선택했다. 바로, '개의 대화법'과의 결합이다.바크에서는 이미 모든 유저가 '개의 대화법'으로 소통한다는게 메인 컨벤션이 되어 있다. 개가 아무 맥락없이 서로 짖어대고 단타성 짙은 커뮤니케이션을 하듯이 바크에서도 모두가 뜬금없이 서로 짖어대고 아무 맥락없는 소소한 대화들을 (속된말로) 지껄여 대는 그런 공간이 형성되어 있는 것이다. 여기에서 더 나아가 우리는 '개가 메시지를 남기는 방법'에 대한 고민을 해 보기 시작했다. 즉, 서로 짖는게 사람의 경우 서로 실시간 대화를 나누는 행위라면, 사람들이 뭔가 쪽지를 남기거나 메시지를 전달하기 위해 하는 행위가 개의 경우 뭐가 있을까를 고민하다가 영감을 얻은 행위가 바로 개의 '똥을 누는' 배변행위이다.알다시피, 개는 똥/오줌과 같은 배변행위를 통해 본인의 메시지를 해당 장소에 남겨놓고, 다른 개들은 그 냄새를 통해 '이건 내 영역이다,' '나 오늘 참 행복하오' 등등의 메시지를 읽는다. (물론 생물학적으로 정확한 표현은 아니다. 그저 인간의 레벨에서 해석하기에 저런 행위를 할 것이라는 추측 정도이다.)이 행위를 인터페이스화 하기 위해 구현하게 된 것이 바로 '드랍 바크'라는 신기능이다. 유저는 마치 개가 현재 위치에 똥을 누듯이, 본인의 현재 감정이나 자랑하고 싶은 내용을 현재 위치에 떨어뜨려 놓는다. 이렇게 떨어뜨려진 '똥'들이 로케일 맵핑방식으로 내 주변에 형성되고, 메인화면에서 저렇게 '똥'으로 개체화된 컨텐츠로 보여준다. 이 '똥'을 열면 유저가 남긴 이미지+텍스트가 조합된 메시지가 보여지고, 유저들은 이 메시지에 대해 나도 같이 신난다는 의미의 'Happy,' 본 메시지가 별로거나 불쾌하다는 의미의 'Angry'를 사정없이 눌러댐으로써 본인의 감정을 표현할 수 있다.또한, 앞서 언급한 '즉시성'을 강조하기 위해 모든 메시지는 기본 4시간이 지나면 사라지는 휘발성 메시지로 디자인 했다. 위의 오른쪽 화면 중간에 있는 바가 현재 그 포스트의 남은 수명을 나타내는 바 이고, 4시간이 지나면 그 메시지는 맵에서 사라지게 된다. 마치 똥이 식어서 냄새가 사라지는 것 (또는 냄새가 약해져서 메시지로서 가치가 떨어지는 것)과 같은 것이다. 여기에 재미요소를 주기 위해 다른 유저들이 'happy'보트를 한번 할때 마다 포스트의 수명이 1분씩, 'angry'보트를 할때마다 1분씩 감소하도록 설계했다. 본 인터페이스의 더 자세한 내용은 다음 동영상을 참고해 주시길 바란다.https://www.youtube.com/watch?v=jAFZ5Upu_7k<iframe width="700.000000" height="394.000000" src="//www.youtube.com/embed/jAFZ5Upu_7k" frameborder="0" allowfullscreen="">드랍바크 소개영상안드로이드까지 정식 오픈한지 약 일주일이 안된 지금 하루 약 30% 이상의 활성유저들이 열심히 똥바크를 싸고 있다. 물론 모든 유저가 사용중인 기능도, 모든 사용자가 만족하고 있는 기능은 아니지만 현재까지 반응은 매우 긍정적인 편이고, 앱 내에서 뭔가 소비할 컨텐츠가 생겼다는 점, 그리고 '개의 대화법'이라는 앱의 컨셉을 더욱 공고히 하는 인터페이스라는 점에서 향후 앱의 체류시간 및 리텐션율을 높이는데 긍정적인 역할을 할 것으로 예상하고 있다.글쓴이는 스팀헌트 (Steemhunt) 라는 스팀 블록체인 기반 제품 큐레이션 플랫폼의 Co-founder 및 디자이너 입니다. 비즈니스를 전공하고 대기업에서 기획자로 일하다가 스타트업을 창업하고 본업을 디자이너로 전향하게 되는 과정에서 경험한 다양한 고군분투기를 연재하고 있습니다.현재 운영중인 스팀헌트 (Steemhunt)는 전 세계 2,500개가 넘는 블록체인 기반 앱들 중에서 Top 10에 들어갈 정도로 전 세계 150개국 이상의 많은 유저들을 보유한 글로벌 디앱 (DApp - Decentralised Application) 입니다 (출처 - https://www.stateofthedapps.com/rankings).스팀헌트 웹사이트 바로가기
조회수 1150

월간<디자인>'블랭크 코퍼레이션' 리브랜딩

'월간< 디자인 >' 7월호에 최근에 진행한 '블랭크 코퍼레이션'의 리브랜딩에 대한 기사가 실렸습니다.아래는 월간 디자인 기사 전문입니다.디지털 시대를 위한 본질을 만들어내는 공장블랭크코퍼레이션의 타입페이스와 그래픽 모티브, 브랜드 마크를 조합한 포스터를 오피스 한쪽 공간에 부착했다."스스로를 재창조하지 않으면 생존할 수 없다. 오늘날의 성공을 가져다준 모든 것을 반복해서 한다고 미래에 또다시 성공할 것이라는 건 잘못된 생각이다.” 인스타그램 대표 케빈 시스트롬Kevin Systrom의 말처럼 세상은 등가속도로 무섭게 변하는 중이다. 콘텐츠와 커머스 또한 디지털의 문법에 따라 완전히 새로운 생태계를 구축하고 있다. 이러한 판도 속에서 2016년 2월 론칭 이후 성공 가도를 달리고 있는 블랭크TV가 최근 브랜드명을 ‘블랭크코퍼레이션’으로 확장해 아이덴티티를 새롭게 정립했다. 론칭 3개월 만에 매출 15억 원을 돌파하고 최근에는 월 매출 100억 원을 달성한 블랭크코퍼레이션. 이들이 급변하는 시장 환경 속에서 순항할 수 있었던 결정적 이유는 뭘까? 진부하게 들릴지 모르겠지만, 본질에 충실했기 때문이다.명함홀더와 명함블랭크코퍼레이션의 캘린더 블랭크코퍼레이션의 시작은 셀프 다운펌 크림으로 남성들 사이에서 그루밍 브랜드로 각광받기 시작한 블랙몬스터Black Monster를 론칭한 비디오 커머스 전문 기업이었다. 스마트폰 헤비 유저들은 대체로 정보를 동영상 형태로 받아들인다는 데 착안해 일찍이 영상 콘텐츠 기반의 비즈니스 모델을 제시한 것이다. 블랭크코퍼레이션이 추구하는 본질은 슬로건인 ‘라이프 니즈 솔루션’으로 설명할 수 있다. 소비자의 일상에는 크고 작은 문제들이 있는데 이를 기획, 생각, 플래닝을 통해 해결하겠다는 의지를 담은 것. 최근 론칭한 몇 가지 브랜드를 살펴보면 블랭크코퍼레이션의 비전을 더 쉽게 이해할 수 있다. 그중 라이프스타일 브랜드 소소생활은 가볍고 건강한 식문화에 대한 관심을 바탕으로 소소반끼, 소소한바 등의 제품을 판매한다. 시간이 없어도 가능한 한 건강하게 끼니를 챙기고 싶은 젊은 세대의 니즈를 포착한 것이다. 이 외에도 반려동물 브랜드 아르르Arrr는 단순히 ‘애완’이 아닌 ‘반려’에 초점을 맞춰 배변 교육을 위한 스프레이 등 반려동물의 라이프스타일을 위해 꼭 필요한 제품만 선보인다. 두 브랜드의 공통점은 물건을 잘 만드는 공장을 찾고 필요한 물건을 고품질로 디자인해 소비자들이 가장 궁금해하는 기능과 사용법, 효과 등 커뮤니케이션 포인트를 짚어냈다는 점이다. 즉 제품이나 브랜드를 만들기보다 생각과 기획을 판매하는 것이다. 지금까지 해온 것을 보다 명확하게 지칭하기 위해 새로운 이름에는 기존 미디어나 방송국을 연상시키는 ‘TV’라는 단어 대신 라이프스타일 솔루션 기업으로서 ‘코퍼레이션’이라는 단어를 넣었다. ‘빈칸’이라는 단어의 의미를 살려 소비자의 삶에서 해결되지 않은 ‘빈’ 영역의 문제를 해결하겠다는 슬로건을 녹여냈으며, 다양한 종류의 내부 브랜드를 하나로 아우르는 메가 브랜드로 기능하는 것이다.마더그라운드와 콜라보레이션으로 제작된 토트백블랭크코퍼레이션 전용 서체 blank sans브랜드의 아이덴티티는 블랭크코퍼레이션의 CI 디자인에서 명확하게 드러난다. 로고 디자인의 모티프는 공장과 솔루션에서 가져왔다. ‘factory’라는 단어 중 접두어 ‘fac’의 어원이 ‘하다’, ‘만들다’의 뜻이 있다는 데 착안해 창조적인 아이디어를 기반으로 콘텐츠를 생산해내는 공장의 의미를 담았다. 블랭크를 뜻하는 검은색의 빈 영역은 삶의 영역에서 일어나는 문제점으로 지칭했다. 누군가는 ‘원래 그런 것’이라 생각할 수 있는 부분도 문제의식을 갖고 바라보는 블랭크코퍼레이션의 접근 방식을 표현했다. 완성된 CI는 공식 웹사이트와 전용 서체는 물론, 새롭게 디자인한 오피스 공간과 커스터마이징한 제품에도 적용해 블랭크코퍼레이션의 업을 일관적으로 나타냈다. 디지털 시대에는 새로운 브랜드나 채널이 기하급수적으로 생겨난다. 그만큼 하룻밤 사이에 사라지는 채널도 부지기수다. 냉정하고 혼란스러운 이 시장에서 블랭크코퍼레이션은 상생할 수 있는 제조업을 발굴하고, 소비자들의 생활 속 사소한 문제점을 연구해 끊임없이 해결해나가려는, 본질을 향한 집요한 태도로 승부한다. 블랭크코퍼레이션의 이번 리브랜딩 프로젝트는 그들이 지금까지의 성공 가도를 바탕으로 입지를 굳혀가고자 하는지에 대한 백 마디 말보다 명확한 제스처라고 볼 수 있다.\브랜딩 디렉터 : 나세훈디자인 : 송인욱,오영은,박선희,하지은월간<디자인>글 : 백가경 프리랜서 기자편집: 김은아 기자디자인하우스 (월간디자인 2018년 7월호) ⓒdesign.co.kr, ⓒdesignhouse.co.kr 무단 전재 및 재배포 금지<월간디자인에 소개된 내용을 토대로 공유하였습니다.>
조회수 941

'느낌적인 느낌' 디자인 대공략집

디자인 오더를 받을 때 디자이너님들께서 생각하셔야 하는 부분이 있습니다. 대개 클라이언트가 '이런 느낌으로 해주세요..' 라고 하는 건 대부분 뻥입니다!여기서 뻥이라고 함은, 의도적인 거짓말이 아니예요. 사실 사람들은 무엇을 어떻게 바꾸고싶은지 잘 모르는 경우가 많거든요. 그래서 자신이 원하는 것을 표현하는 과정에서 자꾸 어긋난 포인트를 잡게 되는 거예요. 이 때 본래의 취지와 니즈에서 벗어난 단어와 추상적인 표현들이 입밖으로 나오게 되죠. 대부분 이 표현들은 지나치게 뭉뚱그려져 있거나, 상징/연상되어 있는 경우가 많습니다. 생각과 표현의 괴리로 인한 '거리감' 이라고 말하는 편이 적절하겠네요.   인사이드아웃을 보신분들은 잠시 기억을 되새겨 볼까요. 기쁨이와 빙봉, 슬픔이가 무의식의 세계로 떨어진 이후 잠깐 '추상화'의 과정을 거칩니다. 그들은 점점 2차원 평면이 되었다가, 도형이 되고, 이내 본래의 형체를 알아보기 힘들정도로 단순해지기 시작합니다.그렇죠 바로 이 과정입니다. 대부분 사람들은 어떠한 기억을 구체적인 정보보단 이처럼 추상화과정을 거쳐 단순하게 기억합니다. 이를테면 국물을 입에 넣는 순간 용이 승천하고 눈앞에 美味가 떠올랐다고 해볼께요. 사실 그 맛을 느낄 때는 단짠, 얼큰, 시원, 들깨의 고소함, 육수의 진함, 향기, 빛깔, 식감 등등 온갖 다양한 정보들이 미뢰를 통해 뇌에 전해졌을 겁니다. 하지만, 1시간이 지난 후 머리가 기억하는 정보는 그냥 '맛있다.' 일 뿐이죠. 조금 더 정확하게 기억하자면 '존나 맛있다.' 정도랄까요.반대로 기억의 인출과정도 이 추상화된 개념을 꺼내는데에서 시작합니다. 사람은 구체적인 정보를 통째로 꺼내는 것이 아니라, 추상적인 단어를 하나 꺼낸 다음 그 위에 정보를 덧붙이기 시작합니다. 문제는 바로 이 과정에서 과연 올바른 정보들이 덧붙느냐...? 하는 것이죠.세련되면서도 빈티지한 느낌..이란 이상한 표현이 나오는 것은 이러한 정보의 전후관계에서 비롯됩니다. 뭔가 세련된 느낌이 되었으면 좋겠는데, 뒤에 딸려오는 정보들은 또 뭔가 베네딕트 컴버배치가 주연일 것 같은 영국 수사물의 고전적이고 클래식 양식이 합쳐졌으면 하는 거죠. 사람들은 생각보다 표현에 많은 단어를 쓰는 것에 익숙하지 않습니다. 우리는 살아가면서 사용하는 단어만 계속 사용하기 때문이죠. 우리가 쓰는 단어가 시각정보를 모두 표현하기에 부족하다보니 그냥 이것도 빈티지고 저것도 빈티지고 너도 빈티지 나도 빈티지가 되는 겁니다. 그냥 대강 비슷한 단어를 가져다가 붙이는거죠.내 생각 나도 몰라.클라이언트가 말한 빈티지를 '빈티지'라는 단어 그대로 해석하면 우주적혼란과 역사적인 고통을 경험하게 됩니다. 도대체 저 사람의 머릿속에 무엇이 떠올랐기에 그걸 빈티지로 퉁쳤을까? 를 바라보는 것이 먼저죠.도대체 저 사람의 머릿속에 무엇이 떠올랐기에 그걸 빈티지로 퉁쳤을까?를 바라보는 것이 먼저죠. 디자인 오더에는 유독 '~한 느낌' 이란 단어가 많이 쓰입니다. 그런 느낌을 주려고, 이런 느낌을 내주세요, 저 느낌처럼 가주세요... 등등. 추상적인 단어는 여러 감각들이 느꼈던 정보를 한꺼번에 담고 있습니다. 그런데 그걸 시각정보로 국한시키려니, 머리가 아파지기 시작하죠.예를 들어 내가 어제 갔던 그 예쁜 카페의 느낌을 포스터에 담고 싶은 거예요. 카페에서의 경험은 향기, 행동, 맛, 분위기, 소음, 느낌, 조명, 인테리어 등등 굉장히 다양한 감각의 집합입니다. 그런데 그걸 시각 하나로 압축시키려고 하니 말이 막히고 어려워집니다. 적당한 단어도 생각나지 않죠. 자세히 설명하기도 힘들구요. 그냥 대충 '감성적인 느낌' 이라고 축약해버리는 거예요. 문제는 정작 '감성적인 느낌이 뭔데요?' 라고 반문하면 또 그게 뭔진 잘 모르겠다는 것이죠. 이처럼, 사람은 자신의 경험을 언어로 설명하는 데 익숙하지 않습니다. 생각보다 훨씬 더 많이요. 훨씬!! 훨어어어어얼씨니이이인!!!!말로 표현을 못하겠지만 그런 느낌... '느낌' 이란 건 굉장히 구체적인 어떤 정보를 꺼내기위한 큰 그릇과도 같습니다. 문제는 그 정보가 나오기 전 그릇부터 나온다는 점이죠. 심지어 가끔 엉뚱한 그릇이 튀어나오면, 원래 꺼내려던 정보가 아닌 그릇에 맞는 정보가 느닷없이 등장하기도 합니다. 오늘은 그 그릇과 정보에 대해 알아보도록 합시다요.1. 감성적인 느낌명조체폰트와 히끄무레한 파스텔톤 색, 아웃포커싱되어 있는 뭔지 잘 모르겠는 사진들. 흔히 언스플래쉬나 Life of Pix, 또는 얼라우투에 올라올 듯한 사진이 합쳐진 느낌의 디자인을 의미합니다.막 이런 일본스럽고, 세로쓰기가 좀 있는데 명조명조한 느낌에 희뿌연 배경에 피사체 하나 덜렁있는 사진과 막 그런 것들있잖아요. 감성적인 느낌은 밝은 톤과 어두운 톤이 있는데, 클라이언트에게 위와 같은 밝은 톤 감성레퍼런스와이런 어두운 톤의 감성레퍼런스가 있습니다. 흔히 감성적이다...라고 하는 건 '정적인' 느낌을 많이 의미해요. 뭔가 카만히 바라보며 한떨기 눈물이 흐를 것 같은 감정의 여백과 임을 향한 그리움이 느껴지는 그윽한 느낌을 원하는 거죠. 그러니 뭔가 사람이 서있는 사진이나, 풍경사진, 사물 하나만 클로즈업 사진을 활용하시고, 명조체와 세로쓰기를 사용해보도록 합시다.2. 심플한 느낌심플하게 해달래서 진짜 심플하게 해주면 왜 이렇게 허하냐? 라는 불만이 돌아옵니다. 아니 심플하래 해달래서 심플하게 했는데 이게 왜 이렇게 심플하냐라고 하시면 제가 홍시를 먹은 것도 아니고 도대체 우라질.... 스럽겠지만. 클라이언트의 심플에는 한 가지 말하지 않은 전제조건이 있습니다.'내가 원하는 것을 다 넣으면서' + 심플심플한 느낌이란 건 디자이너가 생각하는 그것과는 다릅니다. 대개 일반인들의 심플은 "정렬이 챡챡 잘되어있는 상태" 를 의미합니다. 10개의 내용이 있다면 오른쪽에 조금, 왼쪽에 조금, 가운데에 조금...이것이 아니라. 그냥 왼쪽에 10개가 다 뭉쳐있는 거죠. 같은 폰트와 같은 모양으로 말이예요. 그리고 그림과 텍스트의 영역이 딱 분리되어 있으면 '아 심플하다' 라고 생각해요. 위 이미지처럼 말이예요. 그냥 정렬과 정돈이 잘 되어있는 상태를 '심플하다.' 라고 표현하는 경우가 많았습니다. 여백이 얼마나 있건 뭐 그건 중요하지 않아요. 내용이 얼마나 복잡하고 카테고리가 많냐 이것도 중요하지 않아요. 사업내용이 200개인 사업체입장에선 100개 내용은 '심플한 것' 이거든요. 그러니 심플의 기준은 상대방의 머릿속이 얼마나 복잡하냐에 따른 상대적인 것입니다. 위계맞춰서 챡챡 내용 왼쪽정렬해주도록 합시당.3. 빈티지한 느낌각진 영어폰트를 큼직하게 쓰고 노란색 톤을 쓰자는 얘깁니다. 가끔 세리프영문폰트를 써달라는 의미이기도 합니다. 그것도 아니라면 크라프트 종이 느낌의 누런 텍스쳐를 넣어봅시다. 노란색톤을 쓸때에는 회색톤을 함께 써주면 치직거리는 골드스타 TV앞에 모여 안테나를 잡고 있던 어릴 적의 향수를 되살릴 수 있습니다.빈티지하지만 세련된 느낌4. 모던한 느낌회색과 더불어 가늘디 가는 Light 폰트를 써달란 얘기입니다. 면과 선중에 선을 활용해보도록 합시다. 가늘디 가는 2px짜리 흰색 선을 써주면 키야아..소리가 나오면서 백두산 박수를 자아낼 수 있습니다.이런느낌으로다가5. 화려한 느낌화려....를 장식하는 건 컬러입니다. 요소보단 색감이 훨씬 강합니다. 오죽하면 무궁화 삼천리 화려강산에서 화려는 산세와 지형지물을 뜻하는게 아니라 오조오억개의 무궁화삼천리를 뜻하는 말 아니겠습니까. 그렇다고 원색을 쓰는 건 싸우자는 얘기이므로, 포인트 컬러와 서브컬러 3개정도를 알록달록하게 배치해보도록 합시다.6. 화려한데 심플한 느낌응용해볼까요. 물론 그냥 들으면 얼간이같은 표현이지만, 곰곰히 생각해봅시다. 화려는 컬러를 다양하게 쓰는걸 말하고, 심플은 잘 정돈된 걸 의미해요. 그럼 다양한 컬러를 쓰면서 정렬선을 잘 정리해달란 얘기입니다. 아래의 그림같은 느낌적인 느낌이랄까요.7. 빈티지한데 모던한 느낌마찬가지로 모르고 들으면 얼뱅충이같은 말이지만, 빈티지는 노란색+회색톤을 써달라는 거고, 모던은 가는 폰트와 선을 써달라는 얘기입니다. 특히 굵은 폰트와 가는 폰트를 잘 섞어서 쓰면 빈티지한테 모던한 비밀의 열쇠를 풀 수 있습니다.빈티지한테 모던함...8. 현대적인 느낌굵은 영문폰트와 강렬한 명암대비로 표현해달라는 그런 얘기입니다. 팝아트느낌을 줘도 좋습니다. 채도와 대비를 찐하게! 빡. 줘보도록 합시다. 특히 빨간색계열에 조금 어둡게시리 버건디한 느낌을 주면 검정과 조합이 기가 맥힙니다. 현대적인 색상이 뭔지 모르겠다 싶으면 요즘 출시되는 스마트폰의 색상을 관찰해봅시다. 뭐 이상하게 울트라 바이올렛이랄지, 코랄핑크랄지, 샤이니펄 그레이랄지... 이상한 이름을 달고 나오는 스폐셜에디션 컬러들이 현대적인 색상입니다.9. 그런 느낌 있잖아요.어제 핀터레스트에서 본 그 시안입니다. 함께 노트북을 켜고 핀터레스트에 뭐라 검색하셨는지 물어봅시다.10. 아..그 딱 강렬한 느낌.뭔가 하나를 아주 크으으으게 키워달란 얘깁니다.11. 엣지 있는 느낌어떤 요소하나에 포인트 컬러를 넣어달란 얘깁니다. 또는 클라이언트가 원하는 어떤 요소(리본이랄지, 반짝이랄지, 텍스쳐랄지..뭐든)하나를 거기에 꼭 넣어야겠다는 강력한 의지의 표현입니다.12. 차분한 느낌텍스트의 좌측하단 정렬13. 발랄한 느낌프리픽과 셔터스톡의 벡터이미지를 구매해라.14. 귀여운 느낌팬톤컬러를 사용해달라. 크리미한 느낌으로다가. 그리고 모서리를 둥글게 해달라. 폰트는 HG꼬딕씨15. 강조된 느낌폰트를 굵게, 키워달라. 적어도 1.5배 이상의 크기로 키워라. 또는 보색의 박스를 씌워라.16. 고급스러운 느낌예식장에 주로 쓰이는 필기체 영문 세리프 폰트와 금색 포인트컬러를 써달라. 테두리에 선을 넣어라. 블랙은 매트한 느낌의 R45, G45, B45 컬러를 써라.17. 디테일이 살아있는 느낌어딘가에 깨알같은 요소를 넣어달란 얘기인데, 주로 화살표, 불렛포인트, 박스, 하단바 등에 뭔가 깨알같은 무언가를 넣어달라는 얘기입니다. 주로 화살표를 선으로 세련되게 바꾸면 디테일한 느낌이 삽니다.18. 킨포크느낌가운데정렬, 채도살짝 날린 사진을 쓰고, 사진 밑에 텍스트를 써달라는 얘깁니다.19. 병맛느낌충주시 고구마 포스터나 에듀윌 B급 포스터 만들어달란 얘깁니다. 개인적으로 극강의 난이도라고 생각합니다. 혹시 이걸 요구한 곳이 공공기관이거나, 나이가 지긋하신 분이라면 요즘 유행하는 것들중에서 1,2달정도 약간 지난 것들을 써보도록 합시다. 오지고 지리고 렛잇고라던지, 전화 아이받니?, 영미이이!!~ 이런걸 넣어달란 얘기...랄까요.20. 키치한 느낌키치한 워딩을 써달라는 얘깁니다. 사실 키치라는 건 독일어로 '조악하고 뒤떨어진 요소'를 나타내는 미학용어이지만, 현재는 B급감성이 있지만 센스있고 재빠른 감각의 디자인 또는 그러한 표현을 의미하는 것으로 조금 바뀌었습니다. 보통 키치함! 하면 떠오르는 몇몇브랜드가 있는데. 배민이랄지, 피키캐스트라던지, 좋은부탄....(?) 등... 이거든요. 하지만 이들의 키치함은 디자인 자체보단 워딩과 이미지의 절묘한 조합과 허를 찌르는 기획에서 비롯되는 경우가 많습니다. 때문에 이러한 키치한 느낌을 만들어달라고 했을 땐 사실 아이디어 요정이 되어주세요~~라는 무리하면서도 돈이 많이 드는 부탁인 셈이죠. 그러니 계약서를 다시 쓰도록 합시다....Aㅏ...뭐 더 많이 있겠지만..힘들어서 못쓰겠네요. 사실 위에 말씀드린 게 뭐 정답은 아닐 겁니다. 말 그대로 느낌이란 건 사람마다 인식하는 것들에 따라 큰 차이가 생기는 부분이니까요. 상대방이 정확히 머릿속에 뭘 떠올리고 '그 느낌'을 얘기했는지 찾는 것이 중요하죠. 말씀드린 부분은 지극히 개인적인 경험에서 비롯된 것이니 참고용으로만 부탁드립니다.더불어 사람은 언어에 구속되는 경향이 굉장히 강합니다. 원래는 '좀 더 밝은 톤' 을 말하려고 했는데,그게 잘 생각이 나지 않아서'좀 더 부드러운 톤' 이라고 말했다고 해볼께요.머릿속에선 명도를 높이는 걸 그렸겠지만, 입으로 '부드러운 톤' 이란 단어가 나온 순간부터 명도는 온데간데 사라지고 없습니다. 부드러운 톤!!..이 입밖으로 나왔고 내 귀에 들리는 순간 내가 원하는 건 '부드러운 톤' 이 되는 거죠.내 희망사항이 명확하지 않고 두루뭉술할 때엔 아무말이나 내뱉게 되는데 그 아무말이 다시 생각을 지배하는 놀라운 순환구조를 보여주는 거예요. 디자이너는 그 순환구조 사이에서 정신을 바짝 차려야 해요. 자칫 말이 생각을 부르고, 생각이 다시 이상한 말을 부르는 마법의 다차원세계에서 도르마무 마냥 영원의 속박을 경험할 수 있으니까요.상대의 표현은 어디까지나 표현일 뿐 그게 팩트가 아니란 사실을 잘 기억해두도록 합시당~. 도대체 저 표현뒤에 숨겨진 진짜 기억은 무엇인지를 캐내는 것이 또한 디자이너의 역할이라고 할 수 있겠어요. 디자이너는 상대의 욕망을 구현해내는 사람이기도 하니까요 :)즐디자인.
조회수 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 #디자인 #디자이너 #인사이트
조회수 1224

너의 포트폴리오를 바라보며 나는 미묘해졌다.

디자이너라면 모름지기 포트폴리오라는 것을 만들기 마련입니다. 그것이 곧 자소서이자, 레퍼런스고, 육신이자 영혼이죠. 보통 포트폴리오는 입사에 필요한 서류 또는 프리로 뛰면서 클라이언트에게 보여주는 용도로 활용됩니다. 상대방에게 나의 디자인스타일을 보여주거나 내 금손력을 자랑하거나 다양한 경험을 함축적으로 보여주는 것이죠. 하지만..이러한 포트폴리오는 왠지 모르게 부끄럽기 마련입니다. 모든 인간은 '내껀망했어' 병을 지니고 있어서 글을 쓰든 디자인을 하든 손으로 뭔갈 만들든 그리든 상관없이 내가 만든 모든 건 '망했다' 라는 생각을 지니고 있습니다. 좋게 말하면 더 나은 나를 위한 자뻑방지용 멘트 내지는 겸손모드일수도 있고, 다르게 말하면 그냥 남이 욕하기 전에 내가 먼저 나를 깐다!! 라는 자기방어의 일종이기도 합니다. 이처럼 디자이너들끼리는 자기 포폴을 보여주면서 아주 미묘한 감정을 느끼게 됩니다. 오늘은 별 의미는 없지만 그냥 재미있으니까 그 마음을 한 번 파헤쳐보도록 하겠습니다.내 포폴을 보여주자.1. 이건 망했어. 난 쪽팔리고 말거야. 세상에서 제일 부끄러워!!! 모시조개가 되겠어!! 일단 제일 먼저 드는 건 부끄러움입니다. 내가 만든건데 만들고나면 부끄러워. 그리고 그걸 켜는 순간부터 그건 최악의 작품인거야. 내가 고생했던 수많은 시간들은 모르겠고 그냥 이건 똥입니다. 이건 내가 만든게 아닌 것 같아. 과거의 나는 똥멍청이..2. 근데 또 은근 이건 자랑하고 싶어.막 포폴 넘기다보면 한두개쯤 이름만 대면 알만한 곳들이 나온단말이죠. 그럼 주변에서 오오... 가 터져나오는데 그럼 또 대강 디테일하게 후루룩 설명해주고 얼른 넘기게 됩니다. 보통 이런 멘트가 나오죠. '어쩌다보니 그냥 하게 되가지구..'  하지만 이건 전교1등이 교과서로만 충실히 공부했고, 운좋게 거기서 문제가 나온 것 뿐이다. 라는 얘기와 비슷합니다.3. 상대방의 시선이 왠지 신경쓰여.상대방의 시선이 어딘가에 3초 이상 머물러있으면 나도 그곳을 보면서 뭐 잘못됬나? 오타있나? 이상하나? 까려고 하나? 등등 뭔가 불안해집니다.4. 음...음..나오면 개불안합니다. 보통 음~은 고개를 흔드는 제스쳐와 함께 등장하는데..뭔가 알겠다~는 듯한 그게 굉장히 신경쓰입니다.5. 스크롤이 빨라지면 더 신경쓰여.자세히 보면 부끄러운데 자세히 안봐도 신경쓰여. 뭐지? 별볼일 없다는건가? 눈에 탁 걸리는 그런게 없나?...그냥 슥슥슥...대충 넘기는 건가..등등 오만 상상의 나래가 펼쳐집니다.6. 빨리 이 시간이 끝났으면 좋겠어.얼른 보라고!.근데 얼른 보지마!!..7. 안물안궁인데 자기변명하기이거 이틀만에 급하게 만든거라서..허접하다. 라는 멘트는 노래방에서 오늘 감기걸렸다는 멘트와 동일한 맥락입니다.8. 감탄하면 부담스러움막 와!!..진짜 금손이다..진짜 짱이예요! 어떻게 이렇게 만드셨어요?! 이런 질문나오면 겁나 부담되면서 입발린 말인가? 진짜 잘한건가? 막 기분이 좋아서 입꼬리가 올라가는데 마음이 무거워지고 난리가 납니다. 보통 입은 '그냥..' 이라고 하는데 눈과 광대가 상향되어있는 부자연스러운 표정이 연출되곤 합니다.9. 이거 어떻게 했어요?? 라는 질문 어려움..이거 어떻게 만든거냐.란 질문은 답하기가 어렵습니다. 너가 하는 대로 포토샵이랑 일러쓰면 이렇게 만들 수 있습니다. 하나하나 상세히 설명하는 건  이상하죠.. 이 시안으로 말씀드릴 것 같으면 우선 제가 디자인학과에 입학했던 그 날 얘기를 하지 않을 수 없는데요...레이어 두 개 겹쳐서 아랫쪽에 마스크주고 윗쪽에 클리핑넣어서 믹스하고, 위쪽에 브러쉬로 필터주고...레이어 하나 더 만들어서 흰색 브러쉬 포인트200주고 광원넣고, 다른 건 까맣게 만든뒤에 가우시안넣었어요. 이 때 중요한 건....이렇게 설명할 수도 없는 노릇이잖아요. 그래서 우린 '그냥 필터쓰고 어떻게 하다보니 되더라구요.' 라고 줄이곤 합니다.10. 이거 어디서 본 것 같다! 는 말은 후덜덜....사실 포폴 만들다보면 레퍼런스를 자꾸 찾게되는데 어쩔 수 없이 핀터레스트나 비핸스의 컨셉들을 참고할 때도 있습니다. '이거 어디서 봤는데?' 란 말 들으면 뭔가 억울하기도 하고 찔리기도 하고 혼란스러운 내 마음...니 포폴을 보자.1. 표지부터 일단 앗...'존나 잘한다' 라는 생각이 듭니다.2. 자괴감이 시작됨'내 껀 진짜 개구리다..' / '난 똥손이야.' 등등 자괴감이 시작되면서 괜히 뭔가 가슴 한 켠이 쌔애....해집니다. 그리고 돌아가서 다시 내꺼봐. 자꾸 봐. 한 3,4번정도 보면서 그래도 이 정도면 나쁘진 않지 않나?..라고 나를 끌어안아주기도 합니다.3. 오 저거 실수했네!그 와중에 뭐 실수하나 보이면 인간미 발견해버리고 이 사람도 역시 인간이구나 싶어서 동질감 오지는 부분4. 이건 어떻게 만든거지?!보통 시안보면 대강 어떻게 만들었겠다~~가 눈에 그려지지만...가끔 진짜 이건 사진같이 잘 만들었다! 싶은 고퀄이 등장할 때도 있습니다. 그래서 물어보면 답이 두 가지입니다.포샵+일러로 만들었다. = 다시 자괴감. 난 툴고자야....마야, 에펙 등 내가 모르는 프로그램으로 만들었다. = 휴, 다행이야. 그럼 그렇지.5. 색감좋네..색 잘쓴거 보면 또 부러움 시작됩니다. 특히 컬러 조합이 아주 감각적이고 막 개성넘치는 경우에 와....하는 경우가 많습니다. 포폴에 막 레트로감성 넘치거나 되게 사진편집 잘해서 랜딩페이지 처럼 만든 사람들 보면 이 많은 능력자중에서 내가 살아남을 수 있을까..라는 본질적인 밥줄의 위협도 종종 느낍니다.6. 저건 내가 더 잘한듯.내가 잘한거 나왔다!!그 와중에 나와 비슷한 로고나 브랜드가이드 보다가 내가 더 잘한 것 같으면 후훗...거리면서 슬쩍 기분좋아질 때도 있고...7. 되게 딱부러진 타입인가..막 엄청 심플하고 전문적인 용어 딱딱 적혀있으면 왠지 오...뭔가 전문가 포스인가?..스러울 때도 있습니다. 포폴은 보통 자기 성향이 드러나기 마련이라서 포폴 스타일과 상대방의 성격을 동일시 하는 경우도 종종 있거든요.8. 대기업 프로젝트 있으면 막 움찔하고막 외국계기업이나 이름 대면 다들 알만한 큰 프로젝트 레퍼런스가 있으면 갑자기 대단해보이고(사실 실상은 그리 대단한 것이 아닐 가능성이 많다는 걸 알면서도.) 뭔가 난 왜 저런거 없지.. 스럽고.9. 사람들이 내꺼 볼때보다 저사람꺼에 더 환호하면 신경쓰이고.내 꺼 볼때는 오오..이쁘네요. 하다가 상대방 포폴보면서는 와 대박!..쩔어요..디자인 미쳤네..금손이다 금손..이러면 뭐지..왜 내꺼에 박수소리 작았지? 싶고10. 아 포폴..업뎃해야겠다. 갑자기 폭풍다짐하고.막 갑자기 동기부여 자극받아서 포폴 다시 만들어야 겠다..싶어서 집에가서 어떻게 바꿀 지 고민하게 됩니다. 물론 진짜 만들진 않습니다. 포폴 만드는 건 진짜 엄청 귀찮고 힘든 일이니까요.하지만 다 부질없단 걸 알죠. 뭔가 남의 것을 보면서 은연중에 비교가 되는 것은 어쩔 수 없는 본능일 뿐입니다. 여러분들의 포폴은 하나하나 굉장히 멋지고 소중한 것들입니다. 금손같아 보이는 그도 솔직히 저거 만들면서 엄청나게 힘들었을 거고, 도움도 받았을 거고 여러 사연이 있을 겁니다. 또 어떤 누군가를 내 걸 보면서 같은 감정을 느낄 거구요. 그리고 무엇보다 가장 최고의 포폴은 내 개성이 확연히 드러나있는 색깔있는 포폴 아니겠습니까. 보통 폭풍 열등감에 휩싸이는 이유는 실제로 내가 못해서라기보단..내가 내 포폴에 확신이 없기 때문입니다. 우리 디자이너는 예쁜 것을 만드는 사람이 아닙니다. 예쁨에 속아 넘어가지 않는 멘탈 강한 디자이너가 되도록 합시다!라고 하면서 나는 내 포폴이 맘에 안들고....

기업문화 엿볼 때, 더팀스

로그인

/