모바일 컨텐츠 이야기


모바일웹 설계를 위한 팁과 가이드


사용자 삽입 이미지

comScore에서 월마다 발표하는 미국 모바일 사용자들의 사용 행태를 재구성해보면 Mobile Web이 근소한 차이를 유지하면서 Mobile App보다는 많은 사용자를 확보하고 있는 것을 알 수 있다. 이는 일반 사용자에게 Browser 사용이 친숙하고 Feature Phone에서도 비교적 자유롭게 Mobile Web 사용이 가능하기 때문이다.

이렇게 Mobile Web 사용이 증가하면서 일부 전문가들은 'html5'라는 필살기만 완성되면 App에게 주도권을 빼앗긴 IT 산업을 다시 Web 품으로 돌려줄 수 있을 것이라 '맹신'하고 있다. 하지만, Web과 App의 주도권 싸움의 결론을 떠나서 현재 Mobile Web의 불편한 사용성과 문제점들이 단순한 Script Language의 기술적인 이슈가 전부인지는 진단해 볼 필요가 있다.

Mobile 업계가 가장 먼저 Web에 대한 접근을 시도한 것은 '풀브라우징' 이었다. Mobile 기기에서 PC Web 화면을 그대로 볼 수 있다는 마케팅 용어는 어느 순간 사라져 버렸다. 사용성에 있어서 큰 문제를 가지고 있고 정보를 전달하는데 있어서도 비효율적이기 때문이다.

최근에는 Mobile 기기에 최적화하는 Mobile Web Site로 대응하는 것이 일반화되고 있다. 그렇다면 얼마나 많은 Web Site들이 Mobile Web을 지원하고 있을까? 조금 오래된 자료이긴 하지만 'Walled Garden에서 탈출하는 Mobile Web' 에서 소개한 taptu 보고서에 의하면 전체 Web Site의 0.32%에 불과하다.

사용자 삽입 이미지

2010년 11월에 발표한 Chitika의 보고서도 Mobile Web Site 구축율을 이해하는데 도움이 된다. 해당보고서에서는 사용자들이 자주 접속하는 상위 백만개 사이트를 대상으로 Mobile Web 대응 비율을 조사하였다. 조사 결과 Top 10 사이트의 경우는 100% Mobile Web을 대응하고 있었지만, Top 100은 67%, Top 1000은 35%만이 Mobile Web Site를 보유하고 있었다. 전체 조사 대상인 백만개 사이트 중 3.54% 만이 Mobile Web 대응을 하고 있었다.

사용자 삽입 이미지

그렇다면 사용자들은 Mobile로 Web Site를 접속할 때는 어떠한 것을 기대하고 있을까? gomez 보고서에서는 매우 대조적인 결과를 보여주고 있다. 42%는 Mobile 단말이 제약사항이 많으니 PC에서 접근하는 것보다는 느릴 것으로 예상하고 있었다. 반면에 33%는 Mobile Web 전용 Site들이 PC Site에 비해 가볍기 때문에 PC에서보다 더 빠를 것으로 예상하고 있었다. 사용자간의 Mobile Web에 대한 예상과 이해도가 다양하다는 이야기이다.

사용자 삽입 이미지

사용자들이 Mobile Web을 이용하면서 가장 불편한 점은 대체로 일반적인 내용들이다. 불편하게 설계되어 있을 때 33%, 로딩이 느릴 때 29%, 원하는 기능이 없을 때 18% 등이다. html5이 만들어내는 다양한 Device 연동과 Local Cache, 새로운 사용자 경험이 일부 완충작용을 하겠지만 기술적인 이슈보다는 사용성에 대한 연구가 더 선행되어야 한다는 아주 기초적인 결론을 내릴 수 있다.

그렇다면 Mobile Web을 설계하고 개발하는데 어떠한 점을 유의해야 할까? 이러한 질문에 대해 W3C에서는 'Mobile Web Best Practice' 문서를 만들어서 답변을 하고 있는데, 아주 기본적이면서도 중요한 내용이 많아 이 자리를 빌려 소개하고자 한다.

