스토리 홈

인터뷰

피드

뉴스

조회수 1604

하던 걸 계속 하라고 하는데...

서론브랜딩이 뭔가 거창한 걸 시작해보쟛!!! 하는 것이 아니라, '그냥 하던 걸 꾸준히 하는 것' 이라고 정의내려보았습니다. 사실 사람도 그렇고 비지니스도 그렇죠. 뭔가 자꾸 매달리고 좋다고 생색낼수록 좀 정떨어지는 감이 있습니다. 물론 부정적인 각인을 통해서 잊혀지지 않거나, 그런 진상이미지가 캐릭터가 되는 경우도 종종 있긴 하지만, 이미지따윈 모르겠고 우린 매출이나 내쟈!! 라는 사람들이 딱히 브랜딩을 생각할 것 같진 않으니 그런 경우는 잠시 넣어두도록 하겠습니다.오늘은 '하던 걸 꾸준히' 에 대해서 얘기해보겠습니다.본론아무것도 하지 않는 걸 꾸준히 계속 하겠다.아니...이러란 얘기는 아니고..브랜딩에 있어서 하던걸 꾸준히 하란 얘기는 '일관성'을 얘기하는 것입니다. 비지니스의 색깔, 컨셉, 방향성 등 추구하고자 하는 것들에 대한 생각과 행동의 방향을 일치시키란 얘기이지요. 하지만 문제가 있습니다. 다음의 대화를 한 번 보도록 하죠오전9시23분 회의실김팀장 : 에...이번에 우리 프로모션 이벤트를 해야하는지 각자 아이디어 있으면 공유바랄께요팀원들 : Chim mook.김팀장 : 그..이번 우리 신제품 관련한 이벤트를 좀 재미있게 알리고 싶은데..팀원들 : 아........음..김팀장 : 이번에 배민에서 치믈리에 이벤트했던 거 어때요? 재밌던데? 우리도 그런 경연대회 한번 해볼까?팀원1 : 근데 우리 상품의 컨셉상...오프라인이벤트는 비용이 많이 들 것 같은데요. 일단 SNS이벤트로 진행해보는건 어떨까요.김팀장 : 오, 좋아요. 요즘 좀 핫한 SNS이벤트 뭐있지? 우리도 그 사연공모같은거 해볼까?팀원2 : 어떤 사연으로..?김팀장 : 사용후기 공모 한 번 때려보죠. 아직 사진찍어서 뭐 태그올리고 상품주던가.본질적인 문제는.. 대부분의 회사에서 '지금껏 하던 것' 이 없다는 겁니다. 대부분은 어디 유명사례나 이슈가 되었던 이벤트를 따라하는 등의 "우리도 그거 한 번 해볼까?" 는 식의 의사결정이 대다수였습니다. 어디서 본 듯한 카드뉴스와, 다른 누군가가 해서 대박친 이벤트 등 따라하기가 급급하죠. 배달의 민족에서 치믈리에 이벤트를 했던건 그 이벤트자체가 재밌어서 성공을 한 게 아닙니다. 배달의 민족이었기에 가능한 것이죠. 그들이 지금까지 유지해온 키치한 코드와 CF와 대외홍보에서 꾸준히 진행해오던 일관적인 소셜이벤트와 맥을 함께하기에 '배민답다.' 라는 생각이 드는 겁니다. 배달의 민족에서 치믈리에 이벤트를 했던건 그 이벤트자체가 재밌어서 성공을 한 게 아닙니다. 배달의 민족이었기에 가능한 것이죠. 우리는 이 문제에 대해 좀 심각하게 생각해 볼 필요가 있습니다. 우리가 창업이래 일관적으로 유지해오고 있는 "CODE"는 무엇인가? 라는 질문. 물론 알고 있습니다. 대부분의 초기창업체는 수많은 프로토타입과 시행착오를 통해 격하게 변화를 거듭합니다. 타겟부터 서비스의 방향성까지 끊임없이 수정되고 바뀌어가죠. 그러나 소위 변화라는 것은 기준이 존재하고 그 기준에서의 변곡점을 얼만큼 만들어 낼 것인가의 이슈이지, 기준 자체를 이리저리 움직이자라는 얘기가 아닙니다. 이러한 문제가 발생하는 이유는 3가지가 있습니다.1. 결정에 근거가 없습니다.대부분 어떤 의사결정을 진행할 때 그 근거는 '그게 잘되었으니까' 라는 결과론적 명제인데, 논리적으로 이것은 근거가 될 수 없습니다. 왜냐하면 그게 잘된 이유가 이벤트의 퀄리티나 컨셉의 포지셔닝 따위가 아니기 때문이지요. 이것의 큰 함정은 사실 기존의 컨설팅이나 책에서 언급하는 여러가지 유명사례들의 오용 탓도 있다고 봅니다. 개인적으론 브랜딩시장에 어느정도 깊이에 대한 재고와 자성이 필요한 시점이라고도 생각되죠. 케이스스터디를 진행할 때는 그 맥락과 근거에 대해 명확히 규명해야 합니다. 단순히 아마존이 어째서, 애플이 어째서... 이런 식의 결론은 적절치 못하죠. 우린 식료품을 판매하는 업체인데 애플의 마케팅전략을 가져다쓰겠다?...그게 잘 되었으니까?...이것도 좀 이상하지 않습니까?  모든 결정의 근거는 "우리 회사는 OO을 추구하기 때문이야." 라는 명제에 기인해야 합니다. 그 OO이 뭔가 거창한 사회적가치나 지구평화일 필욘 없습니다. 다만 우린 '깔끔함을 추구해' 우린 '편리함을 추구해' 우린 '저렴함을 추구해' 등 뭔가 구체적인 Keyword로 정의될 수 있다면 그것으로 충분합니다. 대신 "우린 사회적가치를 추구해" "우린 고객만족을 추구해" 등 뭉게구름같은 소리만 하고있으면 머지않아 사업자등록증이 루비콘강을 건너게 되겠죠.2. 다양성과 난잡함은 다릅니다.배민 치믈리에 시험에 치믈리지 마.(라임지렸다)이것은 의사결정권자 또는 직원들의 성향과도 관련이 있습니다. '다양한 시도'를 해보는 것과 '덕지덕지 가져다 쓰는 것' 은 분명히 다릅니다. 앞서 설명했던 배달의 민족은 폰트를 개발해서 오픈소스로 공급하거나 치믈리에 행사를 진행하거나 키치한 CF를 만들거나 하는 등 굉장히 다양한 액션을 선보였음에도 한결같은 '배민다움'을 유지하고 있는 것은 이 모든 액션들이 하나의 색을 지니고 있기 때문입니다. 우리가 실수하는 건 흔히 '가치중심뽕'에 취하는 것입니다. 우리는 사회적약자를 도와야하니까, 사회적약자를 대상으로 행사를 하자! 이런식의 크나큰 아젠다에 흠뻑 취해서 그것만 바라보고 있는 것이죠. 브랜드는 뭔가 전략을 통해 억지로 만드는 것이 아닙니다. 대표와 구성원들이 만들어내는 그 고유의 '기질' ....그러니까 흔히 똘끼라던가, 병신미라던가, 진지함이라던가, 사랑꾼이라던가..뭔가 이런 성격들이 곧 회사의 이미지를 결정하고 그 방향성을 선명하게 만들어갈 뿐입니다. 이러한 기질에서 출발한 브랜드고유의 색깔은 이들이 어떤 행동을 해도 그 색깔에 물들게 만들죠. 다양성은 바로 이것에 기인해야 합니다. 그 색깔이 없이 이것저것 끌어다쓰면 그걸 진행하는 사람도 지치고, 뭘 왜 하는 지도 모른 채 돈만 불태우는 계획들만 나오는 겁니다.3. 변화는 혁신은 분명하게!에뛰드하우스는 최초에 고객들에게 프린세스 판타지 브랜드를 유지해왔습니다. 그러나 이어 찾아온 실적부진에 브랜드개혁에 필요성을 느끼고 2014년 권금주 대표의 취임과 동시에 대대적인 개편을 진행했습니다. 이 때 두 가지의 놀라운 전략은 이것입니다. "기존의 프린세스판타지 컨셉은 과감히 버린다.""이제부터 모든 정책은 20대의 라이프스타일에 포커싱한다." 버릴 때는 과감히 버려야 합니다. "헤헤헤, 우리 그래도 이것가지고 좀 먹고살았는데..그래도 이건 남겨두는게.... " 라는 생각따윈 저 멀리 던져버리란 얘기이죠. 그리고 바뀌는 정책을 추진할 때는 한번에! 일제히! 확! 강렬하게! 바꾸는 겁니다. 점진적인 변화 이런건...진짜 어디 말만 번지르르 좋은 거지 점진적이란 건 대부분 처음에 돈이 너무 많이 들 것 같으니 돈 생길때마다 그때그때 바꿔가자..라는 얘기인데 제가 지금까지 브랜딩했던 업체중 이렇게 해서 점진적 변화가 성공한 곳은 단 한곳도 없었습니다. 대부분은 몇 개월 뒤 그냥 흐지부지 되는 경우가 다반사였죠.에뛰드하우스  명동점(저는 들어가봤다가 기겁하긴 했습니다만..)에뛰드 하우스는 이후 20대여성만 타겟으로 맞춰갔습니다.  '청순거짓 브라우 젤 틴트, 플레이 101스틱, 빅 커버 컨실러 BB' 등을 주력으로 잡아가며 SNS나, 스토어이벤트 또한 20대의 라이프에 관련된 컨텐츠만 집중적으로 공략하기 시작한 것이죠. 또한 김숙을 신제품 ‘핑크 생기 워터 세럼’의 모델로 활용하며 파격적으로 공감대를 만들어내는 데에 주력하기도 했습니다.  이와 더불어 2way전략으로 아시아권(중국, 싱가폴 등)에서는 프린세스판타지 코드를 그대로 유지하여 그 포지션을 외부로 확장시켜 가는 정책을 폈습니다. 심지어 그대로 전파하는 수준이 아닌, 판타지를 비쥬얼적으로 풀어낸 내부 인테리어와 궁전식 스토어를 만드는 등 플래그쉽 마케팅을 활용하기도 했습니다. 두 가지의 브랜딩이 동시에 가능했던 이유는 에뛰드의 메인철학이 'Enjoy Makeup Play' 였기 때문입니다. 그들은 화장을 일상의 행위가 아닌 '놀이'로 규정했죠. 공주님의 놀이에서 20대의 놀이로 그 계층적 벽을 허물었다라는 느낌을 주면서도 기본철학에서 어긋나지 않는 변화를 꾀했습니다. 이것이 강력한 변화를 일제히 진행하면서도 전혀 위화감없이 시장에 녹아들 수 있는 비결이었죠. 물론 에뛰드가 완벽하게 최고의 사례는 아닐 것입니다. 사실 실무적인 입장을 보면 개판이었을 수도 있죠. 하라는 거 안하고, 막 컨셉 섞여있고..야 그냥 대충 해..란 소리도 비일비재 했을 겁니다.. 하지만 성공적으로 브랜딩을 궤도에 올려놓을 수 있었던 것은 거의 반강제적인 '거친 변화' 를 추구했기 때문입니다. 솔직히 이러한 변화를 진행하려고 하는데 한 명 한 명 설득시켜가며 "우리가 이번에 이렇게 바꿀건데..그 이유는 이렇고.그래서 우린 이렇게 해야하고..."를 해명하고 다독이며 진행할 시간이 있을까 싶습니다. 가끔은 공표하고 거칠게 추진하는 순간도 필요한 것이죠. 그 변화의 리스크를 감당할 각오는 해야겠지만 말입니다. :)읽다보면 한가지 모순을 느끼셨을 겁니다. 2번과 3번은 스타일이 완전 다른데? 라는 것이죠. 2번은 구성원들의 성향과 기질로 자연스럽게 브랜드를 만들어내는 것이고, 3번은 정책과 시스템으로 회사의 방향을 확 트는 경우니까요. 사실 이 둘은 모순의 관계가 아닙니다. 필연의 관계라고 하는 편이 맞겠네요. 한가지 컨셉으로 회사가 평생 운영되는 경우는 드뭅니다. 어느 순간에는 뭔가를 크게 변화시켜야 할 순간이 오겠죠. 또한 2번에서 언급한 것처럼 성향만으로 브랜드의 색깔을 선명하게 만들기는 힘듭니다. 그것은 내부적인 문화를 만들기는 적절할 지 모르나, '일'을 해야하는 상황에 적용하기엔 다소 응집력이 약하죠. 이러한 관점에서 시스템은 두 가지 역할을 합니다.하나는 내부의 자연스러운 고유색깔을 극대화시켜서 정돈하는 역할이죠. 비쥬얼적으로나, 정책적으로나, 기획적으로나.. 어떤 방식이든 우리의 성격과 방식을 드러내는 수단적인 부분이 존재해야 합니다. 우리가 성격과취향을 패션이나 말투, 행동으로 드러내듯 기업도 마찬가지이죠.티몬의 웰컴킷의 티몬의 DNA를 잘 드러냅니다. 일단 키치함이 넘치죠.또 하나는 변화의 코드와 기준을 잡고 강제성을 부여하는 것입니다. 시스템은 브랜드를 위해 존재합니다. 회사도 브랜드를 위해 존재하죠. 회사가 돈벌려고 브랜드를 만드는 게 아니라, 브랜드를 구현하는 방식이 곧 회사라도 김봉진대표님이 언급하셨더군요. 그리고 이러한 시스템은 개인을 위해 존재하는 것은 아닙니다. 좀 더 커다란 목적을 위해 존재하죠. 그러니까 브랜드가 급커브를 하거나 전혀 다른 국면으로 변화해야 할 때 시스템은 그 변화를 전담하고 통제하는 역할을 맡는 것입니다. 그러니 조금 냉정하게 말해서 개인의 성향이 그 변화와 맞냐, 그렇지 않냐 따윈 중요하지 않습니다. 이러한 일관성은 때론 나갈 사람은 나가고 남을 사람은 남는 소위 '물갈이'가 이루어지는 이유가 되기도 합니다.가라, 다음에 만날 땐 적이다.위와 같은 이유로 대부분 방향성이나 컨셉없이 흐지부지 사라진 브랜드의 추억을 안고있거나, 애시당초 만들지 못한 기업들도 허다합니다. 키워드나 컨셉도 없이 이것저것 가져다 쓰다가 내가 뭔지도 잃어버린 제이슨 본이 되거나, 우리도 변화를 해보쟈!! 싶어서 절벽에 올라간 매의 심정으로 깃털을 쪼다가 아 시발 이건 원래 뻥이었지..를 깨닫고 너덜너덜하게 처참해지거나. 여러모로 브랜딩은 어렵고 알쏭달쏭하기 때문에 이것저것 해보다가 돈만 날리는 경우가 많습니다.  그러니 시간이 지나서 창업1년이 넘고, 2년,3년차가 되어도 우리만의 컨텐츠가 뭔질 잘 모르겠고..우리만의 색깔에 대해서도 지구평화와 우주정복과 같은 뜬구름잡는 소리만 하고있다면 진지하게 STOP해보는 것이 좋을 것 같습니다. 명백하게 마케팅회의시간에 구석에 앉아서 직원들이 하는 얘기를 곰곰히 들어보세요."어디가 그거 했는데 잘되었다더라."라는 얘기가 나오고 있다면, 오늘 점심은 혼자 드시면서 앞으로 어떻게 해야 할 지 고민을 좀 해보셔야 할 것 같습니다. 다음엔 그 혼밥의 시간 이후에.. 여러분의 결심을 도와드릴 얘기들을 하겠습니다.#애프터모멘트크리에이티브랩 #마케터 #마케팅 #마케팅팀 #인사이트 #조언 #꿀팁
조회수 1869

Prototyping

