stophobia

모바일 사이트 용 디자인 기획서

(작성자는 본인이며, 원본은 일본어입니다.)

1. 인터페이스 디자인

- 기본적인 문자열 화면의 사이즈는 100%로, 이미지 파일의 표시 사이즈는가로 240픽셀을 기준으로 한다.
(일본의 휴대폰 화면의 규격은 천차만별입니다. 각 휴대폰 제작사에서 사양을 발표하고 있으니, 최소 픽셀 또는 일반적인 픽셀을 기본으로 화면 사이즈를 지정하여 제작할 수 있습니다.)

- 개발 툴, 시뮬레이터를 기준으로 텍스트 페이지는 5kb이내, 이미지는 1장 당 5kb이내로 한다.
(사실 이 제한은 지키기 쉽습니다. 레이아웃에 테이블을 사용하지 않는 것 만으로도 패킷은 가벼워집니다.)

- 모든 이미지는 ALT태그를 사용하여 전송이미지의 내용을 사용자가 파악할 수 있도록 한다.
(그렇다고 핸드폰에 이미지를 끄는 기능이 있는 것은 아니지만, 패킷 또는 시간을 아끼기 위해 이미지가 표시되기 전에 버튼을 클릭하는 경우가 흔합니다.)

- 이미지의 높이는 최대 200픽셀을 넘지 않도록 한다.
(고객의 손가락을 작디작은 버튼으로 무한정 스크롤시킬수는 없으니까요.)

- 모든 이미지는 gif파일만을 사용한다.
(단말기에 따라 지원하는 이미지 파일 형식이 틀립니다. 하지만 공통적으로 gif파일을 지원하고 있으니 제일 안전한 방법입니다. 이 자료가 작년의 자료이니, 지금 정도면 jpg도 대부분 지원하고 있겠지요.)

- 모든 메뉴는 메뉴 확장 룰에 의해 제어되도록 한다.
(자바스크립트를 이용한 비주얼적인 메뉴 확장이 아닌, 파일의 명명규칙 등 시스템적인 확장 규칙을 말합니다. 모바일 웹에서의 자바스크립트 사용은 자폭을 의미합니다.)

- GNB를 모든 페이지에 위치시킨다.
(클릭 한번한번이 요금과 직결되는 모바일이기에, 이 룰만은 지켜져야 합니다.)

- 페이지의 Depth는 5단계를 넘지 않도록 한다.
(쇼핑 페이지의 경우 5단계입니다. 이 이하로 줄이면 화면이 길어지고, 이 이상 단계가 늘어나면 고객은 미아가 되어버립니다. 일반적인 웹페이지의 경우라면 개인용 컴퓨터의 웹페이지와 같이 3단계 정도가 가장 적당하다고 생각합니다.)

- 모든 페이지의 칼라와 서체는 통일성을 갖도록 한다.
(기본적인 내용이기에 설명은 생략합니다.)

이 외 클라이언트의 요청이나 해당 시기의 이슈에 따라 추가 사항이 있을 수 있습니다.

크리에이티브 커먼즈 라이선스

이 저작물은 크리에이티브 커먼즈 코리아 저작자표시-비영리-변경금지 2.0 대한민국 라이선스에 따라 이용하실 수 있습니다.

이 문서는 모바일용 디자인 기획서의 투고에 앞서 일본의 모바일 웹에 대한 이해를 돕기 위한 참고자료입니다. 일본과 우리나라로 한정하여 비교하고 있지만, 두 나라를 비교하여 우열을 따지기 위한 의도는 전혀 없습니다.

일본에서의 모바일 웹은 일반적인 의미를 갖습니다. 모바일 웹 = 인터넷이라는 인식도 가능할 정도이지요. 화면 크기와 전송 속도 등 뻔한 핸디캡은 차치하고, 그에 따른 기술 개발과 인프라의 구축까지 생각한다면, 매우 많은 투자가 필요했으리라고 생각합니다. 지금의 우리나라에서의 웹 상황이라면 말이지요. 하지만 일본에서는 모바일 인프라의 구축이 우리나라의 초고속 통신망보다 빨랐습니다. 전세계적으로 우리나라의 초고속 인터넷 보급에 대해 경이의 눈으로 바라보는 것과 마찬가지지요. 비슷한 시기에, 일본은 모바일 단말기 쪽에, 우리나라는 개인용 컴퓨터 쪽에 초점을 맞추었다고 봐도 무방할 것 같습니다.

우리나라의 모바일 웹은 어떤 느낌일까요? 쉽게 떠오르는 서비스는 모바일용 웹화보 서비스, 게임 컨텐츠 제공 사이트 정도이군요. 음원이나 배경화면 제공 서비스 등 통신회사에서 자체적으로 서비스를 하는 경우를 제외하겠습니다. 위의 두 종류를 제외하고는 수익모델의 예를 찾기 어려운게 사실입니다. 일본의 모바일 웹서비스는 매우 광범위합니다. 개인용 컴퓨터에서 웹에 연결하여 얻을 수 있는 정보는 거의 다 얻을 수 있습니다. 오히려 개인용 컴퓨터에서 얻을 수 없는 정보마저도 얻을 수 있습니다. 웹과 비교하여 상업적인 수치도 별 차이 없습니다. 제 경우를 예로 들자면 시야가 좁아집니다만, 전의 회사에서 20~30대 남성을 타겟으로 한 상품을 판매하여 모바일로만 한해 17억엔의 매상고를 올렸습니다. 이는 회사 전체 매출의 70%에 달했습니다. 함께 전개했던 시부야의 오프라인 매장보다 많은 경우 8배 정도의 매출을 올렸으니 회사에서도 모바일의 위력에 대해 누구도 부인하지 않았습니다.

