OVERTONE 오버톤 하이파이 오디오 쇼핑몰 디자인

분야: 디자인 · 퍼블리싱 / 웹 / 쇼핑몰, 카페24, 반응형 참여 기간: 2026.10 관련 기술: 카페24 스마트디자인, HTML5, CSS3, JavaScript, 반응형 웹 [프로젝트 개요] 앰프, 턴테이블, 스피커, 헤드폰을 파는 하이파이 오디오 전문점입니다. 따뜻한 먹색 바탕에 앰버 한 색만 써서 불 끈 청음실에서 다이얼만 빛나는 인상을 냈고, 첫 화면에 출력과 주파수 응답을 숫자와 그래프로 먼저 보여 줍니다. 아래로 입력 선택 다이얼, 이번 달 입고, 앰프 출력 계산, 청음실 예약, 시스템 기획전, 청음 후기가 이어집니다. 오디오 기기와 케이블 12종으로 구성했습니다. [주요 기능] 1. 주파수 응답 그래프 - 제품 사진 아래 20Hz~20kHz 로그 눈금 판에 앰버 곡선을 그리고, 슬라이드마다 제품 특성에 맞는 곡선으로 바뀝니다. 2. 입력 선택 다이얼 - 앰프 입력 셀렉터 모양 노브를 돌려 분류를 고르면 옆 진열이 걸러집니다. 3. 스펙 3칸 카드 - 모델 코드와 이름 아래 출력, 임피던스, 응답 범위 세 칸 표를 넣고 가격과 할인율을 이어 적었습니다. 4. 앰프 출력 계산과 미터 - 스피커 감도와 방 크기, 청취 거리, 음악 종류를 넣으면 채널당 권장 출력이 나오고 미터 바늘이 움직이며 몰의 앰프와 맞는지 표시됩니다. 5. 청음실 예약 - 7일 날짜와 시간대별 남은 자리, 듣고 싶은 조합을 고르면 예약 요청 버튼 문구가 바뀝니다. [디자인] - 따뜻한 먹색 바탕과 판, 앰버 한 색을 할인율과 활성 표시, 그래프 곡선에만 썼습니다. - 제목은 Noto Serif KR, 본문과 숫자는 Pretendard입니다. - 모서리를 거의 두지 않고 그림자 없이 선으로 구획했습니다. [범위] - 메인 페이지 PC·모바일 반응형 디자인과 퍼블리싱 - 상품 카드는 반복 구조로 짜서 카페24 메인 진열 모듈로 옮길 수 있는 구조