스토리 홈

인터뷰

피드

뉴스

조회수 1567

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

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

브랜드, 기억되고 생각나다.

성공한 은사님께서 그런 말씀을 해 주셨습니다. '딱 한번만 성공해라.' 이 말은 나의 분야에서 남들이 기억할만한 일을 하면, 후에는 비슷한 일이 있을때 사람들이 나를 기억하게 된다는 말입니다. 브랜드도 다르지 않습니다. 내가 만든 브랜드가 사람들에게 '딱 한번만 기억'되면, 당신의 브랜드는 성공의 길에 들어서게 되는 것입니다.사람들의 기억에 남는 브랜드가 되기 위해 즉, 효과적인 브랜드 마케팅을 하기 위해 우리는 무엇을 알아야 할까요?#1. 고객에게 기억 될 단 하나의 이미지를 어필하라!자기 PR의 시대, 무한경쟁사회에서 우리는 내가 어떤 부분이 남들과 다른지 이야기합니다. 연예인들도 자신만의 '캐릭터'를 만드는 것이 성공을 결정짓는다고 말합니다. 이론적으로는 간단한 이야기이지만 실제 고객사와 대화를 나눠보면 사정이 다릅니다.브랜드의 경쟁력을 분석하기 위해 실제 사업가에게 '마케팅시 어떤 메시지를 넣을까요?' '이 브랜드가 어떤 이미지로 기억되었으면 하나요?' 물어보았습니다. '우리는 가격이 저렴하니까 그 내용을 좀 넣어주세요.''비슷한 효능의 제품들 중에 월등히 싼 것인가요?''아뇨, 싼 편에 속해요.''우리 제품이 좋은 제품으로 알려졌으면 좋겠어요.''원료가 좋은가요? 디자인이 좋은가요? 어떤 부분이 좋은가요?''원료가 좋아요. 저희 정말 열심히 만들었거든요.''경쟁사랑 비교해서 차별화 될만한 수준인가요?''비슷하긴 한데, 꽤 좋은 편이예요.'열정적인 사업가들은 제품이나 서비스를 만들 때, '좋은 것'을 만드려고 노력합니다. 물론 저렴한 가격에 좋은 제품을 만드는 것은 무엇보다 중요합니다. 하지만, 시장에 내 놓았을 때(제품이나 서비스의 경쟁사가 존재하는 시장) 이 브랜드를 기억할 수 있는 혹은 기억하고 싶게 만드는 이미지를 생각하지 않는 것 같습니다. 수십년이 지나고 세대가 변해도 사람들의 기억속에 존재하는 브랜드를 보면, 그들은 단 하나의 메시지를 말합니다.<출처 : www.complex.com/sneakers/>나이키는 불가능에 도전하는 스포츠맨 정신인  'JUST DO IT'을 말해왔고, 애플은 다름'Think different'를, 전 세계인이 아는 코카콜라는 red컬러와 '언제나', '상쾌함', '진정한 맛'을 강조해 왔습니다. 당신의 브랜드가 사람들에게 오래 기억되었으면 한다면, 우선 '하나의 메시지'로 시작하세요!#2. 품질 그 이상의 경험을 전달하다.한 브랜드를 사람들이 찾고 오랫동안 좋아하려면 품질이 물론 중요합니다. 사회, 교육, 기술의 발달로 대부분의 회사들이 일정 수준 이상의 제품과 서비스를 내놓고 있습니다. 극단적으로 '저렴한 가격에 꽤 쓸만한 제품을 만드는' 다이소 같은 기업이 등장하면서 품질은 차별화의 수단이라기 보다 브랜드의 필요조건이 되어가고 있습니다.이제는 가성비를 위한 소비 보다는 소비를 통해 나를 표현하고, 소비에 의미를 두려고 하며, 감정을 위한 소비를 합니다. 때문에, 이제는 브랜드에서 '나를 표현하기 위한 옷'이나 '굿즈', '행복을 나눠주는 00패키지'등의 가치나 의미, 경험에 집중해야 합니다.KOOVS의 사이트는 고객참여를 통해 사이트내의 고객 경험을 완성 하기도 하며,<출처 : www.card-gorilla.com>현대카드처럼 제품 자체에 변화를 주어 새로운 경험을 전달하기도 합니다.품질 외에 온라인이나 마케팅 프로모션, 오프라인 등으로 고객들이 경험할 수 있는 요소들이 함께한다면 당신의 브랜드의 성장을 도울 것 입니다.#3. 고객에게 반응하고, 살아있는 브랜드로 만들자!웨딩홀 투어를 했었습니다. 약 한달정도 시간이 날 때마다 돌아다녔는데, 대부분이 쓸만해 보이는 홀을 리모델링 한다고 하였습니다. 그 중에서는 트렌드에 맞춰서 전체를 바꾼다는 홀도 있었고, 필요한 부분만 선택적으로 분기별로 바꾼다는 홀도 있었습니다. 그런데 왜 그런지 트렌드에 맞춰서 전체를 바꾼다는 홀보다'신랑 신부님들의 의견을 듣고 락커를 추가하고, 버진로드를 대리석으로 바꾸려고 준비하고 있어요. 블랙 컨셉이나 조명은 좋아하시는 분들이 많아서 유지하고, 부분적으로 조금씩 변화를 주려고 합니다.'라고 말한 상담원의 말이 와 닿았습니다. 손님 한사람 한사람의 이야기를 귀 귀울여 듣고 언제든지 유연한 자세로 변화하겠다는 느낌을 받았던 것 같습니다.지금 좋은 것도 내일이 되면 옛 것이 되기 때문에, 주변에 쇼핑몰로 성공한 젊은CEO는 주1회 사용자의 행동흐름을 분석하면서 UI에 조금씩의 변화를 주고 있다고 합니다. 지금 좋다고 그 상태를 고수하는 것 보다는 끊임없이 고객의 이야기를 듣고 상황에 맞춰서 변화하려는 자세가 필요합니다.  <출처 : uxd-trend blog>레터링 느낌의 브랜드 이미지를 고수하면서 시대에 맞춰 조금씩 변화만 준 코카콜라 로고처럼 브랜드의 서비스, 제품, 이미지등에 대한 고객의 반응을 매 순간 체크하면서 변화할 수 있는 브랜드가 되어야 합니다.'이건 특별한 서비스야' 하면서 사업을 만들었는데, 금방 후발주자가 비슷한 서비스를 출시합니다. 그래서 스타트업 시장에서 투자자들의 단골 질문이 후발주자에 대한 대응을 어떻게 할 것인가? 입니다. 이때, 가장 중요한 것은 브랜드입니다. 배달의 민족은 우후죽순 생기고 있는 후발주자에도 불구하고 고유한 브랜드 아이덴티티로 현재에도 1위를 지키고 있습니다. 반대로 소셜커머스의 첫 시작은 티몬 이었으나 쿠팡의 로켓배송 브랜드 전략으로 선발주자를 앞지르는 사례도 있었습니다.지금 당장 공격적인 마케팅으로 갑작스럽게 성과를 올릴 수는 있겠지만, 우리는 이러한 마케팅 방법을 좋아하지 않습니다. 지속적이고 오래도록 기억되고 사랑받으려면 당신의 브랜드가 가진 고유한 가치를 바라보았으면 좋겠습니다. 오피노 자세히 보러가기
조회수 972

디자인하다보니 강렬하게 원하게 되는 20가지 희망사항