1. 하나의 웹을 위한 설계 : 다양한 장비를 고려하여 설계한 컨텐츠는 비용을 절감시키고, 유연성을 증대하며, 더 많은 사람들의 필요를 충족시킬 수 있다.
2. 웹 표준 준수 : 세계 곳곳의 제각기 다른 장비와 브라우저의 호환을 위해서는 표준을 준수해야 한다.
3. 유해요소 제거 : 모바일 장비의 제한 된 화면크기, 키보드, 기타 기능으로 발생하는 사용자의 문제를 고려하여 설계한다.
4. 장비 제한 주의 : 특정 웹 기술을 사용하고자 할때는, 모바일 장비 성능이 제각기 다르다는 것을 염두해 두어야 한다.
5. 웹 네비게이션 최적화 : 작은 화면과 키보드, 제한된 bandwidth에서는 단순한 네비게이션과 입력이 매우 중요하다.
6. 그래픽과 색상 확인 : 이미지, 색상, 스타일은 컨텐츠를 빛나게하지만 지원되는 포맷과 저사양의 화면 등을 유의하여야 한다.
7. 가볍고 간결한 사이트 : 가벼운 사이트는 시간과 비용을 절약하여 사용자를 즐겁게 한다.
8. 네트워크 자원 절약 : 웹 프로토콜 기능을 활용하면 네트워크 부하와 대기시간을 줄여 사용자 이용을 향상시킬 수 있다.
9. 사용자 입력 가이드 : 모바일 장비에서 키보드 및 각종 입력 방법은 비효율적일 수 있으며, 효과적인 설계는 이러한 입력을 최소화 할 수 있다.
10. 모바일 유저 배려 : 시간이 부족하고 번잡한 상황에 있는 모바일 사용자들은 간결한 정보를 얻고자 한다.

개인적으로는 noupe에서 이야기 하는 'Mobile Web Design : Tips and Best Practices'도 많은 공감이 간다. 간략하게 번역을 하여 소개해본다.

1. 간결하게 하라!
2. 정확한 Markup을 사용하라. 비표준이나 문법에 맞지 않는 구문을 사용하지 말아야 한다.
3. 사용자 선택에 의해 PC Site도 볼 수 있게 해야 한다.
4. CSS를 이용하여 PC Site에서도 Mobile 단말에 대한 대응을 할 필요가 있다.
5. 스크롤은 한 쪽 방향으로, 짧은 스크롤로!
6. 팝업이나 '새창으로 열기'등은 사용하지 말아야 한다.
7. 이미지는 최소화한다.
8. 네비게이션은 모바일 환경을 고려하여 최적화 한다.
9. Flash와 Java Script 사용을 자제한다.
10. 최대한 효율적으로 PC Site에 있는 컨텐츠를 Mobile Web에서도 많이 노출시킨다.
11. 적당히 모바일 환경에 맞는 페이지로 리다이렉트 시킨다.

실제 사용 비중과 다르게 App이 Mobile 산업을 이끌어가는 느낌을 주는 것은 그만큼 사용성에 대한 연구와 함께 새로운 가치를 사용자에게 전달을 잘 하고 있기 때문이다. 반면에 아직도 Mobile Web은 PC Web의 설계 패턴을 벗어나지 못하고 있으며, 단말 사용성에 대한 이해가 아직도 많은 편이다.

'html5가 Web을 구할 것이다'라는 전설만을 믿으며 살아가는 것 보다는 현재의 기술 안에서 좀더 모바일 다운 Web 환경을 만들어 가는 것이 더욱 중요해보인다. Mobile Web에 대한 고민을 하는 이들에게 오늘 소개한 몇가지 자료와 팁들이 도움이 되었으면 하는 바램을 가져본다.
2010/11/17 08:28 2010/11/17 08:28
top

  1. wizardee 2010/11/17 08:54 PERM. MOD/DEL REPLY

    예전에 VM 게임 처음 만들때 생각이 나네요.. 좋은 글 감사드립니다. :)

  2. bobozzang 2010/11/17 10:51 PERM. MOD/DEL REPLY

    퍼갈께요~ 좋은 자료 감사합니다.

  3. 숲속얘기 2010/11/18 10:56 PERM. MOD/DEL REPLY

    사용성에 대한 재고.. 정말 동감합니다. 근데 역사가 짧은만큼 증명된것도 적은것 같습니다. 개인적으로 스크롤이란게 모바일에 맞는지도 의문이 듭니다.
    또한 HTML5에는 모바일에 꼭 필요한 다른 스펙들도 좀 추가되었으면 좋겠습니다. 과거에 WML에 번호로 직접 이동가능한 anchor가 있듯이 다른 액션을 통한 웹에 대한 접근도 가능할텐데 말이죠.

    좋은글 감사합니다.

  4. mc500 2011/01/12 16:55 PERM. MOD/DEL REPLY

    좋은 글 감사합니다. ^^

  5. 까만별 2011/05/24 11:32 PERM. MOD/DEL REPLY

    좋은 자료 감사합니다.
    퍼가겠습니다.

  6. 1 2011/09/19 17:24 PERM. MOD/DEL REPLY

    잘 읽고갑니다.!

 

