콘텐츠로 건너뛰기
Home » 구글 웹스토리: 인스타 스토리를 웹에서도!

구글 웹스토리: 인스타 스토리를 웹에서도!

인기있는 콘텐츠 형식인 인스타그램 스토리와 유사한 형식의 ‘구글 웹스토리’를 이용하면 더 많고 다양한 디지털 채널에서 노출될 수 있습니다. 해당 포스트에서는 구글 웹스토리와 관련된 내용들에 대해서 다루도록 하겠습니다.

Table of Contents

 1. 인기있는 콘텐츠 형식: 인스타 스토리

 2. 구글 웹스토리란?

 3. 구글 웹스토리 예시

 4. 구글 웹스토리 만들기

 5. 구글 웹스토리 권장사항

인기있는 콘텐츠 형식: 인스타 스토리

Hootsuite에 따르면 전세계 10억명 이상의 사람이 매달 인스타그램을 이용한다고 합니다. 현재 전세계 인구수가 약 76억명인 것을 생각해봤을 때 정말 많은 사람들이 인스타그램이라는 소셜미디어 채널을 이용하고 있는 것인데요, 최근 인스타그램 내에서도 각광받는 기능이 있습니다. 바로 인스타그램 내의 ‘스토리’라는 기능입니다. 인스타그램 스토리와 관련된 통계들을 통해서 인스타 스토리의 마케팅적 중요성에서 대해 한 번 알아봅시다.

2021년 인스타그램 스토리 관련 통계

  • 전세계 약 5억명의 사람들이 매일 인스타그램 스토리를 이용합니다.
  • 58%의 사람들이 스토리에서 브랜드나 제품을 본 이후 더 많은 관심을 갖게 되었다고 말합니다.
  • 50%의 사람들이 스토리에서 제품 또는 서비스를 본 후 구매하기 위해 웹사이트를 방문했습니다.
  • 브랜드 스토리의 완료율(끝까지 본 비율)은 86%입니다.

통계에서 알 수 있듯이 인스타그램 스토리는 수많은 사람들이 사용하는 기능이며, 실제로 많은 브랜드들이 인스타그램 스토리를 활용한 마케팅을 진행하고 있습니다. 하지만 딱 하나 아쉬운 점이 있다면 인스타그램 스토리는 외부로 공유하기 어렵다는 점입니다. 링크를 통해 카톡이나 블로그 등으로 공유 자체는 할 수 있지만, 공유된 링크를 클릭하면 아래의 이미지와 같이 로그인 화면이 나타납니다. 즉, 인스타그램 사용자가 아니면 외부에서 인스타그램 스토리를 볼 수 없다는 것입니다.

인스타그램 스토리 링크를 외부 웹사이트 혹은 어플에서 클릭했을 때 나타나는 로그인 화면
인스타그램 스토리 링크를 외부 웹사이트 혹은 어플에서 클릭했을 때 나타나는 로그인 화면

하지만 만약에 이런 스토리 콘텐츠를 인스타그램을 사용하지 않는 사람들도 자유롭게 외부 웹사이트나 메세지앱에서 볼 수 있고 검색엔진 결과페이지에서도 노출 가능하다고 하면 어떨까요? 마케터 입장에서 매우 좋은 일이겠죠? 실제로 ‘구글 웹스토리’를 활용하면 위에서 말씀드린 상황이 현실이 됩니다. 이제 앞으로 구글 웹스토리는 무엇이며, 어떻게 활용할 수 있을지에 대해서 알아보겠습니다.

구글 웹스토리란?

구글 웹스토리는 텍스트, 비디오, 오디오, 이미지, 애니메이션 등의 모든 시각적 콘텐츠를 조합하여 하나의 완결성을 갖는 이야기를 만드는 웹 기반 버전의 인기 ‘스토리’ 형식입니다. 콘텐츠의 형식은 인스타그램의 스토리와 동일하지만 구글 웹스토리는 고유한 URL이 존재하는 HTML 페이지이며, 인스타 스토리와 달리 검색사용자의 검색어에 대응해서 구글 검색, 구글 이미지, 구글 디스커버에 노출이 가능합니다. (현재 국내는 구글 검색의 단일 검색결과, 구글 이미지에서만 노출됩니다.)

웹스토리의 가장 큰 장점은 자사 웹사이트 서버에 호스팅이 가능한 일반 웹페이지라는 것입니다. 인스타 스토리와 달리 검색엔진 최적화(SEO) 작업이 가능하기 때문에 상위노출을 달성할 수 있고, 또한 스토리 내에 관련 링크, CTA 등을 포함시킬 수 있어서 많은 트래픽을 자사 웹사이트 혹은 소셜미디어 채널로 유도할 수 있습니다. 더 자세한 검색엔진 최적화 방법은 이따가 아래에서 다루도록 하겠습니다.