일하다가 중간에 멈추고 쓰는 글입니다. 손목이 시큰거려가꼬 도저히 1400번째 레이어를 만들수가 없었거든요. 가끔 이런 생각이 듭니다. 아니 세상이 이렇게나 좋아져서 지금 자동차가 날라다니고 우주엘리베이터가 만들어지는 시대에 도대체 우리 어도비 사람들은 왜 자동 레이어 정렬 따윌 만들 생각을 못하는 건지 (안하는 건지) 막 답답하고 애꿎은 마우스를 바꿔봐도 결국 내가 내 손가락으로 레이어를 눌러야 한단 사실은 변함이 없고 스크롤이 부드러워져도 어차피 알트키는 눌러야하고...말입니다.아놔.... 디자이너에 대한 개념은 많이 변해왔습니다. 디자이너는 웹용으로 이미지를 저장하고 가우시안 필터만 주는 기능사가 아닙니다. 디자인이란 단어 자체가 기획과 프로세스 전반과 동의어가 되기도 했고, 일종의 사고방식이나 비즈니스를 다루는 프레임으로 여겨지는 만큼 디자이너는 논리적인 이미지를 통해 정보를 시각화하고 철학을 실체화하는 존재가 되어가고 있습니다. 이것은 분명 팩트예요.  하지만 그런 멋진 말들 뒤에는 여전히 손목터널증후군이 자리하고 있습니다. 여전히 디자이너의 최대위협은 프로그램이 응답하지 않는 것이죠. 그 멋진 철학과 정체성을 그려내는 것은 결국 검지와 중지손가락입니다. 클릭과 스크롤, 커서이동 딸깍딸깍으로 만드는 거죠. 손그림이나 생각만 하면 자연스럽게 그려지는 마법같은 호그와트 비밀병기가 있었으면 하는 생각이 듭니다. 툴을 다루고 몸으로 일하는 디자이너에겐 여전히 필요한 것들이 넘치는 것 같아요.그래서 문득 생각해봤습니다. 뭔가 이런거 있으면 내 두 눈과 손목이 조금은 편해지지 않을까 싶은 것들 말이죠. 물론 사심 가득하고 쓸데없고 병맛스러운 것들이 잔뜩이니 그냥 웃자는 느낌으로 읽어주시면 감사하겠습니다.1. 정렬선 좀 한 번에 지워줘.저 퍼런것좀..포토샵은 왜 정렬선을 일일이 하나씩 밀어 없애야 하는 건지 미쳐벌임. 내가 툴을 못다루는 건가요...혹시 누가 방법 좀 알고있으면 알려주세요. 컨트롤+; 이걸로 안보이게 만드는거 말고. 그리드 관련 확장프로그램에서 all clear 하는 거 말고.. 다른 방법은 없나요.2. 한국사진이 필요하다고. 흑인말고.뭔가...외국계기업같고 그러긴 하지만...언스플래쉬같은 게티이미지 이런 곳에도 물론 좋은 사진은 넘쳐납니다만... 가끔 제안서나 회사소개서 만들다보면 한국사진이 필요할 때가 겁나 많아요. 흑인이 일하는 거 말고 제발 적어도 중국인이나 일본인 스러운 느낌이라도 있어도 좋으니 얼추 위화감안드는 사진을 찾아 헤맬 때가 많더라구요. 도시 이미지도 맨하탄이랑 베이징말고. 여의도였음 좋겠다구....강변북로 나오라고 제발.그나마 디자인에 쓸만한 사진들은 얼라우투(http://www.allowto.com) 랑 클립아트코리아가 전부인데....얼라우투는 지금 힘들다고 유료로 전환 계획중이라고 합니다.ㅠㅠ...아놔.... 3. 예쁜 명조나눔명조와 조선일보명조, 정조체를 제외하고 뭔가... 예쁜 명조체 찾기가 꽤나 어렵더라구요. 고딕체는 이제 HG꼬딕씨가 우주를 지배해버린 터라 거의 넘사벽이 되어버렸는데 명조체는 사실 본명조를 뛰어넘기 쉽지 않은 것 같기도 하고. 엄청나게 예쁜 역대급 명조체가 있다면 좋을 것 같아요. 여러분들이 쓰고계신 명조체 중에 와씨 이건 진정 훈민정음의 정신을 이어받아 겨레의 얼이 녹아있는 아트적 명조다!!! 싶은게 있다면 소개해주세요.4. 컴터요. 컴터 하앍!!붕붕붕!!!!Xeon 플래티넘까진 바라지 않을께요. i9-7980에 2TB SSD, GTX1080ti, 64기가램 셋팅해주시고 파워서플라이가 막 엄청나고..근데 트랙패드는 있었으면 좋겠고... 기왕이면 겁내 큰 4K모니터....그런데 가볍고.. 그게 노트북이면 더 좋..-그런 거 없음-5. 흰 턱수염을 쓰다듬을 것 같은 팀장님네 녀석의 시안엔 '한'이 없다아아!좋은 피드백과 제대로 된 인간의 언어로 디렉션을 전달해 줄 팀장님 내지는 사수가 필요하죠. 요즘들어 더 느끼고 있는 생각인데, 사수가 있었으면 좋겠다는 생각이 들더라구요. 개인사업 4년차인데... 하면 할수록 더 모르겠고, 이게 맞는 건지 확신이 서지 않을 때가 더 많아요. 제 디자인에 대해 점점 의심의 눈초리를 품게되죠. 심지어 공부해오고 배워왔던 것들에 대해서도 다시 생각해보게 되는 게 또 현장의 현실이니까요. 늘 이론은 그저 기준에 불과하고 현실에선 타협과 조율만이 살 길인지.... 아니면 현실에 필요한 이론이 따로 있는건지 등등.. 여러가지 생각이 많아지는 요즘입니다. 가끔은 상사가 있었으면 하는 바람입니다. 아니면 교수님이라도...6. 시대가 어느 땐데 아직도 레이어가 챡챡...응?좀 지가 알아서 챡챡 정리되면 얼마나 좋을까... 그래 뭐 그런거까진 아니더라도, 적어도 무한 스크롤 방식말고, 그룹별로 횡으로 정렬이 되거나... 뭔가 한 번에 볼 수 있음 좋겠다는 생각입니다.7. 체력거대빨간물약 같은거 필요함. (일반 구급상자로 안됨)8. 사진보정이 샥! 챡! 응 그런거 없어.. 그런데 있었으면 좋겠는.9. 포토샵도 대지 밖에서 편집좀..사실 포토샵은 디자인용이 아니라 사진편집용 프로그램인지라 단일화면에서 편집할 수 밖에 없는 태생적 한계가 있습니다. 이해해요. 그래도...그 가상캔버스를 만들던가, 아니면 확장프로그램을 설치해도 좋으니 일러처럼 대지 밖에서 편집해서 가져올 수 있게 뭔가 방법이 있다면 한결 다양한 것들을 쉽게 할 수 있겠다는 생각이 들더라구요.10. 손가락만 움직여도 1,500kcal 막 이런거였음 좋겠다. 가만히 앉아서좌클릭할 때마다 20kcal, 스크롤2번에 30kcal, 새끼손가락을 컨트롤에 올리고 j를 누를 때마다 50kcal 씩 쭉쭉 소모되는. 창의적인 이미지를 고민하고 머리를 쥐어짤 때마다 지방(특히 내장지방)이 연소되는 몸이었으면 좋겠다. 김치찌개 먹고 다시 앉아서 가만히 일하다가 소화안되서 막 부대끼고 뱃살만 성장하는 그런거 말고.11. 협업툴인데 타블렛으로 그릴 수 있는...사실 이미지를 줬는데 피드백이 텍스트로 오는 건 쓰는 사람도 읽는 사람도 힘든 일이 아닐 수 없어요. 그냥 동그라미를 치면 될 일을 굳이 '좌측 상단에 작은 글씨로 쓰여진 부분' 이라고 길게 써야 하니까 말이죠. 그냥 보낸 시안에 실시간으로 쓱쓱 그려서 피드백하고 체킹할 수 있는 그런 캔버스형 협업툴 있으면 좋겠다요.12. 바다누가 우리 집 창문 앞에 바다 좀 만들어줬으면. 출렁이는 파도소리, 빛나는 은빛물결, 드넓은 수평선을 바라보며 포토샵을 켠다면...........(놀고싶지 않을까?)13. 고장안나는 외장하드새벽 두시.자니?...외장하드야. 미디어를 안전하게 제거하지 못하고 급한 성격에 몇 번 뽑았어.... 하지만 그렇다고 그렇게까지 맴을 찢는 날카로운 소리를 내며 두 번 다시 움직이지 않을 이윤 없었잖아.... 미안해 다시 돌아와줬음 좋겠어.. 그동안 수리기사님과 복원센터도 찾아가면서 많이 반성했어. 다시 돌아와준다면 항상 안전하게 널 제거해줄께.. 떨어뜨리지도 않고 항상 추가전원선에 연결해서 빵빵한 에너지를 줄 거라고 약속할꺼야. 그러니 내 파일들 다시 내놔 (이 자식아....)14. 12시간 간대매.내가 분명 올데이 뉴그램을 산 것 같은데 왜 올데이 아닌데. 15. 툴신되고싶다...그냥 누가 내 머리 열고 조그마한 어도비 프로그램 메뉴얼 다 들어가 있는 D형램 하나 전두엽에 꽂아줬으면 좋겠다. 유튜브 찾아보면서 하나하나 스페이스바로 멈춰가며 따라하는 것도 손가락 아프고...16. 컬러매칭 사륜안디자이너라고 모두 컬러를 다 잘 만지는 건 아니더라구요. 특히 제가 그래요. 컬러조합을 챡챡 해줄 수 있는 뭔가 그런거 있으면 좋겠더라구요. 물론 어도비쿨러도 있고, 구글에 color combination 치면 많이 나오기도 하지만, 내가 원하는 건 지금 내 작업과 가장 잘 매칭되는 컬러구성이니까....더불어서 행사장 조명이나 거리, 환경 같은거 입력해주면 대비, 가시성, 혼합정도 등등도 파악해 줄 수 있는 그런거 있으면 은총앤성은17. 오탈자필터 백안그 운명은 발주 후 오탈자발견!음... 왜 인쇄소에 보내고 난 후엔 항상..오탈자가....18. 죄다 무선이었음 좋겠다아아아아.아..일단 컴퓨터가 없어야 하는구나책상에 선이 하나도 없었으면 좋겠다아아아아아... 그래서 사실 아이맥을 살까싶기도 했는데, 사실 딱히 아이맥이 디자인에 엄청 좋다거나 이런걸 잘 못느끼겠어서 사실 이것저것 겸용으로 쓰려고 데탑을 쓰고 있지요. 하지만 아이맥뽐뿌가 자꾸 올라오는 건 다른 거 아무것도 없이 그놈의 트랙패드와 전원선 하나밖에 없는 초 심플함 때문이 아닐까 싶습니다. 안그래도 우린 책상에 커피, 홈런볼, 포스트잇, 업무일지, 피드백받은거, 현미녹차 같은것도 잔뜩 올려놔야 하잖아요...19. 밤이었음...내가 일하는 그 순간 갑자기 밤이었음 좋겠어요. 아니면 새벽감성 주사 또는 드링크같은게 있으면 좋겠어. 마시는 순간 새벽감성에 젖어버리는 거지....20. 일관성있는 눈...오늘 만든 거 내일봐도 예뻐 보일 수 있는 눈 삽니다. 
조회수 3182

주니어디자이너가 알아야 하는 오묘한 디자인용어 60

안녕하세요. 여러분. 스크롤을 내리기 전 드릴 말씀이 있어요. 물론 제목이 틀린 말은 아니지만, 혹시 GNB나 LNB등의 전문용어를 기대하고 오신거라면 죄송합니다. 오늘 말할 단어들은 그런게 아니에요. 그런 전문용어들은 구글에 치시면 엄청나게 많이 나오니까요. 오늘은 좀 더 실전적인 오묘한 단어들에 대해 알아보려고 해요. 사실은 좀 짤에 가깝습니다. 뇌피셜도 가득하구요. 60개의 단어들 중 한 개만 오호! 하고 가셔도 전 매우 행복할 듯 합니다. 각설하고 바로 시작하겠숩니다 :)01. 후까시 : 쓸데없는 걸 쳐바른 상태02. 뻬다 : 백그라운드03. 짜치다 : 자잘한 레이어수정이 겁내 많은데 액션으로도 어떻게 안되는 상태04. 귀도리(v. 귀도리친다) : 네 귀퉁이 둥글게 잘라내기05. 도무송 : 특정한 모양대로 잘라내거나 구멍을 뚫는 인쇄 후가공 기법06. 목업(v. 목업에 얹히다) : 실제로 구현된 상태를 가상으로 보여주기 위한 시각적 프로토타이핑07. 블리딩(BLEEDING) : 여백없이 꽉찬 이미지를 위해 재단선을 넘기는 방법. (유사어. 상하좌우 여백오미리)08. 스프레드(spread) : = 펼친 좌우 페이지에 하나의 개체를 뙇! 까는 일09. 커닝(먹이다) : 글자의 모양때문에 배열이 달라질 때 적당한 간격을 조정하는 일10. 비교견적 : 우리 견적에 20만원 플러스 시켜서 가라로 만드는 견적11. 실장님 : 보통 협력업체의 책임자를 부르는 보통명사12. 대리님 : 보통 협력업체의 실무자를 부르는 보통명사13. 이봐요 : 보통 협력업체의 나쁜놈을 부르는 보통명사(자매품 : 저기요)14. 깨서줘 : 폰트나 획에 오브젝트 확장해달라 (=돌이킬 수 없을 것이다.)15. 부탁해 : 니가해16. 언제까지 돼? : 1시간 내로 줘라17. 다 좋은데 : 다시해야겠는데?18. 이 부분이 좀 : 그걸 포함한 모든 것들이19. 조금만 싸게 : 반값으로 해달라20. 스타일가이드 : 컴포넌트 전반을 규정(버튼, 컬러, 간격, 텍스트 등 디자인/퍼블리싱/개발의 기준을 설정하는 것(그러나 지키진 않겠다)21. 플랫하게 : 셔터스톡에 있는22. 브랜드디자인 : 모든 것을 다하는23. UX디자이너 : 전투력이 높은24. 편집디자이너 : 자간에 극도로 예민한25. 시마이 : 오늘은 여기까지30. _final : = start31. 정렬 : 생명32. 컬러 : 블랙홀33. 시발 : 프로그램이 응답하지 않습니다.34. 컨셉 : 기획과 디자인 등 전과정을 아루는 맥락이나 의미. 특정한 목적을 지니고 그것의 달성을 위해 만들어지는 경우가 많다. (유사어 : 대표님의 생각)35. 이거 : 내 모니터에 있는 거(=니가 와서 봐라)36. 그거 : 니 모니터에 있는 거(=내가 가긴 귀찮다)37. 쓰읍 : 다시 해라38. 죄송한데 : 너의 퇴근은 없다39. 로고 : 1)본디 텍스트타입의 아이덴티티 표현 방식으로 기업이나 서비스의 이름이나 정체성을 표현한 이미지. 2) 대표님의 생각을 읽고 시각화 시키는 작업 (유사어 : 야근)40. 데드라인 : 나는 지키지 않겠지만 너는 지켜야 하는 것41. 픽셀과 벡터 : 클라이언트가 이해하지 못하는 개념42. 프리미어 : 다루기 싫거나 못 다루지만 어쩌다보니 하고있는 어도비툴43. 핀터레스트 : 구원의 샘 (자매품 : 비핸스)44. 유튜브 : 스승님, 지식의 샘, 바이블, 모든 게 다 있는 곳, 메시아45. 맥북 : 어깨를 파괴하고 성능을 득한다46. 외장하드 : 이유는 모르지만 자꾸 고장나는 것. 모든 것을 강제로 내려놓게 하는 인생의 참스승47. 사수(+접미어 놈/새끼) : 있으면 미칠 것 같은데 없어도 미칠 것 같은 사람48. 부사수(+접미어 놈/새끼) : 있으면 미칠 것 같은데 없어도 미칠 것 같은 사람49. 엑셀 : 잘 모르겠는 것(자매품 : '한글2000')49. 캘리브레이션 : 모니터의 색온도, 밝기, 명암, 감마 등을 조정해 일정한 표준으로 보이도록 하는 작업.50. 휘도 : 광원의 단위 면적당의 광도. 광도는 광원에서 나오는 빛의 세기, 조도는 빛을 받는 사물의 밝기, 휘도는 면적당 광도를 의미해요. 모니터 등 디스플레이에선 휘도가 중요해요. 휘도에 따라 색감이나 선예도가 달라지기도 하죠.51. N10단계 : 명암을 10단계로 쪼개 나눈 것으로 대학교1학년 때 손으로 그리기도 했지만 잘 기억나지 않는 것52. HSB : 웹디자인할 때 쓰면 좋은 색상팔레트. 53. 팬톤컬러 : 이쁘고 비싼 것(컬러칩 사야함)54. RAM : 디자이너의 성격과 탈모를 결정하는 컴퓨터장치(16GB이상은 필수로..)55. 카페 : 커피가 있는 사무실56. 스크래치디스크 : 가상메모리와 비슷한 개념인데, RAM이 부족해서 임시저장할 곳이 모자르면 당신컴터의 하드디스크나 SSD의 일부분을 활용하여 RAM처럼 활용합니다. (자매품 : 스크래치디스크가 꽉 찼으므로 photoshop을 초기화할 수 없습니다.)57. png : 픙58. 누끼(v. 누끼따다) : 개체의 외곽선을 따라 펜툴로 따는 작업. 디자인계의 인형눈깔붙이기 같은 작업59. 시안 : 대장정의 서막60. 디자인 : 일단 나는 배웠으니 하겠지만, 누가 한다그러면 한번쯤 말리고 싶은 것.
조회수 2377

헷갈리는 UI, 스티비는 이렇게 씁니다.

