웹 스토리 만들기 권장사항

독자의 지속적인 참여를 유도하려면 웹 스토리 만들기 권장사항을 따르세요. 먼저 중요한 작업에 집중하는 것이 좋습니다. 시간이 된다면 추천 권장사항도 따르세요.

스토리텔링

중요 스토리텔링 권장사항
동영상을 먼저 활용합니다. 동영상은 텍스트나 이미지보다 사용자의 관심을 끌기 좋습니다. 최대한 많은 동영상을 사용하면서 이미지와 텍스트로 보완합니다.

스토리텔링 권장사항 더보기

추천 스토리텔링 권장사항
관점을 드러냅니다. 사실 이상을 파고들고 의견을 공유합니다. 내 스토리의 주인공이 되세요. 공감할 수 있게 만드세요.
이야기를 구성합니다. 이야기에 한 페이지에서 다른 페이지로 이어지는 긴장감을 만들어 보세요. 맥락과 설명을 제공하여 사용자가 여정에 참여하도록 유도하고 끝까지 함께한 독자에게 보상을 제공합니다.

디자인

중요 디자인 권장사항
글자 수를 줄입니다. 텍스트로 가득한 페이지가 여러 개 포함되지 않도록 합니다. 페이지당 약 280자(트윗 길이)로 텍스트를 줄이는 것이 좋습니다.
텍스트를 가리지 않습니다. 텍스트가 페이지의 다른 콘텐츠로 가려지지 않는지 확인합니다. 번인 텍스트를 피합니다. 번인 텍스트를 사용하지 않으면 다양한 기기 크기에 맞게 크기가 조절될 때 텍스트가 가려지는 것을 방지할 수 있습니다.
텍스트를 경계 내에 유지합니다. 웹 스토리의 모든 텍스트가 독자에게 표시되는지 확인합니다. 번인 텍스트를 피합니다. 번인 텍스트를 사용하지 않으면 다양한 기기 크기에 맞게 크기가 조절될 때 텍스트가 경계를 벗어나는 것을 방지할 수 있습니다.
신중하게 애니메이션을 사용합니다. 애니메이션으로 스토리에 생동감을 불어넣으세요. 피로를 일으킬 수 있는 산만하거나 반복적인 애니메이션은 피합니다.

디자인 권장사항 더보기

추천 디자인 권장사항
웹 스토리 전용 클릭 유도문안을 사용합니다. 원래 Instagram, Snapchat 또는 YouTube와 같은 소셜 플랫폼용으로 만든 스토리를 다시 만들 때는 특정 플랫폼과 관련된 독자 클릭 유도문안을 삭제해야 합니다. 사용자가 웹 스토리에서 제안하는 작업을 모두 실행할 수 있는지 확인합니다.
풀 블리드 동영상 및 이미지를 사용합니다. 스토리에 풀 블리드 애셋을 포함하여 독자에게 몰입도 높은 경험을 제공합니다.
해상도가 낮거나 왜곡된 이미지 및 동영상을 사용하지 않습니다. 고화질 이미지를 사용하고 세로 모드에 맞춰 이미지 크기를 조절할 때 주의하세요.
표지에 로고를 추가합니다. 브랜드를 대표하는 고해상도 로고를 포함하세요.
동영상 길이를 줄입니다. 페이지당 15초 미만 또는 최대 60초 미만의 동영상을 사용하는 것이 좋습니다.
오디오를 포함합니다. 볼륨이 균형 잡혀 있으며 길이가 5초 이상인 고품질 오디오 클립을 사용하고 음성을 알아들을 수 있는지 확인합니다.
동영상 전용 스토리의 자동 진행을 고려합니다. 동영상 기반 웹 스토리의 자동 진행 환경은 편안한 환경에 적합할 수 있습니다.

검색엔진 최적화

중요 검색엔진 최적화 권장사항
고품질 콘텐츠를 제공합니다. 다른 웹페이지처럼 독자에게 유용하고 흥미로운 고품질 콘텐츠를 제공하는 것이 가장 중요합니다. 전체 이야기를 포함하고 스토리텔링 권장사항을 준수하여 독자의 지속적인 참여를 유도합니다.
제목을 짧게 유지합니다. 제목은 90자(영문 기준) 미만이어야 합니다. 70자(영문 기준) 미만의 구체적인 제목을 사용하는 것이 좋습니다.
Google 검색에서 내 스토리를 찾을 수 있는지 확인합니다. 스토리에 noindex 속성을 포함하지 마세요. 이 속성으로 인해 Google이 페이지의 색인을 생성하지 못하므로 페이지가 Google에 표시되지 않습니다. 또한 웹 스토리를 사이트맵에 추가하세요. Search Console의 색인 생성 범위 보고서 및 사이트맵 보고서를 사용하여 Google이 웹 스토리를 찾을 수 있는지 확인할 수 있습니다.
스토리를 자체 표준으로 만듭니다. 모든 웹 스토리는 표준이어야 합니다. 각 웹 스토리에 자체 link rel="canonical"이 있는지 확인하세요. 예: <link rel="canonical" href="https://www.example.com/url/to/webstory.html">
메타데이터를 첨부합니다.

