작은 부분을 놓치지 않는 '디테일'한 디자인의 힘!

By | 2015년 6월 9일

실용서를 만들면서 가장 많이 본 글은, ‘배우는 데 가장 좋은 방법은 직접 해보는 것이다!’인데요. 100% 동감하지만, 저에게 디자인 관련해서는 통하지 않는, 참 어려운 이야기입니다. (시무룩..) 그래서 조금이나마 보는 눈을 키우고자 dribbble.com, behance.net처럼 그래픽 작업물이 올라오는 포트폴리오 사이트를 자주 들여다 보곤 합니다. 특히 이번 UX 시리즈 책을 준비하면서 그 미묘한 디자인 세계를 이해하는 데 많은 도움을 받았답니다! 그중 한 가지 사례를 보여드릴게요.


<  Float-Label-Form-Interaction, by Matt D. Smith >

위 이미지는 dribbble.com에 디자이너 Matt D. Smith가 올린 입력 폼 인터랙션 디자인입니다. (링크!) 보시다시피, ‘Title’을 입력하려고 클릭하면 해당 라벨이 폼 상단으로 올라가서 사용자가 무엇을 입력하고 있는지 계속 안내해 줍니다.

잠깐!
이게 실제 중고 거래 사이트의 상품 등록 화면이라고 생각해 볼까요? 저는 중고 사이트에 물건을 올리려는 사용자입니다. 버스에서 스마트폰으로 웹사이트에 접속한 다음, 첫 거래할 상품을 등록하고 화면을 띄웠지요! 자주 이용하는 사이트라면 어떤 내용으로 채워야 하는지 익숙하겠지만, 앞서 말했듯 저는 중고 거래 사이트를 처음 이용하는 사용자에요. 열심히 폼을 입력하다가 정신을 차려보니 목적지에 도착했고, 벨을 누르고, 버스 카드를 찍고, … 잠시 딴 짓(;)을 한 사이, 커서가 깜빡이는 칸에 가방 ‘색’을 쓰는 건지 뭔지 떠오르지 않았어요!(까묵) 하지만 별 문제가 되지 않았지요. 바로 위에 ‘Price’라는 라벨이 떠 있었기 때문이죠!

* 참고: 플로팅 라벨은 2014년 구글 Material 디자인 가이드라인에도 소개되었습니다.

이 라벨 디자인은 전체 사이트 중에서 아주 작은 요소이고, 사용자 입장에서는 때론 ‘좋다’, ‘나쁘다’라는 인식을 주지 않을 만큼 사소한 부분입니다. 하지만 이처럼 작은 부분을 얼마나 고려했는지에 대한 여부는 제품 전체의 인상을 좌우할 정도로 큰 영향을 끼칠 수도 있습니다. 예를 들면 스마트폰에서는 소위 말하는 ‘터치감’ 하나로 호불호가 나뉠 정도로 말이지요!

화면이 넘어가는 ‘느낌’이 좋다든지 스크롤하는 ‘느낌’이 좋다든지 하는 스마트폰의 터치감은 시간이 지나도 좀처럼 ‘취향이니 존중해 주세요!’로 끝나지 않는 문제인 듯 합니다. 얼마나 섬세하게 만들어졌는가에 대한 이런 논란(?)을 보면 순간순간의 사용감이 모여 제품의 인상, 제품의 만족도를 결정짓고, 나아가 한 브랜드를 평가하는 중요한 역할을 한다는 것을 알 수 있습니다. 특히 경쟁 제품이 늘어나면 늘어날수록, 기술은 물론이거니와 그를 둘러싼 모든 요소들, 예를 들면 기능과 기능이 어떻게 연결되는지, 기능이 어떻게 실행되는지처럼 제품의 세밀한 부분이 더 의미있는 역할을 합니다.

결국 제품이 얼마나 잘 디자인되었는지, 얼마나 완성도가 높은지는 가장 작은 부분의 디자인을 빼놓고는 말할 수 없습니다.

< 마이크로인터랙션 : 디테일에 강한 인터랙션 디자인 (댄 새퍼 지음, 정승녕 옮김) >