어떤 버튼을 넣어드릴까요?세상에 온전하게 혼자 만든 물건은 매우 드뭅니다. (풀스택이라는 개념도 있지만) 웹서비스 역시 여러 사람의 협업으로 만듭니다. 슬로워크에서 운영하는 이메일마케팅 서비스 스티비도 예외는 아닙니다. 살짝 말씀드리면 스티비는 기획/PM 1명, 디자이너 1명, 개발자 2명이 만들고 있습니다. 큰 조직은 아니지만 소통의 틈은 늘 존재하기 마련입니다.그중 하나가 UI 용어입니다. 동상이몽이라는 말처럼 각자 웹서비스 개발을 해왔지만, 모두가 같은 상황과 맥락에서 학습한 것이 아니고, 머릿속에 그리는 이미지가 달라 사용하는 용어가 서로 다를 수 있습니다. 그리고 같은 용어를 사용하면서도 그 의미와 구현된 결과물이 다를 수 있습니다.“‘드롭다운’이 들어가야 해요”라고 요청받고 나온 결과물은 ‘버튼을 클릭하면 아래로 펼쳐지는 메뉴’일 수 있습니다. 하지만 요청한 사람이 실제로 원했던 것은 <select>일 수 있다는 것이죠. 이런 소통의 틈을 채우기 위해 우리는 장문의 기획서를 쓰고 시간과 공을 들여 프로토타이핑을 합니다. 시간과 인력 자원이 허락된다면 아주 좋은 과정입니다. 하지만 자원이 적은 스타트업 팀에게는 부담스러울 수 있습니다. 모든 것이 비용이죠. 그저 “‘드롭다운’은 아래로 펼쳐지는 메뉴이고, 옵션 선택을 위해서는 셀렉트(<select>)를 쓰자”고 미리 약속하면 많은 부분이 해결됩니다. 그래서 UI 용어 통일은 중요합니다.이런 것이 헷갈리고, 이렇게 씁니다.몇 가지 사례를 살펴보겠습니다. 서비스를 2년 가까이 만들어 오면서 헷갈렸던 용어와 서로 약속을 통해 바로 잡은 것들, 그리고 아직도 헷갈리는 것들이 섞여 있습니다. 그리고 다른 팀에서 사용하는 의미와 또는 웹표준과 다를 수 있습니다. 그저 “스티비는 이렇게 쓰는구나”하고 봐주시면 되겠습니다.1. 버튼(button)버튼은 생각보다 다양합니다사용자의 클릭을 끌어내는 버튼. 마우스와 키보드를 가지고 할 수 있는 많은 액션이 있지만 무언가를 클릭하는 것만큼 직관적이고 친숙한 UX는 없을 것입니다. 그 중심에 버튼이 있습니다. 어떤 때는 이동을, 어떤 때는 실행이나 취소를 위해 버튼을 클릭합니다.버튼의 개념과 역할은 아주 명확한 것처럼 보이지만 프론트엔드 개발자 입장에서는 때로 ‘링크’와 혼동될 때가 있습니다. 어떤 것은 로 만들어진 링크로 만들어야 하고, 어떤 것은 <button>으로, 또 어떤 때는 <input type=”submit”>처럼 하기도 합니다. 하지만 표현되는 결과물은 마우스를 올리면 색이 변하는 ‘버튼’이죠. 보통 는 페이지의 이동을 나타내고, <button>은 실행이나 취소, <input type=”submit”>은 양식의 전송을 말합니다.스티비에서는 ‘버튼’, ‘링크’, ‘링크 버튼’을 혼용해서 사용합니다. 결과물은 버튼이지만 개발자의 재량에 따라 어떤 방식으로 구현할지 정합니다. 위 용어들에 대한 추가 질문은 따로 하지 않습니다. 그리고 SPA 방식으로 개발된 탓에 실제로 구분이 명확히 되지 않는 경우가 있습니다.* 이렇게 씁니다.→ “개발자가 알아서 한다”2. 팝업(popup)과 모달(modal)pop하고 뜬다고 다 팝업은 아님다음으로 헷갈리는 것이 팝업과 모달입니다. 과거 ‘팝업’은 작은 새로운 윈도우를 띄우는 기능을 말했습니다. 최근 팝업 차단이나 모던 브라우저들의 다중탭 기능 덕분에 많이 사용하지 않는 기능이 되었습니다만 아직도 많이 사용되는 용어입니다. 그리고 모달은 비교적 최근에 등장한 개념으로 화면 위에 레이어를 덮어 마치 새로운 창이 나타나는 것처럼 보여주는 방식입니다.“이 부분은 모달로 해주시고요.”, “다음 페이지는 역시 같은 팝업에서 이동하는 것으로…”. 이처럼 초기에는 위 용어를 혼재하여 사용했습니다. 새로운 윈도우를 띄우는 상황은 없거나 매우 희박하므로 소통에 큰 문제는 없었습니다. 다만 모달은 ‘기존(부모) 페이지와 맥락을 달리하는…”이라는 함의를 가지고 있습니다. 이런 경우는 되도록 ‘모달’이라는 용어로 통일하려고 합니다.* 이렇게 씁니다. → 팝업/모달은 중에 하나를 선택하지는 않지만 열리는 상황과 맥락에 따라 용어를 구분하면 좋다. 구현은 하나의 통일된 템플릿으로 진행한다.3. 얼럿(alert)항상 경고만 하는 건 아닙니다‘얼럿’은 사용자가 무언가 잘못된 길로 갔을 때, “띵”하고 뜨는 그 경고창입니다. 과거에는 브라우저에 내장된 기본 기능을 많이 사용했지만, 디자인과 사용성을 위해 최근에는 디자인이 입혀진 레이어로 구현된 유사 얼럿이나 하단에 위치한 토스트얼럿UI 등 다양한 변형이 사용되고 있습니다. “사용자가 취소하려고 하면 이런 메시지로 경고를 해주세요”라는 요청을 받는다면 개발자는 이것을 단순히 alert()으로 처리할지 상단에 뜨는 예쁜 레이어로 띄웠다가 일정 시간이 지나면 없앨지, 하단에 커다랗게 보여줄지 고민이 됩니다. 앞서 살펴본 모달 형식의 경고도 있으니 혼란은 커집니다.대부분 서비스가 그렇겠지만 스티비는 미리 설계된 얼럿 디자인을 사용합니다. 보통의 경우 당연히 이 UI를 사용하고, 추가 액션이 필요하거나 화면의 가운데 모달 형식으로 보여줘야 할 경우라면 디자인 작업물에 명시합니다. 화면에 붉은 글씨로 보여주는 경우도 있어 이 부분은 대부분 디자인 결과물로 소통합니다.* 이렇게 씁니다.→ 디자이너가 각 상황과 맥락을 파악하며 적당한 경고 방식을 선택, 디자인 작업물에 배치하여 개발팀에 전달합니다. (디자인 결과물은 제플린으로 전달합니다)4. 드롭다운(dropdown)과 셀렉트(select)그 누르면 뭔가 아래로 스르륵 나오는 그거결과부터 말씀드리면 ‘드롭다운’과 ‘셀렉트’는 다른 UI입니다. 하지만 비슷한 역할을 하는 경우가 있어 혼용하여 사용되는 것 같습니다. ‘드롭다운’은 하위 메뉴가 숨겨져 있다가 사용자의 마우스 오버나 클릭에 숨겨진 메뉴를 보여주는 UI입니다. 셀렉트는 <select>태그로 구현되며 사용자에게 내재된 옵션값 중 하나(또는 여러 개)를 받기 위한 양식 UI입니다.예쁜 디자인을 위해 레이어로 구현된 드롭다운처럼 구현한 셀렉트도 있고, 셀렉트인데 옵션의 선택에서 그치는 것이 아니라 선택과 동시에 페이지가 이동된다든지 하는 액션을 가진 경우가 있어 혼란이 생긴 것으로 생각됩니다.* 이렇게 씁니다.→ 초기 기획 단계에서 이 둘은 명확히 구분합니다. 사용자에게 어떤 값의 입력(선택)을 요구하기 위해서는 셀렉트를 사용합니다. 이때 디자인은 변형될 수 있지만, 선택이라는 핵심 기능은 그대로 둡니다.버튼 뒤에 숨겨진 메뉴를 표현하기 위해서는 드롭다운을 사용합니다. 하위 메뉴에서 어떤 액션이 있어야 한다면 드롭다운으로 합니다. 구현은 기획에 맞추어 진행합니다.5. 인풋(input)입력하는 곳인데, 마우스 갖다데면 색 바뀌고요. 입력하는 동안은 다른 색으로…‘인풋’, ‘입력창’, ‘필드’ 등 여러 이름으로 불리웁니다. 사용자에게 텍스트 형식으로 어떤 내용을 입력받기 위한 UI로 보통은 그냥 사각형이고, 여기에 테두리(border)나 옅은 배경(background)를 주어 사용합니다.딱히 헷갈릴 일이 없긴합니다. 하지만 뭔가 용어 통일을 한다면? 아마도 ‘텍스트 입력’이나 ‘텍스트 인풋’이 적당하지 않을까 합니다. 결과물은 입력을 위한 상자이지만 구현은 보통 <input>태그로 합니다. 하지만 단순히 인풋이라고만은 할 수 없는 것이 <input type=”checkbox”>나 <input type=”radio”>, <input type=”submit”> 같은 예외가 있기 때문입니다. “인풋으로 해주세요”, “인풋 중에 뭐요?”같은 상황이 생길 수 있습니다. 그렇다고 ‘텍스트 입력’이라고 한다면 <textarea>와 혼동할 수 있습니다. 구현 과정을 생각하여 되도록 명확한 용어가 사용되는 편이 좋습니다.* 이렇게 씁니다. → 무엇을 입력할지 디테일한 전달 필요. 용어 통일은 조금 더 논의해 본다.마치며쓰임에 따라, 상황에 따라 다를 수 있는 UI 관련 용어들. 각자 편한 대로 쓰면 되지 왜 꼭 통일해야 할까요? 오히려 하나의 단어로 통일하는 순간 그 단어만 제한되는 것은 아닐까요? 개발 조직마다 다르겠지만, 스타트업이나 스타트업처럼 작고 빨라야 하는 조직에서의 팀원 사이의 이런 작은 ‘싱크’들은 매우 중요합니다. 드롭다운을 열심히 그렸는데, 실제로 필요한 건 셀렉트였다면? 이렇게 소통이 어긋났을 때 발생하는 시간과 자원의 낭비가 줄어듭니다. 세세한 UI까지 디자이너가 그리는 시간을 줄일 수 있습니다. 미리 약속된 UI(일종의 스타일 가이드)가 있다면 개발자는 상세 디자인 없이도 기존 것을 재사용하면 되기 때문입니다. UI 용어의 싱크만 잘해도 많은 시간을 절약할 수 있습니다. 그 시간에 더 많은 아이디어를 실험하고 구현해볼 수 있습니다.#슬로워크 #스티비 #UI #디자인 #디자이너 #인사이트
조회수 2201

다함께 써봐요 Google Web Designer!

