스토리 구성요소 빌드

웹에서 Instagram 스토리와 비슷한 환경을 구축하는 방법에 관한 기본적인 개요입니다.

Adam Argyle

이 게시물에서는 YouTube와 관련된 스토리 구성요소를 만들어 웹에서는 반응형이고 키보드 탐색을 지원하며 있습니다.

<ph type="x-smartling-placeholder">
</ph> <ph type="x-smartling-placeholder">
데모

스토리 구성요소를 직접 만드는 실습 데모를 원한다면 스토리 구성요소 Codelab을 확인하세요.

동영상을 선호한다면 이 게시물의 YouTube 버전을 참고하세요.

개요

스토리 UX의 인기 있는 두 가지 예는 Snapchat 스토리와 Instagram 스토리입니다 (플립은 말할 것도 없음). 일반적인 UX 용어에서 스토리는 일반적으로 모바일 전용의 탭 중심 탐색 패턴입니다. 여러 서비스를 구독하고 있습니다 예를 들어 사용자는 Instagram에서 친구의 스토리를 엽니다. 그 안에 있는 사진을 살펴봅니다. 그들은 일반적으로 있습니다. 기기의 오른쪽을 탭하면 해당 친구의 위치로 건너뜁니다. 다음 스토리 오른쪽으로 스와이프하면 사용자가 다른 친구로 건너뜁니다. 스토리 구성요소는 캐러셀과 상당히 비슷하지만, 1차원 배열과는 달리 다차원 배열입니다. 내부에 회전목마가 있고 표시됩니다. 🤯

<ph type="x-smartling-placeholder">
</ph> 카드를 사용하여 다차원 배열을 시각화했습니다. 왼쪽부터 오른쪽에는 보라색 테두리의 카드가 쌓여 있고, 각 카드 안에는 청록색 테두리가 있는 카드가 여러 개 있습니다. 목록으로 표시합니다. <ph type="x-smartling-placeholder">
</ph> 첫 번째 친구 캐러셀
두 번째 '스택' 스토리 캐러셀
👍 다차원 배열이라고도 하는 목록 형태의 목록

작업에 적합한 도구 선택

전반적으로 이 구성 요소는 빌드가 상당히 간단하다는 것을 알게 되었습니다. 중요한 웹 플랫폼 기능입니다. 그냥 덮어버리자!

CSS 그리드

우리의 레이아웃은 CSS 그리드에 대해 큰 순서가 없는 것으로 나타났습니다. 콘텐츠를 랭글링할 수 있는 강력한 방법입니다.

친구 레이아웃

기본 .stories 구성요소 래퍼는 모바일 중심 가로 스크롤 뷰입니다.

.stories {
  inline-size: 100vw;
  block-size: 100vh;

  display: grid;
  grid: 1fr / auto-flow 100%;
  gap: 1ch;

  overflow-x: auto;
  scroll-snap-type: x mandatory;
  overscroll-behavior: contain;
  touch-action: pan-x;
}

/* desktop constraint */
@media (hover: hover) and (min-width: 480px) {
  max-inline-size: 480px;
  max-block-size: 848px;
}
드림 <ph type="x-smartling-placeholder">
</ph> <ph type="x-smartling-placeholder">
Chrome DevTools 사용' 기기 모드 그리드로 만든 열을 강조 표시합니다.
를 참조하세요.
를 참조하세요.

grid 레이아웃을 분류해 보겠습니다.

  • 모바일에서 표시 영역을 100vh 및 100vw로 명시적으로 채우고 데스크톱에서 크기를 제한합니다.
  • /로 행 및 열 템플릿 분리
  • auto-flow는 grid-auto-flow: column로 번역됩니다.
  • 자동 흐름 템플릿은 100%이며 이 경우 스크롤 창 너비입니다.
를 통해 개인정보처리방침을 정의할 수 있습니다.