이번에 소개할 UX 시리즈 신간 ‘마이크로인터랙션’은 바로 그런 세밀한 부분, 디테일에 대한 디자인을 다루는 책입니다. 지은이 댄 새퍼는 제품의 작은 부분에 대한 디자인을 ‘마이크로인터랙션(Microinteraction)’이라고 정의했습니다. ‘마이크로인터랙션’은 2015년 트렌드 키워드로 뽑히기도 했지만(링크), 새롭게 등장한 개념은 아닙니다. 제품을 디자인할 때 간과하기 쉬운 부분이 얼마나 가치있는지 알리고, 집중할 수 있도록 재조명하는 역할을 하는 것이죠.

‘마이크로인터랙션’은 단어에서 보이는 그대로, 세밀한(micro) 부분에 대한 인터랙션 디자인입니다. 보통 한 가지 기능을 위해 만들거나, ‘완벽을 위해’ 보조적으로 들어갑니다. 기능과 기능, 기능과 기기, 기기와 기기를 서로 ‘연결’하는 디자인이라고 생각하시면 좀 더 이해하기 쉬우실거에요. 예를 들어, 버튼 하나에도  마이크로인터랙션을 고려해야 합니다. 눌렀을 때 딸각하는 소리를 내게 할까? 누르면 들어간 이미지로 바꿔줄까? 아주 사소한 것 같지만, 사용자가 버튼이 ‘눌렸음’을 알게 하는 건 중요한 일입니다.

< 마이크로인터랙션은 제품의 다른 기능에 비해서는 ‘작지만’,
전체 제품의 성공과 실패를 가늠할 정도로 ‘중요하다’ >

『마이크로인터랙션』은 세밀한 부분을 디자인한다는 것에 대한 가치를 알지만 중요성을 충분히 설득하기 어려웠던 디자이너와 기획자, 개발자, 관리자 등 제품과 서비스를 만드는 데 관여하는 분들을 위한 책입니다.

마이크로인터랙션은 어떤 경우에 고려해 볼 수 있을까요?

ㆍ하나의 작업을 수행할 때
ㆍ기기들을 서로 연결할 때
ㆍ단순한 정보를 주고 받을 때 (예: 주식 가격, 날씨)
ㆍ진행 중인 기능을 조정할 때 (예: TV 채널 조정)
ㆍ설정을 바꿀 때
ㆍ간단한 내용을 작성하거나 확인할 때 (예: 상태 메시지)
ㆍ어떤 기능을 켜거나 끌 때

댄 새퍼에 따르면 마이크로인터랙션은 ‘트리거 -> 동작 규칙 -> 피드백 -> 순환과 모드’라는 구조를 통해 분석하고, 디자인할 수 있습니다.  저자가 제안하는 이 네 가지 구조는 디자이너(또는 제품을 만드는 데 관여하는 모두)가 생각하는 것을 표현하는 데 도움을 주는 틀입니다. 마이크로인터랙션을 어떻게 디자인해야 할지에 대한 가이드지요. 이 책은 각 단계를 풍부한 사례와 함께 설명하면서 ‘마이크로인터랙션’을 잘 디자인하는 방법을 소개하고, 후반부에는 두 가지 프로젝트를 통해 마이크로인터랙션을 디자인하는 과정을 보여주면서 실제로 어떻게 적용할 수 있는지 귀띔해 줍니다.

1. 트리거(Triggers) : 마이크로인터랙션을 어떻게 시작하는가?

마이크로인터랙션의 첫 단계인 트리거는, 기능을 시작하는 조작을 말합니다. 우리는 버튼이나 스위치에서부터 센서, 시간(타이머) 등을 통해 기능이 시작되도록 할 수 있습니다.

유튜브에서는 로그인하지 않은 상태에서 마우스를 댓글 창에 올리면,
로그인하거나 회원 등록을 하도록 유도하는 내용이 표시된다.

2. 동작규칙(Rules) : 마이크로인터랙션이 시작되면 무엇을 수행하는가?

동작규칙은, 트리거로 기능이 활성화되면 어떻게 될지를 결정합니다. 무엇이 수행되고, 어떤 피드백이 제공될지는 동작규칙에 의해 정의됩니다.

버튼의 동작규칙. Mixcloud에서는 다른 회원이 나를 친구 목록에 ‘추가Follow’했다면,
그 회원에 대한 ‘팔로우하기Follow’ 버튼이 ‘마주 팔로우하기Follow back’로 바뀐다.

그리고 동작규칙은, 다음과 같은 논리 흐름도를 통해 정의할 수 있습니다.

3. 피드백(Feedback) : 동작규칙 이해하도록 돕는 피드백. 사용자에게 기능이 수행되었는지를 어떻게 알려줄 것인가?

