PENNY PAGE
CASE 17스킨리메드 SKIN REMED2026.07

피그마 시안을
18페이지 브랜드몰로

일본에서 생산하는 더마 스킨케어 브랜드 SKN REMED의 브랜드몰입니다.

업종
뷰티 커머스 (더마 스킨케어) · 온라인 브랜드몰
형태
브랜드몰 18페이지 (메인 + 제품상세 9종)
구성
메인 16섹션 · 브랜드 · 제품상세 9종 · FAQ
멤버십 · 정책 4종
기술 스택
반응형 HTML/CSS · 아임웹 REST API · Figma 원본 추출 · 제품상세 HTML
스킨리메드 SKIN REMED 데스크탑·모바일 화면
PENNYPAGE WORKS · CASE 17

01과제

무엇을 받았고, 무엇을 했나

화장품 브랜드몰은 제품마다 성분과 사용 순서를 설명해야 구매로 이어집니다. 그래서 피그마 원본 파일에서 이미지와 카피를 직접 추출해 메인 16섹션과 8단 구조의 제품상세 9종을 만들고, 아임웹 상품 데이터는 엑셀 일괄수정 후 REST API로 검증했습니다.

시안 이미지에 고객이 직접 적은 수정 요청 15건을 모두 반영해 브랜드·FAQ 66문항·멤버십 4등급·정책 4종까지 18페이지로 완성했습니다.

핵심 — 제품마다 8단 상세성분·사용 순서·주의사항을 같은 8단 구조로 정리한 제품상세 9종이 이 브랜드몰의 중심입니다.

02화면

히어로가 아니라 실제로 일하는 구간

제품상세 — 필 케어 세럼 1.0
01제품상세 — 필 케어 세럼 1.0
라인업 — 제품 카드
02라인업 — 제품 카드
FAQ — 카테고리 탭·앵커 탐색
03FAQ — 카테고리 탭·앵커 탐색
멤버십 — 등급별 혜택 비교
04멤버십 — 등급별 혜택 비교

03구성

이 사이트에 들어간 것

  • 01
    메인 16섹션피그마 원본 이미지·카피 추출
  • 02
    제품상세 9종8단 구조
  • 03
    FAQ 66문항앵커 탐색
  • 04
    멤버십 4등급등급별 혜택 비교
  • 05
    정책 4종전자상거래법 기준
  • 06
    아임웹 REST API 상품 일괄수정엑셀 일괄수정 후 API 검증
  • 07
    메인 배너 슬라이드5장
  • 08
    TOP 버튼반응형 HTML/CSS
스킨리메드 SKIN REMED 모바일 전체 화면

모바일 · 스크롤해서 보기

제작 당시 화면을 보존했습니다.

미러본은 납품 시점 화면을 그대로 보존한 사본입니다.