제품·작업 흐름
제품을 한 장면으로 이해시키기
첫 화면에서 약속을 말하고, 제품 화면과 세 가지 기능으로 바로 증명합니다.
화면 순서
- ProductHero
- ProductScreenshot
- FeatureGrid
- LandingCta
MDX 뼈대
<ProductHero ... />
<ProductScreenshot ... />
<FeatureGrid columns="3">…</FeatureGrid>REFERENCE GALLERY
같은 제품도 다른 흐름으로 소개할 수 있습니다.
형식은 같아도 독자가 이해하는 순서는 다릅니다. 주제를 고르고, 잘 맞는 MDX 조합을 골라 시작하세요.
여행 에디토리얼
동선을 따라 기능을 설명하기
제목 목차와 실제 사용 예시를 중심에 두어, 긴 흐름도 따라 읽기 쉽게 만듭니다.
화면 순서
- ProductHero
- HeadingMap
- LandingSection
- ExamplePanel
MDX 뼈대
<ProductHero ... />
<HeadingMap />
<LandingSection title="…">
<ExamplePanel ... />
</LandingSection>제품·작업 흐름
이미지와 설명을 번갈아 읽히기
한 장의 화면을 크게 보이고, 바로 옆에서 그 화면이 왜 중요한지 설명하는 제품 소개 방식입니다.
화면 순서
- ProductHero
- SplitSection
- ImageSlot
- ExamplePanel
MDX 뼈대
<SplitSection title="…">
<ImageSlot ... />
<ExamplePanel ... />
</SplitSection>콘텐츠 운영
한 화면에 집중시키기
결정적인 제품 화면은 집중 구간으로 감싸고, 독자가 일반 보기로 돌아갈 선택권도 남깁니다.
화면 순서
- ProductHero
- HeadingMap
- FocusRegion
- ProductScreenshot
MDX 뼈대
<HeadingMap />
<FocusRegion label="…">
<ProductScreenshot ... />
</FocusRegion>콘텐츠 운영
여러 화면을 가볍게 넘겨 보기
한 화면에 모든 기능을 밀어 넣지 않고, 흐름별 장면을 스와이프하며 살펴보게 합니다.
화면 순서
- ProductHero
- ShowcaseSwiper
- ShowcaseSlide
- LandingCta
MDX 뼈대
<ShowcaseSwiper label="…">
<ShowcaseSlide title="…">…</ShowcaseSlide>
</ShowcaseSwiper>제안·구매 판단
비교 기준과 결론을 함께 제시하기
무엇을 비교했고 어떤 결론에 닿는지, 카드·예시·하나의 CTA로 차분하게 닫습니다.
화면 순서
- ProductHero
- FeatureGrid
- ExamplePanel
- LandingCta
MDX 뼈대
<FeatureGrid columns="2">…</FeatureGrid>
<ExamplePanel ... />
<LandingCta ... />