피드백은 사용자가 기능을 통해 무엇을 하고 있는지 알려주는 모든 내용입니다. 피드백은 라벨, 오디오(전원을 켰을 때 삐-하는 소리), 메시지(에러 메시지 창) 그리고 애니메이션도 될 수 있습니다.

Amazon은 쇼핑 카트에 넣은 상품의 개수를
쇼핑카트 버튼 안에 표시한다.

4. 순환과 모드(Loop and Mode)

1.1 순환 : 마이크로인터랙션의 반복주기를 어떻게 설정할 것인가?

순환은 한 기능의 반복주기를 말합니다.

Facebook에서는 사용자가 ‘친구 추가’ 버튼을 너무 빨리,
너무 많이 클릭하면 경고 메시지를 보여 준다. 

1.2 모드 : 마이크로인터랙션을 수행하기 위해 부가적인 설정이 필요한가?

모드란, 기기의 환경 설정처럼 드물게 사용하는 경우에 사용됩니다. 예를 들어 날씨 위젯은 사용자가 도시나 다른 환결 설정을 자주 할 필요는 없지만, 여행을 떠난다면 꼭 변경해야 하는 설정이죠.

모드의 사례: 애플 iOS에서의 일기예보 앱.
사용자가 마이크로인터랙션에 대한 설정 값을 바꿀 수 있게 해준다.

제품의 완성도를 더욱 높이는 데 관심이 있는 분들이라면, 이 책을 통해 지금까지 놓치고 있던 ‘디테일’은 무엇인지 한번 생각해 보시면 어떨까요? 사용자가 제품(또는 서비스)을 만나는 순간을 더 즐겁게, 더 만족스럽게 만드는 것은 제품을 만드는 데 관여하는 모두가 중요하게 여기는 가치일거라 생각합니다. (게다가 그런 사용성이 제품의 선호도나 구매율 등과 연결된다면 더욱 그렇겠지요!) 사용자에게 필요한 기능은 물론, 인지하지 못하는 부분까지 깊이 배려함으로써 만족스러운 경험을 주는 ‘디테일’의 힘. 『마이크로인터랙션』으로 발견해 보세요!

깊은 고민과 아이디어가 조화롭게 어우러지고, 사용자를 즐겁고 기쁘게 하는 작은 부분까지 놓치지 않는 세심한 배려가 담긴 제품을 기대합니다. 🙂

 

여기까지 글을 읽어 주신 분께 드리는 선물!

완성도는 ‘작은 부분’에서 결정된다는 점을 강조하는 ‘마이크로인터랙션’.
표지에서도 그 의미가 잘 전달되나요? 🙂
‘나 끝까지 다 읽었다!!’하고 댓글로 티 팍팍 내주신 세 분께 『마이크로인터랙션』을 드립니다! 😀

-기간: ~2015.6.19(토)
-주의: 댓글 작성 시 ‘메일주소’를 꼭!꼭!꼭! 입력해 주세요! | 댓글이 세 개가 넘으면 랜덤 추첨. (관심을.. 흑흑..)

 

뽀너스! 마이크로인터랙션에 대한 다양한 자료를 공유합니다.

  1. Little big things : 아이디어 창고! 마이크로인터랙션 사례가 모여 있는 웹사이트
  2. Microinteractions : 저자와 책에 관한 정보가 담긴 도서 홈페이지
  3. 저자에게 직접 듣는 Microinteractions 소개(영문) :
    Smart Thinking: MIcrointeractions and Why They Matter

 

* 『마이크로인터랙션』은 다음 서점에서 만나보실 수 있습니다.
Yes24 ] [ 교보문고 ] [ 알라딘 ] [ 인터파크 ]

