여러 장치에서 최적의 시각적 경험을 보장하는 방법

2022년 8월 22일 업데이트됨

모바일, 태블릿, 데스크톱의 세 가지 장치에서 웹사이트에서 전환율이 가장 높은 페이지를 엽니다.

정말, 해. 기다릴게.

콘텐츠가 예상한 대로 표시됩니까?

많은 마케터들은 그렇지 않다는 것을 알게 될 것입니다. 사용자 경험과 메시징 일관성이 불만족스럽습니다. 때로는 정말 끔찍합니다.

여기 어떻게 왔어? 결국 회사는 콘텐츠를 게시하기 위해 많은 리소스를 투자합니다. 한 번 만들고 모든 곳에 게시하는 COPE 방식을 채택하여 이러한 콘텐츠 리소스를 극대화할 수도 있습니다.

그리고 그것은 실수일 수 있습니다.

콘텐츠 마케터 여러분, 힘내세요. 나는 약간의 조정을 돕기 위해 왔습니다 – COPE-M.

COPE-M이 필요한 이유 이해

기존 COPE 전략을 사용하여 콘텐츠 청크(정의, 이미지, 설명 등)를 한 번 업로드하면 CMS가 해당 청크를 여러 결과물로 가져옵니다(붙여넣기가 아님). 원본 콘텐츠를 업데이트하면 업데이트가 저장소를 통해 파급됩니다.

콘텐츠 전략으로 COPE 콘텐츠는 우아합니다. 효율적입니다. 논리적입니다. 콘텐츠 재사용을 늘리고 원본 콘텐츠에 대한 투자를 상각합니다. 그것은 텍스트, 오디오 및 비디오와 함께 작동합니다.

그러나 COPE는 콘텐츠 게시를 위한 만병 통치약이 아닙니다. 최신 브라우저는 텍스트를 리플로우하지만 이미지는 장치에 맞게 축소됩니다. 데스크탑에서는 멋지게 보이는 이미지가 모바일 장치에서는 인식되지 않을 수 있습니다. (귀하의 청중은 이를 좋아하지 않으며 Google도 마찬가지입니다. 이는 귀하의 콘텐츠 순위에 영향을 줄 수 있습니다.)

COPE는 훌륭한 출발점이지만 이미지 제어에 대한 보다 계층화된 접근이 필요합니다. 저는 그것을 COPE-M이라고 부릅니다. 한 번 만들고 대부분 모든 곳에 게시합니다. COPE-M은 우수한 사용자 경험과 훌륭한 사용자 경험 사이의 다리가 될 수 있습니다.

콘텐츠 게시 전략에 COPE-M 접근 방식을 채택하면 사용자 경험을 개선하고 일관성을 높이며 새로고침된 콘텐츠로 검색 엔진 최적화(SEO)를 개선할 수 있습니다.

이미지가 반드시 COPE와 가장 친한 친구는 아닙니다.

Daniel Jacobson이 이 콘텐츠 재사용 전략에 대한 개념과 기술적 접근 방식을 설명한 2009년 이후로 많은 것이 바뀌었습니다. COPE는 확고한 개념으로 남아 있지만 오늘날 콘텐츠는 여러 장치 유형을 통해 배포됩니다. 청중은 또한 더 많은 형식으로 콘텐츠를 소비합니다.

여러 브라우저에서 볼 수 있는 단일 소스 텍스트는 여전히 작동하지만 이미지의 경우 문제입니다. 텍스트는 모양과 분리될 수 있습니다. 계단식 스타일 시트를 사용하면 원본 소스를 변경하지 않고도 글꼴 크기 및 열 너비와 같은 텍스트 모양을 변경할 수 있습니다.

이미지는 유연하지 않습니다. 렌더링된 그래픽(예: JPEG, PNG 파일)은 모양에서 분리할 수 없습니다. 단일 소스의 하나의 크기가 항상 모든 사람에게 맞는 것은 아닙니다. 데스크탑에서는 괜찮아 보이는 인포그래픽이 iPhone에서는 읽을 수 없을 수도 있습니다. 그것은 보는 사람을 꼬집고, 확대하고, 눈을 가늘게 뜨고, 그것을 보려고 투덜거리게 만듭니다.

다중 소스에 이미지 선택

콘텐츠 관리 시스템이 모든 장치의 모든 이미지에 대해 이상적인 보기 경험을 자동으로 제공할 만큼 스마트해질 때까지 이미지에 대처할 때와 대처하지 않을 때를 고려해야 합니다.

내 원래 요청으로 돌아가기 – 최고의 전환 페이지를 열어 여러 기기에서 어떻게 표시되는지 확인하세요. 귀하의 웹사이트에 있는 다른 중요한 페이지와 이미지로 그렇게 하십시오. 분석 소프트웨어에서 이미 태그를 지정했을 것입니다.

팁: 모바일 장치에서 트래픽이 많이 발생하는 페이지로 페이지 선택 범위를 좁히십시오.

멀티소싱할 이미지를 식별하려면 여러 장치에서 선택한 페이지를 테스트하십시오. 여러 장치와 디자이너, 콘텐츠 전략가 또는 UX 담당자를 확보하세요. 고객이 원하는 방식으로 콘텐츠를 로드합니다. 이미지가 찌그러진 것처럼 보이면 다중 소스가 될 이미지 목록에 추가하십시오.

