한진칼 Website Design Review

개요

한진칼은 대한항공과 (주)한진을 비롯한 계열사를 거느린 한진그룹의 지주회사다. 사이트 첫 화면에는 지배구조도나 주가 정보 대신 해질 무렵 들판을 달리는 어른과 아이의 영상이 놓이고, 그 위에 ‘사람과 사람을 잇다’와 ‘이웃을 생각하고 사랑을 실천하는 따뜻한 동행을 함께합니다’라는 두 문장이 얹힌다. 히어로는 세 장의 슬라이드로 돌아가며, 인디케이터 옆에 이전·다음 버튼과 일시정지 버튼이 함께 놓여 있다.

스크롤을 내리면 사업영역, 뉴스룸, 그룹 규모 지표, 역대 회장관, Social 한진이 차례로 이어진다. 지주회사 사이트가 흔히 택하는 재무 중심 구성과 달리, 이 사이트는 그룹이 무엇을 하는 회사들의 묶음인지와 그 뿌리가 누구에게서 시작됐는지를 먼저 설명한다. 이번 리뷰에서는 계열사가 많은 그룹사 사이트가 복잡도를 어떻게 정리했는지, 그리고 그 정리가 검색에서는 어떻게 작동하는지를 살펴본다.

브랜드 & 메시지

브랜드 화법의 중심은 ‘연결’이다. 히어로 카피 ‘사람과 사람을 잇다’는 항공과 물류라는 두 주력 사업을 한 단어로 묶으면서, 동시에 운송업을 사람의 일로 번역한다. 사업영역 구획의 설명 문장 ‘글로벌 물류업계를 선도하는 종합 물류 전문기업으로 도약하겠습니다’가 산업 언어를 맡고, 히어로가 정서 언어를 맡는 이중 구조다. 색은 한진의 상징색인 진한 네이비와 하늘색을 축으로 쓰고, 지표 구획에서는 네이비 배경 위 밝은 하늘색 숫자로 대비를 만든다.

역대 회장관을 상단 메뉴 다섯 개 중 하나로 올린 선택이 이 사이트의 성격을 가장 잘 드러낸다. 조중훈 창업회장은 흑백 사진과 ‘사업은 예술이다’, 조양호 선대회장은 항공기 앞 컬러 사진과 ‘지구가 너무 작았던 코즈모폴리탄’이라는 한 줄로 소개되고, 그 아래에 ‘조양호 통사 1권, 24Page’ 출처를 밝힌 인용이 이어진다. 기업 역사를 별도 아카이브로 숨기지 않고 1뎁스로 올린 구성은, 80년이라는 연혁 자체를 자산으로 다루겠다는 판단으로 읽힌다.

UX/UI 관점

강점은 여섯 가지다. 첫째, 상단 메뉴를 다섯 개로 묶었다. 계열사 42개를 거느린 그룹이면 메뉴가 쉽게 열 개를 넘기는데, 한진칼·한진그룹·ESG·홍보센터·역대 회장관으로 끊어 첫 화면의 판단 비용을 낮췄다. 둘째, 사업영역을 부문 카드 다섯 개로 먼저 나눴다. 방문자는 계열사 이름을 몰라도 항공인지 물류인지만 고르면 되고, 카드를 선택하면 그 부문에 속한 회사들이 아래에 펼쳐진다.

셋째, 계열사 목록의 각 항목에 한 줄 설명을 붙였다. ‘안전과 신뢰를 바탕으로 아시아 최고의 LCC로 도약’(에어부산), ‘항공운송 및 물류산업의 항공기 지상조업 전문 기업’(한국공항)처럼, 이름만으로는 업무를 알기 어려운 회사를 한 문장으로 구분해 준다. 넷째, 뉴스룸의 필터를 텍스트 탭이 아니라 계열사 이미지 원형 아이콘으로 만들었다. 대한항공과 진에어의 로고를 아는 방문자는 글자를 읽지 않고도 원하는 발행 주체를 고를 수 있다. 다섯째, 그룹 규모를 연혁 80년, 계열사 42개, 총 자산 58.17조 세 숫자로만 제시했다. 지표를 늘리지 않고 셋으로 줄인 덕에 화면 한 장이 그대로 기억에 남는다. 여섯째, 히어로 슬라이드에 일시정지 버튼을 붙였다. 자동 재생을 멈출 수 있게 한 배려는 접근성 지침이 요구하는 항목이면서, 영상 위 텍스트를 천천히 읽고 싶은 방문자에게도 유용하다.

IA·SEO 전략

정보 구조는 잘 정리돼 있지만, 기계가 그 구조에 접근하는 경로에는 확인이 필요한 지점이 있다. 이번 리뷰를 준비하며 명령행 클라이언트와 자동화 브라우저 두 경로로 접속했을 때 모두 Cloudflare 차단 화면과 함께 403 응답을 받았다. 봇 대응 설정은 공격 트래픽을 막는 데 필요한 조치지만, 검색엔진과 AI 답변 엔진의 크롤러 역시 자동화된 클라이언트라는 점에서 양날이다. 정상 크롤러를 예외로 두는 규칙이 설정돼 있는지, 그리고 주요 검색엔진의 크롤링 통계에 오류가 잡히고 있지는 않은지 점검할 필요가 있다.

