벌써 18화까지 와버렸네요. 지금까지 브랜딩브랜딩 어쩌고하면서 수많은 얘길 했지만 대부분의 글은 하나의 맥락을 지니고 있었죠. 브랜딩, 그것은 일이다.애시당초 브랜딩은 따로 구분된 일이 아닙니다. 시작할 때 자연스럽게 만들어지는 것이고, 사업을 통해 증명해나가는 사업 그 자체랄까요. 그런데 이걸 자꾸 분리된 개념으로 생각하기 시작하면 결국 '일' 이 되버립니다. 회사소개서를 만들거나 로고를 만드는 작업은 엄밀히 브랜딩이 아니라 그냥 회사 내의 디자인작업입니다. 브랜딩작업이라는 영역이 따로 있다거나 그런게 아니죠. 흔히 브랜드디자인이라고 하는 영역은 로고 등의 아이덴티티, 스테이셔너리, 키비쥬얼, 브랜드가이드 등을 정립하는 과정을 의미하는데 그 과정에서 명함도 만들고, 브로슈어, 굿즈, 패키지, 웹, 앱, 인테리어 등등 다양한 디자인영역을 드나들게 됩니다. 이건 패키지 디자인이기도 하고, 웹 디자인이기도 하고, 편집디자인이기도 하죠. 그래서 브랜드디자인이란 말은 기존에 없던 것을 하는 게 아니라 이미 존재하던 디자인업무를 따로 모아 분류해 놓은 것과 비슷합니다. 브랜딩은 '정립' 입니다. 디자인업무가 많아지는 것은 정립을 가장 손쉽게 보여줄 수 있는 영역이기 때문이죠. 하지만 정립은 꼭 눈으로 보이는 것들이 똑같이 높이를 맞춘다고 해서 완성되는 건 아닙니다. 정립의 종류는 굉장히 다양하죠. 말투, 쓰는 단어, 복장, 시스템, 가치관, 방향성, 수단과 목적, 행동양식, 네트워크 풀, 규율, 시장, 고객, 정체성 등 회사에서 규정하고 정리해야 하는 건 한 두 가지가 아닙니다. 그렇다면 이 모든것을 누가 담당해야 하는 걸까요?디자이너?기획자?BX팀?대표?여러분은 어떻게 생각하시나요. 회사의 모든 자잘하거나 큰 부분들을 하나하나 정리하고 규정하는 건 대표가 할 몫일까요? 그건 독재에 가깝겠죠. 그 방대한 업무를 혼자 쳐낼 수도 없구요. 그럼 BX팀이 전담해서 해야할까요? 하지만 그건 월권에 가깝습니다. 그리고 소수의 의견을 일반화시킬 가능성도 높죠. 특정 직원이 해야할까요? 만약 그렇게 된다면 이 분의 육신과 영혼의 보존을 장담하기 어려울 겁니다. 소위 브랜딩을 한다!라는 원래 처음부터 되어있어야 할 것이 안되어 있고 지금까지 흘러왔다...란 얘기겠죠. 이 경우 뒤늦게 브랜딩을 진행하려다보면 몇 가지의 장애물을 극복해야 합니다. 브랜딩은 멱살잡이와 혈투, 전투적인 회의, 고성, 갈등, 피의 숙청, 분서갱유, 사화 등을 동반하기도 합니다. 브랜딩은 회의실에서 만들어지고 그 실무를 모두가 분담해서 진행해야 하니까요. 결국 모든 이들의 모든 생각이 충돌하는 초기우주의 대혼돈상태와 같은 격렬함을 각오해야 합니다. 물론 이러한 과정이 비교적 온화하고 즐겁게 진행되는 멋진 기업들도 있긴 하더군요. 하지만, 세상에 갈등과 의견충돌을 좋아하는 변태같은 사람이 얼마나 있겠습니까. 대부분은 그런 상황을 피하고 싶습니다. 그래서 브랜딩도 어려워지기 시작합니다. 입을 다물고 생각을 숨기고, 탕비실에 진심을 쌓아놓기 시작하죠.입을 다문 브랜드는 결국 대표나 특정인물의 주도로 진행됩니다. 모두가 관심이 없으니 딱히 갈등생길 일이 없습니다. 그러다보니 브랜드담당하시는 분들의 고충은 대부분 "어떻게 하는 지 모르겠어요." 였습니다. 원래대로라면 저런 고민보단 "사람들이 아무도 제 말을 안들어줘요. 아무도 제 일에 관심이 없어요. 맨날 흐지부지 일이 사라져요." 등등이 더 커야 정상이죠. 일을 하면서 어려움보단 외로움과 부담감이 더 많이 드는 작업이 현실의 브랜딩이니까요. 여기에서 그 '특정인물'은 주로 마케터나 디자이너일 가능성이 높습니다. (대표가 아닌 경우) 왜냐면 마케터는 실제적으로 회사를 알리는 PR의 역할도 거의 함께 담당하고 있을 가능성이 높고, 디자이너는 브랜드를 시각화 시킬 수 있기 때문이죠. 브랜드는 '알리고 보여준다!' 라는 표식과 표의의 기능이 있습니다. 이 때문에 표식을 담당하는 디자이너와, 표의를 담당하는 마케터에게 브랜딩업무가 집중되죠.표식을 담당하는 디자이너는 몇 가지를 고려해서 디자인을 진행하게 될 겁니다. 메시지를 시각화시켜야 하니까요. 얼마 전 이병헌 주연 '그것만이 내세상'이란 영화에선  배우 한지민(한가율 役)씨가 이 이런 대사를 하더군요. '진태씨는 세상의 모든 소리를 86개 피아노건반으로 이해하는 사람이예요.'  라고. 겁나 오글거리는 말이지만 디자이너도 비슷합니다. 디자이너는 추상적 개념을 몇 가지의 색과 구도, 이미지로 인식하고 표현하는 사람이죠. 죽음은 검정, 파랑 / 활기는 주황, 노랑 / 열정은 빨강 / 대각선은 역동적, 수평은 안정적 수직은 권위적 등등....다양한 시각정보를 통해 메시지를 구현합니다. 이 과정에서 뒷목잡는 경우가 다수 발생하는 데  주요 이유는 다음과 같습니다.너무 심하게 추상적인 경우랄까요...평화를 색깔로 표현해보세요. 분홍? 하늘? 비둘기색? 혁신을 색깔로 표현해볼까요? 회색? 파랑?...사회적가치를 구도로 표현해봅시다. 가로...세로? 대각? 원형?... 개인적으론 브랜딩에 있어서 최악의 단어가 '가치'라고 생각합니다. '가치를 만들어갑니다.' 라는 건 회사자체의 정의입니다. 원래 회사는 가치(=값어치=재화=이윤)를 만드는 곳이죠. 그걸 위해 사람들이 모였구요. 단어가 멋져보여서 그냥 우리가 그런갑다...하고 넘어가지만 조금 따져보면 이건 순환논리의 오류입니다. 너넨 누구니? 저흰 회사예요. 라는 대답과 같습니다. 회사의 브랜드가 회사 그 자체의 정의가 되버렸죠. 우리가 '누구니?' 라고 물을 때는 인간 그 자체의 정의를 듣고싶어서가 아닙니다. "저는 단백질을 이롯한 다양한 유기/무기물질로 이루어진 다세포 지적 포유류입니다." 라는 정의가 아니라 당신만의 개성을 듣고싶은 겁니다.명확한 상태동사와 동작동사로 표현해주세요. 뭐 하는 어떤 기업인지. 그래야 시각화가 가능하죠. 디자인이 힘을 지니는 것은 대중의 끄덕거림에서 비롯됩니다. 지금부터 사회적가치는 분홍색이야!! 라고 정의내리면 대중들은 '아~그렇군요!' 라고 끄덕거릴 수 있을까요?답 : 놉올해 초에도 만들고, 여름에도 만들었는데 겨울에 또 만드는 회사소개서 같은 반복작업도 그렇습니다. 물론 진짜 업데이트가 되어서 부분적으로 업뎃 업뎃 하는 경우는 좋습니다. 회사의 성장과 변화의 증거이니 즐거운 일이지요. 그러나 문제는 자꾸 디자인만 바꾸는 경우입니다. 내용은 뭣도 바뀐 것도 없는데, 저번에 만든 게 맘에 안들어서라던가 그냥 새로운 마음으로 시작하는 의미에서 등등 별 큰 의미도 없고 효과도 없는데 자꾸 일만 많아지는 경우죠. 에어비앤비가 로고를 바꿀 때 일일이 고객들에게 화상으로 리브랜딩에 대해서 설명하고 알렸던 (물론 전부는 아니었지만) 이벤트를 기억하시나요? 회사로고와 색깔, 소개서 등은 아이덴티티를 보여주는 제일 기본적인 비쥬얼 매터리얼 들입니다. 아이덴티티가 외워질라하면 바뀌고, 어느새 보면 또 바뀌어있고.... 이런 식이라면 이건 인지도의 문제를 넘어서 신뢰의 문제에 직결될 듯 합니다.어차피 또 흐지부지 될 걸 아니까..이번에도 대충 소스발라서 만들지 뭐...라는 마음이 들기 시작하면 비쥬얼 브랜딩은 총체적으로 무너지기 시작합니다. 위와 같은 생각은 대표님들은 하지 않죠. 실무자들이 하는 생각입니다. 뭘 열심히 해가면 한 달뒤엔 쓰지도 않고, 다들 어차피 똑같이 생활할 건데 나만 바쁘게 일한거죠. 거창하게 시작하겠다고 해놓고 지원도 없고 관심도 없고 심지어 아 맞다!...그건 나중에 얘기할까? 라는 식으로 우선순위에서도 밀리기 시작하면 일하는 사람의 마음은 어떨까요. 가뜩이나 브랜딩을 혼자 맡은 것도 답답한데. 매번 어차피 이번에도 실패할 거다...라는 생각이 겹쳐지면 실무자는 클립아트 코리아에 로긴하게 되는 것이죠. 그리곤 그냥 쉽고 간편하게 효율적으로 일하게 됩니다. 어차피 또 갈아엎을 거 일일이 소스를 만들 필요있겠어요? 사실 실무자를 위한 글을 쓰고있으니 제가 여기에 쓰고 싶은 솔직한 심정은 그렇습니다. 상황을 봐서 3개월뒤에 또 갈아엎을 것 같다면 그냥 프리픽 소스와 구글링, 템플릿으로 일단 보기에 괜찮게만 만들어놓으라는 거. 영혼을 다 바쳐서 아이콘 하나하나 다 만들고, 아이소메트릭, 키비쥬얼에 아트웍까지 해놓고 하나하나 폰트, 자간 다 맞춰놓고 업무용 템플릿, 브랜드가이드를 만드는 건 물론 개인에겐 아름다운 경험이 되겠지만, 그런 장인정신덕분에 다른 일이 밀리고 오히려 욕을 먹거나 동료들과 갈등이 생기는 등의 부작용이 있을 거라면, 그냥 마음에서 내려놓는 방법이 당신 자신을 위해선 더 좋을 것 같습니다.브랜딩도 그 가치를 아는 사람에게 의미가 있는 단어입니다. 브랜딩으로 디자인업무를 비롯해 여타 업무를 시킬 때는 내가 그걸 끝까지 책임질 자신이 있는가...? 를 먼저 되묻고 시작했으면 좋겠습니다. 만약 작심삼일처럼 곧 사그러들 열정으로 시작했던 것이라면... 소중하고 능력있는 직원 하나를 잃게 될 지도 모를 일입니다. 실제 퇴사가 아니더라도 마음에서 멀어지는 것까지 포함해서 말이죠. 그냥 회사소개서만 만들고 싶다면 브랜딩이란 단어 붙이지 말고, 그저 회사소개서나 하나 더 만들자. 라고 말하는 편이 좋습니다.실무자께서도 브랜딩이 시작되었다면 진심 몸과 마음이 힘들 수 있단 사실을 기억하고 시작했으면 합니다. 그리고 제대로 시작할 일이라면 혼자 떠맡지 말고 공식적으로 공동업무 요청을 해야합니다. 만약 심적으로 이런 업무를 컨트롤하기 힘들다면 내려놓는 게 맞습니다. 디자이너분들은 브랜딩 프로젝트 키를 잡기엔 일이 뭔가 굉장히 많을 겁니다. 또한 본인이 직접 디자인하면서 브랜딩 전체를 보게 되면 분명 이것저것 꼬이기 십상이거든요. 원래 디렉터는 수면 밖의 인사이트를 지니고 있어야 합니다. 디자이너가 직접 브랜딩프로젝트 매니징을 맡을 거면 디자인에서 잠시 손을 떼던가 아니면 PM을 다른 쪽으로 넘기는 편을 추천합니다. 물론 PM과 디자인역량이 둘 다 되는 진 그레이같은 우주적존재라면 내키는 대로 하셔도 좋습니다.  포토샵을 켜는 더블클릭이 의미있는 알컨쉬+s 로 마무리 되길 기원합니다.

