좋은 콘텐츠도 꿰어야 보배

모바일 친화적인 콘텐츠를 구성하는 방법

잘 생각해보세요. 회사에서 일할 때를 제외하고, 하루 중 핸드폰과 PC 중 무엇을 더 많이 들여다보나요? 두말할 것 없이 핸드폰일 것이라 장담합니다. 저 역시 그러니까요. 이 글 역시 PC로 쓰고 있지만, 이 글을 쓰기 위해 참고한 자료 대부분은 출퇴근 시간 지하철에서, 식당에서 밥 나오기를 기다리면서, 가끔은 화장실에서 양치하는 동안 핸드폰으로 읽고 모았습니다.

그래서 우리는 늘 ‘모바일 최적화(Mobile Friendly)’를 외칩니다. 여러분이 콘텐츠를 기획하는 마케터 거나, 그 콘텐츠를 담는 플랫폼의 UX 디자이너라면 언제나 모바일 최우선을 고려하고 있을 겁니다. 그렇다면 모바일 최적화란 무엇이고, 모바일에 최적화된 콘텐츠는 어떻게 만드는 것일까요?

모바일 최적화?

모바일에 최적화된 콘텐츠와 UX를 설계하려면 모바일 사용자의 특성을 알아볼 필요가 있습니다. 사용자를 아는 것보다 효과적인 왕도는 없으니까요.

국내 스테디셀러 ‘90년생이 온다’에서 저자는 90년 대생들이 ‘F자 형태’의 웹사이트 읽기 패턴을 보인다고 말합니다.

