PINOUT 핀아웃 디지털 액세서리 쇼핑몰 스킨

분야: 디자인 · 퍼블리싱 / 웹 / 쇼핑몰, 카페24, 반응형 참여 기간: 2026.10 관련 기술: 카페24 스마트디자인 Pro, HTML5, CSS3, JavaScript, 반응형 웹 [프로젝트 개요] 카페24 디자인센터에서 판매 중인 디지털 액세서리와 소형가전 반응형 스킨입니다. 충전기, 케이블, 이어폰, 키보드, 소형가전을 파는 브랜드를 위해 위쪽 기기 바에서 쓰는 기기를 고르면 몰 전체 카드에 호환 표시가 붙고, 카드마다 정격 셀 세 칸과 보증 기간이 나오도록 했습니다. 디지털 제품은 사진보다 숫자로 고른다는 점에 맞춰 비교표와 스펙 표, 보증과 수리 안내를 메인과 상세에 앞세웠습니다. 카페24 스마트디자인 Pro 기본 스킨의 모듈 구조는 그대로 두었습니다. [주요 기능] 1. 내 기기 바 - 기기 버튼 여섯 개 가운데 하나를 누르면 맞는 상품에는 노란 호환 표시, 맞지 않는 상품에는 회색 미지원 표시가 붙고 목록, 상세, 장바구니로 넘어가도 이어집니다. 2. 정격 셀 카드 - 카드 첫 줄에 모델명, 상품명 아래 출력, 포트, 무게 같은 정격 셀 세 칸, 가격 아래 보증 기간과 비교 체크를 둡니다. 3. 세 모델 비교 - 카드의 비교를 체크하면 비교 바에 쌓이고, 상세의 스펙 표를 읽어 와 한 표로 보여 주며 값이 다른 줄을 표시합니다. 4. 라인업 비교표 - 충전, 오디오, 데스크 탭마다 네 모델을 같은 줄에 놓고 출력, 포트, 크기, 무게, 보증, 가격을 견줍니다. 5. 내 기기에 맞나요 상세와 호환 필터 - 상세에서 기기를 고르면 맞는지와 충전 속도가 나오고, 목록에서는 내 기기 호환만 남기는 토글로 거릅니다. 스펙 표와 호환 표 틀을 함께 제공합니다. 6. 장바구니 호환 확인과 보증 수리 - 담은 상품의 호환을 다시 확인하고, 메인에 제품군별 보증 표와 수리 접수 단계, 시리얼 번호 입력 칸을 두어 상담 게시판으로 연결했습니다. [디자인] - 그래파이트와 신호 노랑 두 색으로 기기 상자 옆면 같은 인상을 냈고, 두 색은 CSS 변수로 바꿀 수 있습니다. - Pretendard 한 서체로 숫자와 스펙이 촘촘해도 또렷하게 읽히게 했습니다. [범위] - 메인, 상품 목록, 상품 상세, 장바구니, 주문, 회원가입, 로그인, 게시판까지 전 페이지 디자인 - PC·모바일 한 벌로 맞추는 반응형, 모바일 하단 탭 메뉴 - 관리자에서 배너, 메인 진열, 분류를 바꾸면 화면에 그대로 반영되도록 카페24 모듈 연결 - 업종에 맞춘 분류 구조와 상품 진열 세팅