안녕하세요. 이번 기술 블로그 글을 맡은 spoqa 디자이너 Been입니다 ^^ 회사에서 그래픽디자인을 맡고 있으며 기술 블로그 글을 쓰는 건 처음입니다.회사 프로젝트를 진행하며 접하게 된 Google Web Designer 베타버전에 대해 글을 쓰려 합니다. Google Web Designer로 프로젝트를 진행하며 알게 된 기능과 느낀 점에 관한 이야기입니다.먼저 Google Web Designer 는요, 근래에 구글에서 개발한 웹 디자인 프로그램입니다. 위키백과에 검색해보니 이렇게 설명이 되어있더군요.Google Web Designer is a program for Windows and Mac from Google for creating interactive HTML5 sites and ads for any device.웹 페이지를 만들거나 웹 배너를 만들기 위한 프로그램이라고 생각하시면 됩니다^^실행해보니 기능이 디자이너와 프로그래머가 협업하기 좋은 프로그램입니다. 디자인하듯 그리거나 배치한 것이 HTML/CSS 언어로 바로 변환돼 표시 됩니다. * 구글에 검색하시면 쉽게 내려받으실 수 있습니다.최근 크리스마스를 맞아 저희 SPOQA에서 이 프로그램을 활용하여 각 매장 태블릿기기에 들어갈 간단한 애니메이션을 제작했습니다. (도도 매장을 방문하시면 태블릿 기기로 감상하실 수 있습니다.) 이제부터 제작하며 프로그램에 관해 느낀 점과 그에 관련된 짤막한 기능들을 설명하겠습니다.우선 간략하게 작업 창을 설정하는 방법을 알려드리겠습니다.1. 설치한 Google Web Designer를 더블클릭하면 구글같이 생긴 아래 이미지가 뜹니다.2. 파일 - 새 파일을 누르면 작업 창 설정 창이 뜹니다.3. 플래시처럼 레이어를 생성해 소스를 하나하나 움직이기 위해서 새 파일에서 배너를 선택, 태블릿 해상도(or 원하는 크기, 저는 태블릿에 들어갈 애니메이션을 만들어야 했기에 태블릿 해상도에 맞췄습니다.) 크기에 맞춰 작업 크기를 설정해 줍니다. 파일의 이름을 지어준 후 애니메이션 모드는 고급 모드로 설정 후 확인을 누릅니다. (빠른모드에서는 레이어 생성을 할 수 없습니다.) * 파일은 html로 저장됩니다.4. 짠작업 창이 떴습니다. 이제 작업을 시작할 수 있겠죠? ^^ 저 하얀 작업 창에 소스를 집어넣고 이것저것 움직임을 주면 대강 이런 모습이 나옵니다. 평소 디자인 프로그램을 사용해보신 분들이면 그리 어렵지 않게 다루실 수 있다고 생각합니다.사용해보니 마치 일러스트레이터 + 플래시 + 드림위버 미니 버전 같습니다.다음으로 작업하며 사용했던 기능에 대해 몇 가지 말씀드리겠습니다.소스소스들은 파일 창에서 작업 창으로 드래그하셔서 쓸 수 있습니다. 소스를 옮겨놓으면 자동으로 images라는 폴더가 생성되는데 그 안에 옮겨놓은 소스가 들어있습니다. 같은 소스를 또다시 끌어다 놓으면 자동으로 복제됩니다. (작업 창과 images 폴더에) 일러스트레이터나 포토샵처럼 상단 메뉴바에서 이미지를 불러올 수는 없습니다.레이어소스가 작업 창으로 옮겨지면 레이어가 생성되는데 이 레이어의 이름을 지정하고 싶으면 오른편 속성 창에서(오른쪽이미지) 요소 밑에 있는 ID로 이름값을 지정해 주면 됩니다. HTML스럽네요. 아무리 레이어에서 더블클릭을 하고 우클릭을 해도 이름 변경이 안 됩니다. 레이어의 위아래 순서는 끌어 옮겨서 바꿀 수 있고 레이어를 선택하고 Ctrl+c, Ctrl+v 하면 선택된 레이어가 복제됩니다. 상단 메뉴바의 수정에서도 가능합니다. (타임라인 복제가 아니라< 레이어=화면의 소스>만 복제됩니다.) 각 레이어를 클릭하면 오른편 스타일 창에서 해당 코드를 보여줍니다. 레이어 오른편에 휘어진 화살표를 클릭하면 해당 레이어 재생 수를 지정할 수 있습니다. (없음/2회/무한) 세 가지 옵션입니다. 그래서 옵션을 무한으로 설정하면 해당 동작이 계속해서 반복합니다.타임라인타임라인의 시간 범위를 설정할 수 는 없습니다. 그저 원하는 마지막 시간위치에 키프레임을 놓는 것이 범위 설정 방법입니다. 원하는 위치에서 우클릭을 하면 키프레임을 삽입할 수 있습니다. 타임라인을 복사해서 다른 레이어에 붙일 수 없습니다. 타임라인 위의 키프레임들이 중복 선택이 안 될뿐더러 alt+탭을 눌러 개별 복사하는 기능도 먹히지 않습니다. 키프레임과 키프레임 사이에 마우스를 대고 우클릭을 하면 easing(이징) 기능이 있습니다. 움직임의 가속과 감속을 조절할 수 있는 기능입니다.기타기능타임라인 윗부분에 코드 보기를 누르면 디자인한 작업의 전체 코드를 작업 창에서 보실 수 있습니다. 그 옆의 미리 보기를 누르면 브라우저로 작업물을 확인할 수 있습니다. 브라우저는 크롬과 인터넷 익스플로러 두 가지입니다. 타임라인의 재생버튼을 누르면 작업창 안에서 작업물이 동작하는 모습을 볼 수 있습니다. 재생버튼 옆의 휘어진 화살표를 누르면 재생이 계속 반복해서 됩니다. 맨 오른쪽의 게시버튼은 작업물을 추출할 수 있는 버튼입니다. 이미지를 선택하시고 상단 메뉴바의 변환컨트롤이라는 부분에 체크를 하시면 해당 이미지의 크기나 각도를 조절 할 수 있습니다.그 옆은 오브젝트들을 정렬할 수 있는 기능입니다. 맨 오른쪽은 사진의 설명처럼 레이어의 순서를 바꿀 수 있는 버튼입니다. 그 외 3D기능, 간단한 오브젝트를 그리고 칠할 수 있는 기능 등이 있습니다.이제 마지막으로 작업한 결과물을 추출하는 방법을 알아보겠습니다.추출법다 만든 작업물을 추출하는 것은 미리 보기 옆의 게시 버튼을 눌러 할 수 있습니다. 추출하면 zip으로 압축되어 나오고 그 안에 Index.html과 사용한 소스파일들이 들어있습니다. 아래는 게시버튼을 누르면 나타나는 창입니다. 원하는 이름과 위치를 지정해 주고 파란 게시버튼을 누르면 끝! 이렇게 완성된 도도 크리스마스 애니메이션은 곧 혹은 이미 도도 매장의 iPad로 확인하실 수 있습니다. ^^ (아쉽게도 갤럭시 노트 10.1은 프레임 문제로 지원하지 않아요.) 만약 구글 크롬이나 파이어폭스를 쓰신다면 PC에서도 확인하실 수 있습니다.이상 제가 알게 된 구글 웹디자이너 프로그램 기능에 관한 글이었습니다 ^^ 정말 필요한 기능들만 모아 간결하게 만들었네요. 복잡하게 여러 메뉴를 거치지 않고 바로 보이는 것들로 기능을 실행할 수 있는 점이 그렇게 느끼게 하지 않았나 싶습니다. 기존 디자인 툴과 크게 다르지 않은 배치와 생김새가 프로그램에 빠르게 익숙해지는 데 일조했습니다. 하지만 사용한 기능 중 가장 아쉬웠던 부분은 타임라인 조작인데요, 타임라인 선택복사가 되고 복수선택이 되어 전체복사가 되면 좀 더 편리하고 참 좋지 않았을까 싶네요.처음 접하시는 분들께 도움이 되었으면 좋겠습니다. 혹시 기능 설명에 잘못된 부분이 있다면 알려주세요. ^^ 미흡한 글 읽어주셔서 감사합니다. ^^참고위키 백과공식 사이트#스포카 #디자인 #디자인팀 #디자이너 #구글 #웹디자이너 #구글웹디자이너 #꿀팁 #스킬스택 #스택소개 #인사이트 #경험공유
조회수 1982

흔한 디자이너의 작업일기

물론 이것은 모든 디자이너에 해당하지 않습니다. 지극히 저만의 일기입니다. 그러니 공감이나 그런건 기대치 않습니다. 그냥 아, 이렇게 디자인하는 사람도 있구나...하면 됩니다.1. 켜고 열기일단 오퍼를 받고나서, 상세한 내용이나 자료를 메일로 받습니다. 떨리는 마음으로 자료를 열어봅니다. 자료는 보통 압축파일입니다. 책상엔 커피와 케익이 있어야합니다. 두 손을 쉴새 없이 움직이는 데 대부분은 뭐 먹느라 그런 것 같습니다. 디자인을 좀 이렇게 했으면 좋겠습니다. 압축을 푸는 작업은 언제나 설렙니다. 새로운 문명역사의 한 챕터를 여는 기분입니다. 또 어떤 자료들과 어떤 이야기들이 있을 지 흥미진진합니다. 떨리는 손가락을 놀려 클릭을 하도록 합시다. 여기에 풀기를 누릅니다. 그렇습니다, 전 여기에 압축을 풀것입니다. PPT파일과 워드파일, 가끔 메모장 파일도 있습니다. 아름다운 굴림체가 저를 반깁니다. 저도 반가우니 인사를 해줍니다. 안녕? 날 굴릴거니? 굴림체가 '응' 이라고 대답합니다. 후훗, 녀석과 전 오래된 친구같습니다.케익은 주로 딸기케익이 좋습니다. 달달하고 고소한 맛을 동시에 느낄 수 있습니다. 아메리카노는 아이스를 주로 시킵니다. 오래먹을 수 있기 때문입니다. 작업시간이 오래 걸릴 것이라는 것을 직감적으로 느낍니다. 왜냐면 한 번도 짧게 걸린 적은 없었기 때문입니다. 뭔 개소리야...1. 켜고 열기2 (유튜브)....죄송합니다..컴퓨터로 켜면 왠지 모르게 손이 크롬으로 갑니다. 이어폰을 꽂고 있으면 귀의 명령에 의해 자연스레 유튜브를 클릭하고 추천동영상을 보고 있습니다. 피키캐스트에서 이거레알 신작이 나왔습니다. 와씌..이사람들은 영상을 너무 재밌게 잘 만듭니다. 요즘 연애플레이리스트를 보는데 아주 풋풋해 죽을 것 같습니다. 웃음과 감동이 가득한 영상을 보며 감수성을 끌어올립니다. 이렇게 어느정도 레벨이 넘으면 그 때부터 디자인을 시작해야합니다.(개소리2)3. 뺨때리기유튜브는 잘못이 없습니다.뺨을 때립니다. 왼손으로 때려서 왼쪽뺨을 때리도록 합시다. 정신을 차려야합니다. 유튜브 동영상 3,4개만 봐도 1시간이 후딱 지나갑니다. 진정한 타임킬러가 아닐 수 없습니다. 하지만 감수성이 충만해졌으니 그것으로 위안을 삼아봅니다. 누구에게나 백지에 디자인을 시작하는 일은 떨리는 일일테니, 그 설레임을 안고 다시 포토샵을 열도록 합시다. 가로세로 적당한 픽셀로 대지를 만들어주고, 다시 요청파일을 열어봅니다.4 . 바라보기음...한참동안 읽으면서 핵심을 파악합니다. 사실 저는 알고 있습니다. 이 요청메일은 그저 훼이크입니다. 진짜 원하는 시안이 어딘가 암호처럼 숨겨져 있습니다. 세로드립인가? 또는 에니그마인가? 레몬즙을 뿌리거나 물을 뿌려보거나 빛을 비쳐보면서 숨겨진 니즈를 찾아내도록 합시다.5 . 꿀잼핀터레스트는 꿀잼입니다.니즈가 대충 파악되었으니, 레퍼런스를 한번 찾아보도록 합시다. 디자인엔 묘하게 관성이 있어서, 레퍼런스와 눈에 들어온 게 많아야 쏟아지는 것도 있습니다. 이 클라이언트의 니즈는 모던하지만 클래식한 컨셉을 원하고 있습니다. 핀터레스트에서 모던한 것과 클래식한 것을 동시에 찾습니다. 혹시 몰라서 구글에 모던한데 클래식한 것..을 검색해봤습니다. 페이지요청을 찾을 수없다면서 꺼졌습니다. 후우... 좋습니다. 하지만 핀터레스트의 현자들은 그 답을 알고 있을 것입니다. 그들에게 답을 구해보기로 합니다. 그럴싸한 것이 나올 때까지 스크롤을 내립니다.너무 내렸다.계속 내려버렸습니다... 아..보면 볼수록 뭔가 자괴감이 듭니다. 이 녀석들 너무 잘하잖아.... 세상엔 정말 다이아손 티타늄손 아다만티움손들이 가득합니다. 잠시 자괴감에 빠져서 반성의 시간을 갖도록 합니다. 아..나란 존재란....  존재에 대한 본질적인 질문과 나의 수정란시절에 어떤 문제가 있었길래 나는 이런것을 만들지 못하는 것인지 고민해봅니다. 다음 생이나 되야 만들 수 있지 않을까싶습니다. 앨런머스크씨에게 희망을 걸어봅니다. 어서 날 영생하게 해주세요.6 . 작업시간과 공간의 방끝도 없는 작업의 세계로 빠져듭니다. 분명 나는 30분정도 한 것 같은데, 4시간이 지나있습니다. 이런 미친.... 시간만 잘갑니다. 어쩔때는 4시간을 한 것같은데 30분 지나있을때도 있습니다. 아인슈타인의 상대성이론은 디자이너친구에게서 영감을 받은 것이 아닌가 하는 생각이 듭니다. 보통 이 시점엔 화장실을 가지 않습니다. 방광염의 위험이 높아집니다. 밥도 먹지않고, 전화도 받지않습니다. 톡은 가끔 합니다. 붐비치도 합니다..뭐여 이건...7 . 산만해지기산만해집니다.집중력이 한번 떨어지는 시기가 옵니다. 보통 이럴땐 어디가 간지럽거나 배가 고픕니다. 뭔가 생각이 안돌아가고, 무엇보다 그 색이 그 색같고 그 디자인이 그 디자인같습니다. 눈이 뭔가를 구별을 잘 못합니다. 하도 비슷한 색을 계속 보고있다보니 뭐가 뭔 색인지도 모르겠습니다. 눈이 뻑뻑해지고 머리가 아픕니다. 눈물액을 넣어주도록 합시다. 다시 자료를 찾아봅니다. 산만하게 움직이며 오늘은 글렀다라는 것을 두뇌에게 알려줍니다. 두뇌는 그 명령을 받아서, 그럼 밥이나 먹으라는 지시를 내립니다. 제 몸은 소중하니까 그 명령을 충실히 이행하도록 합시다.8 . 작업2다시 돌아와서, 시안을 보니 개병신같습니다. 시안을 지웁니다. 그리고 다시 선을 하나 긋고 거기서부터 시작합니다. 카페를 옮겼습니다. 보통 카페에는 땅의 기운이란 것이 있는데, 3,4시간정도 앉아있다보면 그 땅의 기운이 쇠하기 시작하면서 영 엉덩이도 불편하고 집중력도 생기지 않습니다. 다른 카페의 명당자리로 가서 가이아의 힘을 빌리도록 합시다. 지구야 힘을 줘. 제발.왠지 모르겠으나, 전 두번째 집중할 때가 폭풍입니다. 이 때는 심지어 똥도 참을 수 있습니다. 더욱 묘하고 이상한 것은 배아픈걸 참으면서 디자인하면 더욱 잘됩니다. 이것만 끝내고!!! 제발...이것만 끝내고!!!!!가야지!!!!!! 라는 강한 의지는 괄약근과 대장의 힘조차 컨트롤할 수 있게 해줍니다. 정신력이 육체를 이긴다는 것을 몸소 체험하고 경험했던 간증입니다. 분명 사람은 무엇이든 할 수 있습니다. 디자인을 하다보면 그런 느낌이 많이 듭니다. 지금 이 자리에서 일어나는 순간 내 손과 머리의 그 분이 다 사라져버릴 것 같은 기분. 이 때 건드리면 안됩니다. 그게 누구든 짜증이 날 수 있습니다. 그리곤 그 분이 사라지고 두번 다시 돌아오시지 않습니다. 내일을 기약해야 합니다. 보통 그 분은 하루에 한 번 정도만 강림하시기 때문에 이 타이밍을 제대로 잡지 못하면 폭망입니다.9 . 그분과의 작별보통 그 분이 오셨을 땐 인간의 본능과 고통을 모두 잊게 하는 힘을 주십니다. 그 분이 떠나시고 난 뒤에야 뒷목과 어깨와 허리가 미치도록 아픈 것을 느낍니다. 다른 쪽 손으로 내 어깨를 주물러 보지만 아무짝에도 소용없습니다. 내 손이 힘드니까요. 디자이너를 위한 마사지샵이 있으면 참 좋을 것 같습니다. 그 분이 가시고 나면 이제 아무것도 할 수가 없습니다. 시안을 다시 물끄러미 바라보도록 합시다. 딱히 손이 움직이지 않으니 눈동자라도 움직이며 이상한 것을 찾아봅시다. 보통 이럴땐 700%정도로 확대시켜놓고 정렬이나 픽셀정리를 해줍니다. 눈이 빠져버릴 것 같습니다. 인공눈물액은 필수입니다.10 . 크리틱의 시간클라이언트에게 보내기 전에 디자이너친구에게 물어봅니다. 디자이너가 아닌 친구에게 물어보면 그냥 다 이쁘다고 해주므로 의미가 없습니다. 사실 원래는 디자이너에게 물어보는 것은 좋은 방법이 아닙니다. 고객이나 클라이언트는 디자이너가 아니므로 그들의 시선을 빌리는 것이 더 맞지만, 왠지 모르게 디자이너친구에게 인정받으면 기분이 좋기때문에 기분이 좋아지기 위해서 그냥 이미지를 전송해봅니다.음, 친구가 이상하다고 하네요.11 . 반성의 시간방구석에 가서 우울해지도록 합시다. 뭔가 모든 것이 무너지고 짜증나면서 니가 뭘 알아를 외치고 싶지만, 또 그렇게 그냥 넘기자니 찝찝합니다. 고쳐야 할 것 같긴합니다. 또 말을 들어보니 그게 그런것 같기도 합니다. 원래 혼자서 끊임없이 같은 시안을 보고있다보면 그지같은 것도 뭔가 점점 괜찮아 보인답니다. 그래서, 객관성을 점점 잃어가기 마련입니다. 이렇게 개털리고 나야 다시 시선을 되찾을 수 있습니다. 꼭 필요한 시간이지만 그 친구의 멱살을 잡고싶은 것은 어쩔 수 없습니다. 내일모레 정도 만나서 멱살을 잡도록 하겠습니다.수정합니다.수정을 합니다. 그림을 재탕해서 죄송합니다. 수정작업은 뭔가 그분이 오시든 안오시든 무조건 해야하는 것이므로 스트레스가 심하고 속도가 느립니다. 하다보면 또 가끔 잔여물처럼 남은 그분의 흔적을 느끼기도 하지만, 그것은 드문 경우입니다. 이미 이 정도가 되면 아무것도 할 수 없는 것이 맞습니다. 그냥 집에가서 팬티만 입고 누워자고싶어집니다. 하지만, 데드라인은 소중하므로 지키도록 합니다.반복됩니다. 이렇게 몇 차례 수정이 이루어지고 나면 클라이언트님에게 메일을 보냅니다. 메일은 보통 새벽에 보내게 됩니다. 왜냐면 이렇게 하고 나면 절대 해떨어지기 전에 뭔가를 만들수가 없기 때문입니다. 그리고 그 분이 가시고 난 다음엔 예비그분인 새벽감성님이 오시는데, 새벽감성님의 힘도 만만찮게 강력해서 꽤나 괜찮은 시안들이 만들어지기도 합니다. 가끔 맥주한캔님의 힘을 빌리기도 합니다. 그분의 힘은 강력하지만 지속시간이 짧고 떠나시면서 뱃살을 주고가신다는 단점이 있습니다.메일을 보냅니다. "요청하신 시안드립니다" 라는 제목을 쓰고 어찌고저찌고 메일을 쓰면서 오늘 하루 새까맣게 태워진 영혼의 가루들을 주섬주섬 챙기도록 합시다. 인간의 회복력은 놀라워서 흩어진 영혼들을 지우개똥처럼 다시 뭉쳐서 동글동글 말아놓으면 내일 또 멀쩡하게 일어날 수 있습니다. 내일 클라이언트님이 시안을 보시면, 아마 또 뭔가 피드백을 주실 것 같습니다. 헤헤헤..재밌겠다....-디자이너의 하루 끝-#애프터모멘트크리에이티브랩 #디자이너 #디자인 #디자인팀 #인사이트 #디자이너의하루 #경험공유
조회수 4974

