결과 예시

스킨베리 시카 앰플 상세페이지 피그마 디자인 가이드

1. 공통 디자인 시스템

• 컬러 팔레트
• Primary: #9CD3C6 (민트톤, 진정·편안함)
• Secondary: #FFFFFF (화이트, 청결·안전성)
• Neutral: #111111 / #666666 / #F5F6F7 (텍스트·배경)

• 폰트
• H1: Pretendard Bold, 32/40, Tracking -2%
• H2: Pretendard SemiBold, 24/32
• Body: Pretendard Regular, 16/24
• Caption: 12/16

• 토큰
• Spacing: 4 / 8 / 16 / 24 / 32
• Radius: 16
• Shadow: md(0, 8, 24, 16% 투명도)

• 그리드
• Desktop: 12컬럼(80px 마진, 24px 거터)
• Mobile: 4컬럼(16px 마진)
• 안전여백: 24px

2. 섹션별 작업 가이드

1) 히어로 섹션

• 목적: 문제 공감 → 제품 등장 → 시선 집중

• 레이아웃: 좌측 카피(40%) / 우측 이미지(60%), Auto Layout 세로 16px 간격

• 카피 배치:
• H1: “매일 붉어지고 화끈한 피부, 이제 끝낼 시간이에요.”
• Sub: “민감성 피부를 위한 첫 걸음, 스킨베리 시카 앰플이 진정 케어를 시작합니다.”
• CTA 버튼(Primary): [지금 바로 구매하기]

• 이미지 가이드:
프롬프트 기반 4:5 비율, 자연광, 부드러운 민트·화이트 배경

• 팁: 버튼 Variants(hover/pressed)로 상태 저장

2) 기능 1 – 피부 온도 진정

• 목적: 시각적 ‘진정’ 효과 강조

• 레이아웃: 좌측 이미지 / 우측 카피, 모바일은 수직 스택

• 카피:
• H2: “하루 만에 달라지는 피부 온도”
• Body: “시카 성분이 열감과 붉은기를 빠르게 완화해 편안한 피부로 회복시켜 줍니다.”

• 이미지: 피부 표면의 붉은기 → 맑아지는 시각적 전환, 시카 잎 + 물방울

• 팁: Linear Gradient(민트→화이트)로 청량감 추가

3) 기능 2 – 무자극 테스트 완료

• 목적: 안전성 신뢰

• 레이아웃: 이미지 상단 / 카피 하단 카드형

• 카피:
• H2: “안심하고 매일 쓰는 무자극 처방”
• Body: “피부 자극 테스트를 통과한 순한 처방으로, 민감한 날에도 부드럽게 스며듭니다.”

• 이미지: 피부과 의사가 스포이드로 앰플을 바르는 장면

• 팁: Frame 안에 Drop Shadow로 제품 집중도 높이기

4) 기능 3 – 식약처 인증 성분

• 목적: 객관적 신뢰 확보

• 레이아웃: 좌측 카피 / 우측 제품 사진 + 인증 마크

• 카피:
• H2: “믿을 수 있는 식약처 인증 성분”
• Body: “까다로운 인증 절차를 거친 성분만 담아 효과와 안전성을 모두 잡았습니다.”

• 이미지: 평면 배치 제품 촬영, 인증 아이콘 오버레이

• 팁: Icon Component로 인증 마크 스타일 통일

5) 비교/차별점

• 목적: 경쟁 대비 우위 부각

• 레이아웃: 2열 비교 표

• 카피:
• H2: “다 비슷해 보인다고요? 피부는 속일 수 없습니다.”
• Body: “빠른 진정 효과, 무자극 테스트, 식약처 인증까지 3박자를 갖춘 진정 앰플은 스킨베리뿐입니다.”

• 이미지: 1:1 비율 비교 차트 일러스트

• 팁: 색상 대비로 자사 제품 하이라이트

6) 후기/신뢰

• 목적: 실제 경험치로 설득

• 레이아웃: 2열 카드, 프로필 아바타 + 별점

• 카피:
• “일주일 만에 거울 속 피부가 달라졌어요!” – 김지 님
• “메이크업이 하루 종일 무너지지 않아요!” – 박유 님

• 이미지: 두 명의 20대 여성 모델, 건강한 피부 톤

• 팁: Content Reel로 더미 후기 채운 뒤 실 후기 교체

7) CTA

• 목적: 최종 구매 유도

• 레이아웃: 풀폭 배너, 중앙 정렬

• 카피:
• H2: “당신의 피부, 오늘부터 달라집니다.”
• Sub: “민감함 없는 하루를 시작하세요.”
• Primary 버튼: [지금 바로 구매하기]

• 이미지: 제품 클로즈업 + 워터 리플 배경

• 팁: Glow Effect로 고급감 강화

3. 추천 플러그인

• Content Reel – 더미 텍스트·이미지 관리

• Remove BG – 배경 제거

• Batch Styler – 색상·폰트 스타일 일괄 변경

• Rename It – 레이어 네이밍 자동화

• A11y Color Contrast Checker – 접근성 대비 확인

• Mockuuups Studio – 제품 목업 합성

4. 체크리스트

• 모바일(390px)·데스크톱(1440px) 모두 레이아웃 안정성 확인

• 모든 CTA 버튼 동일 스타일·상태 반영

• 이미지 안전여백 24px 유지

• 텍스트 대비 비율 WCAG AA 기준 충족