SYSTEM BLUEPRINT

리베아 화장품 상세페이지
스토리보드와 검토 흐름

제품 두 종의 첫 화면부터 표시사항, 수정 반영과 납품 준비까지 한 흐름으로 확인합니다.

스토리보드란?

스토리보드는 상세페이지의 화면을 실제 모습에 가깝게 미리 확인하는 문서입니다. 제품별 정보 구조와 검토 흐름을 같은 화면 언어로 연결했습니다.

  1. 두 제품의 브랜드 첫 화면과 핵심 카피를 같은 톤으로 비교
  2. 성분·사용법·용량을 구매 전 정보 흐름으로 정리
  3. 초안 검토부터 수정 반영과 업로드 묶음 확인까지 연결

마지막까지 보시면 짧은 일정 안에서도 제품별 완성도와 수정 이력을 함께 관리하는 방식을 확인하실 수 있습니다.

브랜드 담당자 시나리오

상세페이지 확정까지의 검토 여정

브랜드 담당자가 두 제품의 첫 화면, 정보 구성, 피드백 반영과 납품 준비를 차례로 확인하는 흐름입니다.

1. 브랜드 기준 확인

새 톤앤매너와 제품 촬영본
우선순위를 한 번에 정리

2. 첫 화면 비교

두 제품의 핵심 문장과
사진 배치를 나란히 검토

3. 정보 영역 점검

성분·사용법·용량을
읽기 쉬운 순서로 확인

4. 초안 수정 반영

의견을 화면 기준으로 남기고
반영 상태를 비교

5. 납품 묶음 확인

업로드 이미지 분할과
디자인 원본을 함께 검수

브랜드 담당자 | 화면 01

제품 두 종 브랜드 첫 화면

상세페이지 시안 · 첫 화면
RIVÉA
브랜드제품리추얼
SKIN RITUAL 02
오늘의 피부 리듬을 고르는 두 가지 방법
2026 가을 기획안
원본 사진RV-SERUM-50
01 · SERUM
로즈 펩타이드 세럼
50 mL · 탄력 광채 집중 케어
원본 사진RV-CREAM-60
02 · CREAM
벨벳 베리어 크림
60 mL · 보습 장벽 밀착 케어
01-12 블록 · 홈페이지 규격 검토아래로 스크롤

[화면 개요 및 목적]

두 제품을 한 브랜드 안에서 구분하되 첫인상은 일관되게 설계한 대표 화면입니다. 촬영 이미지와 기획 카피가 첫 화면의 큰 축을 차지해 R1과 R2를 바로 검토할 수 있습니다.

[핵심 기능 로직]

제품별 사진 자리, 핵심 문장, 스크롤 유도 요소를 같은 그리드에 고정합니다. 촬영본 교체 뒤에도 카피 길이와 제품별 강조색만 조정해 첫 화면의 균형을 유지합니다.

  • 두 제품 균형 비교
    반응형 그리드
  • 촬영본 빠른 교체
    이미지 컴포넌트
브랜드 담당자 | 화면 02

성분·사용법·용량 정보 설계

상세페이지 시안 · 정보 영역
ROSE PEPTIDE SERUM
피부 결을 따라
차오르는 탄력 광채
원본 사진세럼 메인 컷 A
필수 표시사항카피 확인
제품 정보
성분사용법용량
핵심 성분

로즈펩타이드 5,000 ppm · 나이아신아마이드

사용 순서

아침·저녁 토너 다음 2-3방울을 펴 바릅니다.

용량

50 mL

사용 시 주의사항

눈가를 피해 사용하고 이상이 있으면 사용을 중단합니다.

[화면 개요 및 목적]

첫 화면에서 관심을 만든 뒤 필수 표시사항까지 자연스럽게 읽히게 하는 정보 설계 화면입니다. 두 제품에 공통으로 쓰는 정보 모듈과 제품별 효능 카피를 구분해 R3의 누락을 막습니다.

[핵심 기능 로직]

좌측은 실제 상세페이지의 한 구간, 우측은 검토용 정보 목록으로 구성합니다. 성분·사용법·용량을 각각 독립 항목으로 두고 제품별 값만 교체할 수 있게 합니다.

  • 표시사항 누락 방지
    콘텐츠 모듈
  • 제품별 카피 관리
    디자인 원본
브랜드 담당자 | 화면 03

초안 검토·수정 반영·납품 준비

검토 보드 · 납품 준비
DRAFT REVIEW · 2종
초안 비교와 수정 의견
09월 08일
세럼 v0.9
로즈 펩타이드 세럼첫 문장 수정 필요
크림 v1.0
벨벳 베리어 크림사진 위치 반영 완료
첫 화면 카피

세럼 01 블록의 첫 문장을 더 짧게 조정

크림 사진 비율

크림 03 블록 촬영본 교체 반영

납품 묶음
업로드용 분할 이미지
24장 · 웹 최적화
디자인 원본
2개 파일 · 편집 가능
최종 확인
세럼 카피 1건 확인 대기
최종 납품 준비도92%

[화면 개요 및 목적]

두 제품의 초안을 같은 검토 보드에서 비교하고 수정 의견이 최종 이미지 묶음과 원본까지 이어지는 화면입니다. 짧은 일정에서 R4와 R5의 확인 지점을 명확하게 만듭니다.

[핵심 기능 로직]

피드백은 화면 블록과 버전 번호에 연결하고, 반영 완료 여부를 즉시 구분합니다. 최종 단계에서는 업로드용 분할 이미지 수와 디자인 원본 상태를 별도 묶음으로 관리합니다.

  • 수정 이력 명확화
    버전 관리
  • 업로드 규격 점검
    에셋 묶음
시나리오

| 화면 01

[화면 개요 및 목적]

[핵심 기능 로직]

    | 화면 02

    [화면 개요 및 목적]

    [핵심 기능 로직]

      | 화면 03

      [화면 개요 및 목적]

      [핵심 기능 로직]

        시나리오

        | 화면 01

        [화면 개요 및 목적]

        [핵심 기능 로직]

          | 화면 02

          [화면 개요 및 목적]

          [핵심 기능 로직]

            | 화면 03

            [화면 개요 및 목적]

            [핵심 기능 로직]