말이 통하는 스타트업 만들기

마운틴 뷰의 삼성 UX 디자인 연구소에서 인터렉션 디자이너로 근무를 마치고 개인적인 사정으로 한국에 들어왔다. 폭넓은 디자인을 할 수 있는 환경을 찾던 중 미디엄을 통하여 IoT 하드웨어 스타트업인 아이오를 알게 되었다. 아이오는 스위치 위에 부착하여 쉽게 불을 켜고 끄는 '스위처'라는 스마트홈을 제품을 만드는 한국 하드웨어 스타트업이다. 현재 이 곳에서 인터렉션 디자이너로 앱 내 기능의 디자인뿐만 아니라 PM으로서 기능 개발, 배포까지 마무리하는 프로덕트 매니저의 역할 맡고 있다.아이오에 합류하기 전, 유저와 제품의 인터렉션을 만드는 것뿐만 아니라 끊임없이 오피스를 돌아다니며 비주얼 디자이너, 사용성 연구원 그리고 엔지니어 사이에서 소통하고 커뮤니케이션을 이어주는 역할을 했다. 돌아보면 책상 앞에서 작업하는 시간보다 오피스를 뛰어다니는 시간이 더 많았던 것 같다.디자인, 개발, 테스트의 사이클을 돌며 각각 단계에 위와 같은 작업을 진행했다.커뮤니케이션 스킬에 좀 더 많은 주의를 기울여했던 경험으로 인하여, 2개월의 수습 기간 동안 아이오 팀원들 사이의 커뮤니케이션 과정에 나타나는 구멍을 발견하게 되었다. 같은 목표를 공유하지만 서로 다른 언어를 사용하여 싱크가 빠르게 이루어지지 않는 바벨탑과 같은 상황을 자주 목격하게 되었고, 커뮤니케이션을 싱크 하는 작업이 우선이라는 것을 깨달았다. 복기 겸 글을 통해 첫 3개월 동안 모두 같은 언어를 사용하고 같은 방향을 바라볼 수 있는 환경을 만들기 위해 디자인한 툴과 프로세스를 공유해본다.첫 번째, 정보 구조(Information Architecture)를 이용하여 용어 통일하기두 번째, 트렐로를 이용하여 팀 전체가 고객의 목소리에 집중할 수 있는 프로세스 만들기  첫 번째, 정보 구조(Information Architecture)를 이용하여 용어 통일하기가장 자주 목격한 상황은 제품에 관한 대화를 나눌 때 모두가 다른 용어를 사용하는 것이었다. 이 문제의 경우, 빠른 개발과 론칭으로 인하여 제품의 설계를 한눈에 볼 수 있는 정보구조(Information Architecture)의 부재와, 이로 인한 통일된 용어 체계가 없는 것이 원인이었다.정보 구조는 웹디자인에서 파생된 개념으로 유저의 입장에서 지금 현재 위치한 스크린으로 어떻게 들어왔는지, 원하는 정보를 어느 스크린에서 찾을 수 있는지를 다이어그램으로 표현한 문서다. UXbooth의 Complete Beginner’s Guide to Information Architecture 나온 설명을 번역하면, 정보 구조는 사이트 맵, 상하 구조, 카테고리, 내비게이션 그리고 메타 데이터의 집합체이다. 이 문서는 디자이너, 엔지니어 외 제품 개발을 긴밀하게 협업하는 다양한 구성원이 최신의 제품의 설계를 공유하고, 제품에 관하여 통일된 언어를 쓸 수 있도록 도와주는 가이드 역할을 한다.아이오에서는 단 한 명의 디자이너가 4개월이라는 기간 동안 브랜딩, UIUX 그리고 심지어 하드웨어 제품 디자인까지 해왔으므로 시간과 공을 들여서 시스템 체계를 정리하고 싱크 하는 것이 불가능했다. 하지만 정보 구조의 부재로 팀 전체가 사용하는 통일된 언어가 없다 보니, 알고 보니 30분 동안 서로 다른 스크린을 두고 토론을 벌이는 현상이 일어나거나 플로우를 다르게 기억하고 개발하는 일이 일어났다."안 그래도 추가할 기능이 많은데 굳이 그 작업을 지금 해야 하나", "충분히 머릿속에 다 그려지는 간단한 구조다"라는 의견이 있었지만, 더 자세히 들여다보니 iOS와 안드로이드에서 플로우 차이가 나는 구간이 여러 곳 있었고 팀원끼리 동문서답을 하는 경우도 많아서 더 이상 미룰 수 없는 작업이라고 결론을 내렸다. 준비 단계로 iOS와 안드로이드 앱을 나란히 두고 스크린을 맞춰보는 작업을 시작으로 대표와 함께 스튜디오에 있는 큰 화이트보드에 여기저기 흩어져있었던 스크린을 하나도 빠짐없이 그리기 시작했다. 그렇게 화이트보드 여기저기 그려진 모든 스크린 위에 다른 색상의 포스트잇으로 내비게이션 뎁스(Depth)에 나눠서 스크린을 분류하고 그룹을 지었다. 어느 정도 화이트보드 위에 상하구조가 정리가 된 후에는 마무리 작업으로 스크린마다 번호와 영문 라벨을 붙이고 모든 멤버가 원할 때 열어볼 수 있도록 구글 드로잉에 옮겨 저장했다.구글 드라이브에 저장하는 것에서 멈추지 않고 프로젝트를 진행할 때마다 첫 미팅에 어떤 기능이 추가, 수정될지 함께 리뷰하고 방향을 정하는 지도로 활용하고 있다. 정보 설계를 처음 만들고 나면 늘 그렇듯 처음에 이 개념을 소개한 나조차 프로젝트 킥오프 때 스크린 번호를 헷갈려하거나 미팅 중 이름을 헷갈리는 실수를 했지만, 현재 팀원들은 번호만 불러주면 스크린 라벨을 바로 떠올릴 수 있을 정도로 정보구조를 활용하는 것에 익숙해졌다. 처음에 익숙지 않아했던 엔지니어들도 6개월 동안 정보 구조를 이용해서 구글 애널리틱스를 설계하고 적용시키면서 자연스럽게 활용하고 있다. 지금도 항상 프로젝트가 끝날 때마다 팀 전체가 가장 최근의 앱 구조를 열람할 수 있도록 업데이트하고 있다.  두 번째, 트렐로를 이용하여 팀 전체가 고객의 목소리에 집중할 수 있는 공간 만들기단 한 명의 디자이너만 근무하고 있었던 일손이 부족한 상황에서 앱 개발에 좀 더 집중할 수 있는 디자이너가 투입되자 희망을 갖은 팀원들이 개발해야 하는 기능, 현재 기획은 되어있지만 비주얼 디자인이 없는 기능 등등... 다양한 디자인 작업을 요청하며 환영해줬다. 팀원들 뿐만 아니라 외부에서도 페이스북 페이지, 옐로 아이디 그리고 고객 방문 등을 통해서 고객들의 요구가 넘쳐나고 있었다.어떤 것부터 시작해야하나...개발할 것들은 넘쳐나는 상황에서 더욱 혼란스러운 것은 고객들이 겪고 있는 문제를 수집하고 관리하는 공간과 우선순위를 정하는 시스템의 부재였다. 조직 구성원 모두가 쓰는 트렐로 스크럼 보드의 백로그 덱에 이러한 내용을 등록할 수 있었지만, 이 보드에는 앱뿐만 아니라 하드웨어, HR, 운영, CRM, 미래의 제품 계획 등 모든 아이디어 및 이슈가 다 섞여있기 때문에 고객의 목소리에 집중할 수 없었다.아이오의 CEO, 엔지니어, 디자이너, 마케터 등 모든 팀원의 업무가 담겨있는 스크럼 보드, 고객의 목소리 또한 이 곳에 같이 섞여있었다.실리콘 밸리의 수많은 스타트업과 디자인 프로젝트를 진행한 Google Ventures의 디자인 파트너 Braden Kowitz는 자신의 글과 밋업을 통해 스타트업 디자이너들에게 고객이 겪고 있는 문제를 찾는 것을 소홀히 하면서 고객이 아닌 자신들이 원하는 제품을 만드는 실수를 피해야 한다고 여러 번 강조한다. 아이오 또한 이런 실수를 하지 않기 위해서 의도적으로 기획 전에 고객을 제일 우선순위에 고려할 수 있도록 도와주는 프로세스가 필요했다.기존에 사용하던 트렐로 스크럼 보드에서 분리되어 실제 고객들이 제품(앱과 하드웨어)을 사용하면서 불편을 겪고 있는, 또는 겪을 가능성이 있는 이슈만 모아서 관리하는 보드를 만들었다. 이 보드에는 고객의 의견뿐만 아니라 팀원들 또한 예상되는 이슈나 고객에게 필요하다고 생각되는 기능도 등록할 수 있다.팀원이라면 누구나 이슈를 등록할 수 있지만, 새로운 룰을 적용시켰다. 이슈 카드의 제목을 "A라는 기능을 만들기"가 아니라, 학교에서 반복적으로 하던 디자인 프레젠테이션의 첫 시작처럼 "고객은 A로 인해 B라는 어려움을 겪고 있다"라고 적어서 고객(Who)이 무엇으로 인해(Why) 어떤 문제를 겪고 있는지(How)를 먼저 밝히는 과정을 넣었다.페이스북의 디자인 VP Julie Zhuo는 자신의 글, "Building Products"를 통해 페이스북의 제품 개발 과정에서 누구를 위하여 어떤 문제를 해결할 것인가를 명확하게 정의하는 것이 첫 번째 단계라고 밝히고 있다. 이렇게 고객이 불편한 점을 중심으로 다시 문제를 적어보는 프로세스를 적용한 후, 개발할 기능을 정할 때 우선순위를 고객에게 둘 수 있는 기회를 가질 수 있게 되었다. 현재 이렇게 등록된 수많은 이슈들 중, 매주 CRM 담당자와 상의 후 가장 시급한 이슈를 선정하여 배포하는 사이클로 개발하고 있다.한국에서는 내가 하는 일을 주로 UX 디자이너 또는 기획자라고 하는데.. 지금까지는 기획자와 디자이너 개념이 나눠져 있지 않은 환경에서 근무했고 기획자라는 어감이 어려워서 아직도 스스로 인터렉션 디자이너라고 부르고 있다. (아이오에서는 별도의 직함이 없어서 원하는 포지션을 붙이면 된다. 대표는 명함에 스스로 CEO 대신 hacker라고 써넣었다.)이번 글에서는 디자인보다는 커뮤니케이션 개선에 중점을 두었지만 다음 글에서는 아이오가 위의 이렇게 만들어진 보드를 통해 기능을 배포하는 프로세스와 그 프로세스 단계별로 디자이너로서 어떤 작업을 하는지 복기하는 글을 작성할 예정이다.#스위처 #Switcher #디자인 #디자이너 #UX #UX디자인 #인사이트 #조언
조회수 304

