제목이 좀 거창하다. 디자인 철학!! 철학이라는 단어와는 그다지 친하지는 않은데.. 그래도 저렇게 쓰고 싶었다. 파펨은 나름의 철학이 있다고 생각하니까.. 철학이 꼭 멋있을 필요는 없는 것이 아닐까?라는 생각에 글을 시작하고자 한다. 우선 제목이 던진 질문에 대해서 먼저 답변을 하자면...파펨의 디자인 철학은 "Industrial"이다.Industrial이라는 말이 의미하는 것이 무엇이 있을까?영어사전 industrial 미국·영국 [ɪn|dʌstriəl] 1. 산업의   2. 공업용의   3. 산업 시설이 많은산업용, 공업용이라는 의미가 있는데.. 파펨의 디자인이 산업용, 공업용 목적이라는 의미는 아니고, 산업용 제품들의 특징을 살펴보면, 사용자를 위해 멋지게 꾸미는 디자인이라기보다는 사용자의 편의와 기능이라는 핵심에 focus를 둔 것들이 많다. 파펨의 디자인도 향수/향기라는 "본질"에 보다 focus 하고, 불필요한 치장을 줄여가자 라는 것이 핵심이다.최근 출시된 30ml 제품은 일단 외관에서도 industrial이라는 느낌 (뭔가 투박하고, 금속적인 느낌?)을 잘 반영하고 있지만, 패키지의 소재에서도 그 특징을 반영하고자 고민을 하였다. bottle은 알루미늄으로 만들어졌는데, 이 알루미늄 bottle은 원래 향기를 제작하는 회사에서 fragrance oil(100% 순도의 향기)을 담는 목적으로 사용되던 것이다. 이 원래의 목적을 잘 적용하는 것이 파펨의 bottle에도 잘 어울릴 것이라는 생각에서, 일반적으로 사용되는 유리병들보다 7~8배는 비싸지만 이 aluminum bottle을 사용하게 되었다. 게다가 이 bottle은 독일에서 생산되어, 한국까지 도착하는데 배로 1.5 개월이라는 시간까지 걸린다는 단점이 있는데, 이는 operation에서의 risk로 존재하기도 하니.. 쉬운 접근은 아니었다. OTL그리고, 외관의 패키지는 골판지를 이용하였는데.. 이 또한 흔히 제품의 외관 혹은 배달용(delivery) box에는 골판지를 사용한다는 점에서 이 모티브를 가져오게 되었다. 단, 파펨의 철학 중 하나인.. 남들 다하는 것은 하지 않는다는 점에서, 우리는 박스 안에 그냥 넣기 보다는 우리의 제품이 그 사이에 위치한다(?) 라는 아이디어를 적용해 보았다.이렇게 패키지 디자인에 적용된 industrial이라는 느낌도 있지만, 그것보다 먼저.. 파펨이라는 서비스의 시작이 industrial이라는 keyword와 닿아있다. 파펨의 EDP 향수 제품은 새로운 향기를 조향하여 만드는 것이 아니라, 드롬(DROM)이라는 100년이 넘은 독일 fragrance 회사가 이미 만들어 놓은 샘플 들 중에 큐레이션을 통해 만들어지는 것이다.이미 완성도를 가진 제품들이 sample용 선반에 숫자화 된 code(e.g. 86245689)로 존재할 때, 파펨은 그 제품에 생명력을 불어넣어 제품으로 만드는 작업을 하는 것이다. 파펨의 시작부터 이러하였고, 그렇기 때문에 향기를 잘 살려내는 그 본질에 focus 하자는 것이 우리의 목표다.이러한 아이디어가 서비스의 출발점이다 보니.. 5ml 제품의 package 또한 향수라는 제품이 일반적으로 가지고 있는 향수 병의 선입견 (e.g. 아름다운 병 모양) 과는 다르게, 무광 검정 bottle에 묘하게 디자인된 category 분류용 기호만이 덩그렇게 달려있다. 파펨이 고객과의 대화 혹은 survey를 진행하게 되면, 왜 검정 바틀인가요? 혹은 투명한 것으로 바꿔주세요.. (물론 좋다고 말씀해 주시는 분들도 꽤 있다.. ^^;;)라는 의견들이 제법 있는데..  사실 파펨의 indentity라는 부분을 쉽사리 바꿀 수는 없는 것이라, 오히려 왜 우리가 그렇게 디자인하였는지를 설명해드리는 편이다.한 가지 추가 설명을 하자면, 위의 5ml bottle용 포장은 industrial 키워드가 조금 다르게 해석되어 있는데, 꼭 필요한 정보의 전달을 한다는 차원에서 카테고리의 로고(e.g. 1. F/F)가 표현되었고.. 또한 파펨이라는 제품의 특징 중 하나인 Subscription, 즉 매달 새롭게 출시되는 ART라는 기본 컨셉을 표현하여야 하였다.그래서 우선 향수가 가진 후각적인 ART, 그리고 향기를 표현하는 이미지의 visual art, 게다가 BGM의 청각적인 ART까지.. 그래서 이렇게 매달 제품을 만들어 출시하는 것이 마치 앨범 하나를 만들어 내는 것이라는 생각을 하게 되었고, 그래서 CD 케이스의 모양을 만들고 싶다는 욕심을 부리게 되었다. 마치 월간 윤종신과 같이... online 서비스를 제공하는 서비스는 물론이고, 특히나 제품을 생산하는 "Startup"에게 디자인 철학을 갖는다는 것은 쉽지 않은 이야기일 수도 있다. 그렇다고 파펨이 우월하다?라는 말을 하는 것 이기보다는..파펨은 industrial이라는 명확한 디자인 방향성이 있다 보니, 이렇게 저렇게 흔들리지 않고 계속해서 나아갈 지향점이 있다는 점이 중요한 point#파펨 #스타트업 #창업가 #창업자 #마인드셋 #인사이트 #디자인 #철학

