왜 꽃집 홈페이지는 ‘상황’에서 출발하는가
꽃집 홈페이지 제작에서 가장 먼저 푸는 문제는 상품 목록이 아니라 상황입니다. 손님은 꽃 이름이나 가격을 알고 오지 않습니다 — 대개 “생일인데 뭘 보내지”, “개업 축하 화환은 얼마지”, “빈소에 근조화환을 늦지 않게 보내야 하는데”처럼 마음과 사정이 먼저 있습니다. 그래서 이 꽃집 홈페이지는 꽃 종류를 나열하기 전에, 손님의 상황을 먼저 묻는 구조를 1번 목표로 잡았습니다. 데모의 첫 섹션부터 ‘생일·기념일·개업·근조·졸업’을 카드로 펼쳐, 손님이 자기 사정을 한 번에 짚게 한 이유입니다.
색: 크림 바탕 · 더스티 로즈 신호 · 세이지의 식물성
바탕은 크림(#fbf7f1)과 페이퍼(#fffdf9) — 꽃을 감싸는 부드러운 포장지와 자연광의 색입니다. ‘여기를 눌러’라는 신호(버튼·강조·가격)에는 더스티 로즈(#c08497, 깊은 톤 #a96b80)를 절제해 써서 장미의 감성과 따뜻함을 더했고, 잎·줄기·식물성을 떠올리게 하는 세이지 그린(#8a9a7b)을 보조 신호로 두어 ‘살아있는 꽃’의 결을 남겼습니다. 흔한 쇼핑몰의 새하얀 배경과 빨강 세일 배지 대신 크림과 흐린 로즈를 깔아, 화면 자체가 한 다발의 꽃처럼 차분하고 다정하게 느껴지게 한 것이 이 색 선택의 이유입니다.
타이포: 고운바탕 명조의 손길
헤드라인에 고운바탕(명조)을 쓴 건 분명한 의도입니다. 고딕의 또렷함 대신, 명조의 부드러운 획은 손으로 묶은 꽃다발·정성·아날로그 감성을 시각으로 전합니다 — 감성 플라워샵의 결과 정확히 맞습니다. “오늘의 마음을 한 다발에 담아 보내요” 같은 히어로 카피는 명조로 앉혀 한 통의 편지처럼 읽히게 했고, 본문은 Pretendard로 가독성을 확보했습니다. 한글은 keep-all과 text-wrap:balance로 줄바꿈을 다듬어 ‘한 다발’ 같은 어절이 어색하게 끊기지 않게 했습니다. 감성은 폰트에서 시작됩니다.
시그니처: 상황별 필터 한 번으로 좁히기
이 데모의 핵심 인터랙션은 상황별 필터입니다. 상품 섹션 위에 ‘전체·생일·기념일·개업·근조·졸업’ 칩을 두고, 칩을 누르면 그 상황에 어울리는 꽃다발·꽃바구니·화분·근조화환만 부드럽게 추려져 나타납니다(자바스크립트는 외부 라이브러리 없이 가볍게, 화면에 보이는 개수를 실시간으로 알려주고 스크린리더에도 안내합니다). 막막한 손님이 ‘내 상황 하나’만 누르면 선택지가 단번에 좁아지는 것 — 꽃집 홈페이지 제작에서 이 한 번의 좁히기가 긴 상품 목록보다 강합니다.
구조와 동선: 감성에서 주문까지
화면을 연 손님이 마지막에 ‘주문해야지’가 되려면 동선이 분명해야 합니다. 그래서 데모는 히어로 → 한 줄 소개(답변블록) → ‘무엇을 고를지 막막하죠’ 공감 → 상황별 추천 카드 → 상황별 필터가 달린 상품 그리드(가격은 예시로 정직하게 표기) → 정기구독 → 주문·배송 안내 → 오시는 길 → FAQ → 마지막 CTA 순으로 흘러갑니다. 상품 카드마다 ‘주문 문의’ 버튼을 배송 안내로 이어 붙여, 모든 길이 결국 한 번의 주문 문의로 모이게 했습니다. 꽃은 충동이 아니라 ‘마음을 정한 순간’에 주문되기에, 그 순간을 놓치지 않는 동선이 디자인의 목적입니다.
모바일에서 시작되는 주문
손님은 대개 사무실 PC가 아니라, 부고 문자나 생일 알림을 받은 그 자리에서 휴대폰으로 꽃집을 찾습니다. 그래서 이 사이트는 모바일을 먼저 설계했습니다. 작은 화면에서도 상황별 카드·시그니처 상품·당일배송 안내가 한눈에 들어오고, 상품 그리드는 3열에서 1열로 자연스럽게 접히며, 화면 어디서든 한 번의 터치로 주문 문의·전화로 닿게 했습니다. 데스크톱에서는 넓은 여백과 큰 꽃 사진으로 감성을 키우고, 모바일에서는 속도와 ‘주문 문의’ 동선을 키워, 같은 페이지가 두 맥락 모두에서 제 역할을 하도록 맞췄습니다.
정직과 발견(GEO): 상황 검색과 당일배송
꽃집은 상황 검색으로 발견됩니다 — “근처 꽃집 당일배송”, “개업 화환 가격”, “근조화환 주문”, “생일 꽃다발 배달”처럼요. 그래서 데모에는 취급 상품(꽃다발·꽃바구니·화분·근조화환)과 당일배송·배송지역을 명확한 텍스트와 구조화 데이터(Florist·openingHours·makesOffer)로 넣어 검색엔진과 AI 답변 양쪽이 정확히 읽게 했고, 손님이 실제로 검색하는 질문에 FAQ로 답했습니다. 가격·상호·주소는 모두 ‘예시’로 정직하게 표기해 지어내지 않았습니다(가짜 금지). 보기 좋은 사이트가 아니라, 찾아지고 주문으로 이어지는 꽃집 홈페이지 제작을 목표로 했습니다.