엘리스 디자인팀을 소개합니다!

안녕하세요, 엘리스입니다.지난번 블로그 글에서 엘리스가 일하는 방식을 프론트엔드 팀 리더 휘동님께서 직접 이야기해주셨는데요, 오늘은 '디자인팀은 어떻게 일하는가'를 인터뷰를 통해 샅샅이 밝혀보도록 하겠습니다!간단한 자기소개 부탁드려요.Jane저는 디자인팀의 지인이라고 합니다. 디자인팀에서 기획과 UX, UI 쪽을 주로 담당하고 있습니다.Youhyun안녕하세요! 저는 디자인팀의 유현입니다. 전 엘리스에서 UI와 브랜드 디자인을 주로 하고 있어요. 이메일 디자인이나 마케팅 콘텐츠도 지원하고 있구요. 토끼가 등장하는 건 거의 제 손길이 닿았다고 보시면 됩니다. :)엘리스에 합류하게 된 이유는 무엇인가요?Jane학부 1학년 때 코딩 수업이 필수였어요. 이때 코딩에 대한 안 좋은 기억이 있었는데 이후 재미있는 수업들을 들으며 극복하게 되었구요. 사람들이 코딩에 대해 갖는 거부감이나 두려움을 알아요. 디자인적으로 이걸 쉽고 친근하게 풀어내고 싶다는 생각으로 합류하게 되었어요.Youhyun한 워크숍에서 웹 코딩 수업을 들으면서 코딩의 재미를 알게 되었어요. 내가 디자인하고 직접 웹사이트까지 만드는 게 너무 재밌는 거예요. 그래서 저는 디발자가 되고 싶었어요!ㅋㅋ. 좋은 기회로 엘리스라는 회사를 알게 되었는데 심지어 코딩 교육이고, 여기에 있는 귀여운 캐릭터들도 너무 좋더라구요. 바로 합류를 결정했죠.요즘 하고 있는 디자인 작업은?Jane엘리스에서는 매 분기마다 목표를 정하고 프로젝트를 해요. 이번 분기 목표는 선생님, 조교와 같은 교육자가 좀 더 편하게 저희 서비스를 사용하는 거예요. 그 일환으로 교육자가 수업자료를 올릴 때 기존에 코드로 작성해야 했던 것을 GUI(Graphical User Interface)화 하는 작업을 하고 있어요. 이 프로세스를 개선하면 교육자가 실습 콘텐츠의 퀄리티를 좋게 만드는 데에만 신경을 쓸 수 있기 때문에 교육 자료의 질도 높아질 거라고 생각해요.Youhyun퍼블리케이션 디자인을 하고 있어요. 퍼블리케이션은 선생님이 프로그래밍 과목을 만들고 검수 과정을 거쳐서 학생들에게 공개하는 것까지의 과정을 말해요. 이 기능은 작년에 출시되었는데, 지금은 그동안의 사용자 불편점들을 반영하여 개선하는 작업을 하고 있어요.개인적으로 좋아하는 디자인 작업은?Jane저는 Sketch나 최신 디자인 툴을 테스트해보는 것을 좋아해요. 각종 디자인 툴과 플러그인을 활용해보면서 파일, 레이어, 심볼 관리를 더 잘할 수 있는 방법을 고민하죠. 요즘에는 엘리스만의 디자인 시스템을 어떻게 구축하면 좋을지에 대해 생각하고 적용해보고 있어요.Youhyun출력물 작업을 좋아합니다. output을 내 손으로 직접 만질 수 있는 거요! 코드 챌린지, 데이터 챌린지 때 X배너, 현수막, 상금 판넬, 스티커 등을 만들었는데 너무 재미있었죠. 특히 스티커는 많은 분들이 좋아해 주시고 노트북에도 붙이시는 걸 보는데 정말 뿌듯하더라구요. 또 하고 싶은데... 요새 프로덕트를 만들어내는 것 때문에 바빠서 작업을 못하는 게 아쉽네요.Q. 후드와 우주복을 입고 있는 토끼 스티커 말하는 거죠? 토끼는 왜 후드를 입고 있나요?Youhyun왜냐하면 저희 모두 후드를 유니폼처럼 입고 다니며 너무나 사랑하기 때문에^^*. 저희 엘리서들을 엘리스 마스코트 토끼에 반영해보았습니다.지난 1년간 엘리스 디자인의 방향성은?Jane엘리스는 처음에는 대학교나 기업처럼 프로그래밍 교육이 필요한 기관을 대상으로 서비스를 제공했어요. LMS(Learning Management System, 학습 관리 시스템)라고 해서 좀 더 기관에 맞는 딱딱한 느낌이 컸어요. 그러다가 일반 수강생을 대상으로 플랫폼과 수업을 제공하는 아카데미가 생기면서 유저가 더 재미있고 편하게 사용할 수 있도록 지난 1년간 디자인이 변화해 왔죠. 어려운 것은 그러면서 동시에 기관을 서브해야 한다는 거예요. 이 둘의 사용 케이스가 굉장히 달라요. 항상 양쪽 모두를 고려하면서 사용성을 좋게 만들기 위해 고민을 많이 하는 것 같아요.Youhyun비전공자들도 쉽게 코딩을 배울 수 있도록 디자인하는 것. 비전공자들이 보기에 새까만 코드 에디터는 낯설고 어려워 보여요. 전공자보다 접근성이 떨어질 수밖에 없죠. 하지만 엘리스의 비전은 누구나 쉽게 코딩을 배울 수 있도록 하는 거예요. 코딩 외적인 어려움은 불필요한 장애물이라고 생각해요. 그래서 비개발자 관점에서 최대한 쉽고 직관적인 플랫폼, 사용성에 대한 고민을 많이 해요. 지난 1년간 쉬운 사용성을 위해 디자인해왔다고 생각해요.디자인 리뷰 및 개선 방법?Youhyun매주 끊임없는 디자인 미팅을 통해서 보다 완성도 있는 프로덕트를 디자인하려고 해요. 팀 차원에서는 운영팀에서 학생과 선생님의 애로사항을 듣고 개선점을 제안해요. 이를 바탕으로 개발팀과는 기술적인 부분을 고려해서 디자인을 변화시켜 나가죠.JaneGA등의 데이터 툴을 이용해서 사용자의 다양한 사용패턴을 수치화해요. 뿐만 아니라 유저 인터뷰를 통해서 사용자의 다양한 의견도 수렴하죠. 이 밖에 A/B 테스팅하는 과정 등의 리뷰 프로세스를 다듬어 나가고 있어요.엘리스 디자인 팀 업무 방식의 장점?Youhyun저희는 팀원 한 명 한 명이 온전히 하나의 프로젝트를 담당해요. 책임이 전적으로 주어지는 일이기 때문에 부담이 크기도 하지만 온전히 나의 힘으로 운영팀, 개발팀과 협업을 이끌어내면서 프로젝트의 결과를 만들어 낸다는 성취감이 굉장히 커요. 그동안 힘을 기울였던 것이 하나의 큰 결과물로 나오는 걸 볼 때는 정말 뿌듯하죠.Jane다재다능한 팀원들과 함께 일할 수 있다는 것. 또 처음부터 끝까지 해볼 수 있고, 자유와 책임이 크게 주어진다는 것. 어떤 한 가지 업무에 자신의 역량을 한정짓는 게 아니라 전체적으로 필요한 부분을 주도적으로 생각하면서 계속 논의점을 제시하고 보완해나가야 해요. 디자인 프로세스 자체를 직접 만들어낼 수 있다는 게 큰 매력인 것 같아요.브랜드 컬러는 왜 보라색인가요?Jane원래는 지금처럼 보라색이 아니라 하늘색 엘리스이던 시절도 있었어요. 제가 들어오기 전 이곳의 개발자 수인님 및 개발팀에서 포스터를 만들고 로고를 만들었던 때가 있었죠... 디자인팀이 생기고 처음으로 했던 게 브랜딩 작업이었어요. 보라색을 한 이유는 특이한 색을 원했기 때문이에요. 저희가 이상한 나라의 앨리스를 모티브로 하니까 신비로운 느낌을 주고 싶었어요.Youhyun그리고 보라색이 잘 쓰면 고급진 느낌을 주거든요. 저희 모티브가 동화나라이긴 하지만, 마냥 아기자기하지만은 않다!ㅋㅋ라는 느낌으로 해석하길 바라고 있어요. 그러고 보니 팬톤 선정 올해의 컬러가 보라색이네요. 큼큼. 저희가 올해를 빛내야죠!엘리스 최애 캐릭터는?Youhyun당근 토끼죠.Q. 이유는 무엇인가요? 먼저 엘리스 캐릭터들을 소개해주실 수 있나요?Youhyun토끼, 체셔캣, 도도새, 애벌레, 모자장수, 하트 여왕, 카드병정이 있어요.저는 백점 맞은 토끼(?)(※ 코드 문제를 풀어 100점을 받으면 토끼가 신나 하며 튀어나옵니다.) 튀어나올 때가 너무 좋아요! 이 토끼는 사람들이 코딩하는 데에 좀 더 동기부여가 되도록 하기 위해서 탄생했는데요, 실제로 수강생 분들의 반응도 너무 좋아요.Jane캐릭터 스토리도 있어요. 토끼는 학생들의 안내자 역할이에요. 항상 등장해서 어떻게 해야 하는지 알려주고 100점을 받으면 같이 기뻐해 줘요. 체셔캣은 퀴즈를 내는 존재예요. 알쏭달쏭하고요. 학생들에게 퀴즈를 내서 시험에 빠뜨리는 존재예요. 그리고 저도 토끼를 가장 좋아합니다. 일반적인 토끼보다 더 귀여운 것 같아요. 얼굴이나... 손 같은 게...함께 일하고 싶은 디자이너 상이 있다면?Youhyun코딩에 대한 관심, 지식이 있다면 더 일을 재미있고 빠르게 하실 수 있을 거예요. 그리고 주도적으로 디자인을 이끌어나갈 수 있는 분이었으면 좋겠어요. 프로덕트 디자인의 과정은 운영팀 및 개발팀과의 끊임없는 논의의 과정이기도 하기 때문에 논리적인 설득과 커뮤니케이션에 능하신 분이면 더 좋을 것 같아요.Jane논리적으로 자신의 디자인을 풀어낼 수 있는 분이요. 엘리스의 비전은 코딩의 진입장벽을 낮추고 끝까지 포기하지 않고 이수할 수 있는 프로그래밍 교육을 만드는 거예요. 이를 위해서는 디자인적으로도 사용자 입장에서 생각하고 설명할 수 있어야 해요. 보다 완성도 있는 프로덕트를 디자인하기 위해서 어떻게 하면 사람들이 더 쉽게 엘리스를 사용하고 잘 사용할 수 있는가를 함께 고민할 수 있는 분이었으면 좋겠어요.새로 올 팀원과 어떤 것을 함께 만들어가고 싶으신가요?Youhyun사무실 공간 디자인이요! 사무실 인테리어를 함께하고 싶네요. 엘리스 사이트뿐만 아니라 엘리서를 위한 공간도 브랜딩 하는 거죠! 이런 걸 하고 싶은 게 제 바람입니다. 서울 오피스 함께 꾸미면 너무 재미있을 것 같아요.Jane지금은 디자인팀이 3명인데 앞으로 규모가 더 커지면 디자인팀만의 문화를 함께 만들어가고 싶어요.Youhyun정말 리더다운 답변이네요.후드 입고 오시면 격하게 반겨드립니다! 엘리스에서 만나요!
조회수 887

포토샵 속 브랜딩: 브랜딩과 디자인은 절친사이

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

스포카에서는 회고를 어떻게 할까?