안녕하세요. 스포카 디자인팀 인턴 박소연입니다. 이번 글에서는 사용자 경험User Experience 디자인 과정 중 프로토타이핑Prototyping에 대해 설명해보도록 하겠습니다.Prototyping이란,Prototype이란 “처음”을 뜻하는 그리스어 protos와 “느낌”을 뜻하는 typos가 합쳐져 “원본”, “초기”를 뜻하는 prototypos가 되었고, 이것에서 발전한 “초기 형태”인 prototypon에서 유래하였습니다. (출처: 위키피디아)프로토타이핑의 주목적은 UX 컨셉을 구체화하여 사용자에게 직접 실험을 하기 위한 것입니다. 먼저 조사한 결과를 토대로 아이디어와 컨셉을 도출합니다. 그 이후 실제 모델을 제작하고, 해당 모델에 해당하는 사용자와 전문가에게 사용하게 한 후 의견을 기록합니다. 프로토타입을 제작할 시에는 사용자가 구현될 시스템에 대하여 어느 정도 명확한 심상을 얻을 수 있을 정도의 디테일을 유지하여 제작합니다. 실험 시, 최대한 실제 환경이나 그와 비슷한 상황에서 실험하는 것이 중요합니다. 또한, 실험 중에 전체적인 서비스의 감성의 흐름과 피드백을 기록해야 합니다.프로토타이핑은 크게 두가지로 나누어질 수 있습니다.첫째는 아날로그 프로토타이핑으로, 종이에 연필로 쉽고 빠르게 스케치하는 것이 관건입니다. 두 번째는 디지털 프로토타이핑입니다. Low fidelity 혹은 high fidelity로 제작할 수 있는데, low fidelity는 최소한의 구성요소는 다 갖추고 있는 정도를 뜻합니다. 주로 보여주기용인 파워포인트, 키노트 등으로 구현할 수 있습니다. 발사믹과 같은 프로그램을 사용하여 간단한 인터랙션을 구현할 수도 있습니다. High fidelity는 완성에 거의 가까운 형태로, 장식적인 요소도 모두 포함하여 정확히 제작하게 됩니다. 실험에 적합한 형태를 선택하는 것이 중요한데, 장단점을 표로 정리해서 보여 드리겠습니다.다양한 프로토타이핑 유형:프로토타이핑특징장점단점아날로그프로토타이핑연필과 종이.빠르고 간단하다.수정이 쉽다.구체적이지 않다.구현할 항목이 많을 시오래 걸린다.디지털프로토타이핑-low fidelity보여주기 혹은인터랙션 가능.하나 혹은 다수의프로세스를 표시.수정이 비교적 간단.시스템의 특징을 살리기어려울 수 있다.디지털프로토타이핑-high fidelity인터랙션과 장식적요소까지 구현.가장 구체적이고이해가 빠르다.특징을 모두 구현할수 있다.제작에 오래 걸린다.수정이 힘들다.프로토타입을 제작하고 난 후에는 제작한 모델을 사용하여 실험을 진행 할 수 있습니다. 실험 종류 역시 여러 가지가 있지만, 이번에는 세 가지만 추려서 소개해 드리겠습니다.Desktop Walkthrough말 그대로 책상 위에서 구현할 수 있는 작은 모형을 말합니다. 레고와 같은 3D모형을 이용하여 실제상황의 특징들을 구현합니다. 이를 무대로 삼아, 사용자의 페르소나Persona를 구현한 모형을 직접 움직이며 사용자 경험을 재현합니다. 간단한 모형으로 다양한 사람들이 이해하기 쉽고, 전체적인 프로세스를 포괄적으로 검토할 수 있습니다. 또한, 모형을 여기저기 움직이면서 문제점을 수정하기에 쉽습니다.Service Prototype서비스 프로토타입은 소품과 물리적인 목업mock-up을 이용하여 상세한 서비스를 재현하게 됩니다. 주로 해당 제품을 사용하는 실제 환경과 최대한 비슷한 곳에서 사용자가 직접 사용하고 역할극 등을 진행하게 됩니다. 사용자가 직접 사용하고 만져볼 수 있는 모델이 있기 때문에 사용자가 서비스에 대해 좀더 깊은 이해를 할 수 있습니다.Service Staging서비스 스테이징은 좀 더 많은 인원이 필요합니다. 여러 이해관계자가 지켜보는 가운데 디자이너와 사용자가 함께 프로토타입을 사용한 시나리오scenario를 재현합니다. 역할을 바꾸어 여러 번 반복 재연하면서, 다양한 이해관계자의 피드백을 받을 수 있습니다.프로토타입 실험 요약:DesktopWalkthroughService PrototypeService Staging장소LEGO 모형실험실, 스튜디오, 실제상황실험실, 스튜디오, 실제 상황대상LEGO 모형사용자사용자, 디자이너 등목적시범, 설명이해 도모,사용성 파악사용성 파악, 이해관계 정립,시나리오 점검Conclusion이제까지 UX Design의 과정 중 한 가지인 프로토타이핑에 대해 간략히 설명해보았습니다. 프로토타이핑의 가장 중요한 목적은 사용자들이 직접 체험하고 이해할 수 있도록 최대한 실제와 가깝게 재현하는 것입니다. 하지만 프로토타이핑으로 다양한 실험을 했다고 디자인이 완료된 것은 아닙니다. 수집한 의견을 반영하여 수정과 보완을 거쳐 새로운 프로토타입으로 다시 실험하는 등 응용 범위는 다양합니다. 프로토타이핑은 UX Design에 필수적인 과정입니다. 보통, 디자이너와 개발자들은 사용자들이 자신이 생각한 대로 움직일 것이라고 일종의 “착각”을 하게 되는데, 이는 프로토타이핑을 통해 적절히 조정할 수 있을 것입니다.참고자료 및 이미지 출처:· 서비스 디자인 교과서, 안그라픽스, 2012· http://www.enginegroup.co.uk/site· http://www.loop-ux.com· http://www.davidarno.org/2009/09/17/napkee-converting-balsamiq-mockups-into-flex-views-just-became-a-complete-breeze/· http://inspirationfeed.com/inspiration/25-examples-of-wireframes-and-mockups-sketches/#스포카 #디자인 #디자이너 #디자인팀 #인턴 #인턴생활 #인사이트 #꿀팁 #경험공유
조회수 1599

우리, 단 한번만 볼 수 있어요

스티비의 ‘빈 페이지’ 이미지는 어떻게 만들어질까?11월 10일, 스티비(Stibee)는 베타 테스트를 종료하고 정식버전을 출시했습니다. 새로운 스티비 디자인은 기존 디자인과 어떻게 다를까요?기존에는 빈 페이지, 발송 완료 등 이미지가 필요한 부분에 이모지와 노란 꿀벌 로고를 활용했는데요, 스티비 정식버전에서는 기존의 노란색에서 벗어나 컬러와 이미지를 변경했습니다. 이를 가장 잘 볼 수 있는 페이지가 바로 empty-state, 즉 사용자가 가입한 이후 아직 서비스에서 요구하는 정보를 입력하지 않은 ‘빈 페이지’입니다. 이 페이지는 사용자가 가입한 후에 어떤 행동을 해야하는지를 안내하는 것이 주 목적입니다. 안내에 따라 사용자가 정보를 등록하면 더 이상 만날 수 없지만, 짧게 접하는 시간과 반대로 사용자의 이어지는 행동을 어떻게 유도할지 많이 고민해야 하는 페이지입니다.empty-state에 사용하는 일러스트는 정보가 없음을 나타내는 이미지로, 서로 비슷한 맥락으로 페이지를 설명합니다. 하지만 요구하는 정보가 각각 달라 가장 직관적으로 사용자 행동을 유도하기 위해 많은 것을 덜어냈습니다.그럼, 최종으로 선택된 시안과 탈락된 시안은 어떤 차이가 있을까요? (귀여움 주의)스티비에 가입하면 가장 먼저 할 일은 ‘주소록 등록하기’입니다. 최종 확정된 왼쪽 시안은 사람의 실루엣과 인덱스로 주소록의 형태를 좀 더 명확하게 보여줍니다.주소록을 업로드 했다면 그 다음은 ‘이메일 작성하기’입니다. 최종 선택된 시안은 이메일 콘텐츠 일러스트를 활용한 시안입니다. 오른쪽에 있는 시안은 ‘벌통이 비어있으니 이메일로 벌통을 채워주길 바라’는 뜻으로 만든 일러스트입니다. 벌통 시안은 이렇게 설명하지 않으면 어떤 뜻을 가진 이미지인지 알 수 없는 것이 가장 큰 단점이라, 최종 시안으로 선택될 수 없었습니다.다음은 주소록 세부 항목 중, 수신거부한 수신자 목록 페이지의 empty-state 일러스트입니다. 사람, 리스트 이미지를 활용해 봤지만 수신거부한 수신자 목록 페이지 외에도 다양한 목록이 비어있을 때 활용하기 좋아 왼쪽 일러스트를 최종 시안으로 선택했습니다.주소록에서 사용자를 검색할때 정보가 없는 경우에도 ‘정보 없음’을 일러스트로 보여줍니다. 최종 선택된 시안은 직관적인 이미지로 ‘폴더’와 ‘돋보기’를 사용했습니다. 반면 탈락된 오른쪽 시안은 아무것도 없는 벌집을 돌아다니는 벌 이미지로 이미지를 만들었습니다.#슬로워크 #스티비 #개발 #디자인 #퍼블리싱 #인사이트 #일지
조회수 915

IP/Design Seminar 참가

안녕하세요 동연 디자인입니다!! :D가족들과 유난히 추억이 많았던 5월이 지나가고 있습니다!어린이날어버이날석가탄신일..날씨까지 화창했던 징검다리 휴일로 나들이 다녀오신 분들이 많이 계시고,운동도 하면서 휴식도 충분히 가졌던 것 같아요^o^동연 디자인에서는 지난주, 여의도 마린 아일랜드에서 열린 디자인 세미나에 운 좋게 참가하여세계 시장의 트렌드를 파악할 수 있는 좋은 기회를 가지게 되었습니다!INTERPRINT-인터 프린트(Interprint)는 독일에 본사를 둔 글로벌 데코페이퍼 프린팅 기업으로, 전 세계 8개의 생산 플랜트를 거점으로 전 세계 모양지 시장의 트렌드를 선도하고2013년부터 전 세계 시장의 Trend를 선도할 만한 6가지의 디자인들을 선정하여 제안하고 있습니다.(SIXPACK)입장하자마자 보이는 표면재 Display입니다 :)안으로 들어가니 인테리어 및 가구 업계에 있는 분들이 많이 참석하셨던 것 같아요!세미나를 시작하기 30분 전에 도착했는데도, PT 준비와 많은 사람들이 이미 자리를 채우고 계셨어요^^ (기대기대)자유롭게 사진을 찍으면서 전시되어 있는 것을 몇 가지 찍어봤어요!트렌드와 조화를 보여주는 표면재 Display 및 LPM을 사용한 디자인 가구입니다.세미나가 시작되고,2018년 인터 프린트(삼보에 스티)에서 제안하는 여섯 가지 데코페이퍼 트렌드에 대한 디자인 SIXPACK을 소개해드리겠습니다.-LarchEicheCherry TreeApfelbaumStahlStein2018년 여섯 가지의 컬러와 디자인으로 간단하게 소개를 했습니다!*컬러 사용에는 화이트톤을 배제하면서 채도가 낮고 옅은 컬러와부드러운 소재의 조화를 강조하였는데요,다양한 컬러와 소재의 MIX & MATCH를 통한트렌드를 제안을 해주었습니다.세미나가 끝나고 홀 뒤에서는 식사를 할 수 있도록 뷔페가 차려졌는데요!음식도 맛있게 먹고 배가 부른 상태로 밖을 나서는데...뚜둔!...INTERPRINT 로고가 새겨진 부농부농 한 예쁜 무선 키보드와 마우스를뙇!!!2019년 트렌드도 너무 궁금합니다 ^3^♥내년을 기약하며...5월도 기분 좋게 마무리하면서아직 비가 오면 쌀쌀한 5월,밤 낮 일교차 유의해주시고얇은 재킷 하나 챙겨서우리 모두 다가오는 무더운 여름,반갑게 맞이해주자고요!!!#동연디자인 #동연몰 #인터프린트 #디자인 #세미나 #가구 #사무용가구 #트렌드 #컬러 #패턴
조회수 1117

디자이너와 클라이언트를 위한 알쏭달쏭 색깔정리(1)

컬러. 그 오묘한 세계. 디자인을 함에 있어서 클라이언트와 디자이너의 가장 큰 오해를 불러일으키는 묘한 미라클월드가 바로 컬러라고 할 수 있겠습니다. 사실 디자이너들은 답답할 겁니다. 여기에 이 색은 아닌데, 자꾸 그런 색을 써달라고 하니 답답스러울 수도 있습니다. 하지만 신묘한 사실을 알려드리죠.사실 사람마다 색의 강도와 색상을 구별하는 능력은 천차만별입니다. 색을 보는 것도 일정부분 훈련에 의해서 길러질 수 있는 부분이지만, 대부분 색상을 구별하는 원추세포의 발달정도에 따라 달라지는 것이 보통입니다.원추세포에 대해서 잠깐 알아보자면 이러합니다. 원추세포는 꼬깔콘 모양의 시세포로 망막에 위치하고 있습니다. 약 600만개 정도가 있다고 알려져 있으며 0.1룩스 이상의 빛을 감지합니다. 물론 이 감지범위도 사람에 따라 조금씩 다릅니다. 원추세포는 L,M,S원추세포로 나뉘어져 있으며 각각 노란~초록 / 녹색~파랑 / 파랑~보라를 감지합니다. 또한 파장에 따라서도 680mm 이상이 넘어가는 적외선, 380mm 미만의 자외선은 감지할 수 없습니다. 그러나 이 또한 개인차가 굉장히 커서 특이한 경우 자외선을 감지하는 경우도 있습니다.일전에 한 번 논란이 있었던 드레스색깔도 75:25%비율로 서로 다른 색이라고 난리가 났었죠. 이건 너가 병신이고 내가 정상이야..라기보단 서로 민감하게 받아들이는 색상의 차이가 있기 때문입니다. 이 때문에 같은 색이라고 해도 일반인과 디자이너가 보는 색은 매우 다를 수 있습니다. 모니터와 미디어기기의 차이도 물론 엄청나죠.하지만, 이러한 생물학적인 차이가 아닌 전혀 엉뚱한 문제로 고전하는 경우가 더 많아요. 그건 바로........'뭔 말인지 모르겠는 색깔표현' 때문이죠. 너무 찐하지 않은 검정색이랄지...강렬하지 않은 빨간색이랄지... 이런 우스개소리처럼 돌아다니는 난제들을 봉착할 때면 도대체 무슨 색을 어떻게 쓰라는 건지 답답할 때가 있을 겁니다. 클라이언트도 답답합니다. 난, 최대한 알아듣기 쉽게 설명했다고 생각했는데 자꾸 말도 안되다고 하니 가슴을 치고 인절미가 명치에 메이겠죠.그러니 오늘 이 시간엔 이상한 표현말고, 더 신개념의 표현을 활용해서 서로의 컬러에 대한 오해를 풀어보고자 합니다.물론, 반은 웃자고 하는 겁니다. 너무 진지하게 받아들이진 마세요. 다만, 실제로 이게 그 말인 경우가 꽤 있었습니다.ㅋㅋ....1. 장범준분홍 = 파스텔분홍좋아요, 희끄무레한 분홍색입니다. 흔히 파스텔...이라고 하면 희끄무레를 얘기합니다. 흐리흐리하고 허여멀건 것이 특징이죠. 화이트톤이 많이 섞여들어가 있습니다.2. 소세지분홍발그레한 색..이라고 하면 이런겁니다. 볼터치 느낌이죠. 저기, 디자이너님 볼터치할 때 분홍색있잖아요. 라는 표현이 더 어울릴 것 같습니다. 분홍소세지의 분홍이기도 합니다. 옛날도시락 소세지 분홍색으로 해주세요. 라고 하면 거의 정확합니다.3. 진한분홍색보통 여기까지도 분홍색이라고 합니다. 분홍분홍인데 조금 진하죠. 이걸 빨간색이라고 하지 않습니다. 크리미한 분홍색입니다. 플랫컬러에도 자주 쓰이지만 플랫컬러로 쓰기엔 좀 색이 약한 감이 있어서 그냥 진한 분홍이라고 하겠습니다.4. 예쁜빨간색 / 너무 강하지 않은 빨간색그 왜 예쁜 빨간색있잖아요. 하면 이 색입니다. 강하지 않은 빨간색의 정체가 바로 이것이죠. 코드까지 적으려고 했으나 너무 귀찮은 관계로 그냥 스포이드를 찍으시길 바랍니다. 예쁜 빨강은 그러니까..클라이언트님이 어디서 많이 봤는데 '플랫컬러' 라는 말을 잘 모르니 하는 말입니다. 하지만 그 분들이 그 용어까지 알 필욘없죠. 그냥 예쁜 빨강하면 이 색이다..하고 찰떡같이 알아먹으면 됩니다.5. 빨간색빨간색입니다. 거의 원색에 가깝습니다. 실제 RGB코드상에선 아직 조금 다른 색이 섞이긴 했지만, 어차피 다 그냥 빨강일뿐입니다. 너무 강해요...란 소리가 나올 수도 있지만 연령대가 올라갈수록 이 색을 좋아합니다. 나이가 점점 들어갈수록 붉은색계열을 더 선호하는 경향이 있다는 연구가 있었습니다. 원추세포의 노화와도 관계가 있죠. 누굴 탓할 일이 아닙니다.6. 새빨간이제부터 세종대왕님의 놀라우신 역사와 반만년 한민족의 얼과 정신이 살아숨쉬는 찰진 표현들이 등장하기 시작합니다. 샛빨강입니다. 원색 레드를 넘어섰습니다. 원색코드를 넘는 순간부터 '새...' 라는 표현을 씁니다. '새빨강, 새파란, 샛노란...'7. 찐한 빨강찐한빨강, 막 장미색 이런거 써달라고 하면 바로 이 색입니다. 블랙이 조금씩 섞여들어가는 겁니다.8. 불그죽죽 / 피색 / 빠아아알간! 색다양한 표현으로 쓰이지만 어휘력이 풍부하신 분은 불그죽죽이란 말을 쓰고, 잔혹한 분은 피색, 경쾌한 분은 억양을 담아서 "빠아아알간!!! 색" 이라고 하는 것이 바로 이 색입니다.9. 상아색 / 살색살색은 인종차별적인 단어이니 상아색을 쓰잔 얘기가 많았습니다. 사실 상아색은 좀 더 밝긴하지만, 주황색계열에서 화이트가 많이 섞인 파스텔톤의 주황색이 이것입니다. 주로 배경이나 스퀘어로 많이 깔리죠.10. 파스텔톤 주황색흔히 파스텔파스텔하는 것들은 주로 이런 크리미한 색들입니다. 그러니 파스텔이라고 해서 진짜 파스텔속 색상을 찾으면 안됩니다. 흔히 일반인들이 파스텔..이라고 하는 것들은 '크리미'와 비슷한 의미입니다.11. 연한주황색'연하다.....' 표현과 파스텔은 좀 다릅니다. 연한 것은 플랫과 파스텔의 사이라고 보시면 됩니다. 딱 이정도가 연하다..라는 느낌과 흡사합니다. 화이트가 섞이긴 했지만 아직 플랫컬러스럽진 않은...12. 이쁜주황색흔히 '이쁜....' 이라는 표현이 붙으면 거의 다 플랫컬러입니다. 그 중 위 색상은 약간 채도가 높네요. 11번의 연함과 이 색의 중간사이에서 쓰면 주로 '이쁘다'라고 얘기하는 그 색일 가능성이 높습니다.13. 귤네 귤입니다. 복잡하게 얘기하지말고 그냥 귤이라고 합시다. 탱글하고 맛있는 귤.14. 연한 갈색여기서부턴 갈색이 됩니다. 기억해두세요. 귤 다음은 갈색입니다. ㅎㅎ..갈색인데 연한 갈색이면 이런 색을 말합니다. 조금씩 블랙컬러가 섞여들어갑니다.15. 똥/브라운/카스테라 맛있는 부분설마 클라이언트가 똥색이라고 하겠어? 라고 하지만..실제로 하시는 분들도 계셨습니다. 우리는 달팽이가 아니니 담즙색깔대로 일정하고 빛깔고운 황금이들을 낳지만...똥의 색은 사람마다 다를 수 있으니 그냥 브라운이라고 합니다. 또는 카스테라 맛있는 부분 색이라고 해줘도 무관합니다.16. 진정한 브라운애매하다 싶으면 클라이언트에게 물어보세요. '진정한 브라운을 원하세요?' 라고. 끄덕이면 이 색입니다. 브라운은 애시당초가 섞인 색이라서 원색이라고 할 게 없습니다. 그냥 봐도 뭔가 밀가루음식이 좀 탄 느낌이나..크레파스로 나무칠할 때 쓰던 색을 생각하면 진정한 브라운입니다.17. 찐한 갈색진한 아닙니다. '찐한'18. 파스텔노랑유독 노랑에 대한 파스텔톤은 좀 더 연한 편입니다. 그건 위에서도 설명했듯 인간이 노랑색을 받아들이는 원추세포가 잘 발달되어있기도 하고, 채도에 밝기가 높아서 조금만 색이 들어가도 튀어보이는 탓도 있는 것 같습니다.19. 연한노랑/이쁜노랑/병아리연한 노랑은 흔히 이 정도의 색을 얘기합니다. 레몬색이라고도 하는데, 레몬보단 좀 진합니다. 병아리가 적당하겠네요. 제가 엉덩이로 깔아죽인 잔혹하고 끔찍했던 어릴적 그 기억이 자꾸 생각나는 힘겨운 색입니다.20. 이쁜노랑플랫한 컬러 노랑입니다. 앱이나 웹에서 겁내 자주 쓰는 컬러입니다. 그러니 화면으로 보여지는 미디어 제작물을 만드실 때는 왠만하면 이 노랑을 써주면 좋습니다. 크리미하고 이쁜노랑21. 그냥 노랑그냥 노랑.22. 샛노랑샛. 이 들어갔습니다. 샛은 뭐라고 했죠? 그렇습니다 원색 이상의 채도입니다.23. 누리끼리 / 금색또 한 번 한글의 위대함에 오줌을 지렸습니다. 흔히 전날 술먹고 다음 날 아침 소변보면 나오는 색인데..누리끼리. 라는 이름이 있습니다. 조금 고급스럽게 하면 금색입니다.24. 똥2 / 안이쁜노랑제가 뭐 딱히 그런 문제가 있다거나 그런 걸 좋아하는 사람은 아닙니다. 사람들이 유독 이 표현을 은근 쓰니까...;;;;(변명).... 아까 위에도 똥이었는데 이것도 ...그겁니다. 대부분 이런 색을 딱히 사람들이 좋아하지 않으니 그렇게 이름붙이는 게 아닐까합니다. 그래서 좀 헷갈리면 건강한 거요? 아님 묽은거요? 이렇게 물어보시던가..아니면 안이쁜노랑이요? 라고 하면 물어보도록 합시다.25. 누르스름한데 이상한 색그 약간 이상한 색..있잖아요. 누르스름한데..면 이 색입니다. 잘 쓸일은 없을거예요.26. 누르스름하고 이상한 색을 좀만 찐하게..(진한카키)노랑에 검정이 섞여들어가는 색들을 지칭하는 말들이 그닥 많지 않습니다. 사실 많기는 하지만, 일상에서 자주 쓰진 않죠. 왜냐면 그닥 예쁘지 않으니까요. 카키색 정도가 되겠네요. 그 왜...주머니가 옆에 달리고 체인주렁주렁 달고 다니는..예전 그런 카키바지같은...건데 좀 더 진하달까요.27. 아..좀 진한데 브라운보단 연한.. 보통 이것을 지칭할 땐 '아..좀 진한데 브라운보단 연한..;;;;' 이라고 말씀하시면서 머리를 긁적이십니다. 이해합니다. 저도 긁적이게 되네요.27. 파스텔톤 초록색초록도 마찬가지로 색구별이 굉장히 민감한 색중에 하나입니다. 그래서 보통의 파스텔보다 훨씬 연한 색으로 '파스텔'이란 표현을 많이들 씁니다.28. 이쁜연두연두색이란 건 이런걸 말합니다. 파스텔보단 좀 진합니다. 항상 뭔가 일반적인 이름이 있는 색들 사이의 색에 '이상한' 수식어가 붙기 마련입니다. 연두 / 초록 사이에 있는 색들에 먼가 이상한 수식어들이 붙는 것이죠.29. 진한연두진한 연두입니다. 콩색이죠. 하지만 아직까진 초록이 아니니, 진한연두..라는 것은 약간의 형광느낌이 더 있는 편입니다.30. 밝은/복고스러운(이라고 쓰고 그냥 형광,촌스런 초록색)이제부터 초록색입니다. 근데 좀 촌시럽다..라는 표현을 씁니다. 물론 시안에 들어갈 것이니 대놓고 촌스럽다고 하기보단 그냥 형광느낌이 좀 있는. 밝은 초록!...31. 그냥초록네 이것이 초록색입니다. 하도..계속 색을 보다보니 뭐가 진하고 연한지 점점 헷갈립니다...ㅋ 약간 톤이 안정된 느낌입니다. 원색을 써주세요!!!! 라고 해도 형광으로 해달란 얘긴 아니므로, 조금 블랙톤으로 채도를 안정시키도록 합시다.32. 진한초록 / 풀색놀라운 걸 알려드릴까요. 풀은 초록색이 아닙니다. 31번은 잔디색이고 32번은 풀색입니다. 뭐가 다르냐구요? 다릅니다. 골프장에 보면 그린이 있고, 러프가 있잖습니까? 32번색은 좀 더 풀이 길어서 음영이 진 느낌이랄까요....(겁나 섬세함)33. 어두운 초록재밌는 사실. 노랗다. 파랗다. 빨갛다. 까맣다. 하얗다.. 다 말이 되는데 초랗다..???... 초르스름?...샛초록?.. 뭔가 초록에 수식어를 붙이기는 힘듭니다. 왜 이럴까요? 저도 모릅니다.(개쿨) 저건 어두운 초록입니다.34. 국방색여성분들도 어렵지 않게 이해하실 겁니다. 하도 여기저기 많이 거리에 보일테니까요. 이건 국방색이라고 합니다. 나라를 지키는 색이라니 얼마나 대단합니까. 물론 진정한 국방색은 좀 더 어둡긴합니다만, 스마트폰으로 많이들 보시니까 아마 한 톤 더 어둡게 나올 것을 생각해서 조금 밝게 맞췄습니다. 디자이너가 '아 국방색으로 해드려요?' 라고 하면 클라이언트님께서 흠칫 놀라시며 과거의 군생활을 떠올립니다. 그리곤 한 떨기 눈물을 떨굽니다. 이내 조용히 왼쪽 윗주머니의 손수건을 꺼내 눈가를 훔치며 말없이 고개를 끄덕이실 겁니다.스크롤압박이 너무 심해서..나머 30가지 색은 2부에서 계속 다루도록 하겠습니다!!2부에 계속. 빠잉
조회수 4060

