스토리 홈

인터뷰

피드

뉴스

조회수 3513

앱(App)의 첫인상 = 홈 배너

첫인상은 한번 각인되면 쉽게 바뀌지 않는다는 말을 한 번쯤은 들어보셨을 텐데요. 표정, 옷매무새 등으로 자신을 어떻게 표현하느냐에 따라 첫인상이 좌지우지됩니다. 그렇다면 앱(App)에서의 첫인상은 어디서 결정될까요?바로 '홈 배너'입니다.'데일리호텔'앱 2.0 버전에는 기존에 없던 홈화면이 추가되면서 마케팅 성격의 배너 영역이 확대되었습니다.(이미지 참고) 해서 데일리의 첫인상을 책임질 새로운 배너 가이드의 필요성을 느끼게 됩니다.(좌)기존 앱 구동시  (우)업데이트 된 2.0 버전 앱 구동시01 무엇을 고려해야 할까?홈화면에는 '데일리호텔/데일리고메' 버튼이 새로 생성되었습니다. 사실상 두 버튼이 예약을 위한 제일 첫 단의 경로였기 때문에 이 버튼의 주목성을 방해하지 않는 선에서 레이아웃 및 톤 앤 매너를 정의해야 했어요. 또한 영역이 커진 만큼 주목도가 높아지기 때문에 유저가 지루함을 느껴서는 안 되었죠.때문에 크게 이러한 목표를 두었습니다.첫 번째. 디자인 개선두 번째. 프로덕트(UI)와의 조화위 두가지를 기반으로 데일리의 브랜드 디자인 키워드에 맞춰 아래와 같은 구체적인 방향을 설정하였습니다.02 타사 써칭 및 분석가이드를 잡기에 앞서, 타사의 경우 홈배너를 어떻게 활용하고 있는지 조사가 필요했습니다. 많은 자료들을 모아 분석해본 결과 데일리의 경우 크게 세 가지 형태로 배너를 표현할 수 있음을 도출할 수 있었죠.첫 번째. 텍스트 + 오브젝트를 함께 살리는 안두 번째. Full Image를 사용하여 하단에 텍스트 박스를 기재하는 안세 번째. 이미지에 Dim처리를 한 후 텍스트를 기재하는 안단순히 디자인의 심미성 영역을 넘어서 많이 사용되는 호텔과 레스토랑 이미지를 실제로 적용시킬 수 있는지의 판단 또한 필요했습니다. 호텔 내부 이미지의 경우 누끼(*오브젝트만 남기고 배경을 지우는 작업)를 딸 수 없는 경우가 많았기 때문이죠.03 우리와 어울리는 컬러는?배너의 레이아웃이 얼추 뼈대를 드러내는 시점에 함께 적용시킬 수 있는 컬러를 찾아야 했습니다. 앞서 말했듯이 예약 경로인 버튼의 주목성을 해치지 않는 톤 앤 매너를 유지하고, 마케팅적인 성격보다는 추천의 성격을 띠기 위해 차분한 톤이 필요했습니다.수많은 테스트 그리고 적용...또 적용04 결과최종적으로 반영된 사항은 아래와 같았습니다.1. 호텔/레스토랑 프로모션 배너 -> 누끼 혹은 그라데이션으로 이미지 처리2. 브랜드 메시지 배너 -> Full Image에 Black Dim 처리3. 누끼를 딸 수 있는 이미지 사용 권장4. 따뜻한 파스텔톤의 컬러 사용5. 워딩 Black/White Color로 통일(좌)구 배너  (우)개선된 배너해서 위와 같은 결과물을 얻을 수 있었습니다. 전과 후 배너 비교를 해보니 새삼 구 배너가 너무 많은 메시지 전달을 하려는 성향이 있었음을 느끼게 되었어요.(반성..) 또한, 이번 배너 개선 프로젝트를 통해 디자인 심미성뿐만이 아니라 많은 부분을 얻을 수 있었습니다.배너 개선 프로젝트로 얻은 것들마치며생각보다 길어진 프로젝트였지만 프로덕트와 마케팅적인 관점에서 많은 부분을 감안하고 작업을 진행한 만큼 모두가 만족할 수 있는 결과물이었습니다. 또한 홈화면의 홈배너 개선 후 많은 유저분들이 단순한 마케팅 메시지가 아닌 '라이프스타일 추천'을 받을 수 있어서 좋다는 피드백을 주셨습니다. 즉, 본 개선 작업으로 인해 브랜드 톤 앤 매너 또한 개선된 샘이었죠.앞으로도 데일리가 추구하는 방향을 유저에게 전달하기 위한 많은 과제가 놓여있다는 것을 알고 있습니다. 어떻게 하면 더 전달할 수 있을지, 더 가까워질 수 있을지, 더 특별한 삶을 보낼 수 있도록 도울 수 있을지 고민하는 데일리가 되도록 하겠습니다! 감사합니다.기획/진행 : Creative팀작성자 : Creative팀 Blair Ahn#데일리 #데일리호텔 #디자인 #디자이너 #인사이트 #브랜드 #앱디자인 #UI디자인
조회수 3754

No 포토샵! 기획자/마케터들을 위한 무료 목업(Mockup) 사이트 5가지 

출처: dribbble목업(mockup)이란?‘목업’에 대해 들어보셨나요? 실제 제품을 출시하기 전 실물을 가늠할 수 있도록 해주는 위와 같은 이미지를 목업이라고 부르는데요, 주로 디자이너들이 클라이언트를 설득하기 위한 용도로 프레젠테이션에서 사용합니다. 목업 이미지는 말과 글로 이해하기 힘든 내용을 비주얼을 통해 한 번에 전달할 수 있다는 점에서 강력합니다. 특히 이해관계자들의 협력을 이끌어내야 하는 기획자나 마케팅 타겟을 설득해야 하는 마케터들에게도 유용하겠지요.대표적으로 freepik과 같은 사이트에서 명함, 패키지, 아이폰 등 원하는 분야의 psd 파일을 찾아 포토샵으로 내가 만든 이미지를 얹어주면 금방 실제 모형과 같은 목업 이미지가 만들어집니다. 하지만 누구나 포토샵을 갖고 있지 않기도 하고, 바쁜 현장에서 psd 파일을 다운 받아 압축 풀고 이리저리 편집한 뒤 전달하는 과정은 다소 번거롭기도 하죠. 그래서 웹상에서 이미지를 바로 업로드하고 다운받을 수 있는 무료 목업 사이트 5 가지를 소개합니다. 파워포인트 보다 예쁘게, 포토샵 보다 쉽고 빠르게 목업 이미지를 만들어보세요! 1. Smartmockupshttps://smartmockups.com/category 디지털 디바이스, 인쇄물, 의류 세 항목으로 이루어져 있습니다. 배경이 있는 photo 메뉴와 배경이 생략된 isolated 메뉴로 나누어볼 수 있으며 제품 컬러를 원하는대로 조절할 수 있습니다.2. Placeithttps://placeit.net/c/mockups이미지 소스가 1만 개 이상으로 다양하고 목업을 여러 종류의 태그를 통해 찾아볼 수 있습니다. 의류나 인쇄물, 디바이스 뿐만 아니라 페이스북 광고, 앱스토어 스크린샷 등의 목업 제작 또한 가능합니다.3. mediamodifierhttps://mediamodifier.com/category/all디지털 디바이스, 인쇄물, 제품, 로고, 의류 등 역시 다양한 종류의 목업 이미지가 있고 그림자 및 오브젝트 유무를 직접 편집할 수 있다는 점이 특징입니다. 4. Dunnnkhttp://dunnnk.com/아이폰, 안드로이드, 맥북, 아이패드, 아이맥, 애플워치 등 디지털 디바이스에 특화된 목업 사이트입니다. 원하는 목업을 클릭하면 메인 화면에서 바로 이미지 업로드/다운로드가 가능하다는 장점이 있습니다. 소개한 5 가지 사이트 중 가장 빠르게 이미지를 편집할 수 있습니다.5. adparlorhttp://admocks.adparlor.com/#facebook/website_clicks/carousel페이스북, 인스타그램, 트위터, 인스타그램 등 소셜 콘텐츠 목업을 제작할 수 있습니다. 편집 시 내 소셜 계정과 연동해 이미지를 바로 불러올 수 있으며 편집 과정을 한 눈에 실시간으로 확인할 수 있습니다.비주얼의 힘은 강력합니다. 화려하고 완벽한 이미지가 아니더라도 상대방에게 의도를 명확하게 전달할 수 있다면 커뮤니케이션에 드는 비용을 확실하게 줄일 수 있겠죠. 아웃풋의 퀄리티 또한 높아짐은 물론이고요. 오늘부터 쉽고 빠르게 비주얼로 커뮤니케이션 해보세요! 
조회수 963

화장실의 브랜딩: 업무분장의 함정

