스토리 홈

인터뷰

피드

뉴스

디자인에 관심있다면 꼭 읽어야하는 글
조회수 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정말 리더다운 답변이네요.후드 입고 오시면 격하게 반겨드립니다! 엘리스에서 만나요!
조회수 1449

'회사소개서 만드는데 얼마에요?'

오더의 정석: 무엇을 알려주어야 할까? 우리가 병원에 가면 일단 접수를 하고, 기다렸다가 의사샘을 만나서 증상을 얘기하잖아요. 사실 모든 일은 이런 순서라는 게 있어요. 다짜고짜 원장실로 직행한 후 멱살을 잡고 주사를 내놓으라고 할 수 없어요. 증상도 얘기 안하고 얼마냐고 물어볼 수도 없어요. 어딜 어떻게 하고 싶은지 말을 해줘야 해요.얼마여!! 얼마냐고!!!!!디자이너에게 의뢰를 할 때도 비슷해요. 뭔가 접수가 있고, 미팅을 하고 협의를 하고 증상을 얘기한 후 거기에 맞는 솔루션의 비용을 책정하는 것이 기본이예요. 자, 이제 한 번 의뢰를 해볼께요.우리는 회사소개서를 만들고싶으니, 일단 회사소개서를 잘 만드는 사람을 수소문 해볼거예요. 소개건이나 포트폴리오 사이트를 뒤져서 괜찮은 컨셉의 디자이너를 컨택하겠죠. 컨택 후엔 유비의 심정으로 메시지를 보낼 거예요. 보통 페이스북이나 SNS에서 디자이너를 소개받은 경우엔 이 메시지의 간결성이 더욱 강렬해집니다.   “회사소개서 만들려고 하는데, 견적 요청드립니다.” “회사소개서 만들려고 하는데 가능하신가요.” “회사소개서 제작하는데 얼마정도 하시나요.” 회사소개서 얼마임? 이라고 하지 않은 것이 다행일정도로 간결한 의뢰예요.조만간 초성만 쓸지도 몰라요.  ㅅㄱㅅ ㅇㅁ?대다수의 이러한 메시지를 받은 디자이너는 머리위에 600개 정도의 물음표가 생기기 마련이죠.???????????????????무슨 종류의 어떤 제작건이며, 컨셉은 무엇이고, 가로인지, 세로인지, 페이지는, 기한은, 용도는, 인쇄는, 디자인범위는 아트웍이나 사진, 자료제공은 어떻게, 담당자는, 지불방식은, 계약여부는?등등 엄청난 궁금증을 뒤로 한 채 다시 물어보곤 해요.“언제까지인가요?” “다음주 수요일까지 해주시면 됩니다.” "몇 장이예요?""20장 정도됩니다."보통은 이런 식의 대화가 수십 번 오고 가는데 이러한 소통에는 디자이너의 책임도 있을 거예요. 아예 의뢰서양식을 만들어서 기입해 달라고 메일로 보내면 차라리 간편할 일일 수도 있겠네요. 하지만, 우리는 대화끝에 ‘^^’도 붙여야 하고 ’ㅜㅜ’도 붙여야 하는 등 힘들고도 답답한 대화를 이어가는 것이 보통이예요. 의뢰는 하는 방법을 스크립트로 말하면 대략 아래와 같을 거예요. ‘이번에 저희 회사 회사소개서를 만들려고 합니다. OO사이트의 포트폴리오를 보고 연락드립니다. 해당 회사소개서는 아래 내용과 함께 제작을 진행하려고 하오니, 확인하시고 관련된 견적과 추가적인 포트폴리오가 있으시다면 유첨하여 회신주시면 감사드리겠습니다.1. 제작기한 : 20XX년 9월30일(18:00까지)2. 제작목적 : 대외발송용 회사소개서 제작3. 제작방식 : 30페이지의 가로좌철 중철제본 표지4p+내지26p 구성 / A4사이즈4. 자료제공 : 디자인에 필요한 사진자료 및 텍스트는 제공해드립니다.5. 제공시점 : 견적확인 후 구두계약상 확정이 되면 당일 중으로 전달해드릴 예정입니다.6. 제작컨셉 : 하기첨부한 레퍼런스 양식을 확인해주시면 되겠습니다.(이미지첨부)7. 작업범위 : 인쇄는 저희측에서 진행합니다, 디자이너님께는 제작된 디자인파일의 PDF본과 ai원본파일을 요청드립니다. 원본제공에 대한 추가옵션도 견적에 포함시켜주시면 감사하겠습니다.8. 업체특성 : 저희는 비즈니스솔루션을 제공하는 IT업체로서 B2B를 전문으로 하는 터라 전문적이고 레퍼런스가 눈에 띄는 형식이면 좋겠습니다. 상세한 회사소개는 회사소개서를 첨부하여 드립니다.9. 계약방식 : 견적 조율 후 계약은 서면으로 작성합니다.10. 기정예산 : 추후 협의가능합니다.11. 지불방식 : 견적 조율 후 계약금30%와 잔금70%형식으로 지불되며 일정은 추후 계약서에 상세기재하도록 하겠습니다.12. 담당자명 : OOO / 연락처 : 010-0000-0000이러한 방식으로 의뢰를 해준다면 엄청나게 감사하고 황공해요.  감사!!!!!!!!!!!!!!!!!하지만, 굳이 이정도 까지가 아니더라도 적어도 기본적인 기한, 비용, 작업범위 등 정도만이라도 알려주는 것은 일종의 예의라고 할 수 있죠. 디자이너는 미륵보살이 아니기에 관심법을 쓸 수 없어요.그러나 무작정 이렇게 적으라고 강요하는 것은 실무자입장에서 다소 억울할 수 있으니, 잠시 디자이너는 어떤 방식으로 작업을 하는 지 살펴볼 필요가 있어요.  디자이너는 우선 백지에서 작업을 시작하지 않아요. 적어도 저는 그래요. 전 백지가 꽤나 무섭거든요. 기본적으로 클라이언트가 요청한 내용과 컨셉에 대한 다양한 레퍼런스를 검토하고 찾아보는 작업이 먼저예요. 핀터레스트를 뒤지고 비핸스를 뒤지고 뒤지다가 구경하고 계속 보다가..하루가 가고.........(이러면 안됨)핀터레스트를 보는 눈빛....우리 회사가 원하는 방향과 색깔을 얘기해주지 않으면 애당초 컨셉 설정 자체가 어려워질 거예요. 핀터레스트에는 오만가지 예쁘고 다양한 시안들이 가득하거든요.   이 작업을 좀 더 빠르게 할 수 있는 방법이 담당자가 직접 레퍼런스 이미지를 찾아서 첨부해주는 방법인데, 귀찮다면 디자이너에게 직접 요청하도록 해요.  물론 홈페이지 주소만 덜렁 던져주고 ‘당신이 알아서 찾아보세요.’ 라는 식의 행동은 자칫 오해를 불러일으킬 수 있으니, 상세한 회사설명을 직접 언급해주는 편이 좋아요. 이런 식으로 말이죠.우리 회사는 이런이런 일을 하고 있는데 타겟층은 이러하고 이런 서비스를 통해 이런 가치를 주려고 합니다. 현재 이런이런 정도까지 브랜드작업이 진행되있는데 이것때문에 주춤하고 있고, 이 소개서를 통해 넥스트 이런것들을 달성해보려고 해요!~ 지금까지 저희가 해왔던 대략적인 시안컨셉이 이러했습니다. 하지만 꼭 이렇게 가지 않아도 돼요. 조금 가벼운 느낌을 주면서 아기자기한 컨셉으로 재구성해보려고 하는데, 어울리는 컨셉 2,3가지를 제안해주시면 감사하겠습니다. 위에서 컨셉이 잡히고 나면 레이아웃과 스타일 설정을 한다고 했는데, 이 레이아웃이란 것은 백지에 선을 긋는 작업이므로 일단 작업사이즈를 정확하게 알아야하죠. 주로 mm단위나 픽셀단위로 알려주어야 해요! 그리고 책자라면 제본위치와 방식두요!(기껏 작업해놓고 타공으로 글자 다 뚫리면 개난감) 이 후 본격적인 작업을 진행하는데 디자이너는 하루에 얼마나 작업을 해야 하고, 수정시기는 언제쯤이 좋을 지 시간분배를 해요.  디자이너는 도깨비방망이로 작업하지 않아요.(물론 그런게 있으면 좋겠지만) 나오라면 뚝딱 나오는 것이 아니며, 폰트 자간 수정하는 데에만 몇 시간이 걸리기도 하죠. 물론 이게 좋은 건 아니지만, 확실히 물리적 시간이 걸리는 노가다가 많거든요. PPT디자인도 그러해요. 물리적으로도 1페이지당 1시간씩만 잡아도 30페이지면 30시간이예요. 대부분 디자인은 중간에 갈아엎거나 컨셉 전체가 바뀌는 경우도 있기 때문에 물리적계산보다 훨씬 오랜 시간이 걸리기 마련이겠죠. 물론 저 30시간은 밥도 안 먹고, 잠도 안 자고, 화장실도 안 간다는 전제로 가능하다는 얘기예요.참으면 건강에 안좋음..하지만 디자이너도 사람이니 카톡 볼 시간은 있어야 하지 않겠습니까. 작업기한은 명확하게 알려주도록 해요. 단, 기한은 1주일뒤인데, 자료를 주는 시점이 3일 뒤라면 그것 또한 문제가 되겠죠... 제작기한은 자료를 제공하는 시점으로부터 몇 일로 책정하여 알려주는 것이 온당해요! 그리고 가장 중요한 비용문제는 직접 제안해도, 역제안을 요청해도 상관은 없는 것 같아요. 다만, ‘일단 그것은 협의중이니 디자인부터 해주세요.’ 라는 것은 좋지 않아요. 아직 반찬은 사오지 않았지만 물부터 올려놔라..하는 것과 같달까요. 세상 어느 법도에도 얼마 줄 지도 얘기하지 않고 무작정 일부터 시키는 경우는 없어요. 이러한 깜깜이 계약를 진행하다가 추후에 도저히 맞지 않는 견적으로 서로 문제가 생기게 되면 디자이너도 클라이언트도 서로 피곤해지기 마련이죠. 그러니 비용문제는 세상 무엇보다 정확하고 딱딱 떨어지게 얘기하는 것이 좋아요.  그렇지 않으면 이런 미션을 수행하게 됨 물론 위의 내용은 제작물을 외주로 진행할 때의 경우이지만 인하우스 디자이너에게 요청할 때도 거의 비슷해요! 내부 디자이너에겐 위 내용의 1~7번까지를 서면으로 제공해주는 것이 좋으며, 추가적으로 결재라인과 1,2차 시안제출일도 함께 적어주는 거예요. 다른 업무와의 균형도 맞추어야 하고 작업시간도 책정해야 해요. 이 때 ‘당연히 우리의 놀라우신 디자이너님은 새벽2시에 퇴근하시겠지?’ 라는 생각의 업무시간 책정은 싫어요. 디자이너도 밤에 잠을 청하는 생명체예요.  -.- 내부 제작물이든, 외주건이든 결국 가장 중요한 것은 ‘소통의 정확성’ 이예요. 사실 1번, 2번, 3번으로 항목별 나열을 한 것은 줄글로 쓸 때보다 정보누락의 확률이 줄어들기 때문이죠. 대부분 줄글이나 구두지시는 추후에 오더상의 문제를 야기할 가능성이 커요. 읽다가 놓치는 것들이 많아지거든요. 넘버링은 신비한 힘을 지니고 있으니 숫자의 힘을 믿어보아요. 
조회수 1232

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

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

