[번역] 유아용 앱 사용자 인터페이스 가이드라인 UX 디자인

얼마 전 Gabriel Weinberg가 쓴 Toddler app user interface guidelines 이라는 글을 봤는데, 앱 개발자는 아니지만, 아이의 부모로서 사용자 입장에서 유아용 사용자 인터페이스에 대해 좋은 얘기를 하고 있더라고요. 그동안 시행착오를 통해 체득하고 있는 것도 있지만, 이렇게 정리된 걸 보니 한결 더 좋네요. 간단하게 제목만 소개할까 하다가, 글쓴 분의 허락을 받아 그림 포함해서 전부 다 옮겨보기로 했습니다.

원문은 http://www.gabrielweinberg.com/blog/2011/04/toddler-app-user-interface-guidelines.html 이고요. 상업적으로 이용하시면 안 됩니다. Thanks, Gabe!

아래는 모두 번역글입니다.

---------------------

유아용 앱 사용자 인터페이스 가이드라인

Gabriel Weinberg, 2011년 4월 10일

제 아들 엘리는 (미국 나이) 한 살때부터 아이패드 앱을 써왔습니다. 유아용 앱을 50개쯤 써봤네요. 표본 크기가 한 명 밖에 안 된다는 걸 유념하시고, 유아용 앱 사용자 인터페이스 가이드라인을 적어봅니다.

* 로딩 시간을 최대한 줄이세요

두 가지 얘기가 섞여 있는데요. 첫째, 아이콘을 눌렀을 때부터 화면의 무언가와 인터랙션할 수 있을 때까지 걸리는 시간을 줄이세요. 이 시간이 오래 걸리면, 아이는 초조해지고, 그럼 앱은 땡 소리를 듣게 됩니다(홈 버튼).   

둘째, 실제 앱 화면 전에 뜨는 화면의 숫자를 0으로 줄이세요. 즉, 앱으로 바로 들어가란 얘기입니다. 네, 그 화면들에서 다른 것도 좀 팔고 이것저것 하고 싶은 거 압니다. 하지만 그냥 그러지 마세요. 화면이 많으면, 특히 앱스토어로 이어지는 링크가 있으면, 아이들은 그걸 누를 것이고 이후 혼란스러워하게 됩니다. 예를 들어 Park Math는 훌륭한 앱이지만, 홈 스크린은 맘에 안 들어요. 저 커다란 노란 버스는 정말 누르고 싶게 생겼거든요! 


* 설정은 모두 앱 바깥으로 빼내세요. 

최소한 iOS에서는 설정을 앱 밖으로 빼서 기기 전체의 일반 설정에 둘 수 있습니다. 제발 그렇게 해주세요. 아이들은 아주 작은 그 설정 아이콘에도 끌리거든요. 그래서 (1) 앱의 흐름을 깨거나 (2) 아이가 설정을 죄다 바꿔서 앱을 아주 짜증나는 상태로 만들거든요. 예를 들면 외국어로 바꾼다거나, 너무 어려운 난이도로 바꾼다거나 해요. Interactive Alphabet도 참 좋아하는 앱인데, 홈 스크린 아래 쪽에 있는 저 네 개의 버튼은 필요없어요. 꼭 빼야 해요.


* 팝업창이나 공지창 띄우지 마세요.

앞의 얘기랑 통하는 것 같죠? 뭔가 앱이랑 상관없는 게 있으면, 아이가 그걸 눌러버려요. :) 팝업창이 최악이에요. 둘 중에 하나를 선택해야 하는데, 잘못된 것을 누를 확률이 50%거든요. 이런 건 아이들용 앱에는 안 맞아요. 사용 시나리오에서 그 시점에 부모가 앱을 조종하는 걸 가정하는 건데, 적어도 우리 집은 대개 안 그래요. 아들이 화면을 쭉 훑으면서 하고 싶은 걸 고르거든요.

이런 측면에서 제가 접했던 최악의 앱은 Dr. Seuss 앱들이에요. 그 앱들은 보통 뭔가를 계속 해줘야 해서, 정말 추천하고 싶지 않은데, 특히 아래 부분이 저를 아주 성가시게 한답니다.


* 모든 것을 누르고, 클릭할 수 있게 하세요.

아이들은 앱과 인터랙션하고, 모든 것을 손가락으로 찌르고 눌러대고 싶어해요. 그렇게 눌렀을 때 뭔가 반응이 일어나면 훨씬 더 좋아해요. Itsy Bitsy Spider가 이런 걸 아주 잘 했어요.


* 휙휙 바꾸고, 놀라게 해주세요.

모든 걸 누를 수 있을 뿐만 아니라, 화면이 바뀔 때마다 뭔가 확 달라지고, 여기에 게임이나 자잘한 이스터 에그도숨겨놓으면 정말 최고에요. 예를 들어 누르면 어떤 일이 일어나지만, 오래 누르고 있으면 다른 뭔가가 일어나는 식이에요. 책 앱이라면, 어떤 페이지에서는 색칠해야 했는데, 다음 페이지에서는 여러 개를 연달아 눌러야 하는 거죠. Ayars에서 만든 Jack and the Beanstalk(그외에도 많아요)이 이걸 아주 잘 했어요. 아래 예로 든 페이지에서, 아이는 마치 게임하는 것처럼 저기 있는 쥐를 드래그해야해요.


* 작동 방법을 여러 개 준비해주세요.

뭘 해야 할 지 뚜렷하지 않을 때도 있고, 아이가 특정 동작, 예를 들어 옆으로 밀기(swipe)같은 걸 아직 제대로 못할 때도 있어요. 그러니, 대안을 같이 주는 게 좋아요. 옆으로 밀기의 예에서라면, 페이지를 넘기게 하는 작은 화살표를 넣어두면 좋아요.