26 thoughts on “작은 부분을 놓치지 않는 '디테일'한 디자인의 힘!

  1. mee sol Lee

    모바일 디자인 실무를 하면서 꼭 필요했던 내용입니다 😛

    정말 도움이 많이 될 것 같은 책이네요! :mrgreen:

    Reply
    1. jogamza Post author

      제품이나 서비스 설계에 깊이 관여해야 하는, 디자이너의 역할에 대해서도 한번 생각해 볼 수 있는 계기를 주는 책인 것 같습니다. 🙂 댓글 감사합니다!

      Reply
  2. 장웅

    아! 정말 좋군요. 이 글의 예로 맨 위에 들어주신 플로팅라벨 부분도 제가 운영하고 있는 도서관의 회원가입/정보갱신 부분에 도입하여 개발중에 있는 내용이에요. 웹과는 달리 특히 모바일쪽으로 이용고객을 확장하면서 개발하려고 하니 UI/UX에 지금까지와는 다른 연구를 많이 하게 되더라구요.

    문제는 기획자인 저와 개발자 사이의 합의인데요, 실제로 마이크로한 부분은 개발자 입장에서는 ‘대세에 지장없음’이라는 말로 안하려하는 경향이 있거든요. 그래서 근거를 말하면서 설득하는 과정이 필요한데, 출간된 책은 정말 읽으면서 개발의 완성도를 높이는데 참고하고 싶다는 생각이 굴뚝같습니다.

    잘부탁드립니다~~~

    Reply
    1. jogamza Post author

      이 책을 통해 ‘작은 부분’까지 신경쓰는 게 어떤 의미가 있는지~ 서로 이해할 수 있다면 정말 정말 기쁠 것 같습니다 😀 그게 바로 저자가 책을 쓴 이유니까요! 감사합니다~

      Reply
  3. cybaek

    Detail. UX의 디테일은 사용자가 직접 체감하는 것이라 더더욱 중요하다고 생각해요. 맞아요. 저 끝까지 읽었어요 ^^

    Reply
    1. jogamza Post author

      cybaek 님은 댓글 가뭄에 시달리는 블로그에ㅠㅠ 자주 나타나셔서 닉넴이 참 익숙해요! ㅎㅎ 이번 신간에도 관심 가져주셔서 감사합니다.

      Reply
  4. ddedde

    기존 그룹웨어와는 조금 다른 그룹웨어를 만들고 있는데
    디테일이란 부분에 많은 공감하고 갑니다.

    Reply
    1. jogamza Post author

      오~ 어떤 ‘디테일’을 고민하고 계신지 궁금해지네요~! 댓글 감사합니다 🙂

      Reply
  5. 미토

    난무하는 UI/UX 프레임워크, 점점 더 쉬워지는 앱 제작 환경등 치열한 서비스시장에서 디테일이 가지는 힘은 무시할 수 없습니다.서비스 고객을 효과적으로 유치할 수 있다는 그로스해킹의 기반에도 디테일한 UX는 기본입니다.

    더군다나 모바일환경은 OS에 따른 개발도구가 다르고 관련된 UX 환경이 다름으로 인한 디바이스별 서비스 디자인의 정체성을 구현하기가 점점 더 어려운과제인데, 마이크로인터렉션이 제안하는 UX 디자인 프레임웤은 현업 UX 디자이너한테 더없이 좋은 생각도구가 될 듯 합니다.

    더불어 현업에서는 직능단위별로 커뮤니케이션하는데 어떻게 디테일을 추구할 것인지에 대한 좋은 나침반이 되지 않을까 합니다.

    Reply
    1. jogamza Post author

      미토님 말씀처럼, 이 책에서 다루는 단계들은 엄격한 ‘규칙’이 아니기 때문에 디자이너가 생각을 효율적으로 정리하고, 구체화시킬 수 있는 ‘도구’로 활용되면 좋겠습니다. 디자인에 설득력을 더할 수 있도록 돕는 도구라고 보면 될까요? 🙂 댓글 감사합니다.

      Reply
  6. jonghun

    제가 정말 관심 가진 부분이라 기대가 큽니다^^ 이런 책이 많이 출판됬으면 좋겠습니다. 요즘은 애플앱개발서적 구경하기 함든데 그쪽 관련책도 출간 많이해주세요^^

    Reply
    1. jogamza Post author

      앞으로도 꾸준히 ‘사용자 경험’에 대한 책을 소개할 수 있도록 노력하겠습니다 🙂

      Reply
  7. fupfin

    아주 공감이 가는 내용이네요
    완성도는 결국 세부에서 결정되는 것이겠죠. 이는 UI 담당자 만이 아닌 개발자도 인식해야할 영역이라고 생각합니다.
    꼭 이벤트 때문에 댓글 다는 거… 맞습니다만…

    Reply
    1. jogamza Post author

      분야에 관계없이 함께 일하는 사람들이 마이크로인터랙션을 이해한다면, 제품 완성도를 높일 아이디어를 더 효과적으로 구현할 수 있을 것 같습니다. 이벤트 참여 댓글 대환영입니다!! \(^-^)/

      Reply
  8. Jay

    좋은 책 그리고 책의 핵심 내용을 이해하기 쉽게 블로그글로 정리해주셔서 감사를 드립니다.

    웹&앱 서비스를 기획/디자인/개발/운영하는 모든 사람들에게 필요한 내용이 잘 정리되어 있을 것 같다는 생각이 드네요.
    항상 UI/UX를 고민하는 목적이 예쁜 결과물을 만들어내는 것이 아닌 유용한 결과물을 만들어 내는 것이라고 생각해 왔는데 그런 측면에서 볼 때 책이 큰 도움이 될 것 같습니다.

    특히 모바일이라는 조그만한 디바이스에서는 이런 마이크로한 인터랙션인 사용자의 앱 이용 만족도를 올리는데 필수적이지 않을까 생각을 해봅니다.

    좋은 책, 좋은 글 다시 한번 감사드립니다.

    Reply
    1. jogamza Post author

      모바일 기기에서는 앱의 기능이 잘 구현되었는지도 중요하지만, 사용하는 순간순간이 전체 만족도에 크게 영향을 주는 듯 합니다. 어느 순간에 계속 쓸지 말지가 결정되고 마니까요. Jay님이 하시는 고민에 대한 답을 ‘잘 찾도록’ 돕는 책이 되었으면 합니다. 🙂 댓글 감사합니다.

      Reply
  9. RoniCho

    안녕하세요~
    글 잘 읽었습니다. 저는 주로 폼이 많고 전문기능의 어플리케이션의 UI를
    주로 디자인하고 있기에 써주신 부분들에 대해서 어려운점이 많았는데
    추천해주신 책을 꼼꼼히 들여다 봐야겠다는 생각이 들었습니다.

    UX를 공부하면서 전체의 경험에 신경을 쓰고자 하면서도 결국 디자인까지 같이하는
    저의 입장에서 마무리는 디테일의 차이더라구요.
    옆의 동료들은 뭐가 다르냐하지만 늘 만족할수 없는 부분들이 남아있었는데
    그런 부분을 만져줄수 있는게 마이크로 인터랙션인가 하는 생각이 듭니다.

    폼 디자인 등을 하다보면 의외로 디테일한면까지 짚어주는 책이 잘 안보이던데
    반갑네요~ 감사합니다!

    Reply
    1. jogamza Post author

      마무리는 디테일의 차이라는 RoniCho 님 의견에 완전 동감합니다~ 이 책은 ‘마이크로인터랙션은 완성도를 결정한다’라는 말로 요약할 수 있습니다. 실무 경험이 있는 분들에겐 더 중요한 의미로 다가가지 않을까 싶습니다.
      책에서 웹 사이트와 앱에서의 마이크로인터랙션 사례를 많이 소개하고 있어서 RoniCho 님께 도움이 되리라 생각합니다. 🙂 감사합니다.

      Reply
  10. Crystal

    감사히 페이스북으로 담아갑니다. 😳 인사이트에서 나오는 UX 책은 어쩜 이렇게 다 양질을 자랑할까요,
    편집해주시는 분들의 노고를 감사히 여기며 재미있게 읽겠습니다.

    Reply
    1. jogamza Post author

      감사합니다, Crystal님! 더 좋은 책 소개할 수 있게 노력하겠습니다.

      Reply
  11. 김승황

    디자인에 관심이 생겼습니다. 특히 UX 디자인에 대해 많은 걸 배우고 싶은데 그 정의가 명확하지 않아 어디서부터 시작해야할지 막막합니다. 이 책으로 도움이 되면 좋겠습니다.

    Reply
    1. jogamza Post author

      이 책은 ‘UX란 무엇이다!’라고 개념을 잡아 주는 책은 아니지만, 사용자 경험을 위해 어디까지 고려해야 하는지 조언을 주리라 생각합니다 🙂

      Reply
  12. June

    Trigger – rules – feedback – loop & mode 과정의 매끄러운 단계과정의 완성도를 위한 섬세하고 친절한 인터랙션 지침서- 설명 잘봤어요!

    Reply
    1. jogamza Post author

      ‘친절한’ 가이드가 된다면 좋겠습니다:) 감사합니다!

      Reply
  13. jogamza Post author

    == 이벤트에 참여해 주셔서 감사합니다. 🙂
    당첨된 분은 다음과 같습니다.

    미토 님
    fupfin 님
    RoniCho 님

    당첨되신 분들께는 메일을 보내드리겠습니다! ==

    Reply

댓글 남기기