페이스북 프로덕트 디자인 인턴 체험기 #1

드디어 시작.꿈에 그리던 페이스북에 2016년 11월에 지원을 하였고 (이 당시 나는 조지아텍 HCI석사 1학년 1학기), 12월까지 세 번에 걸친 면접들을 보고 1월 초에 합격 연락을 받았다 (자세한 페이스북 인터뷰 프로세스는 페이스북 커뮤니케이션팀이 동의해 주어 나의 Medium에 퍼블리쉬할 수 있었다). 사실 합격 전화를 받았을 당시, 복도를 뛰어다니면서 함성을 질렀다. 아는 사람들에게 자랑도 하고, 축하도 받고 무엇보다 인턴쉽을 가서 뒤처지지 않으려고 더 열심히 공부를 하리라 마음을 먹었다. 여름이 되기까지 시간은 정말 느리게 갔지만 시작날인 5월 30일까지는 정말 그 누구보다도 행복하게 하루하루를 보냈던 것 같다.인턴 시작 날은 5월 30일... 시간은 정말 느리게 흘러갔다.살짝 내 얘기를 해보자면... 이렇다.페이스북 프로덕트 디자인 인턴쉽(Product Design Internship) 얘기를 하기 전에, 나에 대해 살짝 얘기하자면... 사실 나는 학부 때 디자인 전공을 하지 않았다. 캐나다에서 초등학교를 다니고 고등학교를 졸업한 후 나는 미시간 대학교에 (University of Michigan-Ann Arbor) 기계공학 전공으로 입학했다. 그 당시에는 대학교에서 들어가서 내가 무엇을 해야 할지, 내가 전공하는 것이 무엇인지에 대한 지식도 많이 없었을뿐더러, 제일 중요한 건, 배우고자 하는 열정이 없었다. 고등학교 때 미친 듯이 공부했을 때와는 다르게 대학교 때는 뭔가 흥미가 없었던 것 같다. 시간이 그렇게 무의미하게 지나간 적도 없었던 것 같다. 지금 생각해보면 너무나도 허무하게 첫 대학생활 2년을 보내지 않았나 싶다.나는 3학년에 올라가기 전에 한국에 돌아와 군에 입대를 했고 그 절제의 테두리 안에서 시간이 흐를 때면 하나둘씩 도전해 보고 싶고 알고 싶은 것들이 생겨났다. 전역 때쯤에는 "그래! 나는 기계공학보다는 문과 체질이야"라고 자신에게 최면을 걸고 복학을 해서 대학교 3학년 2학기 때 많은 반대와 걱정에도 불구하고 나는 심리학으로 전과를 했다. 솔직히 부모님을 포함에 많은 사람들이 걱정의 목소리를 높였지만 나는 뭔가 사람에 대해 더 알고 싶었다 (라기보다는 그냥 너무나도 흥미로웠다). 운이 좋게도 심리학 수업을 듣는 동안만큼은 항상 재미있었고 솔직히 기계공학 때 배웠던 수학, 물리 등 보다는 훨씬 쉬웠다. 열심히 하다 보니 성적도 쭉쭉 올라가고 운이 좋게 교수님들과 재미있는 연구도 하고... 첫 대학 2년과는 다르게 나머지 2년의 나라는 사람은 자신감이 최고조로 올랐던 것 같다.하지만 중요한 문제는 졸업 후의 진로였다 (a.k.a 현실). 많은 문과 유학생들이 하는 고민일 수도 있겠지만 STEM (Science, Technology, Engineering, Mathematics) 관련 전공이 아니면 미국 취업이 불리한 면이 없지 않기 때문에 당연히 한국행이겠구나 생각했다. STEM 전공을 하면 3년이라는 OPT (취업) 기간이 주어지는 반면에 STEM이 아닌 전공들은 1년 안에 H1-B라는 비자를 받지 못하면 다시 한국이나 다른 나라로 돌아가야 한다.졸업 후, 역시 반전은 없었다. 나는 어느새 한국 가는 비행기에 몸을 실었고 정신을 차려보니 한국 강남역 메가로스쿨에서 한국 로스쿨을 진학 희망하는 학생으로 변신해 있었다.  진짜로 진짜로 로스쿨 준비는 정말 힘들었다. 한국에서 내로라는 사람들도 재수하고 삼수하는 마당에 초등학교 때부터 캐나다에서 유학해온 나는 한국말로 공부하는 것이 편하지는 않았을뿐더러 한자들 또한 이해하기 힘들었다. 모의고사를 볼 때마다 하위권이었고 스터리를 할 때면 다른 사람들 발목을 붙잡진 않을까 노심초사했다. 뿐만 아니라 나는 한국의 암기하고 문제를 푸는 공식(?) 같은 것들이 지긋지긋하다. 문제를 쓸데없이 꼬는 것, 어떤 특정 문장 속에 답이 숨어있기 마련이며 글짓기를 할 때면 꼭 무슨 수학 문제 푸는 마냥 뼈대는 이미 정해져 있으며 심지어 첫 문장과 마지막 문장도 모든 수험생들이 거의 동일하게 접근할 때도 있다. (나한테 글짓기는 창의력인데) 사실 애초에 이런 것들이 너무나도싫어서 어렸을 적부터 유학을 가고 싶었다. (중학교 때 잠시 한국으로 돌아왔을 때 족보닷컴이란 곳에서 과거 출제문제를 미친 듯이 뽑아서 기계처럼 풀었던걸 생각하면 정말... 나랑은 안 맞는다).여하튼, "난 꼭 변호사, 검사, 판사가 될 거야!!!"라는 미친듯한 열정이 있었던 것도 아니었다. 하지만 그땐 이게 아니면 난 과연 무엇을 해야 할지 몰라 밤낮으로 공부를 해야만 했다.그럼 도대체 나는 어떻게 UI/UX/Product Design에 입문해 여기까지 오게 된 것일까?정말 행운 이게도, 그때 미국에서 날 지도해주던 심리학 교수님께서 한국 대학교 몇몇 곳에 심리학 강의를 하러 방문하셨다. 페이스북 메신저로 한번 밥이나 먹자는 연락이 왔고, 만나서 반가운 얘기들을 하던 도중 나에게 Human Computer Interaction (HCI)와 User Experience (UX)에 관한 얘기들을 해주셨다. 로스쿨 진로를 매우 고민스럽게 여기던 나에게는 매우 알맞은 진로 일 것 같다고 한번 집에 돌아가면 컴퓨터를 켜서 찾아나 보라고 말씀을 해주셨다. 그리고 내가 알고 있던 미시간 대학교 선배가 나와 같이 심리학을 전공한 뒤, 석사를 카네기멜론 대학에 HCI로 가서 현재는 미국 아마존 (Amazon)에서 UX 디자이너 (UX Designer)로 일하고 있다는 것이었다. 물론 그 형님께도 연락해서 많은 정보들을 들을 수가 있었다.항상 테크 (Tech industry) 쪽에 관심이 있었던 나는 교수님과 헤어지고 나서, "이게 과연 내 인생의 전환점인가?"라는 뚱딴지같은 마음을 품고 집에 돌아왔다. 그리고는 컴퓨터를 켜고 시간이 가는 줄 모르고 새벽까지 나는 UI/UX에 관한 것들을 찾아본 것 같다. 직업군은 어떻고, 무엇을 잘해야 하며 어떤 대학원들이 있고 등등 무수히 많은 정보들을 노트에 적어가기 시작했다. 이 세상 그 누구도, 그 날이 내 인생을 180도 바꾼 순간이라는 것은 알지 못했을 것이다. 심지어 부모님도 그땐 얘는 도대체 뭘 하는 앤가 싶기도 하셨을 것 같다. (미시간에 기계공학으로 들어가 심리학으로 전과해서 갑자기 한국 돌아와서 로스쿨을 간다고 하고는 다시 공대 쪽으로 간다고 하니... 속이 터지셨을 것 같다)물론 로스쿨은 그다음 날로 바로 때려치웠다. 한번 꽂히는 것은 무조건 파고드는 성격 때문인지, 다른 것은 눈에 들어오지도 않았다. 당장 컴퓨터 학원을 끊고 아침에는 디자인과 코딩, 밤에는 대학원 준비 등으로 시간을 보내고 체력이 남으면 디자인 스터디도 알아보고 인터넷에서 블로그나 아티클들도 읽고, 네트워킹도 하려고 노력했다. 학원은 나에게 진도가 너무 느렸고 집에 오자마자 혼자 공부한 시간 동안에 훨씬 실력이 많이 는 것 같다. 항상 남들보다 훨씬 뒤처져있다고 생각한 것은 너무나도 당연했다. 나에게는 배워도 배워도 새로운 것들이 너무나도 많았지만 이 정도로 재밌었던 적은 없었던 것 같다. Dribbble이라는 곳에 가면 "저런 건 도대체 어떻게 만들지?" 하고 생각하는 것에서 끝나는 게 아니라 항상 스크랩해두고 똑같이 Sketch나 Photoshop을 켜고 따라 했다. 그리고 코딩에 관심이 있어서 그런지 홈페이지를 어떻게 만드는지 잘 몰랐지만 무작정 공부하고 비슷하게 만들어 보곤 했다. 그저 무엇이든 배우고 연습하고 읽고 쓰고 열심히 마우스 클릭을 했던 것 같다. 지금 생각해보면 나의 그 열정과 "절박함"이 지금의 나를 만든 것이 아닌가 생각한다.다시 시간의 흐름을 말하자면, 2015년 5월 대학교 졸업, 2015년 8월까지 로스쿨 준비, 2015년 12월까지 미친 듯이 코딩과 디자인 공부 및 대학원 지원 서류 준비, 2016년 3월 결과 발표, 2016년 8월 조지아텍 (Georgia Tech) HCI 석사 입학... 당연히 디자인에 대한 이해나 실력이 부족하다고 생각할 수밖에 없는 나의 배경이다. 추가로 말하자면 매일 이를 갈면서 공부를 했고 연습, 또 연습을 거듭했다. 모르는 게 있으면 포스팅도 해보고 피드백도 구하고 잘하는 분에게 페이스북이나 링크드인 메시지도 보내며 멘토 신청도 하고, 사람들이 많은 쓰는 유명한 앱들을 다운로드하여서 어떻게 작동하고 디자인돼 있는지도 미친 듯이 파고들었던 것 같다. 무엇보다 인터넷에 나와있는 수많은 튜토리얼, 블로그, 아티클 그리고 오프라인 스터디들 및 많은 정보들이 밑거름이 되었다. 그런 도중 운이 좋게 한국에 있는 스타트업에도 몇 개월 동안 일을 해볼 수도 있었고 Rightbrain이란 UX 컨설팅회사에서 주최하는 UX 수업도 3개월 동안 들을 수가 있었다.대학원 지원 당시에는 "나는 심리학 전공자이지만 디자인과 코딩에 대한 이해도와 실력이 있으며 나의 포트폴리오는 내가 혼자 코딩해서 만들었어요"라는 문구를 앞세워서 나를 패키징 했다. 그것이 좋은 selling point가 되었는지 많은 대학원에서 나에게 높은 점수를 주지 않았나 생각한다. 다시 말하지만 열정, 열정 그리고 열정... 게다가 나 자신이 어느 위치에 있는지 (self-awareness)에 대한 자각심이 나 자신을 계속 채찍질하지 않았나... 이렇게 생각이 든다. 앞으로도 갈길은 멀다.페이스북 디자인 인턴십에 대한 정보.페이스북 얘기를 들으려 왔는데 너무 나에 대해 얘기를 많이 한 게 아닌가 싶다...구글과는 다르게 페이스북은 디자인 직책이 하나다. 구글에는 Interaction Designer, Visual Designer, UX Designer, Product Designer, UX Engineer 등 UI/UX 관련 직책들이 되게 많은 반면에 페이스북에 디자이너는 프로덕트 디자이너 (Product Designer)라고 통합해서 불린다. 디자이너들은 미국에는 Menlo Park (CA), Seattle 그리고 New York 오피스에만 있고 유럽에는 런던 오피스에만 있는 것으로 알고 있다 (페이스북 오피스는 이외에도 훨씬 많은데 디자이너가 있는 오피스는 이렇게 4개인 것으로 알고 있다). 인턴 같은 경우에도 이렇게 4 지역에 분포해서 뽑는데 이번 연도에는 나를 포함해 총 17명이 선택되었다. 작년보다는 많다고 하는데 몇천 명의 엔지니어 인턴 숫자와는 너무나도 뻔하게 비교가 된다. 여하튼, 수만 개의 지원 서중에 달랑 17명이라니 로또 당첨이 아닐 수가 없다. 게다가 합격자들의 스펙을 보면 이미 각종 기업에서 인턴을 최소 한 개씩을 하고 많게는 세 번 까지도 한 친구들을 볼 수 있었다. 예를 들면 Palantir, Quora, Spotify, Google, Pinterest 등등... 그리고 작년에 페이스북에서 인턴하고 두 번째로 돌아오는 애들도 있었다. 그래서 그런지 합격이 되고 나서의 행복한 시간들 동안에도 나는 항상 이를 갈면서 열심히 공부했던 것 같다. 왜냐하면 결국은 모두 다 정직원 (Full-time) 오퍼를 받기 위해서 발버둥 칠 테니까...인터뷰 자체는 나의 Medium 아티클에서도 설명했듯이 모두 다 다 똑같은 인터뷰 프로세스를 거쳐서 뽑힌다. 인터뷰를 보는 동안에는 어떤 팀으로 갈지는 정확히 알지는 모르지만 오퍼를 받을 때에는 대충 어떤 쪽으로 갈지 알게 된다. 페이스북은 정직원으로 들어가기 많이 힘들다고 한다. 그 뜻은 인턴에서 최대한 전환 (conversion)을 시킨다고 들었다. 그래서 그런지 팀마다 인턴이 필요한 곳에서 신청을 하는데 프로젝트도 적절해야 하며 정직원을 뽑을 만한 자리가 나을 시에만 뽑는 것으로 알고 있다. 페이스북의 장점 중 하나는 인턴쉽을 잘하고 정직원이 되고 나면 원하는 팀으로 지원이 가능하며 일하는 와중에도 다른 팀에 지원 또는 한 달 동안 경험을 해볼 수도 있다. 회사에서도 여러 팀을 경험해 보는 것을 장려하며 많이들 왔다 갔다 하는 것 같다.잠시 오리엔테이션 때를 돌아보자면...처음에 인턴쉽을 시작하게 되면 전부다 Facebook HQ (Menlo Park, CA 에 있다)로 오리엔테이션을 하러 간다. 오리엔테이션은 디자인뿐만 아니라 엔지니어, 데이터 사이언티스트, 리서쳐, 마케팅 등 여러 다른 인턴들은 한데 모아 론칭한다. 장소는 Menlo Park, California라는 곳에 있는 어마어마한 크기의 본사인데 거기안에는 10가지가 넘는 식당뿐만 아니라 각종 샵들도 존재한다. 거기에서 페이스북 대부분의 제품 및 팀들에 대해 강의를 듣고 디자이너들은 따로 디자인 캠프라는 것을 듣는다. 디자인 캠프에서는 각종 소프트 웨어도 배우지만 페이스북의 디자이너로써의 자질과 능력 등 기본 지식들을 많이 쌓는다. 사람들도 많이 만나고 회사 밖에서는 절대로 상상도 할 수 없는 많은 신기한 디자인 및 인터널 (internal) 툴들도 경험하면서 몸이 들썩이고 손발에 땀이 나도록 긴장하기를 반복했다. 물론 기대감과 긴장감은 이루 말할 수 없었다.오리엔테이션 막바지쯤에는 나를 계속 평가하고 가이드해줄 인턴 매니저를 만나게 되며 사내 각종 이벤트에도 참여하면서 페이스북이라는 회사와 더 많이 친근해지고 디자인 인턴이라는 롤에 점차 익숙해졌다. 마크 저커버그나 셰릴 샌드버그 같은 유명한 사람들도 실제로 만나보고 사회에서 사람들이 아는 유명한 디자이너들도 가끔 이름이 보이기도 한다. 그 사람들이 우리를 가르쳐 주기도 한다. 마지막으로 오리엔테이션이 모두 끝나면 인턴마다 정해진 오피스가 다른데, 나는 시애틀로 배정을 받았다 (인턴쉽 오퍼가 나올 때 이미 장소는 정해진다).나의 팀은? 나의 역할은?페이스북 인턴 17명 중 나를 포함한 4명은 시애틀에 있다. 몇천 명이나 되는 시애틀 페이스북 직원 중 프로덕트 디자이너는 30명이 채 안된다. 어떤 사람들은 그 정도면 많다고 하는데 옆에 엔지니어들 뿐만 아니라 다른 직책들이 너무나도 많아서 그런지 살짝 외롭기도 하다. 하지만 그만큼 유니크한 거겠지... (정신승리!)나는 현재 Facebook Ads Measurement team에서 일을 하고 있는데 사실 시작하고 2주 동안은 많이 혼란스러웠다. 아무리 페이스북 유저가 된 지 10년 가까이 된다지만 페이스북의 광고 매니저 (Ads Manager)라는 제품은 한 번도 써보지 않은 데다가 유저가 나와 같은 보통사람이 아닌 광고나 마케팅에 종사하는 사람들이 대부분이니 말이다. 하지만 지금은 많은 정보들을 습득하고 적응해서 열심히 일하는 중이다. 많은 사람들과 만나서 똑같은 설명을 여러 번 듣고, 각 직책마다 한 사람씩 1:1 미팅을 잡아서 그 사람들이 무엇을 담당하는지 어떻게 일하는지 그리고 내가 그 사람들과의 관계에서 어떤 역할을 수행해야 하는지 등 많은 정보를 습득해야 했다.이제 2달이 지난 이 시점에 나의 경험을 되돌아보면 광고 (Ads)라는 쪽은 너무나도 매력 있고 전문성이 있는 것 같다. 처음에는 분명 다른 페이스북 프로덕트들과는 비교해서 이해하기 힘들었지만 지금까지 내가 차곡차곡 쌓은 지식이 조금은 자부심이 들긴 한다. 처음에는 다른 인턴들처럼 뉴스피드를 건들거나 메신저나 인스타그램, 또는 오리가미 (Origami)를 해보고 싶기도 했지만 광고라는 것이 되게 중요하고 많은 기업들에서도 큰 투자를 하는 분야이기도 한 것을 깨달으니 뭔가 기회가 많을 것 같기도 하다.내가 디자인하는 것은 차후 시리즈에 적을 생각이지만 쉽게 말하자면 대부분 Data Visualization과 Information Architecture이다 (그래프, 테이블, 유저 플로우 등등). Sketch로 디자인도 많이 하지만, 프로토타이핑도 많이 하고 발표도 거의 매주 하는 것 같다. 다른 디자이너들에게 크리틱도 받고 페이스북 그룹에도 올려서 피드백을 받는다. 여기서  중요한 건 절대로 혼자 디자인하지 않는다는 것이다. 항상 다른 사람들과 협업하고 (특히 Content Strategist와 UX Researcher) 가이드라인 내에서 많이 벗어나지 않지만 때때로는 창의력 있게 방법을 생각해내야 한다. 광고나 마케팅에 관련한 전문적인 내용들은 Product Manager나 PMM (Marketing Manager)와 상담하기도 한다. 나에게 주어진 프로젝트들은 각기 다르지만 전부다 Ads Manager 내에서 한다. (이 부분은 다음에 더 자세히 설명하고자 한다)"넌 인턴이지만 인턴이 아니야!"추가로 페이스북 디자인 인턴은 팀에서 인턴이 아닌 신입의 입장으로써 책임감을 가지고 일을 해야 한다. 나의 매니저가 말하길, "네가 인턴이라고 말하기 전에 네가 인턴인지 아무도 몰라"라고 하였다. 많은 사람들이 기본적인 가이던스나 정보들을 가르쳐주긴 하지만 모르는 것들이 있을 시에는 혼자 미팅들도 잡고 적극적으로 붙잡고 물어봐야 알려주기 때문에 알아서 자율적으로 탐방하고 필요한 정보들을 알맞게 얻어내야 한다. 손잡고 끌어주는 문화가 아닌 손을 놓고 어떻게 필요한 정보들을 얻어내는지 또 그것들을 어떻게 디자인 해내가는지를 보는 것 같다. 그래서 그런지 필요한 정보들을 알맞고 효율적으로 캐내는 것은 물론 중요하거니와 어떻게 다른 사람들과 소통하고 협업하는지도 중요하게 보는 것 같다.더 나아가 미팅이나 크리틱에 들어갈 때에는 항상 내 의견에 대한 이유들은 미리 숙지하고 이 미팅에 대한 agenda를 확실히 하고 들어가야 한다. 워낙 다들 바쁘고 시간 낭비하는 것을 매우 싫어하기 때문에 시간을 효율적으로 활용해야지 안 그러면 마이너스인 것 은 분명하다. 지금까지 느낀 건 확실히 디자이너는 발표도 많이 해야 하고 설명도 이해하기 쉽게 해야 하며 문서들도 많이 작성해야 한다. 커뮤니케이션이 디자이너의 정말 중요한 능력임은 몸으로 느끼게 된다.페이스북 시애틀 오피스는 다행히 캘리포니아에 있는 본사와는 다르게 10층짜리 큰 건물 하나에서 왔다 갔다 하기 때문에 시간은 그나마 절약할 수 있다. 미팅은 대부분 캘리포니아나 뉴욕이나 런던에 화상 챗으로 연결해서 같이 한다. 또, 또, 또 얘기하자면 모르는 것들은 과감하게 모른다고, 알려달라고 적극적으로 얘기해야 하며 내가 맡은 일, 그리고 내가 궁금한 점들이 있거나 알려줘야 할 경우에는 어떤 사람들에게 어떻게 알려주는 것이 편한지, 이런 것들을 센스 있게 잘 알아야 하는 것이 중요하다. 어떻게 보면 "그런 걸 어떻게 일일이 신경 써!"라고 생각할 수 있지만 30분이라는 짧은 시간 동안 미팅을 하다 보면 어쩔 수 없이 그래야 하는 걸 느낀다.자주 느끼는 거지만 디자이너는 그 어떤 직책보다 미팅의 숫자 또한 훨씬 많은 것 같다. 어떤 날에는 1시간도 내 자리에 앉아 집중해서 디자인을 못할 때도 있다. 수요일은 No meeting Wednesday라고 해서 미팅을 잡지 않는다. 그래서 나는 수요일에 정말로 최대한 집중해서 많이 끝내려고 노력한다. 하지만 그 수많은 다른 직책들과의 미팅들이 중요한 커뮤니케이션이며 "디자인 프로세스"이다. 엔지니어, 데이터 사이언티스트, 컨탠트 스트래티지스트, 프로덕트 매니저 등 모두 한 배에 한 목표를 가지고 올라타야 비로소 프로덕트가 좋아지니까 말이다.시애틀 페이스북 오피스는 어떤가?페이스북 오피스는 사실 엄청 크고 위치도 매우 좋다 (South Lake Union이라는 곳 앞에 위치). 캘리포니아에 있는 본사 다음으로 제일 크다. 지금은 10층짜리 거대한 건물 하나지만 앞으로 건설 중인 건물들이 있다. 페이스북 시애틀이 커지는 이유는 현재 많은 테크 기업들이 시애틀에 자리 잡아있는 이유도 있을 테고 본사가 뉴욕보다는 훨씬 가까운 것 때문인 것 같기도 하다. 뿐만 아니라 페이스북뿐만 아니라 구글, 아마존, 마이크로소프트 등 많은 기업들이 시애틀에 있다. 미국 진출을 고민하시는 분들은 시애틀도 정말 좋은 선택일 거라고 생각한다. 무엇보다 state income tax가 없어서 돈도 많이 아낄 수 있다.인턴쉽에 대한 보상에 대해서 많이 궁금해할 것 같은데, 정확한 월급 액수를 적는 것은 사실 무의미한 것 같다. 하지만 하나 확실한 건 미국 어느 테크 기업 중에서도 탑 중에 탑이다. 정말 이 정도의 돈을 받아도 되나 할 정도로 많이 주지만 마음속 안에 스며드는 메시지는 간결하다 "그 정도의 일을 3개월 동안 뽑아내길 바란다..." 사실 하루 3끼를 전부 회사에서 챙겨주며 집 도주고 그 외에도 모든 것을 제공해주니 그냥 열심히 일하고 즐길 때는 즐기고 그 외에 것들은 걱정하지 말라는 배려인 것 같다. 나는 매일 회사에서 주는 저녁을 먹고 집까지 걸어간다. 가끔 한국 테크 기업들에서 야근을 많이 한다는 기사가 나오는데 확실한 건 여기에서는 야근하는 사람은 정말 많이 없다. 출퇴근도 자유라서 미팅만 없으면 집에 가서 일을 하거나 집에서 일한다고 하고 화상으로 미팅을 들어오는 경우도 다반사다. 매우 유연한 회사이지만 자신이 맡은 역할은 훌륭하게, 남에게 피해 안 끼치게 잘 해결하는 걸 보면 정말 똑똑한 사람들은 많은 것은 분명하다.매일매일 시애틀 오피스에는 주황색 뱃지를 단 관광객들이 온다. 금요일이 되면 놀이동산인 것 마냥 방문객들이 정말 많아서 깜짝 놀랐는데 몇 주 지나고 나니 익숙해졌다. 직원들의 온 가족들도 오고 기업들에서도 탐방 오고 온사이트 인터뷰하는 사람들도 되게 자주 그리고 많이 보인다. 그럴 때면 항상 투어 하는 곳들이 있는데 그중 하나는 9층이다. 9층 야외 테라스에서는 전망이 죽여주는데 거기서는 여름 매일 내내 바베큐를 한다. 회사 내에 최고급 재료로 맛있는 음식을 제공하는 식당도 있지만 햇볕 아래 (시애틀은 그나마 여름에 날씨가 좋다는..)에서 먹는 바베큐는 힘든 오전을 잊게 해준다. 6층에는 메인 식당이 있는데 거기서도 하루 3끼 맛있는 음식을 제공한다. 항상 화덕피자와 요구르트 아이스크림 및 각종 음료수와 샌드위치, 과일, 채소는 무제한으로 제공된다. 이게 다 공짜라니! 음료수 종류만 해도 최소 50가지는 되는 것 같다.나는 7층에서 일을 하는데 7층의 장점은 다른 층과는 다르게 커피 내려먹는 곳이 엄청 크고 콜드 브루까지 항상 있어서 나처럼 커피를 너무 사랑하는 사람은 아침에 항상 들리게 되기 마련이다. 처음에는 혼자 커피 내려먹는 것을 할 줄 몰랐는데 회사 내에서 바리스타 수업도 있어서 금방 스타벅스 앱을 지우게 되는 자신을 발견할 수 있다. 이런 하나하나가 피로를 잊게 해주는 것은 분명하다.회사 내에 한국사람은 그렇게 많지 않은 것 같다. 시애틀 오피스에서 내가 본건 한 3명(?) 이 전부인 것 같다. 오히려 백인, 중국인, 인도인이 대부분 인 것 같고 확실한 건 지금 인턴쉽 기간 동안 한국말은 거의 쓰지도 않은 것 같다. 혹시 시애틀 근처에 사시는 분이 있으면 회사로 놀러 오시면 구경도 시켜드리고 얘기도 하는 것도 나쁘진 않을 것 같다.이만 줄이며...지금까지 두 달 동안 내가 보고 듣고 느낀 점 들 그리고 배운 점들은 너무나도 많지만 이 글 하나에 다 때려 넣기에는 너무 힘들지 않을까 생각된다. (지금도 너무 긴데...) 쓰면 쓸수록 더 자세히 쓰고 싶고 더 많이 다른 많은 것들을 포함시키고 싶지만 욕심이 과다하면 내용이 산으로 갈 수 있기에 여러 가지로 분할해서 쓸 계획이다. 만약에 자세한 것들에 관심이 있는 분들이 계시면 그것들을 주제로 써보고 싶기도 하다. 다음 시리즈에는 내가 어떻게 일하는지에 대해 더 자세히 적어볼 계획이긴 하다.밑에는 처음 방문자로 페이스북에 방문했을 적 사진이다.저땐 직원이 아니어서 오렌지색의 증을 들고 다녔지만 이제는 당당히 사원증을 들고 다닌다...너무나도 행복한 지금 나는 열심히 주어진 일에 최선을 다하고 있다.facebook wall#페이스북 #Facebook #인턴 #인턴후기 #인턴생활 #기업문화
조회수 1369