일을 할 때는 반드시 업무분장이란 것을 합니다. 각자 일정파트의 업무를 담당하고 그것에 책임을 진다는 얘기이지요. 매우 행복하고 아름다운 얘기입니다. 그 큰 업무를 어떻게 다 해. 그러니 너는 디자인, 너는 발표, 너는 자료조사, 나는 글을 쓰는 것이죠. 어디서 많이 본 그림입니다. 그렇죠. 조별과제.조별과제전 대학교를 중퇴하고 때려쳤으니, 1년 좀 넘게 경험했고 여러분들은 4년 내내 경험하셨으니 더욱 잘 아시리라 생각됩니다. 조별과제. 공산주의가 망한 이유를 몸으로 체득할 수 있는 또 하나의 교양과목이자, 모두의 할머니 할아버지가 여러 번 돌아가시는 예토전생의 술법이죠. 이 조별과제가 나이를 좀 먹고 장소를 직장으로 옮기게 되면 '업무분장'이라는 이름으로 재탄생하게 되는데, 자꾸 지난 4년간 겪었던 호구의 추억이 되살아나는 듯한 기시감은 떨쳐내기가 힘듭니다.  오늘은 이 업무분장에 대해 알아보도록 하겠습니다. 브랜딩업무는 혼자 할 수 있는 수준의 업무량이 아닙니다. 게다가 그래서도 안되는 것이구요. 브랜딩은 기획단계부터 디자인, 실행, 회계까지 다양한 팀과 업무영역을 아우르게 됩니다. 그도 그럴 것이 브랜딩은 전사적인 단위의 액션이고, 단기적인 프로모션 따위가 아니기 때문입니다. 정체성에 관련된 문제이니 모두가 각 영역에서 하나의 가지를 담당해야 합니다. 그러니 전체직원이 30명이라면 30명이 함께하는 조별과제라고 볼 수 있겠네요. 우리의 경험상 4,5명만 단톡방에 있어도 그 중 한 두명은 반드시 잠수를 탑니다. 더불어 다른 한 명은 도무지 속도를 못 따라오고, 그나마 괜찮은 아이는 자꾸 집안에 무슨 일이 생깁니다. 나를 제외한 모두의 집안에 큰 우환이 생기는 무시무시한 프로젝트죠. 일단 이러한 집안의 큰 변고가 어째서 생기는 지 알아보도록 합시다.업무분장은 왜 항상 폭망인가.1. 방관자이론은 어디에나 적용된다. 내가 아니어도 누군가는 할 겁니다. 이거 못해도 월급은 받습니다. 혼나면 됩니다. 우리 중에 마피아가 있는거야..날로 먹2. 업무역량이 제각각이다.내 기대만큼 일을 잘하는 사람은 세상에 그리 많지 않습니다. 그리고 내가 생각하는 수준의 프로일잘러들은 이미 개인적으로 다 사업을 하고 있거나, 재야에 숨어있거나, 일하느라 바빠서 찾기 힘듭니다.고수들은 산 속에 숨어있다. 채용공고는 비둘기로 날리자.3. 누가 무슨 일을 하는 지 몰라.분명 회의시간엔 서로 나눈 것 같긴 한데 누가 무슨 일을 어떻게 맡고 있는 지를 정확하게 모릅니다. 옆 사람의 업무진행이 어디까지 되었고, 거기에 맞춰 나는 어느 수준까지 해야하는 지 등, 분장의 목표는 집단지성과 다수의 분업을 통해 효율적이고 높은 수준의 결과물을 내는 데에 있지만, 대부분 목표와는 다르게 집단게으름과 한 사람이 만든 것보다도 못한 혼란스럽고 괴이한 혼종이 탄생하는 경우가 많습니다. 느와르 영화 찍는 것도 아니고 도대체 왜 다들 자기 일을 숨기는 걸까요?그래서 나오는 괴이한 혼종...4. 사실은 커뮤니케이션을 못한다.사실은 숨기는 게 아니라, 말을 못하는 겁니다. 어떻게 말해야 할 지도 모르고, 서로 보고하는 것도 눈치보입니다. 솔직히 수평적관계라고 톰, 제임스, 하비 등 영어이름을 붙였지만 몸에 밴 수직적 마인드는 어쩔 수 없습니다. 1년차와 5년차인 내 명함에 똑같이 manager 라고 되어있는데다가 1년차가 자꾸 자기와 동등한 수준의 프로젝트를 맡는다면? 5년 차인 선배의 입장에선 각자의 역량의 차이가 있으니 당연하다. 라고 받아들이기는 여간 어려운 일이 아닐 것입니다. 그런데 자꾸 밖으로는 쿨한 척 해야하고, 속으론 '내가 니 위야' 라는 모순이 발생하면 입은 닫히고 가면만 늘어갑니다. 자꾸 가벼운 얘기들만 오고가고 진지한 싸움과 논쟁을 피하게 됩니다. 화를 내면 진다라는 묘한 명제는 분노의 진실성을 역설하고 있습니다. 먼저 진실을 내비친 사람이 패배하는 것이다라는 체면과 격식의 아이러니죠.눈치만 보는게지.5. 업무분장의 기준이 엉망이야.업무는 케이크쪼개듯 정확히 몇 등분으로 쪼개지지 않습니다. 반드시 많은, 중요한, 급한 일들이 발생하고 누군가는 그것을 떠맡아야 합니다. 업무분장의 기준은 대부분의 회사에서 '잘 하는 사람' 에게 집중되고, '손 빠른 사람'에게 과중됩니다. 직급높은 사람에게 책임직을 맡기고, 일 없는 사람들에게 자잘한 업무들을 던집니다. 그냥 상식선에서 이루어지는 분장이죠. 분장과정에서 이 사람의 역량이나 성향, 관심사나 이전 경험, 인맥과 인사이트가 고려되지 않습니다. 조장님 말씀6. 하던 사람이 계속 하는일이란 것이 참으로 그렇습니다. 사람뽑기가 세상에서 가장 힘든 것이 사업이죠. 그래도 회사에 나를 제외한 내 오른팔과 같은 존재가 한 명 정도는 있기 마련입니다. 대표도 사람인지라 당연히 열 손가락 깨물면 더 아픈 것이 있기 마련입니다. 그런데 대부분 그 아픈 손가락이 굉장히 일을 잘하는 사원이고 믿음이 간단 말이죠? 그러면 배려해주고 쉬게 해주는 것이 아니라, 더욱 많은 일을 맡깁니다. 이것은 상대적인 불신때문입니다. 이 사람이 잘하니까 일을 줘야지! 라고 생각하기 보단 실상 다른 직원에게 주려고 하다보니...고려할 사항이 너무 많습니다. 검증되지도 않았고 애매한 거죠. 그런데 일은 매번 중요한 것들입니다. 그르치면 손해가 막심할 것 같으니 믿음직한 사람에게 고개를 다시 돌립니다. 아이러니하게도 그 믿음직한 사람은 일이 과중되고 지쳐가기 시작합니다. 곧 그 믿음은 실수와 사고로 이어지기 마련이죠.7. 이해를 못함일을 잘하고 못하고를 떠나서 이것은 업무이해도의 문제입니다. 전체그림을 볼 수 있느냐의 문제죠. 브랜딩에 대해 얘기할 때 1화에서 '모든 직원이 내용을 알고 있어야 한다' 라고 꼭 찝었던 것은 이 때문입니다. 업무이해도가 떨어지면 레시피만 보고만든 믹스호떡처럼 괴생명체가 탄생하거나 도무지 처치곤란한 혼종이 등장하게 됩니다. 기껏 일은 일대로 하고 손해는 손해대로 보는거죠.뭐라는 거지...?8. 편가르기, 편애, 미운털, 관계가 망치는 업무특수한 경우라고 믿고싶지만, 은근히 많더군요. 이해는 갑니다. 사람 모인 곳에 어찌 당파가 없을 수 있겠습니까. 라인도 있고, 야당도 있고 여당도 있고 제3당도 있고 많죠. 문제는 자꾸 이러한 인간적관계가 업무에 영향을 미친다는 것입니다.  예를 들어 우리 팀장이 좀 호구같다고 칩시다. 난 오히려 옆 팀의 이사겸 팀장님이 더 좋습니다. 그래서 우리 팀장이 준 일은 미뤄놓고 옆 팀에서 부탁한 일 먼저 처리하고 있습니다. 우리 팀장이 나를 혼냅니다. 난 빡쳤습니다. 그래서 옆에 이대리랑 옥상에서 담배를 피며 말했죠."아 진짜 존나 일도 못하면서 성깔은..아놔"이대리는 거듭니다. 왜냐면 나와 친하니까요"진짜 저 사람은 어떻게 일할려나 모르겠음.. 이번 것도 분명 말아먹을 기센데." 우린 한 당파가 되어 팀장을 깝니다. 그리고 그의 지시를 자꾸 누락하고 미루고 안하죠. 대강하거나. 취합해야 하는 입장에선 자꾸 공백이 생긴 결과물들이 올라옵니다. 하지만 일을 만들긴 만들어야 하니 또 야근을 해야하죠. 야근을 하고 혼자 취합을 하게 되면 실수가 생깁니다. 실수는 문제를 야기하고 문제는 손해로 이어지죠. 손해의 책임은 간부가 1차 타격을 입습니다. 이것도 어불성설입니다. 사실. 수평적 문화라면 책임도 동등하게 가져가야 하는 것이 이치상 맞습니다.  내 기여도만큼의 보상을 받는 만큼, 내 손실분에 대한 타격을 입는 것 또한 수평적 문화의 특징입니다. 특히 성과지표가 분명한 프로젝트 기반의 업무에선 더욱 그러하죠. 어쨋든 팀장은 멘붕이 되고 윗 선에게 심하게 깨집니다. 직원들은 그걸 또 팀장의 탓으로 돌립니다.  물론 이 과정에서 팀장이 잘했다는 얘긴 아닙니다. 애시당초 팀 관리에 문제가 있기도 했겠죠. 하지만 그것을 마냥 팀장이나 간부에게 당신의 리더쉽 탓입니다라고 전가시키기엔 직원들도 결국 마찬가지 수준이었습니다.  업무분장은 어떻게 할까.업무분장의 문제가 해결된다면 전세계 모든 대학교의 조별과제의 악몽이 해결되는 기적이 일어날 수 있을 것입니다. 또한 대부분의 기업의 효율성이 개선되고 생산성이 극대화되어 이 지긋지긋한 장기침체가 끝날 지도 모르겠습니다. 심지어 저도 팀원들과 일을 했을 때, 직원이 있었을 때, 협력업체와 일할 때 등등... 여러 케이스를 겪어봤지만 정확한 정답을 찾지 못했습니다. 다만 소기의 성과와 부작용들을 체험하면서 이건 이럴 때 좋고 이럴 때 좋지 않구나...라는 정도를 짐작할 따름입니다. 그러니 업무분장의 옳은 방법이라기 보단, 뻔하지 몇 가지 유의사항을 중심으로 적어보겠습니다.1. 적어도 분장회의는 심각하게.프로젝트플랜을 짜고, 각자 업무를 나누는 회의를 할 텐데. 전 개인적으로 이 회의를 대충하지 말자는 주의입니다. 조금 과장해서 하루 전체를 그 업무분장 회의에만 써도 괜찮습니다. 하루는 정말 고생하겠지만, 이 후의 확인, 취합, 업무상황 진행 등 모든 전반의 업무효율이 극단적으로 올라갑니다. 다들 그 시트의 데드라인을 맞추기위해 노력하고, 모두가 어떤 상황이 어떻게 돌아가는 지 이해하고 있는 상황이 됩니다. 단, 그 하루동안 해야 할 일이 있습니다. 직원들의 성향파악현재 업무 재정리각자 업무속도 계산프로젝트 기간 내 개인사, 사내일정 스케쥴링정/부 인원 지정보고체계 확립프로젝트 개괄 프레젠테이션상세 업무공유개인별 목표설정 및 평가지표 설정개인별 업무일정 짜기취합 후 프로젝트 플랜시트 제작완성된 플랜시트 피드백적어도 이 부분들은 순서대로 아주 치밀하게 결론을 내는 회의시간이었으면 합니다. '너 일 뭐 있지? 너가 이거 할래?' 이런 식의 분장이 되지 않았으면 좋겠습니다.2. 미달성의 책임은 분명히실무자를 위한 것이기도 합니다. 방관자의 심리의 주된 원인은 책임의 분산입니다. 다수가 존재하는 만큼 해당 이슈에 대한 책임이 분산되며 나에겐 피자 위에 뿌려진 올리브만큼의 책임감만이 스윽 주어지게 되는데 그 정도는 그냥 자기합리화나 집안일핑계로 거뜬히 쳐낼 수 있는 수준의 것들입니다. 이런 식으론 어떤 것도 이루어지지 않습니다. 위 회의에서 개인별 목표설정, 평가지표 설정은 정말 중요한 데 해당목표의 미달성시 어떤 핸디캡을 받고 어떤 책임을 질 것인지도 명확하게 지정하는 것이 좋더군요. '반드시 해내야 한다'는 적당한 압박감은 실패시의 합리화나 책임전가를 막고 외부요인으로 부터 그 핑계를 찾는 사태를 줄여줍니다. 아킨(R.M.Arkin)과 바움 가드너(A.H.Baumgaerdener)의 셀프핸드캐핑 실험에서 증명된 것과 같이 말이죠.3. 업무량은 내 처리수준의 +15%, 데드라인은 항상 -1일긍정적인 마인드와 열정, 화이팅, 돈독한 애사심은 훈훈한 분위기에는 좋을 지 몰라도 업무처리능력과는 별개의 문제입니다. 업무를 완성시키고 직원들을 고무시키고 싶다면 편하고 쉬운 일을 주는 것이 아닙니다. 항상 내가 해결할 수 있는 한계치의 적당량 이상의 어려운 과제, 적당히 급한 데드라인의 선을 지키는 것이 중요합니다. 일의 속도감과 성취감은 '일을 끝냈다!' 에서 오는 것이 아니라 '그 일을 해냈다!' 에서 오는 것이기 때문이죠. 에드워드 데시와 리차드 라이언의 자기결정이론중 인지평가이론(Cognitive Evaluation Theory)을 참조해보면 좋을 듯 합니다.4. 일관성!!1번에서 그렇게 심각하게 회의를 했으면, 중간에 그걸 엎지마세요. 회사 일이란 게 워낙 심각하고 급박하게 돌아가는 것이 많으니 변동과 이슈가 많은 것은 사실입니다. 하지만, 급하니까 너 그거 다 멈추고 이것부터 해! 라고 하는 것은 그냥 파국급행열차 티켓을 끊어 손잡이에 매달린 채 목적지까지 달려가렴. 이라는 소리와 같습니다. 어차피 업무분장회의에서 나왔던 그 일도 해야 하잖아요?? 중간에 일이 들어오면 차라리 경매를 붙여서 스스로 업무량을 조절할 수 있게 하던가, 아니면 다시 전사회의를 거쳐 양해를 구하고 전체플랜에 대한 수정을 전사공지합니다. 정보의 제한과 이해의 부족은 아주 사소한 실수와 그냥 던지는 작은 일조차도 '불신의 씨앗'으로 변하게 합니다. 적어도 우리가 그 날 열심히 만들었던 그 회의는 결코 변하지 않는다라는 일관성과 고집이 있어야 추후에 평가, 책임, 보상 때도 신뢰감이 있는 것입니다. 중간에 자꾸 말바뀌고, 일 틀어버리고, 맡기겠다고 했으면서 계속 간섭하고, 불필요한 과정을 자꾸 삽입해서 보고를 위한 보고를 만들어내면 추후에 그 모든 책임은 다 관리자 본인이 지셔야 합니다. 5. 모든 과정은 결과후에 복기한다.불만이 쌓이는 것은 무서운 일입니다. 그러나 그 불만을 그 때 그 때 터뜨리는 것도 업무에선 그리 좋은 방향은 아닙니다. 물론 순간순간 해결될 수 있는 사안이라면 당장 커피와 함께 멱살을 잡든 엎어치면 되겠지만 대부분의 업무방향은 시스템적인 수정을 필요로 합니다. 때문에 실시간으로 문제해결을 하다간 일이고 나발이고 흐르는 물 막느라 아무것도 못하는 상황이 됩니다. 일단 프로젝트를 끝내는 게 급선무입니다. 단, 일 하나가 끝나고 업무분장된 결과물이 등장하고 난 후 반드시 평가회의를 하시길 추천드려요. 그리고 그간의 모든 일들을 하나하나 정리하면서 복기하셔야 합니다. '아 모두 수고했구요, 참치먹읍시다아~' 이게 아니고... 처음에 하루종일 회의하듯 정말 냉철하고 싸울 듯한 회의가 되어야 해요. 단 회의의 결과는 뭔가 명확한 솔루션을 들고 끝나야겠죠. 안 그러면 감정싸움만 될테니까요.업무분장은 대표입장에서도, 실무자입장에서도 정말 어려운 일입니다. 서로가 서로에 대한 이해가 없이는 일을 할 수도 나눌 수도 합칠 수도 없으니까 말이죠. 자유롭게 서로의 일을 그냥 알아서 하면 얼마나 좋을까요? 각자 일을 찾아서 하는 유토피아같은 사무실 말입니다. 인간은 자유라는 환경이 주어졌을 때 함께 공포를 느낀다고 합니다. 아무런 책임이 없는 상태에선 본능이 가장 먼저 튀어나오고, 애사심이나 업무에 대한 객관적인 판단보단 내 자존심과 타인에 대한 경계심, 심리적관계가 더 먼저입니다. 회사에 들어와서 책상에 앉아 일을 하고 있다고 해서 뭔가 갑자기 일하는 로봇이 되는 것은 아니니까요. 업무분장은 이러한 사람들의 특성을 충분히 고려해야 합니다. 배려할 부분을 배려하고 억압할 부분은 강력하게 억압해야 합니다. 책임과 도전에 따른 보상과 벌도 있어야 합니다. 납득할 만한 이해와 협의도 거쳐야 하며 먼 발치에서 어떤 식으로 누가 무슨 일을 하는 지 확인도 종종 해야합니다. 그냥 '너가 화장실 청소 해.' 라며 던진다고 끝날 문제는 아니라는 것이죠.우리 사무실의 화장실청소는 어떻게 분장되어 있나요? 누가 하고 있나요? 어떻게 그것을 담당하게 되었나요. 만약 그 사람이 청소를 하지 않는다면 한 달 뒤 화장실의 모습은 어떻게 될까요. 회사와 비즈니스는 모두의 손을 거쳐 만들어집니다회사와 비즈니스는 모두의 손을 거쳐 만들어집니다. 사무실부터 작은 앱아이콘, 메뉴텍스트까지 누구 하나의 손이 닿지 않은 곳이 없죠. 모두가 사람이 만들어야 하는 것입니다. 과연 우리 회사엔 누구의 어떤 손길이 얼마나 닿아있는 지 한 번쯤 돌아보는 시간을 가져보는 것도 의미있을 것 같습니다. :)
조회수 723