콘텐츠 구조 자체는 검색에 유리한 재료를 이미 갖췄다. 계열사마다 이름과 한 줄 설명이 쌍으로 존재하고, 뉴스룸에는 발행 주체별로 분류된 기사가 쌓인다. 이 재료를 Organization과 subOrganization 구조화 데이터로 연결하고 뉴스 항목에 NewsArticle을 적용하면, ‘한진그룹 계열사’나 ‘한진칼 자회사’ 같은 질의에 기계가 답할 근거가 생긴다. 부문별 화면이 탭 전환으로만 바뀌고 주소가 그대로라면, 부문마다 별도 URL을 부여하는 편이 색인과 공유 양쪽에 유리하다. 각 부문 페이지는 그 자체로 ‘항공 계열사 목록’이라는 검색 의도에 정확히 대응하는 문서가 된다.

성능·접근성

첫 화면이 전면 영상이고 그 아래로 계열사 이미지 카드, 뉴스 썸네일, 소셜 카드가 이어지는 구성이라 초기 전송량이 작지 않다. 히어로 영상은 포스터 이미지를 먼저 띄우고 영상을 뒤이어 붙이는 방식이면 첫 화면이 그려지는 시점을 앞당길 수 있다. 뉴스룸과 Social 한진의 카드 이미지는 화면에 들어올 때 불러오도록 지연 처리하고, 차세대 포맷으로 내보내면 스크롤 도중의 지연도 줄어든다.

접근성 면에서는 히어로에 일시정지 버튼을 둔 점이 눈에 띄는 배려다. 다만 배경 영상 위 흰 텍스트는 장면이 바뀔 때마다 배경 밝기가 달라지므로, 밝은 프레임에서도 대비가 유지되는지 확인이 필요하다. 계열사 로고 원형 아이콘과 부문 카드처럼 이미지가 곧 기능인 요소에는 회사 이름을 담은 대체 텍스트를 붙여야 화면 낭독기 사용자도 같은 선택을 할 수 있다. 소셜 카드 영역은 가로 스크롤 구조이므로 키보드만으로도 좌우 이동이 가능한지 함께 점검할 만하다.

자주 묻는 질문

디지털 파트너 더블루캔버스

그룹사와 지주회사 홈페이지는 공통된 난제를 안고 있다. 다루어야 할 조직과 자료가 많은데, 방문자는 투자자·구직자·언론·협력사처럼 서로 다른 목적으로 찾아온다. 정보를 다 담으면 메뉴가 무너지고, 줄이면 필요한 사람이 못 찾는다. 해법은 분량 조절이 아니라 분류 축을 정하는 일이며, 그 축은 조직도가 아니라 방문자의 질문에서 나와야 한다.

The Blue Canvas(더블루캔버스)는 기업 홈페이지 제작에서 이 축을 먼저 정한다. 어떤 방문자가 어떤 문장으로 검색해 들어오는지 정리하고, 그 질문에 대응하는 문서 단위로 URL을 나눈 뒤, 조직과 소식을 구조화 데이터로 연결한다. 계열사가 많을수록 사람이 읽는 화면과 기계가 읽는 구조를 함께 설계해야 검색과 AI 답변 양쪽에서 같은 정보가 일관되게 인용된다.

The Blue Canvas 홈페이지 제작 문의

마무리와 다음 스텝

한진칼의 사이트는 복잡한 그룹 구조를 단순한 화면으로 옮기는 데 성공했다. 1뎁스 메뉴 다섯 개, 부문 카드 다섯 장, 숫자 세 개라는 절제된 구성이 42개 계열사를 부담 없이 소개하고, 계열사 로고를 그대로 필터로 쓴 뉴스룸은 이 회사만이 쓸 수 있는 자산을 UI로 바꾼 사례다. 역대 회장관을 1뎁스에 올려 80년의 연혁을 전면에 둔 편집 판단도 지주회사 사이트로서는 드문 선택이다.

실행 제안은 셋이다. 첫째, 보안 설정이 검색엔진 크롤러까지 막고 있지 않은지 확인하고, 필요한 예외 규칙을 정리한다. 둘째, 사업 부문과 계열사에 각각 고유 URL을 부여하고 Organization·subOrganization 구조화 데이터로 관계를 명시한다. 셋째, 히어로 영상과 카드 이미지의 로딩 순서를 정리해 첫 화면이 그려지는 시점을 앞당긴다. 화면에서 이미 끝낸 정리를 구조에서도 마치면, 이 사이트는 지금보다 훨씬 자주 인용될 것이다.