개요 및 핵심 포인트
ESG 커뮤니케이션의 목적은 비재무 성과를 신뢰성 있게 전달하고, 투자자·고객·협력사·구직자 등 다양한 이해관계자가 동일한 메시지 체계로 정보를 탐색하도록 돕는 데 있습니다. HD현대 ESG 웹사이트는 브랜드 레벨의 내러티브와 계열사별 실행 사례를 유기적으로 연결하는 정보 구조가 요구됩니다. 본 리뷰는 사용자의 주요 여정(회사 소개 → 전략과 체계 → 주요 과제/성과 → 보고서/데이터 룸) 기준으로 IA 흐름과 화면 설계를 점검했으며, ESG 키워드의 난이도·검색량·사용자 의도에 맞춘 용어 체계 표준화 필요성도 함께 분석했습니다. 또한 모바일 우선 레이아웃, 대비·가독성·포커스 이동 등 접근성 상태, 이미지 최적화와 LCP/CLS 핵심지표 개선 가능성, 구조화 데이터 및 콘텐츠 SEO 기초 설정을 종합적으로 검토했습니다.
UX/UI 관점의 정보설계와 화면 구성
첫 진입 시 사용자는 “우리가 무엇에 집중하고, 어떻게 관리하며, 어떤 성과를 내는지”를 10초 내 파악하고 싶어합니다. 이를 위해 H1은 기업명+ESG의 결합 문구로 명확히 선언하고, H2~H3에서는 전략-체계-성과-거버넌스의 위계를 유지해 스캐닝을 돕는 것이 좋습니다. 카드형 요약 블록은 핵심 KPI(예: 온실가스 배출량, 안전 지표, 준법 리스크 대응)의 최근 연도 수치를 강조하되 수치의 출처와 범위를 도표 캡션으로 연결하면 신뢰가 상승합니다. 본문 버튼 레이블은 ‘자세히 보기’ 대신 ‘지속가능경영 전략 보기’, ‘ESG 데이터 룸 열기’처럼 구체적 과업 중심으로 개선하는 것을 권장합니다. 섹션 간에는 얕은 색 대비의 디바이더를 배치하고, 링크는 텍스트 링크와 버튼을 역할별로 분리해 인지 부하를 줄입니다. 모바일에서는 44px 이상의 터치 타깃과 상단 고정 TOC를 적용해 동일한 탐색 경험을 보장하고, 폰트 사이즈는 16px 이상을 유지합니다.
정보구조(IA)와 SEO 기본 설정
IA는 이해관계자 중심의 시나리오로 정렬하는 것이 핵심입니다. 투자자 관점의 ‘지배구조/리스크/컴플라이언스’, 고객·시장 관점의 ‘친환경 기술/공급망/안전’, 인재 관점의 ‘조직문화/다양성/윤리’를 상위 허브로 두고, 각 허브 내에서는 카테고리-핵심 스토리-근거 데이터의 3단 구조를 유지합니다. URL은 일관된 케밥 케이스를 적용하고, 한글 URL 사용 시에도 영문 별칭을 병행하는 것을 권장합니다. 메타 타이틀은 브랜드 키워드+ESG 주제 키워드를 결합하고, 디스크립션에는 사용자 의도에 대응하는 핵심 문장을 포함합니다. 구조화 데이터는 Organization, BreadcrumbList, Article를 우선 적용하고, 주요 보고서 다운로드 섹션에는 ItemList 마크업을 활용해 탐색성을 높일 수 있습니다. 이미지 대체 텍스트는 장식 목적을 제외하고 의미를 담되, 파일명이나 내부 경로 등 내부 정보는 노출하지 않도록 합니다.
퍼포먼스 최적화와 핵심 지표
이미지의 지연 로딩과 적응형 서빙은 LCP 개선에 직접적입니다. 히어로 영역의 주 시각은 1x/2x 소스를 분리하고, WebP/AVIF를 우선 제공하되 원본은 보존합니다. 폰트는 가변 폰트를 1종으로 통합하거나 서브셋팅하여 CLS를 줄이고, 상단 스크립트는 지연/지속 연결을 통해 TTFB 이후 차단 리소스를 최소화합니다. 컴포넌트 단위로 CSS를 분리하되, 퍼스트 뷰 스타일은 인라인 크리티컬 CSS로 주입하는 방식이 효과적입니다. 내부 링크의 프리패치, 이미지의 명시적 width/height 속성 지정, 인터랙션 요소의 스로틀링·디바운스도 체감 속도를 높입니다. 측정은 Core Web Vitals를 기준으로 하고, 페이지 유형별 템플릿을 분리해 공통 병목을 제거하는 반복 개선 루프를 제안합니다.
접근성 · 가독성 · 컨트라스트
콘텐츠 이해 가능성과 조작 용이성을 기준으로 WCAG 2.1 AA를 목표로 합니다. 텍스트 대비는 4.5:1 이상을 유지하고, 버튼/링크에는 명확한 포커스 스타일을 제공합니다. 스크린 리더 사용자에게 중요한 섹션에는 aria-labelledby를 연결하고, 반복 네비게이션에는 ‘본문 바로가기’ 링크를 제공합니다. 표와 도표에는 캡션과 scope 헤더를 제공해 관계를 명확히 하고, 동영상·인포그래픽은 대체 텍스트 또는 대체 설명을 병행합니다. 색만으로 정보를 전달하지 않도록 아이콘과 라벨을 병행하고, 폼 요소는 레이블과 힌트 텍스트, 오류 메시지와의 연결 관계를 코드로 보장합니다. 키보드 트랩이 없도록 모달·탭 컴포넌트에 대한 포커스 순환을 점검합니다.
화면 미리보기
브랜드/서비스 맥락과 연계
ESG는 기업 정체성과 사업 전략의 교집합에 놓여 있습니다. HD현대는 에너지 전환, 해양·산업 생태계, 스마트 기술 등 다층의 의제를 보유하므로 ESG 콘텐츠는 ‘공통 프레임’과 ‘사업부 특화 서사’를 함께 담아야 합니다. 공통 프레임에서는 목적과 지표, 관리 체계를 명확히 제시하고, 특화 서사에서는 혁신 사례와 스토리텔링을 통해 사용자 몰입을 유도합니다. 데이터 룸은 투자자·분석가가 원하는 문서 중심으로 정리하고, 빈번히 업데이트되는 수치형 데이터는 API나 표준화된 템플릿으로 관리해 유지 보수 비용을 줄일 수 있습니다. 또한, 미디어/보도자료와의 상호 링크, 연차보고서/지속가능경영보고서 PDF의 섹션 딥링크 제공은 검색 트래픽의 장기적 축적에 도움을 줍니다.
The Blue Canvas는 데이터 기반 UX, 구조화된 콘텐츠, 검색친화적 마크업을 결합해 ESG와 기업 커뮤니케이션의 본질적 목표에 집중합니다. 웹/랜딩, 콘텐츠 제작, 마케팅 자동화 등 필요한 전 과정을 유기적으로 설계·운영합니다. 더 자세한 협업 논의가 필요하시다면 아래 버튼을 통해 연락해 주세요.