[Buzzvil Design] Design System at Buzzvil

~ 8min. read 버즈빌이 완전히 새로운 ‘디자인 시스템’을 갖추고 있습니다. 와우~ 새로운 시스템을 만드는건 정말 시간이 많이 드는 일입니다. 그런데 과연 그럴만한 가치가 있는 일일까요? 버즈빌과 같은 스타트업이 굳이 디자인 시스템을 만들어야 하는 이유가 있을까요? 네. 당연히 그렇습니다. 그 이유에 대해서 이해하기 위해서는 버즈빌이 디자인적으로 어떤 문제를 가지고 있고 이러한 문제들을 디자인 시스템을 통해 어떻게 풀어내려고 했는지를 좀더 면밀히 살펴볼 필요가 있습니다. 버즈빌은 수많은 (지금도 그 수가 늘어나고 있는) 파트너들과 함께 서비스를 운영하고 있습니다. 그렇기 때문에 버즈빌은 스타트업치고는 매우 많고 복잡한 Product들을 만들어내야만 하고 계속해서 그것들을 관리하고 운영해 나가야 합니다. 이러한 버즈빌의 비즈니스적인 필요를 충족시키는 것이 디자인 시스템을 통해 해결 하려고 했던 첫번째이자 가장 중요한 문제였습니다.   디자인 팀은 그렇게 크지 않은데 비해 디자인업무는 계속해서 늘어나고 다양해집니다. 이러한 상황을 어떻게 극복할 수 있을까요?  버즈빌의 Product line을 살펴보면 다음과 같습니다. 먼저 자체적으로 2개의 앱을 운영하고 있고, 파트너들의 앱에 통합될 여러가지 SDK와 API들 그리고 곧 추가될 각 파트너별 White-label 앱까지… 각각의 앱과 연관된 마케팅 관련 작업이나 대쉬보드 작업을 제외한다고 해도 버즈빌이 다루고 있는 Product들은 너무나도 많습니다. 시스템이란 각각의 요소들을 함께 연결하는 것이며, 이러한 ‘요소들’이 다른 곳에서 재사용될 수 있게 만드는 것입니다. 그래서 버즈빌 디자인 팀에서는 디자인 asset들을 분리하여 재사용할 수 있는 component로 만드는 일들을 해왔습니다. 식은죽 먹기죠! 주의할 점은 technical dept의 문제가 디자인에도 똑같이 적용된다는 점입니다. 즉, 잘못된 점을 초기단계에 바로 잡는 것은 간단하지만 일이 진행되면 진행될 수록 단순한 오류를 수정하기도 어려워진다는 것이지요. 그래서 디자인 팀에서는 하나의 일을 오랜기간 고민하면서 진행함으로써 잘못 진행된 일 때문에 두 번 일해야 하는 불필요한 시간의 낭비를 방지하고 있습니다. 이것이 바로 디자인 시스템을 만들게된 출발점이자 시스템을 만들면서 해결하려고하는 가장 큰 문제입니다. 디자인 팀에서는 이 일을 8개월 전부터 해왔고 그 과정 가운데서 다양한 문제들에 대한 답을 시스템을 통해 찾았습니다. 버즈빌은 작은 회사지만 전세계를 향해 사업을 확장해 나가려는 큰 비전을 가지고 있습니다. 글로벌 기업이 되는 것은 분명히 멋진 일이지만 디자인의 관점에서 그것은 수많은 다른 문화적 배경을 가진 사람들, 다른 기술적, 미적 이해수준을 가진 사람들이 이해할 수 있는 디자인을 만들어야한다는 것을 의미합니다. 다행히도 이런 고민을 한 디자이너 들이 많이 있었고, 그들은 어떤 product에도 적용할 수 있는 아주 유연한 표준을 세웠습니다. 바로 그 기준들이 흔히 ‘시스템’ 이라고 불리는 것들입니다. 이런 상황에서 우리의 두번째 문제가 생겨납니다. ‘모든 사람이 이해할 수 있어야 한다’는 것입니다.  우리는 어떻게 다양한 스펙트럼의 사람들에게 적합한 세계적인 Product를 디자인 할 수 있을까요? 복잡한 문제들은 보통 간단한 방법으로 해결되는 경우가 많은데요.  모순적으로, 디자인을 조금이라도 해봤다면 어떤 것을 단순하게 만드는것이 말처럼 쉬운 일이 아니라는 것을 이해하실 수 있을 것입니다. 앱을 디자인 하는 경우도 크게 다르지 않습니다. 앱을 디자인 한다는 것은 시각적 의미(Visual semantic)를 앱안에 표현하는 일입니다. 다시말해서, 그 앱을 사용하는 사람들이 이해할 수 있는 일종의 메시지를 시각적요소를 통해 담아내는 것이라고 할 수 있는데요.  이렇게 담아내는 메시지의 복잡성을 줄임으로서 그 메시지를 더 많은 사람들이 이해 할 수 있게 만들 수 있습니다. 디자인에 있어서 미니멀리즘은 바로 이런 생각에서 부터 시작됩니다. 단순성이 핵심입니다. 단순함을 유지함으로써 우리는 비로소 많은 사람들이 이해할 수 있는 디자인을 할 수 있습니다. 그렇다면 이를 위해서 시스템적으로 접근하기 위해 무엇을 해야할까요? 바로 원칙들을 세우는 일입니다. 시스템적으로 일한다는 것은 원칙과 과정음 세움으로써 우리가 공유하는 가치들을 바탕으로 우리만의 고유한 일하는 방식을 만드는 것을 의미합니다. 버즈빌의 경우, ‘미니멀리즘’이라는 원칙은 작은 디자인팀을 운영하면서 동시에 버즈빌이 진출해있는 다양한 시장에 맞는 디자인을 하기 위한 핵심적인 원칙 중에 하나입니다. 디자인 팀에서는 Google Material에서 부터 시작해서 버즈빌만의 컴포넌트와 원칙들을 정해 나갔습니다. Google Material을 선택한데에는 몇 가지 이유가 있는데요. 첫 번째로 끊임없이 진화해 나가는 놀라운 디자인 언어이기 때문이고 두 번째로는 이미 안드로이드 OS와 많은 주요 앱들에서 사용되어 왔기 때문에 널리 퍼져있고 많은 유저들이 이에 굉장히 익숙하기 때문입니다.. 버즈빌은 자체적으로 허니스크린과 슬라이드조이를 운영하고 있습니다. 뿐만아니라 BuzzScreen, BuzzStore, BuzzOfferwall등을 포함한 Buzz Product라고 불리는 product line도 관리하고 있습니다. 이  product line들은 앞서 언급했듯이 white labelled app이나 SDK와 API를 통해서 파트너 앱에 통합되기 때문에 그 자체로는 브랜드가 없습니다. 반면에 각각의 파트너들은 당연히 그들의 서비스를 통해 표현하고자하는 고유의 브랜드를 가지고 있습니다. 여기서 세번째 문제가 나오는 데요. 바로 ‘다양한 브랜드의 필요를 충족시켜야 한다’는 점입니다.  어떻게 버즈빌의 다양한 서비스들에서 수많은 브랜드를 다룰 수 있을까요? 공통점이 많지 않은 다양한 브랜드를 다루는 것은 그 자체만으로 어려운 일입니다. 게다가 버즈빌의 경우는 파트너의 요구를 충족시키기 위해서 파트너의 브랜드와도 잘 통합 될 수 있어야 합니다. IT회사들 사이에서 디자인 시스템으로서 사용되고 있는 수많은 방법들이 있지만 그중에서  다니엘 에덴의 방법이 버즈빌의 상황과 가장 맞는다고 판단하였습니다. 에덴은 디자인 시스템을 조직하고 구조화하는 매우 흥미로운 방법을 가지고 있는데요. 에덴은 모든 디자인 asset을 2개의 레이어로 나누는 것부터 시작합니다. 바로 패턴과 표현입니다 :   패턴 레이어  패턴은 디자인 에셋들의 레이아웃입니다. 패턴은 각각의 컴포넌트들이 어떻게 배치되어야 하는지에 대한 정확한 기준을 제시 합니다. 패턴에서 다루는 컴포넌트들은 더 작은 컴포넌트들도 쪼개질 수 있으며 어떠한 메시지나 표현을 담고 있지 않습니다. 또한 서비스 안에서 혹은 서비스 밖에서도 재사용이 가능합니다. 훌륭한 시스템을 만들기 위해서는 겹치는 부분을을 제거하여 각각의 컴포넌트들을 최적의 컴포넌트로 만드는 과정이 필요합니다. 이러한 과정을 통해 점점 더 간결함을 추구 할 수 있습니다.   표현 레이어  표현레이어는 메시지를 다루는 부분이자 컴포넌트의 가장 기본이 되는 레이어입니다. 표현레이어는 고유의 브랜드와 색상이 담기는 곳이며 더 작은 컴포넌트들로 나누어지지 않습니다. 그래서 일반적으로 표현레이어의 구성요소들을 ‘Atoms’ 라고 부릅니다. 표현 레이어는 색상, 텍스트, 아이콘, 일러스트레이션, 사진과 비디오등으로 구성되고 각각 메시지를 담고 있으며 우리의 UI구조와 관계없이 전체적인 브랜드 가이드라인에 따라 결정됩니다. 이제 이 접근방식이 얼마나 확장가능한지 어느정도 감을 잡으실 수 있으실 겁니다. 각각의 레이어의 모든 컴포넌트들을 잘 정의해두었다면 Sketch와 같은 유용한 툴을 이용해서 손쉽게 두 레이어를 연결할 수 있습니다. 이에 대해서는 추후에 다른 포스트를 통해서 소개하도록 하겠습니다. 시스템의 약점은 얼마나 유연하게 적용될 수 있는 것인지에 있습니다. 아주 엄격한 구조와 너무 유연한 구조 사이에서 균형을 잡는건 쉽지 않은 일인데요. 이것을 위에서 살펴본 두 가지 레이어로 나누어보면 좀 더 쉽게 접근할 수 있게 됩니다. 먼저 블록을 만드는 것, 즉 컴포넌트를 배치하는 패턴 레이어에 대한 부분은 대부분 개발자에 의해서 구현 됩니다. 마찬가지로 표현 레이어는 브랜드의 이미지를 세팅하는 마케터에 의해서 다루어져야합니다. 디자이너 입장에서 개발자와 마케터에게 서로 다른 메시지를 통해 이야기 하는 것처럼 이 두 가지 측면은 다른 방법으로 소통 되어야 합니다. 뛰어난 디자인을 만들기 어려운 이유는 하나의 명확한 디자인 컨셉을 통해 다른 모든 stakeholder들을 연결해야 하기 때문입니다. 패턴레이어는 개발팀의 가이드라인을 잘 따라야 하고 표현레이어는 브랜드가 확실하게 전해지면서 컨텐트가 적절히 보여질 수 있도록 충분히 유연해야 합니다. 그리고 디자이너의 역할은 이 모든 것들의 중간에서 각각의 요소들을 연결하여 최종적으로 우리의 서비스를 사용하는 사람들이 우리가 전하고자 하는 모든 것을 인지할 수 있게 만드는 것입니다. 위에서 언급한 다니엘 에덴의 기사를 읽어봤다면 또 다른 레이어인 컨셉 레이어에 대해 알고 계실것입니다. 컨셉 레이어는 디자이너가 다른 모든 stakeholder들과 어떻게 소통할 것인지에 관한 것이고 우리의 디자인이 얼마나 좋은지를 평가하는 기준이 되는 레이어입니다. 이것은 ‘우리의 디자인의 필요를 충족 시키는 것’이라는 네번째이자 마지막 문제로 이어집니다:  우리는 어떻게 우리의 디자인 컨셉에 대해 소통하고 평가 해야할까요? 컨셉은 스토리를 의미합니다. 컨셉은 가능한 모든 수단들을 통해서 추상적인 생각을 전달하는 것입니다. 그리고 바로 이 부분에서 디자이너가 차이를 만들 수 있습니다. 이것은 사실 부분적으로는 우리가 시스템으로 일하는 이유이기도 합니다. 시스템을 통해 다른 레이어를 구성하는데 드는 시간을 절약하는 이유는  궁극적으로 컨셉 레이어 맞는 아이디어들을 시각화하고 구현하는데 충분한 시간을 쓰기 위해서 입니다. 다니엘 에덴의 말을 빌리자면, 표현 레이어가 우리의 알파벳이라면 패턴 레이어는 우리의 단어와 문장이다. 그리고 컨셉 레이어는 우리의 이야기입니다. 알파벳과 사전을 만드는 이유는 사람들에게 들려줄 이야기를 쓰기 위해서입니다. 이것이 가장 중요합니다. 디자인 적인 기반이 탄탄하지 못하면 메시지가 명확하게 전달 되지 못할 수도 있지만 디자인에 담겨있는 스토리가 탄탄하지 못하면 우리의 Product의 경험 전반에 부정적인 영향을 미치게 됩니다. 그렇다면 우리는 어떻게 좋은 디자인을 평가할 수 있을까요? 컨셉은 이론적이고 실재적인 연구에 기반한 가정들로 이루어져 있습니다. 따라서 디자인에 담으려고 하는 이야기가 우리가 원래 의도했던 답을 주면서 이용자들과 공감대를 형성하는지를 알아보기 위해서는 그것을 실제로 테스트 해보는 것이 가장 좋은 방법입니다.  버즈빌의 디자인 시스템은 각각의 컨셉별로 우리의 가정이 옳았는지를 판단할 수 있는 Metric들을 다룹니다. 전체적인 시스템과 마찬가지로 Metric은 불변하는 것이 아니라 테스트를 진행해 가면서 계속해서 수정되고 보완되는 것입니다. 만약 몇번의 루프 후에도 결과가 기대와 다르게 나온다면 컨셉 레이어가 잘못되었고 어딘가 수정해야할 부분이 필요하다는 것을 의미합니다.  수정하는 과정에서의 원칙은 핵심적인 컴포넌트들 자체가 문제를 일으킨다고 보는 것이 아니라 그것들을 어떻게 조합하는지가 문제를 일으킬 수 있다고 생각하는 것입니다.  다시말해 각각의 단어들은 올바르지만 문장 구성이 잘못되었고 이를 보완하기 위해서는 단어의 순서를 바꿔서 문법이 잘 지켜지게끔 해야하는 것과 같습니다. 만약에 그것 마저 소용이 없다면, 처음부터 전하려고 했던 이야기 자체가 정말 사람들의 기대를 충족시킬 수 있는지의 관점에서 다시 생각해볼 필요가 있습니다.  Conclusion 디자인 시스템은 디자인을 하는데 도움을 주는 좋은 방법입니다.  디자인 시스템을 통해서 모든 사람이 디자이너처럼 생각하고 일할 수 있기를 기대하는 것은 아니지만 이를 활용하여 정보를 잘 전달하고 모두가 디자인 리소스에 접근하게 함으로써 결과적으로 누구나 미리 만들어진 블럭을 활용하여 대략적인 컨셉을 만들어낼 수 있기를 기대합니다.  좋은 아이디어는 모두가 생각 해낼 수 있지만 디자이너들은 다른 팀원들에게는 없을 수도 있는 다양한 도구들을 통해 생각을 더 잘 표현 할 수 있습니다. 디자이너의 asset을 공유하는 것은 우리의 다른 팀원을 돕는 것뿐만아니라 아이디어에 대해서 의사소통하는 데에 도움을 주는 방법입니다. 그리고 디자인의 초기 컨셉과 원칙 그리고 디자인 문화를 공유하는 것은 모두가 디자이너가 일하는 방식을 이해하는 데 도움을 줍니다. 뿐만아니라 그렇게 공유된 컨셉,원칙,문화들은 전혀 쓸모없는 것이 아닙니다. 다른 누군가에게 새로운 생각을 할 수 있게 도울 수도 있기 때문입니다.
조회수 1599

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/#스포카 #디자인 #디자이너 #디자인팀 #인턴 #인턴생활 #인사이트 #꿀팁 #경험공유
조회수 601

