Design | Whoborn Blog

통으로 UX, UI, GUI 기획 경험기 (Lean UX 개발)

beom — Fri, 19 Jun 2015 07:48:03 +0000

이전에블로그를 통해서 기획과 디자인에 대한 나의 짧은 경험을 말했던 적이 있었다.
후본에 오면서 기획과 디자인이 통합되는 경험을 하게 되었는데, 오늘은 그 두서 없었던 과정을 두서 없이 공개하려고 한다.

현재 후본은 중국 사업을 준비하고 있는 중이다.

(곧 그 아이템이 공개 될테지만, 이 글에서는 잠시 비밀에 붙여두기로 하였다.
그렇지만 이 글에 스포일링이 숨겨져 있으니, 자세히 들여다 보시라. ㅎㅎ)

거두 절미하고.. 그 작업을 하는 중에 기획, 디자인이 섞여서 통으로 작업이 진행되었다.

첫 번째 가장 큰 이유로 사업의 시급성으로 인해 2주 안에 개발까지 해야 한다는 매우 어려운 미션이 있었기 때문이고, 두 번째 이유는 Lean UX 방식을 차용하여 불필요한 문서를 없애고 화면의 구성을 바로 확인 할 수 있어야 하기 때문이었다.

1. 사업 이해하기

기획과 디자인을 맡은 나로썬 가장 중요한 시작점이다.
이 사업의 방향성, 특징, 사용자의 패턴 등을 리서치할 시간이 충분히 없기 때문에 중국 특허의 유경험자 후본의 배영식대표님의 사례를 기반으로 사업이해와 기획이 시작되었다.
워낙 잘 모르는 사업 분야이기 때문에 이것들이 가지는 성질에 대해서 충분히 설명을 듣고 머릿속에 있는 물음표 가지들을 최대한 빨리 수집해서 질문해야한다. 말하자면 대표님을 심층 인터뷰하는 방식일 수 있겠다. -_-a

2. 러프한 화면 구성

일단 최대한 빨리 화면을 구성해야만 했다.

(그래, 나에게는 목업 툴이 있지. ㅎㅎ
재빠른 목업은 발사믹으로 작업했습니다. 발사믹에 대한 경험기는 추후에…)

소요 된 시간은 약 하루하고 반나절.

“대표님! 봐주세요!!”

대표님 왈.

"구성은 괜찮은데요. 구글처럼 심플했으면 좋겠어요."

(응? 무슨 말씀이시지..?)

순간 모른다고 하면, 대표님이 잡스처럼 “You Fire!”라고 할지도 모른다는 웃기는 상상을 하며..
나의 핵존심을 최대한 빨리 접기로 했다.

그리고 바로 처음 기획한 것을 기반으로 GUI와 통으로 작업 하기로 했다. +_+

3. 디자인하면서 기획하고 가이드하기.

여기서부터가 진짜다.
후하… 읽기 전에 호흡부터 가다듬길 권장한다.

우선 디자인 컨셉에 해당하는 메인화면에 주력하기로 하였다.
상단에는 주요 서비스와 기능들을 집중시키고, 상단과 풋터 사이에 들어가는 서비스 소개에 해당하는 내용은 스킵하기로 한다.

(머리 속에는 구글처럼이 가득하다.)

메인 화면에 대한 사람들의 1차 피드백을 받고 그 자리에서 고쳐서 보여주어야 한다.

(지져분한 포토샵 레이어는… 일단 알아보기만 하면 된다… 하아..)

결정권자인 대표님을 비롯해 개발자, 그리고 서비스에 대한 톤을 함께 정할 수 있는 팀원들이 함께하는 자리를 마련해야 한다. 절대적으로 내가 혼자 디자인할 수 없다는 사실을 빨리 인정하고 수정할 부분을 피드백 받는다.

이 작업에서 강점은
Wireframe으로 구성된 디자인 보다 완제품에 가깝게 보여주어 버튼 효과나 화면의 이동을 보다 쉽게 상상할 수 있다는 점이다. 단, 앞서 첫번째에서 말했듯이 사업에 대한 방향성을 잘 이해하고 있어야 하며, 자신이 올바로 가고 있는지에 대한 피드백도 최대한 자주 받아야 한다.

