[WWDC 2014] 직감적으로 디자인 하기

필자는 개발자이다. 하지만 디자인에도 관심이 많은 편이다. 왜냐하면, 많은 사람들이 좋아하는 제품을 만들고 싶기 때문이다. 아무리 뛰어난 기능을 가진다 한들 그 진가는 디자인이라는 언어로 사용자에게 다가갈 때 생긴다고 믿기 때문이다.

샌프란시스코에서 열린 WWDC 2014에서 발표한 ‘Designing Intuitive User Experience’라는 발표를 듣고 남긴 노트를 나누고자 한다.

“Think Big, start small!”

이 말이 발표한 내용 중 가장 기억에 남는 말이다. 직관적인 디자인을 하기 위해서 여러가지 고려사항이 있겠지만, 제품을 만들 때 가장 밑 바닥에 깔려있어야하는 정신이라고 생각된다. 스타트업 기업들을 보면 자신이 가지고 있는 아이디어에 많은 사람들은 흥분에 도가니에 살아간다. 하지만 정작 제품이 나오고 나서 시장의 반응이 생각보다 냉냉할 때면 하늘이 문어지는 느낌이 들것이다. 그것은 너무 많은 것을 하려고 하기 때문이다. 디자인도 맞찬가지이다. 미술을 전공하여 그림을 그리는 사람만 디자이너라고 생각하지 않는다. 디자인은 제품을 만드는 과정에 의사 결정이 하는 사람이라면 모두가 디자이너이다. 그런데 자신이 생각하는 뛰어난 아이디어의 빠져 복잡하고 난잡한 기능들 및 디자인이 첨부 되면서 제품은 점점 고질라가 되어간다. 크게 생각하되 작게 시작하자!

5 Tips to make a design intuitive

1. Focus

Screen Shot 2014-06-04 at 5.32.16 PM

 

펜은 글을 쓰는 도구이다. 펜은 글를 쉽게 쓸 수 있게, 그리고 오래 동안 사용할 수 있게, 디자인되어야 한다. 소프트웨어도 맞찬가지이다. 어떻게 사용될 제품인지 명확하게 정의했다면, 그것에 집중해야 한다. 만약 자신의 소프트웨어에 핵심 가치를 지닌 기능의 이상의 것을 넣기 시작하면 처음에 해결하고자 했던 의도와는 달리 다른 모습으로 편하고 말것이다.

2. Simple

Screen Shot 2014-06-04 at 5.36.53 PM

 

제공하고자 하는 핵심 가치가 있다해도 여러가지 기능 및 디자인에 나타내고자 하는 기능이 가릴 수 있다. 그렇기 때문에 Simplicity는 어떤 제품이나 서비스든 핵심 요소이다.

3. Clear

명확성은 여러가지 디자인 요소에 적용할 수있겠다. 그런데 발표자는 그 중에서 언어에 대해서 적용해 설명해 주었다. 언어 선택을 할 때는 다음과 같은 요소를 고려하자.

  • No Big words: 많은 사람이 아는 단어를 선택하자.
  • Avoid Jargon: 너무 전문적인 단어는 피하자.
  • Be descriptive: 묘사적인 언어를 사용하자.
  •  Be succinct: 간결한 것을 사용하자.
  • Avoid truncation: 약식어는 피하자.
  • make text legible: 잘 보이는 글꼴를 사용하자.

4. Easy to Navigate

소프트웨어 제품에서 사용할 때 쉬운 네비게이션 기능을 제공해야 한다. 다음 세가지 질문을 던져보며 디자인을 고려하자.

  • Where am I?
  • Where else can I go?
  • What will I find when I get there?

Screen Shot 2014-06-04 at 5.47.32 PM

 

아이폰 앱이나 안드로이드 앱에서 자주 볼 수 있는 일명 ‘햄버거’ 메뉴를 가지고 발표자는 설명을 했다. 본 기능은 여러가지 장점을 자기고 있지만 단점이 더 많은 UX라고 생각이 된다. 이 디자인을 처음 사용하는 사용자에게 보여준다면 뒤의 세가지 질문에 답을 하지 못 할 것이다. 그렇기 때문에 좋은 네비게이션 디자인을 가지고 있지 않다고 주장한다. 필자도 실제로 해당 디자인을 적용해서 개발을 해보았으며, 여러 앱을 사용하면서 느낀 점은 ‘어렵다’이다. 그래서 일까? 페이스북 앱은 몇 개월 전에 해당 기능을 일단 TabNavigator로 바꾼 사례도 있다. 아마 UX 연구원의 연구의 결실이 있지 않았나 싶다.

5. Platform Savvy

이 것은 많은 제품들을 사용하면서 사용자에게 습관적으로 박혀있는 디자인에서 벗어나지 말자는 뜻이다. 그렇기 때문에 제품을 공식 발표를 하기 전에 사용자 관찰 및 피드백을 받는 것은 ‘Good to be have’가 아니라 ‘Must to be have’인 것이다. 개발하는 자신이 쉽다고 생각한다고 해서 디자인을 하기 보다는 실제로 제품을 사용하게 될 고객에게서 정말 쉬운지 이해가 가지는지 조사를 해봐야 된다는 주장이다.

마치며…

