왜 안경원 홈페이지는 ‘진열’에서 출발하는가
안경원 홈페이지 제작에서 가장 먼저 푸는 문제는 디자인이 아니라 선택의 망설임입니다. 손님은 “내 얼굴에 맞는 게 뭔지 모르겠다”는 마음으로 매장 문 앞에서 머뭇거립니다. 그래서 이 안경원 홈페이지는 “여기 프레임은 잘 정제돼 있고, 골라보기 쉽다”를 0.3초에 전하는 것을 1번 목표로 잡았습니다. 핵심 행동은 단 두 가지 — 프레임을 둘러보다 마음이 가면 그대로 방문 예약으로, 더 알고 싶으면 제품 안내로 이어지게 동선을 좁혔습니다.
색: 스톤 화이트의 갤러리, 신뢰의 잉크블루
바탕은 차가운 형광 흰색이 아니라 뉴트럴 스톤 화이트(#fafafa·#f2f1ee)입니다. 프레임이 주인공인 진열대는 배경이 조용해야 안경테의 색과 형태가 또렷이 살아납니다. 그래서 미색에 가까운 중성 화이트를 깔아 ‘갤러리의 벽’처럼 비워 두고, 시그널 한 가지로 잉크블루(#22467a)만 또렷하게 썼습니다. 버튼·추천 강조·필터 선택 상태가 모두 이 한 색으로 모여, 손님의 눈이 ‘다음에 무엇을 누를지’ 헤매지 않습니다. 보조 웜(메탈/혼 느낌)은 추천 칩에만 절제해 써 ‘정제된 리테일’의 인상을 남겼습니다.
타이포: 또렷한 진열 라벨
프레임 이름·소재·가격 같은 진열 정보는 또렷함이 생명입니다. 본문은 Pretendard로 가독성을 확보하고, 헤드라인은 글자 사이를 좁혀(letter-spacing) 갤러리 캡션처럼 단정하게 잡았습니다. 한글은 word-break를 어절 단위(keep-all)로 묶어 ‘초경량 메탈·라운드’ 같은 라벨이 음절 중간에서 어색하게 끊기지 않게 했고, 제목은 balance·본문은 pretty로 줄을 정돈해 진열대처럼 가지런히 읽히게 했습니다.
이미지: 프레임만 또렷하게, 사람은 비우고
히어로와 카드 이미지는 일부러 모델의 얼굴 대신 프레임 그 자체를 주인공으로 둡니다. 안경은 ‘남이 쓴 모습’보다 ‘내가 골랐을 때’가 중요하기 때문입니다. 사진이 준비되기 전에도 name-first 방식으로 슬롯과 안경 도형(SVG) 폴백이 먼저 자리를 채워, 빈 칸이나 깨진 이미지 없이 진열대가 완성된 채로 보입니다. 사진은 webp로 교체만 하면 되고, 가로·세로 크기를 미리 지정해 레이아웃이 튀지 않게(CLS 0) 했습니다. 진열 예시·가격은 모두 ‘예시’임을 화면에 표시해, 실제 매장과 혼동되지 않게 정직하게 알렸습니다.
구조와 전환: 둘러보다 예약까지
프레임 컬렉션을 스타일(라운드·스퀘어·보스턴·캣아이·메탈)과 얼굴형으로 좁히는 필터를 갤러리 위에 얹어, 손님이 자기 취향을 스스로 정제하게 했습니다. 그 아래로 ‘검안 안내 → 큐레이션 기준 → 방문 예약·오시는 길’을 한 줄기로 이어, 둘러보다 마음이 든 순간 바로 예약 폼에 닿게 했습니다. 상단 유틸바·히어로 CTA·하단 모바일 액션바까지 모든 동선이 방문 예약과 제품 안내 하나로 모이게 했습니다. 안경원 홈페이지 제작에서 디자인의 목적은 결국 ‘한 번의 방문’입니다.
모바일에서 시작되는 방문
손님은 대개 퇴근길이나 점심시간에, PC가 아니라 휴대폰으로 동네 안경원을 찾습니다. 그래서 이 사이트는 모바일을 먼저 설계했습니다. 작은 화면에서도 프레임 카드와 영업시간이 한눈에 들어오고, 화면 하단 고정 액션바로 어디서든 한 번의 터치에 전화·방문 예약이 닿도록 했습니다. 필터는 자바스크립트가 막혀도 동작하도록 가볍게 짜 안정적입니다. 데스크톱에서는 여백과 갤러리 진열로 ‘정제된 큐레이션’을 키우고, 모바일에서는 속도와 예약 동선을 키워, 같은 페이지가 두 맥락 모두에서 제 역할을 하도록 맞췄습니다.
정직과 발견(의료기기 표현·GEO)
시력보정용 안경·콘택트렌즈는 의료기기이므로, 시력교정의 치료·진단 효과를 단정하지 않았습니다. 검안 절차는 ‘문진 → 정밀 시력측정 → 렌즈·도수 상담 → 피팅’으로 사실대로만 안내하고, “질환의 진단·치료를 보장하지 않으며 안질환이 의심되면 안과 진료를 권한다”는 문구를 곳곳에 정직하게 넣었습니다. 가짜 후기나 지어낸 수치는 쓰지 않고, 가격·재고는 운영 단계에서 연결하도록 비워 두었습니다. 동시에 “안경 맞춤 비용”, “시력검사 예약”처럼 손님이 실제로 검색하는 질문에 답하는 FAQ와 구조화 데이터(Optician·FAQPage 스키마)를 넣어 — 검색엔진과 AI 답변 양쪽에서 안경원 홈페이지 제작 사례로 발견되게 했습니다. 보기 좋은 사이트가 아니라, 표현 규정을 지키면서도 찾아지고 방문으로 이어지는 사이트를 목표로 했습니다.