이브(EVE)의 Concept from Nature

Instinctus Co., Ltd. 는 ‘누구나 안전하게 사랑할 권리가 있다’는 비전을 바탕으로 보다 더 건강하고 안전한 성문화를 만들어나가기 위해 노력하는 소셜벤쳐입니다. 자연에서 영감을 얻은 EVE의 로고는 나뭇잎의 잎맥을 연상시키는 그래픽을 통해 친환경성에 대한 EVE의 철학을 고스란히 담고 있습니다.What we believe누구나 안전하게 사랑할 수 있어야 한다고 믿습니다. 당연한 말일지도 모르지만, 현실은 그렇지 못할 때가 많습니다. 모르는 사이 유해물질에 노출되어온 소비자, 편견으로 콘돔을 구매하는 것조차 쉽지 않은 청소년, 타인의 왜곡된 시선 때문에 피임에 참여하기도 어려운 여성, 사랑할 권리마저 지탄 받는 성소수자까지도 – 숨기고 감추는 것은 오히려 우리를 더 해칠 뿐입니다. 청소년이든 성인이든, 여성이든 남성이든, 성소수자든 성다수자든, 장애인이든 비장애인이든, 누구나 안전하게 사랑할 권리가 있습니다.안전한 사랑은 비단 protected sex 뿐만이 아니라, 안심하고 쓸 수 있는 성분의 안전성을 의미하기도 합니다. 생식건강을 가장 먼저 생각하기에, 자연을 닮은 제품을 지향하기에, 소비자의 권리와 기업의 양심을 잃지 않기에 – 그래서 EVE는 성인용품이 아닌 섹슈얼 헬스케어(Sexual Healthcare) 브랜드 입니다.
조회수 2039