“디자인과 기술을 이어주는 존재, 마크업 개발자를 함께 알아볼까요?” - 유저플로우셀 오혜진

'마크업 개발자', 아직은 우리들에게 다소 생소한 직군이죠. '마크업 개발자'는 디자이너와 개발자 사이에서 '오작교' 같은 역할을 하는 아주 중요한 포지션이에요. 오늘은 코인원의 마크업 개발자로 활약 중인 혜진님과 이야기를 나눠보려 해요. 자신의 위치에서 묵묵히 유저 친화적인 웹 환경을 만들어나가고 있는 혜진님을 만나러 가보시죠!사실 이미 혜진님은 지난 4월 13일(토), 테크 업계 여성들의 목소리에 집중하는 소중한 행사 ‘Women Techmakers Seoul 2019’에서 ‘스타트업에서 마크업 개발자로 살아남기’를 주제로 자신의 이야기를 널리 알리고 왔답니다. 스타트업 그리고 코인원에서 마크업 개발자로 살아남는 혜진님만의 방법은 무엇일까요? :-)Q. 혜진님 안녕하세요, 자기소개 부탁드립니다.안녕하세요, 코인원 유저플로우셀에서 마크업 개발자로 일하고 있는 오혜진입니다. 유저플로우셀은 암호화폐 거래와 프로차트와 같은 트레이딩 영역을 제외한 전반적인 서비스 영역을 담당하고 있어요. 특히 ‘셀'이라는 목적조직으로 개편된 이후 PM, 디자이너, 개발자가 한곳에 모여 누구나 코인원에서 거래를 하고 싶은 마음이 들도록 매력적인 곳으로 탄생시키고 있답니다. 저는 셀안에서 마크업 개발자로 일하며 디자이너와 프론트엔드 개발자를 이어주는 다리 역할을 하고 있습니다.Q. 지난 ‘Women Techmakers Seoul 2019’에서 마크업 개발자를 널리 알리는 발표를 했다고 들었어요. 어떤 내용인지 소개해주세요!감사하게도 ‘스타트업에서 마크업 개발자로 살아남기' 라는 주제로 300명이 넘는 관중들 앞에서 발표를 하고 왔습니다. (사실, 많은 분들이 와주셔서 땀이 좀 나기도 했고요;) 마크업 개발자는 스타트업에서 발견하기 힘든 직군이기도 해요. 보통은 웹 에이전시에 많이 속해 있거든요. 제가 마크업 개발자로 일한지 6년이라는 시간 동안 스타트업에서 어떤 방식으로 일해왔는지 알리고 싶었어요. 그래서 지금까지 이런 일들을 해왔고, 앞으로도 더 활발하게 할 것이라고 속시원하게 말하고 왔습니다.Q. 마크업 개발자는 구체적으로 어떤일들을 하나요?마크업 개발자는 한마디로 디자인(Design)과 기술(Tech)의 오작교 같은 존재입니다. 디자인의 의도가 개발과 충돌하는 부분은 없는지 파악하고, 개발에 잘 녹아들 수 있도록 프론트엔드의 앞단을 맡고 있어요. 코인원 웹 서비스에서 제공하는 신규 기능의 마크업 개발을 담당하고, 운영하면서 생긴 이슈들을 처리합니다. 또한 마크업 레거시에 대한 유지보수 작업도 병행하죠.예를 들어, 코인원의 회원가입 페이지를 제작할 때 디자인 작업을 먼저 들어갑니다. 그럼 디자인 작업을 바탕으로 개발자들이 기능을 만들어 넣게 돼요. 이 때, 기능적인 개발을 제외하고 UI(User Interface)적인 부분을 제가 담당합니다. 회원가입 페이지에는 이메일 인증, 휴대폰 인증 등 여러가지 개발요소들이 많아요. 그래서 개발하기 전에 기능이 들어가는 기본적인 레이아웃을 만들어 개발자에게 전달합니다. 마크업 작업이 바탕이 되어 그 위에 기능 개발이 이뤄진다고 보시면 돼요.디자이너가 레시피를 만드는 사람이라면, 마크업 개발자는 레시피 재료를 세팅해 주는 사람이에요. 개발자들은 세팅된 레시피를 끓이고 버무려 요리를 완성시키고요. 저는 좋은 요리가 탄생할 수 있도록 중간과정을 도와주는 역할인거죠. ▲ 'Women Tachmakers 2019'에서 발표에 열중한 혜진님!Q. 디자인과 기술의 중간 역할을 담당하고 계시군요, 사실 중간자의 역할이라고 하면 이어주는 과정에서 고충(?)이 생길 것 같아요.아무래도 디자이너와 개발자, 양쪽과 다 소통해야하는 부분입니다. 디자이너 입장에서는 ‘왜 프론트엔드에서 이 디자인이 안되는걸까?’ 라는 불만이 생길때도 있고, 프론트엔드에서는 ‘왜 디자인이 이렇게 들어가야 하는걸까?’ 라고 이해를 못할 때도 있어요. 서로의 이해관계를 잘 전달해야 한다는 점이 나름의 고충이죠. 코인원에서는 ‘디자이너 - 마크업 개발자 - 프론트 개발자’의 협업 프로세스를 정립해서 각자가 맡은 분야에 집중 할 수 있는 초석을 다졌어요. 무엇보다도 배경이 다른 세 개의 직군이 원활하게 소통할 수 있는 체계가 잡혀 고충이 해결되고 있습니다 :) Q. 그렇다면 마크업 개발자는 어떤 부분을 기여한다고 볼 수 있나요?코인원 메인 화면에 기능 개발을 추가하지 않고도 마크업단에서의 처리만으로도 쉽게 변화를 줄 수 있습니다. 메인화면의 배너 이미지는 유저들이 코인원에 접속해 제일 먼저 마주하는 부분이죠. 그래서 유저들이 코인원의 시각화된 정보를 빠르게 접할 수 있도록 이미지를 교체합니다. 웹 페이지의 운영 측면에서 비주얼 개편을 빠르게 할 수 있는 환경을 만들어 놓고 대응하는거에요.곧 코인원 마이페이지 화면이 개편될겁니다. 웹 페이지를 새로 만든다는 것은 무에서 유를 창조하는 과정과 같아요. 제가 마크업 개발을 잘 해놓으면 다른 직군에게도 도움이 됩니다. 개발 속도도 더 잘 붙고, 디자인에서도 빈공간이 없는 페이지가 탄생하는거죠. 최대한 밑바탕을 꼼꼼하게 만들어 모두가 일에 더 집중할 수 있는 환경을 만든다고 보시면 돼요.Q. 코인원 마이페이지에서 새롭게 바뀌는 부분은?기존의 마이페이지는 유저들이 보기에 정리가 잘 안되어있다는 느낌이 있었어요. 어떤 인증과정을 끝마쳐야 하는지 한눈에 들어오지 않는 부분이 있었거든요. 이번에 개편될 마이페이지는 좀 더 명확해졌습니다. 이전의 인증페이지가 도돌이표의 느낌이었다면, 이번에는 UX(User experience)를 생각해서 flow 개선도 많이 이뤄졌습니다. 편리한 암호화폐 거래 경험을 코인원에서 느낄 수 있어요. (새롭게 바뀔 마이페이지 많은 기대 부탁드립니다! 물론 편리한 암호화폐 거래도 언제나 코인원!)Q. 유저들에게 편리한 거래경험을 선사하기 위해 어떤 가치를 가장 중요시 여기나요? 저는 중간자이므로 유저들 뿐만 아니라 개발까지 두 가지 측면을 모두 고려합니다. 유저의 입장에서 사용성과 접근성이 용이한 마크업을 짜려고 하고, 개발측면에서는 유지보수가 편리한 마크업을 최대한 짜려고 해요. 개발하기 편한것과 사용하기 편한 것은 다른 맥락이거든요. 요새는 코인원 디자인시스템을 적용하고 있어요. 디자이너 분들이 정리해주신 디자인 시스템을 잘 적용시켜서 코드적으로도 재사용성이 용이하게 관리가 되도록 하고, UI도 정돈이 되어가는 과정을 진행 중입니다. 이런 과정을 계속 거치면 유저들에게 편리한 거래 경험을 선사하는 부분은 놓치지 않을 것 같아요.▲ 마크업에 열중하고 있는 혜진님 (약간의 설정샷 +_+)Q. 코인원 크루로 일하면서 장점을 뽑자면?유저플로우셀은 코인원이 셀이라는 목적조직으로 개편되고나서 만족도가 높은 셀이라고 알고 있어요. 업무도 많은 편인데, 톱니바퀴처럼 잘 맞물린다는 느낌이거든요. 특히 일에 대해서 선긋지 않고, 이슈가 발생했을 때 해결할 수 있는 부분들을 빠르게 파악해주는 부분들이 정말 좋아요. 속도랑 효율성 측면에서 이만큼 해낼 수 있는 팀은 앞으로 만나지 못할 것 같아요. 항상 원활한 업무 소통을 위해 힘써주시는 셀원들에게 감사 드립니다!Q. 앞으로 이루고 싶은 목표가 무엇인가요?회사 안 뿐만 아니라, 바깥에서의 활동도 꿈꾸고 있어요. 마크업 개발자들이 모두 모여 이야기할 수 있는 CSS 컨퍼런스를 열어 좀 더 커뮤니티를 활성화 시키고 영향력을 높이고 싶습니다. 아직 마크업 개발자들만이 모여서 이야기 할 수 있는 곳이 부족하거든요. 저의 이야기도 차곡차곡 쌓아서 여러 창구를 통해 들려드리고 싶고요.코인원에서는 지금 하는 것 이상으로 마크업 개발도 열심히 할거에요. 우선 단기적인 목표로, 프론트엔드에서 사용하고 있는 angular에 대한 이해력을 높일 겁니다. 마크업 컴포넌트 단위에 최적화 된 CSS로 개편해서 사용하지 않는 스타일 리소스가 최소화가 되도록 만들거에요.▲ 마크업 개발자에 많은 관심 부탁드려요 :)디자이너가 디자인에 집중할 수 있게, 개발자가 개발에 집중할 수 있게 ‘일잘러’로 통한다는 혜진님. 혜진님의 인터뷰를 통해 ‘마크업 개발자’에 좀 더 친해지는 시간이길 바라봅니다. 그리고 이렇게 멋진 코인원 크루와 함께 성장하고 싶지 않으세요?  현재 코인원은 멋진 크루들과 함께 크립토갤럭시를 헤쳐나갈 분들을 기다리고 있습니다 :-)
조회수 927