HIG__HIG__는 __Human Interface Guidelines__의 약자로 비주얼 적인 디자인 규칙을 설명하고, 작업 동작에 대한 설명과 기능적인 설명을 통해 애플리케이션 __개발을 어떻게 하면 좋을지에 대한 방식을 추천한 개발 문서__입니다. 그 대표적인 예로 iOS HIG와 Android HIG 두 개가 있습니다. 이번 글에서는 두 가지의 HIG 대한 특징에 대해 알아봅시다.iOS HIGiOS HIG는 iOS의 애플리케이션을 개발하는 데 있어서 아주 중요한 문서입니다. 왜냐하면 이 문서가 앱 개발을 할 때 __기본적으로 지켜줘야 할 부분들을 설명__하고 있고, 그 내용이 지켜지지 않을 시 __App store에서 거절(reject) 될 수 있기 때문__입니다. 따라서 iOS HIG를 꼭 읽고 가이드라인에서 제시한 기준에 따라 개발을 하셔야 합니다.iOS HIG는 아래와 같은 내용을 담고 있습니다.플랫폼의 특성휴먼 인터페이스 원칙어플리케이션 디자인 전략iOS로 전환한 어플리케이션 사례사용자 경험 가이드라인iOS 기술 가이드라인iOS UI 요소 가이드라인아이콘과 이미지 가이드라인Android HIGAndroid HIG 또한 개발할 때 참고하면 좋습니다. iOS HIG처럼 기본적으로 지키지 않으면 거절(reject) 되거나 하지는 않지만, __Android가 제공해주는 다양한 기능을 설명__해주었습니다. 하지만 해당 문서는 플랫폼의 특성 등의 UI 요소들에 대한 내용이 부족하므로 __Android Design을 함께 참고 해서 보시면 개발하시는 데 도움__이 되실 것입니다.Android HIG와 Android Design는 아래와 같은 내용을 담고 있습니다.애플리케이션 개발 원칙어플리케이션의 비주얼 스타일 가이드 라인Android UI 패턴 가이드라인아이콘 디자인 가이드라인작업 디자인 가이드라인메뉴 디자인 가이드라인두 HIG의 애플리케이션 개발 가이드라인 비교iOS : iOS HIG안에 휴먼 인터페이스 원칙을 보면 사용자가 직접 선택해야 한다든지, 눈으로 보고 선택해야 된다든지 하는 내용이 있습니다. 그것을 보면 iOS는 사용자 중심 관점을 가진 개발 가이드라인이라는 것을 알 수 있고, 개발자에게 애플리케이션 개발 전략에 대한 내용도 가이드라인에서 제시하고 있습니다.Android : Android HIG안에 애플리케이션 개발 원칙을 보면 강력한 화면과 소리로 즐거움을 제공하거나, 다양한 기능에 대한 내용이 있습니다. 그것을 보면 Android는 심미성 중심 관점, 기능성 중심 관점을 가진 개발 가이드라인이라는 것을 알 수 있고, 개발자에게 애플리케이션 개발에 대해 iOS와 달리 개발 전략보다는 다양한 기능이 있으니 개발자의 자유에 맡겨 다양하게 개발하는 것을 가이드라인에서 제시하고 있습니다.두 플랫폼에 대한 UI 가이드라인 비교플랫폼에 따른 UI 크기 설정의 차이iOS : iOS는 디바이스들이 한정되어 있기 때문에 아이콘이나 레이아웃이 일정합니다. 따라서 iOS HIG에서 제시한 UI 크기를 지켜주셔야 합니다.Android : Android는 디바이스들이 해상도가 다 다르고 디스플레이들이 다양하다 보니 레이아웃 최적화를 해야 합니다. Android Design에서 이를 해결하는 방법으로 두 가지 방법을 제시하였습니다. 기본이 되는 중간 크기에서 일정 비율로 높이거나 줄이고 아니면 아예 큰 크기의 디스플레이로 시작하여 필요하다면 일정비율로 줄이는 방법을 권장하고 있습니다.터치 동작에 의한 플랫폼의 행동 비교iOS HIG는 터치 동작을 드래그나 대상을 선택하는 행동을 하는 것으로 정의하였습니다.Android Design에서는 터치 동작을 단순한 터치와 오래 누름을 통한 터치 두 가지로 나누어 정의하였습니다. 단순한 터치는 iOS HIG와 같으나 오래 누름을 통한 터치는 컨텍스트 메뉴나 컨텍스트 액션 바를 사용하는 데 이용됩니다.알림 기능에 대한 비교두 플랫폼 모두 짧은 단어들로 명시하기를 원합니다. 그러나 기술적인 문제나 어떤 설명이 필요한 상황이면 사용자에게 충분히 설명해야 합니다.iOS : iOS HIG에 경우 알림 버튼이 2개일 경우 항상 왼쪽 버튼이 어두운색이어야 하고 오른쪽은 밝은색이어야 한다고 정의합니다. 왜냐하면 가끔 사용자가 내용을 읽어보지 않고 버튼을 누르는 경우도 있기 때문에 오른쪽 버튼은 안전한 기본 작업을 수행하게 하여야 합니다. 위험성을 가진 액션을 제공할 경우 취소버튼을 오른쪽 버튼으로 하여 밝게 해야 합니다. 그렇지 않은 안전한 액션일 경우 취소 버튼을 왼쪽에 어둡게 배치해야 합니다.Android : Android Design에서는 알림 버튼의 배치나 색에 대하여 어떠한 가이드라인을 제시하지 않았습니다. 그러나 배치와 색에 관하여 다양한 디자인을 사용할 수 있도록 다양한 배치와 색에 대해 기술하였습니다.BAR 기능에 따른 비교1현재 뷰의 제목을 나타냅니다. 그리고 뷰의 이동을 나타낼 수 있는 버튼을 추가할 수 있으며, 뷰에 있는 내용을 관리할 수 있는 버튼을 추가할 수 있습니다.2뷰나 모드를 빠르게 전환을 할 때 주로 사용합니다. 모드 요소들에 대한 기능 버튼을 가지는 기능으로서 사용하면 안됩니다.3디스플레이를 전환할 때 주로 사용합니다. 위의 Bar와의 뷰나 모드전환보다는 더 크게 디스플레이가 전환한다고 생각하시면 더 알아들으시기 쉬우실 것입니다. 그리고 액션을 제공하거나 모드 요소들에 대한 기능 버튼을 제공할 때 사용합니다.차이점Tool BarBottom BarTab BarTop BarNavigation BarMain Action BariOSAndroid가이드라인에서 주로 버튼의 사이즈나 최대 몇 개까지 버튼을 배치하는지에 기술하였습니다. 그리고 Tab Bar와 Tool Bar 모두 아래에 있어 사용하기 때문에 두 가지를 같이 사용하지 못합니다.가이드라인에서 주로 버튼을 기능에 따라 다양한 모양으로 나누었습니다. 그리고 iOS와는 달리 Top Bar와 Bottom Bar의 위치가 나뉘어 있어서 두 가지의 기능을 동시에 사용 가능합니다.각 플랫폼별 고유 기능iOS : iOS HIG에서 iOS만의 고유 기능을 들자면 그 대표적인 예로 액션 시트를 들겠습니다. Tool Bar에 있는 버튼을 눌러서 일종의 선택을 표현하는 기능입니다. 액션 시트는 위에 있을수록 사용자 눈에 잘 띄고 위험성 있는 버튼은 빨간색으로 사용해야 합니다. 그리고 사용자가 가끔 홈 버튼을 누르려다 화면의 아래쪽을 누르는 경우가 있으므로 맨 아래 버튼은 취소 버튼으로 해야 합니다.Android : Android HIG에서 Android만의 고유 기능을 들자면 그 대표적인 예로 Holo와 Navigation Bar에 대해 들겠습니다. 둘 다 이번에 ICS 로 업그레이드되면서 나온 기능입니다. Holo에 경우 단조로운 Android의 스타일을 다양하게 바꾸기 위해 나온 기능입니다. Android의 Navigation Bar의 경우 iOS의 Navigation Bar와 엄밀히 말하면 다릅니다. Virtual Navigation Bar로 예전에 디바이스에서 버튼으로 있던 것을 Bar 형태로 가지고 온 것입니다.글을 마치면서이번 글에서는 대략 두 종류의 HIG에 대해 다뤄 봤습니다. 실제로 저희 앱에 가이드라인의 내용을 적용하였고 가이드라인에 대한 자세한 내용이 궁금하시면 아래의 링크를 참조해 주시길 바랍니다.iOS HIG : iOS Human Interface GuidelineAndroid HIG : Android Human Interface GuidelineAndroid Design : Android ICS Design#스포카 #HIG #디자인 #애플리케이션 #앱디자인 #프로토콜 #협업 #가이드라인 #인사이트 #꿀팁

