성공적인 웹 스토리 제작 모범 사례

웹 스토리는 탭할 수 있으며 간편하게 공유도 가능한 몰입형 스토리텔링 형식입니다. 웹 스토리는 AMP 프레임워크의 하위 집합을 사용하여 제작됩니다. 또한 웹 스토리는 크리에이터 및 퍼블리셔가 시각적으로 풍성한 모바일 중심의 사용자 경험을 끌어내는 전면 콘텐츠를 구성하는 데 좋은 기회가 됩니다.

웹 스토리는 간단하게 볼 수 있어 막간을 활용해 짤막한 콘텐츠를 소비하는 사용자에게 적합합니다. 지하철을 기다리거나 커피를 구매하는 순간은 요약된 콘텐츠를 소비하는 새로운 기회의 장입니다. 아래에서 만족도 높으며 간단한 웹 스토리 제작의 모범 사례를 살펴보고, 그에 따라 매혹적이며 즐거운 콘텐츠를 구성해 보세요.

요약정리

만족도 높고 간단한 웹 스토리 제작의 핵심 포인트는 다음과 같습니다.

• 완결성 있고 흥미로운 스토리 전달.
• 수준 높은 이미지와 재치 있는 제목을 사용해 커버 페이지의 임팩트 극대화.
• 사용자의 화면을 채우는 적절한 동영상 및 이미지를 통한 시각적 효과.
• 시각적 이미지를 활용하여 짧지만 깊은 내용을 전달. 페이지당 텍스트는 10단어 이내로 구성.
• 동영상은 짧을수록 좋으니 15초 미만으로 유지.
• 일부 사용자 및 상황의 경우 소리 없이 콘텐츠를 시청할 수 있으므로, 동영상에 자막을 추가하여 포용적 콘텐츠로 제작.
• 사용자가 탭하여 넘길 수 있는 콘텐츠 제공. 일반적으로 10~20 페이지 정도면 훌륭한 내러티브를 선사할 수 있음.
• 애니메이션 또는 임베딩의 과도한 사용은 금물. 전환 타이밍에도 주의할 것.

내러티브를 이해하기

스토리 도입부를 계획하고 이야기의 구조를 짜고 완성도 높은 내러티브를 구현합니다. 이야기하고자 하는 바를 이해하면 적절히 나눠보세요. 각각의 웹 스토리 페이지는 다른 아이디어와 결합되는 하나의 아이디어를 전달해야 합니다.

매력적이고 탄탄한 콘텐츠

각각의 웹 스토리는 최소 4 페이지로 구성되어야 하며 이상적으로는 30개 이내가 좋습니다. 또한 웹 스토리는 효과적으로 작성되어야 합니다. 내러티프 구축에 필요하다면 30개를 초과해도 괜찮습니다.

눈길을 끄는 포장

커버 페이지는 웹 스토리의 포장지와 같습니다. 사용자에게 처음으로 표시되는 것이자 스토리를 열지 않을 경우 유일하게 표시되는 것입니다. 그러므로 매력적인 커버 페이지를 제작하세요! 좋은 커버 페이지에는 눈길을 끄는 이미지와 짧지만 기억에 남을 제목이라는 두 가지 요소가 필요합니다.

이미지

전체 화면에 적합한 고품질 세로형 이미지 또는 동영상을 사용하세요. 파비콘 및 로고를 추가하여 팬들에게 브랜드를 알리는 것도 좋은 방법입니다.

제목

제목은 명확하고 간결하게 작성합니다. 이상적인 길이는 10 단어, 40자 미만입니다. 작성자 및 게시물 이름을 포함하고 스토리 공개 시간도 중요한 경우에는 게시일도 추가합니다.

브랜드 및 날짜

사용자에게 웹 스토리의 게시자 및 게시 날짜를 알려야 합니다. 커버 페이지에 브랜드 속성 및 게시일을 추가하세요. 이를 통해 신뢰도를 높이고 사용자가 콘텐츠를 마음에 들어 할 경우 충성도를 얻을 수 있습니다. 이탈리아 여행에 관한 CNN 웹 스토리는 스토리 게시자 및 게시일을 한눈에 살펴볼 수 있도록 구성되었습니다.

시각적 요소

눈길을 사로잡는 수준 높은 시각적 요소 및 쉽고 빠르게 읽을 수 있는 텍스트를 제공하여 사용자의 관심을 유도하세요. 고품질의 동영상 및 이미지를 주로 사용하며 적절한 곳에 애니메이션을 추가해 흥미로운 콘텐츠를 완성할 수 있습니다.