안녕하세요, 스포카 크리에이터 팀 프로덕트 디자이너 강영화 입니다. 이번에는 스포카 크리에이터 팀에서 어떤 방식으로 회고를 진행하는지 소개해 드리고자 합니다.스포카에서는 팀별로 회고를 진행합니다. 회고라는 단어에 대해 생소한 분들을 위해 간단히 소개해드리면, 진행한 업무 기간별 좋았던 점과 안 좋았던 점을 각자 허심탄회하게 이야기하고 그 내용을 바탕으로, 필요하다면 앞으로 어떻게 업무수행 방식을 개선할지 액션플랜까지 도출하는 활동입니다. 회고의 사전적 정의는 “1. 뒤를 돌아다봄. 2. 지나간 일을 돌이켜 생각함”이라고 하니 회사에서 말하는 회고는업무 기간의 팀 단위 자기성찰이라고 보시면 이해가 빠르겠습니다.저희가 몇 년 전 회고를 도입할 당시에는 에스더 더비, 다이애나 라센이 지은 “애자일 회고”라는 책 내용에 기반해서 세팅했고 몇 번의 회고 방식 개선을 바탕으로 현재 프로세스가 유지되고 있습니다.이 포스트에서는 스포카에서 진행하는 회고 방식과 순서를 자세히 설명해 회고를 처음 도입해보는 팀에서도 쉽게 따라 할 수 있도록 가이드라인을 풀어서 설명해보겠습니다.회고 준비물회고 전에 먼저 간단한 준비물이 필요합니다. 컬러 포스트잇(두 개 컬러 이상, 3M 슈퍼스티키 추천), 매직 혹은 보드마카, 여러 가지 스티커, A4용지 몇 장만 있으면 됩니다. 그리고 회고한 내용을 붙일 벽이나 화이트보드도 있어야겠죠?스포카에서는 회고 주머니가 있어서, 에코백 하나에 준비물을 다 넣어둡니다. 누구든 회고할 때마다 꺼내 쓸 수 있도록요!소요시간과 진행자소요시간은 사람 수와 업무 기간에 진행한 이슈별로 조금씩 다르기는 하나 업무시간에 하는 회의이므로 너무 길게 하는 것은 좋지 않습니다. 1주일 같이 짧은 업무 단위라면 30분~1시간, 그것보다 더 길다면 1시간~2시간 사이가 적절합니다. 다소 무거운 이야기가 나오면 길어질 수 있습니다만, 시간 안배를 잘하는 것이 관건입니다. 이야기를 많이 나누고 가끔은 무거운 이야기를 할 때도 있으니 중간중간에 잘 휴식하고 간식을 제공해도 좋겠습니다.이제 회고 진행자를 정해주세요. 회고하는 팀 외 인원이 자원해 회고 진행을 맡을 때가 있고, 팀 내에서 한 명을 선정해 진행하기도 합니다. 저희는 회고 상황과 업무 단위별로 필요한 방식으로 그때그때 다르게 정하는 편입니다.다양한 이야기를 듣는 것이 중요하므로, 회고 진행자가 참가한 인원의 목소리를 끌어내는 역할을 해주세요. 긴 시간 이야기를 해도 늘어질 때 이야기의 구심점을 모아 좋은 회고 결과를 내는 중요한 역할을 하기도 합니다. 만약 팀원 간 감정적으로 부침이 있는 경우나 꽤 어려운 프로젝트를 진행한 경우에는 확실히 숙련된 진행자가 있는 편이 좋습니다. 이제 회고할 준비가 모두 되었습니다. 본격적으로 진행하기 이전에 회고 프로세스를 살펴볼까요? 스포카에서 진행하는 회고는 아래 일곱 가지 과정을 거칩니다.온도 체크자료 모으기그룹으로 만들기더 이야기하기액션플랜 도출마무리 온도 체크회고의 회고1시간 동안 진행하는 회고로 가정하고 조금 더 자세한 방식을 이어서 설명해보겠습니다.1. 온도 체크 (5분)본인의 현재 상태를 점검해 숫자로 표시합니다. 실수가 아닌 정수 1~5점 사이로 점수를 매기는데 1점이 가장 안 좋은 상태, 5점은 가장 좋은 상태입니다. 모든 사람이 포스트잇에 자신의 온도를 모두 다 쓰면 돌아가면서 왜 이 점수를 매겼는지 이야기합니다. 매긴 점수를 이야기 하는 것보다 내가 매긴 점수보다 높은 점수가 아닌 이유와, 낮은 점수가 아닌 이유를 설명하면 더 이야기를 꺼내기 쉽고 다른 사람도 이해하기 쉽겠죠?“저는 2점을 주었는데요. 1점이 아닌 이유는 오늘 맛있는 점심을 먹어서이고, 3점이 아닌 이유는 몸이 좀 좋지 않아서입니다”“4점입니다. 3점이 아닌 이유는 오랫동안 작업했던 포스트를 작성해서 올렸기 때문이고, 5점이 아닌 이유는 업무가 포스트 작성 때문에 피곤한데 업무가 좀 많아서입니다.”온도 체크를 하는 이유는 서로 각자의 상태를 파악하는 데 의미가 있습니다. 회고가 예전에 있었던 일을 이야기하는 만큼 쉽게 감정적으로 될 수 있으므로 서로 감정을 살피고 아는 것이 중요합니다. 팀원이 어떤 상태인지 인지했을 때 조금 더 발언을 조심하겠지요. 회고는 서로를 탓하기 위해서 하는 것이 아니라 앞으로 더 나은 방향으로 팀원이 모두 발맞춰 나아가기 위한 회의임을 기억하세요.2. 자료 모으기 (10분)준비물로 포스트잇을 챙기셨죠? 각기 다른 색의 포스트잇은 여기서 씁니다. 한가지 색에는 “좋았던 점”을, 다른 색에는 “아쉬웠던 점”을 작성합니다. 한 포스트잇에는 한 가지 사건만 기록해야 합니다.이때 시간이 너무 없거나 참여자가 많은 경우 “인당 3개로 제한” 하는 둥 개수의 제한이 필요할 수 있습니다. 혹은 너무 짧은 단위의 회고를 진행한 경우 “인당 3개 이상 작성” 같이 최소 개수를 정할 수 있습니다. 이는 프로젝트 성격에 따라 정리해주세요.작성한 포스트잇은 화이트보드에 시간순으로 붙입니다. 그리고 누가 어떤 포스트잇을 붙였는지, 왜 이런 포스트잇을 썼는지 감상에 대해서 돌아가면서 이야기합니다.3. 그룹으로 만들기 & 리액션 하기 (10분, 휴식 5분)이야기하면서 이 포스트잇에 적었던 감상이 어떤 내용인지 이해했으니, 비슷한 포스트잇끼리 묶습니다. 여러 사람이 한 가지 주제로 이야기한 내용, 결을 같이 하는 내용 등을 한 포스트잇끼리 묶은 뒤 그룹에 이름을 지어줍니다. 저희가 회고를 할 때 가장 많이 묶는 그룹은 “해서 좋았다”, “좋은 결과물”, “준비 미흡”, “시간 관리 못 함” 등인데, 좋았던 포스트잇 그룹들과 아쉬운 점 포스트잇 그룹들로 나뉘곤 합니다. 묶은 뒤 위에 그룹 이름을 적어도 좋습니다.그리고 나면 가장 재미난 시간입니다. 각자 더 이야기하고 싶은 포스트잇에 스티커를 붙입니다. 스포카에서는 통상 좋았던 것에 2개, 아쉬웠던 일에 2개씩 붙이는데요. 앞서 말씀드렸듯이 각 프로젝트나 팀 성격에 따라 스티커 숫자는 제한하거나 더 늘릴 수도 있습니다.스포카에서는 트위터 에모지를 판스티커로 출력해 회고에 활용하고 있습니다. 독특한 스티커를 사용해 활용하면 조금 더 재미있게 환기되는 회고를 할 수 있겠죠?4. 더 이야기하기 (10분)스티커가 많이 붙은 포스트잇 위주로 더 이야기해 봅니다. 이때는 액션플랜을 도출하기보다는 개인의 감상에 대해서 더 깊이 이야기를 나누고 서로 어떻게 생각하는지 깊이 들여다볼 수 있는 시간으로 가지는 것이 좋습니다.진행자는 모든 참여자가 충분히 이야기하도록 말수가 별로 없는 참여자도 적극적으로 독려해주세요.5. 액션플랜 도출 (10분)자, 이제 선택의 시간입니다. 회고의 목적대로 잘한 일은 다음에 더 잘 할 수 있게, 잘못한 일은 다음에 더 잘 할 수 있도록 구체적인 다음 할 일을 꼭 선정해야 합니다. 참여자들과 상의해 스티커가 붙은 그룹 중에서 액션플랜을 도출할만한 항목만 남기고 이 항목에 관해서만 이야기합니다.문제가 도출되었다면 앞으로 어떤 방법으로 이 문제를 해결할지, 잘한 일에 더 잘할 일이 남았다면 어떻게 계속 좋은 방식을 유지할지 머리를 맞대고 고민해봅니다. 실천 방안 자체도 자세할수록 좋습니다. 명확하고 실행가능한, 추적가능한 목표 설정을 위해 주로 사용하는 기법인 EXACT 또는 SMART 가이드를 기반으로 목표를 설정합니다. 영리하게 목표설정하는 지침인 SMART, EXACT에 대해서는 애자일 이야기 블로그 포스트인 “영리하나 열정이 없다”를 참조해보시면 좋겠습니다.목표를 설정했다면 가능하면 이슈트래커에 이슈를 만들거나 사내 위키에 기록합니다. 회고 결과에 대해서 팀원이 아닌 다른 분들에게도 전체 회의 때 공유하면 더 좋겠죠?6. 마무리 온도 체크 (5분)첫 순서로 진행했던 온도 체크 기억하시나요? 마무리에도 온도 체크를 진행합니다. 회고하면서 이야기를 나누며 컨디션이 어떻게 달라졌는지 팀원들과 공유하는 시간을 가집니다.7. 회고의 회고 (5분)A4용지 맨 위에는 자신의 이름을 씁니다. 종이를 가로로 접어 한쪽에는 +, 다른 한쪽에는 -를 씁니다. 이번 회고 자체에 대해서 어떤 감상이 있는지 작성해봅니다. +에는 회고에서 좋았던 점, -에는 회고에서 아쉬웠던 점을 작성합니다. 짧게 작성하고 돌아가면서 팀원들이 롤링페이퍼 처럼 +, - 에 쓴 항목들에 감상을 표시하며 공감하는 시간을 가집니다.회고 방법에 대해 순서대로 설명했으니 이제 저희가 몇 년간 진행하며 느꼈던 장단점과 유의점을 간단히 적어봅니다.회고의 장점통상 주간 회의에서는 어떤 업무를 잘했는지, 잘 못 했는지, 또는 무엇을 했는지 하지 못했는지만 이야기합니다. 회고라는 회의로 꾸준히 업무 시간을 일정 부분 할애해 ‘어떻게’에 대한 이야기를 나누면 업무 프로세스를 개선하는 데 많은 도움이 됩니다.또한 회고 중 발현되는 업무 진행방식의 패턴들은 자연스럽게 스프린트 회의 등과 연계되어 다음 업무 단위 액션플랜과 계획을 세우는 데 지침이 됩니다.회고 자체가 업무 프로세스 개선의 여지를 열어놓는 액션입니다. 팀 차원에서 계속 업무 프로세스 개선에 관해 이야기를 쉽게 꺼내는 분위기가 만들어지고 이는 팀 전반적으로 사람들에게 의견을 내기 안전한 곳이라는 인상을 줍니다.회고 시 감정 해소보다는 업무 개선 위주로 회고를 진행하고 있으나, 업무에 대한 얘기를 하다 보면 자연스레 업무 수행 시 느꼈던 감정에 대한 이야기도 나눕니다. 업무시간 내 업무와 관련한 감정을 해소할 수 있도록 독려함으로써 업무시간 외 술자리 등, 비업무시간 사적 커뮤니케이션 비용을 완화하는 간접효과를 가져옵니다.관리자 입장에서는 업무 결과에 대한 다차원적 평가를 하는 데 도움이 됩니다. 대개 실적 기준으로 업무 내용을 평가합니다만, 실적이 좋았던 일도 과정과 내용상에서는 개선점을 찾을 수 있습니다. 회고에서 수집된 재료와 의견은, 이런 측면에서 다차원적 업무 평가를 하기 위한 요소로도 활용할 수 있습니다.회고의 단점과 회고 시 유의할 점회고 진행자 역량에 따라 회고 분위기 자체가 달라집니다. 진행자가 적절히 발언 제어를 안하면 한 사람이나 특정 주제에 대해 지나치게 길게 발언 할 수 있습니다. 이런 상황을 피하도록 회고 진행자가 꼭 유의해야 합니다.팀 일원이 진행자를 맡게 된다면 진행에 집중하느라 자신의 업무를 공유하거나 업무수행 방식의 개선점을 논의하기 어렵습니다. 주요 업무 단위에 대한 회고라면 진행자를 따로 두는 편이 좋습니다.회고 전체가 온도 체크는 진행하지만, 팀원들이 어떤 생각을 하는지 어떤 고민을 하는지 깊게 공감하거나 이야기하지는 않아서 각 팀원의 각 팀원의 컨디션 혹은 얼마나 행복하게 일하고 있는지 판단하기는 쉽지 않습니다. 저희는 이 아쉬운 점을 개선하기 위해서 해피아워라는 주간 회고를 추가로 진행하고 있습니다. 이 내용도 정리해서 블로그에 올릴 예정이니 기대해주세요.긴 글 읽어주셔서 감사합니다. 여러분이 속한 조직이나 팀에서는 정기적으로 회고하고 계신가요? 안 하신다면 이 글을 공유하며 팀에 도입해보면 어떨까요? 하고 있는 조직이라면 저희와 다른 회고 방식을 댓글로 알려주시면 좋겠습니다 :)#스포카 #기업문화 #조직문화 #행동강령 #돌아보기 #팀워크
조회수 3076