제이콥 닐슨(Jacob Nielsen’은 2006년 자신의 홈페이지에 232명의 사용자에 대한 아이 트래킹 조사를 했다. 그리고 사람들은 빠르게 웹사이트를 훑어보는 데 일정한 F자 형태를 보였다. 필요만 정보만 얻기 위해 머리 부분만 제대로 읽고 중간은 듬성듬성 내려 읽는 것이다.
- 90년생이 온다 중에서

출처: DMI Daily Digest

사실 ‘F자 읽기’ 패턴은  90년대생 뿐만 아니라, 웹사이트를 통해 정보를 얻고 활용하는데 익숙해진 우리 모두에게 해당되는 것 같습니다. 다만 모바일 사용 시에는 이런 읽기 패턴이 조금 달라진다고 합니다. 모바일은 F자 형태로 눈을 움직여야 할 만큼 가로 화면의 폭이 넓지 않기 때문입니다. 화면을 한번 보는 것만으로도 충분히 화면에 비친 모든 내용을 스캔할 수 있으니까요.

출처: NEIL PATEL

위 이미지는 실제로 모바일에서 사용자의 시선이 어떻게 움직였는지를 확인한 결과입니다. 좌측 상단에 시선이 쏠려있지도 않고 F자 형태를 보이지도 않죠. 화면의 중간 부분에 시선이 주로 머물기는 하지만 전반적으로 살펴보는 영역이 PC에 비해 넓습니다. 다시 말해 모바일 사용자가 특히 주의 깊게 보는 영역을 특정하는 것은 의미 없을 수도 있다는 겁니다. 이는 화면에 비치는 모든 영역을 모바일에 맞게 구성해야 한다는 의미기도 합니다.

모바일에서 읽기 편한 콘텐츠 만들기

모든 영역을 최적화해야 하다니, 앞이 캄캄할지도 모릅니다. 하지만 모바일 사용자의 사용 패턴을 이해하고 그걸 바탕으로 세운 몇 가지 규칙만 지킬 수 있다면, 그렇게 어렵지 않습니다.

1. 콘텐츠 그 자체

(1) 짧게 쓴다. 특히 제목.

모바일에서 사용자는 콘텐츠 첫 화면을 보고 이 글을 더 읽기 위해 엄지를 움직일지 말지 결정합니다. 그런데 첫 화면의 절반이 제목이라면 어떨까요? 이탈을 권장하는 꼴입니다.

제목 분석기(Heeadline analyzer) ’CoSchedule’는 55자를 적절한 제목 크기로 추천합니다. 무료 분석 툴도 제공하고 있으니, 제목을 작성할 때 활용해보면 좋을 것 같네요.

[CoSchedule 테스트 결과. 출처: Digital Marketing Institute]

(2) 요약, 또 요약

지하철이나 식당에서 사람들을 한번 훑어보세요. 열에 여덟은 휴대폰 화면을 보고 있을 겁니다. 어딘가의 목적지로 이동하는 혹은 밥을 기다리는 찰나의 시간, 우리는 그들의 시선을 잡아내야 합니다. 비록 흥미로운 제목으로 클릭을 얻어냈다 할지라도, 콘텐츠 첫 화면에서 스크롤을 유도하지 못하면 말짱 도루묵이니까요.

콘텐츠 상단에 있는 요약글은, 사용자에게 우리 글이 읽어봄 직함을 알려주는 훌륭한 예고편입니다. 특히 검색엔진 최적화를 생각한다면 요약은 더 중요해집니다. 요약에는 반드시 해당 콘텐츠의 핵심 단어가 포함되기 마련이고, 내 글을 찾아보는 사람들의 검색 결과에는 그 단어가 포함된 요약이 보일 확률이 높습니다.

제가 썼던 번역글 ‘디자이너가 피해야 할 유저 온보딩 함정' 역시 구글에서 검색 시 요약으로 뜨는 검색 결과가, 글 상단에 제시했던 목차 부분임을 확인할 수 있습니다.

(3) 이미지와 동영상은 필수, 단 제대로 넣을 것

요즘 이미지나 동영상 하나쯤 들어가 있지 않은 콘텐츠가 있을까요. 첫 몇 초에 글을 읽을지를 판단하는 모바일 사용자에게 이미지나 움직이는 영상만큼 확실한 시선 끌기 장치는 없습니다.

아래 이미지는 검색 결과 화면에서 사용자의 시선이 어디에 오래 머무는지를 잘 보여줍니다. 너무 명백하게 이미지에 시선이 간다는 걸 알 수 있죠.

출처: Digital Marketing Institute

이 점이 시사하는 바는 명백합니다. 이미지나 동영상은 콘텐츠에서 가장 시선이 가는 부분이기 때문에, 이 요소를 콘텐츠 어디에 배치하는지가 매우 중요하다는 겁니다. 이미지 요소의 위치로 가장 좋은 건 중요한 주장, 즉 강조하고 싶은 단락 바로 위에 두는 것입니다. 그래야 글의 핵심을 놓치지 않고 볼 테니까요.

2. 콘텐츠 구성 혹은 디자인

모바일에서도 잘 호환되게 반응형 페이지를 개발하는 것이 우선이지만, 이건 콘텐츠 개발자가 할 수 있는 일이 아니죠. 콘텐츠를 쓰고 배포하는 우리가 할 수 있는, 모바일에서 읽기 편한 콘텐츠 구성 만드는 방법은 무엇이 있을까요?

(1) 병렬로 구성하지 말 것

이미지와 텍스트를 함께 사용할 경우라면 두 요소를 다른 그룹으로 나눠서 세로 형태로 배치하는 게 좋습니다. 앞에서 살펴본 것처럼 사람의 시선은 대개 각 문단의 앞쪽, 즉 왼쪽을 먼저 읽는 편이기 때문에 성질이 다른 요소를 한 줄에 나란히 배치할 경우 우측에 있는 내용을 놓칠 가능성이 높습니다.

출처: Digiatl Marketing Institute

대부분의 콘텐츠는 텍스트에 주요 내용이 들어있고, 이미지는 그 내용을 뒷받침하거나 부연 설명하는 경우가 많죠. 그런데 이미지와 텍스트를 나란히 배치하면 이미지에 주목하는 사용자 특성상 텍스트의 주목도가 떨어지게 됩니다. 시선이 이미지에만 쏠리고 정작 중요한 텍스트를 읽지 않게 된다면 그 콘텐츠의 의미 전달은 실패할 확률이 높겠죠?

(2) 적절한 이미지: 크기, 위치, 용량

콘텐츠에 이미지를 삽입할 때 특히 이미지의 세로 사이즈에 주의해주세요. 모바일 화면 넓이 비율을 고려하여 가로 사이즈를 고정하고, 세로 길이는 그에 맞게 조정해야 합니다. 이왕이면 가로 이미지를 쓰는 게 좋고요.

출처: Forbes Web Marketing blog

한 가지 팁을 보태자면, 콘텐츠 최상단에는 이미지를 넣지 않는 것이 좋습니다. 이미지의 사이즈가 클수록 더 그렇죠. 이미지를 최상단에 넣을 경우에는 반드시 첫 화면에 보이는 텍스트의 영역을 더 많게, 적어도 동등하게 해 주세요. 이때 보이는 콘텐츠의 서두가 강렬하거나, 앞으로 이어질 이야기의 요약이라면 더욱 좋겠죠.

또 한 가지 이미지나 동영상을 삽입할 때 주의해야 할 것이 있습니다. 바로 용량입니다. 콘텐츠 자체를 아무리 잘 만들었더라도 해당 페이지의 로딩타임이 너무 길면 사용자는 이탈하고 맙니다. 지난 글에서 살펴본 것처럼, 모바일 방문자의 53%가 특정 페이지 로딩에 3초 이상 걸릴 경우 이탈합니다.

업로드하는 이미지 파일의 확장자 역시 고려 대상입니다. 로고나 텍스트 베이스의 배너에는 PNG 파일이 좋고, 사진 등 비교적 고화질이어야 하는 이미지는 JPG가 좋습니다. 단, 확장자를 고를 때도 반드시 이미지 사이즈를 고려해주세요.

출처: https://imagekit.io/

아래에 이미지 용량을 줄일 수 있는 몇 가지 유용한 사이트를 알려드립니다. 모두 출처는 이곳입니다.

TinyJPG: https://tinyjpg.com

IyDisplay: https://embed.ly/display

Canva: https://www.canva.com

꼼수로 제가 정말 급할 때 쓰는 방법은 바로 파워포인트의 ‘이미지를 그림으로 저장’ 기능입니다. 물론 이미지의 화질이 다소 떨어지는 단점이 있습니다만, 빠르고 쉽게 용량 줄이는데 이만큼 편한 것도 없습니다.

혹은 일단 카카오톡으로 보낸 뒤에 다시 다운로드해도 일정 부분 이미지 용량이 줄어든답니다. 동영상의 경우도 콘텐츠 안에 영상 자체를 업로드하지 말고, 유튜브나 비메오에 일단 영상을 업로드한 후 embed 기능을 쓰는 편이 좋습니다.

2020년을 기준으로 매일 평균 5,760,000여 개의 포스팅이 새롭게 올라온다고 합니다. (그것도 블로그만 봤을 때요.) 보기 좋은 떡이 먹기도 좋다고 하죠. 읽기 좋고, 읽어보고 싶은 콘텐츠를 만드는 것이야 말로 요즘 시대에 콘텐츠 마케터나 UX 디자이너가 갖추어야 할 필수 자질이 아닐까 싶습니다. 아주 조금 더 신경 쓸수록, 더 읽기 좋은 모바일 최적화 콘텐츠를 만들 수 있습니다.