나는 iOS 개발자이기 때문에 매년 열리는 WWDC를 관심있게 보지만, 기술적인 내용만 있는 것이 아니라 디자인과 UX에 관한 발표도 유심히 즐겨 보는 편이다. 그렇기 때문에 시장에 디자인 좋고 인기 많은 킬러 앱들이 만들어지고 있지 않은가 생각이 된다. 기본적인 컨셉 알아가는 것과 많은 제품을 사용하여 자신의 센스를 늘린다면 개발자도 디자인에 관해 좋은 눈을 가지게 될 것이라고 믿는다.

개발자을 위한 iOS7 디자인 Tips

Design?

개발자는 개발만 한다?! 비쥬얼 베이직의 아버지 ‘앨랜 쿠퍼‘가 ‘정신병원에서 뛰쳐나온 디자인‘이라는 책에서 주장했던 내용이다.

하지만 iOS 개발자라면 크게 인정하지 못할 이야기일지도 모른다. 많은 개발자가 cool한 애플의 UI/UX에 매료되어서 개발을 시작한 사람들이 많을 것이기 때문이다. 하지만 나는 전적으로 그의 주장에 공감하는 편이었다. 하지만 요즘 드는 생각은 개발자도 기본적인 디자인 요소에 대해서 알아야한다는 것이 내 생각이다. 아는 것과 모르는 것은 분명 고민을 한 결과물과 고민 없이 만든 결과물과 나오는 효과나 반응이 분명 큰 차이가 있다고 생각하기 때문이다.

다음 가이드는 내가 즐겨찾는 블로그에서 본 내용을 정리해 보았다. 조금이나마 도움이 되길 바란다.

출처 Ray Wenderlich

기본에 집중하라

  • Contrast(대조/대비)

    • 하이라이트: 화면에서 중요한 부분은 강조되어야 한다.
    • Eye candy
    • 상태: 각각의 UI가 터치 가능한지 알려줘야 한다.
    • 가독성: 글씨가 잘보이는 확인하라.

 

 

Screen Shot 2014-03-21 at 12.16.43 PM

Screen Shot 2014-03-21 at 12.16.55 PM

  • Repetition(반복)

Screen Shot 2014-03-21 at 12.19.54 PM Screen Shot 2014-03-21 at 12.20.04 PM

  • Alignment(정렬)

alignment

  • Proximity(근접)

Screen Shot 2014-03-21 at 12.24.16 PM

Screen Shot 2014-03-21 at 12.24.28 PM

  • Typography(글꼴)

    • 최대 3가지 다른 글꼴만 써라.
    • 중앙 정렬은 꼭 필요할 때만 사용하라
    • 글꼴 선택은 최대한 심플하게하라.
    • 글자 리사이징에 대한 대비를 하자.
    • 큰 블럭 글자는 ‘serif’ 글꼴을 쓴다.
    • 적은 양의 글자는 ‘sans serif’ 글꼴을 쓴다.
    • 한 화면에서 대비 되는 글꼴을 써라.(Use contrasting font-families on the same screen.)
    • 한 화면에서 글꼴의 특성을 다양하게 쓰고 싶으면, 한 글꼴로 해라. (글꼴 특성이란, 이텔리체, 볼드체, 사이즈, 색깔등을 말한다.)

Screen Shot 2014-03-21 at 12.25.38 PM

Screen Shot 2014-03-21 at 12.25.47 PM

내용에 집중하라

  • 불필요한 디테일은 삭제하라

  • 크롬을 강조하지 마라 (Navigation bar, tool bar, and etc.)

Screen Shot 2014-03-21 at 12.27.32 PM

  • 심플한 배경

  • 필요하면 크롬을 감춰라

Screen Shot 2014-03-21 at 12.28.30 PM

  • UI 요소를 간단히하라

  • 보더 없는 버튼

  • 색깔을 사용하여 터치 가능한지 않한지를 구분하라

  • 현실적인 3D 디자인을 줄여라

Screen Shot 2014-03-21 at 2.12.02 PM

 

컨텐츠에 집중하기

  • 전체 화면을 써라

  • 컨텐츠도 디자인의 일부이다

Screen Shot 2014-03-21 at 2.14.20 PM

  • 시각적으로 재미있게 만들라.

Screen Shot 2014-03-21 at 2.17.03 PM

 

 

마치며…

이 글을 통해 그동안 느낌으로만 디자인 감각에 충실했던 개발자들에게 기본적인 개념을 심어주었으면 좋겠다. 마지막으로 학부 시절 때 들었던 미술 교양 강사님의 말이 생각을 전하며 마무리를 하고 싶어졌다.

‘디자인 감각은 선천적인 것이 아니다. 절대적으로 후천적으로 개발되는 것이다. 그럼 어떻게 해야 감각이 생길까? 많이 봐라!’

옷을 잘 입는 사람이나 디자인을 잘한다고 하는 사람들이 입을 모아서 하는 말이다. 앱을 많이 써보고 어떤 부분에서 이상한지, 어떤 부분에서 느낌이 좋은지 그냥 지나치지 말고 머리로 한번 더 생각을 해보자. 개발자들의 특성상 앱이나 서비스를 보게 되면 어떻게 작동할 것 같은지 혹은 어떤 기술을 썼는지에 관심을 더 갖게 되어 있다. 하지만 우리도 이젠 디자인이라는 포장 및에 모습만 보려하지말고 어떤 포장을 썼는지에도 관심을 가지고 더욱 User-Friendly한 개발자가 되어야겠다.