개요
핵심 요약
- 포스코플로우는 철강·원료·미래소재 물류와 항만 하역, CTS 운영, 3PL, DX를 아우르는 글로벌 종합물류 기업이다.
- 히어로 화면은 항해 중인 화물선 영상과 ‘Every Perfect Flow Begins with Expertise.’라는 카피로 시작한다.
- 지구 시각화 구획에서 해외 법인 12개, 판매 국가 62개국, 취급 화물 1000만 톤 이상 같은 지표를 카드로 제시한다.
- GNB 1뎁스에 상담·신고센터를 독립 배치해 비윤리·갑질·인권 침해 신고를 세분화했다.
- 초기 HTML은 대부분 빈 이미지 태그로 구성돼 있어 콘텐츠 상당수가 자바스크립트 렌더링 이후 채워진다.
포스코플로우는 철강·원료·미래소재 물류부터 항만 하역, CTS 운영, 3PL, DX까지 다루는 종합물류 기업이다. 첫 화면은 바다 위를 항해하는 대형 화물선 영상 위에 ‘Every Perfect Flow Begins with Expertise.’라는 카피가 겹쳐지며 시작한다. 그 아래 ‘전문을 지키고, 가치를 만들어, 미래를 연결합니다.’라는 문장과 FLOWer Service 버튼이 이어진다.
스크롤을 내리면 벌크화물부터 첨단 소재까지 사업 영역을 캐러셀로 소개하는 구획, 이어 다크 네이비 배경 위에 지구를 시각화하고 ‘VALUE CONNECT FOR ALL’이라는 문구와 함께 항만·해외 거점·화물 실적 지표를 카드로 배치한 구획이 나온다. 이번 리뷰에서는 이 다크 섹션의 데이터 시각화와, 대기업 계열사 사이트 특유의 정보 구조를 UX/UI 관점에서 살펴본다.
브랜드 & 메시지
브랜드 화법은 ‘Value Connector’라는 슬로건으로 수렴한다. 히어로의 ‘Expertise’, 사업소개 구획의 ‘글로벌 통합 물류 서비스’, 인재채용 구획의 ‘Value Connector를 기다립니다’까지 같은 어휘가 반복되며 브랜드 메시지를 하나로 묶는다. 화물선 영상과 지구 그래픽처럼 스케일이 큰 비주얼을 전면에 배치해, 글로벌 종합물류 기업이라는 포지션을 시각적으로 먼저 설득한다.
색상은 네이비와 딥블루를 축으로 하고, 지구 시각화 구획에서는 화면 전체를 어둡게 낮춰 지표 숫자를 밝게 대비시킨다. 매출액 2조 3,296억 원, 판매 국가 62개국, 해외 법인 12개, 취급 화물 1000만 톤 이상 같은 구체적 수치를 그래픽 카드로 나열하는 방식은, 서비스 나열보다 규모를 증명하는 데 화면을 쓰는 대기업 계열사 사이트의 전형이다.
UX/UI 관점
강점은 다섯 가지다. 첫째, 사업 영역 캐러셀에서 철강·원료·컨테이너·항공·미래소재·프로젝트·CTS·3PL·DX 아홉 개 항목을 좌우로 흐르는 카드 형태로 배치해, 다각화된 사업을 한 화면에서 훑을 수 있게 했다. 둘째, GNB 2뎁스 패널마다 영상 배너를 넣어 FLOWer Service, ESG Data Platform, POSCO Recruit 같은 외부 링크를 시각적으로 눈에 띄게 만들었다.
셋째, 지구 시각화 구획의 지표 카드를 ‘세계 곳곳에서 가치를 연결합니다’라는 문장 아래 6개로 나눠, 항만·법인·화물·협력사 수치를 한눈에 스캔하게 했다. 넷째, 매출 그래프 카드에 원화 단위 실적을 시계열로 시각화해 숫자만 나열하는 대신 추이를 함께 전달한다. 다섯째, 상담·신고센터를 GNB 1뎁스에 독립 배치하고 비윤리·갑질·인권 침해 신고를 세분화해, 대기업 특유의 컴플라이언스 요구를 홈페이지 구조 안에 반영했다.
IA·SEO 전략
title은 ‘포스코플로우｜글로벌 종합물류 기업’, description은 철강·원료·미래소재 물류부터 항만 하역, CTS 운영, 3PL, DX까지를 한 문장에 담는다. keywords 메타에 철강물류·이차전지 물류·CTS·해상운송·항만하역 같은 세부 서비스명을 나열해 검색 의도를 폭넓게 커버하려는 의도가 보인다. og:image, twitter:card가 모두 설정돼 있고 KR/EN 언어 전환 구조도 확인된다.
다만 초기 HTML은 대부분 빈 이미지 태그와 캐러셀 마크업으로 채워져 있어, 실제 카피와 수치는 자바스크립트 렌더링 이후에야 채워지는 구조로 보인다. 크롤러가 초기 응답만 참고한다면 지표 숫자나 사업 설명이 온전히 노출되지 않을 가능성이 있다. 핵심 수치나 사업 소개 문장 일부를 서버 렌더링 단계에서부터 텍스트로 포함시키면, 검색엔진과 AI 답변 엔진이 인용할 수 있는 원문이 늘어난다.
성능·접근성
화물선 영상, 지구 시각화, GNB 영상 배너까지 영상 자원이 여러 곳에 배치돼 있다. 대부분 autoplay muted loop로 설정돼 있어 사용자 조작 없이도 재생되므로, 저사양 기기나 모바일 데이터 환경에서는 초기 로딩과 배터리 소모 부담이 커질 수 있다. 뷰포트 진입 시점에 맞춰 영상을 지연 로드하거나, 모바일에서는 정지 이미지로 대체하는 방식을 함께 고려할 만하다.
접근성 측면에서는 다크 네이비 배경 위에 놓인 흰 텍스트와 회색 보조 텍스트의 대비를 확인할 필요가 있다. 지표 카드처럼 숫자가 핵심 정보인 구획에서는 대비가 낮으면 수치를 놓치기 쉽다. 아이콘 버튼(더보기, 언어 전환)에는 aria-label이 붙어 있어 스크린리더 대응은 기본적으로 갖춰진 편이다. 영상에는 대체 텍스트나 자막이 확인되지 않으므로, 정보를 전달하는 영상이라면 캡션을 함께 제공하는 편이 좋다.
자주 묻는 질문
물류 회사 홈페이지에 실적 수치를 넣으면 신뢰도에 도움이 되나요?
도움이 됩니다. 포스코플로우처럼 매출액, 취급 화물량, 해외 법인 수 같은 구체적 수치를 그래픽으로 제시하면, 거래를 검토하는 화주나 파트너사가 규모와 안정성을 빠르게 판단할 수 있습니다. 다만 수치는 실제 공시·IR 자료와 일치해야 신뢰를 잃지 않습니다.
물류·제조업 홈페이지는 어떤 SEO 구조가 필요한가요?
사업 영역별 페이지를 독립적으로 만들고, 각 페이지에 서비스명과 대상 화물 유형을 명시하는 것이 기본입니다. 여기에 뉴스룸이나 IR 자료 같은 정기 발행 콘텐츠를 더하면 검색 노출 빈도를 꾸준히 늘릴 수 있습니다.
대기업 계열사 홈페이지에서 자바스크립트 렌더링 의존이 왜 문제가 되나요?
초기 HTML에 핵심 콘텐츠가 비어 있으면 크롤러나 AI 답변 엔진이 그 페이지의 내용을 온전히 파악하기 어렵습니다. 서버 사이드 렌더링이나 정적 스냅샷을 함께 제공하면 검색 노출과 AI 인용 가능성이 모두 개선됩니다.
홈페이지 제작 비용은 회사 규모에 따라 어떻게 달라지나요?
사업 영역 수, 다국어 지원 범위, 영상·데이터 시각화 요소의 양에 따라 편차가 큽니다. 정확한 견적은 요구 범위를 두고 상담을 통해 산정하는 것이 일반적입니다.
디지털 파트너 더블루캔버스
물류·제조 계열사 홈페이지는 사업 영역이 많을수록 정보 구조가 복잡해지기 쉽다. 철강, 원료, 항만, 3PL, DX 같은 이질적인 사업을 한 화면 안에서 위계 있게 전달하면서도, 각 영역이 실제로 검색되고 발견되게 만드는 일은 별개의 과제다. 화면을 잘 만드는 것과, 그 화면이 검색·AI 답변에서 발견되는 것은 다른 층위의 문제다.
The Blue Canvas(더블루캔버스)는 다사업부 조직의 홈페이지를 만들 때 사업 영역별 페이지 구조와 검색 노출 전략을 함께 설계한다. 자바스크립트 렌더링에 의존하는 구간을 어디까지 서버 사이드로 옮길지, 어떤 지표와 콘텐츠를 정적으로 노출할지를 정하는 작업이 이 과정의 핵심이다.
마무리와 다음 스텝
포스코플로우의 사이트는 화물선 영상과 지구 시각화, 실시간에 가까운 지표 그래프까지 대기업 계열사 홈페이지가 갖춰야 할 스케일감을 잘 구현했다. 사업 영역 캐러셀과 2뎁스 영상 배너는 아홉 개에 달하는 사업을 지루하지 않게 소개하고, 상담·신고센터를 독립 메뉴로 둔 구조는 컴플라이언스 요구를 놓치지 않았다.
실행 제안은 셋이다. 첫째, 초기 HTML에 핵심 카피와 수치 일부를 텍스트로 포함시켜 검색엔진과 AI 답변 엔진의 인용 가능성을 높인다. 둘째, 다크 배경 구획의 텍스트 대비를 점검해 지표 숫자가 눈에 잘 들어오도록 조정한다. 셋째, 여러 곳에 배치된 자동재생 영상의 로딩 전략을 재정비해 모바일 환경의 체감 속도를 개선한다.