레터박스를 적절히 최소한으로 사용하여 모든 이미지 및 동영상을 전체 화면으로 구성하는 것이 좋습니다.

동영상

사용자에게 동영상은 아주 흥미로운 콘텐츠이므로 웹 스토리에서 최대한 많이 사용하세요. 동영상 길이는 15초 미만으로 구성하되 그보다 길이가 긴 경우엔 더 작은 단위로 쪼개는 것이 좋습니다.

웹 스토리는 세로 모드에서 제공되므로 다음 사항을 염두에 두세요.

• 가능하다면 최첨단 모바일 기기에서 짧은 동영상.
• 480p로 촬영.
• 초당 24 프레임 이상으로 촬영.

콘텐츠의 접근성도 고려하세요. 동영상 크기를 조절하여 하단에 텍스트 및 자막을 위한 공간을 남겨두는 것이 좋습니다. 모든 사용자가 동영상 콘텐츠의 소리를 들을 수 있거나 듣기를 원하지는 않을 테니까요.

이미지

좋은 해상도(828 x 1,792)의 세로 이미지를 전체 화면으로 사용합니다.

가로형으로 잘린 사진은 추천하지 않습니다.

주의하여 자르기

중요한 부분에 집중하세요. 불필요하거나 방해가 되는 요소를 잘라내고 사진의 핵심 주제를 중점적으로 완전히 보여줄 수 있어야 합니다. 일부 기기에서 상단 및 하단 영역이 잘릴 수 있다는 점을 기억하고 적절한 테스트를 수행하는 것이 좋습니다.

추천	비추천
페이지 콘텐츠에 맞추고 핵심 아이디어를 전달하기 위해 이미지를 잘랐습니다.	이렇게 잘린 이미지는 사용자의 포커스 지점과 이미지로 전달하려는 아이디어가 명확하지 않습니다.

텍스트

텍스트 가독성을 고려하세요. 글꼴 크기는 24 이상으로 사용하고, 글꼴은 최대한 크고 가독성이 높게 설정합니다. 텍스트 색상은 스토리 페이지의 배경색 또는 이미지와 대비되는 색상을 사용하고, 텍스트만 있는 이미지나 동영상은 사용하지 않습니다.

추천	비추천
강렬한 대비로 텍스트의 가독서을 높였습니다.	부적절한 대비로 텍스트와 이미지가 잘 구분되지 않아 단어는 읽기 어렵고 스토리를 따라가기 어렵습니다.
텍스트를 강조 표시하면 단어가 부각되어 독자가 스토리에 집중할 수 있습니다.	복잡한 이미지에 밝은 색상의 텍스트를 사용하면 가독성이 떨어집니다.

한 입 크기의 텍스트

텍스트는 거창한 식사가 아닌 한 입 크기의 간식처럼 제공되어야 합니다. 페이지당 200자 미만으로 유지하세요.

자세한 내용은 원재료 목록처럼 사용자가 요청한 경우에만 제공하세요. 길이가 긴 텍스트 콘텐츠는 페이지에 추가 콘텐츠로 표시합니다. 페이지의 추가 콘텐츠는 사용자에게 더 많은 읽을거리가 있다는 사실을 알려줍니다. 사용자는 관심이 가는 경우 화면 위쪽으로 스와이프하여 추가 콘텐츠를 확인할 수 있습니다.

문장보다 긴 텍스트 콘텐츠는 사용하지 않는 편이 좋습니다. 긴 텍스트가 전체 스토리 페이지의 10% 이상을 차지하지 않게 구성하세요.

추천	비추천
꼭 필요한 텍스트만 남겨두세요. 다양한 글자 크기와 스타일로 텍스트 블록을 쪼개면 훑어서 살펴보는 데 도움이 됩니다.	이처럼 큰 벽과 같은 텍스트는 읽기 어려울 뿐 아니라 스토리 몰입을 방해합니다.

애니메이션

정적 이미지에 모션을 추가하는 것처럼 목적에 따라 애니메이션을 적절히 사용하면 독자의 흥미를 자극할 수 있습니다. 이미지 및 애셋에 날아오기, 회전 또는 페이드인 효과를 더해보세요.

추천	비추천
이 예시의 모션은 핵심 아이디어를 지지하고 페이지에 동적 요소를 더합니다.	이 정적 페이지는 기능을 갖추었지만 독자의 몰입을 유도하는 요소가 다소 부족할 수 있습니다.

