SK E&S

SK E&S는 도시가스, 전력, 재생에너지, 수소 등 다양한 포트폴리오를 아우르는 에너지 솔루션 기업으로, 복잡한 사업 체계를 명료하게 전달하는 정보 구조(IA)와 이해관계자별 맞춤 경험 설계가 핵심 과제입니다. 현행 웹사이트는 사업 영역의 폭이 넓은 만큼 첫 화면에서 “우리가 누구인지, 무엇을 잘하는지, 어디로 가는지”를 직관적으로 제시해야 합니다. 이를 위해 상단 히어로 영역은 미션/비전의 핵심 메시지를 간결한 카피와 함께 시각적으로 강조하고, 이어지는 요약 지표(탈탄소 성과, 발전 용량, 투자/파트너십 등)로 신뢰 기반의 스토리텔링을 강화하는 구성이 바람직합니다. 또한 투자자·파트너·지원자·미디어·지역 고객 등 주요 페르소나의 진입로를 초기 화면에서 분기하여 각 사용자가 원하는 정보에 3클릭 이내로 도달하게 만드는 흐름 최적화가 필요합니다.

첫인상은 ‘청정·신뢰·테크’의 톤이 조화로운지가 관건입니다. 메인 내비게이션은 최대 5~6개 1차 항목으로 정리하고, 각 항목은 의미가 겹치지 않도록 서로 배타적(Mutually Exclusive)이며 전 영역을 포괄하는 집합 완전성(Collectively Exhaustive)을 충족하는지 점검합니다. 이후 2차 메뉴에서는 ‘사업/솔루션’은 가치사슬(생산–저장–공급–활용) 기준으로, ‘지속가능경영’은 프레임워크(환경·사회·지배구조) 기준으로 분류하면 사용자가 정신적 지도를 쉽게 형성합니다. CTA는 사업 설명 직후에 ‘자료 다운로드’, ‘문의하기’, ‘파트너십 제안’과 같이 행동 지향 버튼을 배치하고, 카드/리스트 컴포넌트는 가독성을 위해 12–16px 내부 패딩, 20–24px 카드 간격, 16px 라인하이트를 유지합니다. 모바일에서는 섹션 간 여백을 확장하여 스크롤 압력을 줄이고, 핵심 수치·아이콘을 상단에 요약해 3초 내 이해를 돕는 것이 효과적입니다.

또한 이미지·일러스트는 실제 자산(발전소·태양광 단지)과 사람 중심의 활용 장면을 균형 있게 구성하면 실체감이 높아집니다. 모션은 200–250ms 범위의 미세 전환으로 통일하고, 포커스 상태·키보드 탭 이동 경로를 명확히 제공해 접근성 기준을 충족합니다.

IA는 ‘누구에게 무엇을 어떻게’의 순서로 설계합니다. 1) 회사 소개와 비전, 2) 사업 포트폴리오(전력·도시가스·재생에너지·수소), 3) 지속가능경영과 성과 데이터, 4) 투자/거버넌스/공시, 5) 채용·미디어 영역으로 큰 구획을 나누고, 각 페이지의 첫 화면에는 핵심 요약을 상단 카드로 배치합니다. 예를 들어 수소 페이지는 생산–저장–운송–활용의 밸류체인 지도와 함께, 각 구간의 핵심 지표·주요 프로젝트·파트너를 한 화면에 묶어 보여주면 탐색 비용이 크게 줄어듭니다. 용어집/FAQ를 도입해 ‘REC·RPS·PPA·CCUS’ 같은 전문 용어를 툴팁/오버레이로 설명하고, 콘텐츠 블록에는 내·외부 링크 기준을 분리하여 동일 창 이동은 정보 심화, 새 창 이동은 외부 참고/다운로드로 인지 부하를 줄입니다.

브랜딩 측면에서는 기업 정체성을 드러내는 톤 앤 매너가 일관되어야 합니다. 핵심 카피는 ‘탄소중립 전환을 앞당기는 실천’처럼 구현 중심의 문장으로 쓰고, 근거는 수치·표·사례 링크로 뒷받침합니다. 이렇게 하면 메시지 아키텍처가 ‘주장→증거→행동’의 구조를 갖추게 되어 전환에 유리합니다.