왜 육각형인가요?

작년 중순 즈음, 데일리호텔의 로고가 새롭게 리뉴얼되었습니다. 기존에 '데일리호텔'이라는 명칭에 맞게 손바닥 위에 호텔의 아이콘이 올라가 있는 심벌 형태였는데요. 점차 사업의 방향이 더 넓게 확장되고, 데일리가 가져가고자 하는 기업 이념을 보여주고자 기존 형태에서 많이 변형된 현재의 로고가 탄생했습니다.로고 탄생 이후에 계속 듣던 질문. '왜 육각형인가요?'지금부터 그 이유와 심벌에 담긴 데일리만의 철학을 소개합니다.데일리가 가고자 하는 길로고를 제작하기 이전에 우리는 데일리가 걸어온 길이 어디였으며, 나아가고자 하는 방향이 어디인지 확립해야 했습니다. 많은 데이터와 고객 경험 사례들을 분석해본 결과 결국 데일리는 '특별함'에 초첨이 맞추어져 있다는 걸 알게 되었어요.또 위와 같이 정의된 키워드들을 가지고 브랜드 이미지를 시각적으로 표현하기 위해 아래와 같이 디자인 키워드와 표현 원칙을 정의하였습니다.'문'을 통해 '특별함'으로 다가가다데일리의 철학 '언제든 특별해질 수 있다'.그렇다면 그 '언제든'의 정의 또한 필요했습니다. 우리가 언제든 일상 속에서 만나는 동일한 패턴은 무엇일까를 생각하기 시작했어요.추출한 답은 '문'이었습니다.아침에 일어나 방문을 열고 거실에 나와 세면을 하기 위해 화장실 문을 통해 화장실에 들어가고, 현관문을 열고 회사로 향하는 패턴. 우리는 이와 같이 항상 동일한 문을 드나들고 있었습니다. 해서 데일리는 '언제든'을 '문(Door)'으로 정의하여 그 형태를 형상화시켜 쉐입을 제작하였습니다.'일상적인 문'을 뜻하는 쉐입그 반대에는, 일상적인 패턴에서 벗어나서 어디론가 떠나고 싶고, 멋있는 식사를 즐기고 싶어 하는(곧, 데일리가 추구하는) '특별함'을 나타내는 '문(Door)'의 쉐입을 제작하였어요.데일리가 지향하는 '호텔/레스토랑의 문'을 뜻하는 쉐입또한, 우리가 접하는 일상적인 문과, 특별함을 상징하는 호텔/레스토랑 문의 높이를 비교해보면 라이프스타일을 즐기기에 시간적, 금전적 부담을 느끼고 있기 때문에 쉽게 마을을 열지 못합니다. 여기서 데일리는 고객이 느끼는 부담적 마음의 문 높이를 채워줌으로써 라이프스타일에 한층 더 가까워질 수 있도록 조력자 역할을 해줍니다. 곧, 데일리의 미션인 '더 나은 하루, 더 나은 삶을 위해'를 이루기 위한 길이기도 하죠.이로써 견고해진 데일리의 심볼또 이렇게 제작된 심벌은 Connect, Precious, Perfect를 뜻하기도 합니다. 무슨 뜻이냐구요?하나_Connect. 잘 보시면 심벌이 모든 선으로 서로 이어져 있음을 볼 수 있습니다. 이는 고객들에게 특별한 경험을 연결 지어준다는 뜻을 지니고 있습니다.둘_Precious. 문을 형상화하여 심벌을 제작하였지만 완성된 형태를 보면 마치 보석과도 같습니다. 이는 사람들의 하루, 삶에 대해 소중히 여긴다는 뜻을 지니고 있습니다.셋_Perfect. 데일리의 심벌은 안정적인 구조를 지닐 수 있도록 견고한 선으로 균형 있게 제작되었습니다. 이런 심벌에서부터 나오는 완벽함은 탐색부터 예약, 그리고 경험까지 플랫폼으로써 추구하는 완벽함을 뜻합니다.마치며.이제 궁금증이 조금 풀리셨나요?우리는 하루에도 수십 번 많은 CI(Corporate Identity)들과 마주하게 됩니다. 어찌 보면 흔한 것일 수 있지만, 그 안에는 기업의 이념과 철학, 그 외의 많은 것들이 담겨있습니다. 그리고 그 CI가 품고 있는 뜻을 이루고자 지금도 이렇게 열심히 달리고 있는 거고요. 이제, 주위를 둘러보시면 많은 CI들이 각기 다른 미션/비전으로 아우성치고 있을 거예요.(ㅎㅎ) 그럼 다음에 더 재미있는 글로 찾아뵙겠습니다!작성자 : Creative팀 Blair Ahn#데일리 #디자인 #디자이너 #디자인팀 #로고 #로고디자인 #브랜드 #브랜딩 #인사이트 #후기 #일지
조회수 6076

초보 디자이너를 위한 안드로이드 DP(Dip), PX, DPI의 개념

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

디자인 콘셉트는 이렇게 잡아요!