브랜딩의 역사를 파보았다.

여기저기서 자료찾고 허덕이느라 글이 늦긴 했지만, 아주 보람찬 시간이었습니다. 사실 브랜딩 나부랭이를 다루다가 보니 이런것이 궁금해졌죠. 그럼 이건 어디서부터 시작된걸까? 도대체 어떤 자식이 '브랜딩'이라는 단어를 만든것일까! 라는 것이었죠. 그래서 찾아보다보니...어떤 사람이 만들긴 했더군요. 근데 그 사람이 이 행위를 만든건 아니잖아요. 애시당초 우리가 쭈욱...하고 있던 행위에 이름을 붙인 것이지. 그래서 그 행위는 어떻게 변했는지가 또 궁금했습니다. 전 분석충이기 때문에, 내면의 차크라를 끌어올려 주제를 파헤치는 것을 좋아하죠.그래서 역사를 거슬러 예수님을 영접하고 그 이전의 단순시대까지 거슬러가서 갈릭향기를 느끼다가 어느 덧 이집트고대문명까지 흘러가게 되더군요. 지금부턴 그 시간을 다시 되돌려 현재로 돌아와보도록 하겠습니다. 사실 브랜딩이란 것은 코딱지를 파는 것만큼 자연스럽고 만연해있는 행위를 통칭하는 말이기에, 인간은 코를 언제부터 파기 시작했나? 라는 질문의 기원을 찾는 것과 비슷합니다. 그러니 가설과 추측이 가득하죠. 이 점을 감안하신다면 크큭크큭용으로 충분한 가치가 있을 것 같습니다.전 브랜드나 브랜딩 같은 단어에 점점 큰 의미가 실리는 것을 딱히 좋아하지 않습니다. 브랜딩을 하는거나 자기 책상치우는거나 쓰레기통을 비우는 것이나 무엇이 중하다 아니다의 경중을 따지거나 마케팅이 짱이다 브랜딩이 짱이다, 우리가 본질이다 넌 사짜다 허접이다 꺼져라 뭐덜퍼커 이디엇츠 라고 논쟁하는 것도 좀 웃깁니다. 그러니 쉽게쉽게 풀어보자면 이러합니다.고대이집트룩소르 신전의 벽돌엔 수많은 상형문자가 새겨져있즹물론 저 상형문자는 신에 대한 찬양 또는 연대기가 적혀있는 메모장같은 느낌이지만, 고대 이집트에서는 돌나르는 것이 일상이었습니다. 아침먹고 돌, 점심먹고 돌, 저녁먹고 돌, 몸 푸는 돌, 빡센 돌, 둥근 돌.. 게다가 고운 모래로 만들어진 사암이었기 때문에 뭔갈 새기고 표시하기에 나쁘지 않은 질감을 지니고 있었죠. 그러니 누웠다가 일어나서 그녀가 보고싶으면 돌에다가 그녀의 이름도 적고, 내일 점심메뉴도 적고, 금요일날 미팅약속도 적어놓고... 파피루스가 발명되기 전까진 이들은 돌과 함께 살았습니다.그러다보니 이 벽돌을 만드는 전문가들이 생기기 시작했겠죠.  홍해건너 윗동네엔 신비한 레시피로 벽돌을 만드는 놀라운 달인이 있다는데!!(생활의달인 ver.)"저..저기요!! 혹시 여기 놀라운 벽돌을 만드는 분 아시나요?!""어어~ 쩌기 쩌그 언덕너머 야자수옆에 3번째 집에가면(졸라 상세히 알고있음) 맨날 벽돌만 만드는 사람이 있어요."해서 찾아가봤더니 손끝으로 느껴지는 그 놀라운 태초의 모래와 지구역사의 신비를 간직한 45억년의 대자연의 음성이 들리는 듯한 신비한 벽돌이 있는거예요. 이런 사람을 카만히 둘리 없겠죠. 누가요? 왕이요. 그래서 왕이 불렀어요.- 니가 벽돌을 잘 만든대매?- 뉍- 그럼 내 무덤 니가 만들어- 잇힝. 견적드릴깝쇼- 40,000개, 단가 은한톨씩 줄께(당시는 귀금속이 화폐의 단위였다)- 40,000개는 혼자 다 못만드는뒈에?- 그럼 니가 10,000개 만들고 나머진 다른 업체쓰지 뭐.이렇게 해서 4개업체가 피라미드나 성벽이나, 건축물이나 신전을 만드는데 달라붙게 되는데 그 중에 반드시 불량이 있었을거 아니예요. 근데 석조건물의 특징 상 하나가 문제가 생기면 전체 하중에 큰 영향을 주는 터라 불량에 대한 심사는 매우 중요한 요소였단 말이죠. 왕은 이렇게 말했어요.- 나중에 문제생기면 그놈을 혼낼 거니까, 돌에다가 표시해놔이 때부터 표식이 시작되었습니다. 당초는 왕이 제품개발한 사람들을 구분하고 책임소재를 분명하게 하기 위해 각자의 표식을 심으라고 했던 목적이 주였어요. 나중에 토기와 도기에 이르러서도 마찬가지였죠. 이것들은 내수시장에 판매하는 용도보단 주로 무역과 조공품에 쓰였습니다. 무역의 문제는 곧 외교의 문제와도 같았죠. 그러니 책임소재를 명확하게 하려고 도기 바닥에 별이나 손바닥, 원, 특이한 형상들을 새기게 하였답니다.상업적 측면에서는 브랜드가 처음으로 활용된 시기를 BC7세기경, 그리스의 상인들이 항아리에 자신의 브랜드를 부착시켜 사용한 것이 최초로 기록되고 있으며, 그 이후 중세의 상인들이 저급한 모방제품과 구별하기 위해 제품에 브랜드를 부착하여 자신과 고객들을 보호하였다고 전해지고 있답니다.이처럼 초기의 브랜딩은 감시와 책임을 위한 식별의 수단으로써 작용하였어요.고대유럽이 후에 유럽으로 넘어가봅시다. 때는 4세기~6세기경이었습니다. 이 때의 유럽은 로마가 통치하고 있었고 여러각지에 동,서,북게르만 족들이 흩어져 평화롭고 판타지소설스럽게 살아가고 있었습니다. 근데 모든 때가 그러하듯 인구는 늘어나고 경작할 곳은 부족해지니(특히 스칸디나비아 쪽이나 북유럽쪽은 여행하긴 좋지만 경작해먹긴 좋지 않았죠) 대이동을 시작합니다. 북쪽에 있던 게르만족이 남하하면서 로마로 대거 침입하기에 이르렀는데 이 때 로마의 방어선인 라인강유역은 허술하기가 내 방문과 다름이 없었어요. 게르만족은 엄마가 벌컥벌컥 내 방문을 열면서 이노무새끼 이노무새끼...쯧쯧쯧 하면서 맘스터치를 선사하는 느낌으로 자주 로마의 문을 열어제꼈죠. 로마와 게르만의 전쟁은 이전에도 있었지만, 본격 대이동이 시작되면서 길고 지루한 전쟁의 서막이 열리게 됩니다. 이 때 수많은 전쟁포로와 고아와 창녀와 타민족에 대한 차별이 발생하기 시작했는데, 특히 노예로 전락한 전쟁포로들에겐 인두로 노예의 표식을 몸에 남기곤 했어요. 고대 노르웨이어로 brand는 현재 영여의 Burn(불타다)의 뜻이죠.시벌놈아 팔에다가 새기라고!!중세시대또한 표식의 의미 이외에 당시 로마교에서부터 활용하고 있던 십자가나, 추후 중세시대에 이르러 다양화된 수많은 기호/표식들은 그 신성성과 신비함을 유지하기 위한 수단이 되었습니다. 사람들은 심볼을 신봉하고 기호/상징에 의미를 담기 시작한 것이죠. 각 교회와 정파들을 구분하기 위한 수단으로 다양한 십자가를 활용하기도 했고, 성경이나 정파별 사제복을 다르게 했던 것도 이러한 맥락에서 진행됩니다.더불어, 기사단이나 가문의 문향도 독특한 스타일로 변화되기 시작하는데 원래는 본인의 가문만이 소유할 수 있는 고유한 것들이었어요. 이후 11~12세기 유럽에 대학들이 생겨나면서 각 대학의 문장으로 발전되기 시작하는데 가문의 규모와 유명세, 공적들에 따라 가문의 문장의 가치도 달라졌었죠. 이것이 대학사업이나 가문의 사업에 매출에 큰 영향을 미치기도 했구요.그래서 고대부터 중세까지의 브랜드는 폐쇄적이고 감추어야하는 것, 또는 신성한 것, 우리만의 것, 아무나 건드릴 수 없는 것의 의미를 지니고 있었어요.르네상스시대중세유럽은 십자군전쟁의 패배와 더불어 흑사병이 터지면서 인구의 1/3이 사라져버리는 대격변을 맞게 됩니다. 이때 생존한 노동자, 농민들은 노동인구수의 감소로 흑사병 이후 임금이 두 배로 상승되었죠. 이러한 노동력 감소는 지배계층의 경제적 부담을 증가시켰습니다. 그런데 인구수의 급격한 감소는 곡물의 수요 감소로 이어지고, 토지수입에 의존하던 지주들은 높은 임금, 수입하락의 이중고를 겪게되었죠. 상업과 교역이 마비되었으며, 숙련공의 격감은 생필품 생산량 감소를 불러왔고, 생필품 공급부족으로 가격이 급등하기 시작했습니다. 결국 갑이나 을이나 둘 다 살기 팍팍해지는 사태가 발생하는데 예나 지금이나 갑의 횡포는 상식과 적당선이란 걸 모르죠. 이 시국에도 갑은 농민들을 갈궈대기 시작했고, 안그래도 팍팍해서 살기 힘든 농민들은 결국 폭풍반란을 시전합니다. 이는 추후에 계급제도의 몰락에 큰 영향을 주죠. 우리나라의 임진왜란 이후의 상황과 비슷하겠네요.한편, 흑사병은 교육과 학문에도 많은 영향을 끼쳤습니다. 특히 대학의 피해가 컸으며 교수와 학생 수가 감소하여 많은 대학이 폐교했답니다. 이때 시에나대학은 수년간 휴교했고, 옥스퍼드대학과 아비뇽대학은 전면 마비되었습니다. 이러한 현상은 당시 국제어와 교회의 언어로 사용되던 라틴어 사용자들의 수도 감소시켜, 각국은 새롭게 자국의 언어로 성경과 문학작품들을 출간하기에 이르는데. 이러한 자국 언어의 발달은 국민문학과 국민국가 형성과 발전의 계기가 되었습니다. 대충 상황이 얼마나 혼돈의 카오스인지 짐작이 되시죠? 상황을 보니 나라에 물건은 없고 사람들은 아우성이고, 뭔가 큰 것들이 잘게 쪼개지는 상황이 펼쳐지고 있어요. 상황이 안정되고 나서 다시 인구가 폭발적으로 늘기 시작했습니다. 당연히 상업과 제조업이 활성화가 되기 시작했죠. 출판물의 가짓수나 언어의 종류도 명확해지기 시작하면서 내수시장이 확대되었고 교류와 무역에 체계가 생기기 시작했죠. 이러한 16세기 이후의 여러 사건들은 자본주의의 토대가 되는 제도들이 만들어지는 계기가 되었습니다.비쥬얼적으론 이 때 당시에 거래를 하던 각종 상선이나 무역선들이 서로를 식별하기위해(특히 해적으로부터) 깃발이나 배의 문양을 새기는 형식이 주를 이루었고, 무역회사나 제조회사들이 동종업계의 제품이나 서비스로부터 본인을 드러내기 위한...음 어찌보면 현대의 브랜드와 비슷한 개념의 브랜드가 자리잡기 시작했어요.하지만 아직까진 나를 알리기 위한 홍보수단 내지는 상징적인 의미가 더욱 강했달까요.동인도회사의 로고또한 통합로고를 사용했던 것은 동인도회사같이 14개의 크고작은 회사들의 연합이 형성되는 그룹형태의 대기업들이 생겨나기 시작하면서 이들을 하나로 결속시킬 수단이 필요한 탓도 있었답니다. 사람을 하나로 묶는데 있어서 '문장'와 '제복'와 '경례' 는 아주 효율적인 수단이었으니까요.르네상스 이후 근대의 브랜딩은 나를 알리고 소속감을 주고, 식별과 개성이 시작되는 태동기였어요.현대의 브랜딩현대시대의 브랜딩에서 빼놓을 수 없는 것은 역시 전쟁입니다. 1차와 2차세계대전을 거치며 세계는 피폐와 발전이라는 모순된 길을 함께 걷게 되요. 패전한 국가는 끊임없이 전락하지만, 승전한 국가는 막대한 무기판매수익을 내기도 하고, 또한 냉전 이 후 결국 자본주의시장이 세계경제논리로 채택되면서 시장은 본격 경쟁트랙에 올라타게 되었죠.놀라운 건 현재의 '브랜드' 이라는 단어를 규정한 것은 고작 27년밖에 되지 않았다는 것이예요. 현대의 브랜드개념을 도입했던 것은 최초 1990년 Murphy에 의해 "이름(name)이나 표시(presentation)에 의해 구별되는 특정 공급자의 제품이나 서비스" 라는 정의를 통해셔였죠.1991년 Asker는 “판매자 혹은 일단의 판매자들의 상품이나 서비스를 식별시키고, 경쟁자들의 것과 차별화하기 위하여 사용하는 독특한 이름이나 상징물(로고, 등록 상표, 포장 디자인 등)” 라고 규정했습니다.그리고 1992년에 이르러 ean-Noel Kapferer씨가 "공급적인 측면에서 볼 때 제품을 차별화 시키는 것을 목표로 하는 전략의 한 부분"으로 규정함으로써 드디어 브랜드에 '전략'이라는 단어가 추가되게 되죠.이 후 브랜드와 전략이 합쳐지면서 "브랜딩" 이라는 명사의 동사화를 통한 신조어가 탄생하게 되고, 그것이 지금 우리가 페북에서 매일 보고 있는 바로 그것의 시작입니다. 그러니까 이것은 제 나이보다도 역사가 안된 영역이긴 합니다. 더불어 브랜드에 전략이 합쳐지게 되면서 이 전략이란 것은 소위 경제학적 관점에서의 심리학적 접근이 주된 것이었어요. 행동,인지심리와 같은 소위 소비자심리학을 기반으로 하고있죠. 이것은 융세대에 들어서 분석심리학을 통해 분화된 심리학의 갈래로 사실 아직까지도 수많은 분파와 논쟁이 많은 영역입니다. 브랜딩이 기초하고 있는 기저학문자체가 아직 뜨겁게 움직이고 있는 신생지구의 맨틀같은 느낌이란 것이죠. 그러니 그 위에 둥실둥실 떠다니는 브랜딩은 얼마나 정신이 없겠어요.사실 모아놓은 자료를 보아하니 이 이외에도 엄청나게 많은 사례와 특이케이스들이 존재했습니다. 위에서 설명했던 고대이집트의 사례는 하나의 일례일 뿐이고, 문명이 발생하고 무역이 성행했던 모든 곳에서 위와 비슷한 표식절차가 있었다고 해요. 브랜딩의 시작은 어찌보면 굉장히 폐쇄적이고 생산자의 통제를 위한 수단으로 시작했다고 할 수 있겠습니다. 요즘엔 통치의 방식이 바뀌었고, 자유로운 경제활동이 가능해지니 그 권력이 소비자들에게 분산되게 된 것이죠. 판단의 주체가 개개인이 되면서 어쩌면 사업자입장에선 수백만, 수천만명의 왕을 모시고 매 순간 서로 다른 종류의 낙인에 찍히며 살아가는 것과 비슷한 느낌이었을 거예요.이러한 혼란과 불규칙성에 사회과학적 규칙성을 부여한 것이 심리학의 힘이었고, 또한 경제태동기와 호황기를 거쳐 소비지상주의가 만연하면서 제품과 서비스가 급속도로 사회깊숙히 퍼져나갔던 오일쇼크 이전의 시기가 있었습니다. 그냥 만들면 다 잘팔리는 시기였죠. 누구나 땅 파서 한 건 해보는 게 꿈이었고, 보물이나 찾아보자며 말타고 금캐러 떠나는 시기였달까요. 이 후 자본주의의 부작용이 드러나기 시작하면서 세계경제는 대침체기에 휩싸이게 되었고(사실은 지금도 그 연속선상에 존재하는 듯) 버블이 가득했던 소비문화가 꺼지고 공급자는 과잉이 된 상태에서 기업들은 뭔가 다른 활로를 찾아야 했을 겁니다. 이 때 기저학문과 데이터에 근거한 통제력 안에서 대중을 움직일 수 있다는 이론은 매우 매력적이었겠죠. 초기의 브랜딩은 제품의 차별화를 '알리는' 것이 주목적이었으니까요.그 데이터와 학문의 이론은 틀리지 않았습니다. 맞는 말이었죠. 하지만 문제는 너무 급속도로 세상이 바뀌어가고 있다는 것이었어요. 그 속도에 따라가야 했고 더이상 100년전의 심리학이론이 통하지 않는 예외의 경우들이 시장에 드러나기 시작했죠. 이에 발빠르게 대처한 몇몇 전략가들에 의해 브랜딩은 갈래갈래 찢어져서 다양한 방법론으로 부상하기 시작했답니다. 2000년대 이 후 전자기기 전쟁에서 이는 아주 뚜렷해졌죠. 시장을 지배하는 거대기업의 CEO가 자신의 방법론을 강연하기 시작하고 이것이 공유되면서 '이 사람이 사는법' 따위를 연구하거나 '이 회사의 문화'를 분석한 자료들이 속속들이 등장하며 소위 '레퍼런스'가 되기 시작합니다.거의 그 시발점에 가까웠던...어때요 흥미진진하죠? 네...저도 그렇습니다. 이것은 흥미진진한 얘기죠. 사실 브랜딩이란 것이 기업과 경제적인 측면에서 포커싱이 되어있다곤 하지만, 원래 브랜딩은 식별과 구별에 대한 이야기입니다. 내가 너와 어떻게 다른가... 말이예요. 내 모습을 스스로 만들고 어떤 모습을 드러낼 지를 결정하는 자아형성(융의 분석심리학 모델 中 ) 또한 칭하는 단어가 다를 뿐 개인적인 브랜딩의 자연스러운 과정이라고 할 수 있어요.어찌보면 태어나면서 죽을 때까지..기질이 만들어지고 역할을 지니고 삶을 영위하는 모든 과정에서 우린 일반적인 집단무의식과 개인경험의 의존한 개인무의식과의 화합과 갈등을 계속해나가요. 이것은 브랜딩일반론에서 외치는 '유사성과 차별성' 이론과 거의 같은 맥락이죠.브랜딩은 사실 인류역사와 함께해왔고 그 목적과 성격이 어떠하든 인간의 본성에 근접한 행동중에 하나입니다. 누구나 이미 숨쉬듯 하고 있는 것들이예요. 말 한마디나 행동 하나에도 나를 드러내기 위한 다양한 노력들이 숨어있죠. 너무 호들갑떨거나 신앙처럼 여길 워딩은 아니라는 얘깁니다.브랜드는 자연스럽게 드러나야하고, 당연하고 상식적인 선에서 이해가 되어야 정상입니다. 신박하고 창의적인 것은 2차적인 문제죠. 우리를 드러내는 것은 언제나 거대한 무의식속 가치관이 아닌, 고작 밖으로 드러나는 말투, 패션, 행동, 인사하는 법, 삐딱한 자세, 식성, 소품, 방안 꼬라지 같은 것들이예요. 주로 사람들은 나의 진실된 마음과 중심을 보기보단 드러난 와이셔츠를 먼저 보죠.앞으로의 브랜딩은 어떤 개념이 되어갈까요?... ㅎㅎㅎ 여러분들의 의견을 들어보는 것도 재미있을 것 같아요!저는 개인적으론..내부의 문화를 실체화하는 것이 브랜딩이라고 여기기 때문에 결국 브랜딩은 본질로부터 파생되는 '디테일'의 무게가 커져갈 것이라고 생각해요.내부의 문화를 실체화하는 것이 브랜딩이라고 여기기 때문에 결국 브랜딩은 본질로부터 파생되는 '디테일'의 무게가 커져갈 것이라고 생각해요.아주 사소한 것들에서 결정되는 이미지의 잔상들...읽느라수고하셨습니다.
조회수 1267