안녕하세요. 프리모아입니다. 예전에 소프트웨어 개발자들을 위한 죽여주는 이력서 쓰기라는 컨텐츠로 글을 썼었는데요. 그 때 답글로 '웹디자이너를 위한 이력서 쓰는 방법' 도 알려주라는 말이 있었습니다. 그래서 오늘은 웹 디자이너를 포함한 디자이너 종사자 분들을 위한 이력관리와 자기소개서를 쓰는법을 알려드리고자 글을 씁니다. 웹 디자이너 신입은 왜 초봉이 낮을까요? 전문 기술직인 반면에 웹디자이너 신입 초봉이 2,000도 못 받는 곳이 수두룩 할 정도로 웹디자이너 시장은 임금기준이 낮습니다. 그 이유 중의 하나가 웹디자이너 학원으로 인한 시장 포화상태 때문입니다. 웹디자인 학원에서는 전공과 무관하게 3개월 속성으로 가르치고 웹디자이너 지망생을 찍어내다 시피 하다보니 매년 웹디자이너 지원자가 넘쳐나게 됩니다.요점은 시장 '회귀성' 입니다. 나를 대체 할 수 없는 웹디자이너로 포장을 하는 것이 첫 번째 입니다. 그리고 회귀성을 만들기 위해서는 관점을 바꿔야 합니다.웹 디자이너의 실무능력은 디자인이 아닐 수도 있습니다. 물론 웹디자이너의 가장 핵심적인 실무 스킬은 디자인 시안을 뽑는 능력과 디자인툴을 얼마나 완숙도 있게 다루느냐 입니다. 하지만 대부분 포토샵, 일러스트레이터, 에프터이펙트와 같은 툴을 어느 정도 다루고, 이력서에는 중, 상급이라고 쓰지 하급 이라고 쓰는 사람은 없습니다. 그러면 회사 입장에서는 지원자들을 평가할때 이러한 디자인 툴로 인한 기술적인 차이는 사실 큰 차이가 안난다고 볼 수 있습니다.때문에 관점을 바꿔서 디자인에 기획적인 부분을 넣어야 합니다. 기획서를 쓰라는게 아니라 디자인 과정에 기획적인 의도와 역량이 들어간다는 걸 보여줘야 하는 것이지요. 웹사이트의 그래픽적 요소에 대한 이유와 의도, 의도자의 컨셉을 어떻게 해석하였는지 등을 보여주는게 채용 담당자에게는 매력적으로 보일 수가 있지요.디자인 툴이 아닌 다른 활용 도구들과 벤치마킹 사이트를 보여줘야 합니다. 포토샵이나 일러스트레이터 같은 디자인 툴 외에 인포그래픽 툴 또는 사이트를 활용해 포트폴리오를 만들고 이를 어필하는 것도 좋습니다. 예를 들어 Piktochart 같은 경우도 자기소개서를 PPT로 만들 때 시각적인 퀄리티를 높여주는 요소가 됩니다. 또한 웹디자이너 실무자들이 벤치마킹을 위해 많이 사용하는 Behance, Awwwards와 같은 디자이너 포트폴리오 사이트를 최대한 활용하는게 좋습니다. 위 사이트에 작업물 또는 포트폴리오를 올리고 링크를 걸어두면 궂이 얘기를 안해도 해당사이트를 활용하는걸 보여줄 수 있고, 디자이너의 트렌드를 읽는 감각적인 눈을 은연 중에 어필할 수 있지요. 웹디자이너에게 중요한 것은 포트폴리오 > 활용 툴 능력 > 경력 의 중요도 순입니다. 디자인 계통의 특성상 경력이 높다고 디자인을 잘하는 것은 아닙니다. 색채나 레이아웃 등 감각적으로 타고난 사람들이 어쩔때는 경력자들보다 뛰어나기도 합니다. 때문에 경력자들은 경력을 무작정 어필하는 것보다 시각적으로 내가 어떤 유형과 분위기의 디자인을 구사하는 웹디자이너 인지를 보여줄 필요가 있습니다.쉽게 얘기하면 공기업과 프로젝트를 많이 해본 웹 디자이너와 벤처나 스타트업의 프로젝트를 많이 해본 웹 디자이너 각각 웹 디자인 분위기가 다르다고 느껴집니다. 때문에 포트폴리오를 제작할 때 컨셉별로 또는 작업물 분류 카테고리를 적용하여 구성을 하고 지원하는 회사의 성향에 맞춰 카테고리를 재구성해 지원 하는 것도 전략이라고 볼 수 있습니다. 어젯 철야작업을 하였더니 글쓰다 체력이 방전되었습니다. 때문에 경력직 웹디자이너를 위한 끝내주는 자소서는 3탄으로 찾아뵙겠습니다. 털썩..#프리모아 #자소서 #디자이너 #디자인팀 #인사이트 #경험공유 #꿀팁

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

지난 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의 새로운 모습이 기대되는 시점이다. #핀다 #팀원소개 #디자인팀 #디자이너 #조직문화

안드로이드 앱 디자인은 처음인데요안드로이드 앱 디자인 처음 접하게 되면 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   디자이너가 작업하면서 쓰기 유용한 포토샵 플러그인이다. (바로가기)안드로이드 앱 디자인 하실 때 도움이 많이 되셨으면 좋겠습니다.#에이치나인 #디자이너 #개발자 #협업툴 #크래커나인 #솔루션기업