이 모바일 웹 사이트를 보면... 형편없습니다. 우리나라의 뻑적지근한 웹사이트와는 격을 달리합니다.
좋지않은 의미로, 텍스트 브라우저로 보아도 별반 차이없는 외관(크로스 브라우징)입니다.
코드 면으로 보자면, 웹표준 테스트 쯤은 대번에 100점 만점(웹접근성)으로  통과합니다. 검사할 것이 없으니까...

하지만, 이것이야말로 장점입니다.

제일 큰 장점은 다양한 운영체제를 사용하는 다양한 단말기에서 접속해도 똑같은 외관에 똑같은 속도로 컨텐츠를 즐길 수 있습니다.

그 다음 장점은, 빠릅니다.

웹에서 일반적으로 "빠르다"는 것은 무슨 개념일까요? 개인용 컴퓨터라면 경제적이고 세련된 내비게이션의 배치로 인한 "원하는 정보에의 빠른 접근(= 마우스를 움직이는 거리와 클릭 횟수)"을 의미할 것입니다.

하지만 좁은 화면으로 인해 내비게이션의 제약이 있는 모바일의 경우는 "웹사이트 사이의 경제적인 이동"이 아닐까 싶습니다. 예를 들어서 원하는 정보를 얻기 위해 300kb의 패킷을 소비해야 하는 경우와 100kb를 소비해야 하는 경우, 패킷을 받아서 실제로 단말에 표시하기까지의 시간을 제외하더라도 모바일 웹이라면 100kb를 소비하는 경우를 "빠르다"고 정의합니다. 맞습니다. 모뎀을 떠올리셔도 됩니다. 하지만 무조건 300kb를 소비한다고 나쁘다고는 말할 수 없습니다. 예를 들어서 모바일 화보 서비스를 개시하는 경우, 첫화면에 300kb의 고품질의 이미지를 사용한다면 이는 적중한 기획이라고 할 수 있습니다. 이용자에게 서비스에 대한 일차적인 만족과 기대감을 제공하여, 이용자들의 패킷 요금에 대한 보상을 충분히 하고 있기 때문입니다. 역으로 이러한 컨텐츠의 제공이 일차적인 목적이 되는 사이트에서 과도한 패킷 제한을 둔다면, 서비스의 존재 의미가 없어질지도 모릅니다.

쇼핑사이트의 경우는 패킷 절약이 우선이라고 생각합니다. 여기저기 돌아다니면서 상품을 비교해 보아야 하니까요. 그리고 비교를 해서 구입할 물건을 정했다고 해도, 경험에 비추어 보면, 최종적으로 결재를 하기 전까지 대여섯번 정도는 더 들어가 보지 않나요? 하지만 이러한 패킷 절약이 쇼핑사이트만으로 범위에 제한을 두기도 뭣한게, 일본의 모바일 웹의 역사가 길다는 점을 감안한다면 웹사이트 자체적으로 어느 정도 패킷 제한을 하는 것은 납득할만합니다. 제대로 된 웹브라우저가 없던 시대부터 발달한 탓에, 텍스트가 빨리 뿌려지는 것만이 유일한 대책이었던 그 시절의 흔적이 아닐까요? 최근에 일본의 모바일 웹서비스를 보면 동적인 위치확인 서비스나 화보제공 서비스(이 화보제공 서비스의 원조가 한류 스타의 사진 다운로드를 서비스하던 것임을 생각하면 재미있습니다.) 등 굵직굵직하게 패킷을 소비하는 서비스가 속속 등장하는 것을 보면, 일본의 모바일 웹도 패킷 절약주의에서 어느 정도 벗어나지 않았나 생각합니다.

비단 일본 뿐만이 아니라, 세계적으로 향후의 인터넷 모바일 웹의 전개에 대해 적극적으로 대처해 나가는데에 비해, 우리나라의 움직임은 아직 늦은감이 있지 않나 생각해 봅니다. 빈틈없고 철저한 준비로 우리나라에 진출한 다국적 기업이 유독 모바일 웹 사업 전개를 보류하고 있는지에 대해 경각심을 가져야 합니다.

일본에 진출한 다국적 기업은 일본의 모바일 웹에 대해 매우 적극적으로 반응하고 있습니다. 구글은 AU에 웹브라우저를 제공하고, 야후저팬은 자기업인 소프트뱅크에 웹브라우저를 제공하고 있습니다.

우리나라도 모바일 웹 인재를, 지금부터 육성해 나가야 합니다.

크리에이티브 커먼즈 라이선스

이 저작물은 크리에이티브 커먼즈 코리아 저작자표시-비영리-변경금지 2.0 대한민국 라이선스에 따라 이용하실 수 있습니다.