홍보영상 직접 제작해서 수백만원 절약해보자

** 본 글은 문돌이 PM의 마케터 따라하기 시리즈 입니다.** 1화 보기 - 초기에 할만한 ASO (앱스토어 최적화) 팁** 2화 보기 - 초보 PM이 알아야 하는 초기 모바일앱 분석 101** 3화 보기 - 스타트업 브랜딩: 내가 보는 나와 너가 보는 나의 일치자금이 쪼들리는 초기 스타트업이 지출하기 가장 부담스러운 비용이 무엇일까? 서버비? 광고비? 나는 개인적으로 '원샷페이먼트'라고 부르는 비용들이라고 생각한다. 원샷페이먼트는 말 그대로 한번에 제법 큰 돈을 내야하는 비용들로서 외주제작비, 장비구입비, 그리고 콘텐츠 제작비가 여기에 해당한다. 특히 페이스북이나 유투브에 뿌릴 광고에 태울 동영상들을 외주 맡길 경우 보통 제작비가 백만원은 훌쩍 뛰어넘는데 이 돈 내는거 여간 부담스러운게 아니다. 그렇다고 윈도우 무비메이커로 허접하게 해서 광고태우면 효율이 안나온다.그래서 오늘 글은 저 수백만원을 아낄수 있는 어느정도 퀄리티가 나오는 광고영상을 맥북 하나만 있으면 뚝딱 만들어내는 방법론에 대해 소개하고자 한다. (물론 이 방법론으로 전문가분들의 고퀄편집이 가능한건 절대로 아니다. 어디까지나 임시방편임을 다시한번 강조한다!!) 본 방법론은 맥북이 있는 사람들, 그리고 Garage Band와 iMovie를 가지고 있는 사람들만 가능하다는 것을 미리 밝혀둔다. 빠른 이해를 위해 필자가 운영하고 있는 바크 앱의 홍보영상 제작 과정을 기준으로 설명하도록 하겠다.본 방법론은 총 5단계로 이루어져 있다.1. 아이디에이션 및 컨셉잡기2. 스토리 짜기3. 아이폰으로 촬영하기4. Garage Band로 고퀄의 음원 제작하기5. iMovie로 영상 편집하기본 방법론으로 탄생한 홍보 영상은 다음과 같다. (전문가들이 보기에는 웃음나오는 수준이지만 일반인들이 보기에는 미적으로 큰 무리는 없는 영상이다)https://www.youtube.com/watch?v=o7g_0yRjDoA<iframe width="700.000000" height="394.000000" src="//www.youtube.com/embed/o7g_0yRjDoA" frameborder="0" allowfullscreen="">내 와이프의 노동력을 착취해서 직접 촬영/편집한 영상이다Step 1. 아이디에이션 및 컨셉 잡기우선 내가 어떤 홍보영상을 만들지에 대한 대략적인 아이디에이션 및 컨셉을 그려봐야 한다. 아이디에이션에 필요한 세부내용은 다음과 같다.본 영상의 목적은 무엇인가? 내 제품의 정보전달인가? 소비자의 관심 환기인가?영상의 주 타겟이 누구인가?주로 어떤 채널로 집행될 영상인가? 페이스북? 유투브? 인스타그램?내 제품의 정보전달이 목적이라면 어떤 핵심 포인트들을 전달할 것인가? (3-4개 정도)내 제품에 어떤 후킹포인트가 있어서 소비자의 관심을 낚아올 수 있을까?Tone & Manner는 어떻게 잡을것인가? 발랄하고 활기찬 분위기? 감성적인 분위기? 섹시한 분위기?위 아이디에이션에 대한 부연설명을 좀 더 해 보겠다. 우선, 영상의 목적이 제품의 정보전달일 경우 최대한 제품의 사용성을 직관적으로 보여주는 영상이 되어야 하는 반면 소비자의 관심 환기가 목적일 경우에는 무언가 강렬한 메시지가 들어있는 영상이 필요하다. 사실 비전문가의 입장에서 제작을 시도하기에는 후자보다는 전자의 영상이 도전하기 더 수월하다. 후자의 영상은 크리에이티브도 중요하고 영상의 미적인 부분이나 퀄리티, 후킹포인트 등등이 아주 유기적으로 조합되어야 하기 때문이다.또한, 영상의 주 유통채널이 페북/유투브/인스타 모두를 아우를것인지, 아니면 인스타 위주로 갈 것인지에 따라서 영상의 사이즈가 달라진다. 보통 위 채널을 모두 아우르는 영상은 16:9 또는 16:10의 와이드형으로 제작되지만, 인스타의 경우 (또는 페북도 조금 포함되는 경우) 영상 사이즈는 스퀘어 (정사각형)으로 산출되어야 하기 때문에 제작단계부터 나중에 스퀘어로 영상을 자를 것을 감안해서 편집을 해야 한다. (물론 여력이 된다면 영상을 유투브는 와이드로, 페북과 인스타는 스퀘어로 각각 적용해주는게 가장 좋기는 하다만, 우리에겐 그럴 시간과 여유가 부족하다...아 그리고 요즘은 인스타도 와이드스크린을 게시는 가능하지만 왠만하면 기존 형성된 SNS의 컨벤션을 따라가주는게 좋다.) 한가지만 더 추가하자면, 인스타의 경우 동영상의 분량도 1분을 넘지 못하도록 되어있다. 따라서 힘들게 스퀘어 사이즈로 작업해 놨더니 영상 분량이 1분이 넘어가서 인스타에 태워보지도 못하는 불상사가 생기지 않도록 주의하도록 하자.에어비앤비는 페북에 동영상을 게시할 때 유투브와 연동된 광고는 와이드 스크린으로, 인스타와 연동될 경우 스퀘어 사이즈로 게시하고 있다.바크 홍보 영상의 경우 아이디에이션 세부 내용은 다음과 같다.영상의 목적: 정보전달 - 제품이 실 생활에서 어떻게 쓰이는지를 직관적으로 전달한다.영상의 타겟: 젊은 직장인, 대학생채널: 유투브, 페이스북핵심포인트: 제품의 4가지 유즈케이스를 보여준다 - 아침인사, 직장에서 앱 사용, 앱을 통해 친구 사귐, 파티에서 앱 사용후킹포인트: 외국인을 출현시켜 한국에서 앱 사용하는 모습으로 시작Tone & Manner:  발랄하고 여성스런 느낌, 잡지를 읽는것 같은 분위기, 여성의 낭랑한 나레이션이러한 아이디에이션을 통해 잡은 영상의 컨셉은 다음과 같다.Dear Barkers - 한 유저가 보내는 바크 사용자들을 향한 메시지이러한 컨셉은 향후에 시리즈물로 제작할 것 까지 염두에 두고 구상한 컨셉이다. 즉, 바크 앱을 잘 활용하는 유저들 중 독특하거나 눈에 띄는 유저들을 한명씩 출현시켜서 그들의 눈으로 본 앱 사용기를 'Dear Barkers by 아무개' 이런 시리즈물로 제작하고자 정한 컨셉인 것이다.Step 2. 스토리 짜기영상의 스토리에는 크게 두가지 요소가 있다. 첫째는 장면에 대한 설정인데 영상의 전체 장면들이 어떤 큰 섹션들로 이루어져 있고, 그 하위에는 어떤 장면들을 찍어나갈 것인지를 세세하게 계획하는 부분이다. 둘째는 각 장면마다 들어가는 나레이션이나 자막, 특수효과 등 장면에 붙일 다양한 요소를 기획하는 부분이다. 영상 작업을 처음 해보게 되면 가장 삽질을 많이하는 단계가 바로 스토리짜기 인데, 그 이유는 내가 상상만으로 작업한 스토리대로 실제 촬영이 절대로 매끄럽게 되지 않기 때문이다. 스토리를 최대한 자세하게 짜서 현장에서 직접 촬영하면서 매끄럽지 못한 부분들은 쳐내거나 하는 임시방편이 필요하다.처음에 잡았던 바크 영상의 스토리라인이다. 실제 촬영하면서 엄청나게 난도질되었다.Step 3. 아이폰으로 촬영하기흔히들 영상 제대로 촬영하려면 DSLR이나 캠코더가 있어야 하지 않느냐는 질문을 많이 한다. 사실 이런 전문장비가 필요한 상황은 다음 세가지 밖에 없다. 1) 내 영상이 TV나 옥외광고같은 큰 화면에 송출된다. 2) 아웃포커싱으로 뎁스있는 영상표현이 필요하다. 3) 야간씬이 꼭 들어가야 한다.초기 스타트업이 처음부터 4대매체 광고를 한다면 지금 이 글을 보면서 영상 외주제작비를 아끼려 할리가 없기 때문에 첫번째는 패스하고, 두번째의 경우는 쉽게 말해서 특정 영상에서 포커스 되는 피사체를 제외한 배경이 흐릿하게 보이는 현상을 아웃포커싱 됐다고 표현하는데, 스마트폰 카메라로는 유의미한 아웃포커싱 효과를 얻기 힘들다. (물론 이를 가능하게 해주는 아웃포커싱 앱이 있기는 하다만 퀄리티는 그닥...) 세번째의 야간에서의 장면은 사실 야간이지만 도심 한 복판에서 불빛이 많은 상황에서의 촬영은 아이폰6급 이상, 갤럭시 S6급 이상에서는 충분히 스마트폰으로 가능하다. 하지만 불빛이 적은 상황에서의 야간촬영은 반드시 DSLR 카메라와 조리개 2 이하의 밝은 렌즈가 필요하다. 이 세가지 경우가 아니라면 굳이 영상제작하려고 비싼 카메라 살 필요없이 아이폰이나 갤럭시폰 촬영으로도 충분하다.영상촬영을 초보자가 하려고 하면 이거 아무리 찍어도 뭔가 허접해 보이고 각이 안나온다. 걱정하지 마라. 내가 얘기하는 다음 3가지만 명심하면서 최대한 많은 영상을 촬영하면 반드시 쓸만한 클립이 건져질 것이다.1. 한 클립에서는 절대로 앵글을 바꾸지 마라모든 화면에 앵글이라는게 있다. 바로 로우, 미들, 하이앵글이다. 로우앵글은 밑에서 위를 쳐다보는 것, 미들앵글은 그냥 내 눈높이로 보는것, 하이앵글은 위에서 아래로 내려보며 찍는것을 말한다. 각 앵글마다 느낌이 확 다르고 목적도 다른데, 이에대한 팁들은 다른 전문 영상제작자들의 블로그를 찾아보면서 공부하면 좋다. 여기서는 그냥 내가 지금 찍는 화면이 어떤 앵글이구나 정도만 판단할 수 있으면 되고, 중요한건 한 클립에서 앵글이 왔다갔다 하면 안된다는 것이다. 예를들어 어떤 화면을 미들앵글로 시작했는데 도중에 갑자기 로우앵글로 카메라를 내린다던지, 갑자기 줌인을 한다던지 해서 앵글을 확확 바꿔버리는 경우가 많은데 이러면 그 영상은 불안정해 보여서 홍보 영상으로 쓸 수가 없다. 한번 시작한 앵글은 바꾸지 말고 일단 그 클립을 종료한 후 다시 새로운 앵글로 촬영을 시작하는게 중요하다. 또한, 여러 앵글의 클립을 촬영해 놓으면 나중에 편집할때 영상표현미가 풍부해 져서 더 좋다.카메라 앵글은 크게 3가지가 있는데 하이앵글은 왠만하면 시도하지 말자.2. 인물에 대한 촬영이면 내가 과하다 싶을 정도로 포커스해서 찍어라뭔가 인터뷰나 사람이 얘기하고 있는거나 인물의 행위를 촬영하는 클립인데 초보자들이 많이 하는 실수가 바로 피사체를 너무 줌아웃해서 찍고 있는 경우이다. 사람이 얘기하는 장면인데 실제로 찍은 영상을 보면 사람이 너무 멀리 떨어져 보이는 경우가 많다. 이런경우 내가 찍으면서 '너무 줌인해서 찍고있는거 아냐?' 싶을 정도로 포커스해서 찍어보도록 하자. 물론 얼굴을 꽉 채워서 찍으라는 게 절대 아니다. 보통 가슴 아랫부분이 잘릴정도로 포커스해서 촬영하면 화면에서 제법 인물이 포커스되어 보인다.3. 영상을 끊어 찍어라초보자들이 또 많이 하는 실수가 전체 영상을 한번에 촬영하고 있는 경우이다. 예를들어 한 인물이 카페에 들어와서 주문하고 앉아서 커피마시는 장면이 있다고 상상해보자. 이걸 초보자들이 촬영할때 그 인물의 전체 동선을 따라가면서 한번에 찍는 경우가 많다. 그리고 이걸 여러번 반복해서 찍기도 한다. 이렇게 되면 편집하기도 어렵고 연결된 영상에서 어디서 끊어야 하는지도 애매해 진다. 이 케이스에서는 크게는 1) 인물이 카페이 들어오는 씬, 2) 들어와서 주문대로 걸어가는 씬, 3) 주문하는 씬, 4) 기다리는 씬, 5) 커피 나와서 받아가는 씬, 6) 받아서 자리로 걸어가는 씬, 7) 자리에 앉는 씬, 8) 커피 마시는 씬 이렇게 구간구간 나누어서 촬영을 해야 한다. 보다 전문적인 촬영은 저 구간구간을 카메라 여러대를 동원해서 다양한 앵글로 찍기도 한다. 뭐 이건 카메라가 여러대 있으면 시도해 볼만 하다.한가지 팁은, 아이폰으로 촬영시 손에 들고 촬영하는것 보다는 집에 만일 셀카봉이 있다면 셀카봉에 끼워서 봉을잡고 촬영하는게 더 안흔들리고 안정적으로 촬영 가능하다. 삼각대가 있으면 최고겠지만 대부분은 삼각대도 없는 경우가 많을테니 시중에 널려있는 오천원짜리 셀카봉을 사서 장착하도록 하자.Step 4. Garage Band로 고퀄 음원 제작하기홍보영상 만들때 우리같은 비전문가들이 저작권에 대해 개념이 별로 없어서 특히 음원을 그냥 내가 평소에 좋아하는 음악 다운받아서 입히는 경우가 많다. 요즘은 페북도 유투브도 음원 오토스캔이 발달되어 있어서 내가 마룬5 음악을 입히면 100% 자동 검열로 영상 안올라간다. (페북같이) 올라는 가더라도 광고가 안걸리는 경우가 많다. 이런 경우를 대비해서 시중에는 수 많은 유/무료 음원 사이트들이 존재하고 유투브에도 다양한 무료음원을 제공하는 아카이브가 있기도 하다. 유투브에서 제공하는 이 무료 음원 사이트는 다양한 장르의 무료 음원 및 효과음을 제공하기에 제법 유용하다. 여기서 괜찮은 음원을 찾는다면 이 단계는 그냥 패스해도 좋다. (다만, 각 음원마다 사용 조건이 명시되어 있으니 그걸 꼭 지키도록 하자.)유투브에서 제공하는 무료 음원 라이브러리이다. 각 음원마다 클릭해보면 사용 조건이 명시되어 있으니 유의하자.당신이 맥북유저고 Garage Band가 있으면 진짜 마법처럼 손쉽게 제법 고퀄의 음원을 만들수가 있으니 이 단계를 스킵하지 말고 꼭 한번 도전해 보기 바란다.거라지밴드를 처음 열면 다음과 같이 생겼다. 고민하지 말고 'Empty Project'를 선택한다.거라지밴드의 첫 화면이다.아무리 초보자를 위해 쉽게 디자인된 프로그램이라지만 역시 머리가 아득해질 정도로 복잡해 보인다. 하지만 겁먹지 말자. 하나씩 차근차근 인터페이스에 대해 설명해 주도록 하겠다.프로젝트 메인화면이다. 머리가 아득해질 정도로 복잡해 보인다.1) 미디 (MIDI) 악기를 선택 가능한 좌측 악기 라이브러리 - 이 곳은 마치 내가 연주할 악기를 고르듯이 거라지밴드에 구비되어 있는 미디 악기 창이다. 이 창이 처음에 안보일 수 있다. 당황하지 말고 맨 위 좌측에 책장서랍처럼 생긴 아이콘을 누르면 슉 하고 나온다.2) 연주한 음악을 배치하는 타임라인 - 1번 섹션에서 선택한 악기에 기본 제공되는 건반작업 등으로 곡을 연주하고, 이를 분량에 맞게 배치하는 영역이다. 이 부분은 항상 보인다.3) 다양한 pre-made된 음원 조각들이 모여있는 루프 - 가장 중요한 섹션이다. 사실 이 단계에서 당신이 음악을 한번도 만들어 본 적 없는 생초보라면 위의 1번, 2번은 그냥 무시하고 이 3번섹션만 집중하도록 하자. 이 루프 탭 역시 처음에 창이 안보일 수 있다. 맨 우측 위에 세개의 아이콘 중 가운데 노란리본 모양으로 생긴게 이 탭을 여는 버튼이다.1번과 2번은 음악에 조금이나마 흥미가 있었던 사람이라면 이것저것 악기도 추가해 보고 만지작 만지작 하다 보면 금방 감이 오긴 하는데, 그렇지 않은 사람들에게는 매우 어려운 영역이니까 이 글에서는 패스하도록 하겠다. 사실 3번의 루프 라이브러리만 가지고도 어느정도 고퀄의 배경음악을 만들 수 있으니까 말이다. 루프 라이브러리를 활용하여 음원을 만들기에 앞서 간단히 알고 있어야 하는 사전지식에 대해 짚고 넘어가도록 하자.1. 모든 음악의 기본은 [드럼비트-베이스-멜로디 + 효과음]의 구조로 이루어져 있다. 하지만 경우에 따라서 베이스는 생략하고 [드럼비트-멜로디 + 효과음]으로 구성되기도 한다.2. 모든 음악에는 bpm이라고 불리는 일종의 스피드 같은게 있다. 보통 70-90정도면 느린음악, 100-120정도면 보통, 120 이상이면 빠른 음악이다. 거라지밴드에서 상단에 계기판처럼 생긴 탭에서 'bpm'이라는 부분의 숫자를 더블클릭해서 변경해 줄 수 있다.3. 한 음악은 여러개의 뭉탱이 단위의 음원들이 모여서 이루어진다. 이 뭉탱이 단위는 거라지밴드에서는 기본적으로 타임라인에서 8개의 눈금을 차지한다. 즉, 모든 음악을 8개 단위의 뭉탱이로 조합시키라는 뜻이다.그럼 루프 라이브러리를 활용해서 간단한 댄스 음악을 만들어 보도록 하자. 우선 첫번째 단계는 비트를 선택하는 건데, 루프 라이브러리에 'beat'라는 탭을 누르면 비트 음원만 보여준다. 여기서 하나씩 들어보고 마음에 드는 비트를 선택해서 마우스로 드래그해서 타임라인에 가져다 놓으면 된다. 위에서 말했듯이 갖다놓은 비트를 마우스로 드래그해서 8개의 눈금을 차지하도록 늘려놓은 후, 이 8개 눈금의 뭉탱이를 계속 복사해서 분량을 늘려나가도록 하자. 예를들면 다음과 같은 모습이 될 것이다.갖다 놓은 비트를 8개 눈금 뭉탱이로 늘린 후에 이를 8마디마다 계속 복붙한다.다음 여기에 어울리는 멜로디를 찾아보자. 루프 라이브러리에 멜로디가 너무 많아서 이거 고르고 있는데만 시간 크게 잡아먹기 마련이므로 심플하게 기타, 피아노, 스트링 위주로 찾아보도록 하자. 역시 상단에 guitar, piano, string이라는 탭이 있다. 마음에 드는 음원을 찾으면 역시 위에서와 같이 8눈금을 차지하는 뭉탱이로 늘려주고 적절히 배치한다. 이때 팁은, 음악에도 기승전결 같은게 있다는거다. 처음부터 막 시끄럽게 시작하지 않고 차분하게 시작해서 클라이막스를 찍고 종료하는 흐름이라는게 있기 때문에 이 멜로디를 너무 처음에 배치하지 말고 앞의 한 뭉탱이 (8눈금)은 비트만 틀어주고 9번째 눈끔 부터 멜로디를 넣도록 하자. 또 한가지 팁은, 멜로디 중에서 '~~~01,' '~~~02' 이런식으로 같은 이름에 숫자가 여러개 존재하는 멜로디들이 있는데 이걸 사용하면 같은 느낌으로 다양한 변주를 넣을 수가 있다. 예를들면 다음 사진과 같다.뭉탱이 단위로 기승전결의 흐름을 만들어서 배치하면 음악이 더 풍성해 진다.'Brixton Lights Rhythm Guitars' 라는 음원이 01, 02 두개가 존재하기에 한 뭉탱이 단위로 순차적으로 배열하니까 음악이 제법 풍성해 보인다. 보통 진짜 심플한 영상의 배경음악으로 들어갈 꺼면 그냥 이렇게 비트+멜로디 딱 두개만 넣어서 한 30-40초분량 음악 만들어서 익스포팅 해버려도 상관은 없다. 하지만 여기에 좀 더 풍부한 효과음원들을 추가할 수 있는데, 예를들면 루프 라이브러리에서 'voice'라는 탭을 눌러보면 다양한 목소리 코러스가 있고, 'Conga' 탭을 눌러보면 아프리카 음악같은 효과도 추가 가능 하다. 음악을 다 완성하고 나면 맨 상단에 'Share' 메뉴에 'Exporting to Disc'라는 메뉴가 있는데 이걸 클릭해서 MP3  파일로 추출할 수 있다.Step 5. iMovie로 영상 편집하기이제 드디어 마지막 단계이다. 지금까지 촬영한 영상들과 위에서 만든 음원을 조합하여 영상을 아이무비로 편집하는 과정이다. 역시 아이무비를 처음 다뤄보는 분들을 위해 인터페이스에 대한 기본적인 내용을 다루고 진행하도록 하겠다.아이무비도 심플한듯 보이지만 처음에는 머리가 아득해지는 인터페이스다.1번탭은 영상의 각 요소대로 만들어진 가장 큰 단위의 탭이다. 즉, My media는 내가 지금까지 촬영한 클립들을 불러오는 탭, Audio는 아까 작업한 음원, Title은 각 영상에 들어가는 자막, Backgrounds는 굳이 촬영한 클립이 없어서 배경에 채워넣거나 중간중간 화면전환용으로 필요한 배경화면들인데 별로 많이 쓰이진 않는다. 마지막으로 Transitions는 각 클립마다 영상 전환이 칼같이 될 것인지, 흐려졌다가 나오는지, 겹쳐져서 나오는지 등등의 다양한 화면전환 효과들이 들어있다.2번탭은 1번탭을 클릭하면 그 하위내용들이 표시되는 탭이다. 예를들어, Titles를 클릭하면 자막으로 쓸 수 있는 다양한 형태의 자막 라이브러리가 뜨는 것이다.3번탭은 거라지밴드와 마찬가지로 영상의 각 요소들을 시간순으로 배치시키는 타임라인이다. 이 부분은 크게 4가지 요소로 이루어져 있다. 1) 맨 밑부분의 초록색 바는 영상 전체에 깔리는 기본 음원이다. 아까 거라지밴드에서 작업한 음원이 여기에 들어간다. 2) 그 위의 초록색 바 들은 영상에 부분부분 들어가는 음원인데 주로 영상에 넣는 효과음들이나 나레이션 목소리가 여기에 들어간다. 3) 영상 클립들이 그 위에 배치된다. 4) 각 영상에 들어가는 자막들이 바로 그 위에 있는 초록색 바 이다. 5) 간혹 이미지를 영상에 삽입하고 싶은 경우가 있는데 3번탭의 맨 왼쪽 위를 보면 바크 로고 이미지가 영상 위에 입혀져 있고 자막은 그 위에 들어가 있다. 이게 이미지와 영상이 함께 들어간 부분이다. 이 부분은 picture in picture 기능을 잘 활용하는 트릭인데 나중에 별도의 글로 따로 설명하도록 하겠다.4번탭은 각 부분마다 현재 꾸며진 영상을 프리뷰하는 부분이고 그 상단에 있는 아이콘들은 그 해당 장면에서 다양한 설정이 가능하도록 해주는 기능들이다. 역시 하단에 따로 설명하도록 하겠다.아이무비로 영상작업하는 순서는 다음과 같다.1. 음원 배치아까 거라지밴드로 작업한, 또는 유투브 무료 라이브러이에서 다운로드 받은 음원파일을 타임라인 (4번탭) 맨 하단에 드래그해서 갖다놓는다.2. 영상 배치영상 역시 파일을 그대로 타임라인에 드래그 해서 갖다 놓으면 되는데, 가져다 놓은 후 잘라내기 (Split) 및 줄이기의 두가지 툴로 원하는 부분만 가져다 놓는다.  화면을 잘라내는 방법은 해당 클립에 커서를 놓고 우측 버튼을 클릭하면 'Split Clip'이라는 메뉴가 있고, 이걸 클릭하면 영상이 그 지점에서 둘로 쪼개진다. 영상을 늘리고 줄이는것은 (스크린샷이 안찍혀서 그냥 말로 설명하겠음) 마우스를 해당 클립 끝 부분에 가져다 놓으면 갑자기 화살표로 커서가 바뀌는데 그때 드래그하면 된다.3. 화면전환화면전환은 너무 많이 넣으면 영상이 촌스럽고 복잡해 보인다. 다음 4가지 부분에만 넣도록 한다. 1) 첫 시작, 2) 도입부-메인부 사이, 3) 메인부-클라이막스 사이, 4) 클라이막스-종료부 사이. 보통 첫 시작은 어두워지면서 밝아지기에 'Fade to Black' 화면전환을 맨 처음에 넣으면 영상이 어두웠다가 밝아지면서 시작한다. 또한, 도입부, 메인부 등 각 섹션 안의 클립들은 화면전환을 넣지 말고 그냥 연결해서 붙여넣고, 위에서 언급한 4가지 부분만 Cross Blur (흐려지면서 전환), 또는 Cross Dissolve (겹치면서 전환)를 배치하도록 한다. 마지막은 어두워지면서 끝내고 싶을때는 'Fade to Black'을, 밝아지면서 끝내고 싶을때는 'Fade to White'을 배치하도록 한다.각 영상클립 사이에 있는 나비리본같은 모양이 화면전환 효과가 들어간 지점이다. 보다시피 한 섹션 안의 영상들은 화면전환 없이 연결한다.4. 화면효과 - 밝기조절 및 필터아이무비에는 마치 사진의 밝기를 조절하고 필터를 넣듯이 영상에도 밝기조절 및 필터를 넣을 수 있는 강력한 기능이 있다. 이건 해당 클립을 클릭하면 4번탭 상단에 아이콘 메뉴들 중 파레트 모양의 아이콘을 클릭하면 화면의 밝기 및 색온도를 조절할 수 있고, 삼원모양의 아이콘을 클릭하면 필터를 입힐 수 있는 기능이다.영상 클립의 밝기조절 및 필터효과를 통해서 다양한 화면 연출이 가능하다. 바크 영상에도 도입부와 후반부에 필터를 입혔다.5. 자막작업자막이 필요한 경우 1번탭에서 Titles탭을 클릭하면 다양한 자막기능을 선택해서 타임라인으로 드래그한 후 4번탭에서 글을 입력할 수 있다. 하지만 우리가 예능에서 보는것 처럼 현란한 자막작업은 불가능하다. 아이무비에서 그나마 쓸만한 자막 기능은 Upper, Lower, Centered 요 3개밖에 없고, 나머지는 너무 과하거나 촌스럽다. 아무튼 저 3개중 하나를 선택해서 드래그해서 타임라인에 갖다 놓은 후 더블클릭하면 4번탭에 다음과 같은 텍스트 편집 창이 활성화 된다. 여기에서 폰트 종류, 정렬, 크기등을 조절할 수 있다. 한가지 팁은, 처음에는 글씨에 외각선이랑 그림자, 볼드처리가 자동으로 되어있어 매우 촌스러워 보이는데 당황하지 말고 'B'라는 버튼과 'O'라는 버튼을 클릭하여 외각선과 볼드처리를 해제시키면 된다. 또한 자막을 드래그해서 원하는 장소에 갖다 붙이는 기능 역시 지원하지 않아 당황할 수 있는데 역시 당황하지 말고 Lower의 경우 맨 끝에서 엔터를 여러번 치면 글씨가 점점 위로 올라가서 인위적으로 중간쯤에 갖다 놓을 수 있고, 역시 스페이스바를 여러번 쳐서 원하는 장소에 딱 글씨를 갖나 놓을수도 있다.자막을 더블클릭하면 텍스트 수정창이 활성화 된다.이런 과정을 거쳐서 모든 작업을 끝 마쳤다면 상단의 메뉴에서 File > Share > Export to Disc 탭을 통해서 만든 영상을 mp4 포맷으로 추출할 수 있다.아이무비로는 사실 이것 보다 훨씬 다양한 영상편집 기능을 제공하는데, 이걸 잘만 활용하면 비싼 어도비 프리미어나 파이널컷 프로가 필요 없을 정도로 알차게 활용 가능하다. 이 부분은 향후 별도의 글을 통해서 팁을 전하도록 하겠다.자, 이제 모든 단계가 끝났다. 다시한번 바크 영상을 보자.https://www.youtube.com/watch?v=o7g_0yRjDoA<iframe width="700.000000" height="394.000000" src="//www.youtube.com/embed/o7g_0yRjDoA" frameborder="0" allowfullscreen="">서론에 보여준 이 영상은 사실 이 5단계를 모두 거쳐 작업시간이 약 2주정도 소요된 영상이다.바크 홍보 영상은 위의 단계를 모두 거쳐서 약 2주정도의 시간이 걸려서 완성되었다. 다시한번 강조하지만 에이전시에서 전문적인 툴로 작업하는 고퀄영상에 비할바는 절대로 못되지만, 초기 스타트업이 페이스북이나 인스타 등에 주로 마케팅 하는 용도의 영상으로는 크게 나쁘지는 않다고 생각한다. 당신이 혹시 주머니돈 아껴가며 어렵게 제품 홍보하고 있는 초기 스타트업이라면 수백만원의 아까운 돈을 영상제작에 쓰지 말고 차라리 영상을 직접 제작한 후에 그 돈을 영상을 뿌리는 광고비에 쓰라고 꼭 말씀드리고 깊다. (혹시 이 글이 어느정도 도움이 됐다면, 보답으로 바크 페이스북에 가서 본 홍보영상에 라이크 버튼을 살포시 눌러주시면 매우매우 감사하겠습니다!!!)글쓴이는 스팀헌트 (Steemhunt) 라는 스팀 블록체인 기반 제품 큐레이션 플랫폼의 Co-founder 및 디자이너 입니다. 비즈니스를 전공하고 대기업에서 기획자로 일하다가 스타트업을 창업하고 본업을 디자이너로 전향하게 되는 과정에서 경험한 다양한 고군분투기를 연재하고 있습니다.현재 운영중인 스팀헌트 (Steemhunt)는 전 세계 2,500개가 넘는 블록체인 기반 앱들 중에서 Top 10에 들어갈 정도로 전 세계 150개국 이상의 많은 유저들을 보유한 글로벌 디앱 (DApp - Decentralised Application) 입니다 (출처 - https://www.stateofthedapps.com/rankings).스팀헌트 웹사이트 바로가기
조회수 6204

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