팁: 이미지가 표시되는지 확인하지 마십시오. 어떻게 표시되는지 자세히 살펴보십시오. 사용자가 모든 이미지를 보기 위해 핀치 및 줌인해야 하는 경우 COPE가 최선의 방법이 아닐 수 있습니다.

웹사이트의 이미지가 어떻게 로드되는지 알아야 하는 콘텐츠 전략, 디자인, 콘텐츠 엔지니어링, 사용자 경험을 포함한 모든 콘텐츠 관련 팀과 결과를 공유하세요.

다중 화면을 위한 디자인

모바일 장치 화면에 맞도록 하이 엔드 및 로우 엔드에서 손상된 이미지를 사용하면 여러 이미지를 업로드하고 각 이미지를 사용할 중단점을 시스템에 알리는 것이 좋습니다.

중단점은 시스템이 하나의 이미지 가져오기를 중지하고 보기 장치에 더 적합한 버전을 가져오는 지점입니다. 사용자가 수직으로 무한히 스크롤할 수 있지만 화면을 넓힐 수는 없기 때문에 중단점은 장치 너비에 의해 결정됩니다.

이 그림은 세 가지 가능한 중단점을 보여줍니다. 휴대 전화의 경우 320픽셀, 태블릿 또는 대형 전화의 경우 720픽셀, 랩톱의 경우 1,024픽셀입니다.

이 예에서 두 딸과 강아지의 원본 이미지는 너비가 800픽셀입니다. 전체 크기로 렌더링된 데스크탑에서 멋지게 보입니다(이미지 왼쪽). 태블릿 크기의 화면에서 원본 이미지의 디테일이 손실되어 영향이 줄어듭니다.

이 이미지가 차트나 인포그래픽이라면 작은 화면에서는 읽기 어려울 수 있습니다. 그렇기 때문에 여러 이미지를 소싱하는 데 더 많은 노력을 기울여야 합니다. 이러한 접근 방식을 "반응형 아트 디렉션"이라고 합니다. 이미지가 사용자에게 표시되는 방식을 좀 더 제어할 수 있는 브라우저 트릭입니다.

다음은 원본 예제에서 작동하는 방법입니다. 이번에는 너비 800, 400, 200픽셀로 크기별로 다른 사진을 찍었습니다. 출판될 때 그들의 얼굴은 각각 거의 같은 크기입니다.

800픽셀 수평 버전에서 한 딸은 강아지와 함께 계단에 앉고 다른 딸은 난간을 따라 서 있고 배경에는 이웃이 보입니다. 400픽셀 세로 버전에서는 두 딸이 계단에 앉고 강아지 옆에 난간이 모두 보입니다. 200픽셀 세로 버전에서는 각각의 딸과 강아지가 각자의 단계를 가지고 있으며 난간 하나만 표시됩니다.

이 접근 방식은 COPE가 아닙니다. COPE-M의 대부분이 아닌 일부입니다. 나는 나 자신을 위해 세 배나 더 많은 일을 만들었습니다. 그렇기 때문에 이 시간 집약적인 작업을 필수 변환 콘텐츠로만 제한해야 합니다.

다중 소스 이미지가 코딩되는 방법 보기

이 문서는 이러한 종류의 코드를 작성하는 방법에 대한 자습서는 아니지만 어떻게 보이는지 확인하는 것이 유용할 수 있습니다.

"picture" 태그 사이에 이미지 너비에 따라 이름이 지정된 3개의 소스 이미지를 지정했습니다.

• jpg
• jpg
• jpg

이제 각 이미지가 중단점에 도달하면 시작됩니다.

• 스마트폰용 499픽셀(최대)
• 태블릿의 경우 799픽셀(최대)
• 데스크탑용 800픽셀(최소)

COPE-M이 귀사의 브랜드에 적합하도록 하십시오.

대부분의 DAM(디지털 자산 관리) 시스템은 크기와 비율이 다른 단일 이미지의 여러 출력을 생성할 수 있습니다. 사진을 다시 촬영할 수 없는 경우 모든 화면 크기에서 최상의 경험을 위해 사진을 자르십시오. 많은 작업이 필요할 수 있으므로 디자이너나 개발자에게 웹사이트의 모든 이미지를 다시 디자인하도록 요청하지 마십시오. 영향에 중점을 둡니다.

SEO가 최우선인 경우 다중 이미지 접근 방식을 구현하기 전에 SEO 전문가에게 문의하십시오. Google의 알고리즘은 데스크톱과 모바일에서 정확히 동일한 경험을 제공하지 않는 웹페이지에 불이익을 줄 수 있습니다. 인간에게 더 나은 경험을 제공하더라도 Google 크롤러는 아직 이를 알지 못할 수 있습니다. 물론 더 나은 이미지 경험으로 인해 더 많은 사람들이 귀하의 페이지에 시간을 할애할 가치가 있다고 생각한다면 Google은 이를 좋아할 것입니다.

당신의 팀은 어떻습니까? 때때로 다양한 화면 크기를 수용하기 위해 중요한 이미지의 여러 버전을 생성합니까? 여러 장치에서 이미지를 테스트하여 무엇을 배웠습니까? 의견에 알려주십시오.

표지 이미지: Joseph Kalinowski/Content Marketing Institute