성진에스앤에프 반응형 쇼핑몰 제작 사례

PORTFOLIO

다양한 분야의 경험과 전문가의 노하우로
모두가 만족할 결과물을 제시해 드립니다.

Drawing on extensive experience across diverse fields and expert know-how,
we deliver outcomes that satisfy everyone.

PORTFOLIO

성진에스앤에프 반응형 독립형 쇼핑몰제작 2024/06

[메인 화면 기획]

상조용품을 찾는 순간의 무게를 먼저 헤아려, 검은 배경 위 흰 국화 한 송이를 메인 비주얼로 두고

첫 화면부터 정중한 추모의 분위기를 전하도록 기획했습니다.

'대한민국 공군'과 '공군 가족을 위한 365일 주문' 메시지로 이용 대상을 분명히 하고,

주문하기 버튼 하나와 근조화환·300인 상조용품 슬라이드만 배치해 경황이 없는 상황에서도 바로 주문으로 이어지도록 구성했습니다.

메인페이지

[메인 디자인]

상조라는 업의 성격에 맞춰 블랙·화이트·그레이의 모노톤으로 컬러를 절제하고,

장식 요소를 덜어 낸 넓은 여백으로 차분하고 진중한 인상을 만들었습니다.

제품 영역은 둥근 모서리의 그레이 'Products' 블록과 흰 카드로 부드럽게 정돈해 무거운 히어로와 균형을 맞췄으며,

블랙 푸터에 회사 정보와 연락처를 담아 전체 톤을 단정하게 마무리했습니다.

컨텐츠디자인
간결한 레이아웃의 상품 구성 화면 디자인

[콘텐츠 디자인]

서브페이지 상단은 그레이 그라데이션 배너에 페이지명만 두어 메인의 차분한 톤을 이어 가도록 디자인했습니다.

주문서 목록은 상품 수를 먼저 알려 주고 이미지·상품명·가격·할인율을 담은 카드로 정리했으며,

상품 상세는 왼쪽에 큰 상품 이미지, 오른쪽에 상품명·옵션·구매 버튼을 배치해

확인부터 주문까지를 한 화면에서 끝낼 수 있도록 구조화했습니다.

웹사이트 UX/UI 최적화
반응형 독립형 쇼핑몰 사용자 인터페이스 예시

[웹사이트 UX/UI]

GNB를 주문서·배송조회·게시판·Q&A의 4개 메뉴로 단순화해 주문과 사후 확인 동선을 짧게 설계했습니다.

상세 페이지에서는 바로구매를 진한 블랙 버튼으로, 장바구니는 테두리 버튼으로 구분해 주요 행동이 먼저 눈에 들어오도록 했고,

배송조회는 로그인 안내 후 회원 전용으로 연결해 주문 정보를 안전하게 확인할 수 있도록 했습니다.

모바일에서는 햄버거 메뉴로 전환해 어디서든 주문할 수 있게 했습니다.