광고컬럼

NSM 사이트 컨설팅 전략에 대한 마흔 두 번째 이야기!  

네이버의 모바일 홈페이지 제작 플랫폼, modoo![모두] 사용자를 위한 병/의원 홈페이지 제작 팁

 

 

네이버의 모바일 홈페이지 제작 플랫폼,
modoo! [모두] 사용자를 위한
병/의원 홈페이지 제작 팁 


1시간도 안돼서 모바일 홈페이지를 만들 수 있다면?

“ 네이버 아이디로 가입하여 쉽게 로그인하고 한번에 내 모바일 홈페이지를 만들 수 있어요.
에디터를 통해 업데이트가 쉽고 클릭 몇 번이면 홈페이지를 만들 수 있습니다.
- 누구나, 쉽게, 무료로 만드는 모바일 홈페이지 modoo! [모두] – Ⓒ NAVER Corp. 


네이버의 무료 모바일 홈페이지 제작 서비스 '모두' 로 제작된 사이트 ( 바로가기 ▶ http://www.modoo.at/home )


4월 말, 네이버는 무료 모바일 홈페이지 제작 플랫폼을 오픈 하였습니다. 많은 비용과 시간을 들이지 않고 홍보용 사이트가 필요한 오프라인 상점에서 쉽게 제작할 수 있기 때문에 서비스 2주 만에 13만개의 홈페이지가 등록되었습니다.  

 

modoo! [모두] 서비스를 시도해 보면 좋을 사이트


그렇지만, 누구나 홈페이지를 만들 수 있다는 이야기는 자칫하면 수월하게 홈페이지를 만들었지만 사용자 관점에서 서비스를 이용하기 어렵게 제작될 수 있다는 이야기도 됩니다. 그렇기에 홈페이지 제작에 대한 경험이 부족한 분들에게 모바일 환경에 대한 이해는 더 필수적이라고 할 수 있습니다. 과연 우리의 모바일 웹이 사용자에게도 편리하게 이용할 수 있는 환경일까요?  

 

 

modoo! [모두]로 모바일 홈페이지를 만들 때

이것만은 알고 만들자! 

병/의원 업종의 사례를 통해, 사용자들의 불편함은 어떤 점이 있는지 살펴보고, 관련된 모바일 제작 팁을 확인해보겠습니다.

 

 

Metro UI는 화려한 장식이나 효과를 절제한 단순하고 직관적인 픽토그램 스타일의 UI입니다.

심플한 디자인 + 빠른 의미 전달이 가능해 스크린사이즈가 작은 모바일환경에서 더욱 직관적인 UI입니다.

 


[그림1] Metro : Clean, light, fast

 

최근에는 이러한 메트로 UI 방식에 이미지를 가미한 이미지 기반 Interface가 웹에서 많이 사용되고 있습니다. 텍스트보다 이미지/영상을 중심으로 콘텐츠를 구성하면 사용자의 흥미 및 관심을 유발할 수 있어 사용자의 몰입도를 높이는데 효과적이기 때문입니다. 

 

 


[그림2] Image Based Interface [사진출처 : https://diegoquintana.com/en]

 

특히, 병/의원 업종에서는 고객들이 시술결과에 대해 많은 관심을 보이기 때문에 적용하기에 적절한 UI 디자인 방식입니다. 사례나 진료과목의 전문성, 병원의 안전시스템을 보여줌으로써 신뢰도를 어필해 보면 어떨까요? 


- How to use?!
단순히 버튼을 노출하고 터치하여 관련 페이지로 이동하는 것이 아닌, 첫 화면에서 ‘시술 체험기, 최신 의료장비’ 등 고객이 궁금해하는 콘텐츠의 이미지를 함께 배치하였습니다. 콘텐츠에 대한 주목도를 높이고 페이지를 펼치자마자 바로 원하는 정보로 접근이 용이합니다. 이처럼 사용자에게 필요한 콘텐츠의 쉽고 빠른 전달을 목적으로 직관적인 정보 구성에 노력해 보시기 바랍니다.

 


[그림3-1] 텍스트 버튼의 이해를 도와주는 이미지를 삽입

 

 


[그림3-2] Contents is UI. 포토와 텍스트를 적재적소에 배치하여 메뉴 직관성을 높이고, 전문성 어필

 

 

 

 

트위터의 단문 커뮤니케이션, 유튜브와 인스타그램의 비쥬얼 커뮤니케이션에 익숙한 사용자에게 화면사이즈가 작은 모바일 웹에서 중요한 것은 간결한 방식을 통해 정보를 전달하는 것입니다. 서술형의 내용을 간결하게 압축함으로써 직관적인 이해를 돕고, 텍스트 블록이 많이 길어지지 않도록 하여 가독성을 높일 수 있습니다. 



- How to use?!
내용을 단번에 이해하도록 주요 혜택은 숫자, 키워드방식으로 주목도를 높입니다. 또한 사용자로 하여금 많은 콘텐츠에 피로해지지 않고 오래 머무르게 하려면 심플함을 유지해야 합니다. 사용자 호흡을 고려한 단락구분으로 가독성을 높여보세요.

 

 

서술형 텍스트 보다 키워드로 가독성 높이기



 

[그림4-1] 모바일 디바이스에서 더욱 중요한 가독성, 1.텍스트 보다 키워드 

 

 

텍스트 블록을 나누어 가독성 높이기

 



[그림4-2] 모바일 디바이스에서 더욱 중요한 가독성, 2.텍스트 블록을 나누어 최대 5줄 이상을 넘지 않기

 

 

Plus! Visual Aids

중요하게 식별 할 페이지의 내용은 아이콘과 같은 시각 자료를 제공해 보세요.



Plus! Copyright
늘어지거나 불필요한 텍스트는 과감하게 줄여 가독성을 높여보세요.

 


 

 

 


모바일 기기는 “손”으로 “터치”해 사용하는 스마트 기기로, 손가락은 마우스 포인터에 비해 면적도 넓고 부정확합니다. 그렇기 때문에 모바일 웹에서 텍스트를 입력하는 것은 불편하고, 오타의 가능성이 큽니다. 사용자 입력이 필요한 부분은 텍스트 입력을 최소화하고, 가능한 기본 값(default)을 제공하는 것이 좋습니다. 또한 텍스트를 입력해야 하는 경우에는 정확한 피드백을 위해 예시를 적어주시기 바랍니다.

 


[그림5] Touch Screen, Mobile Device


- How to use?!

사용자들이 손쉽게 해당 서비스를 이용할 수 있도록 정확하게 안내하고, 터치 위주의 프레임 구조를 구현해 보세요.

 


[그림6] 사용자의 오류를 줄이는 입력필드 예시

 

 


 

모바일웹 디자인이 PC 웹사이트와 동일한 아이덴티티를 유지하고 있나요?
사이트의 아이덴티티로 볼 수 있는 요소는 로고, 메뉴컬러, 메인비쥬얼 (또는 기획전 이미지), 유사한 컬러 계열의 버튼 등이 있습니다. 컨셉 컬러와 비쥬얼 이미지를 PC웹과 일관성 있게 꾸며내어 차별화되는 아이덴티티를 구축하여 보시기 바랍니다. 기업 아이덴티티는 브랜딩과 브랜드 마케팅 활동에 더욱 힘을 실어주게 될 것입니다.

 


 

[그림7] 컨셉 컬러와 메인 비쥬얼 이미지를 사용하여 아이덴티티를 유지 

 


모바일 웹으로 우리 회사 홍보하기~

 

홈페이지 디자인 트렌드가 쉽고! 빠르고! 가벼운! 모바일 중심 디자인으로 변화하고 있습니다. 이는 모바일웹 뿐만 아니라, PC웹에서도 직관성이 그만큼 중요해졌기 때문입니다. 이러한 웹에 대한 이해가 없이 홈페이지를 만든다면 다양한 홈페이지 제작 툴로 인해 누구나 만들 수 있지만, 다시 제작해야 하는 상황이 찾아올 수도 있습니다.


modoo! [모두] 홈페이지뿐만 아니라 일반적인 홈페이지 (모바일 & PC)를 만들 때에도 적용할 수 있는 제작 정보를 소개하였습니다. 이번 칼럼을 통해 모바일 홈페이지 제작 포인트를 이해함으로써 광고주 여러분의 홈페이지 품질을 높여보시기 바랍니다.

 

 

 

  안기민 (온라인 비즈니스 스페셜리스트)
kimin.ahn@nsm.co.kr