SUBFOUR 서브포 러닝 피트니스 쇼핑몰 디자인

분야: 디자인 · 퍼블리싱 / 웹 / 쇼핑몰, 카페24, 반응형 참여 기간: 2026.10 관련 기술: 카페24 스마트디자인, HTML5, CSS3, JavaScript, 반응형 웹 [프로젝트 개요] 대회를 준비하는 러너를 위한 러닝 피트니스 몰입니다. 사진을 평행사변형으로 잘라 화면 전체가 앞으로 기울어 달리는 느낌을 냈고, 첫 화면에 목표 페이스 숫자와 상품 세 개를 함께 올렸습니다. 아래로 많이 신은 기어, 페이스 계산기, 레이스 준비 기획전, 보강 운동 용품, 기록 인증 후기가 이어집니다. 러닝화, 러닝 의류, 보급품, 보강 운동 도구로 구성했습니다. [주요 기능] 1. 사선 첫 화면 - 평행사변형으로 자른 사진과 기울인 헤드라인, 검정 사선 판 위 목표 페이스 숫자를 두고 아래 띠에 상품 세 개와 가격을 붙였습니다. 2. 페이스 계산기 - 거리와 목표 기록을 넣으면 1km 페이스와 400m 기록, 시속, 5km 지점 기록이 나오고 페이스 구간에 맞는 러닝화 세 켤레와 한 번에 담기 합계가 바뀝니다. 3. 페이스 칩 카드 - 평행사변형 순위 배지와 무게, 드롭, 권장 페이스 칩을 카드에 붙였습니다. 4. 기록 인증 후기 - 거리 배지와 이전 기록, 새 기록을 큰 숫자로 보여 주고 구매 상품을 연결했습니다. 5. 기울어진 화면 요소 - 버튼과 검색창, 카테고리 칸, 계산기 밴드를 같은 각도로 기울여 속도감을 이어 갔습니다. [디자인] - 흰 바탕과 잉크, 아스팔트 회색 한 밴드에 블레이즈 오렌지를 할인율과 순위, 주 버튼에 썼습니다. - 한글은 기울인 Pretendard, 숫자와 영문은 넓은 폭 Archivo 이탤릭입니다. - 상품 카드는 1:1 비율로 놓았습니다. [범위] - 메인 페이지 PC·모바일 반응형 디자인과 퍼블리싱 - 상품 카드는 반복 구조로 짜서 카페24 메인 진열 모듈로 옮길 수 있는 구조