오늘은 컨셉에 대한 이야기를 해보려고 해요. 영어는 씨오엔씨이피티. 콘셉(ㅌ) 죠. 사전적의미에선 (명사)광고·디자인 등에서, 그 속에 담고자 하는 기본적인 생각. 라고 쓰여있네요. 뭐 꼭 광고나 디자인 뿐 아니라 요즘엔 컨셉의 적용범위가 더욱 넓어졌으니 그냥 우리가 일상적으로 일고 있는 '중심이 되는 생각이나 행동의 자세' 정도로 재정의내리기로 합시다. 왜 하필이면 백만고객이란 말을 붙였냐면 ....제 브런치글의 누적뷰가 곧...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가지의 컨셉을 한 번 정리해보았어요. 매우 일반적이고 잘 알려진 컨셉들입니다. 이러한 컨셉 이외에도 본인만의 색을 살릴 수 있는 어떠한 특이한 컨셉이 있다면 아주 흥미진진한 비지니스 브랜딩이 될 수 있으리라고 생각해요. 여기서 흥미진진하단 것은 꼭 즐겁고 돈을 많이 번단 얘긴 아닙니다. 그지가 되어 길바닥에 나앉는 것도 흥미진진한 일에 포함되니까요. 색이 강렬하고 분명하단 것은 그 색에 대한 호불호가 명확해진단 것을 의미합니다. 분명 싫어하는 사람들도 등장하기 마련이죠. 제 글도 어느덧 그러한 지경이 되었...(와씨....유명해졌나봐) 컨셉은 분명 비지니스의 성향에 따라 어느정도 사회적인 선입견이 있습니다. 금융은 정장, 디자인은 자유로움, 마켓쪽은 트렌디한.. 이런식의 고유한 이미지들이 이미 장착되어 있죠. 그러나 요즘엔 이러한 이미지를 깨버리면서 새로운 컨셉을 넘나드는 비지니스들도 많아진 것 같습니다.클라우드 웹하드서비스와 아트웍의 만남이랄까..금융서비스와 귀요미의 만남언론기능과 키치함의 만남이랄까?기존의 이미지를 깨버린 신선함은 많은 주목을 받기 마련이고, 추후 그 기대와 인기에 부응하는 것은 또 다른 영역의 일이 될 수 있겠습니다. 물론 어느쪽도 쉬운 길은 아니겠으나 분명한 사실은 브랜딩에 있어서 초기컨셉을 설정하지 못하면, 어떤 방식으로든 스르르 사라지게 될 것이라는 사실입니다. 특히 요즘같이 다양한 컨텐츠가 무한 생성되는 시대에는 더더욱 그렇죠.조금 덧붙이자면 컨셉은 만들기보다 유지하는 것이 훨씬 어렵습니다. 제 글의 컨셉은 딱히 뭔진 모르겠으나, 사이다같은 팩폭과 술술 읽히는 말랑한 문체라고들 많이 얘기해주시더라구요. 그러나 주제에 따라 이러한 문체가 장애물이 될 때가 종종 있습니다. 그러나 그럼에도 불구하고 이 문체를 꾸준히 유지하면서 병맛을 지켜나가는 것이 또한 저의 숙명이죠. 사실 글쓴다고 돈이 되는 것은 아니지만, 일종의 독자들과의 의리랄까요. 그런 실낱같은 뭔가 끈끈함이 생겨나고 있습니다.제 입장에서 글 쓸때의 컨셉을 유지하는 것은 끝임없는 드립연구와 찰진 비유와 예시를 찾아내는 것, 날마다 네이버뿜과 오유를 뒤적이며 그럴싸한 사진들을 찾아내고, 브랜딩서적들을 까칠한 눈으로 읽어주는 것들이랄까요. 놀라운 것은 클라이언트와 하루만 대화를 하지 않아도 그 감이 급속도로 떨어져간다는 사실입니다. 한 일주일만 지나도, 내가 그런적이 있었나? 싶을 정도로 사람의 적응력과 빡침을 잊는 속도란 굉장하더군요. 오전까지만 해도 빡쳐서 막 글쓸 거리가 넘쳐났는데, 오후되니 벨기에초코케익 한 줌 떠먹고 눈녹듯 사라지는 극딴적인 간사함..하아....이렇듯 시간과 감떨어짐, 케익등으로 인해서 컨셉유지가 안되는 저의 간사함을 보면서 기업입장에선 이 일이 얼마나 힘들 것인가를 유추해볼 수 있겠습니다.때문에 컨셉을 유지하고, 컨셉을 방해하는 일들을 쳐내는 것에는 또다른 맥락의 노력이 필요할 것입니다. 이 얘기는 다음에 하려고 합니다. 배가 고프기 때문이죠. 화장실도 마렵구요. 제가 컨셉을 방해하는 잡다한 것을 쳐내는 방식은 굳이 커피를 마시고 화장실을 참아가며 글을 쓰는 것입니다. 초고도의 집중력을 발휘할 수 있고, 마음이 급해서 한숨에 쭈욱 글을 써내려갈 수 있죠. 하지만, 좋은 방법은 아닌 듯 하니 좀 더 현명하고 건강한 방법을 찾아들고 다음 시간에 뵙도록 하겠습니다. 빠잉.

