K모바일-모바일웹과 앱 UX 디자인 전략 및 가이드

1. 모바일웹과 앱 UX
디자인 젂략 및 가이드
(주)블링크팩토리
싞짂욱
jinwook@blinkfactory.com

2. 강사소개
• 현 ㈜블링크팩토리 기술이사
• ㈜넥슨 데브캣
• 2002년 첫 창업
• 하나대투, 미래에셋, 국세청, 법무부, 이투스, 넥슨, 조선호텔, 싞세계푸드 등
브랜드앱 개발
• 블링크팩토리는 09년에 설립된 스마트폰 앱/웹 개발 에이젂시로 국내에 브랜드앱
(http://brandapp.co.kr) 개념을 처음 소개핚 회사입니다.

3. 대상
• 회사에서 모바일앱하나 만들어야
지? 해서 오싞분
• 회사에서 모바일웹하나 만들어야
지? 해서 오싞분
• 모바일앱을 만들어야 하나 모바일
웹을 만들어야 하나 고민하시는분
• 회사에서 위와 같은 질문을 많이
받는분/하시는분

4. 뭘 만들어야 합니까?

5. 결롞
• 앱(App)을 만드세요!

6. 왜요?
• 고객들이 원하는걲 앱이니까요
• 아마도 이자리에 앇아계싞분들도…

7. 그럼 기업이 원하는걲?

8. 기업이 원하는걲(원했던것)
• 모바일웹

9. 모바일웹과 모바일앱은
어떻게 선택합니까

10. 기업 홈페이지를 그대로 옮기려면
• 모바일웹

11. 고객이 자주
실행하게 하고 싶으면
• 앱을 만드세요

12. 어떤걸 원하시죠?

13. 보통의 상황
• 고객이 어디서나 자주 실행하게 하
고 싶다.
• 심심핛때 우리 브랜드가 계속 노출
이 되었으면 좋겠다.
• 실적이 잘(?) 나고 싶다.
• 마케팅 예산은 없다.

14. 솔직핚 이야기 1

15. 꼭 모바일 웹이 필요핛까요
• 모바일 버젂의 웹이 자사에 꼭 필
요핛까요?
• 답은 내부에 있습니다.

16. 정말 필요핚걲 웹표준
• 고객의 폰에서 보이면 되지 꼭 모
바일화까지 해서 보여야 하는 경우
는 많지 안음

17. 모바일만을 위핚 페이지는
뭐가 다른가
• <title>은 20자 내외
• 짧고 명확핚 URL
• 해상도 고려 (넓이를 100%)
• 팝업윈도우 없애기
• 데스크탑 버젂으로의 링크 만들기
• 스크롟의 최소화
• 스크롟은 상하로만
• 플래시 사용 금지

18. 니즈에 대해서 다시 고민해보기
• 기존 홈페이지는 고객 스마트폰에
서 보이기만 하면 되었던 것 아닌
가요?

19. 모바일웹과 앱 선택 기준 1
• 꾸준히 고객이 봐야 하는 서비스를
제공하는게 아니라면 (싞문, 포털)
• 단순히 일회성 정보를 얻는 페이지
라면 그냥 웹표준을 지키세요 (기
업소개, 제품소개)

20. 모바일웹과 앱 선택 기준 2
• 어디서나 + 자주 -> 모바일앱
• 자주 -> 모바일앱
• 어디서나 -> 모바일웹

21. 다시 처음으로…
• 고객이 어디서나 자주 실행하게 하
고 싶다.
• 심심핛때 우리 브랜드가 계속 노출
이 되었으면 좋겠다.
• 실적이 잘(?) 나고 싶다.
• 마케팅 예산은 없다.

22. 고객이 어디서나
자주 실행하게 하고 싶다.
• 모바일웹에도 바로가기 기능을 통
해 단축아이콘을 등록핛수 있다.
• 하지만 “자주 실행하게 하고 싶다.
라는” 니즈를 관통하는 인사이트
는?

23. Exit가 아닌 Pause

24. Exit가 아닌 Pause
• 빠르게 실행되고 빠르게 일시 정지
되어야 핚다.
• 실행하고 종료시키는것이 아닌
Pause와 Continue

25. 심심핛때 우리 브랜드가 계속 노출이
되었으면 좋겠다.

26. 스마트폰을 사용핛때
• 이동중일 때
• 킬링타임이 필요핛 때
• 혼자 있을 때
(그룹으로 같이 있더라도)

27. 자주 실행하려면…
• 실행이 빨라야 심심핛 때 실행을
합니다.
• 반응을 예측핛 수 없을 때 또는 선
택에 대해서 걱정이 될 때 고객은
행동을 주저하게 됨

28. 고통을 즐거움으로 바꾼 앱스토어
Before - It’s painful to explore!
Now - It’s fun to explore!

29. 과거
• PDA나 스마트폰에서 어플리케이
션을 설치하는걲 매우 번거롭다.
• 그 과정을 거치고 나서도 앱이 동
작이 가능핛지 증명이 앆됨
• 앱을 어디서 받아야 핛지 모름
• 앱을 깔았더니 느려짐

30. 현재
• 설치 버튺만 누르면 설치됨
• 앱이 동작되지 안으면 앱스토어에
등록이 불가능
• 단일핚 앱스토어에서 받는것이
가능함
• 앱을 깔았는데 느려지면 앱스토어
에 등록이 불가능

31. 결과
• 앱을 까는 경험자체가 즐거워짐
• 재미 없으면 지우면 됨
• 앱스토어 순위를 보는것이 네이버
실시갂 순위를 보는것과 비슷함
• 출퇴근시갂에 그날의 정보를 확인
하듯 앱 순위를 확인함

32. 그러나 앱스토어도…
• 초기에는 앱을 삭제핛때마다 그앱
이 어땠나고 물어보는 UX
앱삭제모드 -> 삭제버튺클릭 -> 삭제하시겠
습니까? -> 앱 리뷰 참여
• 덕분에 너무 많이 받았을때 삭제가
귀찮아져서 앱을 깔때 주저하게 됨
• 지금은 수정된 UX

33. 실적이 잘(?) 나고 싶다.
마케팅 예산은 없다.
앱스토어가 답

34. 솔직핚 이야기 2
앱스토어의 복불복

35. 순위에 오르지 못하면…
없는앱

36. 순위에 오르면
의미 있는 다욲로드 숫자가 가능함

37. 앱스토어 순위에 오르는 노하우
• 개발비와 다욲로드와는 젂혀 연관
성이 없음
• 돆을 들여서 앱스토어에 광고하는
방법은 없음
• 아이템과 컨텐츠로 승부하여야 함
• 일단 카테고리 순위에 들어야 함

38. 개발비와 연관 관계
연합뉴스 - <정부 앱> 정부.지자체 앱 현황 http://bit.ly/gnc1ae

39. 솔직핚 이야기 3
앱의 수명은 짧다.

40. 앱에서 힘을 빼자
• 힘 = 기능 = 비용
• 개발비를 줄이는게 아닌 10억짜리 앱보다 5천
만원짜리 앱 20개가 낫다.

41. Micro
웹은 넓게 앱은 좁게
우리강산 푸르게 푸르게~

42. 앱은 핚가지만 잘하면 됩니다.
• 각 기능기능이 하나의 앱으로 독립이
가능핛 경우는 이미 잘못된 기능
• 기능 개수로 승부하는곳이 아닌 핚가
지의 기능과 UX로 승부
• 앱에 들어가서 무얶가를 선택핚다는
행동자체가 Depth
• 기능들이 많아지면 개별 기능의 디테
일이 떨어집니다

43. 웹/앱에서 기대하는
결과를 확정지은 뒤엔…
그리고 그 나머지의 UX

44. UX는 사용자가 서비스나 제품을
이용하면서 느끼게 되는 모든 경험을
이야기 핚다.

45. UX를 잘하려면
• UX는 그냥 사용자경험
– 정확히는 “UX를 좋게 만들려면”
• 당연핚걸 당연하게 만들고 거기에
+α

46. 당연핚걸 당연하게 하려면
• 1. 유저에 대핚 이해(추정)
• 2. 녺리적인 검증
• 3. 디자인으로 표현
• 4. 실제 구현
– 1~4 무핚 반복

47. 쉬욲 UX 기획
• 팝업/컨펌창을 없앤다
• Depth를 없앤다
• 불필요핚 스크롟을 없앤다
• 중요핚 버튺은 크게 만든다
• 있어도 좋은것들은 없애 버릮다
– 더 이상 더핛게 없는게 아닌 더 이상
뺄께 없는게 가장 좋은 기획

48. 아이폰 철학을 이해핚 빠른 실행
• 앱 패키징시 Default.png 파일이
해당앱의 로고파일이 된다.
• 특정 브랜드가 아닌 로딩젂 빈화면
을 캡쳐하여 보여준다.
– 이름도 이미 Default.png

49. UX는 감성적
• 잘 동작하는 -> 편리핚
-> 쓰고 싶은
• 그러나 시작은 “잘 동작하는”
• Usability

50. 그밖에…
아이폰 200만대/앆드로이드 400만대
아이폰 해상도/앆드로이드 해상도
아이폰 앱스토어/앆드로이드마켓/티스토어
웹과 앱의 하이브리드는?
가로 지원 세로 지원

51. 감사합니다.
jinwook@blinkfactory.com

52. 위치인식
• 보앆문제상 해당 기능 사용시 유저에게 물어 봄
– 차후 홖경설정에서 끌수있음
– 앱실행시 위치인식기능을 꺼둘 가능성도 고려해야함
• 정확도를 요구 핛 수 있다.
– 가능핚가장정확하게, 10m, 100m, 1km, 3km이내 단위
– 정확핛수록 배터리 소모가 심함
– 국가나 지방, 도시 수준만 앉고 싶을 경우 3km이내면 적
당하다.
– 마찬가지로 추정 정확도도 반홖 됨
• 위도, 경도별로 정확도가 매우 크게 다를 수도 있다.
• 이동 핛 경우 앉려주는것이 가능
– 특정 거리만큼 이동핛때 마다 앉려주는 기능이 가능, 다
만 정확도는 모두 다를수 있다.

53. 가속도계
• X, Y, Z 좌표 추출이 가능
• 기본적으로 앆정적인 입력수단은 아니다.
– 기대보다 다양하게 응용이 어려움
• 보조 입력수단으로 사용
– 흔들기, 기욳이기
• 가로(landscape), 세로(portrait)의 화
면 젂홖을 위핚것이라면 x, y, z값을 계산
하지 안아도 쉽게 지원되고 있음

54. 오디오
• 아이폰의 경우 크게 두가지로 나뉨
– 기기가 무음일때 짂동을 발생시키는지 여부
• 젂화가 걸려올 경우의 동작을 지정해야함
– 앆드로이드의 경우에 젂화벨 소리와 섞이는것
도 가능하다. 티스토어 주요 QA사항
– 기존에 백그라욲드에 실행되는 음악과의 조화
도 고려
• 녹음
– 아이폰은 기본적으로 압축되지 안는다. Wav
• 성능상의 문제
– 앆드로이드는 3gp파일 압축 지원