FILLGRAM 필그램 리필 스테이션 쇼핑몰 디자인

분야: 디자인 · 퍼블리싱 / 웹 / 쇼핑몰, 카페24, 반응형 참여 기간: 2026.10 관련 기술: 카페24 스마트디자인, HTML5, CSS3, JavaScript, 반응형 웹 [프로젝트 개요] 세제와 샴푸 같은 원액을 필요한 만큼 그램 단위로 파는 리필 가게입니다. 첫 화면에 무게 계산기를 두어 원액을 고르고 양을 정하면 금액이 바로 계산되고, 택배 리필과 방문 리필 가운데 고를 수 있습니다. 상품 카드는 원액 통 라벨처럼 만들어 100g당 단가와 용량 칩을 붙였고, 아래로 스테이션 탱크 잔량, 빈 용기 반납 적립, 포장 없는 고체 제품, 방문 안내가 이어집니다. [주요 기능] 1. 무게 계산기 - 원액을 고르고 0~2kg 슬라이더를 밀면 그램 수와 g당 단가, 금액이 큰 숫자로 계산되고 택배 리필과 방문 리필 버튼이 이어집니다. 2. 원액 통 라벨 카드 - 사진 아래 선 상자에 100g당 단가 띠를 두고, 용량 칩을 누르면 가격이 바뀝니다. 3. 오늘 스테이션 탱크 - 원액별 잔량을 막대와 kg으로 보여 주고 적게 남은 원액은 노랑으로 표시해 입고 예정을 알립니다. 4. 빈 용기 반납 적립 - 반납할 용기 종류와 개수를 넣으면 받을 적립금이 계산됩니다. 5. 스테이션 방문 안내 - 용기 무게 빼는 법과 공병 대여처럼 매장 이용 순서를 표로 정리했습니다. [디자인] - 연두와 진한 잎색, 연두 면으로 리필 가게의 가벼운 인상을 냈습니다. - Pretendard 한 서체에 숫자는 고정폭으로 맞추고 계산 결과를 아주 크게 썼습니다. - 카드는 저울 라벨처럼 선 상자로 정보를 묶었습니다. [범위] - 메인 페이지 PC·모바일 반응형 디자인과 퍼블리싱 - 상품 카드는 반복 구조로 짜서 카페24 메인 진열 모듈로 옮길 수 있는 구조