* 힌트를 주세요.

아이가 아무 것도 안 하고 있으면, 뭘 해야 하는지 힌트를 주는 게 좋아요. 누를 수 있거나 눌러야 하는 것들을 강조하는 식으로 말예요. 뭔가 어려운 일을 해야 할 때도 똑같은 방식이 가능해요. Animal Hide & Seek Adventure가 이런 걸 잘 했어요. 숨어있는 동물을 눌러야 하는데, 동물을 못 찾고 있으면 화면 아래 쪽의 동물들이 흔들리게 해놨어요.


* 딜레이를 주세요.

페이지를 넘기는 것처럼 뭔가를 어떻게 해야 하는지 알고 나면, 아이들은 그걸 계속하고 싶어해요. 하지만 그러다 보면 앱에서 뭔가를 얻지 못하고 그냥 막 넘어가버리게 되죠. 이런 상황을 피하려면, (힌트를 포함해서) 일부 인터페이스 요소들에 딜레이를 주세요. 예를 들어 다음 페이지로 넘어가는 화살표를 바로 보여주는 게 아니라, 한 5초 정도 기다렸다 띄우는 거죠. 사실 이렇게 한 앱을 아직 보지는 못했는데, 그래준다면 정말 고맙겠어요. 힌트도 마찬가지에요. 예를 들어 바로 위의 동물 게임이라면, 아래 쪽의 힌트 영역을 항상 보여주지 않는 쪽이 더 좋을 것 같아요.

* 지시해주세요. 

아이들에게 뭘 해야 하는지 말 그대로 음성으로 말해주세요. 위에서 얘기한 힌트나 딜레이 부분과 엮어서 해볼 수 있을 거에요. 특정 일을 시작할 때 할 수도 있을테고요. Monkey Preschool Lunchbox (안드로이드에도 있어요)가 이걸 아주 잘 했어요.


* 앱을 업데이트하세요.

앱을 업데이트하고, 아이가 그 변화를 알아볼 수 있으면 참 좋아요. 굳이 기능이 새로 들어갈 필요는 없어요. 테마를 바꾸거나 겉보기 모습이 바뀌는 정도여도 괜찮아요. Elmo's Monster Maker는 계절이 바뀔 때나 명절용 업데이트 때 이런 걸 잘 해요.


* 음성을 내보낼 때에는 해당 단어나 글자를 강조해주세요.

아이에게 뭔가를 읽어줄 때면, 지금 읽어주는 부분을 강조해주면, 아이가 그 소리와 단어, 글자를 서로 잘 연결하는 데 도움이 될 것 같아요. Monster at the End of This Book이 이걸 잘 했죠.


마지막으로 iOS에 대해 불만이 몇 가지 있어요.

* 홈버튼을 끌 수 있어야 해요. 홈 버튼이 제대로 작동 안 하게 하거나, 앱을 하는 중에 누르기 어렵게 할 방법이 필요해요. 세 번 눌러야 한다거나 아니면 모르스 부호처럼 연달아 눌러야 하는 식으로요.

* (기본) 비디오 앱을 숨길 방법이 필요해요. 엘리는 비디오 앱을 켤 줄 알아요. 제가 아이콘을 어디에 두더라도 찾아내더라고요. 연령 제한 설정으로 비디오를 꺼둘 수 있긴 한데, 그런다고 문제가 해결되지는 않아요. 윈도에서 시스템 아이콘을 숨김 처리하는 것처럼 이 아이콘을 숨김처리할 수 있으면 좋겠어요. 아니면 아이콘 자체에 접근 권한을 설정해서 누르면 비밀번호를 입력해야 하는 식도 괜찮아요. 홈 버튼 쪽에도 이런 게 통할 것 같네요.

업데이트: 아래에 좋은 답글이 엄청나게 많이 달렸는데요. 좋은 앱을 만든 분들이 주신 얘기도 있고, 저처럼 부모 입장에서 하는 답글도 있어요. 여기 가이드라인을 몇 개 더 추가할게요.

-- 멀티터치가 되게 해주세요.
-- 사진을 못 찍게 하는 설정을 만들어주세요.
-- 게임 내 결제(부분 유료화)가 안 되게 해주세요.
-- 아이가 뭔가 옳은 걸 하면 잘 했다고 칭찬해주세요.


덧글

  • blueskybox 2011/04/21 09:14 # 삭제 답글

    요즘 애플은 아니지만, 안드로이드 쪽 앱 개발을 생각중이었는데 잘 정리된 자료 같아요!!

    좋은 자료 감사합니다~
  • 하라위시 2011/05/03 01:11 #

    네. 저도 번역하면서 많이 공부했습니다.
  • 하얀사자 2011/05/02 10:05 # 답글

    아... 주옥같은 글이네요.
    첨에는 뭐 당연하지 하면서 읽다가 뒤로 갈수록, 실제 개발해보지 않으면 모를 내용들이 나오네요.
    감사합니다.
  • 하라위시 2011/05/03 01:14 #

    정말 대단한 건, 정작 글을 쓰신 분이 개발자가 아니라 현재 검색엔진 관련 스타트업 만드셨고, 앤젤 투자 등을 하시는 터라, 개발 경험은 따로 없다고 하시더라고요..
  • 뿌듯 2014/02/10 16:45 # 삭제 답글

    잘 읽고 갑니다. 여러가지 배우고 갑니다.
  • CK 2014/07/13 04:16 # 삭제 답글

    좋은 자료 감사합니다.
댓글 입력 영역

Analytics