디자인 1차 작업 – 피드백 – 디자인 2차 작업 – 피드백 … (완료 될 때 까지 무한 반복)

여기에서 사이사이 해야 할 일이 있는데, 그것이 바로 개발자 세팅에 관한 정보 전달이다.
디자인과 기획이 함께 진행되는 관계로 정확한 DB설정에 대한 내용은 못주더라도,
이미지 레이아웃을 전달하면 우리의 멋쟁이 개발자들이 기본 레이아웃 작업을 진행할 수 있기 때문이다.

디자인 가이드는 언제 어떻게 전달해야 할지에 대한 이슈가 있다.
가이드도 최대한 약식으로 주는 방향으로 해야한다. 이럴 경우 개발자와 디자이너의 이전에 했던 협업 방식이 중요하다.
약식 가이드에 대한 방식에 충분한 이해와 약속이 있을 경우에 쉽게 가능하다.

(디자인 작업물을 보여주고 싶지만… 엄청 큰 스포일링이기 때문에 추후에 올려주기로 한다. ㅎㅎ)

4. 가이드에 추가 QA 응하기와 브라우저 테스트

여기서부터는 내 역할이 확연히 줄어든다.
옆에서 방해인지 응원인지 모를 화이팅을 외쳐주거나, 조용히 다른 일 하면서 개발자들의 질문에 최대한 답변해 줄 준비를 하고 있어야 한다.
그리고 중간중간 멀티 디바이스 대응에 빠진 부분에 대한 내용을 개발자들에게 공유하는 체크리스트를 전달하기도 한다.

이후…
버그찾기와 서비스가 잘 돌아가는지 확인해야 하나…
아직 개발 단계이기 때문에 잠시 숨한번 돌리는 마음으로 이 글을 마친다. 후하.

The post 통으로 UX, UI, GUI 기획 경험기 (Lean UX 개발) first appeared on Whoborn Blog.

기획과 디자인

beom — Sun, 17 May 2015 11:13:43 +0000

서비스를 만들 때, 기획자와 디자이너와 개발자의 협업이 중요하다고 합니다.
업무의 성격이 다르기 때문에 소위… 아래와 같은 이미지로 서로를 바라보기도 합니다만^-^;;

오늘의 이야기는 정확히… 저의 정체성 혼란에 대한 이야기를 하고자 합니다.
저의 경우는 디자인을 전공해서 기획일을 너무도 하고 싶었고, 디자이너로 취업하기 보다는 기획자로 사회에 첫발을 내딛었습니다. 그래서 회사에서 하는일은? 기획만이었나라고 생각해보면, 오히려 기획과 디자인이 5:5 비율이었고 기획 안의 일이 서비스를 운영하고 관리하는 일.. 그리고 마케팅까지 고려해야 한다는 생각 때문에, 자연스럽게 기획과 디자인이 섞이게 되었습니다.

스스로 나는 왜이렇게 많은 일을 하고 있는가 하고 생각하면서도, 여기서 개발까지 배우면?
‘삼위일체가 되겠구나’ 라고 생각해서 잠깐 CSS도 공부해봤지만, 제 일이 아니라고 생각하고 개념만 이해하는 수준에서 접었습니다.. ㅠㅠ

어쨌든 그때 가지고 있던 생각중 강력한 한가지는 ‘기획자는 개발을 이해하고, 개발자는 디자인을 이해하야 하고, 디자이너는 기획을 이해해야 한다’고 생각했습니다. 이말인 즉슨, 기획자는 어디까지 개발을 확장할 수 있는지 알아야 더 다양한 기획을 할 수 있고, 개발자는 제품의 퀄리티를 생각해서 디자인을 어떻게 하면 현실적으로 구현 할 수 있을지 고민해야 하며, 디자이너는 기획자의 의도를 제대로 이해했을 때 비로소 포장이 아닌 사용성과 심미성을 모두 갖춘 디자인을 할 수 있다고 생각하게 되었지요.

물론… 현실적으론 여러가지를 동시에 생각하다 보니 몇년간은 제자리 걸음을 하는 것 같았습니다.