웹 스토리가 AMP 스토리 메타데이터 가이드라인을 준수하는지 확인합니다. 웹페이지에 일반적으로 포함하는 다음과 같은 마크업을 포함합니다.

검색엔진 최적화 권장사항 더보기

추천 검색엔진 최적화 권장사항
구조화된 데이터를 포함합니다. Google 검색에서 웹 스토리의 구조와 콘텐츠를 더 쉽게 파악할 수 있도록 웹 스토리에 구조화된 데이터를 포함하는 것이 좋습니다.
이미지에 대체 텍스트를 포함합니다.이미지에 대체 텍스트를 포함하여 스토리의 검색 가능성을 개선하는 것이 좋습니다.
스토리를 웹사이트에 통합합니다.

해당하는 경우 홈페이지 또는 카테고리 페이지에서 연결하는 등 웹 스토리를 웹사이트에 통합하는 것이 좋습니다. 예를 들어 웹 스토리가 여행 목적지에 관한 내용이고 모든 여행 기사가 나열된 페이지가 있다면 카테고리 페이지에도 웹 스토리를 연결합니다. www.example.com/stories 같은 추가적인 특수 방문 페이지(홈페이지와 같은 주요 페이지에서 연결됨)가 적절할 수도 있습니다.

AMP 스토리 페이지 첨부파일을 사용합니다. AMP 스토리 페이지 첨부파일을 사용하여 웹 스토리와 함께 추가 정보를 표시할 수 있습니다. 웹 스토리에 표시되는 콘텐츠의 추가 세부정보, 심층 분석 또는 향후 여정을 제공하는 데 유용할 수 있습니다.
동영상에 자막을 포함합니다. 독자가 스토리를 더 쉽게 파악할 수 있도록 동영상에 자막을 추가하세요. 다른 콘텐츠와 겹치거나 화면 밖으로 나오지 않도록 동영상에 번인된 자막을 사용하지 않습니다.
동영상 전용 스토리를 최적화합니다.

시맨틱 HTML을 사용하여 웹 스토리를 빌드하는 것이 좋습니다. 그러나 일부 웹 스토리 편집기 도구는 모든 텍스트가 동영상에 번인되는 동영상 파일로 각 슬라이드의 형식을 지정하는 스토리를 대신 내보낼 수도 있습니다. 이 경우 동영상 내에 표시된 정확한 텍스트를 amp-video 요소의 title 속성으로 추가하는 것이 좋습니다. 웹 스토리에서 시맨틱 마크업을 사용할 수 없는 경우에만 이 작업을 실행해야 합니다.

가로 모드 디스플레이 지원을 추가합니다. 웹 스토리가 데스크톱 Google 검색결과에 표시되도록 하려면 가로 모드 디스플레이 지원을 추가하세요.

기술

중요 기술 권장사항
스토리를 유효하게 만듭니다. 웹 스토리는 유효한 AMP 페이지여야 합니다. AMP가 유효하지 않게 되는 문제를 방지하려면 AMP 유효성 검사 도구를 사용하여 스토리를 테스트하고 감지된 오류를 해결하세요.
포스터 이미지에 텍스트를 넣지 않습니다. 번인 텍스트가 포함되어 있는 이미지는 사용하지 마세요. 사용자가 Google 검색결과에서 스토리를 미리 볼 때 스토리 제목이 가려질 수 있습니다. 사용자가 제목을 명확하게 읽을 수 없으면 계속 읽을 가능성이 낮습니다.
적절한 포스터 이미지 크기 및 가로세로 비율을 사용합니다. <amp-story> poster-portrait-src 속성에 연결된 이미지가 640 x 853px 이상이고 가로세로 비율이 3:4인지 확인합니다.
로고에 적합한 가로세로 비율을 사용합니다. <amp-story> publisher-logo-src 속성에 연결된 로고 이미지가 96 x 96px 이상이고 가로세로 비율이 1:1인지 확인합니다.

기술 권장사항 더보기

추천 기술 권장사항
og:image를 포함합니다. <meta> 태그에 og:image를 포함하여 스토리의 검색 가능성을 개선하는 것이 좋습니다.

기타 리소스

이전
Google의 웹 스토리 사용 설정하기
다음
웹 스토리 콘텐츠 정책