산지도 SANJIDO 지역 특산물 쇼핑몰 디자인

분야: 디자인 · 퍼블리싱 / 웹 / 쇼핑몰, 카페24, 반응형 참여 기간: 2026.10 관련 기술: 카페24 스마트디자인, HTML5, CSS3, JavaScript, 반응형 웹 [프로젝트 개요] 여러 지역의 농수축산 특산물을 모아 파는 로컬 마켓입니다. 첫 화면에 9개 도를 남색 사각 타일로 배치한 지도를 두어 어느 지역 것을 살지부터 고르게 했습니다. 상품 카드마다 산지 꼬리표와 생산자, 중량, 100g당 단가, 보관 방법, 출고일을 적었고, 아래로 지역별 장보기, 이번 주 산지 출고표, 생산자 소개, 산지 기획전이 이어집니다. 9개 도 15개 품목으로 구성했습니다. [주요 기능] 1. 타일 지도와 지역 패널 - 9개 도를 남색 사각 타일로 놓고 판매 중 상품 수와 대표 품목을 적었습니다. 누르면 오른쪽 패널이 그 지역의 이번 주 출고 상품과 생산자 수로 바뀝니다. 2. 산지 정보 카드 - 사진 위 산지 꼬리표와 생산자명, 중량, 100g당 단가, 냉장, 냉동, 실온 보관 배지, 출고일을 한 카드에 담았습니다. 3. 지역 탭 - 강원, 경기, 충청, 전라, 경상, 제주 탭에 상품 수를 붙이고 누르면 4열 진열이 바뀝니다. 4. 이번 주 산지 출고표 - 산지, 상품, 생산자, 수확일, 출고일, 남은 수량 막대, 판매가, 담기를 한 줄 표로 정리했고 모바일에서는 카드형으로 접힙니다. 5. 생산자 소개 - 현장 사진과 경력, 재배 면적, 상품 수를 숫자 세 칸으로 보여 주고 대표 상품으로 연결합니다. [디자인] - 남색 지도 타일과 흙빨강 포인트, 차가운 회색 판으로 공공 장터의 신뢰감을 정돈했습니다. - Pretendard 한 서체에 숫자는 고정폭으로 맞췄습니다. - 상품 카드는 1:1 비율에 모서리 없이 4열로 놓았습니다. [범위] - 메인 페이지 PC·모바일 반응형 디자인과 퍼블리싱 - 상품 카드는 반복 구조로 짜서 카페24 메인 진열 모듈로 옮길 수 있는 구조