프로젝트 개요와 브랜드 맥락
삼양마린그룹 웹사이트는 해양·물류·에너지 등 복합 사업 포트폴리오를 단일 여정에서 이해시키는 것이 핵심 과제로 보입니다. 첫 화면에서 핵심 가치와 대표 서비스가 한눈에 들어오도록 구성되어야 하며, 사용자는 “우리가 누구인가(About) → 무엇을 제공하는가(Service) → 어떤 성과와 신뢰를 보유하는가(Reference/IR/News)”의 순서로 자연스럽게 이동할 수 있어야 합니다. 본 리뷰는 사용자의 최초 진입부터 주요 액션(문의, 견적, 다운로드)에 도달하기까지의 흐름을 따라가며, 메시지 계층과 시각적 강조, 상호작용 패턴이 비즈니스 목표에 얼마나 정렬되어 있는지 점검합니다. 또한 모바일 환경에서의 가시성, 항해 효율, 터치 타겟, 레이아웃 안정성(CLS) 등을 함께 검토하여, 주요 전환 포인트가 어느 화면에서 약화되는지 구체적으로 진단합니다. 콘텐츠 운영 관점에서는 각 서비스 라인의 차별점을 ‘요약 → 근거 → 증명(지표/레퍼런스)’의 구조로 배치해 스캔 친화성을 높이고, CTA는 섹션 말단이 아니라 요약 상자와 카드 내부에도 배치하여 가시 빈도를 끌어올리는 접근이 효과적입니다.
키 포인트: 정보의 계층화, CTA 가시성, 모바일 스캔 친화성, 전환 동선 단축
정보 구조(IA)와 내비게이션
상위 내비게이션은 ‘회사(그룹) 소개’와 ‘사업 포트폴리오’, ‘ESG/IR/뉴스룸’으로 삼등분하여 기대 정보를 빠르게 찾도록 설계하는 편이 합리적입니다. 특히 서비스/사업 상세 페이지는 동일한 레이아웃 템플릿을 적용해 학습 비용을 낮추고, 첫 스크린에서 핵심 가치·타깃 산업·핵심 역량·대표 성과를 카드 형태로 요약한 후, 다음 스크롤에서 상세 서사를 제공하면 이탈을 줄일 수 있습니다. 목록 페이지는 필터(산업/역할/연도)와 정렬(최신/인기/이슈)을 제공하고, 카드 단에는 2~3개의 핵심 태그(예: Fleet, Energy, Logistics)를 노출해 첫인상을 명확히 합니다. 모바일에서는 햄버거 메뉴에 단층 구조를 강제하기보다, 중요 레벨만 1뎁스로 승격해 스와이프/탭으로 신속히 접근할 수 있도록 해야 합니다. 또한 브레드크럼을 도입하여 상위 맥락 복귀를 용이하게 하고, 동일 계열 콘텐츠 간 이동(다음/이전 또는 관련 글 카드)을 배치해 체류와 탐색 확률을 높이는 것이 좋습니다.
상호작용 패턴과 디자인 시스템
버튼, 폼, 카드, 배지, 알림 등 인터랙티브 컴포넌트는 명명 규칙과 상태(hover, active, focus, disabled)가 일관되어야 합니다. 배경이 사진/영상일 경우에도 대비비(텍스트/버튼 대비 4.5:1 이상)가 유지되도록 오버레이 계층을 사전에 정의하고, 블랜드 모드에 의존하지 않도록 색상 토큰을 체계화합니다. 히어로 CTA와 섹션 내 요약 박스에 동일한 문구/아이콘/색을 재사용하면 기억 잔상이 누적되어 전환을 유도합니다. 애니메이션은 의미 중심으로 최소화하고, 스크롤 트리거는 콘텐츠 가독성에 방해되지 않도록 지연(Delay)과 구간(Threshold)을 미세 조정합니다. 아울러 모바일 터치 타겟은 44px 이상을 유지하고, 폼 입력은 가상 키보드 타입을 지정(number, email 등)하여 입력 피로를 줄입니다. 마지막으로 다국어 확장 가능성을 고려해 라인 길이/줄바꿈을 넉넉히 설계하고, 단위/날짜/주소 표현도 지역화에 대비한 패턴을 채택하는 것이 바람직합니다.
디자인 토큰: color.primary, radius.lg, shadow.elev-3, ease.standard
접근성·성능·SEO 점검
기본 원칙은 간단합니다. 시맨틱 태그를 활용해 문서 구조를 명확히 하고, 모든 인터랙션에 키보드 포커스가 도달하도록 하며, 대체 텍스트는 맥락을 고려해 ‘목적’을 설명합니다. 이미지에는 lazy-loading을 적용하고, CLS를 유발하지 않도록 width/height 또는 aspect-ratio를 선언합니다. 폰트는 서브셋/프리로드로 초기 페인트를 가속화하고, LCP 요소(히어로 이미지/헤딩)에 대한 네트워크 경합을 줄입니다. 메타 태그는 타이틀(55–60자), 설명(120–160자), 오픈그래프/트위터 카드까지 일관되게 구성하고, URL 구조는 의미 기반으로 유지합니다. 스키마 마크업(Organization, WebSite, BreadcrumbList 등)을 추가하면 검색 노출 품질을 끌어올릴 수 있습니다. 마지막으로 로그 기반으로 404/리디렉션/사이트맵 갱신을 주기화하여 크롤러 헬스를 유지하고, 코어 웹 바이탈(LCP/CLS/INP)을 채널별로 모니터링해 회복 시간을 단축시키는 운영 체계를 권장합니다.
- ALT: 맥락 기반으로 목적 설명
- LCP: 히어로 이미지 우선 로딩
- CLS: 이미지/컴포넌트 고정 크기
- INP: 인터랙션 지연 최소화
더블루캔버스 소개
더블루캔버스는 디지털 제품과 브랜드 경험을 연결하는 UX/UI 전문 스튜디오입니다. IA 설계부터 디자인 시스템, 퍼포먼스·접근성·SEO 최적화까지 전주기에 걸친 개선을 수행하며, 데이터와 스토리텔링을 결합해 전환 중심의 결과를 만듭니다. 대규모 리뉴얼뿐 아니라, 핵심 랜딩·캠페인 페이지의 전술적 개선도 빠르게 실행합니다. 파트너십 문의는 아래 링크를 통해 언제든 열려 있습니다.
더블루캔버스 홈페이지 바로가기
