왜 카페 홈페이지는 ‘분위기’에서 출발하는가
카페 홈페이지 제작에서 가장 먼저 푸는 문제는 기능이 아니라 분위기입니다. 손님이 카페를 고를 때 머릿속에서 던지는 질문은 단순합니다 — “여기 따뜻해 보이나?”, “사진 찍기 좋나?”, “오래 앉아 있어도 될까?”. 그래서 이 카페 홈페이지는 메뉴 글자보다 먼저 공간의 온도를 0.3초에 전하는 것을 1번 목표로 잡았습니다. 화면을 연 순간 ‘아, 여기 가고 싶다’가 들면 절반은 성공입니다. 실제 데모에서도 가장 먼저 보이는 건 가격표가 아니라 따뜻한 조명의 매장 한 컷입니다.
풀블리드 히어로: 사진이 곧 첫인상
카페는 ‘본 것’으로 결정됩니다. 그래서 데모의 히어로는 화면을 꽉 채우는 풀블리드 사진 위에 어두운 그라데이션을 얹고, 그 위에 크림색 카피 “매일 직접 볶아 오늘의 한 잔을 내립니다”를 올렸습니다. 글씨가 사진을 가리는 게 아니라, 사진이 글씨의 배경이 되도록 명도를 조절했습니다. 카페 홈페이지 제작에서 히어로 한 장은 메뉴 열 줄보다 강합니다 — 첫 화면이 곧 손님의 첫인상이기 때문입니다.
색: 크림 바탕 · 에스프레소 잉크 · 테라코타 신호
바탕은 크림(#f7f0e6)과 페이퍼(#fffaf3) — 갓 내린 라떼와 원목 테이블의 색입니다. 글자와 깊은 면은 에스프레소(#2c1a10) 갈색으로 눌러 묵직한 안정감을 주고, ‘여기를 눌러’라는 신호(버튼·가격·강조)에만 테라코타(#c2613b)를 절제해 썼습니다. 흔한 카페 사이트의 새하얀 배경 대신 따뜻한 크림을 깔아, 화면 자체가 한 잔의 커피처럼 느껴지게 한 것이 이 색 선택의 이유입니다. 점으로 흩뿌린 노이즈 텍스처(.ph::after)까지 더해 종이 질감의 손맛을 남겼습니다.
타이포: 고운바탕 명조의 손길
헤드라인에 고운바탕(명조)을 쓴 건 분명한 의도입니다. 고딕의 또렷함 대신, 명조의 부드러운 획은 손으로 내린 커피·정성·아날로그 감성을 시각으로 전합니다 — 로스터리 카페의 결과 정확히 맞습니다. 본문은 Pretendard로 가독성을 확보하고, 한글은 keep-all과 text-wrap:balance로 줄바꿈을 다듬어 어절이 어색하게 끊기지 않게 했습니다. 감성은 폰트에서 시작됩니다.
구조와 동선: 분위기에서 방문까지
화면을 연 손님이 마지막에 ‘가봐야지’가 되려면 동선이 분명해야 합니다. 그래서 데모는 히어로 → 한 줄 소개(답변블록) → 로스팅 스토리(당일 로스팅·로스팅 경력) → 메뉴 카드(시그니처 6종 + 전체 가격표 펼치기) → 공간 갤러리 → 영업시간·오시는 길(지도 자리 + 인근 역 도보 안내) → 예약·단체 → 인스타그램 → FAQ → 마지막 CTA 순으로 흘러갑니다. 메뉴는 사진·이름·가격·뱃지(시그니처/베스트/계절 한정)를 한 카드에 담아 ‘무엇을, 얼마에’를 한눈에 보여주고, 자주 바뀌는 메뉴를 위해 전체 가격표는 접었다 펴는 details로 가볍게 처리했습니다. 모든 길은 결국 오시는 길 한 곳으로 모입니다 — 카페 홈페이지 제작의 목적은 결국 ‘한 번의 방문’이니까요.
모바일에서 시작되는 방문
손님은 대개 사무실 PC가 아니라, 약속 장소를 찾다가 휴대폰으로 카페를 검색합니다. 그래서 이 사이트는 모바일을 먼저 설계했습니다. 작은 화면에서도 히어로 사진·시그니처 메뉴·영업시간이 한눈에 들어오고, 메뉴 그리드는 3열에서 1열로 자연스럽게 접히며, 화면 어디서든 한 번의 터치로 길찾기·전화로 닿게 했습니다. 데스크톱에서는 넓은 여백과 큰 사진으로 분위기를 키우고, 모바일에서는 속도와 ‘오시는 길’ 동선을 키워, 같은 페이지가 두 맥락 모두에서 제 역할을 하도록 맞췄습니다.
정직과 발견(GEO): 지역 검색과 인스타
카페는 지역 검색으로 발견됩니다 — “동네 이름 + 카페”, “근처 로스터리”, “노트북 하기 좋은 카페”처럼요. 그래서 데모에는 위치·영업시간·정기휴무를 명확한 텍스트와 구조화 데이터(CafeOrCoffeeShop·openingHours)로 넣어 검색엔진과 AI 답변 양쪽이 정확히 읽게 했고, 인스타그램 피드를 페이지에 이어 붙여 ‘살아있는 카페’임을 보여줬습니다. 평점·후기는 지어내지 않습니다(가짜 금지). 대신 손님이 실제로 검색하는 질문에 FAQ로 답해, 보기 좋은 사이트가 아니라 찾아지고 방문으로 이어지는 카페 홈페이지 제작을 목표로 했습니다.