해당 이미지는 ‘북엔드’라고 칭해지는 스토리의 마지막 화면입니다. 여기에는 관련 링크, 공유 옵션, 클릭 유도 문안 링크 등이 포함됩니다. (출처: amp 웹스토리 공식문서)

구글 웹스토리 예시

여태까지 구글 웹스토리가 무엇인지 간략하게 알아봤는데요, 아직 정확히 무엇인지 감이 안오시는 분들도 분명 많이 존재하실 것입니다. 따라서, 실제 웹스토리의 예시를 통해서 조금 더 자세히 웹스토리에 대해서 알아보도록 하겠습니다.

텔레그래프의 ‘How to spend a week in Singapore‘ 웹스토리

해당 웹스토리는 영국의 언론사인 텔레그래프와 싱가포르 관광청이 싱가포르 관광을 위해 만든 네이티브 광고 형태의 웹스토리입니다. 여행 사진 작가 Anna Mellor가 일주일 동안 싱가포르에서 여행하면서 발견한 음악, 음식, 사진 등을 각 슬라이드별로 소개하고 있습니다. 여행 관련 콘텐츠 특성상 빠른 시간 내에 사람들을 시각적으로 사로잡아야 하기 때문에, 해당 웹스토리는 많은 양의 텍스트와 이미지로 된 애니메이션 대신 짧게 반복되는 GIF를 적극적으로 활용했습니다. 이를 통해 생동감있고 시각적으로 매력적인 싱가포르의 모습을 사람들에게 효과적으로 전달하는데 성공했습니다.

텔레그래프의 소셜미디어 채널 및 관련페이지 링크들이 포함되어 있는 북엔드
텔레그래프의 소셜미디어 채널 및 관련페이지 링크들이 포함되어 있는 북엔드

웹스토리가 끝나면 ‘북엔드’가 나타나며 텔레그래프의 소셜미디어 채널 및 싱가포르 콘텐츠 관련페이지로 향하는 링크들이 나타납니다. 이를 통해 사용자들로 하여금 사이트에서 더 많은 스폰서 관련 콘텐츠를 탐색할 수 있도록 합니다. 또한 웹스토리를 반응형으로 제작하여 사용자들의 기기별 화면 크기에 맞는 사이즈로 웹스토리를 제공하고 있습니다.

내셔널 지오그래픽의 ‘Discover Europe’s hidden villages‘ 웹스토리

해당 웹스토리는 내셔널지오그래픽가 제작한 웹스토리로서, 유럽의 작은 마을들을 소개하고 있습니다. 내셔널지오그래픽의 웹스토리는 텔레그래프의 웹스토리와 달리 콘텐츠가 동적이지 않는 대신 각 유럽의 마을을 대표하는 퀄리티 높은 이미지와 자세한 설명을 반복해서 보여주는 비교적 단순한 구성을 갖고 있습니다. 하지만 SEO적 관점으로 봤을 땐 텍스트의 양이 많고 자세해서 검색엔진이 해당 웹스토리를 이해하는데에는 오히려 텔레그래프의 웹스토리보다 유리합니다.

웹스토리의 마지막에 내셔널 지오그래픽 구독을 유도하는 CTA를 배치하였습니다.
CTA가 배치된 웹스토리의 마지막 슬라이드

내셔널지오그래픽의 웹스토리 역시 반응형으로 제작되었으며, 마지막 슬라이드에는 내셔널지오그래픽 구독 CTA 버튼을 배치하여 트래픽이 웹스토리에서 이탈하지 않고 자사 웹사이트로 이어질 수 있게 유도하고 있습니다.

구글 웹스토리 만들기

이제 웹스토리가 무엇인지에 대해서 알아보고 실제 예시까지 살펴봤으니 직접 웹스토리를 만들어봐야겠죠? 구글 웹스토리를 만드는 방법에는 크게 3가지 방법이 존재합니다. 하나씩 차근차근 알아보도록 하겠습니다.

자체 개발

웹스토리를 만드는 방법 중 가장 대표적인 방법은 직접 페이지를 개발하는 것입니다. 웹스토리 개발을 위한 공식문서를 참조해서 직접 웹스토리 페이지를 만들 수 있으며, 원하는 기능을 포함시킬 수 있습니다. 예를 들면 아래에 언급할 다른 방법들을 활용할 경우에는 모바일 기기 최적화된 웹스토리만 만들 수 있지만, 직접 개발을 할 경우에는 반응형으로 제작할 수 있다는 장점이 있습니다.

