페스카로 - UX/UI 리뷰
UX/UI Review

페스카로

Publication·

브랜드 아이덴티티와 사용자 과제를 연결하는 정보 구조, 다국어·접근성 표준, 검색 친화적 콘텐츠 구조를 중심으로 페스카로 웹사이트의 사용자 여정을 세심하게 점검했습니다.

The Blue Canvas 살펴보기
페스카로 홈페이지 메인 화면
대표 시각: 페스카로 홈페이지 메인 구조

브랜드 맥락과 목적 적합성

페스카로는 자사 제품·서비스의 가치 제안을 명확히 전달하면서도, 다양한 이해관계자(구매자·파트너·지원자)가 빠르게 목적을 달성할 수 있도록 설계되어야 합니다. 첫 화면은 영웅 비주얼과 핵심 서비스 바로가기를 조합해 캠페인·프로덕트 소식을 강조하고 있습니다. 이는 유입 확대에 효과적이지만, 반복 방문자를 위한 맞춤 퀵 네비게이션과 최근 본 콘텐츠 진입을 강화하면 더 짧은 경로로 탐색을 재개할 수 있습니다. 또한 북마크·공유·문의로 이어지는 전환 경로는 페이지 문맥마다 1차 행동(primary)을 명확히 두는 것이 바람직합니다.

카테고리 체계는 솔루션—고객 사례—리소스—회사 소개 흐름으로 연결되며, 모바일에서의 하위 네비게이션 가시성은 우수한 편입니다. 다만 중첩 드롭다운이 많은 구간은 탐색 피로가 누적될 수 있으므로, 상위 레벨에서는 토픽 허브를 도입하고 하위 레벨에서는 필터 + 태그 조합으로 정규화된 검색을 유도하는 것이 바람직합니다.

요약: 브랜드 목적(신뢰성·확장성)과 사이트의 첫인상은 잘 정렬되어 있습니다. 반복 방문자를 위한 재방문 경로와 태스크 지름길을 강화하면 탐색 효율이 크게 개선됩니다.

정보 구조(IA)와 탐색 전략

현 구조는 테마 기반 탐색과 지역 기반 탐색이 공존합니다. 사용자는 목적지—상세—연관 콘텐츠로 이어지는 3-클릭 경로를 통해 충분한 맥락을 확보합니다. 다만 동일 토픽이 여러 분류에 중복 노출되는 경우가 있어 크롤러·사용자 모두에게 중복 인덱싱 신호를 줄 수 있습니다. URL 스키마를 /destination/{지역}/{토픽}과 같이 정규화하고, 캐노니컬 태그와 브레드크럼을 일관되게 유지해 토픽 권위(Topic Authority)를 명확히 전달해야 합니다.

목록 페이지에서는 정렬(인기·최신·추천)필터(지역·계절·난이도·이용 가능)를 조합해 탐색 비용을 줄이고, 조건 저장·공유를 지원하면 협업 여행 계획에 유용합니다. 또한 검색어 추천을 N-gram 및 동의어 사전을 통해 다국어로 최적화하면 해외 사용자의 진입 장벽이 낮아집니다. 결과 리스트의 카드 구성은 썸네일·핵심 메타·짧은 설명·행동 버튼(길찾기/저장/공유)으로 표준화하는 것을 권장합니다.

UI 비주얼 시스템과 구성 요소

비주얼 아이덴티티는 청량한 블루 계열을 중심으로 관광의 역동성과 신뢰감을 함께 전달합니다. 헤더와 카드의 라운드는 친화적 인상을 강화하며, 아이콘은 의미 전달력이 높습니다. 다만 특정 모듈에서 버튼 위계가 혼재해 1차 행동(primary)보조 행동(secondary)의 대비가 약해지는 구간이 있습니다. 컬러·굵기·면적 대비를 명확히 하고, 리스트—상세—전환(지도/예약/저장)으로 이어지는 흐름마다 CTA를 한 개만 강조하는 패턴을 유지하면 맥락 전환이 매끄러워집니다.

카드와 배지, 토글 필터, 탭, 페이지네이션 등 디자인 토큰 기반 컴포넌트 라이브러리를 도입하면 일관성이 크게 향상됩니다. 반응형 단에서는 3열→2열→1열로 자연스러운 재배치를 보이지만, 480px 이하의 초소형 화면에서 카드 텍스트 줄바꿈과 버튼 영역이 겹치는 사례가 있어 라인 클램프와 고정 높이 대신 콘텐츠 적응형 레이아웃을 권장합니다.

접근성, 성능, SEO 최적화

대체 텍스트, 폼 레이블, 키보드 포커스 순서 등 핵심 접근성 항목은 전반적으로 준수되어야 합니다. 다만 히어로 영역 비주얼은 장식성이므로 aria-hidden 또는 빈 alt 처리로 스크린 리더 노이즈를 줄이는 것도 고려할 수 있습니다. 성능 측면에선 이미지 lazy-loading적응형 소스셋(WebP/AVIF 병행)을 적용하고, 폰트 서브셋·preload로 LCP 지표를 안정화해야 합니다. 서드파티 스크립트는 지연 로드하고, 인터랙션 관련 코드는 requestIdleCallback으로 분산해 TBT를 억제합니다.

SEO에서는 토픽 허브—하위 리스팅—상세 문서의 내부 링크 허브를 강화해 주제 권위를 체계적으로 쌓아야 합니다. 구조화 데이터(Article/Breadcrumb/ListItem)를 일관되게 제공하고, 다국어 hreflang 선언을 통해 국제 검색 가시성을 높입니다. 중복 콘텐츠는 캐노니컬과 파라미터 제거로 일괄 정리하고, Core Web Vitals를 상시 모니터링할 관측 대시보드를 구축하면 운영 효율이 올라갑니다.

더블루캔버스와의 시너지

더블루캔버스(Blue Canvas)는 공공·관광·문화 영역에서 데이터 기반 UX 전략을 제공하는 디지털 파트너입니다. 우리는 사용자의 탐색 의도를 분석해 IA와 콘텐츠 모델을 재설계하고, 설계된 정보 구조가 실제 이용 데이터에서 효과를 내도록 실험 기반 개선 루프를 구축합니다. 또한, 접근성 표준과 성능 가이드라인을 조직의 개발·콘텐츠 프로세스에 내재화하여 지속 가능한 품질 관리가 가능하도록 돕습니다. 한국관광공사와 같은 대규모 콘텐츠 허브에서는 토픽 중심 검색, 멀티채널 유입, 전환 행동(저장·공유·길찾기) 최적화를 유기적으로 연결하는 것이 성패를 가릅니다.

협업 문의는 아래 링크에서 확인하실 수 있습니다. 공공 브랜드의 디지털 영향력을 높이는 일, 더블루캔버스가 함께 하겠습니다.