개요
한 줄 요약 — 펫팜(PET PHARM.)은 ‘우리동네 동물약국’을 표방하는 반려동물 의약품 플랫폼이다. 첫 화면은 크림빛 배경 위에 반려견과 보호자가 마주 앉은 따뜻한 사진 한 장, 그리고 화면을 가로지르는 굵은 ‘PET PHARM.’ 워드마크로 열린다. 사용자가 여기서 할 일은 군더더기 없이 명확하다. 나와 가장 가까운 동물약국을 찾고, 필요한 동물의약품을 검색하는 것. 여기에 판매 신고를 마친 약국을 대상으로 반려동물 의약품·건강기능식품을 공급하는 B2B ‘펫팜 MALL’이 또 하나의 축으로 붙는다.
이번 리뷰는 두 개의 질문을 따라간다. 사진 중심의 감성적인 톤이 ‘검색’이라는 실용적 과업을 얼마나 매끄럽게 받쳐주는가. 그리고 이 브랜드가 쌓아 올린 인상이 지역 기반 서비스의 발견 가능성, 즉 검색 노출과 성능으로 이어질 수 있는가. 화면에 실제로 드러난 요소만 근거로 UX/UI를 짚어본다.
브랜드 & 메시지
펫팜이 말을 거는 방식은 이 사이트에서 가장 값진 자산이다. 히어로 아래 등장하는 헤드라인은 ‘우리동네 동물약국 / 나와 가장 가까운 위치에서 / 탐색 해보세요’라는 문장 사이사이에 알약 캡슐 모양으로 잘라낸 강아지 사진을 끼워 넣는다. 카피와 이미지를 한 호흡으로 엮는 이 장치는 ‘약’과 ‘반려동물’이라는 두 키워드를 동시에 각인시키고, 자칫 사무적으로 흐르기 쉬운 의약품 서비스에 온기를 불어넣는다.
톤앤매너는 크림·세피아·다크브라운으로 절제돼 있다. 화려한 원색을 걷어내고 필름 사진 같은 갈색 계열로 통일한 선택은, 반려동물을 ‘사랑하는 마음에서 시작됐다’는 소개 문구의 정서를 색으로 번역해낸다. ‘WHAT’S PETPHARM?’라는 초대형 헤드라인은 브랜드 스토리 구간의 문을 시원하게 열어젖힌다.
CTA는 역할이 또렷하게 갈린다. 오벌 카드 안의 ‘동물약국 찾기’ 버튼이 1차 전환을 맡고, ‘펫팜 MALL 바로가기’와 ‘펫팜소개 바로가기’ 링크가 각각 커머스와 브랜드 스토리로 갈래를 나눠 안내한다. 상단 글로벌 네비게이션은 소개와 서비스 중심으로 항목을 최소화해 시선을 흩뜨리지 않는다. 페이지 끝자락에서는 ‘NEIGHBORHOOD PET PHARM’이 흐르는 다크 밴드가 슬로건을 리듬감 있게 반복하며 마무리를 짓는다.
UX/UI 관점
화면에서 확인되는 웹디자인 강점은 뚜렷하다. 첫째, 캡슐 모양 이미지 컷아웃이다. 알약 형태로 잘라낸 사진은 ‘동물약국’이라는 업의 본질과 형태적으로 맞아떨어지며, 장식이 곧 메시지가 되는 드문 사례다. 둘째, 두 개의 오벌 카드를 좌우로 병치해 ‘가까운 동물약국 찾기’와 ‘동물의약품 찾기’라는 핵심 과업을 한눈에 선택하게 만든 결단력이다. 진입 경로를 둘로 압축한 덕에 사용자는 고민 없이 다음 행동으로 넘어간다.
셋째, 타이포 대비다. ‘WHAT’S PETPHARM?’처럼 초대형 헤드라인으로 섹션 진입점을 못 박아, 스크롤만으로 콘텐츠의 리듬을 감지하게 한다. 넷째, 넉넉한 여백이다. 크림 배경 위 충분한 화이트스페이스가 사진의 질감을 살리고 시선의 호흡을 만든다. 다섯째, 편집형 레이아웃이다. 큰 사진 옆에 작은 썸네일을 겹쳐 배치해, 밋밋해지기 쉬운 소개 구간에 잡지 같은 위계를 부여했다. 여섯째, 일관된 형태 언어다. 버튼·카드·이미지 컷아웃이 모두 둥근 모서리와 캡슐 곡선으로 통일돼, 페이지 전체가 하나의 시스템처럼 읽힌다.
IA·SEO 전략
펫팜은 위치 기반 검색이 서비스의 심장인 만큼, IA·SEO의 무게중심도 로컬 SEO에 실려야 한다. ‘가까운 동물약국 찾기’가 첫 화면의 주력 행동이라면, 검색 결과로 도달하는 약국 상세와 의약품 상세는 반드시 각각 고유한 URL로 인덱싱되어야 한다. 지금처럼 한 화면을 스크롤로 훑는 원페이지 인상이 강하면, 정작 사용자가 검색엔진에서 ‘○○동 동물약국’으로 진입할 접점이 사라진다.
구체적으로는 세 갈래를 권한다. 하나, 지역명과 ‘동물약국’을 조합한 랜딩(예: 강남구 동물약국)을 자동 생성하고 각 페이지에 고유 <title>·meta description을 부여한다. 둘, 약국은 LocalBusiness/Pharmacy, 의약품은 Product/Drug 구조화 데이터로 마크업해 지도·리치 결과 노출을 노린다. 셋, 지도와 검색 결과가 자바스크립트로만 그려진다면 크롤러가 읽지 못하므로 SSR 또는 프리렌더로 텍스트를 확보한다. 사진 파일명과 alt에 지역·품목 키워드를 담는 것도 이런 이미지 중심 사이트에서는 놓치기 쉬운 검색 자산이다.
성능·접근성
이 사이트의 성능은 결국 사진과의 싸움이다. 대형 히어로 이미지와 캡슐 컷아웃, 편집형 썸네일이 곳곳에 깔린 구조에서 LCP를 지키려면, 이미지를 WebP/AVIF로 병행 제공하고 반응형 srcset으로 뷰포트별 용량을 나눠야 한다. 히어로만 프리로드하고 나머지는 지연 로딩으로 돌리면 첫 페인트가 눈에 띄게 빨라진다. 캡슐 마스킹 이미지마다 명시적 width/height를 지정해 레이아웃이 밀리는 CLS도 함께 막아야 한다.
접근성은 세피아 팔레트의 그늘을 살펴야 한다. 갈색 텍스트가 크림 배경 위에 올라앉는 저채도 조합은 감성적이지만 대비가 낮아지기 쉽다. 본문과 버튼 라벨이 WCAG AA 기준을 통과하는지 점검하고, 히어로 사진 위 흰 텍스트에는 그라디언트 오버레이로 가독성을 확보하는 편이 안전하다. 하단 마퀴 같은 흐르는 애니메이션은 transform 기반으로 처리하고 prefers-reduced-motion을 존중해야 한다. 무엇보다 검색·지도 결과는 키보드만으로도 끝까지 탐색·선택할 수 있어야 한다.
디지털 파트너 더블루캔버스
반려동물 헬스케어, 동물약국, 병·의원과 약국을 잇는 O2O 플랫폼은 감성과 검색 성능을 동시에 잡아야 하는 까다로운 장르다. 사진으로 신뢰와 온기를 전하면서도, 사용자가 원하는 약국과 의약품을 몇 초 안에 찾게 만들어야 한다. 펫팜이 보여준 세피아 감성 브랜딩은 훌륭한 출발점이지만, 그 인상을 로컬 SEO와 빠른 검색 응답으로 완결하는 일은 또 다른 영역의 과제다.
The Blue Canvas는 바로 이 지점을 메운다. 브랜드 결을 살린 홈페이지 제작과 웹디자인에서 시작해, 지역 키워드를 겨냥한 검색엔진 최적화(SEO), 전환을 끌어올리는 퍼포먼스 마케팅까지 하나의 흐름으로 설계한다. 반려동물·의료·커머스처럼 신뢰가 곧 전환으로 직결되는 업종의 웹사이트 제작을 고민한다면, 감성과 데이터를 함께 다루는 파트너가 필요하다.
마무리와 다음 스텝
펫팜의 강점은 명확하다. 캡슐 이미지 컷아웃과 세피아 톤이 빚어낸 또렷한 브랜드 인상, 그리고 ‘찾기’라는 핵심 행동을 두 장의 카드로 압축한 결단력. 다만 감성의 완성도만큼 검색의 실용성이 뒷받침될 때 이 플랫폼은 제 힘을 낸다.
실행 제안은 셋으로 요약된다. 첫째, 약국·의약품 상세를 개별 URL로 열어 지역 기반 로컬 SEO의 발판을 만든다. 둘째, 대형 사진을 WebP·반응형으로 최적화하고 히어로를 프리로드해 LCP를 끌어내린다. 셋째, 세피아 팔레트의 텍스트 대비를 AA 기준으로 재점검해 감성과 가독성을 동시에 지킨다. 이 세 가지만 정리해도, 지금의 좋은 웹디자인은 검색과 성능까지 갖춘 홈페이지 제작 결과물로 한 단계 올라선다.