생각보다 훨씬 많은 분들이 '톤앤매너' 라는 말을 쓰고 있더라구요. 컨셉이란 말도 왕창 쓰고 있구요. 그런데 도대체 그게 정확히 뭔지 아는 분은 굉장히 드물었어요. 그래서 오늘은 이걸 좀 알아보려구 해욤. 톤을 살펴볼까요. 파스텔톤, 비비드톤, 팬톤(?), 화이트톤 등등... 이런톤 저런톤이 많아요. 톤은 색과 밝기를 의미해요. 어려운 말로 색채와 명암이죠. 어떤 색을 쓰는가.색이 진한가 연한가색이 밝은가 어두운가이걸 결정하는게 톤이예요. 매너를 살펴볼까요. 매너는 화풍이나 스타일을 의미해요. 몽유도원도를 그린 안견씨는 이곽파화풍의 영향을 받았어요. 침식된 흙산을 좋아하고, 선이 끊김없이 이어지는 느낌, 산의 아랫부분이 밝은 형태의 그림이죠. 고흐는 밀레와 램브란트 스타일의 밝디밝은 인상주의 화풍을 어둡게 변형시켰어요. 또한 곡선을 강하게 그리고 신기방기한 원근을 사용하죠. 이렇듯 사람이 만들어내는 모든 것에는 일정한 흐름이란게 있어요. 100사람이 만들면 100개의 서로 다른 작품이 나오겠지만 유심히 보면 4,5정도의 카테고리화 시킬 수 있거든요. 인간의 창의력은 완전히 새로운 걸 만들어내는 것이 아니라, A와 B를 섞어 새로운 C를 만드는 것과 같습니당. 디자인도 마찬가지예요. 세리프폰트를 활용한 정적이고 감성적인 느낌을 만들수도 있고, 여백을 늘리고 강직한 폰트로 고급스러움을 나타낼 수도 있어요. 아주 가는 획을 이용해서 날카롭거나 전문적인 느낌을 줄 수도 있고, 두껍고 둥근 선&폰트를 활용하여 통통한 아기돼지 마냥 귀여운느낌을 낼 수도 있어요.사람들은 어떤 대상에 부여하고 있는 메타포(=은유)가 있기때문에 가능한 일이지요.  마동석씨가 나오면 아 팔뚝이 있겠구나...드웨인 존슨이 나오면 가족을 구하겠구나...라는 고유한 메타포 말이예요. 화풍은 이렇듯 몇 개의 요소나 기법으로 메시지나 성격을 만들어내는 것을 의미해요. 고유한 아이덴티티는 물론이구요.컨셉을 알아볼께요.컨셉의 정의는 수도 없지만 어쨌든 중요한 건 '관통' 이예요. 톤과 매너가 디자인, 말투, 태도 등에 대한 얘기였다면 컨셉은 그 각각의 요소를 하나로 묶는 실과 같죠. 왜 그런 톤과 매너를 만드는가? 에 대한 근거이기도 하구요. 그러니 컨셉이 먼저 잡히고 톤앤매너가 나오는 게 순서상 맞아요.실상은 로고와 색깔을 잡고 나중에 의미부여를 하는 경우가 많지만요. 하지만 이게 틀렸다고만 볼 순 없을 것 같아요. 이론상으로야 컨셉 다음이 톤앤매너이지만, 현실적으론 컨셉은 그냥 '생각' 일 뿐이예요. 눈에 보이지 않으면 그 생각의 헛점이나 오류를 파악할 수 없죠. 또 시장성도!그래서 실상 눈으로 보이는 톤앤매너를 보고서야 컨셉 재정리가 들어가는 경우도 상당히 많답니다. 무조건 그건 이빨까는거고 그냥 의미부여일 뿐이야! 라고 말할 순 없죠. 다만 눈으로 나온 톤앤매너가 뭔가 조금 이상하다는 쌔한 느낌이 있는데도 무시하고 그냥 밀어붙여선 안되요.쌔하면 다시 해야해요.안쌔해도 다시 봐야해요. 컨셉 잡는 방법이 뭐 정해져있겠습니까. 사실 의식의 흐름대로 아무말을 하다보면 잡히는 경우도 있고, 브레인스토밍을 할 때도 있고 마인드맵을 할 때도 있고, 뒤통수에 총구를 겨눌수도 있고, 게임을 할 수도, 제비뽑기로 정할 수도 있는 것이죠.여기선 그냥 제가 컨셉 잡는 법을 말해보려고 해요.1. 데카르트는 천재예요.천장에 붙은 파리였던가 방충망에 붙은 파리였던가... 데카르트씨는 파리를 보고 사분면의 개념을 생각했다고 해요. 덕분에 우린 함수를 6년내내 배워야했고 대학에서도 배우고 지금도 쓰고 있고 비즈니스모델 잡을 때도 쓰고 심심하면 쓰고 있죠. 사분면이란 건 참으로 놀라운 도구예요.컨셉도 사분면을 활용하면 짱편해져요.x와 y축의 가로세로 두 선으로 이루어진 4개의 공간으로 이루어져있어요. x의 한 점과 y의 한 점이 만나 이루는 특정한 공간이 우리의 영역인 셈이죠.x는 가로선이예요. 0을 기준으로 +방향은 미래적의미를 담고있어요. 고객에게 줄 수 있는 가치가 미래적인 경우. P2P대출, 다이어트앱, 투자서비스, 캐시슬라이드, 영어공부 등등... 뭔가가 누적되고 쌓여야 그 가치가 온전해지는 경우죠.x축의 -방향은 과거의 의미를 담고 있어요. 누적과 저장을 통해 가치가 형성되는 경우죠. 커리어정리 서비스, 일기, 사진큐레이션, 데이터기반 무슨 서비스, 추억팔이 게임, 리뷰서비스 등등..이 이런 종류예요. 과거를 돌아보게 만들고, 과거로부터 누적된 것들이 현재에 도움을 주는 경우예요. y축의 +방향은 '있으면 더 좋은 거!' 예요. 현재도 충분히 괜찮은데 있으면 더더더더 좋은 어떤 것들. 대부분의 비즈니스모델이 이쪽에 속하는 것 같아요. 당신의 서비스가 생기기 전에도 사람들은 잘 지냈거든요. 하지만 생겨서 더 편리해진 경우죠.y축의 -방향은 '현재의 문제를 해결하는 것' 이예요. 상담서비스, 치유, 명상, 저소득층을 위한 복지정보 서비스 라던가 사회적기업이 추구하는 사회문제 해결에 관련한 서비스 일체를 의미해요. 현재 고객들의 상황이 0보다 아래여서 그걸 정상화시키기 위해 만든 것들이죠.y축의 +,- 구분이 좀 애매하긴 해요. 기준은 '소비자가 불편을 인지하고 있었는가?'  '그 불편이 생활이나 건강 전반에 해로운 영향을 끼치고 있었는가?'로 구분하는 편이예요. YES면 마이너스영역, NO면 플러스 영역이예요.2. 운동/방향성을 파악해볼 차례예요.사업은 사업자와 소비자가 있어야 가능해요. 누가 누군가에게 무언갈 주고받는 행위죠. 때문에 방향성과 운동성이라는게 있어요. 방향성은 이런거죠.짐캐리(부산역에 있는 짐보관서비스 스타트업) 처럼 소비자에게서 무언갈 받아서 저장하는 형태일수도 있고, 대부분의 커머스처럼 상품이나 서비스를 직접 제공하는 방향일수도 있어요. 가치를 달성하기 위해 누가 누구에게 다가가야 하는가? 가 이슈가 되요.운동성은 이런거예요.가치를 달성하기 위해 땀과 노력과 오랜시간 지속성이 필요한 것인가? 아니면 그냥 가만히 놔두기만 하면 되는건가? 라는 거죠. 이를테면 영어공부 앱은 운동성이 겁나 높은 서비스예요. 지속적으로 꾸준히 말하고 듣고 누르고 해야 소비자가 제 가치를 받을 수 있죠.하지만 물품보관서비스는 한번의 맡김만 있으면 돼요. 나머지는 사업자의 몫이죠. 때문에 운동성은 소비자, 사업자 각각의 양으로 판단할 수 있어요.3. 관계를 파악해요.우리와 소비자는 어떤 관계인지 파악해봐요. 아빠? 엄마? 형? 동생? 친구? 지인? 전문가? 해결사? 운동장? 땅과 잔디? 햇빛과 식물? 엔진과 엔진오일? 악어와 악어새? 등등... 특정한 관계가 잡혀야 그 관계 특유의 말투가 잡히고 성격이 부여되거든요.4. 문장으로 만들어요.애프터모멘트는 지금까지 당신이 쌓아놓은 생각과 어지러운 것들을 챡챡 정리해요. 하지만 제가 없다고 해서 사업체가 망하진 않아요. 잘 살아왔어요. 저는 더 큰 도움을 드리는 거예요. 그러니 저는 2사분면에 위치하고 있어요.방향성은 '제가 당신께 가는' 방향이예요. 제가 제안하고 직접 제작하고 제공하는 형태죠. 운동성은 둘 다 큰 편이예요. 소비자도 이것저것 많은 고민을 해야하죠. 물론 제가 좀 더 크긴 하겠지만요.저는 치우는 사람이예요....(!!!?) 집요하게 옆에서 잔소리를 하기도 하고 샤라랑해서 뭔갈 바꿔놓거나 치우기도 해요. 엄마가 늘 그러셨어요. 어지르는 사람 따로있고 치우는 사람 따로있다고. 네 저는 그 후자를 담당하고 있어요. 그래서 클라이언트님에게 발 좀 들어봐, 저기 비켜보라고 하기도 하고 등짝스매싱이나 이노무자식! 이노무자식!!.. 을 하기도....(그러진 않아요.) 5. 단어를 뽑아요.정리, 활발함, 다가감, 치우기, 보여주기, 드러내기, 따뜻함, 대화, 인정, 격려, 도전, 새로운 시도 등등... 치우는 사람이 지닌 여러개의 단어들이 있어요. 이 중 가장 맘에 드는 것을 몇 개 추려서 정리해요.6. 색을 정해요.제 로고색인 자색고구마 오사쯔 색깔은 노란색과 보라색으로 이루어져 있어요. 노란색이 뜻하는건 치유고 보라색은 매력이예요. 널브러진 걸 잘 정리해서 매력적으로 만들어요! 라는 뜻이예요. 물론 아무도 몰라요. 저만 알고있죠. 그럼 된 거 아닐까요. 사실 이런 과정은 누가 알아주길 바라서가 아니고 내 생각정리를 위해 필요한 과정이니까요.7. 매너를 정해요.초기엔 이렇게 가려고 했었죠.원랜 되게 가늘고 날카로운 로고로 가려고 했었어요. 그런데 그런 식이 되다보니 이제 사람들이 저랑 안어울린다는 말을 많이 하더라구요. 사실 저도 그렇게 전문성있게 막 정장입고 차키를 책상 옆에 두는 그런 스타일이 아닌지라 좀 어색하기도 했구요. 게다가 브런치엔 이렇게 아무말을 지껄이는데 막상 만나면 세상 진지해봐요. 물론 매력터지기도 하겠지만 한편으론 이질감이 장난 아닐거예요. 그래서 바꾸었어요.그래서 그냥 둥글고 두껍두껍하게 제 성격대로 모양새를 살렸어요. 전체적인 패턴도 '물들다'의 의미를 지닌 곡선과 잉크방울 모양이 주를 이루고 있어요.너무 스압이 길어지니 줄이도록 할께요. 줄이기 전에 3가지 중요한 사항을 말씀드리고 떠나도록 하겠습니다. ㅎㅎㅎ 이번이 마지막 위클리라서 많은 걸 얘기하고 싶었나봐요. 1. 문장이 구성되야 디자인이 나오는 거예요.디자인의 시작은 논리예요. 사고의 과정은 명쾌하고 정확해야 해요. 군더더기나 순환오류 없이 깔끔하게 정리된 문장이 있어야 제대로 된 디자인이 나오는 법이예요. 2. 디자인이 나와야 문장이 다시 보여요.그러나 어느 누구도 한 번에 완벽한 문장을 만들 수 없어요. 디자인이 나와서 눈으로 직접봐야 '아....이게 글러먹은 거였구나...' 라는 몸소 느낄 수 있어요. 그러니 완벽한 걸 만들어서 한번에 끝내려고 하지말고 계속 반복하고 수정하면서 다듬어 나가세요.3. 문장이든 디자인이든 혼자만 박수치지말고 공유하세요.이 과정은 강압적이면 안되요. 디자이너와 기획자, 마케터, 인턴까지 모두가 알고 있어야 하고 서로의 의견을 낼 수 있어야 해요. 물론 내가 꽂힌 디자인에 누가 반박하는게 유쾌하진 않지만 그럴거면 1인사업체를 하셔야겠죠?그동안 기이이이인 글을 읽어주셔서 매우 감사했습니다 :) 이번 위클리는 '디자이너 사용설명서' 라는 제 첫 책이 나와서 그 내용을 바탕으로 적은 것이긴 하지만, 책에 나온 내용이 똑같이 들어가있진 않아요. 브런치에선 브런치의 말투와 내용이 있으니까요. 책 못지 않게 이번 위클리도 작은 도움이 되었다면 오히려 제가 감사하고 뿌듯할 일입니다.애정해주셔서 감사하고, 못다한 이야기와 나머지 주저리는 '삶분의일' 매거진에서 또 계에에속 하도록 하겠습니다!!!~~ 빠이.안녕히들.
조회수 755