하지만 얼마 전 모 기업에서도 기획자가 사라지고 디자이너가 제품 기획에 참여하고, 불필요한 문서화로 설득하기 보다는 시각적인 장치로 프리젠테이션 한다는 기사를 볼 수 있었습니다. 결국 기획적인 자질을 가지고 디자인을 한다는 것에 대한 효과성과 더불어 지향점이 옳다고 더욱 느낄 수 있었습니다.

동시에 여러가지 경험을 쌓는 일은 느리게 나아가는 것 같거나 제자리 걸음처럼 느낄 수 있겠지만, 오히려 한걸음 한걸음 넓은 들판에 올라 시각을 넓히는 작업이지 않을까 생각이 됩니다. 이 언덕에 올라 어떤일을 할지 기대해 봅니다.

The post 기획과 디자인 first appeared on Whoborn Blog.

디자인산책(1) : 디자인 라이브러리 탐색

beom — Fri, 17 Apr 2015 11:22:11 +0000

따뜻한 봄의 입구에 디자인팀은 현대카드에서 만든 디자인라이브러리에 디자인 환경을 고민 하고자 찾아가 보았습니다. 모르고 그냥 지나치기 쉽지만, 관찰력있는 디자이너들에게는 한 눈에 띄는 독특한 건물입니다.

꽤나 까다로운 절차를 거치고 입장을 합니다.
방문하는 절차는 이렇습니다.

입구에서 현대카드와 신분증을 제시한다.
제공받은 입장 카드를 디바이스에 인식하고 2층으로 입장합니다.

좀 더 자세한 내용은 현대카드 웹사이트에서 확인할 수 있습니다.

2층에 올라가면 원하는 주제별로 서가로 갈 수 있도록 지도나 도표로 간략하게 안내되어 있습니다. 다른 도서관 같이 넓은 공간이라기 보다는 작고 ‘ㄷ자’형태로 공간이 하나의 통로로 연결되어 있습니다. 처음 방문한 사람이 느끼는 감정은 ‘어디로 가야할까?’ 라는 인상을 받게됩니다.

무사시노 미술대학의 도서관 정보디자인에 대한 사례가 문득 떠올랐습니다. 도서관 방문자에게 원하는 서가를 쉽게 찾을 수 있도록 거리와 방향을 시각적으로 제시함으로 낯선 공간을 방문하는 이의 마음까지 고려하는 공간으로 대표적인 사례중 하나입니다. 그런면에서는 현대카드의 디자인 라이브러리는 공간은 공간, 정보는 정보라는 인상을 주기 쉽도록 되어 있어 아쉬웠습니다.

희귀한 자료를 볼 수 있는데, 저희가 간 날에는 에로스에 관련한 사진 작품집과 Life지의 역사를 한눈에 살펴볼 수 있는 자료를 전시하고 있었습니다.

요즘에 주요 관심사인 아이콘 디자인과 관련된 자료집과 웹디자인, 일러스트북 등등 몇가지 책을 골라서 천천히 살펴보았습니다. ‘ㄷ자’로 네모난 마당을 바라보는 창쪽에서 책을 읽으니 나른해지는 한편, 완전히 밀착해서 책을 읽는 형태의 의자가 아닌점이 아쉬우면서 잠시 머무를 수 있었습니다. 참고로 창가쪽 의자 외에도 작은 공간에 온듯한 공간과 기존 도서관같이 책상과 의자가 함께 놓여있는 공간도 있었습니다.

기업의 어떤 가치와 경험을 디자인(공간)에 담아야 할까,
단순히 멋있어 보이고 뭔가 강한 메세지가 담겨 있는 것처럼 포장하는 수준에 그치지 않아야 한다고 생각합니다. 심미적이지만 잘 읽히고, 알면 알수록 가치가 느껴질 수 있는 그런 디자인에 대해서 고민하게 되는 시간이었습니다.

덧붙여 우리 후본의 디자인팀도 좋은 디자인 자료를 공유할 수 있는 공간을 기획해보면 좋겠습니다. ^-^;

디자인 산책 시리즈 1:
현대카드 디자인라이브러리 탐색