웹스토리 자체 개발 예시

하지만 당연하게도 회사 내에 개발인력이 없을 경우에는 택하기 어려운 방법이며, 처음부터 새로 제작해야하기 때문에 아래 말씀드릴 두가지 다른 방법에 비해 제작에 필요한 시간과 인력이 많이 든다는 단점이 존재합니다.

워드프레스 웹스토리 플러그인

만약에 자사 웹사이트가 워드프레스를 통해서 구축되었다면, 워드프레스의 공식 웹스토리 플러그인이 가장 좋은 방법이 될 수 있을 것입니다. 플러그인을 설치하면 워드프레스 사용자가 쉽게 에디터를 통해서 개발인력의 도움없이 원하는 웹스토리를 만들 수 있습니다. 웹스토리를 만드는데 필요한 이미지, 오디오, 비디오, 텍스트 등 모든 시각적 효과를 제공하며, 타이틀 태그 혹은 메타 디스크립션과 같이 검색엔진최적화 작업에 필요한 메타데이터 수정 또한 가능하다는 장점이 있습니다.

워드프레스 웹스토리 플러그인 예시 화면
워드프레스 웹스토리 플러그인 예시

또한 8가지의 웹스토리 디자인 템플릿을 제공하기 때문에 디자인적으로도 도움을 받을 수 있습니다. 아무래도 시각적인 부분이 강조된 웹스토리 특성상 웹디자인 인력이 부족하다면 제작시 디자인 측면에서 어려움을 겪을 수 있습니다. 워드프레스가 제공하는 기본 템플릿을 응용해서 자신만의 웹스토리를 제작할 수 있습니다.

워드프레스에서 제공하는 8가지 기존 디자인 템플릿
워드프레스에서 제공하는 8가지 기존 디자인 템플릿

웹스토리 3자 툴

만약에 자체 개발도 어렵고 워드프레스로 구축된 웹사이트를 사용하지도 않는다면 어떡해야 할까요? 그렇다면 웹스토리 제작을 도와주는 3자 툴을 활용하면 됩니다. 3자 툴은 워드프레스 플러그인과 마찬가지로 마케터들이 개발 지식없이도 웹스토리를 제작할 수 있으며, 시각적인 효과와 메타데이터 수정 기능이 존재합니다.

구글이 추천하는 2가지의 웹스토리 3자 툴은 makestoriesnewsroom ai이며 둘 다 무료입니다. 해당 툴에서 제작된 웹스토리는 모두 자사 웹사이트 서버에 업로드가 가능하며 구글 애널리틱스와 같은 분석툴의 추적코드 삽입 또한 지원합니다.

구글 웹스토리 권장사항

웹스토리를 만들기 위해서 주의해야하는 사항들은 무엇일까요? 구글에서는 총 4가지 분야(스토리텔링, 디자인, SEO, 기술)에서의 중요 권장사항과 추천 권장사항을 밝히고 있습니다. 스토리텔링이나 디자인 권장사항의 경우 이해하는데 큰 어려움이 없지만, SEO나 기술 분야의 권장사항은 초심자가 이해하기 어려운 용어들이 포함되어 있습니다. 하나씩 클릭해서 내용들을 확인하신 후 궁금하신 내용은 댓글에 남겨주세요. 제가 최대한 자세하게 설명드리도록 하겠습니다.

스토리텔링 권장사항

중요 스토리텔링 권장사항
  • 동영상을 먼저 활용합니다: 동영상은 텍스트나 이미지보다 사용자의 관심을 끌기 좋습니다. 최대한 많은 동영상을 사용하면서 이미지와 텍스트로 보완합니다.
추천 스토리텔링 권장사항
  • 관점을 드러냅니다: 사실 이상을 파고들고 의견을 공유합니다. 내 스토리의 주인공이 되세요. 공감할 수 있게 만드세요.
  • 이야기를 구성합니다: 이야기에 한 페이지에서 다른 페이지로 이어지는 긴장감을 만들어 보세요. 맥락과 설명을 제공하여 사용자가 여정에 참여하도록 유도하고 끝까지 함께한 독자에게 보상을 제공합니다.

디자인 권장사항

