Day 4 - Skype 상으로 함께 UI 디자인하기

멀리 떨어진 팀원들이 화상회의를 통해 함께 디자인을 수정하는 과정을 공유합니다.

This is Lab80’s daily journal from our trip to the SF Bay Area to test prototypes of Hello Money. See all entries.

Customer Interview #3

오늘 우리 ‘JYP’ 프로토타입을 보고 피드백을 준 분은 유명 엔터프라이즈 소프트웨어의 디자인 파운더였던 빌입니다. 날카로운 분이라 역시 조금 긴장을 했는데, 또다시 의외로 긍정적인 반응이 나오네요. 우리가 지금까지 했던 다른 시도보다 현 방향이 더 비지니스에 가까운 방향이라는 확신이 점점 들고 있습니다.

Test customer #3.

Thinking Ahead

이렇게 방향 면에서 조금씩 안심과 흥분이 되기 시작하니, 제가 이처럼 인터뷰나 미팅을 다닐 때 더욱 신속하게 피드백을 반영해서 개발을 할 수 있는 팀이 필요하다는 생각이 서서히 들기 시작합니다. 지금은 제가 유일한 풀타임 개발자거든요.

앞으로 뭐가 필요할지 좀 이를지라도 이렇게 미리미리 머릿속에서 예상을 해보는게 또 우리의 책임이기도 하죠.

Designing Over Skype

벌써 3번의 피드백을 받았네요. 첫 두세번의 테스트만 해봐도 뭐를 고쳐야 할지 뻔한 것들은 대부분 잡힙니다.

오늘 스카입으로 영상통화하면서 1) 테스트 해본 사용자와 데모 현장에서 애로사항을 느꼈던 우리팀의 피드백에 맞춰서 2) 팀 멤버들이 지켜보는 앞에서 실시간으로 신나게 디자인을 업데이트했습니다. 저희가 스카입으로 벌이는 디자인 회의 방법을 공개합니다.

1. Discuss low-hanging changes

뭘 고칠지 함께 말로 논의하고, 고치기로 정한 부분을 구글독에 적습니다.

2. Designer mocks it up

구글문서에 동의한 사항을 보면서 디자이너인 제가 일단 새로운 목업을 만듭니다. 이때는 금방금방 변화를 주기 쉬운 일러스트레이터나 키노트를 사용합니다.

구글문서를 적었을 때 모든 디테일까지 결정했던 것이 아니기 때문에 이때 자세한 부분은 어느정도 디자이너의 재량껏 의사결정을 해가면서 판단합니다. 단 한장의 목업일 뿐이고 이나마도 완성되지 않았지만 바로 반나절 후나 다음날에 구글 드라이브에 스크린샷 한장을 넣고, 스카입으로 팀의 의견을 듣습니다.

3. Iterate over Skype

자 그럼 이제 화상 채팅으로 디자인 회의가 시작됩니다.

먼저 몸을 풀고...

구글 드라이브에 넣어놓은 스크린샷을 열어본 두사람, 피드백을 주기 시작합니다. 마이클이 UI 순서의 일관성이 더 필요하다는 제안을합니다. 이럴때 동의할 수 없는 부분은 반론을 제기합니다.

동의가 되는 경우에는 디자이너인 제가 당장 실행에 옮깁니다. UI의 순서를 즉각 일러스트레이터에서 바꿔서, 스크린샷을 찍고, 찍힌 PNG를 약 3분 후 구글 드라이브로 밀어 넣습니다. 스카입을 통해 팀원들에게 “23.png 추가했으니 지금 보라”고 얘기합니다.

이럴때 목업을 바꿔나갈때는 그때 그때 예쁜 목업을 만들어내는 완성도가 있는게 중요한 게 아닙니다. 우리가 동의한 게 어떤것인가 즉석에서 함께 볼 수 있는것이 중요하고, 지금 제안하는 수정사항들을 한눈에 보고 함께 오케이를 하는게 중요합니다. 목업은 뭐 나중에 깨끗하게 만들면 되거든요.

4. Rough mockup of improved UX flow