생각보다 훨씬 많은 분들이 '톤앤매너' 라는 말을 쓰고 있더라구요. 컨셉이란 말도 왕창 쓰고 있구요. 그런데 도대체 그게 정확히 뭔지 아는 분은 굉장히 드물었어요. 그래서 오늘은 이걸 좀 알아보려구 해욤. 톤을 살펴볼까요. 파스텔톤, 비비드톤, 팬톤(?), 화이트톤 등등... 이런톤 저런톤이 많아요. 톤은 색과 밝기를 의미해요. 어려운 말로 색채와 명암이죠. 어떤 색을 쓰는가.색이 진한가 연한가색이 밝은가 어두운가이걸 결정하는게 톤이예요. 매너를 살펴볼까요. 매너는 화풍이나 스타일을 의미해요. 몽유도원도를 그린 안견씨는 이곽파화풍의 영향을 받았어요. 침식된 흙산을 좋아하고, 선이 끊김없이 이어지는 느낌, 산의 아랫부분이 밝은 형태의 그림이죠. 고흐는 밀레와 램브란트 스타일의 밝디밝은 인상주의 화풍을 어둡게 변형시켰어요. 또한 곡선을 강하게 그리고 신기방기한 원근을 사용하죠. 이렇듯 사람이 만들어내는 모든 것에는 일정한 흐름이란게 있어요. 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인사업체를 하셔야겠죠?그동안 기이이이인 글을 읽어주셔서 매우 감사했습니다 :) 이번 위클리는 '디자이너 사용설명서' 라는 제 첫 책이 나와서 그 내용을 바탕으로 적은 것이긴 하지만, 책에 나온 내용이 똑같이 들어가있진 않아요. 브런치에선 브런치의 말투와 내용이 있으니까요. 책 못지 않게 이번 위클리도 작은 도움이 되었다면 오히려 제가 감사하고 뿌듯할 일입니다.애정해주셔서 감사하고, 못다한 이야기와 나머지 주저리는 '삶분의일' 매거진에서 또 계에에속 하도록 하겠습니다!!!~~ 빠이.안녕히들.