그렇지만 애니메이션을 과도하게 사용할 경우 효과가 반감될 수 있으니 조금만 사용하세요. 또한 단일한 애니메이션 효과만을 너무 많이 사용하는 것도 권장되지 않습니다.

타이밍의 중요성

페이지는 신속하게 완성 상태에 도달해야 합니다. 독자가 다음 페이지로 넘어가기 위해 탭하려는 경우 애니메이션이 방해가 되어선 안 되겠죠. 하지만 너무 빨라서도 안 됩니다! 스타일과 길이를 적절히 조합하여 유지하는 것이 중요합니다. 예를 들어 간단한 애니메이션은 500 밀리초 미만으로 구성되어야 하지만 배경 이미지의 패닝 효과는 그보다 오래 지속될 수 있습니다.

모션에 창의성을 더해보세요. 단일한 효과로 여러 객체가 함께 움직이는 것보다는 순서대로 애니메이션 효과를 적용하는 것이 좋습니다. 요소마다 다른 효과 및 길이를 적용하여 조화로운 애니메이션을 구성합니다.

완벽한 결합

애니메이션의 스타일과 스토리의 디자인을 조화롭게 구성하세요. 가능한 웹 스토리 애니메이션 라이브러리를 활용하여 콘텐츠 몰입을 방해하지 않으며 적절하게 어울리는 스타일과 강도를 찾을 수 있습니다.

기능 추가

타사 콘텐츠 임베딩, 추가 정보 첨부, 새 위치로 연결 등의 기능으로 사용자는 주제를 더 깊게 탐색할 수 있습니다.

전략적 임베딩

임베딩을 통해 관련성 높고 아름답게 표현된 추가적 깊이를 더할 수 있습니다. 연관된 콘텐츠를 임베딩에 포함하여 스토리의 일부로 통합해 보세요. 임베딩 요소를 인터랙티브하게 구성해야 할 수도 있습니다.

추천	비추천
이 페이지의 임베딩 요소는 나머지 레이아웃과 절절히 통합됩니다. 헤드라인, 날짜, 배경 그래픽 등이 시각적으로 풍성한 매력을 더합니다.	이 페이지에는 임베딩 요소가 단독으로 추가되어 미완성된 느낌을 주고 전체 스토리와 어울리지 않습니다.

추가 콘텐츠 첨부

관련 콘텐츠는 첨부 파일로 추가하여 웹 스토리를 간결하게 유지합니다. 이러한 방식을 활용하면 독자들이 스토리에 대해 더 알고 싶을 경우 심층적으로 탐색할 수 있습니다. 관련 페이지에 추가 콘텐츠를 추가하면 독자들은 보다 쉽게 스토리를 탐색합니다.

첨부 파일은 긴 텍스트 블록이 있을 시 적합합니다. 또한 스토리에 하이라이트 동영상이 포함되었을 경우 전체 동영상을 첨부 파일로 추가할 수 있습니다.

새로운 위치로 연결

웹 스토리 페이지의 어느 곳에든 링크를 추가할 수 있습니다. 링크를 탭하면 툴팁이 표시되어 링크가 어디로 연결되는지 사용자에게 알려주고, 스토리를 떠나기 전 사용자가 액션을 확인할 수 있습니다.

추천	비추천
이 페이지의 링크는 명확히 표시되어 있으며 관련 콘텐츠로 둘러싸여 있어 스토리 탐색을 방해하지 않습니다.	이 페이지의 링크는 탐색을 전적으로 차단합니다. 독자들이 쉽게 이전 또는 다음 페이지로 이동할 수 없습니다.

링크를 표시할 때 크기, 위치 및 빈도 등을 전략적으로 고려하세요. 탭 가능한 요소가 너무 많으면 탐색 과정이 복잡해져 독자에게 방해가 됩니다.

코딩 또는 제작

웹 스토리는 처음부터 수동으로 코딩하거나 제작 도구를 활용하여 제작할 수 있습니다.

웹 스토리를 수동으로 코딩할 경우 AMP 프레임워크를 활용해 처음부터 제작합니다. 시작을 위해 첫 웹 스토리 제작을 참조하세요. 웹 스토리 제작 후에는 AMP의 유효성을 확인해야 합니다. AMP 검사기에서 확인할 수 있습니다. 웹 스토리의 기술적 세부 사항을 읽고 자세한 내용을 알아보세요.

• Written by @CrystalOnScript