POSTER COLOR 포스터컬러 색조 화장품 쇼핑몰 스킨

분야: 디자인 · 퍼블리싱 / 웹 / 쇼핑몰, 카페24, 반응형 참여 기간: 2026.09 ~ 2026.10 관련 기술: 카페24 스마트디자인 Pro, HTML5, CSS3, JavaScript, 반응형 웹 [프로젝트 개요] 카페24 디자인센터에서 판매 중인 색조 화장품 반응형 스킨입니다. 립, 치크, 아이, 베이스를 셰이드 이름으로 파는 색조 브랜드를 위해 토마토 레드, 코발트, 라임 세 색면에 굵은 검정 선을 둘러 스크롤만 해도 구역이 나뉘게 했습니다. 카드마다 셰이드 칩과 스티커 라벨을 붙이고 상세에서는 색 버튼으로 셰이드를 고르게 해, 손님이 처음 묻는 무슨 색이 있는지를 화면이 먼저 답합니다. 카페24 스마트디자인 Pro 기본 스킨의 모듈 구조는 그대로 두었습니다. [주요 기능] 1. 셰이드가 보이는 카드 - 사진 위 스티커 라벨에 대표 셰이드 번호와 이름, 사진 아래 색 막대, 가격 아래 셰이드 칩 줄과 색 개수를 붙였습니다. 2. 색 버튼 상세 - 기본 옵션 목록을 색 사각과 이름이 붙은 버튼으로 다시 그렸고, 고르면 큰 사진 위 스티커가 그 색으로 바뀝니다. 재고와 품절, 추가금액은 카페24 기능 그대로 동작합니다. 3. 톤으로 찾는 색 - 파랑 색면 위 톤 버튼 셋과 종류 버튼으로 쿨톤, 웜톤, 뉴트럴에 맞는 상품만 남깁니다. 4. 발색 밴드와 카테고리 색면 타일 - 라임 머리 아래 텍스처 사진 다섯 칸에 셰이드 스티커와 제형 라벨을 붙이고, 첫 화면 아래 립, 치크, 아이, 베이스를 색면 네 칸으로 연결했습니다. 5. 신상 드롭과 룩 - 이번 달 새 색을 드롭 배너로 알리고, 입술, 볼, 눈에 쓴 세 색을 한 세트로 보여 주며 합계 금액을 자동으로 계산합니다. 6. 같은 색, 같은 선의 장바구니 - 무료배송까지 남은 금액 막대와 담은 상품의 셰이드, 결제 요약 판을 두고 로그인, 회원가입, 게시판, 주문서도 같은 선과 글꼴로 맞췄습니다. [디자인] - 토마토 레드, 코발트, 라임 세 색면과 굵은 검정 선으로 포스터 같은 인상을 냈고, 세 색과 선 굵기는 CSS 변수로 바꿀 수 있습니다. - 한글과 본문은 Pretendard, 영문 워드마크와 제목은 Archivo입니다. [범위] - 메인, 상품 목록, 상품 상세, 장바구니, 주문, 회원가입, 로그인, 게시판까지 전 페이지 디자인 - PC·모바일 한 벌로 맞추는 반응형, 모바일 하단 탭 메뉴 - 관리자에서 배너, 메인 진열, 분류를 바꾸면 화면에 그대로 반영되도록 카페24 모듈 연결 - 업종에 맞춘 분류 구조와 상품 진열 세팅