Mobile UX #2


4. Usability

UX 디자인의 시작은 'Usability'라는 단어에서 시작했다고 해도 무방하다. 디자이너 고유 분야였던 UI를 시스템 기획자의 영역인 UX로 확장된 배경의 중심에 바로 이 단어가 있다. 약간 극단적인 예를 들면, 디자이너 입장에서 최강의 폰이 될 수도 있는 Luxury 폰들은 대부분 Usability가 떨어진다.

사용자 삽입 이미지

이런 폰으로 친구들에게 자랑을 할 수는 있으나 모바일 컨텐츠나 풀브라우징과 같은 서비스를 5분만 사용해도 눈이 아프거나 손가락이 아파서 포기할 것이다. 사실 이런 극단적인 예를 들지 않더라도 모바일 디바이스에서 Usability가 디자인적인 Fashionable 과는 거리가 멀다라는 것은 다 알고 있을 것이다. 그렇다면 모바일 디바이스에서 Usability는 사용자에게 어떻게 인식되는가? Nielsen은 1993년 그의 논문에서 Usability는 Acceptability의 한 부분이라고 정의하고 있다.

사용자 삽입 이미지
위의 표는 굉장히 중요하다. 이러한 다양한 요소들이 결합되어서 사용자의 Acceptability를 이루는 것이다. 햅틱폰이나 아르고폰의 UI의 수준은 사용자에게 만족감을 주거나이나 궁금증을 일으키지만 Cost부분에서 만족감을 주지 못하기 때문에 Acceptability가 높지 않은 것이다. UX 디자인이 단순한 UI디자인과 다른 이유는 이런 다양한 요소를 같이 고려하면서 설계를 해야 하기 때문이다.



5. 디바이스 UX 설계시 유의점

그렇다면 저렇게 추상적인 Usability를 실제 디바이스 설계시에는 어떻게 적용을 해야 하는 것일까? 2002년, Dunlop과 Brewster는 그들의 논문에서 모바일 디바이스 설계시에 가장 중요한 5가지 요소를 정리한 적이 있는데 소개를 하면 아래와 같다. 1번부터 3번의 요소는 사실 누구나 고민하는 부분이지만 4번과 5번과 같은 요소까지 디바이스 설계시 유의하라는 이야기는 좀 더 생각해보아야 할 것이다.

1. Designing for mobility : the environment may be a far-from-ideal working environment and the environment may change drastically as the user moves.
2. Designing for widespread population : users consider mobile technologies as devices rather than computers.
3. Designing for limited input/output facilities : small screens, poor sound output quality, restricted voice recognition, limited keyboards both in size and number of keys, and pointing devices are often hard to use while on the move.
4. Designing for (incomplete and varying) context information : mobile devices can be made aware of their context, giving new information to the systems but also bringing problems associated with implying task and user level activities from sensor information and unreliable or patchy sensor coverage.
5. Designing for user multitasking at levels unfamiliar to most desktop users: the opportunities for and frequency of interruptions is much higher than in desktop environments.



6. 키의 배치

사용자 삽입 이미지