독자의 시선을 예상하라 (2/2)

Overview“언덕 위에 나무가 있다.” 이 문장을 보고 어떤 풍경을 상상했나요? 독자는 간단한 문장 하나조차도 저마다 다른 상상력을 발휘합니다. 나무에 잎은 있는지 없는지, 언덕은 낮은지 높은지, 날씨는 맑은지 흐린지 등 독자가 겪은 개인적 경험이나 생각에 따라 다르게 생각하는 것이죠.1) 하지만 위의 문장을 본 사람이라면 최소한 ‘언덕’과 ‘나무’의 형태만큼은 떠올렸을 겁니다. ‘언덕’과 ‘나무’는 크리에이터가 꼭 전해야 하는 문장의 핵심 단어와 같습니다. 두 단어가 독자에게 온전히 전해지면 언덕 위에 나무가 있는 모습(메시지)이 떠올려지니까요. 신기합니다. 문장만으로 크리에이터의 머릿속에 있는 걸 그대로 독자의 머릿속에 옮길 수 있다니. 마치 ‘언덕’과 ‘나무’ 두 단어가 날개를 달고 날아다니는 것 같은 기분입니다.2) 하이퍼텍스트(Hypertext)의 가장 큰 특징이기도 하죠.하이퍼텍스트의 원리역삼동 사무실 구석에 앉아있는 내가 한 번도 만나지 않은 당신에게 언덕과 나무를 떠올리게 했던 것처럼 하이퍼 텍스트는 시공간의 제약을 완전히 벗어납니다. 이 글도 브랜디 랩스에 올린 순간부터 세계 여기저기를 날아다닐 수 있습니다. 내가 자고 있는 시간에도 남들은 검색만 하면 읽을 수 있으니까요. 어떻게 이런 일이 가능할까요?하이퍼텍스트의 원리우선 하이퍼텍스트의 원리를 살펴봅시다. 책을 예로 들면, 겉표지(starting point)에서부터 독서를 시작하는 건 모두 같지만 독자들은 각각 다른 방식으로 책의 내용을 상상하며 이어 나갑니다.(link) 만약 독자 A와 B가 “언덕 위에 나무가 있다”는 문장을 보고 같은 풍경을 상상했다면 그 둘은 서로의 상상을 공유하고 있는 셈입니다.(node-shared experience) 반면에 100명의 독자가 잔디 깔린 언덕을 상상해도 누군가는 혼자서 바위 언덕을 상상할 수도 있습니다. 그래도 괜찮습니다. 그것은 ’언덕’이라는 하나의 단어에서 떠올릴 수 있는 수많은 풍경 중 하나일 뿐이니까요.(node-unshared experience) 점들이 촘촘하게 모여 하나의 선을 이루는 것처럼 이런 상상들이 모여 크리에이터의 이야기가 독자에게 전달됩니다.3) 이제는 디지털로 모두가 연결되었습니다. 그만큼 상상의 규모도 더욱 커졌습니다.4) 크리에이터와 독자가 동시에 같은 콘텐츠를 볼 수 있기 때문에 곳곳에서 새로운 상상이 동시다발적으로 추가됩니다. 독자는 읽는 순서를 자유롭게 선택할 수 있습니다. 책의 기본적인 순서는 페이지로 정해지지만 하이퍼텍스트는 독자가 읽는 도중 건너뛰거나, 다른 글로 이동하거나, 읽는 도중 ‘뒤로 가기’를 클릭할 수도 있습니다. 컴퓨터와 인터넷의 특성 때문에 독자의 시선이 훨씬 자유로워진 것입니다.5) 메시지를 읽게 하는 방법독자가 자유롭게 상상할 수 있다고 해서 크리에이터의 역할에 위기가 찾아온 건 아닙니다. 앞서 본 언덕 위의 나무처럼 독자가 뭘 떠올리든 상상할 메시지(starting point)를 제공하는 건 여전히 크리에이터의 몫이기 때문입니다.5) 크리에이터라면 누구나 콘텐츠를 통해 독자에게 하고 싶은 말이 있을 테고, 그것이 잘 전해져야만 콘텐츠의 가치가 더욱 높아질 겁니다. 독자의 상상력을 자극하면서도, 메시지를 제대로 전하는 방법! 어떤 것이 있을까요.1.맥락 독자가 무언가를 떠올렸다는 건 상상이 되게끔 만들었다는 의미입니다. 예시를 하나 살펴보겠습니다. 한림대학교 강동성심병원은 병원 리모델링 공사를 하면서 ‘병원이 다시 태어났다’는 메시지를 전달하고 싶었습니다. 그래서 병원에서는 의사를 모델로 세워 확 바뀐 모습을 표현했습니다. 맥락의 예 / 한림대학교 강동성심병원 제공위의 두 포스터에 등장한 의사는 동일인물입니다. 하지만 이미지가 확 바뀌어 완전히 다른 사람처럼 보입니다. 청정무균시스템을 도입하고, 첨단 하이브리드 수술실을 오픈했다는 메시지를 전달하려고 의사의 확 바뀐 이미지를 대신 보여준 것입니다. 포스터에서는 ‘확 바뀌었다!’고 대놓고 말하진 않았지만, 사람들은 바뀐 병원의 모습을 상상할 수 있을 겁니다. 여기서 중요한 것은 두 개의 포스터를 비교하며 이미지 속에 담긴 메시지를 함께 읽어냈다는 점입니다. 아마 오른쪽의 포스터만 봤다면 ‘강동성심병원 거듭나다’라는 카피가 잘 와닿지 않았을 겁니다. 병원과 의사의 모습이 서로 어떤 상관관계가 있는지 알 수 없기 때문입니다. 그러나 비교 대상 덕분에 의사의 확 바뀐 이미지를 한눈에 볼 수 있었고, 메시지 또한 이해하는 데 도움이 됐습니다. ‘바뀌었다’는 말에 날개가 달려 하이퍼텍스트로 독자에게 날아간 순간이기도 합니다. 맥락은 사전적 의미로 ‘사물 따위가 서로 이어져 있는 관계나 계통’을 말합니다. 콘텐츠 맥락도 이와 비슷합니다. 위의 두 포스터를 통해 ‘동일인물이지만 달라 보인다’는 정보를 얻을 수 있었으니까요. 그 정보는 두 대상을 서로 비교하면서 자연스럽게 생각해낸 결과입니다. 콘텐츠의 맥락은 굳이 설명하지 않아도 상관관계를 읽어낼 수 있게 도와주는 정보인 셈입니다. 2.구체적 워딩 구체적 워딩은 주로 광고에서 사용하는 기법입니다. 누구나 알고 있는 쉬운 단어를 이용해 사람들의 머릿속에 무언가를 떠올리게 만드는 것이죠. ‘계란으로 바위치기’라는 말을 들었을 때 사람들은 자연스럽게 도저히 승산이 없는 경우를 떠올립니다. 구체적 워딩이기 때문입니다. 구체적 워딩의 예 / 엿츠 제공이 제품은 엿을 식품이 아닌 ‘욕’의 관점에서 접근해 다양한 상황과 연결하고 있습니다. 맛이나 신선도 등 제품 그 자체에 대해 설명하진 않았지만 훨씬 좋은 홍보 효과를 거뒀습니다. 덕분에 이 제품을 보는 사람은 엿과 야근의 맥락을 통해 짜증나는 상황을 떠올릴 수 있었죠. 특히 이 카피는 많은 간식 중 왜 엿을 먹어야 하는지를 정확히 짚어냈습니다. 그러므로 야근에 시달리는 회사원이 가판대의 많은 간식 중 엿을 집는 건 당연한 일입니다. Conclusion꼭 화려한 영상, 잘 찍은 사진이 아니어도 됩니다. 글만으로도 독자가 상상할 수 있게 도울 수 있으니까요. 상상은 머릿속에 그림을 그려줄 뿐 아니라 전하고자 하는 메시지까지 읽게 만듭니다. 엿 봉지처럼 한 단어가 다른 뜻도 포함하고 있다면 중의적 표현을 해보는 것도 좋은 방법입니다. (물론 판단은 독자의 몫입니다.) 콘텐츠에 중요한 정보 없이 쓸데없는 말만 가득하다면, 이제부터는 긴 설명이 필요 없도록 독자가 읽어야 할 부분을 정확하게 짚어주세요. 크리에이터가 제공한 단어 하나, 문장 한 줄이 독자에겐 큰 선물이 될 겁니다. 1) 콘텐츠는 크리에이터의 단독 작업만으로는 모든 것을 충족할 수 없다. 대신에 독자와의 상호작용으로 콘텐츠를 완성할 수 있다. 즉, 나무의 상태나 언덕의 모습을 상상하는 건 독자의 몫이며 이는 독자에게 유한 또는 무한의 자유를 주는 것과 같다. 2) 크리에이터가 온라인에 콘텐츠를 업로드하는 순간, 콘텐츠는 독자와 함께 즐기는 공유의 속성을 지닌다. 3) 크리에이터가 구체적으로 표현할수록 shared node는 더욱 많아진다. 4) 좋은 콘텐츠가 뭐냐고 물으신다면 5) 하이퍼텍스트를 독자가 읽는 방법은 검색, 훑어보기, 하이퍼링크, 건너뛰기, 조각내기 등이 있다. 6) 이와 관련해 이화여대 김애령 교수는 다음과 같이 언급했다. “하이퍼텍스트의 이면에는 그것을 구성하는 코딩(coding)에 있다. 하이퍼텍스트가 독자에게 무한한 경로의 선택권을 제공할 수 있으려면 그 텍스트를 설계하는 작가는 모든 가닥들과 결과들의 데이터를 미리 만들어 두어야 한다. 따라서 독자들의 선택권은 ‘가상적’이다.” (출처는 참고문헌 참조)참고문헌 조은하(2007), 디지털 스토리텔링, 한국근대문학연구, 제15호, 261-262심은진∙윤학로(2007), 하이퍼텍스트의 새로운 글쓰기: 프랑스 디지털 문화이론을 중심으로, 외국문학연구, 제26호, 33-48김애령(2017), 디지털 매체 시대의 읽기와 해석학의 과제, 현대유럽철학연구 제45집, 185장근우, 「콘텐츠의 정석」, 예문아카이브(2017)글장근우 대리 | People&Relations Managerjanggw@brandi.co.kr브랜디, 오직 예쁜 옷만#브랜디 #마케팅문화 #마케팅팀 #업무환경 #인사이트 #경험공유 #콘텐츠
조회수 1852

