율주식회사 쇼핑몰 포트폴리오

율주식회사쇼핑몰반응형

[온라인 쇼핑몰 구성 및 특징]

'간편하고, 영양 잘 잡힌 한끼'라는 브랜드 메시지를 따뜻한 베이지 톤의 도시락 연출 사진과 함께 히어로에 담고,

신선한 재료·균형 잡힌 영양·간편한 한끼·건강한 선택 네 가지 가치를 아이콘으로 정리해 첫 화면에서 전달했습니다.

전체 화면은 흰 바탕과 차분한 회색·네이비로 절제하고, 가격만 레드로 강조해 음식 사진과 가격이 가장 먼저 눈에 들어오도록 했습니다.

금주의 핫딜은 이탤릭 세리프 'Hot Deal' 타이포로, 이벤트는 사진 배너로 구분해 메인에 리듬을 주었습니다.

데스크톱 디자인

[데스크톱 디자인]

BEST·SALE·건강식단·다이어트식단·고객센터로 메뉴를 단순하게 나누고, 각 목록 페이지는

식당 인테리어 사진 위에 카테고리명을 올린 배너로 시작해 브랜드 분위기를 이어갔습니다.

목록은 왼쪽 가격 필터와 상단 검색창, 4열 상품 그리드로 구성하고

BEST·건강·다이어트 태그를 사진 위에 붙여 식단 성격을 바로 알 수 있게 했습니다.

상세 페이지는 상품 이미지 옆에 판매금액·배송비·옵션·총 주문 금액을 모아 두어

구매 결정에 필요한 정보를 한 화면에서 확인할 수 있습니다.

모바일 반응형 최적화

[모바일 UX/UI]

모바일에서는 로고와 햄버거 메뉴만 남긴 헤더로 화면을 넓게 쓰고,

상품 목록을 2열 그리드로 재배치해 엄지 스크롤만으로 많은 메뉴를 빠르게 훑어볼 수 있게 했습니다.

상세 페이지는 상품 이미지 → 가격·배송 정보 → 옵션 → 장바구니·바로구매

버튼 순으로 세로로 쌓아 구매 흐름이 자연스럽게 이어지도록 했습니다.

상품평 통계도 한 줄씩 세로로 정리해 작은 화면에서도 읽기 쉽게 구성했습니다.

웹사이트 UX/UI 최적화

[웹사이트 UX/UI]

상단에 로그인·장바구니·마이페이지 유틸 메뉴와 검색창을 고정 배치해

어느 페이지에서든 바로 주문 관리와 상품 검색이 가능하도록 했습니다.

상세 페이지는 상세설명·상품/배송/반품·상품평·Q&A 탭으로 정보를 나누고,

긴 상세 이미지는 '상세정보 펼쳐보기'로 접어 스크롤 부담을 줄였습니다.

상품평은 별점순 정렬과 포토상품평 필터로, 배송비는 무료배송 기준 금액을 함께 표기해 구매 전 궁금증을 줄였습니다.