개요
HDC홀딩스는 HDC그룹을 이끄는 지주회사다. 사이트 상단 네비게이션은 HDC 그룹, 사업 분야, 투자 정보, 지속가능경영, 홍보 센터 다섯 갈래로 갈라지고, 우측 끝에 KR·EN 언어 전환이 붙는다. 개별 제품을 파는 커머스와 달리 지주회사 웹사이트는 그룹의 규모와 방향성, 재무 건전성을 한눈에 납득시켜야 하는 자리다. 이번 리뷰는 첫 화면의 렌즈 모티프가 만드는 시선의 초점, 자산총계와 신용등급을 큼직하게 세운 IR 지표 섹션, 그리고 ESG 내러티브가 투자자와 구직자에게 어떤 첫인상을 남기는지를 UX/UI 관점에서 짚는다.
브랜드 & 메시지
첫 화면을 여는 문장은 영문 대형 산세리프의 To the Greater Value. 그 아래 붉은 HDC 로고를 이정표 삼아 “HDC는 축적된 인프라와 전문성을 바탕으로, 삶과 사회의 더 큰 가치를 만들어갑니다”라는 국문 서브카피가 슬로건을 풀어 준다. 인상적인 건 배경이다. HDC 사옥을 커다란 원형 렌즈로 클로즈업해 건물의 붉은 구조 브레이스를 또렷하게 끌어올렸다. ‘더 크고 선명하게 본다’는 은유가 To the Greater Value라는 카피와 그대로 맞물린다.
톤앤매너는 철저히 무채색 사진 위에 최소한의 텍스트를 얹는 방식이다. 섹션마다 붉은 세로 바를 단 영문 아이브로 라벨 — Generalized Specialist, HDC Investor Relations, Our ESG — 이 진입점을 표시하고, CTA는 예외 없이 ‘더 알아보기 →’ 화살표 하나로 통일돼 있다. 요란한 버튼 대신 방향만 가리키는 절제된 문법이 지주회사다운 무게감을 만든다.
UX/UI 관점
이 웹사이트가 잘 해낸 디자인 판단을 화면에 근거해 정리하면 이렇다.
1. 은유가 작동하는 히어로. 렌즈 안으로 들어온 사옥만 채도와 디테일이 살아나 시선을 강제로 한 점에 모은다. 장식이 아니라 브랜드 메시지를 시각화한 훅이다. 2. 반복되는 진입 리듬. 붉은 세로 바 + 영문 라벨 조합이 모든 섹션 머리에 놓여, 스크롤을 내릴 때마다 ‘새 챕터’를 예고한다. 3. 숫자의 위계. 투자 정보 블록은 ‘2조 3,634억’ 자산총계와 ‘739억’ 매출액, ‘1976년 3월’ 설립년도, ‘A(안정적)’ 신용등급을 대형 타이포로 세워 한 줄로 신뢰를 압축했다. 4. 풀블리드 교차 편집. 밝은 사무 공간, LIFE·AI·ENERGY의 어두운 건축 인테리어, 노을 진 바다 같은 풀화면 사진이 밝고 어두운 톤을 번갈아 배치돼 지루함 없이 흐른다. 5. 수미상관 푸터. 맨 아래에서 다시 대형 To the Greater Value를 반복해, 스크롤의 시작과 끝을 한 문장으로 묶었다.
IA·SEO 전략
지주회사 사이트의 검색 성과는 브랜드 검색 방어와 IR·채용 콘텐츠의 발견성에서 갈린다. 사업 분야가 LIFE·AI·ENERGY로 나뉘는 만큼, 각 부문 랜딩은 서로 다른 <title>과 meta description을 갖고 부문 고유 키워드를 H1에 명시해야 검색 결과에서 서로를 잠식하지 않는다. 홈에 큼직하게 노출된 자산총계·매출액·신용등급 지표는 반드시 이미지가 아니라 선택 가능한 텍스트로 마크업해, 크롤러가 최신 실적 수치를 읽어 리치 결과로 노출할 여지를 남겨야 한다. 보도자료와 공시가 모이는 홍보 센터에는 Organization과 NewsArticle 구조화 데이터를 붙이고, KR·EN 이중 언어는 hreflang으로 대응 관계를 명시해 국내외 검색 유입을 각각 잡는 것을 권한다.
성능·접근성
이 사이트의 무게중심은 풀블리드 고해상도 사진이다. 히어로의 렌즈 합성 이미지부터 노을 진 바다까지 대형 비주얼이 연속되므로 LCP 관리가 핵심이다. 히어로 이미지는 WebP·AVIF로 병행 제공하고 preload로 우선 로드하되, 하단 데코 사진은 지연 로딩으로 분리해 초기 페인트를 앞당기는 편이 좋다. 대형 숫자와 영문 제목에 쓰인 웹폰트는 display=swap과 서브셋으로 첫 렌더 지연을 줄인다. 접근성 측면에서는 밝은 하늘·바다 사진 위에 얹힌 흰 서브카피의 명암 대비를 WCAG AA 기준으로 재검증하고, 붉은 아이브로 라벨처럼 강조 요소가 색에만 의존하지 않도록 텍스트 라벨을 병행해야 한다. 배경 사진에는 의미를 담은 alt와 장식용 숨김 처리를 명확히 구분해 적용한다.
디지털 파트너 더블루캔버스
HDC홀딩스처럼 지주회사·건설·제조 같은 ‘중후장대’ 산업일수록 웹사이트는 제품이 아니라 신뢰를 파는 채널이 된다. 렌즈 한 컷으로 메시지를 은유하고 재무 지표 한 줄로 건전성을 증명하는 이 사이트가 좋은 예다. The Blue Canvas는 브랜드의 핵심 가치를 이렇게 ‘한 화면의 은유’로 번역하는 웹디자인과 홈페이지 제작을 강점으로 삼는다. 기업 아이덴티티 정립부터 IR·채용·ESG 콘텐츠 구조 설계, 검색엔진최적화(SEO), 그리고 유입을 성과로 바꾸는 퍼포먼스 마케팅까지 한 팀에서 이어 간다. 그룹 브랜드 사이트나 부문별 랜딩의 웹사이트 제작을 고민 중이라면, 아래에서 실제 작업 사례를 확인해 보길 권한다.
마무리와 다음 스텝
HDC홀딩스의 홈은 절제로 신뢰를 만든다. 렌즈 은유의 히어로, 붉은 아이브로가 만드는 진입 리듬, 대형 숫자로 압축한 IR 지표까지 지주회사가 보여줘야 할 것을 군더더기 없이 세웠다. 다음 세 가지를 우선 실행 과제로 제안한다. 첫째, IR 지표를 텍스트 마크업으로 전환해 검색·접근성·유지보수를 동시에 잡는다. 둘째, LIFE·AI·ENERGY 부문 랜딩의 메타데이터와 H1을 부문별로 차별화한다. 셋째, 밝은 배경 위 흰 텍스트의 대비를 재점검해 어느 화면에서도 카피가 또렷하게 읽히도록 다듬는다. 지금의 톤을 유지한 채 이 세 가지만 손봐도 UX/UI 완성도는 한 단계 올라선다.