중요 디자인 권장사항
  • 글자 수를 줄입니다: 텍스트로 가득한 페이지가 여러 개 포함되지 않도록 합니다. 페이지당 약 280자(트윗 길이)로 텍스트를 줄이는 것이 좋습니다.
  • 텍스트를 가리지 않습니다: 텍스트가 페이지의 다른 콘텐츠로 가려지지 않는지 확인합니다. 번인 텍스트를 피합니다. 번인 텍스트를 사용하지 않으면 다양한 기기 크기에 맞게 크기가 조절될 때 텍스트가 가려지는 것을 방지할 수 있습니다.
  • 텍스트를 경계 내에 유지합니다: 웹 스토리의 모든 텍스트가 독자에게 표시되는지 확인합니다. 번인 텍스트를 피합니다. 번인 텍스트를 사용하지 않으면 다양한 기기 크기에 맞게 크기가 조절될 때 텍스트가 경계를 벗어나는 것을 방지할 수 있습니다.
  • 신중하게 애니메이션을 사용합니다: 애니메이션으로 스토리에 생동감을 불어넣으세요. 피로를 일으킬 수 있는 산만하거나 반복적인 애니메이션은 피합니다.
추천 디자인 권장사항
  • 웹 스토리 전용 CTA를 사용합니다: 원래 인스타그램, 스냅챗 또는 유튜브와 같은 소셜 플랫폼용으로 만든 스토리를 다시 만들 때는 특정 플랫폼과 관련된 CTA를 삭제해야 합니다. 사용자가 웹 스토리에서 제안하는 작업을 모두 실행할 수 있는지 확인합니다.
  • 풀 블리드 동영상 및 이미지를 사용합니다: 스토리에 풀 블리드 애셋을 포함하여 독자에게 몰입도 높은 경험을 제공합니다. (풀빌리드란 여백없이 동영상이나 이미지가 가장자리까지 꽉 차있는 상태를 뜻함)
  • 해상도가 낮거나 왜곡된 이미지 및 동영상을 사용하지 않습니다: 고화질 이미지를 사용하고 세로 모드에 맞춰 이미지 크기를 조절할 때 주의하세요.
  • 표지에 로고를 추가합니다: 브랜드를 대표하는 고해상도 로고를 포함하세요.
  • 동영상 길이를 줄입니다: 페이지당 15초 미만 또는 최대 60초 미만의 동영상을 사용하는 것이 좋습니다.
  • 오디오를 포함합니다: 볼륨이 균형 잡혀 있으며 길이가 5초 이상인 고품질 오디오 클립을 사용하고 음성을 알아들을 수 있는지 확인합니다.
  • 동영상 전용 스토리의 자동 진행을 고려합니다: 동영상 기반 웹 스토리의 자동 진행 환경은 편안한 환경에 적합할 수 있습니다.

검색엔진 최적화(SEO) 권장사항

