🧴 SK-II 브랜드 웹사이트 리디자인 & 개발
📌 프로젝트 개요
글로벌 프리미엄 스킨케어 브랜드 SK-II의 브랜드 철학과 제품의 고급스러움을 시각적으로 극대화하기 위해 웹사이트를 리디자인하고, 실제 웹으로 구현한 프로젝트입니다.
브랜드의 핵심 이미지인 ‘정제된 아름다움’과 ‘투명한 피부’의 느낌을 살리기 위해, 미니멀한 구성과 세련된 컬러 배색을 중심으로 디자인 방향을 설정했습니다. 모든 요소는 직접 디자인 및 퍼블리싱(코딩)하였으며, 실제 작동하는 웹 페이지로 구현하였습니다.
🎯 목표
SK-II 브랜드의 아이덴티티를 반영한 프리미엄 이미지 구축
제품 중심의 사용자 경험을 강조하는 구조 재구성
반응형 웹 기반으로 다양한 디바이스에서 동일한 인상을 제공
개인 디자인 및 프론트엔드 개발 역량 향상을 위한 실전 프로젝트
🛠️ 기여도
디자인 100%: 레이아웃 구성, 제품 이미지 배치, 컬러 및 폰트 설정
개발 100%: HTML / CSS / JavaScript 기반으로 반응형 구조 구현
💡 주요 기능 및 구성
메인 비주얼 슬라이더: 브랜드 캠페인을 강조하는 시네마틱 배너 구성
Main Products / Best Products 영역 분리: 제품 라인업에 따른 시각적 집중도 강화
인터랙션 효과: 스크롤 및 슬라이드 전환 효과 적용
브랜드 히스토리 섹션: SK-II의 유산을 감성적으로 전달
🎨 디자인 포인트
컬러: SK-II의 시그니처인 딥 와인레드와 화이트를 주조색으로 사용해, 고급스러움과 청결함을 동시에 전달
타이포그래피: 산세리프 계열 폰트를 활용해 제품 중심의 콘텐츠를 강조
구성요소: A/B 테스트에 기반한 제품 배열 → 클릭 유도 최적화
🔗 기술 스택
HTML5, CSS3, JavaScript (Vanilla)
반응형 레이아웃 (media queries 적용)
이미지 최적화 및 접근성 고려
📝 비고
본 프로젝트는 기획, 디자인, 프론트엔드 구현까지 전 과정을 혼자 수행한 개인 포트폴리오 프로젝트입니다.
상업적 용도가 아닌 브랜드 이해와 UX/UI 개발 역량 향상을 위한 학습용 리디자인 프로젝트입니다.
포트폴리오를 불러오고 있어요