릭오웬스와 유니클로를 입는 두 디자이너

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

리디북스 뷰어 형광펜 개선 후기

종이책과 비교했을 때 전자책의 매력 중 하나는 ‘형광펜’ 기능입니다. 책을 읽으며 원하는 구절에 형광펜을 남기면 모든 기기에 동기화가 되고, 이를 독서노트에서 한 번에 모아볼 수도 있습니다. 이러한 매력에도 불구하고 그동안 리디북스 형광펜 남기기 기능에는 고질적인 문제가 있었습니다. 그것은 페이지 마지막 문장에 형광펜을 남길 때 다음 페이지에 이어서 남길 수 없었다는 점입니다. 하지만 2016년 9월, iOS를 시작으로, 형광펜을 이어서 남길 수 있습니다. 이 기능을 ‘형광펜 이어서 남기기’ 라고 부릅니다.형광펜을 남기는 불편한 방법과 그 이유1. 개선 전 형광펜을 이어서 남기는 방법‘형광펜 이어서 남기기’ 기능을 추가하기 전, 두 페이지에 걸쳐있는 문장에 완전한 형광펜을 남기는 과정은 아래와 같습니다.1) ‘반대로 혼자서 무엇인가를~’로 시작되는 문장을 다음 페이지에 이어서 형광펜을 남기려고 했을 때 마땅히 다른 방법이 없습니다.2) 어쩔 수 없이 글자 크기를 줄여서 두 페이지에 걸친 문장을 한 페이지에 표시합니다.3) 형광펜을 남깁니다.4) 다시 눈에 편한 이전 글자 크기로 조정합니다.형광펜을 남기는 과정은 이같이 번거로웠습니다. 그래서 앞 페이지에 형광펜을 남기고, 문장이 끊긴 채로 다음 페이지에서 새로 형광펜을 남기는 사용자도 많았습니다.2. 불편함을 토로하는 사용자의 의견형광펜 이어서 남기기에 대한 의견은 ‘형광펜’과 관련된 많은 의견 중에서도 상당수를 차지했습니다.“완벽하게 형광펜을 남기려면 글자 크기를 줄이고 남겨야 하는데 귀찮고, 읽는 흐름이 끊겨서 불편합니다. 개선해주세요.”“페이지 간 형광펜을 이어서 남길 수 없다 보니 앞, 뒤 페이지에 따로 남기곤 합니다. 독서노트에서 문장이 가닥가닥 끊어져 있어서 보기 좋지 않네요. 독서노트에서 문장을 연결할 수 있게 해주세요.”“다음 페이지로 이어서 형광펜을 남기는 기능은 언제 추가되나요? 매번 형광펜을 남길 때마다 피곤합니다.”3. 형광펜 이어서 남기기가 가능하지 못했던 이유종이책과 달리 전자책은 절대적인 판형, 글자 크기, 문단 너비, 줄 간격 등이 존재하지 않습니다. 그러므로 사용자는 읽기 편하게 글자 크기를 늘리거나 줄 간격을 넓힐 수 있습니다. 이때 설정을 변경함에 따라 하나의 문장이 한 페이지에 존재할 수도, 두 페이지 또는 여러 페이지에 걸쳐 존재할 수도 있습니다.또 전자책은 모바일을 기준으로, 보통 화면에 한 페이지만 노출합니다. 연결된 하나의 문장이라도 화면에 보이지 않는 다음 페이지에 걸쳐 있다면 이어서 형광펜을 남길 수 없었습니다. (그래서 화면이 넓은 태블릿이나 PC 뷰어에서는 형광펜을 이어서 남기고자 하는 요구가 상대적으로 적었습니다.)글자 크기나 문단 너비, 줄 간격 등의 변수로 문장이 화면에 보이지 않는 다음 페이지에 걸쳐졌을 때, 이어서 형광펜을 남길 수 없었습니다.프로젝트의 조건1. 형광펜을 남기는 두 가지 방식 모두 자연스러워야 한다.리디북스 뷰어에서는 핸들로 문장을 선택하여 남기는 방식, 미리 선택하지 않고 문장을 누른 채로 드래그하여 바로 형광펜을 남기는 방식(이하 오토 하이라이트), 총 두 가지 방식을 지원하고 있습니다. 이 두 가지 방식 모두 자연스러워야 했습니다.핸들로 문장을 선택하여 형광펜을 남기는 방식(좌측), 문장을 누른 채로 드래그하여 바로 문장에 형광펜을 남기는 방식(우측), 총 두 가지를 지원하고 있습니다.2. 가능한 익숙한 UX여야 한다.뷰어는 책 읽기에 집중할 수 있도록 문장으로만 채워져 있습니다. 설명이 필요한 낯선 요소가 들어갈 경우, 설명에 문장이 가려져 독서에 방해가 될 수 있으며 사용자는 새로운 사용법을 익혀야 합니다. 최대한 학습이 필요 없는 익숙한 UX를 지향했습니다.위 두 가지 조건을 모두 만족하는 리디북스만의 방식을 찾아야 했습니다.개선된 ‘형광펜 이어서 남기기’ 방법두 페이지에 걸쳐있는 문장에 형광펜을 남기는 두 가지 방법은 이러합니다.1. 첫 번째 방법1) 페이지 마지막 문장까지 선택하면, ‘문장 이어서 선택하기’ 에디트 메뉴가 뜹니다.2) 메뉴를 누르면 다음 페이지로 넘어가고 해당 문장이 끝나는 마침표까지 자동으로 선택됩니다.3) 이어 ‘형광펜 / 메모’ 에디트 메뉴가 뜨고 그 상태에서 ‘형광펜’을 누르면 됩니다.2. 두 번째 방법1) 오토 하이라이트로 페이지 마지막 문장까지 형광펜을 남기면, ‘형광펜 이어서 남기기’ 에디트 메뉴가 뜹니다.2) 메뉴를 누르면 다음 페이지로 넘어가고 나머지 과정은 첫 번째 경우와 같습니다.문제 해결 과정1. 문장 선택 방법 결정하기형광펜을 남기는 두 가지 방식을 모두 지원하면서 익숙한 UX가 되려면 두 가지 방식에서 사용하는 요소여야 했습니다. 함께 고민하던 개발자님이 떠올린 아이디어는 핸들(Handle) 이었습니다.문장 선택 시 사용하는 핸들을 HIG(Human Interface Guidelines)에는 따로 명시되어 있지 않지만, iOS에서 코드상으로는 그래버(Grabber), 일반적으로는 핸들(Handle)이라 부르며 Android에서는 텍스트 셀렉션 핸들(Text selection handles)이라 부릅니다.에디트 메뉴를 띄워서 핸들로 문장을 선택하는 방식은 기존에 이미 핸들을 사용하고 있으므로 다음 페이지로 넘어가 핸들로 원하는 문장까지 선택하는 것은 자연스러웠습니다. 앞 페이지에서 오토 하이라이트로 형광펜을 남기고 페이지가 넘어간 후, 다음 페이지에서 핸들이 나타나는 것은 처음엔 다소 어색하게 느껴졌습니다. 하지만 기존에 쓰고 있는 요소여서 낯설지 않았고 사용 방식 또한 익숙해서 어렵지 않게 다가왔습니다.2. 세부사항 결정하기프로토타입을 기반으로 UI 디자이너가 모여있는 UI 길드와 사내에서 다양한 피드백을 받았습니다. 그 후, 다듬고 수정하는 과정을 거쳐 세부사항을 결정하였습니다.1) 레이블 결정하기형광펜과 결합하여 사용할 수 있는 동사는 ‘하다’, ‘치다’, ‘칠하다’, ‘긋다’, ‘남기다’ 등 생각보다 많습니다. 그렇다 보니 사용자뿐만 아니라 사내에서도 같은 기능이지만 다르게 불리곤 합니다. 여러 가지 동사 중, 형광펜과 밑줄에 모두 어울리는 동사가 필요했습니다. ‘하다’는 광범위한 행동에 사용됩니다. ‘치다’와 ‘긋다’는 형광펜보다는 밑줄과 더 잘 어울리며, ‘칠하다’는 형광펜에만 어울립니다. ‘남기다’가 형광펜과 밑줄에 모두 어울리고 ‘독서노트에 남긴다’라는 의미로도 맞아서 레이블에 형광펜과 결합하여 사용할 동사로 결정하였습니다.2) 맥락에 맞는 레이블 메뉴 구성‘남기다’로 동사를 결정한 후, ‘형광펜 이어서 남기기’로 에디트 메뉴 레이블을 결정했습니다. 밑줄로 남길 때는 형광펜에 해당하지 않으므로 상황에 맞게 ‘밑줄 이어서 남기기’ 레이블로 변경하였습니다. 또 문장을 선택해서 형광펜을 남기는 경우도 문장 선택을 먼저 하므로 맥락에 맞지 않았습니다. 이 경우에는 ‘문장 이어서 선택하기’라는 레이블로 변경하였습니다. (개선된 ‘형광펜 이어서 남기기’ 방법 항목 참조)‘문장 이어서 선택하기’ 에디트 메뉴에는 ‘형광펜’, ‘메모’, ‘듣기’, ‘정의’, ‘검색’, ‘공유’ 등 기존 에디트 메뉴도 함께 보여줘야 했습니다. 다음 페이지로 넘어가지 않고 마지막 문장까지만 형광펜을 남길 수도 있고, ‘듣기’나 ‘공유’ 등 다른 에디트 메뉴 기능을 사용하는 상황도 있을 수 있기 때문입니다. 하지만 페이지 마지막 문장이 끊기지 않고 마침표로 완전하게 마무리되는 경우는 많지 않았습니다. 그래서 ‘마지막까지 문장을 선택한다면 다음 페이지로 이어서 문장을 선택하고 싶다’는 가설을 세웠습니다. 그리고 ‘문장 이어서 선택하기’에 집중할 수 있도록 다른 메뉴는 감추고 한 단계를 더 거쳐 선택하도록 하였습니다.한 번에 많은 메뉴가 노출되면 선택에 집중하기 어려웠습니다. 그래서 마지막 문장까지 선택한 경우, 다른 메뉴는 감춰 문장 선택에 집중할 수 있도록 하였습니다.3) 에디트 메뉴의 위치처음 에디트 메뉴 위치는 커스텀이지만 OS와 유사한 위치를 사용했습니다. 어디서부터 선택하는지, 어느 정도 선택하는지에 따라서 자동으로 에디트 메뉴의 위치가 달라집니다. 또 선택한 문장과 겹치지 않게 선택된 문장의 위나 아래에 위치합니다. 그렇다 보니 페이지 마지막 문장까지 선택했을 때 손을 뗀 자리가 아닌 문장과 겹치지 않는 먼 위치에 에디트 메뉴가 떠서 어색했습니다. 그래서 손을 뗀 가까운 곳으로 에디트 메뉴 위치를 변경하여 바로 다음 페이지로 넘어갈 수 있게 하였습니다.OS에서 제공하는 에디트 메뉴의 위치에서, 사용하기 편하도록 에디트 메뉴의 위치를 마지막 문장이 끝나는 지점과 가깝게 옮겼습니다.4) 다음 페이지로 넘어간 후 선택해줄 문장의 범위페이지가 넘어간 후, 문장이 끝나는 마침표까지 선택해줄 경우, 문장이 해당 페이지에서 끝나지 않을 수 있습니다. 그래서 처음에는 다음 페이지의 시작 문장에서 다섯 글자까지만 선택해주었습니다. 하지만 문장이 페이지를 넘어가는 경우가 더 적어서 마침표까지 선택해주는 것이 형광펜을 남기는데 더 편리했습니다. 또 문장이 해당 페이지를 넘어간다면 다시 ‘문장 이어서 선택하기’ 에디트 메뉴를 노출하여 다음 페이지로 이어서 선택할 수 있게 하면 되므로 문장을 마침표까지 선택해주었습니다.다음 페이지로 넘어갔을 경우, 해당 페이지 안에서 문장이 끝나는 경우가 많았지만 문장이 끝나지 않고 그다음 페이지로 넘어가는 경우에도 대응해야 했습니다.마치며2016년 9월로 페이퍼까지 형광펜 이어서 남기기가 추가되었습니다. 리디북스 내 ‘묵은지’라 불리던 이 문제를 해결하여 더는 형광펜으로 고통받지 않아도 될 분들을 생각하면 기쁩니다.마지막으로 해결하기 어렵다고 생각한 형광펜 이어서 남기기를 구현해주신 리디북스 iOS 개발자님에게 감사를 표합니다.참고 문헌[1] Apple Inc. “Edit Menus - UI Controls - iOS Human Interface Guidelines” Last modified 2016. [2] Google (2016). “Selection - Patterns - Material design guidelines” Last modified February, 2016. [3] 이광희. ePub(이펍) 제작 테크닉. 서울: 비엘북스, 2012.#디자인 #UX #UI #UX디자인 #UI디자인 #사용개선 #유저중심 #리디북스 #UserExpirience #UserInterface #사용성 #후기

기업문화 엿볼 때, 더팀스

로그인

/