후각 자극을 활용한 감각 교육 교재를 개발, 판매하는 브랜드의 공식 쇼핑몰 제작 사례입니다. 풀스크린 히어로 이미지 구성, 혼용 타이포그래피, 브랜드 이해를 돕는 메뉴 설계, 교육 효과 중심의 상세페이지 구현 내용을 정리했습니다.
풀스크린 히어로 이미지
메인 화면은 브라우저 전체를 채우는 배경 이미지 한 장으로 시작합니다. 아이 두 명이 그림책을 함께 보는 장면으로, 자연광을 활용한 따뜻한 분위기의 사진입니다. 배경은 베이지와 아이보리 계열이고, 피사체도 밝고 부드러운 톤으로 전체 화면을 채웠을 때 어색함이 없도록 촬영 단계부터 용도를 고려한 이미지입니다.
화면 비율이 달라져도 이미지 중심부가 유지되도록 배경 위치를 중앙으로 고정하고 배경 크기를 cover로 지정하는 CSS 설정이 기본입니다. 이미지와 텍스트를 각각 따로 결정하고 나중에 합치면 가독성 문제가 생기기 쉬운데, 이 사이트는 촬영 단계부터 텍스트가 올라갈 영역을 비워두는 방식으로 이를 방지했습니다.
히어로 영역 하단에는 스크롤을 유도하는 화살표 아이콘과 "EXPLORE MORE" 텍스트를 배치했습니다. 풀스크린 이미지만 보고 페이지가 끝났다고 여기는 방문자를 붙잡는 장치입니다.
타이포그래피: 손글씨체와 세리프의 조합
히어로 이미지 위 텍스트는 두 가지 폰트를 함께 사용했습니다. 슬로건 앞부분은 흘림체 계열의 손글씨 영문 폰트로, 뒷부분은 무게감 있는 세리프 계열 폰트로 처리했습니다. 글자 크기와 굵기 차이를 두어 나란히 배치되었을 때 리듬감이 생기도록 했습니다.
손글씨체는 알파벳 소문자, 대문자, 숫자, 특수문자 각각의 디자인 완성도가 폰트마다 다르기 때문에 사용할 문자 조합을 미리 확인하고 폰트를 선택해야 합니다. 두 폰트를 나란히 놓았을 때 크기 비율과 기준선(baseline) 정렬이 맞아야 자연스럽게 보이기 때문에, 디자인 시안이 아닌 실제 웹에서 올려보며 조정하는 과정이 필요합니다.
브랜드명은 히어로 영역 오른쪽 하단에 자간을 넓게 벌린 영문 대문자로 별도 표기했습니다. 상단 로고가 내비게이션과 붙어 있어 상대적으로 작게 보이는 문제를 보완하기 위한 선택입니다.
내비게이션과 메뉴 구성
상단 내비게이션은 HOME, ABOUT, OUR TEAM, LILY'S BANK, PRODUCT, THE VALUE, CONTACT 7개 항목으로 구성되어 있습니다. 배경이 투명한 상태로 히어로 이미지 위에 겹쳐 있고, 메뉴 텍스트는 이미지 위에서도 읽힐 수 있도록 밝은 색으로 처리했습니다.
PRODUCT가 다섯 번째에 위치한다는 점이 일반 쇼핑몰과 가장 다릅니다. 후각 교육 교재는 학부모 대부분에게 생소한 카테고리라, 제품보다 브랜드와 교육 철학을 먼저 이해할 수 있도록 관련 페이지들을 앞에 배치했습니다.
| 메뉴 | 성격 | 비고 |
|---|---|---|
| HOME | 풀스크린 히어로 메인 페이지 | |
| ABOUT | 브랜드 배경, 교육 철학 소개 | |
| OUR TEAM | 개발진, 연구진 소개 | 교육 브랜드에서 신뢰 요소로 활용 |
| LILY'S BANK | 브랜드 고유 콘텐츠 섹션 | 명칭만으로 내용 유추 어려움 |
| PRODUCT | 상품 목록 및 구매 페이지 | 다섯 번째 배치 |
| THE VALUE | 교육 효과, 브랜드 가치 설명 | |
| CONTACT | 문의 및 연락처 |
LILY'S BANK는 브랜드 고유 명칭을 사용한 콘텐츠 섹션으로, 교육 자료와 활용 가이드 등을 담는 공간입니다. 브랜드 세계관을 메뉴 명칭에 반영한 것인데, 정체성을 강조하는 효과가 있는 반면 방문자 입장에서는 내용을 바로 짐작하기 어렵습니다.
상품 상세페이지 구성
교육용품 상세페이지는 가격이나 디자인보다 "왜 필요한가", "어떻게 쓰는가", "안전한가"에 대한 설명이 구매 결정에 더 큰 영향을 줍니다. 이 프로젝트에서는 이미지를 길게 이어 붙이는 방식 대신 HTML 구조로 상세페이지를 구성하고, 교육 효과 섹션에는 아이콘과 짧은 텍스트를 나란히 배치하는 방식을 적용했습니다.
| 섹션 | 내용 | 역할 |
|---|---|---|
| 제품 개요 | 제품명, 대표 이미지, 가격, 구성품 | 기본 정보 확인 |
| 교육 효과 설명 | 후각 자극이 두뇌 발달에 미치는 영향 | 구매 필요성 납득 |
| 연령별 활용 안내 | 대상 연령과 활용 방법 | 구매 적합성 판단 |
| 안전성 정보 | 소재, 인증 내용, 주의사항 | 구매 불안 해소 |
| 사용 후기 / Q&A | 실제 구매자 후기, 자주 묻는 질문 | 마지막 의심 해소 |
색상과 디자인 톤
사이트 전체를 관통하는 색상은 베이지, 아이보리, 크림 계열입니다. 히어로 이미지가 이 톤을 중심으로 촬영되었고, 하위 페이지의 배경색, 버튼, 텍스트 색상도 같은 계열에서 선택했습니다. 텍스트는 짙은 회색과 검정을 혼용했고, 강조가 필요한 부분에만 포인트 색상을 사용해 전체 시각적 무게를 일정하게 유지했습니다. 로고에 사용된 파랑 계열이 사이트 전체에서 유일하게 채도가 있는 색상으로, 브랜드 식별 요소로 기능합니다.