계속해서 팀 전체가 디자인 회의를 하고, 디자이너인 제가 제안된 사항을 즉각적으로 반영하여 보여주는 과정을 반복합니다. 그리고 이럴때는 딱 필요한 최소한만을 반영해서 보여줍니다.

예를 들어, 화면 맨 위의 그래프가 현재 포트폴리오의 지난 10년간 수익을 보여주는게 낫겠다고 누군가 제안하고 팀이 동의하면, 당장 그래프를 새로 다 만드는게 아니라 그래프 제목만 바꾸는 식입니다. 그리고 준희님이 이 그래프를 그릴 수 있는 데이타와 API 가 있는가 즉시 검토합니다.

“현재의 포트폴리오” 부분이 더 중요하므로 화면 상단으로 옮겨와야 한다는데 동의합니다. 다시금 디자이너인 제가 일러스트레이터로 자리를 대충 확 바꾸고 스크린샷을 찍은 후 약 3분 후 구글 드라이브에 밀어넣습니다.

이처럼 제가 일단 제 판단으로 그린것을 스크린샷 찍어 구글 드라이브로 실시간 공유하고, 마이클이 좋은점 아닌점을 비평하고, 준희님이 아이디어를 제공하는 패턴을 20분가량 반복하고 나자 바뀐 UX를 대략 보여줄 수 있는 지저분한 목업이 하나 나옵니다. 지저분하지만, 이게 우리 사이의 계약서 같은 것이므로 디자인 회의는 여기서 일단 끝납니다.

5. Create a clean mockup

샌프란 팀이 자는동안 저는 지저분한 한장짜리 목업을 깨끗한 여러장의 목업으로 다시 만들어냅니다. 다 만들었다, 팀이 결정해줬으면 하는 부분이 있다고 이메일을 보내놓고 자러 갑니다.

일어나니 샌프란 팀의 답장이 와 있군요. 저는 샌프란 팀의 피드백을 읽고 목업을 살짝 수정한 후, 우리팀은 오늘의 스카입 회의를 재개합니다.

위에 보이다시피, 지금 진행중인 UX 업데이트 논의에 직접적으로 관련이 있는 부분만 목업을 하고, 나머지 차트 부분은 아예 비워놓았습니다.

요점정리

원칙적으로는 디자이너가 테스트 현장에 있는것이 더 좋습니다. 하지만 그렇지 못할 경우에도 테스트 후 다함께 디자인을 개선하는 작업이 중요합니다.

지금처럼 제품의 아이디어가 가진 가치를 빠르게 테스트 해야 할때는, 테스트가 가능한 최소한의 디자인을 최대한 빠르게 제공하는것, 제공하는 과정에서 팀 전체가 동의할 수 있도록 소통하는 것이 가장 아름다운 UI 디자인을 하는 것 보다 중요하다고 생각합니다. 

  • 두세번의 테스트만 해봐도 뭐를 고쳐야 할지 뻔한 것들은 대부분 잡힌다.
  • 테스트 대상인 사용자 뿐 아니라 데모현장에 있었던 팀원의 의견도 경청한다.
  • 디자이너는 피드백을 들으면서 말 그대로 듣지 말고 좀더 깊이 들어가서 해석의 노력을 한다.
  • 제안된 사항을 즉각적으로 반영하여 보여준다. (키노트 등 low-fidelity 툴 사용)
  • 다 고치고 채우지 말고 딱 필요한 최소한만을 반영해서 보여준다.
  • 팀이 동의하는 디자인이나 플로우를 대략 보여주는 목업/스케치는 우리 사이의 계약서이다.
  • 계약서에 들어있는 장점을 살리되 나머지 디테일을 고려해서 깨끗한 목업을 제작한다.
  • 곧장 목업을 팀에게 보내고 피드백을 받는다.

이렇게 한차례 하고 나니 정말 효율적이고 뿌듯하더군요. 스타트업에서 디자인 하는 맛이 바로 이런 게 아닐까 합니다. 다른 대륙에 있어도 실시간으로 다함께 동의하고 설득하고 보여주면서 즉석에 만들어내기, 앞으로 더 자주 해봐야겠습니다.