중요 검색엔진 최적화(SEO) 권장사항
  • 고품질 콘텐츠를 제공합니다: 다른 웹페이지처럼 독자에게 유용하고 흥미로운 고품질 콘텐츠를 제공하는 것이 가장 중요합니다. 전체 이야기를 포함하고 스토리텔링 권장사항을 준수하여 독자의 지속적인 참여를 유도합니다.
  • 제목을 짧게 유지합니다: 제목은 45자(국문 기준) 미만이어야 합니다. 가능하면 35자(국문 기준) 미만의 구체적인 제목을 사용하는 것이 좋습니다.
  • 구글 검색에서 내 스토리를 찾을 수 있는지 확인합니다: 스토리에 noindex 속성을 포함하지 마세요. 이 속성으로 인해 구글이 페이지의 색인을 생성하지 못하므로 페이지가 구글에 노출되지 않습니다. 또한 웹스토리를 사이트맵에 추가하세요. 구글 서치콘솔의 색인 생성 범위 보고서 및 사이트맵 보고서를 사용하여 구글이 웹 스토리를 찾을 수 있는지 확인할 수 있습니다.
  • 스토리를 자체 표준으로 만듭니다: 모든 웹스토리는 표준이어야 합니다. 각 웹스토리에 자체 link rel=”canonical”이 있는지 확인하세요.

    (예: <link rel=”canonical” href=”https://www.example.com/url/to/webstory.html”>)
    (참고: 동일한 스토리의 언어별 버전이 여러 개 있는 경우 hreflang tag를 통해 구글에 현지화된 버전을 알려주세요.)
  • 메타데이터를 첨부합니다: 웹스토리가 AMP 스토리 메타데이터 가이드라인을 준수하는지 확인합니다. 웹페이지에 일반적으로 포함하는 다음과 같은 마크업을 포함합니다.

    -타이틀 태그, 메타 디스크립션
    -구조화된 데이터
    -오픈그래프 태그
    -트위터 카드
추천 검색엔진 최적화(SEO) 권장사항
  • 구조화된 데이터를 포함합니다: 구글 검색에서 웹스토리의 구조와 콘텐츠를 더 쉽게 파악할 수 있도록 웹스토리에 구조화된 데이터를 포함하는 것이 좋습니다.
  • 이미지에 대체 텍스트를 포함합니다: 이미지에 대체 텍스트를 포함하여 스토리의 검색 가능성을 개선하는 것이 좋습니다.
  • 스토리를 웹사이트에 통합합니다: 해당하는 경우 홈페이지 또는 카테고리 페이지에서 연결하는 등 웹 스토리를 웹사이트에 통합하는 것이 좋습니다. 예를 들어 웹 스토리가 여행 목적지에 관한 내용이고 모든 여행 기사가 나열된 페이지가 있다면 카테고리 페이지에도 웹 스토리를 연결합니다. www.example.com/stories 같은 추가적인 특수 방문 페이지(홈페이지와 같은 주요 페이지에서 연결됨)가 적절할 수도 있습니다.

    웹 스토리의 URL에서 웹 스토리 형식 또는 AMP 스토리 기술을 사용하고 있다고 표시할 필요는 없습니다. 웹 스토리는 더 광범위한 URL 전략에 통합하는 것이 좋습니다. 예를 들어 “New York Travel” 기사에서 “/new-york/travel/title-of-article.html”과 같은 형식을 사용하는 경우 웹스토리에 정확하게 동일한 디렉터리 구조와 URL 형식을 사용하는 것이 좋습니다.
  • AMP 스토리 페이지 첨부파일을 사용합니다: AMP 스토리 페이지 첨부파일을 사용하여 웹 스토리와 함께 추가 정보를 표시할 수 있습니다. 웹 스토리에 표시되는 콘텐츠의 추가 세부정보, 심층 분석 또는 향후 여정을 제공하는 데 유용할 수 있습니다.
  • 동영상에 자막을 포함합니다: 독자가 스토리를 더 쉽게 파악할 수 있도록 동영상에 자막을 추가하세요. 다른 콘텐츠와 겹치거나 화면 밖으로 나오지 않도록 동영상에 번인된 자막을 사용하지 않습니다.
  • 동영상 전용 스토리를 최적화합니다: 시맨틱 HTML을 사용하여 웹 스토리를 제작하는 것이 좋습니다. 그러나 일부 웹 스토리 편집기 도구는 모든 텍스트가 동영상에 번인되는 동영상 파일로 각 슬라이드의 형식을 지정하는 스토리를 대신 내보낼 수도 있습니다. 이 경우 동영상 내에 표시된 정확한 텍스트를 amp-video 요소의 title 속성으로 추가하는 것이 좋습니다. 웹스토리에서 시맨틱 마크업을 사용할 수 없는 경우에만 이 작업을 실행해야 합니다.
  • 가로 모드 디스플레이 지원을 추가합니다: 웹스토리가 데스크톱 구글 검색결과에 표시되도록 하려면 가로 모드 디스플레이 지원을 추가하세요.

기술 권장사항

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

여태까지 웹스토리에 대한 다양한 내용들을 알아보았습니다. 기존의 콘텐츠 SEO에서는 보통 블로그와 같이 텍스트 위주의 콘텐츠만을 주로 다뤘지만, 최근에는 다양한 형태의 콘텐츠에 대해서도 주목하고 있고 웹스토리가 가장 대표적인 예시입니다. 모바일 환경에서 콘텐츠를 소비하거나 시각적 콘텐츠에 익숙한 MZ세대들에게 가장 적합한 콘텐츠 형태이기 때문에 앞으로 SEO에서 매우 중요하게 다뤄질 콘텐츠 타입으로 예상됩니다.

또한 일반 웹페이지와 같이 URL이 존재하고 페이지 내에 삽입이 가능하기 때문에 SEO뿐만 아니라 검색광고, 이메일 마케팅, 소셜미디어 마케팅과 같은 다른 디지털 마케팅 영역에도 활용할 가능성이 무궁무진합니다. 오늘 배운 내용을 바탕으로 직접 웹스토리를 만들어보시는 것은 어떨까요? 관련해서 궁금하신 내용은 댓글에 남겨주세요.

“구글 웹스토리: 인스타 스토리를 웹에서도!”의 6개의 댓글

답글 남기기

이메일 주소는 공개되지 않습니다.