GRAMDAY 그램데이 식단 도시락 쇼핑몰 디자인

분야: 디자인 · 퍼블리싱 / 웹 / 쇼핑몰, 카페24, 반응형 참여 기간: 2026.10 관련 기술: 카페24 스마트디자인, HTML5, CSS3, JavaScript, 반응형 웹 [프로젝트 개요] 식단 도시락과 단백질 간식을 파는 몰입니다. 사진보다 영양성분표가 주인공이 되도록 첫 화면 오른쪽에 성분표를 그대로 크게 그리고, 모든 카드에 영양표와 단백질 1g당 가격을 붙여 숫자로 비교하게 했습니다. 아래로 많이 담은 도시락, 목표별 플랜 만들기, 다음 주 식단표, 단백질 간식, 사진 후기가 이어집니다. [주요 기능] 1. 영양성분표 첫 화면 - 굵은 인디고 괘선의 성분표에 열량을 큰 숫자로 쓰고 1일 기준치 비율 가운데 단백질 행만 막대로 강조했습니다. 판매가와 플랜가를 함께 둡니다. 2. 숫자로 고르기 - 단백질 30g 이상, 400kcal 이하처럼 숫자 조건 여섯 칸에 해당 상품 수를 붙였습니다. 3. 영양표 카드 - 모든 카드에 네 칸 영양표와 단백질, 탄수화물, 지방 비율 막대, 단백질 1g당 가격을 넣었습니다. 4. 목표별 플랜 만들기 - 목표와 체중, 끼니, 기간을 넣으면 하루 단백질 목표와 도시락으로 채우는 양, 팩 수, 끼당 가격, 합계가 계산됩니다. 5. 다음 주 식단표 - 월~금 점심과 저녁 표를 감량과 근육 증가 플랜으로 바꿔 보고 하루 평균 열량과 주문 마감 시각을 확인합니다. [디자인] - 흰 바탕에 인디고 한 색을 세 단계 명도로 나눠 막대와 포인트에 썼고 할인도 인디고로 표시합니다. - 한글은 Pretendard, 숫자와 로고는 넓은 폭 Archivo입니다. - 상품 카드는 1:1 비율에 모서리를 살짝 둥글렸습니다. [범위] - 메인 페이지 PC·모바일 반응형 디자인과 퍼블리싱 - 상품 카드는 반복 구조로 짜서 카페24 메인 진열 모듈로 옮길 수 있는 구조