Adobe XD로 페이퍼 UI 디자인하기

Adobe XD(이하, XD)는 Sketch, Balsamiq 등의 프로토타이핑/와이어프레임 툴에 대항하기 위해, Comet이라는 프로젝트 이름으로 시작된 Adobe의 프로토타이핑 툴입니다.그동안 그래픽 디자인 툴에서 Adobe의 영향력은 절대적이었습니다. 하지만 UI 디자인에 특화된 툴들이 등장하기 시작하면서 Adobe의 입지는 좁아졌고, 이런 상황을 극복하기 위해 출시된 툴이 바로 XD입니다. 저는 페이퍼 UI 작업을 하면서 8개월 동안 XD를 사용해왔습니다. XD를 실무에서 사용하며 느낀 점과 어떤 기능을 사용해 UI 디자인을 진행했는지 이야기해 보려고 합니다.XD를 도입하게 된 배경현재 UI 디자인 영역에서 가장 높은 점유율을 보이는 툴은 스케치일 것입니다. 빠르고, 편리하며, 다양한 익스텐션으로 UI 디자인에 최적화된 모습을 보여주고 있습니다. 이렇게 많이 사용되고 있는 스케치에 비하면 출시 된 지 얼마 되지 않은 XD는 아직 부족한 점이 많습니다. 그런데도 불구하고 현재 XD를 이용해 페이퍼 UI 디자인하는 것에 대해 만족하고 있는데요, 그 이유는 다음과 같습니다.UI 디자인에 제약이 많은 PAPER리디북스에서 판매하고 있는 PAPER와 PAPER Lite(이하 페이퍼)는 2015년 10월에 출시한 리디북스 전용 전자책 단말기입니다. 일반적인 LCD와 달리 EPD(Electrophoretic Display)를 사용한 제품입니다.EPD 패널은흑백만 표현 가능하다는 점흑백도 (실질적으로) 16단계만 표현할 수 있다는 점반응 속도가 느리다는 점특징이 있습니다. 이러한 특징 때문에 일반적인 모바일 디바이스와는 다른 방향으로 UI를 디자인해야 합니다.빠르게 작업하고, 쉽게 공유할 수 있는 XD하지만, 그러한 제약 덕분에 XD를 사용해보는데 더 좋은 환경이 되었습니다. 디테일한 패스 제작이 불가능한 점이나 UI 요소에 필요한 스타일을 완전히 표현할 수 없다는 XD의 단점은 페이퍼 UI 디자인을 하는 데 큰 문제가 되지 않았습니다. 오히려 빠르게 프로토타입을 진행하고 바로 공유할 수 있는 점이 다양한 팀과 함께 진행해야만 하는 페이퍼 UI 디자인에 큰 장점으로 다가왔습니다.XD의 강점올해 초부터 지금까지 XD를 통해 페이퍼 UI 작업을 진행했고, 기능이 부족했음에도 계속 사용해온 이유는 크게 세 가지였습니다.1. 기존 Adobe 툴 사용자에게 익숙한 UIXD를 사용하기 시작하면서 처음 느낀 장점은 기존 Adobe 툴과 UI가 비슷해 적응하기 쉽다는 점이었습니다. 이는 새로운 툴임에도 불구하고 사용성의 진입 장벽을 낮춰주는 역할을 합니다. 스케치를 처음 시작했을 때 느꼈던 낯선 작업 환경과 적응하는데 걸렸던 시간을 생각한다면 오랫동안 써왔던 툴과 비슷한 경험을 제공하는 XD의 장점이 드러납니다. 스케치 또한 적응하면 능수능란하게 사용할 수 있겠지만 당장 입문자에게 편리한 쪽은 XD라 생각합니다.2. 빠른 플로우 제작 시간/과정다른 툴들과 다르게 XD는 디자인 화면과 프로토타입 화면을 유연하게 왔다 갔다 할 수 있습니다. ‘디자인’ 탭에서 각 화면 디자인을 끝낸 후 바로 ‘프로토타입’ 탭으로 전환해 플로우를 구성할 수 있습니다. 프로토타입을 제작하는 방법도 UI 요소와 각 화면 사이를 노드로 연결하는 방식이라 쉽고 빠르게 플로우를 검증할 수 있습니다. 일반적인 LCD 기반 기계와 달리 페이퍼는 디스플레이의 한계가 많아서 UI 테스트가 많이 필요합니다. 이럴 때, 유용합니다.3. 쉬운 공유 기능이렇게 만들어진 플로우를 다른 팀과 손쉽게 공유할 수 있다는 것도 큰 장점입니다. 프로토타입을 제작하고 버튼 몇 번만 눌러주면 Adobe 서버에 업로드되고 공유 링크가 만들어지는데 이 링크를 전달해 다른 팀의 의견을 받을 수 있습니다.XD를 이용해 페이퍼 UI 디자인해보기그럼, 실무에서 어떻게 XD를 사용하고 있는지 간단히 소개해보려고 합니다. 보여드릴 예시는 암호를 입력해 구매목록에 접근하는 기능입니다.디자인 : 기본 UI 디자인벡터/텍스트 툴을 이용 기본 UI 디자인기본 UI 요소들은 XD에서 충분히 표현할 수 있으므로 버튼, 토글스위치, 프로그레스 바, 텍스트 등의 UI 요소는 XD에서 바로 작업합니다. EPD의 특성상 컬러를 다양하게 사용할 수 없으므로 검은색(#000000), 회색(#333333, #666666, #999999), 흰색(#FFFFFF)만 컬러 셋에 등록해두고 사용합니다. XD에서 작업하기 힘든 복잡한 모양의 아이콘은 일러스트레이터에서 작업한 후 패스를 복사해 붙여넣기 합니다.디자인 : 반복 그리드XD에서 호평을 받는 그리드 기능을 이용해 책 목록을 만들어 보겠습니다. 리디북스 서점이나 뷰어에서 가장 많이 보이는 레이아웃이 ‘책 목록’인데 이러한 그리드 구조를 XD에서는 손쉽게 만들 수 있습니다. 책 커버 이미지, 제목, 저자 등 개별 항목을 선택한 후 ‘반복 그리드’를 적용해줍니다. 그리고 그리드 전체 크기와 각 항목 사이의 간격을 드래그로 조절해주면 책 목록을 쉽게 만들어낼 수 있습니다. 스케치에서는 Craft 같은 플러그인을 이용해야 하는 기능이지만 XD에서는 별도의 플러그인 없이 구현할 수 있습니다.디자인 : 프로토타이핑각 화면이 완성되었다면 프로토타이핑을 진행합니다. 이번 예시에서는 ‘내 서재에서 구매목록 탭’ → ‘암호 확인’ → ‘구매목록’으로 이동하는 프로세스를 구현합니다. XD의 프로토타입 탭으로 이동한 후 ‘구매목록’ 텍스트를 선택하고 노드를 ‘암호 입력’ 페이지로 연결해줍니다. ‘암호 입력’ 페이지에서는 아트보드 전체를 ‘구매목록’ 아트보드로 연결합니다.온라인 공유프로토타입 확인을 위한 공유 링크 만들기프로토타입을 완료했다면 오른쪽 위의 ‘미리 보기’ 버튼을 눌러 이상이 없는지 확인해보고, 타 팀에 공유할 링크를 만듭니다. 오른쪽 위의 ‘온라인 공유’를 클릭하면 제목, 섬네일 이미지를 지정할 수 있고 링크 업데이트나 새 링크를 눌러 웹에서 확인할 수 있는 링크를 복사할 수 있습니다. 이제 이 링크를 타 팀에 전달하고 피드백을 받으면 디자인 과정이 완료됩니다.XD에 바라는 기능제가 담당하고 있는 페이퍼 UI 디자인을 할 때는 XD의 불편함이 그리 크지 않습니다. 페이퍼 UI 특성상 세밀한 디자인이 필요하다기보다 전체 흐름을 점검하며 사용자 경험의 단계를 줄이는 것이 더 유용한 경우가 많기 때문입니다. 하지만 이러한 상황에서도 XD에 아쉬운 점이 있는데 몇 가지 부족한 점을 꼽아보겠습니다.1. Photoshop/Illustrator 파일 호환Adobe에서 출시한 툴답게 단축키와 인터페이스가 포토샵/일러스트레이터를 많이 닮아있습니다. 하지만 파일 호환성은 만족스럽지 않은데요, 일러스트레이터 파일이나 포토샵 파일을 불러오는 것이 불가능합니다. 가져올 수 있는 파일은 SVG와 JPG, PNG 등의 비트맵 이미지뿐입니다. 저는 따로 파일을 가져오지 않고 일러스트레이터에서 패스를 복사 → XD에 붙여넣는 방식으로 작업하고 있습니다. 포토샵 파일은 어렵더라도 일러스트레이터 파일은 손쉽게 들고 올 수 있으면 좋겠습니다.2. 가이드 추출 및 공유스케치는 Zeplin, Sketch-measure 같은 훌륭한 가이드 익스텐션이 존재합니다. 각 오브젝트의 위치와 크기, 코멘트를 공유할 수 있는 툴인데요, 아쉽게도 XD에서는 가이드를 생성하고, 전달하기가 마땅치 않습니다. 별도로 이미지를 제작하거나 문서로 전달해야 한다는 게 아쉽네요.3. 레이어XD에는 레이어 패널이 없습니다. 일러스트레이터처럼 ‘앞으로 가져오기/뒤로 보내기’ 등의 높낮이 개념은 존재하지만, 포토샵에서 볼 수 있는 레이어 패널은 없습니다. 그래서 오브젝트를 레이어 별로 정리하거나 조절할 방법이 없는데요, 차후 지원되면 좋겠습니다.4. 심볼스케치에는 UI 요소나 반복적으로 사용할 요소를 만들어두고 재사용할 수 있는 심볼 기능이 있습니다. 포토샵의 스마트 오브젝트와 비슷한 개념인데요, 대표 심볼을 수정하면 모든 심볼에 반영이 되어 편리하게 사용할 수 있다는 점이 좋은데, 아직 XD에는 이런 심볼 기능이 없습니다. 그래서 거의 비슷한 요소들을 복사 → 붙여넣기 해야 한다는 단점이 있습니다. 반드시 추가되면 좋겠습니다.5. 컬러 관리마지막으로 컬러를 관리할 수 있는 기능이 없습니다. 포토샵에서는 Swatch를 통해 컬러 세트를 관리할 수 있는데 XD에서는 자주 사용하는 컬러를 등록할 수는 있어도 별도의 파일로 추출 → 공유하는 것이 불가능합니다. 특히, 리디북스에서는 RSG(Ridibooks Style Guide)를 통해 컬러를 일관되게 사용하고 있는데요, XD에서는 이러한 컬러 세트를 사용할 수 없어 아쉽습니다. 미리 컬러를 등록해둔 XD 파일을 이용해 작업을 시작하고 있지만 좀 더 세심한 컬러 관리 기능이 도입되면 좋겠습니다.다음 업데이트가 기대되는 툴그동안 디자이너에게 포토샵과 일러스트레이터의 위상은 높았습니다. 하지만, 어느 순간부터 UI 디자인의 무대가 웹에서 모바일로 이동하고, 모바일 UI 디자인이 필요로 하는 다양한 기능들을 가지고 있는 툴에게 자리를 내주게 되었습니다. 하지만, Adobe도 가만있지 않고 기존의 툴에서 부족한 점이 무엇인지 정확히 파악하고, 그 부분을 쉽게 사용할 수 있는 XD를 출시하게 된 것이죠.디자이너의 입장에서는 아직 아쉬움이 많지만 간단하게 만들 수 있는 그리드, 빠르게 진행할 수 있는 프로토타이핑, 그리고 만든 프로토타입을 쉽게 공유할 수 있는 기능 등 XD만의 특별한 부분도 많아 계속 XD를 통해 작업해볼 생각입니다. 또, 정식 버전으로 출시된 후 한, 두 달에 한 번씩 업데이트되고 있는데요, 업데이트 내용을 보면 XD가 어떠한 방향으로 나아가야 할지 Adobe가 잘 알고 있음을 느낄 수 있었습니다. 앞으로도 발전할 XD를 기다리며 글을 마칩니다.맥 사용자이고 Adobe에 회원 가입이 되어있다면 무료로 XD를 사용할 수 있습니다.http://www.adobe.com/kr/products/experience-design.html#리디북스 #디자인 #디자이너 #Adobe #XD #AdobeXD #꿀팁 #디자인꿀팁 #UI #페이퍼UI #반복그리드 #프로토타이핑 #공유기능

기업문화 엿볼 때, 더팀스

로그인

/