Offcanvas

How To / SNS / 검색|인터넷 / 디지털 디바이스 / 마케팅 / 모바일 / 소비자IT / 애플리케이션 / 오픈소스

모바일에 최적화된 웹 사이트, 검색엔진에 친화적일까?

2019.08.20 Techworld Staff  |  Techworld


5. 반응형 프레임워크 사용

ⓒGetty Images Bank
 
반응형 프레임워크는 서로 다른 화면 크기에 맞게 웹 사이트 요소를 격자 형태로 배치한다. 이들은 웹 개발에 대한 일반적인 접근 방식을 제공하여 사용자가 사이트에 접근하는 방식과 관계없이 유사한 환경을 만들 수 있다. 고객은 여러 기기에서 더 나은 사용자 환경을 경험할 수 있으며 웹 사이트를 통합하여 별도의 모바일 URL이 필요하지 않다. 오픈소스며 문서화가 잘되어 있고 사용하기 쉬운 부스트랩(Bootstrap) 같은 프레임워크를 사용해 보라.

6. 한 손만으로 탐색할 수 있도록 불필요한 요소 제거
ⓒGetty Images Bank
 
손가락이나 엄지손가락을 생각하라. 사용자는 자신의 '전화번호' 사이트를 검색할 수 있어야 한다. 확대/축소하기 위해 손가락을 움직여야 하는 경우 콘텐츠가 해당 기기에 최적화되어 있지 않을 수 있다. '뚱뚱한 손가락' 사용자가 사용하기에 불편하지 않을 만큼 버튼이 충분히 큰지 확인하라. CSS 미디어 쿼리를 사용하여 화면 크기를 조정하지 마라.

7. 깔끔함 유지
ⓒGetty Images Bank
 
모바일 친화적인 디자인은 군더더기 없이 직관적이다. 디자인은 깔끔하고 단순하다. 부가기능은 없다. 빠른 로딩을 위해 이미지를 줄이고 콘텐츠를 없앤다. 당신의 사이트는 고객이 원하는 것을 몇 초 안에 제공해야 한다. 반응형 웹 사이트라면 더 큰 기기에서 익숙한 모양과 느낌을 더한 콘텐츠와 결합할 수 있다.

8. 자바스크립트
자바스크립트를 처리할 때 다른 브라우저와 다른 기기, 심지어 동일한 스마트폰의 다른 모델조차 다르게 동작한다. 아마 자바스크립트 없이는 안되는 상황이라면, 이를 사용하는 방식으로 통하지 마라. 제이쿼리 모바일(jQuery Mobile)과 같은 부피가 큰 자바스크립트 라이브러리를 독립형 자바스크립트로 바꾸기를 고려하라.

9. 양식 단순화
양식이 모바일용으로 설계되어 있는지 확인하라. 최소량의 정보를 요청하라. 꼭 필요한 것을 요청하라. 가능하면 GPS 정보를 통해 양식을 미리 채운다. 어떤 정보는 전혀 없는 것보다 낫다는 것을 기억하라.

10. 지리적 위치 고려
기업은 위치 정보를 사용해 길 찾기를 제공하고, 방문자가 가장 가까운 매장 위치에서 찾는 상품이 있는지 확인하게 해주며, 타깃 마케팅 프로모션을 제공하고, 현지 통화로 온라인 쇼핑객에게 가격을 제시하며, 방문자가 소셜 커뮤니티에 연결하도록 해준다. 위치 정보의 잠재력을 무시하지 마라.

11. 테스트, 테스트, 테스트
ⓒGetty Images Bank

다른 기기, 다른 플랫폼, 다른 운영체제에서도 콘텐츠를 제대로 볼 수 있는지 테스트하라. 시중에는 수십 가지 모바일 테스트 툴이 있다. 그러므로 임직원이 자신의 기기에서 베타 사이트를 테스트하도록 하라. 직원 자신의 기기와 네트워크 연결을 사용하면 그동안 해왔던 테스트에서 발견하지 못했던 문제를 찾게 될 수 있다. ciokr@idg.co.kr
CIO Korea 뉴스레터 및 IT 트랜드 보고서 무료 구독하기
Sponsored
추천 테크라이브러리

회사명:한국IDG 제호: CIO Korea 주소 : 서울시 중구 세종대로 23, 4층 우)04512
등록번호 : 서울 아01641 등록발행일자 : 2011년 05월 27일

발행인 : 박형미 편집인 : 천신응 청소년보호책임자 : 한정규
사업자 등록번호 : 214-87-22467 Tel : 02-558-6950

Copyright © 2024 International Data Group. All rights reserved.