휴대전화에서는 행 크기가 표시 영역의 높이와 각 열은 표시 영역 너비입니다. Snapchat 스토리와 Instagram 스토리 예시의 경우 각 열은 친구의 스토리입니다. 우리는 친구를 원해요 표시 영역 밖에서 계속할 수 있으므로 스크롤할 곳이 있습니다. 그리드는 각 친구에 대해 HTML을 배치하는 데 필요한 열 수를 생성합니다. 동적이고 반응형 스크롤 컨테이너를 자동으로 만들어 보겠습니다. 격자 전체 효과를 중앙 집중화할 수 있었습니다.

스태킹

각 친구의 경우 페이지로 나누기 준비 상태의 스토리가 필요합니다. 애니메이션과 다른 재미있는 패턴을 준비하기 위해 스택을 선택했습니다. 스택이라고 하는 것은 마치 한 건물을 내려다보고 있다는 뜻이죠. 샌드위치를 만들고 있습니다.

CSS 그리드를 사용하면 단일 셀 그리드 (즉, 정사각형)를 정의할 수 있으며, 이때 행은 열이 별칭 ([story])을 공유하면 각 하위 요소가 별칭에 할당됩니다. 별칭이 지정된 단일 셀 공백:

.user {
  display: grid;
  grid: [story] 1fr / [story] 1fr;
  scroll-snap-align: start;
  scroll-snap-stop: always;
}

.story {
  grid-area: story;
  background-size: cover;
  …
}

이렇게 하면 HTML에서 스택 순서를 제어하고 모든 요소를 유지할 수 있습니다. 있습니다. absolute 포지셔닝 또는 z-index를 사용하여 아무것도 할 필요가 없었음을 알 수 있으며 height: 100% 또는 width: 100%로 박스 정답을 입력할 필요가 없었습니다. 상위 그리드 스토리 사진 표시 영역의 크기는 이미 정의되어 있으므로 이러한 스토리 구성요소는 채워야 합니다!

CSS 스크롤 스냅 포인트

CSS 스크롤 스냅 포인트 사양을 사용하면 스크롤 시 표시 영역에 요소를 고정할 수 있습니다. 이러한 CSS 속성이 존재하기 전에는 자바스크립트를 사용해야 했는데, 적어도 말하기 어려웠습니다. 결제 CSS 스크롤 스냅 포인트 소개 을 참고하세요.

<ph type="x-smartling-placeholder">
</ph> <ph type="x-smartling-placeholder">
scroll-snap-points 스타일 유무와 관계없이 가로 스크롤 이 옵션이 없으면 사용자는 평소와 같이 자유롭게 스크롤할 수 있습니다. 이를 통해 브라우저는 각 항목에 부드럽게 고정됩니다.
parent
.stories {
  display: grid;
  grid: 1fr / auto-flow 100%;
  gap: 1ch;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  overscroll-behavior: contain;
  touch-action: pan-x;
}
드림 <ph type="x-smartling-placeholder"></ph> 오버스크롤이 있는 상위 요소는 맞추기 동작을 정의합니다.
어린이
.user {
  display: grid;
  grid: [story] 1fr / [story] 1fr;
  scroll-snap-align: start;
  scroll-snap-stop: always;
}
드림 <ph type="x-smartling-placeholder"></ph> 어린이는 맞추기 대상이 되는 것을 선택합니다.

스크롤 스냅 포인트를 선택하는 이유는 다음과 같습니다.

  • 무료 접근성. 스크롤 스냅 포인트 사양에서는 왼쪽 화살표 및 오른쪽 화살표 키가 맞추기 지점을 통해 이동해야 합니다. 기본적으로 제공됩니다
  • 사양 증가. 스크롤 스냅 포인트 사양에 새로운 기능과 개선사항이 추가됩니다. 그러면 스토리 구성요소가 여기 있습니다.
  • 구현의 용이성. 스크롤 스냅 포인트는 실질적으로 터치 중심 가로 페이지로 나누기 사용 사례입니다.
  • 자유 플랫폼 스타일 관성. 모든 플랫폼은 엉뚱한 스크롤 및 휴지기 스타일을 가질 수 있는 정규화된 관성을 사용합니다.

교차 브라우저 호환성