아마존의 56억 달러 성공에 감춰진 디자인의 비밀

아마존은 의심할 여지 없이 온라인 상거래에서 가장 영향력 있는 기업임에 틀림없다.미국 온라인 판매의 약 44%는 아마존을 통해서 이루어진다. 이는 대략 1/3의 미국인들이 아마존의 프라임 멤버십을 이용한다는 것을 의미한다.작년에만 56억 달러의 수입을 거둔 아마존은(비록 이중 연방정부에 낸 세금이 한 푼도 없어서 문제가 됐지만), 프라임 멤버십을 계속 이용할 것이라고 응답한 사용자가 전체 회원의 95%에 달한다.하지만 이런 것을 가능하게 한 아마존의 디자인에 대해 언급하는 사람은 거의 없다. 지금은 유명해진 아마존의 리더십 원칙들 살펴보면, “고객에 대한 몰입” 그리고 “발명과 단순화” 라는 오직 두 가지 원칙만이 제품과 서비스 개발에 대한 디자인적 방식과 관련이 있다.그런데 이런 두 가지 원칙에도 디자인에 관해 구체적으로 언급된 부분은 없다.미적인 관점에서 봤을 때, 아마존의 웹 스토어는 단순하지도 않고 예뻐 보이지도 않는다. 보통 그 두 가지를 좋은 디자인의 조건이라고 보는게 일반적인데 말이다.대신에, 아마존은 사용자 경험, 프로세스 및 기능을 단일화 하는데 중점을 두었다. 많은 디자이너들에게 있어, 비주얼적으로 난잡해보이는 아마존 디자인이 성공했다는 발상은, 다소 혼란스럽게 느껴지기도 한다. 그렇다면, 디자이너 입장에서, 미적으로 아름다워 보이지 않는 아마존의 디자인이 왜 사람들에게 먹히는지를 어떻게 해석해야 하는 것일까?아마존 디자인의 성공은 쇼핑 업계의(디지털이든 실제 물건이든, 럭셔리든 저가품이든) 가장 위대한 4가지 원칙을 지켰기 때문이다. 그들에게 있어서, 그 위대한 원칙은 첫째,1. 투명성프라이싱과 구매 과정을 분명하게 만들며, 누구나 쉽게 이해할 수 있어야 한다.얼핏 보면 아마존은 특별히 투명해 보이지는 않는다. 그간 아마존의 가변적 가격 모델을 생각해보면, 우버의 혐오스러울 정도의 급격한 가격 인상, 혹은 여행객들을 괴롭히는 비행기나 호텔의 급격한 가격 변동과 유사한 점이 있었다.그래서 아마존 역시 투명성 부족으로 비판을 받았으며, 벌금도 부과 당해 왔다. 비록 소비자들은 이러한 가변적 가격 모델에 신경 쓰지 않지만, 그들 나름대로 가장 싼 가격을 찾으러 조사를 하는 것에는 아주 익숙하다. 따라서 아마존의 가변적 가격 정책이 다른곳보다 특별하다고 할 수는 없다.그렇다면 왜 이용자들은 아마존의 가변적 가격 정책만 관대하게 받아들여 주는 것일까?가장 가능성 있는 이유로는, 아마존이 자신들의 프라임 서비스를 통해 온라인 쇼핑의 두 가지 장애물을 제거해줬기 때문이다. 그 중 하나는 배송에 있어 숨겨진 가격이고, 다른 하나는 온라인 쇼핑이 매장에 가서 사는 것보다 느리다는 인식이다. 프라임 서비스의 성공은 사용자가 쉽게 이해할 수 있도록 디자인을 잘 설계했기 때문인데, 1년 서비스 신청을 하면 2일 무료 배송을 받을 수 있고, 오스카 상을 받을 만한 훌륭한 영화들도 볼 수 있다. 이러한 프라임 서비스의 투명성(이해하기 쉬운)은 아마존으로 하여금 쇼핑에 있어 가장 주목할 만한 인터랙션 디자인을 만들 수 있게 하였다. 단순함과 우아함을 동시에 보여주는 아마존의 원클릭 구매 시스템(최근에 특허가 만료되는) 역시 이에 포함된다. 이 시스템은 아마존의 대쉬 버튼 디자인뿐만 아니라 아마존의 인공지능 비서인 Alexa가 만들어지는 초석을 마련하기도 했다.2. 실체성사람들이 두 가지, 혹은 여러가지 제품들 중 하나를 고를 때, 훌륭한 쇼핑 디자인은 그러한 제품 선택 과정을 실체적으로 보여주고 바로 결정을 내릴 수 있게 만든다. 따라서 사람들은 선택에 대한 정보를 잘 알게 된 상태에서 자신감 있게 결정을 할 수 있게 된다.아마존의 상품 표시 페이지는 엄청난 목표를 이룰 수 있게 기획되었다. 이용자들로 하여금 모든 제품의 특성을 쉽게 이해할 수 있게 한 것 역시 이에 포함된다. 보통 한 가지 물건만 파는(옷이나, 신발, 자동차 부품 등) 쇼핑몰 사이트에 가보면, 그 단일 물품의 특성에만 맞춰서 정보를 보여주곤 한다.이와는 대조적으로, 아마존은 상상할 수 있는 모든 제품을 팔 수 있도록 디자인 되었다. 이는 아마존은 다른 특정 품목이나 브랜드를 파는 사이트와 달리 상품 표시와 검색 결과 페이지가 우아하고 깔끔하게 보이지는 않는다는 것이다. 아마존은 이렇게 겉보기에 단점으로 보이는 것을 자신들만의 자산으로 변화시켰다. 아마존의 모든 상품 표시 페이지는 똑같은 모듈과 구조를 사용하고 있는데, 이는 일관성이 있기 때문에 이용자들로 하여금 어떤 상품을 검색하건 그 특성을 쉽게 이해하게 만든다.3. 신뢰성사람들은 자신들이 이용하고 있는 곳이 정직한 곳인지 알고 싶어한다.인터넷 쇼핑몰로써 아마존은 퍼스트-파티 판매(아마존에서 직접 판매하는 상품)와 써드-파티 판매(아마존의 전체 판매의 대략 절반을 구성하는)를 둘다 운영해야 하기 때문에, 일관성 있는 이용자 경험을 디자인한다는 자신들의 약속을 지켜야 하는 아마존은 큰 도전에 직면해 있다고 할 수 있다.한 가지 아마존의 쇼핑 운영에 대해 실망스러운 부분이 있다면, 그것은 여러 판매자들이 파는 물품을 검색했을 때이다. 예를 들어 어떤 판매자가 가장 믿을만한지, 배송비는 포함되어 있는지, 이용자들이 신뢰할 수 있다고 평가한 판매자는 누구인지와 같은 점들을 살펴보고, 자신 있게 결정하기까지는 많은 수고가 든다.이렇게 된 데에는 아주 흥미로운 이유가 있다. 아마존은 Etsy와 eBay와는 대조적으로 판매자들이 자신들만의 판매 페이지를 만드는 것을 꾸준히 막아왔다. 아마존에서 유저들은 쇼핑만 하기 때문에, 판매자들은 그저 아마존이 아직 하지 못하는 상품 조달과 배송만 하는 일꾼으로 보이기 마련이다. 이는 Uber와 Lyft에 등록된 운전 기사들이 회사가 자율주행차를 기다리는 동안 임시로 쓰는 과도기적 노동자들처럼 보이는 것과 유사하다.아마존이 직접 파는 상품과 서드-파티 판매자들이 판매하는 상품이 통합돼서 검색되는 것으로 인한 사용자들의 혼란과 불편은, 배송과 반품 절차라는, 사용자들이 훨씬 더 심각하게 받아들이는 문제에 일관적인 경험을 주기 위함이라고 아마존은 주장한다. 당신이 어떤 물건을 직접 아마존을 통해 사건, 혹은 아마존 마켓플레이스를 통해 사건 간에, 당신은 어쨌든 그 물건을 아마존에서 샀다고 느낄 것이다. 이는 아마존으로 하여금 아마존 프라임의 이틀 배송 시스템과 반품 프로세스를 서드-파티 판매자에게까지 적용 시킬 수 있게 만들었다. 이렇게 모든 배송과 반품 절차를 통합시키는 것의 목적은 어떤 물건이든 아마존에서 사는 유저들과 핵심적인 신뢰 관계를 구축하기 위함이다. 이와 반대로 만약 아마존이 서드-파티 판매자들 각각 이런 과정을 컨트롤 할 수 있게 허용했다면, 신뢰를 구축한다는 아마존의 목표는 훨씬 더 이루기 어려워 졌을 것이다.4. 유익함사람들이 자신들이 무엇을 원하지는 지, 무엇이 필요한 지 항상 아는 것은 아니다. 훌륭한 쇼핑 디자인은 사람들이 원하는 것을 예측해서 그것을 능동적으로 제공하는 것에 있다.아마존의 상품 상세 정보 페이지가 그 상품의 다양한 정보를 보여줄 수 있는 것처럼, 아마존의 검색 인터페이스(왼쪽 필터와 하단 카테고리 내비게이션)는 확장성이 뛰어나고 매끄럽게 조정되어 사용자들이 상황에 맞는 선택을 할 수 있게 해주기 때문에, 원하는 것을 바로 찾을 수 있다.하지만 아마존의 상품 디스플레이 페이지처럼, 왼쪽에 표시되는 검색 필터는 특정 상황에서는 카테고리에 완벽하게 맞춤으로 보이지 않는다. 예를 들어, 신발을 검색한다고 했을 때 아마존의 검색 툴과 자포스(아마존이 소유한 신발 전문 쇼핑몰)의 네비게이션을 비교해 보자. 자포스의 툴은 사용자 경험에 일관성을 부여해서 사용자들이 새로운 것을 배울 필요 없이 시스템을 통해 찾고자 하는 것을 빠르게 찾을 수 있게 하여 아마존이 가진 단점들을 해결하고 있다.디터 람스(독일의 유명 디자이너)가 말했듯이, 좋은 디자인은 제품을 쓸모 있게 만든다아마존의 비주얼적 디자인은 날씬해 보이지도, 간단해 보이지도, 아름답지도 않고 유저들의 감성적인 부분도 건드리지 않지만, 그 자체로 대단히 유용하다. 아마존의 기능과 그에 따른 미학은 효율적인 쇼핑 경험을 제공하는데 확실히 맞춰져있다. 사실, 아마존은 디지털 브루탈리즘의 일종으로 묘사될 수도 있다. 그것은 직접적이고 효율적이며, 가능한 사람들의 요구를 가장 덜 까다로운 방법으로 충족시켜 주려는 이상적인 목표를 가지고 있다.아마존의 성공은 디자인 업계에서 인정하고 싶지 않아 하는 한 가지 원칙을 분명하게 보여준다. 그것은 바로 ‘성공한 디자인이 꼭 아름다울 필요는 없다.’ 이다. 물론, 디자인이란 것이 그저 미적인 과제에 불과하다는 관념은, 연구 중심의 디자인적 사고가 실제로 널리 사용되며 오래 전에 틀렸음이 밝혀졌지만, 그래도 잘 디자인 됐다는 것이 꼭 아름다울 필요는 없다는 생각은 여전히 받아들이기 힘들 수도 있다. 디자인이라는 관점에서 아마존의 성공을 분석하기 위해선 그 인터페이스의 겉모습만큼이나 안에 숨겨진 시스템적 디자인 역시도 봐야 할 필요가 있다. 아마존의 디자인 철학은 사람들에게 많이 알려지지는 않았지만, 디자인으로 유명한 회사인 애플이나 이케아만큼이나 세계에 많은 영향을 끼쳤다. 아마존을 보면서 디자인이 별로 중요하지 않다고 생각하는 것은 분명한 실수다.아마존이 보다 나은 유저 경험을 만들기 위해 계속 애쓰고 있는 이러한 디자인 원칙들은 경쟁자들 입장에서 보면 기회가 될 수 있다는 사실에 주목할 필요가 있다. 각각의 원칙들을 뜯어보면 사람들이 쇼핑에 있어서 무엇을 중요시하는 지 알 수 있기 때문이다. 아마존은 회사가 앞으로 더 커짐에도 이런 원칙들을 고수할 수 있을까? 다른 경쟁사들이 사람들을 만족시킬 수 있는 더 나은 시스템을 만들 수 있을 때가 무르익은 것 같기도 하다. 개인적으론 월마트, 그들을 주목하고 있다.*글쓴이인 Jason Brush는 Creative and UX at Possible의 전무이며, LA에 있는 회사 지점에서 창의적인 사용자 경험 디자인을 감독하고 있다. POSSIBLE에서의 수상 경력 외에도, 그는 UCLA 파사데나에 있는 Art Center College of Desing에서 강의도 진행하고 있다.원문 : fastcodesign#더팀스 #THETEAMS #디자인 #디자이너 #인사이트 #아마존 #UX

기업문화 엿볼 때, 더팀스

로그인

/