제니퍼 개발 이야기(UI/UX)_ 제니퍼 UI/UX의 특징

사용자가 목표로 하는 경험이나 서비스가 빠르게 구현되는 환경에서 B2B 제품의 UI는 대부분의 제품이 어렵고 복잡하여 전문가가 아니면 배우기 힘든 단점이 있었다. 제니퍼의 UX는 중요하고 자주 사용하는 기능의 사용성을 높이는데 중요도를 높이 둔다. 그렇다고 자주 사용하지 않는 기능의 UX를 중요시하지 않는다는 것이 아니다. 많은 사용자(비전문가 포함)가 사용하는 기능의 접근성을 높이고, 쉽게 사용할 수 있도록 하는 것이다. 반면, 전문가가 분석을 위해서 사용하는 복잡한 기능은 정확하게 기능을 사용할 수 있도록 유도하고, 데이터를 가장 잘 표시하는데 집중한다. 제니퍼 5는 제작 시기부터 다른 경쟁사가 하지 않은 도전을 시작하였다. 타사 제품들이 기능적인 부분에 포커스를 맞추고 개발하였다면, 제니퍼는 사용자 경험적으로 더 뛰어나게 만들기 위해 기존의 제니퍼가 가지고 있던 모든 요소를 하나하나 다시 고민하고 새롭게 재 창조하였다. 그 결과 심미적이면서도 직관적으로 사용자들이 겪는 불편함과 어려움을 최소화하였다. 많이 사용하고 중요한 기능일수록 쉬운 UX/UI현재 기업의 웹 서비스는 기업의 수익을 높이는 중요한 요소로 자리잡았다. 개발자나 웹 관리자뿐만 아니라, C 레벨 혹은 마케터까지 자신이 관련된 웹 서비스 방문자가 얼마나 되며 서비스 이용은 순조로운지 등에 관심 갖게 됐다. 그러나 이전의 APM은 IT관점으로 설계되어 현업이 제품을 이용해 애플리케이션을 모니터링 하는 것이 거의 불가능했다. 그래서 제니퍼 5는 기획 단계부터 현업까지 이해 가능한 UX/UI를 만드는데 공들였고, 사용자가 사용하기 쉬운 UX/UI를 제공하려고 애썼다. 개발 후에도 피드백을 받고 개선하는 작업을 게을리 하지 않고 있다. 간결하고 직관적인 인터페이스 제공대시보드는 관제실이나 전용 화면에서 공간을 최대한 활용할 수 있도록 만들었고, 분석의 경우 쉬운 조작만으로도 사용자가 보고자 하는 데이터를 직관적으로 보여주는데 중점을 두었다. 또한 대시보드에서 어떤 이벤트가 발생하면 해당 이벤트를 쉽게 볼 뿐만 아니라 그와 연관된 데이터의 분석도 바로 할 수 있도록 하여 사용자의 Interaction(사용자가 클릭 등의 행위를 하는 것)을 최소화하였다. 사용자는 이벤트를 선택하면 문제가 발행한 지점으로 바로 도달하는 느낌을 받도록 한 것이다. HTML 5 기반의 UI제니퍼 5는 HTML 5 스팩을 기반으로 UI를 개발했다. 제니퍼 5는 HTML 5 스팩이 나온 초기부터 개발을 시작해서 정보나 제공되는 기능 등의 부족으로 많은 어려움을 겪었지만, 수많은 연구를 통해 현재는 JUI(JENNIFER User Interface)라는 오픈소스 프로젝트를 진행할 수 있는 수준까지 이르렀다. 앞으로 HTML 5 스팩은 더욱더 발전할 것으로 예상되고 이에 맞추어 3D를 포함한 다양한 Frontend 기술을 접목해 더욱 발전시킬 예정이다. 제니퍼 네비게이션, 최단기간에 목적지까지 도달하는 구조사용자 경험을 긍정적으로 만들기 위해 신경 썼던 부분 중 하나가 네비게이션 기능이었다. 제니퍼 5의 네비게이션은 사용자 인지 네비게이션으로, 이벤트가 발생하거나, 사용자가 데이터를 분석하고자 할 때 접근하기 가장 쉬운 형태로 만들었다. 이를 위해 특정 기능이 다음으로 넘어가는 과정을 자연스럽게 구현하려고 노력했다. 제니퍼는 사용자가 주로 사용하는 기능을 집중해서 보여주는 방법으로 선택과 집중해서 제품의 UX를 개발했다. 반면 외산은 평면적으로 기능을 늘어놓아 이용자에게 적지 않은 학습을 요구한다. 제니퍼는 이용 목적이 분명한 사용자가 최단기간에 목적지에 도달할 수 있게 해준다. 이용자가 대시보드를 모니터링 할 것인지, 분석을 할 것인지, 아니면 통계를 할 것인지에 대한 목적이 정해지면 해당 메뉴를 클릭하는 방식으로 목적지까지 쉽게 도달할 수 있다.컴포넌트화를 통한 UI 통일성 및 유지보수 편의성 도모 디자인과 개발의 일관성을 위해 자주 사용하는 요소는 모두 컴포넌트화시켰다. 이에 한 요소가 JUI이고 이로 인해 새로운 화면이 추가되더라도 디자인의 일관성이 유지되었고, 화면상의 문제가 발생할 경우에도 컴포넌트 단위로 버그를 수정하여 반영함으로써 유지보수도 쉬워졌다.제니퍼는 이와 달리 데이터 관점에서 UX를 적용하기 보단, UX/UI에 제니퍼의 데이터를 맞추는 전략을 썼다. UX에 딱 맞는 옷을 찾기 위해 UI라이브러리나 차트도 새로 만들었다. 개발 생산성을 높이기 위해 제니퍼는 최대한 작은 단위로 디자인 구성요소들을 나눴다. 작은 단위로 쪼갠 후 재사용이 가능해야 개발의 일관성 및 확장성을 보장할 수 있기 때문이다. 쉽게 재사용할 수 있는 것을 컨셉으로 기술 트렌드인 HTML5를 스펙을 맞춰 공유를 목적으로 구성요소를 개발했다. 예를 들면 화면에 들어가 있는 버튼을 일일이 나눠 개발했고, 이를 재사용하기 쉽게 만들었다. 이를 통해 페이지마다 버튼이 다르게 보이는 문제를 해결했다. 하나의 버튼을 고치면 나머지 버튼도 바뀌도록 해 UI의 일관성을 유지했다.
조회수 12728

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

기업문화 엿볼 때, 더팀스

로그인

/