Opera, Firefox, Safari, Chrome, Android, iOS에서 테스트했습니다. 그 내용은 다음과 같습니다. 기능과 지원의 차이점을 발견한 웹 기능에 대한 간단한 요약입니다.

하지만 일부 CSS가 적용되지 않아 현재 일부 플랫폼에서 UX를 놓치고 있습니다. 최적화할 수 있습니다 이러한 기능을 관리할 필요가 없어서 좋았으며 자신 있음 결국 다른 브라우저와 플랫폼에 도달하게 됩니다.

scroll-snap-stop

캐러셀은 Google Play 게임즈를 만드는 데 초석이 된 주요 UX 사용 사례 중 하나였습니다. CSS 스크롤 스냅 포인트 사양 스토리와 달리 캐러셀은 항상 중지할 필요가 없습니다. 사용자가 상호작용한 후 각 이미지에 적용됩니다. 괜찮거나 다음과 같은 조치가 권장됩니다. 캐러셀을 빠르게 둘러볼 수 있습니다. 반면 스토리는 하나씩 탐색하는 것이 가장 좋습니다. 이것이 바로 scroll-snap-stop가 제공하는 것입니다.

.user {
  scroll-snap-align: start;
  scroll-snap-stop: always;
}

이 게시물을 작성하는 시점에서는 scroll-snap-stop이(가) Chromium 기반에서만 지원됩니다. 있습니다. 결제 브라우저 호환성 확인하세요. 그렇다고 해서 방해할 수는 없습니다. 지원되지 않는 브라우저에서 사용자가 실수로 친구를 건너뛸 수 있습니다. 따라서 사용자는 좀 더 조심하거나 건너뛴 친구가 본 것으로 표시되지 않도록 자바스크립트를 작성해야 합니다.

자세한 내용은 사양을 참조하세요. 있습니다.

overscroll-behavior

모달을 스크롤하다가 갑자기 모달을 스크롤하다가 갑자기 스크롤을 시작하면 어떻게 될까요? overscroll-behavior 드림 개발자가 스크롤해야 하는 상황을 나갑니다. 어떤 상황에도 잘 어울립니다. 내 스토리 구성요소에서 이 기능을 사용합니다. 추가적인 스와이프 및 스크롤 동작이 구성요소를 사용합니다.

.stories {
  overflow-x: auto;
  overscroll-behavior: contain;
}

Safari와 Opera는 지원하며 괜찮습니다. 이러한 사용자는 마치 이 개선사항을 눈치채지 못할 수도 있습니다 저는 개인적으로 저의 팬입니다. 제가 구현하는 거의 모든 오버스크롤 기능의 일부로 포함시킵니다. 이것은 이는 UX 개선으로만 이어질 수 있는 무해한 추가입니다.

scrollIntoView({behavior: 'smooth'})

사용자가 탭하거나 클릭하여 친구의 이야기가 끝날 때 스크롤 스냅 포인트 세트에서 다음 친구로 이동해야 합니다. 다음으로 바꿉니다. 다음 친구를 참조해서 친구 목록에 추가하도록 요청할 수 있었습니다. 시야로 스크롤됩니다. 이에 대한 기본 사항에 대한 지원은 훌륭합니다. 모든 브라우저 스크롤하여 볼 수 있습니다. 하지만 모든 브라우저에서 'smooth' 작업을 실행하지는 않습니다. 이는 다시 말해 맞춰지는 대신 뷰로 스크롤됩니다.

element.scrollIntoView({
  behavior: 'smooth'
})

Safari는 여기에서 behavior: 'smooth'를 지원하지 않는 유일한 브라우저였습니다. 결제 브라우저 호환성 확인하세요.

실습

이제 내가 어떻게 했는지 알았으니 어떻게 하면 어떨까?! 다양한 방식으로 접근하고 웹에서 빌드하는 모든 방법을 배웁니다. 글리치 생성 버전을 트윗해 주시면 아래의 커뮤니티 리믹스 섹션을 참조하세요.

커뮤니티 리믹스