위의 그림은 가장 일반적인 키패드가 아닐까 생각한다. 예전에는 거의 표준아닌 표준이었던 위와 같은 키패드 배열도 점차로 선택이 넓어지고 다양한 변화의 시도들이 이루어 지고 있다. 소프트키의 경우 대부분의 폰들이 2개였지만 RAZR의 경우에는 소프트키가 3개이다. 또한 4방향의 방향키가 가운데 위치했던 것이 휠을 채택하는 폰도 나왔다. 숫자 키패드는 3행 4열이었던 것이 4행 3열도 등장했다. 전체 키패드를 터치를 적용하는 폰도 생겨났고, 키패드 뿐만이 아니라 전체 액정을 풀 터치를 채택하는 폰도 생겨났다.
 
그렇다면 이러한 폰들의 UX적인 변화가 성공했느냐를 생각해볼 필요가 있다. 결과론적으로 사용자들은 과거의 친숙한 UX에서 크게 벗어나는 시도에서 아주 큰 Value를 주지 않는한 거부감이 있다는 것을 알 수 있다. 각각의 시도가 어떠한 의미가 있는지는 한번 생각을 해보기를 바란다.

사용자 삽입 이미지



7. 편리성과 휴대성 사이

모바일 디바이스의 문제점으로 가장 자주 언급되는 것이 작은 Display 크기와 입력 방법의 불편함이다. 이 단점을 보완하기 위해서는 핸드폰의 크기를 키우면 되지만 그렇다보니 휴대성에 문제가 생긴다.

사용자 삽입 이미지
요즘 10대 청소년의 문자 입력 속도를 보고 있자면 정말 입력방식이 불편하기는 할까 하는 생각이 들긴 하지만 실제 여러 조사를 해본 결과 사용자들은 PC UX를 모바일에서 그대로 유지할 수 있는 QWERTY 자판을 선호하는 것으로 나타나고 있다. 물론, 이를 일반화하는 것은 또 위험하다. 대부분의 이러한 설문은 손이 크고 키패드 입력 방식을 싫어하는 서양권에서 많이 나오고 있는 결과이고, 동양권에서는 실제 어떠한 입력 장치를 선호하는지에 대해 단언하기는 위험한 면이 있다. 실제 국내에서도 QWERTY 폰이 거의 없다보니 설문을 진행하는 것도 의미가 없을지 모른다. 처음 QWERTY를 접하는 사용자들은 또 거부감을 느끼기 때문이다. 어느 정도 적응이 필요한 입력 장치라고 할 수 있다.

블랙잭을 가지고 다니면은 QWERTY에 비해서 너무도 작은 Display 화면, 그리고 약간은 큰 크기에 부담을 느끼는데 사용자들은 핸드폰이 주머니에 넣고다니는 크기 이상이 되는 것을 싫어하고 있다. 실제 사람들의 평균 손 크기가 81.2 mm 라고 하니 그립감이나 이동성을 고려할 때 편리성과의 발란스를 잘 맞추는 크기가 중요하다.



8. 정말 Touch UI가 정답인가?

어려운 질문이다. 아이폰 효과로 생겨난 Touch UI의 시도는 명백히 아이폰을 제외하고는 실패라고 할 수 있다. 아이폰은 H/W에서 주는 Full Touch 기능과 Application UI가 절묘하게 맞아 들어갔기 때문에 성공을 했으나 경쟁사 제품은 H/W와 S/W가 전혀 조화가 되지 않았다. 불행히도 벤더들은 그런 것 보다는 Touch에 호기심을 느끼는 사용자들을 자극하여 지갑 터는게 더 급한 듯 하다. 아이폰이 나온지 꽤 되었는데도 발전된 UI를 내세우기보다는 다양한 iPhone Like 제품을 만들기에 바쁘니깐 말이다.

개인적으로는 Full Touch 보다는 QWERTY 폰에 더 눈길이 많이 간다. 불랙잭을 사용하는 사용자로서 입력의 불편함을 QWERTY가 꽤나 많이 감소시켜주고 있다는 것을 느끼기 때문이다. 그러한 면에서 삼성이 내놓은 U940과 같은 폰은 좋은 시도이다. Full Touch와 QWERTY을 동시에 지원하니깐...

