지금처럼 온라인 존재감을 효과적으로 모바일 환경에 구현하기 위해서는 개발 프로세스에 모범 사례와 기술을 포함하는 것이 그 어느 때보다 중요합니다.
법률, 의료, 외식, 기술 등 어떤 산업 분야에 종사하시든, 고품질 모바일 구현은 귀사의 비즈니스에 필수적입니다. 웹 사이트 이는 모바일 우선 시대에 매우 중요한 단계입니다.
이 글의 저자는 구글의 모바일 우선 시대에 발맞춰 일관성 있는 웹사이트를 구축하기 위해 기술적 SEO, 웹사이트 개발, 모바일 디자인 원칙 등 모바일 개발 모범 사례의 여러 측면에 집중할 것을 권장합니다.
그럼 바로 고품질 모바일 웹사이트를 구축하기 위해 집중해야 할 12가지 모범 사례를 소개합니다.
1. 페이지 상단 내용이 완전히 사라진 것은 아닙니다.
스크롤이 끝없이 이어지는 모바일 환경에서는 화면 상단 영역(above the fold)이 완전히 사라지는 것은 아니라는 점을 기억하는 것이 중요합니다.
모바일 디자인에서는 스크롤해야 할 이유가 있음을 보여주기 위해 최소한 일부 텍스트 콘텐츠는 화면 상단에 표시하는 것이 여전히 바람직합니다.
제공하는 콘텐츠를 보고 싶어하는 심리적 욕구와 기대감이 완전히 사라진 것은 아니므로, 다양한 모바일 기기에서 이러한 점을 고려하여 최적화해야 합니다.
2. 모바일 소비자에게만 항상 집중하지 마세요
모바일과 데스크톱이 융합됨에 따라 이러한 플랫폼 사용자들의 목표와 욕구 또한 융합되고 있습니다.
사용자가 플랫폼에 따라 달성하고자 하는 목표에 집중하면 웹사이트를 통해 고객에게 더욱 효과적으로 다가갈 수 있는 종합적인 접근 방식을 만들 수 있습니다.
사용자가 제품을 구매하든, 제공하는 서비스에 대한 조사를 하든, 사용자 목표와 고객 확보라는 두 가지 요소가 조화롭게 어우러진 비즈니스는 계속될 것입니다.
모바일과 데스크톱의 결합이 계속됨에 따라 이러한 이상과 가치에 특별히 집중하는 것이 덜 필요해질 것입니다. 중요성이 떨어지는 것은 아니지만, 모바일과 데스크톱의 융합이 지속됨에 따라 필요성이 줄어든다는 뜻입니다.
3. 반응형 디자인 기법을 활용하세요
m.example.com과 같은 개별 m-dot 웹사이트 시대는 끝났습니다.
모바일 우선 시대에 이러한 구현 방식을 사용할 만한 타당한 이유는 전혀 없습니다.
구조가 매우 복잡해질 수 있으며, 제대로 최적화되지 않으면 여러 URL로 인해 중복 콘텐츠 문제가 발생할 수 있습니다.
효과적인 전환을 보장하기 위한 다양한 기술이 있지만, 그렇지 않은 경우 m-dot 구현은 새로운 기술의 등장으로 인해 사라져 버렸습니다.
오늘날 이상적인 구현 방식은 반응형 디자인을 사용하는 것입니다. 이러한 디자인은 미디어 쿼리라는 것을 사용하여 디자인이 지원할 디스플레이 해상도를 정의합니다.
각 해상도는 디자인에서 "브레이크 포인트"라고 불리는 지점, 즉 반응형 디자인이 한 해상도에서 다음 해상도로 전환되는 지점입니다.
이러한 구조를 사용하는 이점은 m-dot 구현에서 발생할 수 있는 중복 콘텐츠 문제를 피할 수 있다는 것입니다.
또한, 모바일 구현은 최신 기술을 활용할 것입니다.
4. 사이트 속도 향상을 위해 '이미지 도배' 대신 '코드'를 활용하세요
가로 2픽셀, 세로 1200픽셀 크기의 반복 배경으로 꼭 그 두 가지 색상의 배경을 사용해야 하나요?
그렇게 할 수 없다면, 대신 코딩으로 처리할 수 있으니 코딩하세요.
아주 작은 변경 사항이라도 사이트 속도에 큰 영향을 미치지는 않겠지만, 최적화 작업이 완료될수록 효과는 누적될 수 있습니다.
다음번에 사이트 진단을 하거나 웹사이트를 새로 만들 때는 "이 이미지가 정말 필요한가? 아니면 코드로 대체할 수 있을까?"라고 생각해 보세요.
이미지가 정말 필요하지 않다면, 해당 객체를 코딩하는 것이 사이트 속도를 기하급수적으로 향상시키는 데 도움이 될 수 있습니다. 특히 그래픽이 과도하게 사용되는 사이트 디자인에서 더욱 효과적입니다.
5. 모바일에 맞게 워드프레스를 맞춤 설정하세요
워드프레스에는 다양한 플러그인이 있습니다.
심지어 일부 제품은 모바일 호환성을 높이는 기능까지 제공합니다.
이러한 목적에 가장 유용한 플러그인은 Duda Mobile, W3 Total Cache, 그리고 HTML 및 CSS를 최소화하는 플러그인입니다.
6. 데스크톱과 모바일에서 모든 콘텐츠가 동일한지 확인하세요
이 모범 사례의 핵심 아이디어는 중복 콘텐츠와 클로킹 혐의를 피하는 것입니다.
안전을 위해 데스크톱 버전과 모바일 버전의 모든 콘텐츠가 동일한지 항상 확인하세요.
이를 실현하기 위한 가장 효과적인 기술 중 하나는 반응형 디자인입니다.
반응형 디자인이란, 잘 모르시는 분들을 위해 설명드리자면, 다양한 플랫폼과 기기 간에 디자인이 자동으로 전환되도록 "미디어 쿼리"를 사용하는 스타일시트를 만드는 것을 말합니다.
속도를 최대한 끌어올리고 디자인을 간결하게 만들고 싶다면 서버 측 요청을 줄이기 위해 CSS 스프라이트를 사용하는 것을 고려해 보세요.
7. '상향식' 개발 접근 방식을 사용하십시오.
"하향식" 개발 접근 방식이란 설계의 시작부터 끝까지 각 결정이 가져올 수 있는 모든 잠재적 결과를 고려하는 것을 의미합니다.
데스크톱 우선 개발 방식이 아닌, 모바일 우선 개발을 하고 나중에 모바일 디자인을 추가하는 방식입니다. 이 개발 접근법은 최종 디자인에 문제를 야기하지 않기 때문에 이상적입니다.
예를 들어 데스크톱 웹사이트를 제작한다고 가정해 보겠습니다. 제작 과정의 약 4분의 3쯤 진행되었을 때, 그 위에 모바일 웹사이트를 추가하고 싶다는 생각이 들었습니다.
목업을 만들었습니다. 하지만 목업을 코딩하고 전환 과정을 거치다 보면 여기저기서 버그를 발견하게 됩니다. 또 다른 버그도 발견하게 되죠. 이는 하향식 접근 방식이 효과적이지 않고 범위 확장을 초래하기 때문입니다.
이는 예상치 못한 문제가 마지막 순간에 발생하여 예기치 않은 버그를 유발하고 프로젝트 초기 계획 단계에서 고려되지 않았던 작업 시간 증가로 이어지는 현상입니다.
사실, 모바일 반응형 디자인에 대한 상향식 접근 방식을 처음부터 고려했다면, 이러한 버그와 해결해야 할 문제들이 나중에 불거지지 않았을 것이며, 결국 이러한 골치 아픈 문제가 발생하지 않았을 것입니다.
8. 제품 판매를 위해 거슬리는 중간 광고를 사용하지 마세요.
네, 알고 있습니다. 당신의 제품은 이 세상에 존재하는 가장 훌륭하고 놀라운 제품입니다. 그래서 저희가 구매하기 전에 당신의 웹사이트를 방문하고 정보를 찾아보는 거겠죠.
하지만, 저희 사이트 이용을 방해하고 판매를 독촉하는 성가신 광고는 필요 없습니다.
가능하면 방해가 되는 전면 광고는 최소화하고, 광고는 하단이나 측면에 배치하여 최소한 광고를 클릭하여 제거할 수 있는 옵션을 제공하십시오.
구글은 침입적인 인터스티셜 광고에 대해 불이익을 준다는 점을 유의해야 합니다. 이 문제에 대한 구글의 개발자 가이드와 웹마스터 가이드라인, 그리고 관련 블로그 게시물을 읽어보는 것이 좋습니다.
9. 구현상의 약점을 파악하고 오류를 점검하십시오.
약점이 항상 사이트 속도 저하를 의미하는 것은 아닙니다.
이는 서로 다른 디스플레이 및 플랫폼(예: 윈도우 폰과 아이폰) 간의 구현 문제를 의미할 수 있습니다.
저는 이런 목적으로 BrowserStack.com을 사용하는 것을 좋아합니다.
모바일 구현의 최종 단계에 이르렀는데, 개발 과정에서 스스로 발견했어야 할 문제점을 고객이 발견하는 것보다 더 끔찍한 일은 없습니다!
10. 플래시 비디오를 사용하지 마세요
요즘 시대에는 당연한 관행이어야 하는데, 아직도 이런 방식을 사용하는 사이트들이 보이네요.
어도비가 매크로미디어를 인수하고 플래시 비디오 서비스를 중단하면서 플래시 비디오는 순식간에 역사의 뒤안길로 사라졌고, HTML 5 비디오가 그 자리를 차지했습니다.
웹사이트에서 최소한 HTML 5 비디오를 사용하지 않는다면 사용자들이 불편을 겪을 수 있습니다.
11. Schema.org 구조화된 데이터를 사용하세요
Schema.org 구조화 데이터는 검색 엔진이 인식해야 하는 특별한 구조화된 정보를 포함하는 사이트 페이지를 식별하는 데 중요할 뿐만 아니라, 모바일 색인이 본격적으로 도입되면 Schema에 대한 의존도가 더욱 높아질 것으로 예상됩니다.
이는 정보를 간결하고 쉽게 이해할 수 있는 방법이며, 이를 모바일 검색 결과의 풍부한 스니펫으로 변환할 수 있습니다.
하지만 어떤 경우든, 필자의 의견으로는 스키마 구조화 데이터는 데스크톱 환경에서도 사용하는 것이 좋습니다. 스키마 구조화 데이터는 타겟 키워드를 기반으로 리치 스니펫 결과에 노출되는 데 도움이 되기 때문입니다. 이를 올바르게 구현하면 웹사이트의 가시성을 향상시킬 수 있습니다.
12. 자바스크립트, CSS 또는 이미지와 같은 지원 스크립트나 요소들을 차단하지 마세요.
데스크톱이든 모바일이든 어떤 플랫폼용 사이트를 개발할 때든 이는 상식이어야 하지만, 여전히 이를 간과하는 사람들이 있습니다.
모바일 디자인에 필요한 지원 스크립트가 차단되지 않도록 하는 것이 중요합니다. 스크립트가 차단되면 나중에 모바일에서 소프트 404 오류가 발생할 수 있으며, 데스크톱에서도 404 오류가 발생할 수 있습니다.
하지만 구글이 이러한 파일을 크롤링하지 못하도록 차단하면 구글은 해당 파일을 크롤링하여 웹사이트가 제대로 작동하는지 확인할 수 없습니다.
이러한 작업을 수행하지 못하면 웹사이트를 완전히 이해하지 못하여 검색 순위가 낮아질 수 있습니다.
모바일 우선 시대가 도래했습니다. 이제 모바일 우선 전략을 구현해야 할 필요성이 절정에 달했습니다.
구글의 모바일 우선 색인 도입으로 인해, 크로스 플랫폼, 크로스 디바이스, 크로스 호환성을 갖춘 웹사이트를 구현하는 것이 이제 매우 중요한 과제가 되었습니다.
즉, 지연될수록 그 영향은 더욱 커진다는 뜻입니다. 지원 모바일 구현뿐 아니라, 지원 올바른 모바일 구현에는 여러 가지 측면에서 비용이 많이 들 것입니다.
단순한 순위가 아닙니다.
아직 모바일로 전환하지 않으셨다면, 왜 그러지 않으셨나요?
_____
by 브라이언 하니쉬