제품을 선보일 때, 실제 사용자가 어떠한 방식으로 제품을 사용할 것인가에 대해 고민하고, 누구보다 제품을 이해해야 하는 사람들이 있다. 바로 'UX디자이너'다. 이번 기고는 인공지능을 다루는 서비스 분야가 넓어지면서, (인공지능이) 'End-User'와 직접 소통하고 대화할 수 있는 영역으로 확대됨에 따라 역할이 더욱 중요해진 UX디자이너에 대해 알아보고자 한다.많은 사람이 UX 디자인에 대해 오해하고 있다. 뛰어난 UX 디자인이란, 사용자가 느끼기에 가장 편리한 디자인이라고 생각하는 점이다. 실제로 인간은 단순히 편리한 것만 원하지 않는다. 특히, 인공지능을 탑재한 서비스는 유용성에 더 중요한 가치를 제공할 수 있으며, 서비스 성격에 따라 사용자의 감성을 많이 고려한다. 결국 인공지능 기술 기업이라면 사용자 입장에서 유용성, 편리성, 감성 등을 모두 고려한 인간 친화적인 UX 디자인을 무기로 내세워야만 한다.이에 실제 현업에서 매일 고민 하고 있는 스켈터랩스의 성진하 시니어 UX디자이너와 이야기를 나눴다.< 인공지능 개발 기업 스켈터랩스의 성진하 시니어 UX디자이너 >UX디자이너가 주로 하고 있는 일은?현재 스켈터랩스에서 대화형 UI에 엔진 및 빌더를 개발하는 프로젝트와 스마트 디바이스 개발 프로젝트에 참여 중이다. 먼저 대화형 UI쪽에 초점을 맞춰보자. 엔진은 소프트웨어 엔지니어가 집중하는 영역이라면, 빌더는 유저랑 만나는 접점이므로 UX디자이너 역할이 중요한 영역이다. 하지만, 빌더도 엔진쪽과 커뮤니케이션하며 개발하기 때문에 중간중간 엔지니어들과 '싱크업'을 해야 하고, 초기 단계이기 때문에 대화형 엔진에서 어떤 기능을 어떻게 제공할지 등을 논의해야 한다. 또한, 개발자 언어를 사용자가 알 수 있는 기능으로 '패키징'하는 일도 담당한다. 예를 들어, 지금은 'Function'이라고 부르는 것이 예전에는 'Fulfillment'라고 했었다. 두가지 다 업계에서 쓰는 용어지만, '업계 표준'이라는 것이 없기 때문에 어떤 용어가 더 적합한지에 대한 판단하고 있다.스마트 기기 같은 경우에는 실제로 사람들이 어떤 기능을 원하는지, 타겟 고객군이 어떤 라이프스타일을 즐기는지 예측하고 검증하는 과정에도 많은 시간을 할애한다. 엔지니어링 입장에서 어떤 'Feature'를 개발할 것이라고 한다면, UX디자이너는 실제 개발 가능성과 사용자 입장에서 접점을 찾아내는 역할을 담당한다.실제로 하고 있는 일 중 일반인들이 알고 있는 것과 가장 큰 차이가 있는 점은?일반적으로 생각하는 '디자인 작업'에 할애하는 시간 자체는 적은 편이다. 포토샵이나 스케치 등으로 하는 작업은 약 20% 정도에 불과하다. UX 디자인은 리서치와 디자인을 오가며 'Iteration(반복)'하는 작업이 대부분이다. 리서치는 벤치마킹이나 사용자 조사 등이 있고, 디자인에도 와이어프레임, 플로우 설계, UX 문구 선정, 애니메이션 등과 같은 다양한 작업들이 있다. 사람들이 생각하기에 디자인은 리서치가 아닌 비주얼 디자인인 경우가 많은데, 아까 말한 것처럼 여기에 할애하는 시간은 실제로 매우 적은 편이다. 고민하고 커뮤니케이션하는 시간이 훨씬 많다. 더구나 인공지능은 새로운 분야이다 보니, 공부하는 시간도 예전보다 늘었다.인공지능 붐이 일어나면서 UX디자이너의 역할은 어떤 점이 달라졌는가?일반적으로 쉽게 생각하는 것이 대화형 UI일텐데, 대화형 UI가 등장하면서 무형의 것을 디자인하는 숙명이 생겼다. 스켈터랩스에 오기 전에도 이런 고민은 많았다. 전 직장인 국내 S 대기업에서는 UI 디자이너들이 하던 고민이다. 대화형 인공지능 경험을 하다보니 생각보다 인문학적인 것에 대한 지식이 많이 필요했다. 실제로 구글은 'Conversation UI Designer'가 있다. 이 사람들 중에는 대화가 무엇인가 자체를 정의하는 사람도 있다. '특정 질문에 대해 사람들은 어떻게 대답할 것인가'라는, 예전에는 생각하지 못했던 고민을 많이 하고 있는 것이 현실이다.< 인공지능 개발 기업 스켈터랩스의 성진하 시니어 UX디자이너 >반대로 힘든 점은 무엇인가?요약해서 말하자면, 어렵고 생소해 많이 공부해야 하는 점이다. 특히, 대화형 UI에 대한 업계 표준이라는 것이 없어서 더욱 힘들다. 예를 들자면, 2008년 아이폰3G, 2010년 갤럭시S가 출시한 뒤 터치기반 스마트폰 모바일UX는 어느 정도 표준화 작업이 진행됐다. 이미 화면 사이즈에 맞는 프레임과 아이콘이 있고, 이를 바로 가져다 쓰거나 약간만 수정해 작업할 수 있는 편한 환경이 구축된 것이다.하지만, 대화형 UI는 아직 구축된 것이 적고, 보고 참고할 수 있는 것도 부족한 편이다. 때문에 정말 많은 고민과 공부가 필요하다. 여러 많은 글로벌 기업이 대화형 UI를 개발하고 있지만, 아직 어느 누가 이 분야의 선두 업체라고 할 수 없다. 아직 업계가, 기술이 충분히 무르익지 않았다고 생각한다.다시 모바일 UI의 예를 들어보자. 예전에는 줌인/아웃에 대한 실험도 상당히 많았다. 더블탭도 해보고, 돋보기 버튼도 적용하는 등 여러 과정을 거쳤고, 수 년간 실험을 통해 지금은 사람들이 두 손가락으로 늘리고 줄이는 행동을 당연하게 인식한다. 지금의 대화형 UI는 수년간 실험을 거쳐야 하는 단계라고 생각한다. 이것도 해보고 저것도 해보는 여러가지 시도를 테스트 중이다.국내 대기업에서 오랜 기간 경험을 쌓고 왔는데, 스타트업으로 옮긴 뒤 느낀 가장 큰 차이점은 무엇인가?크게 세가지로 정리할 수 있다.첫번째, 업의 특성이다. 대기업을 톱니바퀴라고 많이 표현하는데, 실제로 세부적인 것을 많이 분석하고, 일도 세분화되어 있는 구조다. 디자인 부서라고 해도 비주얼 디자인, 와이어프레임 디자인, 플로우설계, 애니메이션, UX문구 등 모두 세분화 되어 있다. 이에 반해 스타트업은 개인이 커버해야 하는, 그리고 능력에 따라 커버할 수 있는 영역이 더 넓다.두번째, 업무 환경이다. 대기업은 보안을 중요시하기 때문에 불편한 점이 많다. PC로 접속할 수 없는 사이트도 많았고, 구글 드라이브는 물론, 소식을 확인할 수 있는 해외 뉴스 사이트도 항상 승인 버튼을 눌러야 접속할 수 있다. 심지어 사무실 내에서 스마트폰 카메라 작동은 상상도 할 수 없고, PC를 들고 다니면서 일할 수도 없는 환경이다. 반면, 스켈터랩스는 '스케치', '제플린', '앱스트랙트' 등 여러 툴을 언제 어디서든 내 맥북을 들고 다니면서 사용할 수 있다.세번째, 사람이다. 대기업은 계속 디자이너들 사이에서만 일했다. 하지만, 이 곳은 개발자, 마케팅, PM 등 다양한 직군과 함께 있어 여러모로 배울 점이 많다. 특히, 스켈터랩스는 개발자가 많은 조직이고, 흔히들 말하는 천재형 개발자도 많이 볼 수 있다. 팀 내에서 개발언어로 소통하기 때문에 스스로 (디자인 이외의) 다른 영역을 공부하고 익숙해지는 중이다.UX디자이너로서 앞으로 업계 혹은 회사에서 기대되는 점은 무엇인가?개인적으로 인공지능 분야에 대해 많이 공부할 수 있고, 내 역량에 따라 전문가가 될 수 있는 기회를 잡았다고 생각한다. 한가지 바람은 스켈터랩스가 B2C용 제품을 빨리 출시를 출시하길 원한다. 기술 중심 회사라 많은 사람이 아직 정확하게 스켈터랩스가 어떤 것을 하는지 알기 힘들었는데, 실제 제품을 출시하면 우리가 어떤 업체인지, 어떤 기술을 보유하고 있는지 알릴 수 수 있고, 더불어 'End-user'와 직접 소통할 수 있기에 UX 중요성이 더욱 드러날 것이라고 생각하기 때문이다.성진하, 스켈터랩스 Senior UX Designer삼성전자 모바일 UX디자인 분야에서 오랜 기간 경험을 쌓고, 스켈터랩스로 전향 후 대화형 UI 빌더와 스마트 디바이스 프로젝트에 참여하고 있는 카이스트 출신 UX디자이너#스켈터랩스 #기업문화 #인사이트 #경험공유 #조직문화 #인공지능기업 #기술기업 #UX디자이너 #디자인