사용자 삽입 이미지
2008/07/23 16:18 2008/07/23 16:18
top

  1. JooS 2008/07/29 10:24 PERM. MOD/DEL REPLY

    저도 Palm Treo를 4년정도 썼더니, 이제 QWERTY 키패드가 너무 편합니다.^^

    노트북도 없애고 Treo로 문서 작업할 정도니까요.


    국내 기업은 이슈만 쫓아가지 말고 본질을 제대로 파악했으면 합니다.


    좋은 글 감사합니다.^^

    mobizen 2008/07/29 11:11 PERM MOD/DEL

    처음 QWERTY 를 접할 때는 불편함을 느끼기 마련이지만 익숙해지면 굉장히 편하다는 것을 알게 되는 것 같아요. 그렇다고 노트북도 없애고 Treo로 문서 작업을 하신다면......

    흐음... 조만간 JooS님 한번 만나야 할 것 같은데요.. ^^

 

Making Video - Nokia N82


'Making Of Nokia N82'라는 제목의 비디오이다. N82의 디자인을 하면서 그에 따른 컨셉을 설명해주고 있다. 영국식 여성의 영어 발음이 꽤나 낯설게 그리고 멋지게 다가오는 비디오이다. 설명을 잘 들어볼 것! 처음 시작하는 이 문장이 가슴을 친다.

Every creational process begins with 'VISION'

2008/07/01 17:15 2008/07/01 17:15
top

 

Handset Fashion & Style Congress, 2008


사용자 삽입 이미지
최근에 와서 UI와 UX, 그리고 Full Touch Screen을 통한 입력 장치 개선에 대한 관심이 늘어나고는 있지만 아직까지는 대중들의 휴대폰 선택시의 최대 관심사는 가격과 디자인이다. 특히 이 디자인 부분에 와서는 핸드폰사들이 유명 명품 브랜드와 결합하면서 더욱 주목 받고 있다. 이러한 대표적인 예로는 프라다폰, 페라리폰, 구찌폰 등을 들 수 있다.

이러한 휴대폰 디자인쪽은 비 IT쪽의 이슈로서 상대적으로 덜 조명 받고 있는 것이 사실이다. 하지만 이번에 "Handset Fashion & Style Congress"가 열리니 대형 휴대폰 제조사의 디자이너들은 관심을 가져볼 필요가 있겠다.

- 기간 : 2008, 04. 22 - 24
- 장소 : 영국, 런던
- 가격 : 2 Day Conference + Workshop: £1,695 + VAT
           2 Day Conference: £1,195 + VAT
           1 Day Conference: £695 + VAT
           Workshop Only: £695 + VAT
- 관련 홈페이지 : http://www.arcchart.com/events/hfsc/index.shtml

2008/04/14 11:21 2008/04/14 11:21
top

 

지금까지 가장 많이 팔린 핸드폰 Top 10


인터넷으로 핸드폰을 파는 가장 큰 사이트 중에 하나인 Wirefly에서 발표한 자료이다. 자사 사이트에서 판매했던 자료로만 Rank를 주었기 때문에 아주 공신력있는 데이타라고 하기에는 무리가 있겠지만 참고 자료 정도로는 충분하다.

1. Motorola RAZR (all colors)
2. BlackBerry Pearl (all colors)
3. LG Chocolate (all colors)
4. Samsung A900M
5. Motorola i850
6. Motorola Buzz ic502
7. Sanyo Katana (all colors)
8. Sony Ericsson w810i
9. Nokia 5300 XpressMusic
10. Motorola v325i

RAZR가 나온지 시간이 조금은 흘렀지만 아직도 1위를 하고 있다. 상위 랭크 폰모델을 보면 누구나 알겠지만 핸드폰의 구매포인트는 화려한 기능이나 획기적인 Application이 영향을 주지 않는다. 누가 뭐래도 중요한 Keyword는 "Design" 이다. Wirefly의 대표이사 Brian Westrick는 이렇게 이야기를 한다. " Looking pretty is the biggest selling point." 아무도 부인은 못할 듯~

2007/05/28 17:20 2007/05/28 17:20
top

  1. ZiA 2011/10/09 01:21 PERM. MOD/DEL REPLY

    오늘의 유머라는 사이트로 담아갈게요 ^.^
    나중 되서라도 담아가는게 불편하시다 하심 말씀해 주세요.. ㅎㅎ