Website Design Review

플래닛147

· UX/UI · IA · SEO

플래닛147의 브랜드 톤앤매너와 핵심 여정을 기준으로 정보구조, 인터랙션, 접근성, 성능, SEO까지 전반을 실무 관점에서 점검합니다. 전환 중심 컴포넌트검색 친화 콘텐츠 설계에 초점을 둔 리뷰입니다.

리뷰 시작하기
플래닛147 홈페이지 주요 화면 미리보기
플래닛147 메인 히어로 섹션 미리보기. 시각 계층과 메시지 우선순위를 살핀다.

개요와 핵심 관찰 포인트

플래닛147 사이트는 첫 진입에서 브랜드 아이덴티티를 선명하게 드러내는 비주얼과 명확한 카피의 결합을 통해 사용자의 주의를 집중시킵니다. 히어로 구간의 메시지는 제품/서비스의 가치 제안을 한 문장으로 요약하고, 이어지는 섹션에서 증거 자산(레퍼런스, 지표, 사용 후기 등)으로 설득을 보강하는 구조를 취하고 있습니다. 특히 상단 네비게이션의 정보 구획은 탐색 효율을 높이며, 스크롤 유도형 인터랙션을 통해 페이지 체류를 확장합니다. 다만 CTA 배치가 동등 가중으로 배열될 경우 선택 장애를 유발할 수 있으므로, 우선순위 CTA를 대비색과 크기 차로 구분해 전환 경로를 단순화하는 것이 좋습니다.

레이아웃은 대체로 그리드 안정성이 높고, 컴포넌트 간 여백 체계가 일관적입니다. 아이콘과 일러스트는 의미 명료성을 갖추고 있어 스캔 리딩을 지원합니다. 반응형 설계에서도 주요 카피가 줄바꿈으로 파편화되지 않도록 폰트 크기와 줄 높이를 단계적으로 보정하고 있으며, 이미지의 아트디렉션도 모바일에서 핵심 피사체가 잘려나가지 않도록 안전영역을 확보하고 있습니다. 전반적으로 메시지-레이아웃-인터랙션 간의 합이 좋은 편으로, 콘텐츠 설계만 더 다듬으면 검색과 공유 흐름에서도 충분한 성과를 기대할 수 있습니다.

브랜드 톤앤매너와 메시징 전략

플래닛147은 ‘미래 지향’과 ‘신뢰’를 동시에 전달하는 톤을 사용합니다. 색채는 딥 네이비와 쿨 블루 계열을 중심으로 하며, 포인트로 밝은 하이라이트를 사용해 에너지와 전문성을 함께 드러냅니다. 헤드라인 카피는 간결하면서도 가치 제안을 즉시 이해 가능하게 구성되어 있으며, 서브카피에서는 구체적 이점검증 근거를 병치해 설득력을 높입니다. 로고와 키 비주얼의 일관성도 높아, 신규 방문자에게 무엇을 하는 브랜드인지를 빠르게 각인시키는 구조입니다.

브랜드 스토리텔링은 고객 사례, 과정 소개, 수상/보도 이력 등으로 확장되면 더 강력해집니다. 이를 위해 ‘문제 → 해결 → 성과’의 3단 구조 사례 템플릿을 도입하고, 각 사례에 정량 지표(예: 전환율 상승, 페이지 속도, 검색 노출 순위)를 부착하면, 스크롤 도중에도 성과가 눈에 들어오게 됩니다. 또한 CTA 마이크로카피를 액션 중심 동사로 개선하고, 레거시 페이지로 분산된 자산을 통합하는 허브형 네비게이션을 제공하면, 구매/문의 전환 흐름이 한층 선명해질 것입니다.

UX/UI 설계 및 전환 컴포넌트

컴포넌트 수준에서의 완성도가 높습니다. 카드, 탭, 아코디언, 배지 등 재사용 가능한 UI 요소가 체계적으로 배치되어 있으며, 상태 전환(호버/포커스/활성)도 직관적입니다. 다만 동일 위계에서 버튼이 2개 이상 병치될 때는 색/굵기/텍스트 길이로 주요 CTA와 보조 CTA의 시각적 우열을 분명히 해야 합니다. 폼 영역에서는 입력 마스크, 에러 힌트, 실시간 유효성 검사를 적용해 오류 비용을 줄이고, 제출 전 요약 확인 단계(리뷰 스텝)를 제공하면 이탈을 추가로 방지할 수 있습니다.