더팀스 사이트는 아직 얼마 되지 않은 젊은 사이트입니다. 더 좋은 서비스를 제공하기 위해 지속적으로 익명의 사용자 경험 데이터를 축적하고 이용자의 행동 패턴과 흐름을 실시간으로 분석하면서 꾸준히 사용성 좋은 사이트로 변모 시키는데 노력하고 있습니다. 그동안 저희 팀만의 사이트 개선 방식에 대해 공유할까 합니다.설계에 대한 역사닷컴 부흥기 시절, 많은 디자이너들은 화면 레이아웃에 대한 정답을 찾아가고 있었습니다.그 당시 대중에게 보급된 대부분의 컴퓨터 최소 모니터 해상도는 압도적으로 1024x768이 많았습니다.그리고 해당 해상도를 바탕으로 화면 구성에 대한 다양한 시도들이 일어났는데, 그중 절대적인 지지를 받던 레이아웃은 바로 960 Grid System 이었습니다.*자료 화면 960.gs 사이트 내 16그리드 방식 / 12 그리드 방식960gs는 해외 디자이너 커뮤니티에서 굉장히 많은 방법과 시도를 통해 얻어낸 또 한가지의 방법이었습니다. 960 grid 패턴을 적용하면서 아래와 같은 효과를 통한 콘텐츠 배치가 가능해졌습니다.1. 1024 최소 해상도에서 모든 콘텐츠를 유저들이 보기 편하게 안정적으로 공급할 수 있다.(스크롤 바를 포함한 창 옆의 모든 여백들을 제외하면 960 픽셀 내 표현할 수 있는 폭이 나옵니다.)2. 12개 혹은 16개로 콘텐츠 비를 쪼개어 문단 단위와 콘텐츠 단위를 block화 시킬 수 있고 홈페이지의 레이아웃을 잡는데 비교적 간단하다.웹 페이지의 근원이 오프라인 문서를 웹으로 표현하는 것에 그 시초가 있다 보니 다양한 시도가 나오게 된 것 같습니다. 지금은 변모했지만, 적극적으로 Grid System을 활용하는 다양한 방식을 소개하기 위해 아래와 같은 사이트도 있었습니다.*the grid system 사이트* 12 컬럼 기준으로 작업된 국내 네이버 사이트* 16 컬럼 기준으로 작업된 국내 다음 사이트유저 사용성 패턴 960 Grid 와 함께 다양한 UX 개선에서 여러가지 시도와 기법들이 나오기 시작했는데, 그 중 두가지 패턴이 Z-layout과 F-layout입니다.Z-layout은 2010년도에 UX 개선에서 꼭 필두로 배우고 넘어가야할 사이트 개선법중 하나였습니다. 다만, 2011년 이후로 너무나 다양한 화면들이 생겨났고 (2011년 아이폰을 기점으로 다양한 디바이스 탄생) 다양한 해상도를 지원하는 부분에서 비교적 절대적이다 라는 타이틀을 얻은지 얼마안되 내려놓게 되었습니다. 최근 대부분 좋은 UX경험을 주는 사이트들은 디바이스 형태에 맞춰서 반응형으로 컨텐츠가 읽기 편하도록 그 구성을 자유롭게 변경하는 타입을 취하고 있습니다.Z-layout의 근간은 웹 사이트에 접속하여 콘텐츠를 읽는 방식에서 위의 이미지와 같은 흐름으로 시선처리를 한다는 것 입니다. 따라서 가입률을 높히거나 사이트에 무언가 액션을 더 주기 위해 아래와 같은 방식으로 개선하면 좋다고 소개하고 있었습니다.사용자의 콘텐츠를 읽어들이는 시점이 1번에서 2번으로 다시 3번에서 마지막 4번까지.따라서 1번에서 먼저 브랜드 네임을 보여주고 가입 버튼을 한번 상기 시킨 후 마지막 4번 시점 처리에서 목표를 달성할 수 있도록 구성하라는 취지 였습니다.그 다음으로 콘텐츠를 퍼블리싱 하는 사이트에서 가장 많이 보이는 F레이아웃 입니다.F레이아웃 경우 정말 많은 테스트에 의해 정론으로 굳어졌다고 볼 수 있는 레이아웃 구조 입니다. 위와 같은 경우 히트맵을 확인해 본다면, 마우스가 머무는 곳과 시각이 F형태를 띄고 있는 것을 확인 할 수 있습니다.사이트에 접속하여 콘텐츠를 (주로 글) 소비하는 유저들은 아래와 같은 방식을 따르고 있다는 데이터 분석에 의거하여 내린 결론 이었습니다. 형태의 모습이 F형태를 띈다고 하여 F-layout 이라 부르고 있습니다.대부분의 F레이아웃 페이지를 떠올린다면, 워드프레스 형태의 사이트와 기사를 발행하는 사이트들에 많이 해당 레이아웃으로 배치한 것을 떠올릴 수 있을 것 입니다. 이러한 흐름으로만 콘텐츠를 배치해도 유저가 사이트에 머무는 시간을 획기적으로 늘릴 수 있으며, 적절한 광고 배치를 통해 수익을 올릴 수도 있을 것 입니다.F 레이아웃의 창시자 Nielsen Norman Group에서는 꾸준히 왕성한 UX관련 내용을 퍼블리싱중이니 함께 확인해도 좋을 것 입니다. ( https://www.nngroup.com/reports/ )사례 적용더팀스 사이트는 이러한 두 레이아웃 방식과 지금은 다양한 해상도로 인해 잘 사용되지는 않지만 960grid의 근간으로 설계된 bootstrap 12 컬럼 방식과 히트맵을 통해서 꾸준히 사이트의 흐름과 사용성을 개선해 나가고 있습니다.더팀스 팀이 사이트를 개선하는 방식중 가장 중요하게 여기는 것 중 하나는“사용성 좋은 디자인은 항상 스토리 라인을 가지고 있다.” 입니다.아래 이미지는 제가 함께 했던 회사의 2012년 9월의 메인 페이지입니다. 그 당시 꽤 많은 비용을 주고 뉴욕 출신의 모 그래픽 디자이너에게 해당 디자인을 부탁하여 나온 안이었습니다.위의 디자인 안으로 엄청나게 마케팅도 해보고 여러가지를 시도해 보았습니다.그러면서 확실하게 알게된 것은 사이트 내 너무나 많은 것을 알리고자 하면서 흐름이 무너졌다는 것 입니다. 분명 위의 Z-layout 방식을 통하자면 [디자인 의뢰하기], [콘테스트 구경하기]가 클릭율이 높아야하고, 흐름 내에서 동영상을 클릭해서 보는 것이 맞을 겁니다.그러나 기획자의 설계와 다르게 해당 페이지에서 가장 많이 클릭 된 부분은 “로고 디자인 배너” 부분 이었습니다.기획자는 우리의 사이트는 이러한 모든 것들을 한다라는 메시지를 주면서 다양하게 어필하고 싶어했지만, 실제 사이트를 이용하는 유저들은 “너희 서비스가 어떤 일을 하는 것은 관심이 없다. 다만 우리는 우리 회사의 괜찮은 로고 디자인을 해줄 수 있는 곳을 찾고 있을 뿐이다.” 라는 고객 답변이 대다수 였습니다.덧붙여서 마케팅 집행 자체도 클릭율이 높은 로고 디자인에 치중된 유저들이 유입되도록 설계 되어있었으니 사이트에서 말하는 것과 마케팅에서 말하는 것의 맥락이 같지 않아서 ROI가 좋을 수 없었습니다.이러한 패턴을 바탕으로 2013년 2월 데이터와 유저의 행동을 바탕으로 간략하게 맥락을 압축해서 메인을 내부 디자인 팀에서 리뉴얼 했습니다.먼저 크게 우리 사이트가 뭘 하는 것이다를 텍스트로 설명하기 보다는, 먼저 대표적인 포트폴리오를 이미지로 표현하고, 유저에게 느낌을 전달하는데 초점을 맞췄습니다. 해당 리뉴얼을 통해 얻게된 이점이라면 로고디자인을 하러 왔던 고객들도 먼저 포트폴리오를 둘러보고 로고와 패키지디자인을 함께 하고 싶다는 문의가 계속해서 들어왔다는 것 입니다.메인 페이지에서 먼저 구구절절하게 텍스트로 푸는 것이 아니라, 어떠한 것을 한다는 느낌을 전달하고 그 다음 스텝에서 하나씩 그 이야기를 풀어 나가는 방식을 취했습니다. 최종적으로 너무나 많은 것을 알아보고 싶은 고객에게는 상세한 페이지를 제공하여 그 갈증을 해소 시키는 방식으로 페이지를 구성 했습니다. *애플 아이폰 4 런칭때 사이트 모습*넷플릭스 메인 카피 및 버튼들사이트에 접속하는 유저는 메인 페이지에서 정말 몇 초 내 관심을 끌어내지 못한다면, 바로 창을 닫아버리고 맙니다. 같은 맥락에서 아무리 환상적인 서비스라도 초기의 관심을 끌지 못한다면, 유저는 바로 다음페이지로 넘어갈 여지조차 주지 않습니다.따라서 메인 페이지에서는 유저에게 먼저 관심을 끌게 만들고, 액션으로 이어질 동기를 끊임없이 만들어줘서 사이트 내 숨어있는 퍼즐을 맞추도록 해야 합니다.동기까지 부여까지 성공했다면 아래의 원칙을 지켜 사이트를 구성 합니다.1. 어필하고 싶은 페이지 내 포인트를 몇개로 잡을 것인지 (정말 엄청난 매출을 내는 사이트도 포인트로 집중을 두는 버튼이나 텍스트는 많아야 1-2개 입니다.)2. 유저들은 절때 글을 읽지 않는 다는 것을 떠올리고 시각적인 단서를 꾸준히 제시할 것3. 2번 기준에 의거하여 많은 텍스트는 불필요하며, 적절한 공간에 적절한 글의 양만 부여 할 것.4. 데이터를 통한 지속적인 사이트 개선을 실시할것위의 내용을 토대로 더팀스는 초기 전략을 구성 할 때 먼저 유저가 많이 머무를 수 있도록 소비 지향성을 가진 사이트로 운영이 되었습니다.*2016년 2월 기준 초기 더팀스 메인 화면초기 사이트는 현재 아래와 같은 모습으로 변경 되었습니다.*2016년 8월 기준 더팀스 메인 화면초기 더팀스 사이트는 회원가입을 하여 무언가를 할 수 없는 구성이었습니다. 대부분 소비성 콘텐츠로 이뤄져 있었습니다. 이는 사이트 내에서 무언가 행동을 유발시키고 액션을 취할 수 있는 개발이 마련 되지는 않았으나, 유저들이 이러한 기능이 있을 경우 호응이 있을지를 먼저 시장에 내놓고 테스트 하는 것이 더 중요했습니다. 다행히 생각하는 것 이상으로 호응도가 좋았기에  지속적으로 유저의 행동패턴을 반영하여 아래와 같은 사이트 작업의 개선이 시행됐습니다.*2016년 9월 기준 더팀스 메인 화면#더팀스 #THETEAMS #UX #UI #디자인 #UX디자인 #UI디자인 #인사이트 #서비스개선