스타일쉐어 디자인팀은 한번에 디자인을 업데이트하는 시간의 한계와 비용때문에, 오래된 디자인 컴포넌트를 하나씩 개선하는 방향으로 디자인 개선을 진행하고 있습니다.그 중 하나인 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 디자인을 한번에 업데이트하는 일보다 어떻게 보면 부담도 적습니다.가장 좋은 점은, 역시 커뮤니케이션입니다. 실제론 티가 많이 나지 않는 작업지만 사내에서 디자이너간, 디자이너와 개발자간 의사소통시 명확한 언어가 생긴 것입니다.색상 하나하나 함께 정한 디자인팀, 같이 이름을 고민해준 개발자분들에게도 감사합니다!읽어주셔서 감사합니다.#스타일쉐어 #디자인팀 #디자이너 #그레이스케일 #커뮤니케이션 #개발자 #의사소통 #협업 #팀워크

오늘은 글에 대한 이야기이니, 짤이미지 없이 글만 적어보겠습니다. 이미지 찾기 귀찮아서 그런거 아님 브런치에서 자주 놀다보니, 요즘은 브런치에 올라오는 글들을 읽게 됩니다. 브런치 담당자님들이 꿀같이 픽해준 글들이 아주 찰지더군요. 최근엔 가상화폐 글들이 온통 올라와서 떡락장에 시퍼렇게 멍든 제 가슴을 한층 더 먹먹하게 해주고 있습니다. 이 다양한 글들을 읽으면서 쓰신 분들의 정신세계를 유영하는 즐거움을 느끼고 있습니다. 타인의 표현속으로 풍덩 뛰어드는 것은 아주 아스트랄한 경험이죠. 세상엔 참 다양하고 똑똑한 분들이 많다는 생각을 하며 그러면 도대체 난 뭐하는 놈일까...라는 자기성찰의 시간을 가지기도 합니다.꼭 브런치가 아니더라도 페이스북이든 뭐 트위터를 포함해서 최근엔 다양한 텍스트콘텐츠가 슬며시 떠오르고 있습니다. 시각적 피로가 쌓인 탓도 있겠고, 아날로그한 트렌드가 슬쩍슬쩍 롤라장과 함께 되돌아오고 있는 까닭도 있겠군요.모든 콘텐츠가 그러하듯, 어떤 것은 눈에 땋! 보이면서 공차의 타피오카 펄마냥 쑤욱 읽힙니다. 가끔 너무 잘읽혀서 목에 펄이 걸리는 느낌을 받을 때도 있죠. 거친 리딩이었어..하앍하앍..거리면서. 금손님들의 미친 필력과  일필휘지의 감동을 느낄 때면 동공이 두근대며 살아있음을 느낍니다. 반면 종종 순간 14년전으로 되돌아가 11월10일 그 날의 언어영역 비문학 지문을 보는 기분을 느낄 때도 있습니다. 순간 수능용 시계를 손목에 차고있는 착각을 느껴 깜짝 놀라곤 합니다.우리의 주요 일상은 일집일집일집일집 입니다. 집에서 글쓸 일이야 페북이나 브런치에 썰푸는 것 정도일테고, 주로 글을 쓴다면 일할 때 많이 쓰겠네요. 업무용 텍스트는 결이 다르긴 하지만 궁극적으론 평소의 필력대로 속도와 퀄리티가 결정됩니다. 종종 기획안이나 보고서 등을 보다보면 비슷한 언어영역 시간에 빠져든 기분에 저도 모르게 컴싸를 꺼내들게 됩니다. 밑줄 친 a를 자꾸 찾게 되죠.그래서 오늘은 왜 그럴싸해 보이는 데 어떤 글을 잘 읽히고 어떤 글은 안 읽히는 지 생각해봤습니다. 글 잘 쓰는 방법에 대해선 이미 다양한 콘텐츠들이 나와있으니, 우리는 똥글을 만드는 방법을 알아보도록 하죠.1. Deep하고 Complicated한 Word의 complexity아니 그냥 '마무리' 라고 하면 될 걸 굳이 'Finalize해주시고..' 라고 쓰는 경우가 있습니다. 한/영키도 두번 눌러야 하고 키보드로 따지면 2글자나 더 쳐야하는데 정작 의미는 전혀 다르지 않습니다. 기본적으로 한영혼용체는 가독성을 격렬히 떨어뜨립니다.  인간이 언어를 이해하는 구조는 아주 다양합니다. 소뇌에선 독서에 필요한 운동능력, 그러니까 동공의 움직임, 타이밍, 정확성을 담당합니다. 그리고 전두엽과 좌뇌부근의 브로카 영역에서 언어의 음운/의미 등을 처리하게 되죠. 이 때 마치 컴퓨터의 캐시파일처럼 자주 쓰는 단어는 자동적으로 기억이 나도록 임시저장을 해두기도 한답니다. 그러나 새로운 단어나 외국어가 등장할 경우엔 그 단어의 뜻과 맥락을 파악해야 하니까 새로운 파일을 여는 동작을 하는 셈이죠.  우리는 흔히 책을 대각선으로 읽는다고 생각하지만, 실제 아이트래킹에선 완벽한 대각선을 그리지 않습니다. 밑에 1/3부분은 거의 시선이 가지 않죠. 시작은 왼쪽 상단에서 시작하지만 중간쯤에선 그냥 전체적으로 보이는 단어들을 쏙쏙 뽑아 문맥을 자체적으로 정리하고 이해하는 과정을 거칩니다. 그런데 영단어들이 중간중간에 등장해버리면, 단어만 뽑아서 문맥을 이해할 때 움찔합니다. '어...어서 뜻을 찾아!!''그 뜻이 이 문맥과 맞는지 확인해!!''혹시 잘난 척은 아닌지 파악해!!(?)'등등 언어처리과정에서 몇 개의 추가적인 과정을 거쳐야 합니다. 직관적인 이해를 방해하고 다시 읽고 또 읽게끔 만들죠. 두뇌는 엄청나게 게으르고 귀찮아서, 몇 번 봤는데 자꾸 걸리적 거리면 안 보려고 합니다. 한글과 영어의 혼용체는 일전의 병신보그체라는 이름으로 백성들에게 널리 알려졌는데, 딱히 좋은 느낌은 아닙니다.2. 수동태 작렬"마케팅은 고객으로 하여금, 브랜드로의 접근을 용이케하고 구매에 있어서 원활한 루트를 경험되어지게 한다."영문법에서 까다로운 부분 중 하나가 수동태였죠. be+p.p로 과거분사 뒤엔 항상 전치사가 붙었습니다. 수동형문장은 기본적으로 국문법에서 잘 쓰이지 않기도 할 뿐더러 '조사'를 엄청 쓰기 때문에 문장을 복잡하게 만듭니다. '~로 하여금, ~에게, ~에 의하여, ~하게 한다.' 등의 조사들은 굉장한 지루함을 선사하죠. 반성문에 자주 쓰는 표현입니다. 문장을 억지로 늘려야 하니까요.3. 영문번역체'이러한 연구결과는 상품선택에 있어서 우리에게 주어진 너무 많은 정보가 선택을 어렵게 할 수 있음을 느끼게 한다.'음, 번역체가 사실 잘못된 표현은 아닙니다. 오히려 꽤나 익숙하죠. 우리는 십수년간 영어지문을 기계적으로 독해해왔고, 타일러도 이해못하는 수능외국어영역 문제를 구조화시켜 풀 수 있는 신박한 능력을 지니고 있으니까요. 하지만, 그건 1~5번 중에 답 하나를 고르기 위한 분석을 할 때 얘기이고, 쭉 읽어내려갈 때는 번역체는 꽤나 걸림돌이 됩니다. 사실 저도 번역체를 많이 씁니다. 가장 흔한 예로"씁니다 - 쓰고 있습니다."등의 어미 늘리기와 "그것은 이것과 함께 어쩌고..그녀에게"와 같은 폭풍대명사 사용하기가 대표적이군요. 추가적으론"아름다운 그녀의 목걸이를 본 그는 황홀한 눈빛을 감출 수 없었다.""그는 그녀의 아름다운 목걸이를 보고 황홀함을 감출 수 없었다."등의 관계대명사 수식절 사용도 있겠네요.4. 쓸데없이 괄호/인용구 쓰기도… 돌은 내려놔 주세요. 아무쪼록 빠른 시일 내에 연재를 재개 할 수 있도록 노력하겠습니다. 어차피 기다려주시는 분도 별로 없겠지만(웃음) 그래도 제 글을 기다리는 분들을 실망시키고 싶지는 않으니까! (퍽퍽퍽, 탕! 질질 끌려간다.)오덕체에서 자주 보던 괄호형 혼잣말하기나 쓸데없이 직접인용구를 사용하는 경우도 있습니다. 독서의 맥을 끊죠. '작은 따옴표' 를 자주 쓰는 경우도 마찬가지입니다. 줄바꿈이 너무 많거나 문장부호가 괜히 막 들어가 있는 경우도 있죠. 5. 그냥 뭔 말인지 모르겠는 문장의사가 진단서에 '목감기 콜록콜록' 이라고 쓰면 처방전받을 때 왠지 손을 머뭇거리게 됩니다. 그렇습니다. 말과 글은 상대방의 지식수준과 신뢰와 직결되어 있죠. 하지만 종종 그걸 졸라 뽐내고 싶은 분들이 있는 듯 합니다. 처방전은 약사보라고 주는 겁니다. 약사는 휘갈긴 악필을 이해할 수 있구요. 하지만 소비자와 대중들을 상대로 하는 글에서 전문용어를 폭풍 남발해버리는 건 난 똑똑해!!! 라고 어깨 견장 움찔거리는 느낌이 들어 불편합니다.6. 어설픈 재수없음문법의 문제가 아니라, 이런 내용입니다.'나에게 닥쳐온 시련은 이번 뿐만이 아니었다. 하지만, 내 행동력이 어디 가겠는가. 후우... 이건 나에게 단점이자 장점과 같은 것이었다. 날 괴롭게 하고 잦은 실수에 빠뜨렸지만, 언제나 다시 일어설 힘을 주었던 내면의 힘같은 것이었다.'단점이자 장점이 아니라 그냥 대놓고 난 오늘도 영도다리에서 눈물을 흘리지 따위의 싸이감성을 뿜뿜하는 오글이토글이 글이 아닙니까. 물론 이러한 감성은 2000년대 싸이질의 추억을 깨워주지만 계속 읽어내려가긴 몹시 힘듭니다.7. 접속사 폭발, 끝나지 않는 스토리투머치토커라는 말이 있습니다. 글에도 투머치가 있지요. 도무지 끝나지 않는 문장입니다. 접속사와 쉼표로 끊임없이 연결된 시베리아 횡단열차같은 문장. 도대체 그 끝은 어디일까요. 이런 문장은 읽다가 삼천포로 빠지는 경우가 많습니다. 작성자나 읽는 이나 둘 다 말이죠. 나중에 삼천포에서 만나면 그나마 다행이겠지만 대부분은 각자 제 갈 길을 떠나는 경우가 많습니다.8. 시종일관 날카롭고 저속한 글정부비판에 극단적인 표현들, 가상화폐 비난 등등 의문형 문장이 넘쳐나는 날카롭고 강렬한 글들은 처음엔 임팩트가 있긴하지만 계속 질문만 던지고 따지는데 스크롤을 내리기가 좀 무섭습니다. 굉장히 피로한 글입니다. 마지막에 기똥차게 결론을 내려주면 또 나름의 카타르시스가 있지만 대부분은 마이클 베이영화처럼 처음부터 끝까지 터지고 부서지고 폭발하다가 결국 메간 폭스 엉덩이같은걸 클로즈업하며 끝납니다. 9. 노잼유행어를 쓴다고 재미있진 않습니다.10. 같은 말 반복"가치를 되살리는 일은 결국 그 본질적인 부분을 깨워 세상에 달리는 것과 같다. 이러한 가치의 재생은 사업의 참모습을 깨닫게 하고 고객에게 스토리텔링할 수 있는 기반을 만들어 준다. 때문에 가치에 대해 고민하는 것은 사업자에게 아주 중요한 과정이라고 할 수 있다."똑같은 말을 몇 번 반복하고 있는거야...이렇게 같은 말이 반복되는 이유는 사실 네이버에 "아아아아아...뭐더라" 라고 치는 심리와 비슷합니다. 뭔가 정리가 안되서 계속 그 자리에서 맴돌고 있는거죠. 쓰면서 생각 정리중입니다. 글은 정리를 끝내고 쓰는 겁니다.#모두 즐글 :)

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