SEO는 검색 의도에 맞는 콘텐츠 클러스터 설계가 핵심입니다. 상위 허브 페이지는 ‘친환경 에너지 전환’ 같은 폭넓은 주제를 다루고, 하위 스포크 페이지는 ‘PPA 도입 방법’, ‘수소 모빌리티 활용’처럼 구체적인 롱테일 키워드를 공략합니다. 각 페이지의 제목 태그와 메타 설명은 50–60자, 120–160자 범위에 맞춰 핵심 키워드와 행동 유도 문구를 포함합니다. 스키마 마크업(Organization, Breadcrumb, FAQ)을 적용하고, 이미지에는 대체 텍스트와 설명 캡션을 제공해 크롤러와 보조기술 모두에 친화적으로 만듭니다. 또한 PDF/보도자료는 HTML 요약 카드와 함께 원문 링크를 병기하여 문서 인덱싱을 지원합니다.

링크 구조는 내부 순환(상·하위, 관련 글)과 외부 신뢰 출처(정부 통계, 연구기관)를 병행해 토픽 권위성을 확보합니다. 뉴스룸/인사이트 섹션은 데이터 기반의 차트·인포그래픽을 활용하고, 시리즈형 목차를 제공해 체류 시간을 늘립니다. 이를 통해 브랜드 검색량 증대와 취업·파트너 문의의 자연 유입을 확장할 수 있습니다.

LCP·INP·CLS를 기준으로 핵심 웹 바이탈을 관리합니다. 히어로 이미지와 배경 그래픽은 지연 로딩(lazy-loading)과 적절한 이미지 포맷(WebP/AVIF)을 병행하되, 원본 보존 정책을 통해 품질 저하 없이 대응합니다. 폰트는 서브셋/사전 연결(preconnect)과 지연 로딩을 적용하고, CSS는 크리티컬 경로를 인라인으로 분리해 초기 렌더 속도를 개선합니다. 접근성 측면에서는 키보드 포커스 표시, 대비비율(텍스트 4.5:1 이상), 대체 텍스트, 의미론적 마크업(h1–h2–h3 서열)을 준수해야 합니다. 특히 표/차트는 캡션과 요약 설명을 제공해 정보 구조를 보완합니다.

또한 동적 컴포넌트(탭·아코디언·모달)는 ARIA 속성과 포커스 트랩을 구현하고, 스크린리더 테스트로 실제 내비게이션 가능 여부를 반복 점검합니다. 이미지 최적화와 정적 캐싱, HTTP/2·압축 등 전반적인 전송 최적화로 탄탄한 사용자 경험을 보장합니다.

더블루캔버스(The Blue Canvas)는 브랜드 서사와 사용자 여정을 한 화면에서 연결하는 디지털 퍼블리싱 스튜디오입니다. 우리는 에너지·테크·공공 분야에서 복잡한 메시지를 구조화하고, 데이터를 통해 신뢰를 증명하며, 비즈니스 전환으로 이어지는 인터페이스를 설계합니다. 본 리뷰에서 제시한 IA 재구성, 검색 의도 기반의 콘텐츠 클러스터, 접근성/성능 개선 로드맵을 기반으로, SK E&S의 친환경 에너지 리더십을 디지털 상에서 명확하게 전개할 수 있습니다. 협업을 원하신다면 아래 링크로 포트폴리오와 프로세스를 확인해 주세요.

이번 리뷰는 SK E&S의 핵심 메시지를 빠르게 이해시키고 신뢰 가능한 행동으로 유도하기 위한 UX/UI·IA·콘텐츠·퍼포먼스 개선의 방향을 정리했습니다. 실제 실행 단계에서는 우선순위를 ‘도달–이해–전환’의 세 축으로 정렬하고, 주요 전환 이벤트(문의·자료 다운로드·채용 지원)를 기준으로 A/B 테스트를 설계해 단계적으로 성과를 검증하는 접근을 권장합니다. 또한 글로벌/국문 이원 구조를 고려해 언어 스위치와 지역별 차이(법규·용어)를 명확히 처리하고, 디자인 시스템(컬러·타이포·컴포넌트)의 토큰화로 확장성을 확보하는 것이 바람직합니다. 본 리뷰가 내부 정렬과 외부 커뮤니케이션 모두에 실용적인 출발점이 되길 바랍니다.

상단 히어로에 사용된 이미지는 SK E&S 웹사이트의 대표 시각 자료로, 친환경·테크 톤을 반영해 브랜드 인상을 강화합니다.