이미지는 지연 로딩을 적용하고, LCP 후보(첫 화면 주 이미지)는 우선 로딩을 통해 초기 체감을 개선하는 것이 좋습니다. 섹션 간 전환은 패럴랙스보다는 미세 애니메이션으로 의미적 연결성을 강화하는 편이 접근성과 성능 모두에 유리합니다. 또한 FAQ, 가격/요금제, 비교표와 같은 전환 근접 컴포넌트를 적절히 배치하면, 사용자가 스스로 판단을 끝내는 데 필요한 ‘마지막 정보’를 빠르게 획득하게 되어 전환률이 올라갑니다.

정보구조(IA)와 SEO 최적화

카테고리-상세의 2단 구조를 기본으로 하되, 핵심 랜딩은 주제 클러스터 중심으로 묶는 허브&스포크 전략이 효과적입니다. 허브 페이지는 개요·문제정의·해결책·사례·FAQ·CTA 순으로 구성하고, 스포크 문서는 세부 키워드에 맞춰 깊이를 확보합니다. 이때 내부 링크 앵커 텍스트를 의미 중심으로 작성하면 검색 크롤러가 맥락을 더 명확히 파악합니다. 또한 스키마 마크업(Organization, Product, FAQ)을 추가해 풍부한 검색 스니펫을 노리면 클릭율 향상에 기여합니다.

메타 태그는 제목 45–55자, 설명 90–150자를 기준으로 작성하고, H1은 페이지 당 1개로 유지합니다. 이미지에는 대체 텍스트를 꼼꼼히 제공해 접근성이미지 검색 노출을 동시에 잡을 수 있습니다. 콘텐츠는 ‘문제-통찰-해결-증거-CTA’ 서사를 따르며, 각 섹션 끝에 관련 문서로 이어지는 내부 링크를 넣어 세션 깊이를 확장합니다. 마지막으로 OG/Twitter 카드 설정과 정규 URL(canonical)을 명시해 공유 및 인덱싱 일관성을 유지합니다.

퍼포먼스와 접근성

핵심 성능 지표는 FCP, LCP, CLS, INP를 우선 모니터링합니다. LCP 후보는 히어로 이미지이므로, 적절한 크기포맷(WebP 병행), preload를 활용해 초반 로딩을 최적화합니다. 폰트는 시스템 폰트 스택을 기본으로 하고, 브랜드 폰트가 필요하면 서브셋과 font-display: swap을 사용합니다. 스크립트는 지연(defer) 또는 지연 로딩을 적용하고, 사용 빈도가 낮은 위젯은 인터섹션 옵저버로 지연 마운트하면 사용자 체감이 크게 개선됩니다.

접근성 측면에서는 대비비( WCAG 2.1 AA )를 충족하는 팔레트 적용, 포커스 스타일 명시, ARIA 레이블/역할 정의가 중요합니다. 버튼과 링크의 역할을 구분하고, 아이콘 단독 요소에는 스크린리더용 텍스트를 제공합니다. 모션 감소 설정(prefers-reduced-motion)을 고려해 애니메이션을 완화하는 것도 필수입니다. 이러한 기본기를 갖춘 뒤, 실제 사용자 데이터(RUM)로 병목을 추적하면 유지보수 비용 없이도 성능·접근성을 꾸준히 끌어올릴 수 있습니다.

The Blue Canvas 소개

더블루캔버스는 웹/랜딩/마케팅 전 과정을 아우르는 실험형 스튜디오입니다. AI 기반 분석과 디자인 시스템 자동화를 결합해, 메시지-레이아웃-데이터가 선순환하는 전환 중심 웹 경험을 빠르게 구축합니다. 전략 컨설팅부터 UX/UI, 퍼포먼스 최적화, SEO/콘텐츠 아키텍처까지 한 팀으로 연결해 실행 속도를 높입니다. 필요 시 사내 데이터/툴체인과 연동해 측정-학습-개선의 루프를 짧게 가져가며, 성과 지표를 기준으로 반복 개선합니다.

지금 과제에 맞는 최적의 웹/랜딩 전략이 궁금하시다면 아래 링크로 문의해 주세요. 요구사항을 정리해 보내주시면, 진단과 함께 실행 가능한 옵션을 제안드립니다.

마무리 인사이트

플래닛147는 시각적 임팩트와 구조적 명료성을 바탕으로 첫인상과 탐색 경험 모두를 안정적으로 제공합니다. 본 리뷰에서 제안한 CTA 우선순위 명확화, 허브&스포크 기반의 콘텐츠 구조화, LCP 최적화, 접근성 보강을 반영하면 전환과 검색 노출에서 추가적인 성과를 기대할 수 있습니다. 나아가 사례 템플릿 표준화와 지표 중심의 스토리텔링을 확장하면, 신규 방문자에게는 신뢰, 재방문자에게는 설득 완성을 지원하는 완결형 여정이 구축될 것입니다.