거의 모든 UI 중에서 빠지지 않고 들어가는 UI 텍스트가 있다면 무엇일까?아마도 그것은 '시간'일 것이다.                        (사진: 어느 서비스에서도 빠지지 않는 시간 표기)날짜와 시각으로 구성된 ‘시간’은 UI에서 뿐 아니라 우리 생활 속에서도 늘 가까이 함께하는 공기 같은 텍스트다.아침 알람 소리에 깨어나 가장 먼저 보는 스마트폰 화면에서도 볼 수 있고, 출근 준비하며 켜둔 아침 TV 프로그램의 상단 구석에서도 볼 수 있다.이 글을 읽는 여러분 곁에도 ‘시간'은 함께하고 있다. 스마트폰으로 보고 있다면 상단 Status bar에, Mac이라면 오른쪽 상단에, Windows면 오른쪽 하단에 시간이 표기되어있다.이렇게 많이 여러 곳에서 쓰이다 보니 날짜와 시간을 표기하는 형식이 다양한데, 이를 서비스에 적용할 땐 어떻게 표기해야 좋을지 고민하게 된다. 예를 들면,1. '오전 12시'란 하루가 넘어가는 시각을 말하는 것일까? 아니면 오전에서 오후로 넘어가는 정오를 말하는 것인가?2. 그리고 흔히 말하는 '저녁과 밤, 그리고 새벽의 경계'는 어디쯤일까?이런 궁금증들에 대해, 그동안 나름의 방법들을 찾았는데(이미 누군가는 잘 알고 사용하고 있던 나만 몰랐던 방법들...) 이를 비슷한 상황의사람들에게 공유하고자 한다.12시 마감 시간을 표기하는 방법예전 디캠프의 디시전 캠프 신청 때 있었던 일이다.신청서 마감일이 12시로 표기되어 있었는데, 이를 어느 분이 수요일 낮 12시까지 인 줄 알고 신청서 제출을 미처 하지 않았다가 알고 보니 화요일에서 수요일로 넘어가는 밤 12시였던 것이다. 이분처럼 헷갈려하시는 분들이 좀 있으셨던지 디캠프 측에서 날짜를 하루 더 조정해주어서 다행히 원활하게 처리 되었었으나 만약 처음부터 정확한 시간이 표기되었었다면 이런 조정 과정이 필요치 않았을 것이다.                          (사진: 디캠프 디시전 프로그램 공고 코멘트 영역)이 상황처럼 밤과 낮을 헷갈려하기도 하지만 '밤 12시’라고 표현할 경우엔 그 날의 시작인지 그날의 끝을 뜻하는지 헷갈리기도 한다.그렇다면 어떻게 표기하면 좋을까?12시 대신 그에 약간 못 미치는 시간으로 표기하면 된다. 예를 들면 3월 31일 오후 11시 30분 같은 시간으로 말이다.만약 30분이 너무 이르다면, 단 1분이라도 앞당겨 오후 11시 59분 으로 표기해도 사용자에게 명확한 날짜와 시간을 전달할 수 있다.생활 패턴을 기준으로 시간을 표기하는 방법지금 이 글을 쓰는 현재 시각은 3월 31일 오전 12:31 분이다. 하지만 오늘 있었던 일을 나에게 말하라고 한다면, 나는 아마 3월 30일을 기준으로 말하게 될 것이다. 하루를 마무리하며 잠들기 전까지 오늘은 30일 이었다고 생각할 테며, 31일의 시작은 아침 기상 이후라고 여기기 때문이다. 이처럼 대부분의 사람들은 이틀을 걸쳐 깨어있더라도 하루라고 느끼고 있다.이러한 생활 패턴에 따른 자연스러운 인지를 이용하여 표기해주는 게 때로는 정확한 시간보다도 더 정확하게 느껴지는데, 이것을 이용한 것이 바로 극장 영화 상영 시간표이다.                            (사진: CGV 강남 주토피아 상영 시간표 캡처)위 사진을 보면 하루에는 존재하지 않는 '3월 31일 25:50'이라는 이상한 시간으로 나와있다.분명 존재할 수 없고 이해하기도 어려운 시간이지만 우리는 이것을 보고 '4월 1일 01:50'이라는 정확한 표기 보다도 더 정확하게 이해할 수 있다.(28:10의 경우엔 과해 보이기도 하나 영업일을 기준으로 설정한 것 같다)영화 예매처럼 영업일과 예약 시간 등이 필요한 서비스라면 충분히 참조할만한 UI 텍스트다..낮과 밤, 그리고 새벽 등으로 시간 표기하는 방법공방을 찾는 서비스를 준비할 때 지인들에게 시간대 인지에 관한 간단한 조사를 실시한 적이 있었다. 공방들의 수업시간이 유동적이고 애매모호하게 표현되는 경우가 많아서 정확한 시간 표기보다는 낮 또는 오후나 저녁과 같이 폭넓게 사용할 수 있는 방법으로 표기하고자 했는데, 이 단어들에 대해 사람마다 어떻게 느끼는지 알아보기 위한 조사였다. 결과는 대개 비슷하게 여기고 있었으나 사람 간 꽤 큰 차이가 발생하기도 하였다.그리고 조사 후 한참이 지난 이후에 알게 된 사실인데, 내가 했던 이러한 고민들을 해결할 수 있는 공식적인 시제 표현이 있었다. 바로 기상청에서 표현하는 시제 표현 방법이며 내용은 다음과 같다.00:00~03:00 - 한밤03:00~06:00 - 새벽06:00~09:00 - 아침09:00~12:00 - 늦은 오전 (오전 늦게)12:00~15:00 - 이른 오후15:00~18:00 - 늦은 오후 (오후 늦게)18:00~21:00 - 저녁21:00~24:00 - 늦은 밤 (밤늦게)06:00~12:00 - 오전12:00~18:00 - 오후09:00~15:00 - 낮18:00~24:00 - 밤(기상청: http://web.kma.go.kr/aboutkma/biz/forecast05.jsp)참조 자료:책 서비스 글쓰기의 모든것? (죄송합니다 제목이 잘 기억나지 않아요) / 기상청 홈페이지 / 인터넷 서치팁으로, 다른 다른 언어의 시간과 날짜를 표기방법을 확인할 수 있는 라이브러리가 있습니다. 텍스트 글자수를 고려해야할때 확인하기에 유용할 것 같습니다. (http://momentjs.com)#텐시티 #UI디자인 #인사이트 #일지 #후기 #경험공유

-오늘의 글은 매우 짧습니다.-사실 제 책은 보시다시피 커뮤니케이션에 대한 얘기입니다. 서로의 입장이 다르고 표현법이 달라서 발생하는 불필요한 힘빼기를 최소화시키자는 거죠. 다만 이런 얘기를 하기전엔 먼저 전제되어야 할 부분이 있습니다. 일단 양쪽 모두 업무의 인성과 기본기는 모두 충족이 되어있어야 하죠. 기본기란 이런거예요.-  디자이너는 상대방이 원하는 디자인을 만들어주기 위해 최선을 다해야하고 그만한 실력이 있어야 합니다. -  클라이언트는 디자이너의 작업을 위해 가능한 부분을 도와주어야 하고 업무에 필요한 자원들이 갖춰져 있어야 합니다. 예를 들어 스크립트가 필요하면 스크립트를 제작해서 줘야하는 거예요.기본이 안되어 있는데 커뮤니케이션만 잘하면 어떻게 될까요. 네 맞아요. 이빨까는거죠 그건. 커뮤니케이션은 감언이설로 상대방을 농락하는 방법이 아니예요. 잔머리나 트릭도 아니죠. 일단 질러놓고 보는 것도 아닙니다. 실체가 아직 없는 것에 대해 무작정 장담하는 건 사기예요. 말발로 없는 실력을 포장해보거나, 상대방의 심리를 교묘히 혼란스럽게 만들어서 얼렁뚱땅 넘어가는 건 보기 좋지 않아요.(많이 순화)  반면에 커뮤니케이션을 1도 못해도 일을 진짜 기똥차게 잘하시는 분도 있습니다. 딱히 말주변이 없어서 그렇지 눈치도 빠르고, 손도 빠르고, 인사이트도 있는 굉장한 분들이 꽤나 많습니다. 오히려 이런 분들과 일하는 게 훨씬 편하고 즐거울 때가 있어요.  솔직히 말이 너무 많거나 내 맘에 드는 표현을 하기 위해 노력하는 게 너무 눈에 보이면 좀 피곤하더라구요. '그냥 됬고 말씀드린 시안이나 제 때 주시면 돼요....' 라고 말하고 싶을 때가 있기도 합니다. 여러 커뮤니케이션 관련 콘텐츠에서 마치 커뮤니케이션이 기본중에 기본인 것처럼 많이들 얘기하던데.. 제 생각은 좀 다릅니다. 커뮤니케이션 스킬은 그냥 플러스알파일 뿐이예요. 좀 더 잘하기 위해 필요한 옵션이랄까요. 게다가 모든 사람들이 죄다 커뮤니케이션을 잘할 수도 없구요. 각자 다양한 자신만의 방법으로 커뮤니케이션을 하기 마련인데 굳이 이걸 꼭 입으로 통일 시킬 필요도 없다고 생각해요. 진짜 기본은 일단 본인의 일에 대한 실력과 책임감입니다. 

S/W 개발자가 디자인대로 화면을 구현할 때, 어떻게 디자인 요소 위치를 잡아야 하는지 정확한 정보가 필요합니다. 이런 정보는 GUI 디자이너가 포토샵과 같은 디자인 툴을 사용하여 개발자가 사용 가능한 형태로 사이즈 정보와 리소스를 만들어 전달하는 작업을 GUI 가이드라인 제작 작업이라 합니다.GUI 가이드 문서 상에는 화면상에 표현되는 모든 GUI 요소들의 정보가 표시가 됩니다. 화면상의 위치 X/Y 좌표값, 디자인 요소의 폭/높이 사이즈 정보, 이미지 파일 리소스명, 폰트 타입, 폰트 크기 등 다양한 그래픽 요소의 정보를 정확하게 수치화 하여 기재한 것입니다.가이드 문서의 양식은 딱 정해진 틀은 없지만, 소위 대기업의 경우 표준 템플릿을 이용합니다. 단말 하나에 탑재되는 앱 별로 수십 벌의 문서를 제작하여 관리해 왔습니다. 현재 과도기적인 단계라 스케치(.sketch) 파일과 가이드라인 문서를 함께 운영하는 곳도 있을 정도입니다.기존에 GUI 가이드 문서 제작을 위해서는 아래와 같은 일련의 순서로 작업을 하였습니다.디자인 시안 작업 > 디자인 시안 확정 > 개발 가능성 리뷰 > 최종 수정 >GUI 가이드라인 문서 제작 & 이미지 파일 리소스 작업이 중에서 가이드 문서 제작 과정을 초점에 두고 살펴보면, GUI 디자이너가 직접 이미지를 자르고 위치와 크기 정보를 확인하여, 파워포인트 문서로 정보를 입력하는 일련에 단순 노가다를 반복적으로 진행하게 됩니다.대부분의 에이전시 신입 디자이너들이 중국집 요리사 탱크트리와 유사하게 최소 2년 정도 GUI 가이드라인 작업을 하고 난 뒤에 시안 디자인 작업을 참여할 수 있는 구조였습니다. 크리에이티브를 위해 디자인 작업에 시간을 일주일 중 3일을 쓰고, 4일은 가이드를 쳐야 할 정도의 노력과 시간이 드는 노동 집약적 작업이었습니다.이렇듯 GUI 가이드라인 문서 제작은 모든 디자인 요소 정보들을 일일이 확인한 후, 파워포인트로 옮겨 적어야 하는 야근의 헬게이트를 열어주는 대표적인 업무였습니다.디자인 완료 후 개발자에게 “디자인을 이렇게 구현해 주세요.” 라고 말하면 얼마나 쉽나요? 근래에는 야근의 대부분을 차지하는 이러한 업무들로부터 스케치 툴이 많은 디자이너를 구해준 셈입니다.업무의 프로세스상 디자이너가 가이드라인 문서와 이미지 리소스 파일들을 넘겨줘야 개발자들이 개발진행을 할 수 있기에 디자이너들은 타이트한 데드라인에 쫓기듯 업무할 수 밖에 없었습니다.이러다 보니, GUI 가이드라인 문서 제작 중 휴먼에러(크기 정보 오타, 이미지 파일 누락 등)로 개발자가 작업하던 도중 디자이너에게 가이드라인 문서 업데이트 요청을 해오는 경우가 매우 빈번했습니다. 또한, 대규모 프로젝트 일수록 가이드라인 문서, 이미지 리소스 파일, PSD 디자인 파일 등 관리해야 할 대상이 많아서 개발자와 디자이너 사이의 커뮤니케이션 빈도수도 잦아지고 많은 비용이 필요했습니다.비단 3년 전만해도 GUI 디자인을 개발자가 구현하기 위해 필요한 정보를 수천 페이지나 되는 파워포인트 문서로 전달했지만, 요즘은 스케치를 활용한 제플린이나 심플리 등과 같은 가이드 정보를 제공해주는 여러 서비스를 이용하여 가이드 문서 제작은 거의 하지 않고 있습니다. 조만간 가이드 문서가 완전히 사라지는 날이 오지 않을까 싶습니다.그 끝에 크래커나인이 일조하는 날이 오기를 바라며 글을 마칩니다.#에이치나인 #디자이너 #개발자 #협업툴 #크래커나인 #솔루션기업

사실 브랜딩을 이렇게 해라, 저게 맞다 백날 말하는 건 별 의미가 없습니다. 항상 옳은 방법은 원론적이고 방대하고 추상적입니다. 파괴하는 건 그저 말 한마디, 종이 한 장이면 충분하죠. 오우? 설마 한 번 브랜딩이 되면 쉽사리 바뀌지 않는다는 관성력을 언급하시려구요!? 물론 그렇습니다. 브랜딩은 '의도적 선입견' 을 만드는 과정입니다. 하지만 당신이 코브가 아닌 이상 남의 꿈 속으로 들어가 금고를 열게 아니라면 그것은 당신의 몫이 아닙니다. 우린 우리의 일을 할 뿐, 선입견을 만드는 건 고객들의 몫이죠. 그러니 뭔 전략을 통해서 브랜딩을 한다는 것은 어불성설입니다. 브랜딩 전략이란 말 자체가 어폐가 있다는 겁니다. 브랜딩의 전략은 이미 달성되었습니다. '회사'를 만들었잖아요!우리는 외부의 자극을 줄 뿐, 무엇을 떠올릴 지는 그들의 선택입니다.회사를 잘 운영하기 위해서 브랜딩전략을 짠다구요??? 그건 이상한 말입니다. 당신은 브랜드를 먼저 만들었고 그걸 달성할 수단으로 '회사'를 운영하는 것 뿐입니다. 그러니 이제는 운영단의 문제만 하나하나 해결해 나가면 되는 겁니다. 많은 대표님들이 오해는 이겁니다. 하아, 우리 회사는 브랜딩이 안되서 매출이 안나와.뭐라는...방구같은 소리지요. 브랜딩이 안된 게 아니라 그냥 운영이 개판인 겁니다. 직원들은 시무룩하고, 다들 회사에서 뭐하는 지 별 관심이 없습니다. 의욕도 없습니다. 방향은 이랬다저랬다를 반복하고, 가져다 쓰기나 베끼기식의 컨텐츠가 가득합니다. 3일 전에 한 얘기가 오늘 또 바뀌고, 회의만 계속되는데 말하는 사람은 없습니다. 당장 써야할 제안서가 너무 많으니 전체 회식은 다음 주로 미루기로 합니다. 미뤄서 회식을 했는데 결국 또 직원들은 그냥 하하호호 고기만 먹다가 집에 갑니다. 맡긴 일은 자꾸 늦어지거나 내 맘에 안듭니다. 질책합니다. 의욕이 떨어집니다. 대표도 직원도. 하지만 아이디어는 많습니다. 실행할 사람이 없죠. 이건 브랜딩의 문제가 아니라, 운영과 소통의 문제입니다. 생각을 하나 해보고 넘어갈께요.브랜딩은 고객과 회사만의 문제인가요??브랜딩은 고객과 회사만의 문제인가요??제가 앞선 글에서 얘기했던 내용이 있습니다. 브랜드는 직원과 회사 자체가 지니고 있는 성격, 그 기질이 자연스레 드러나는 것입니다. 정돈된 하나의 비쥬얼과 멘트, 일관된 행동과 철학을 통해서 말이죠. 결국 브랜딩은 사내문화에서부터 기인합니다. 뭐 복지데이 어쩌고 해서 금요일은 5시퇴근이 사내문화가 아닙니다. 아주 사소한 것부터 생각해봅시다. 서로 인사는 하나요? 손님이 들어오면 어떻게 응대하죠? 미팅은 어떤 식으로 해요? 호칭은요? 일이 끝나면 제깍제깍 보고 하던가요? 아니면 가지고 오라고 해야 가지고 오던가요? 결정권자와 실무자간의 커뮤니케이션을 보면 이 회사의 브랜딩이 어디를 향하고 있는지 아주 쉽게 파악할 수 있습니다. 때론 그 방향이 괌을 포위사격하는 형태를 띠며 자폭의 길을 보여주기도 하죠.그런 의미에서 오늘은 고객과 회사가 아닌, 내부의 소통에 대해 얘기해보려고 합니다. 직원들도 고개를 가로젓는 비지니스를 외부에 브랜딩하겠다는 건 말이 안되는 일이거나 그냥 사기치잔 얘기와 비슷하니까요. 브랜딩을 폭망시키는 멘트들! 지금 시작합니다.1. 예를 들어~ 다시 말하면~ 이해됨? 어떤 말이냐면..말이 많다.자꾸 예를 들지 마세요. 예를 드는 것 자체가 나쁘진 않지만, 결과적으로 말을 길게 만듭니다. 회의시간을 4시간으로 만든다구요. 30분이면 끝날 일이 자꾸 예가 붙어서 지구역사만큼 길어집니다. 직원들은 스트로마톨라이트가 되버려요. 굳어진 유기생명체 말이예요. 직원들을 태곳적 존재로 만들어서 지층속에 묻을 것이 아니라면 예를 들지말고 핵심만 딱 전달해주세요.  솔루션은 실무자들이 알아서 만드는 겁니다. 자꾸 예를 들어야 할 정도로 이해력이 좋지 않은 사람이라면 그냥 다른 일을 시키는 게 낫습니다.2. 내 친구가, 내 지인이, 내 사촌이, 내 선배가....지극히 개인적인 개인들의 경험을 실행의 근거로 삼지 마세요. 자꾸 회의시간에 '제가 아는 분이' 라는 얘기가 나오곤 하는데, 아는 분에 대한 데이터를 정확히 밝히던가 아니면 그 사례가 정확한 지 분석을 하고 얘기하는 게 좋습니다. 물론 그런 개개인도 다 고객이 될 수 있으니 중요합니다. 하지만, 더 중요한 건 우리 내부에서 일단 통일되는 것이 중요하잖아요. 종이를 집어던지던 고성이 오고가던 갈등이 있고 몸의 대화가 격렬해지는 한이 있어도 우리들끼리 의견을 합치고 지지고 볶고 해야합니다. 외부사람들의 의견을 끌어들이지 마세요. 차라리 그냥 내 의견이라고 하던가.3. 알겠지? (모르겠는데요..)이 짤 이외는 설명할 도리가 없다.중간이 없는 경우. 절차나 실무는 전혀 모르겠고. '자, 우리 이번 페이스북 좋아요!...지금 심각합니다. 이 정도로는 바이럴도 뭣도 안되요. 무조건 이번에 스폰서드 태워서 좋아요 30,000찍습니다! 다음주까지!'3일 후'팀장님 이번 컨텐츠 도달율이 괜찮은데 스폰서드 태우시죠.''응? 아 그거 거기에 돈 쓰지 말라고 하셔서 그냥 없이 해요.''네?? 그럼 목표치에 다다르기 힘들 건데.''응? 그럼 안되지. 이미 목표는 보고했는데.''뭐라고.요(와씨 반말나올뻔했네)?'무조건 하라고 하지말고, 서포팅을 해줍시다. 알겠지?가 만사장땡이 아니예요. 못 알아듣는 말이나, 불가능한 것 들을 말이 되는 것처럼 자꾸 포장하거나 모호하게 말하면 안되요. 말이란 게 원래 그렇습니다. 얘기 하면 할수록 점점 말이 되는 것 같거든요. 말하는 사람 입장에선. 듣는사람은 점점 미궁속으로 빠져들고.4. 사람은 원래..공자세요?공자세요? 우린 지금 일을 하는 거지, 인간본성에 대한 철학적 고찰이나 지극히 개인적인 가치관을 듣자고 모인 것이 아닙니다. 자신이 그런 모임을 싫어한다고 해서 남들도 싫어하는 건 아니라는 걸 좀 알았으면 합니다.5. 이렇게 하라고 했잖아.(저렇게 하람서요?)본인이 한 말은 기억해야 합니다. 굳이 전략 나부랭이가 아니더라도, 자꾸 뭔갈 갈아엎거나 기억못해서 딴얘기하는 건 브랜딩뿐만 아니라 전반적인 업무를 힘들게 합니다. 이것은 신뢰와 직결되는 문제로, 브랜딩을 위한 어떤 세부전략을 짜거나 회의를 해도 다들 '어차피 바뀔 거...' 라고 고개를 가로젓게 될 거예요!!6. 결론은, 정리하자면...결론은 하나만. 이건 심지어 5번보다 더 심할 수도 있는데, 5분전에 말했던 것과 지금 말한 결론이 다를 때도 있습니다. 보통 생각하고 말하는 게 아니라, 말하면서 정리되는 타입의 사람들이 이렇게 말하는데.....결정사항을 결정할 땐 애드립대잔치말고 명확한 오더를 주도록 합시다. 7. 그래, 니 말도 맞다.경청과 인정은 좋습니다. 하지만 모두의 말이 맞다고 해버리면....뭘 해야하는 지 알수가 없습니다. 경청은 하되 방향성은 잡아야 합니다. 브랜딩은 우리 비지니스와 사람들의 공통된 톤을 정하는 일입니다. 눈에 보이지도 않고 명확하지도 않은 그 '성격과 기질' 이란 것을 표현해내는 일은 아주 세부적이고 구체적이어야 합니다.  우리가 놀기 좋아하는 활발한 분위기의 색을 지니고 있다면 적어도 오프라인 이벤트를 할 때 어떤 텍스트와 어떤 드레스코드로 무장할 지..이렇게 외부로 드러나는 모든 요소들에 대한 결정을 해야하죠. 옷, 텍스트, 디자인, 제작물, 배너, 멘트, 응대방식 등 전방위적 요소에서 컨셉츄얼한 기획이 나와줘야 합니다. 브랜딩자체는 굉장히 모호한 개념이지만, 그걸 실행하는 단계는 어떤 것보다 구체적이어야 하죠. 그래야 고객이든, 내부직원이든 어떤 맥락에서 왜 이런걸 하는지 '이해' 할 수 있습니다. 두루뭉술의 덫에 빠져버리면, 공허한 말잔치만 계속됩니다.이건 사무실을 안개속으로 빠뜨리는 일이죠.   8. 근데...근데..이건 이렇잖아. 근데..이건 이럴 수 없는데? 근데....이러면 어떻해? 근데....내가 이래서 못해. 근데...근데...내 친구가..근데...(가능이 없음)9. 해봤는데..가카?...그 결과가 요즘 대한민국입니다. 지난 레퍼런스를 교훈삼는 것은 물론 좋습니다. 거듭 말하지만 그 레퍼런스의 맥락이 분명할 경우에 말이죠. 개인적인 경험도 교훈이 될 수 있습니다. 현 상황과 적절하다면 말이죠. 사이즈나, 성격이나, 상황이나, 업무적 측면에서 유사점이 많다면 리스크를 미리 방지할 수 있습니다. 하지만, '해봤는데...' 가 지니는 문제점은 이거죠.  그럼 해본 사람이 하셔야지, 한 사람은 본인이고 일은 딴 사람이 한다는 것.발언을 했다면 책임을 지고, 다른 사람들은 손놓고 있는게 아니라 서포트를 약속해주는 겁니다. 서로 무서워서 아무말 못하는 것보다 무서운 건, 내가 안 할거니까 아무말이나 내뱉는 것이죠.10. 일단은 ... 어쨌든..여튼..제가 꽤나 싫어하는 말 중 하나입니다. 앞서 말한 모든 말들을 깡그리 무시하고 맥락을 끊어버리는 말이죠. 브랜딩 뿐 아니라 마케팅, 디자인, 영업, 생산관리 뭐...어떤 파트가 되었던 이 단어는 좋지 않습니다. 맥빠지죠. 한참 열심히 회의하고 전략까지 쭉쭉 짜내고 있는데, 일단은 그거말고. 어쩃든, 여튼 해. 등...뭔가 상대가 지금까지 말했던 수많은 의견들을 단 2,3글자로 묵살시킬 수 있습니다. 무엇보다 세부적인 플랜이 나와야하는 브랜딩영역에서 이 단어는...그렇게 디테일하게 공들인 수많은 시간과 노력을 허사로 돌려버립니다. 한 번 무너진 것들은 다시 쉽게 쌓이기 힘들죠. 그렇게 브랜드는 점점 무너져 갑니다. 방향도, 의욕도 없이위의 10가지 멘트는 브랜딩을 망가뜨리는 말만은 아닙니다. 전반적으로 커뮤니케이션을 망치는 화법이죠. 하지만 브랜딩을 다루면서 굳이 이 주제를 꺼낸 이유는 우리가 생각하는 브랜딩에 대한 거창함과 거품을 걷어내고 싶었기 때문입니다. 위에서 언급했듯 색깔을 드러낼 수 있는 비쥬얼적, 기획/운영적 플랜은 아주 세부적으로 나와주는 것이 맞습니다. 그러나 그 전제는 회사 내부적으로 일단 통일된 의견과 이해입니다. 실제로 출퇴근을 하면서 프로젝트를 하다보면, 운영진의 회의가 끝나고 나온 후 직원들의 뒷담화를 자주 듣게 됩니다. 그 뒷담화에 편을 들어줄 생각은 없습니다. 가만 들어보면 본인들도 전혀 노력도 없이 그냥 월급이나 따박따박 받아가고 싶은 사람들도 태반이기 때문입니다. 컨텐츠를 만들려면 당연히 뛰어다녀야 합니다. 그건 기본중에 기본입니다. 자료조사를 해도 끊임없이 인터넷을 뒤져야 하고, 사람도 만나야 하고, 인터뷰, 콘티작성, 일정조율 등...모르면 공부해야하고, 안되도 되게 해야하는 경우가 많습니다. 그걸 그냥 주저앉아서 '난 그런거 못하는데 왜 나한테 시키고 지랄이야' 하면서 불평이나 하고 있는 사원들의 모습은 좋아보이지 않습니다.(많이 순화함) 하지만 여기서 잘잘못을 따지잔게 아닙니다. 그럼에도 불구하고 제대로 우리 회사의 색을 만들고, 또 살리고 싶다면...  대표님이 그토록 원하는 브랜딩을 성공으로 이끌기 위해선 어쨌든 이 브랜딩 액션을 수행해낼 수 있는 온전한 집단이 필요합니다. 대기업은 BX팀이 있으니 굳이 전 사원이 막 회의에 참여하고 이럴 필요가 없다고 칩시다.. 스타트업이나 중소기업에선...전 사원이 달려들어서 움직여야 하는 것이 맞습니다. 그 와중에 서로를 피곤하고 지치게 만드는 말들은 최소화시키는 것이 효율적으로도, 심리적으로도 좋지 않겠습니까.자칫 우리의 피곤한 표정과 서로를 등진 얼굴이...우리의 브랜드가 될 테니까요.

안녕하세요? 스포카에서 디자인 총괄을 맡고있는 최재형입니다. 저는 스포카 기술 블로그에서 그래픽 디자인에 대한 기본적인 내용을을 다루어 볼까 합니다.앞으로 저는 컴퓨터 그래픽 디자인의 기초적인 용어 정리 및 개념 설명부터 실무에 바로 도움이 되는 디자인의 기본 상식 및 방법론까지 스포카 기술 블로그를 통해 설명해 보고자 합니다. 일단 오늘은 컴퓨터를 이용한 그래픽 디자인의 정말 기본이 되는 이미지 형식에 대해 다루어 보겠습니다.비트맵Bitmap 방식과 벡터Vector 방식일단 컴퓨터 그래픽은 크게 비트맵Bitmap과 벡터Vector방식으로 구분됩니다. 비트맵Bitmap은 ‘비트의 지도map of bits‘란 듯으로, 각 픽셀에 저장된 일련의 비트 정보 집합이라고 보시면 됩니다. 디스플레이는 픽셀들의 배열로 구성되어 있습니다. 픽셀들의 배열 방식, 픽셀들의 총 숫자나 가로 세로의 비율이 그 디스플레이의 해상도를 결정짓습니다. 예를들어 1920 x 1080의 해상도를 가진 디스플레이는 가로 1920개, 세로 1080개의 픽셀들을 가진 다는 것을 의미합니다. 가로와 세로의 값을 곱하면 그 디스플레이가 가진 총 픽셀 수가 됩니다.하나의 픽셀은 R빨강, G초록, B파랑의 세 가지의 서브 픽셀subpixel로 이루어져 있습니다, 서브 픽셀의 배열 방식은 디스플레이의 특성에 따라 모두 다릅니다. 서브 픽셀의 배열 방식의 차이는 너무 깊은 얘기이니 본편에서는 다루지 않기로 하겠습니다. 참고로 보편적으로 가장 많이 쓰이고 있는 LCD 방식은 그림에서와 같이 RGB가 하나의 픽셀을 이루어 전체 디스플레이에 배열이 연속됩니다.각 픽셀의 R, G, B는 0~255까지의 값을 가지고 있는데, 이 셋의 조합 (R,G,B)이 그 픽셀의 색상을 정의하게 됩니다. 그리고 그 정의된 색상들의 픽셀이 모여 지도map를 만들게 되고, 하나의 이미지 파일을 만들게 됩니다. (참고로 RGB로 색을 표현하는 방식인 RGB 가산혼합의 메커니즘은 다음 문서 http://ko.wikipedia.org/wiki/RGB 를 참조하시길 바랍니다.)비트맵bitmap은 다른 표현으로 픽스맵pixmap이나 래스터raster 이미지로도 불립니다. 포토샵에서 벡터 기반의 레이어 오브젝트 - 예를 들면 벡터 오브젝트나 편집 가능한 상태의 글자 - 를 비트맵화 시키는 메뉴 이름이 ‘Rasterize Layer’인데, 아마 여기에서 많이 보셨을 단어일 겁니다.벡터Vector 방식은 비트맵과는 반대로 표현되는 그래픽의 형태shape들이 수학적 공식으로 이루어져 있습니다. 다시말해 벡터 방식의 그래픽은 고정된 비트맵을 가지고 있는 것이 아니라, 수학적 공식으로 이루어진 오브젝트들이 그때그때 디스플레이에 비트맵화 되어 스크린에 표시됩니다. 여기에서 좀 더 높은 퀄리티의 이미지를 만들기 위해 안티-앨리어싱anti-aliasing이라는 기술이 사용되는데, 이 부분은 추후에 더 다루기로 하겠습니다.벡터 방식의 그래픽은 다음과 같은 메커니즘으로 구성됩니다. 일단 두 개의 점point이 연결되면 하나의 선path이 됩니다. 그리고 그 선path이 세 개 이상이 되면 면을 만들 수 있습니다. 그리고 각각의 선은 두께 값과 색상 값, 곡률 값을, 면은 색상 값을 가질 수 있습니다. 이렇게 점과 선, 면의 기본적 벡터 그래픽 요소들이 모여 다양하고 복잡한 벡터 그래픽을 만들 수 있게 됩니다.비트맵 방식의 장단점비트맵은 최하위의 레벨에서 렌더링 된 고정된 형식의 이미지 포맷으로, 컴퓨터에서 해당 형식의 파일을 연산하는데 많은 효율성을 지니고 있습니다. 같은 형태의 벡터 포맷 그래픽이라면 컴퓨터에서 더 많은 연산을 수행하게 되어 하드웨어에 부담을 줍니다. 그래서 대부분의 웹사이트와 어플리케이션에서는 비트맵 이미지 기반으로 구성되어 있습니다. 하지만 최근 하드웨어의 발전으로 부담이 적어져 몇몇 사이트에서는 벡터 포맷의 이미지를 실험적으로 사용하기도 합니다.http://www.cambridgeincolour.com/tutorials/image-interpolation.htm비트맵은 최종적으로 렌더링 된 상태의 포맷이기 때문에 이미지 편집이 자유롭지 못 합니다. 그리고 해상도가 고정되어 있기에 업-스케일up-scale을 하면 퀄리티에 큰 훼손이 가며, 다운-스케일down-scale이나 회전 등의 변형 시에도 안티-앨리어싱 작업이 중복으로 적용되게 되어 이미지 퀄리티에 큰 손상이 갑니다.비트맵 이미지의 편집 툴로는 대표적으로 Adobe Photoshop이 쓰이고 있습니다. Photoshop은 현재 GUI 작업에 가장 많이 쓰이고 있습니다. Photoshop은 Drop Shadow나 Inner Shadow, Emboss 등의 Effect 효과의 퀄리티가 가장 좋기 때문에 애플과 같은 스큐어모프skeuomorph한 장식적인 GUI를 제작하기에 가장 효과적인 툴입니다. 스큐어모프skeuomorph (http://en.wikipedia.org/wiki/Skeuomorph)라는 개념은 나중에 한 번 기회를 내서 소개해 드리겠습니다.하지만 Photoshop은 많은 단점을 가지고 있습니다. 일단 레이어 기반의 이미지 편집 툴이기 때문에 작업하는 그래픽 오브젝트가 많아지면 레이어 관리가 정말 어려워집니다. 물론 레이어 네이밍과 컬러 태그 등을 통한 체계적인 레이어 관리로 어느정도 보완을 할 수 는 있지만, 이를 지키기는 정말 어렵습니다. 그리고 레이어를 관리하거나 찾고 편집하는 과정이 비직관적이어서 벡터 기반의 툴인 Illustrator에 비해 많은 노동 비용이 소모됩니다.또한 Photoshop은 Adobe의 프로그램 설계 의도가 그래픽 디자인 툴이 아닌 사진 편집 툴이기에 메트릭 체계를 다루기가 상대적으로 좋지 않습니다. 그래서 좌표나 크기dimension 기반의 디자인 작업을 하기에 비직관적인 면이 있습니다. 또한 Photoshop은 가이드의 기능이 부실하여 그래픽 디자인의 기본이라 할 수 있는 그리드 시스템을 운용하는데 있어서도 Illustrator에 비해 많은 단점을 가지고 있습니다.벡터 방식의 장단점벡터 포맷의 그래픽 편집 툴의 장점은 우선적으로 작업의 용이성을 들 수 있습니다. 벡터 그래픽은 점과, 점으로 이루어진 선, 면으로 모든 그래픽 요소들이 이루어져 있기에, 간단하게 점과 선을 수정하는 과정으로 그래픽 작업을 유지 관리하기가 정말 좋습니다. 즉, 벡터 포맷의 작업 파일이 보존되는 한 자유로운 수정이 가능합니다. 또한 작업된 벡터 그래픽을 바탕으로 언제든지 다양한 방식, 그리고 원하는 해상도의 비트맵 포맷으로 산출이 가능합니다.벡터 방식의 그래픽 편집 툴은 Adobe Illustrator와 InDesign이 많이 쓰이고 있습니다. 전자는 보통의 그래픽 디자인 작업이 목적일 때, 후자는 문서 편집과 간단한 프레젠테이션이 목적일 때 주로 많이 쓰이고 있습니다. 여기서는 GUI 디자인과 그래픽 디자인에 자주 쓰이는 Illustrator의 장단점에 좀 더 집중해 보겠습니다.Illustrator는 위에서 얘기한 벡터 포맷의 그래픽 편집 툴이 기본적으로 가지고 있는 장점 외에도 여러가지 추가적인 장점이 있습니다. 첫째로 Illustrator는 객체 지향의 편집 툴이라 복잡한 레이어 관리가 필요 없습니다. 디스플레이에 표시되는 오브젝트를 보이는 대로 선택하고 바로 편집을 할 수 있습니다. 그리고 오브젝트의 위계 관리는 포토샵의 레이어 판넬처럼 리스트 상에서 전역적으로 관리하기 보다는 오브젝트의 Arrange 기능을 이용해 상대적으로 위계를 손쉽게 관리할 수 있습니다. 또 Lock 기능과 Group 기능을 활용하여 가려져서 보여지지 않는 오브젝트를 적은 과정을 통해 효율적으로 관리할 수 있습니다.둘째로 밀리미터 및 픽셀기반의 좌표 체계를 기반으로 작업하기가 정말 편합니다. Illustrator는 포토샵과 달리 오브젝트를 선택하면 해당 오브젝트의 좌표와 크기dimension가 모두 바로 표시됩니다. 이러한 특성들은 디자인을 코드로 구현할 때 오브젝트를 선택하기만 해도 모든 정보가 나오기 때문에 개발 작업 시 매우 용이합니다.셋째로 가이드guide 기능을 통해 효과적으로 그리드 시스템을 운용할 수 있습니다. 기본적으로 Illustrator에서의 가이드는 오브젝트와 동일 취급이 됩니다. 그렇기 때문에 가이드를 쉽게 복제 및 이동하여 다른 캔버스 및 파일로 이동하여 사용할 수 있습니다. 또한 정확하게 가이드의 위치 좌표 값을 설정 가능하기에 보다 확실하게 그리드 시스템을 운용할 수 있습니다.Photoshop vs IllustratorPhotoshop과 Illustrator에는 각각의 장단점이 있습니다. 포토샵은 퀄리티가 높은 장식예술을 하기에 좋은 도구고, 일러스트레이터는 좀 더 본격적인 의미의 ‘디자인’을 하는데에 어울리는 도구입니다. 결국 디자인 과정에 있어 각 태스크의 성격에 맞는 적절한 툴을 그때그때 골라 쓰는게 가장 현명하다고 볼 수 있습니다.#스포카 #디자인 #디자이너 #포토샵 #Photoshop #일러스트레이터 #Illustrator #인사이트

여기 크기를 맞춘 도형 조합 A, B가 있습니다. A, B 중 사각형과 원의 크기 비율이 같아 보이는 조합은 무엇인가요?  저는 B조합이 훨씬 더 자연스럽게 보입니다. A는 가로 세로 크기를 똑같이 맞췄으며, B는 상대적으로 면적을 고려해 원형의 크기를 사각형보다 조금 더 크게 그렸습니다. 이처럼 사람의 눈에 자연스럽게 보이도록 조정하는 작업을 ‘시각적 보정’이라고 합니다. 디자이너, 혹은 디자이너가 아닌 사람들도 다양한 프로그램을 통해 미세한 크기를 똑같이 맞출 수 있습니다. 하지만 프로그램이 오브젝트를 인식하는 것과 사람이 보는 것은 다르기 때문에, 때론 아주 정확한 것이 부자연스럽게 보일 수 있습니다. 서로 다른 형태 사이의 차이점을 보완해주는 작업이 필요합니다.  최근 저는 이러한 시각적 보정에 대해 요목조목 잘 정리된 루크 존스(Luke Jones)의 “Optical Adjustment”를 읽었습니다. 여기에 몇 가지 추가 사례를 덧붙여 함께 소개합니다. (“Optical Adjustment”의 원문 번역글은 강수영님의 “시각적인 보정”에서 확인할 수 있습니다.)1. 도형에 따른 크기 조정하기앞서 살펴본 원과 사각형의 크기 조절부터 다시 볼까요? 사방 80pixel의 영역 안에서 사각형은 원보다 넓은 면적을 차지합니다. 우리 눈은 사방 길이를 통해 크기를 인식하기 보다는, 면적을 보고 어림잡아 비슷한 크기를 가늠합니다. 사각형보다 원의 크기를 조금 더 크게 그려주면 비교적 두 도형의 크기가 동일해 보입니다.2. 시각적 무게 중심 고려하기시각적 무게 중심에 따른 정렬은 플레이 버튼 아이콘을 통해서 해볼 수 있습니다. 원형과 삼각형을 중앙 정렬하면 A 아이콘처럼 됩니다. 중앙에서 빗겨나 있는 것처럼 보이는데요, 이는 삼각형의 무게 중심이 원형의 중심과 맞지 않아서 그렇습니다. 이렇게 서로 다른 형태의 오브젝트를 정렬할 때는 무게 중심을 고려하여 B 아이콘처럼 수정해주는 것이 좋습니다.3. 면적 대비 색상 조정하기면적에 따라서 색상의 무게감이 달라집니다. A는 파란 아이콘에 비해 텍스트 컬러가 살짝 연해 보입니다. 이렇게 넓은 면적과 비교적 좁은 면적(텍스트/라인)에 같은 색상이 쓰이는 경우가 많습니다. 이럴 때 좁은 면적의 컬러를 조금 더 짙게 수정해주면 면적의 넓이와 상관없이 (비교적) 동일한 색상으로 인지됩니다.3. 형태를 고려해 오브젝트 정렬하기이번에는 슬로워크에서 디자인한 DMZ국제다큐영화제 시그니처를 예시로 정렬을 살펴보겠습니다. 자세히 보면 시그니처의 우측 가장자리에 ‘~제' 로 끝나는 첫줄과 ‘-29.’로 끝나는 마지막줄이 있습니다. 온점은 한글보다 공백을 많이 포함하고 있습니다. 그래서 A처럼 정직하게 정렬하면 마지막줄만 움푹 들어간 것 처럼 보입니다. 이를 B처럼 튀어나오게 수정해주는 것이 보기에 자연스럽습니다.  4. 명도에 따라 굵기 조정하기4번의 컬러 조정과 같은 맥락으로, 오브젝트의 명도에 따라 굵기가 달리 보일 수 있습니다. 좌측의 흰색 텍스트와 우측 상단 검은색 텍스트(굵기 조정 전)는 같은 굵기의 폰트입니다. 검은색 텍스트가 상대적으로 가늘어 보여서 조금 더 굵게 수정했습니다. 네거티브, 포지티브 적용을 동시에 할 때 이런 점을 고려하곤 합니다.5. 영문폰트와 한글폰트 조합시 조정하기한글폰트와 영문폰트를 조합해서 디자인하는 경우가 많습니다. 편집디자인 툴인 인디자인 프로그램에는 ‘합성글꼴’이라는 기능이 있어 숫자, 영문, 국문, 기호 등을 각각 다른 폰트로 지정하고 세세하게 크기도 다르게 할 수 있습니다. 서로 다른 폰트를 억지로 이어붙이는 것이기 때문에, 크기값이 같아도 한글폰트가 더 커보입니다.(좌측 텍스트) 이때 크기와 높낮이를 직접 조정해주는 것이 좋습니다.(우측 텍스트)6. 커닝(글자 간격 조정)하기왼쪽 텍스트를 자세히 들여다보면 글자의 각기 다른 모양 때문에 배열이 균등하지 않아 보입니다. 이때 글자의 형태를 고려해 적당한 간격으로 보이도록 수정하는 것을 커닝(kerning)이라고 합니다. 커닝은 상대적으로 공백을 많이 가진 글자(숫자 1, 알파벳 A, W, V)일수록 조정을 필요로 합니다. 디자인을 전공하면 가장 기초적으로 배우는 부분임에도, 저는 커닝을 완벽히 하는 것이 제일 어렵습니다.커닝을 연습할 수 있는 사이트도 있습니다. 완성도에 따라 점수도 매겨줍니다. 간단하게 여러분의 눈썰미가 얼마나 날카로운지 확인해보세요. -> 커닝 해보기참고: Luke Jones - Optical Adjustment#슬로워크 #스티비 #디자인팀 #디자이너 #꿀팁