김 동욱님의 아티클 더 보기

UI/UX

“비주얼로 완성한 브랜드 아이덴티티” 한화그룹 웹사이트 리뉴얼

한화그룹 국문 플랫폼 프로젝트

한화그룹은 우주항공-방위산업, 에너지, 금융, 서비스 4개의 주요 산업 부문에서 수많은 계열사를 거느린 거대 그룹이다. 올해 타임지 선정 100대 기업 목록에 국내 유일 기업으로 선정됐다. 최근엔 미국 필라델피아에 위치한 필리 조선소 지분 100%를 인수하는 계약을 맺고 미국 조선업에 진출하는 등 각 산업에서도 두각을 보이고 있다.

이처럼 많은 계열사가 각기 다른 산업 분야에서 활약하고 한화그룹의 덩치가 커질수록 분야별 활동과 계열사를 통합해 일관된 톤 앤 매너로 소개하는 웹사이트와 SEO 강화의 필요성이 점점 높아져갔다. 이는 더즈인터랙티브가 한화그룹과 협력한 ‘한화그룹 국문 웹사이트’ 리뉴얼 프로젝트가 진행된 배경이다.

한 가지 요소를 자세히 설명하는 것은 쉽지만, 많은 요소를 간결하고 이해하기 쉽게 정리하는 일은 설명해야 할 요소가 많아질수록 기하급수적으로 난이도가 올라가는 법이다.

과연 각기 다른 분야의 수많은 계열사들의 역량을 1개의 홈페이지에 모은다는 난이도 높은 도전에 뛰어든 더즈인터랙티브는 어떻게 한화그룹 국문 웹사이트를 성공적으로 리뉴얼했을까?

1. 프로젝트명: 한화그룹 국문 플랫폼
2. 클라이언트사: ㈜한화
3. 대행사(제작사): 더즈인터랙티브
4. 오픈일: 2024년 02월 07일
5. URL: https://www.hanwha.co.kr/

간결하고 직관적인 UI·UX

앞서 말했듯 이번 한화그룹 국문 웹사이트 리뉴얼 프로젝트의 핵심 목표는 각기 다른 분야에서 활약하고 있는 수많은 계열사들을 통합해 정리하고, 브랜드의 비전·방향성·메시지를 명확하면서도 간결하게 전달하는 것이었다.

이에 더즈인터랙티브는 가장 먼저 사이트 디자인 가이드를 재정립해 통일감 있는 톤앤매너 및 레이아웃을 갖추는 것에 집중했다. 실제 새롭게 리뉴얼된 한화그룹 국문 웹사이트에선 텍스트 중심으로 설계돼 있었던 기존 페이지들이 시각적으로 단순하게 개선된 모습과 복잡한 정보 구조 역시 적극적인 이미지 및 영상 활용을 통해 사용자가 가시적으로 확인할 수 있게끔 바뀐 모습을 찾아볼 수 있다.

또한 더즈인터랙티브는 개선 이후에도 계열사 활동에 따라 업데이트 될 수 있는 정보 및 콘텐츠들까지 고려해 ‘사업영역’ ‘대표전화’ ‘주소’ ‘소셜 버튼’ 등을 추가 개발 작업 없이 웹사이트 관리자가 관리자 메뉴에서 바로 업데이트할 수 있게끔 기능을 추가하는 등 사용자 편의성도 고려했다.

이번 프로젝트를 주도한 이병권 더즈인터랙티브 선임 매니저는 “한화그룹 내 수많은 계열사가 보유하고 있는 풍부한 소스 자료들이 있었는데, 워낙 사업분야도 많고 계열사도 많다 보니 디자인 소스들의 컨디션도 모두 제각각이었다”라고 말하면서 이번 프로젝트의 최대 난관이자 집중 포인트를 밝혔다.

텍스트 중심에서 비주얼 중심으로

한화그룹 국문 웹사이트 진입 연출(자료=더즈인터랙티브)

독특하게도 한화그룹 국문 웹사이트에 처음 접속한 사용자를 반기는 것은 일반적인 홈페이지 UI가 아니다. 사용자가 처음 웹사이트에 “멈추지 않는 도전과 혁신으로 한화는 땅, 바다, 우주 그리고 미래를 연결합니다”라는 문구와 ‘땅’과 ‘바다’ 단어 사이에서 한화그룹의 다양한 사업을 소개하는 영상이 전개되는 연출이다.

또한 홈페이지 진입 이외에도 이번 한화그룹 국문 웹사이트에선 적극적인 영상과 이미지 사용을 찾아볼 수 있다. 자칫 기업 소개에 너무 매몰된 나머지 무한한 텍스트 압박에 사용자가 이탈하게 되는 것과 사뭇 다른 모습이다.

이런 디자인에 대해 이병권 더즈인터랙티브 선임 매니저는 “땅과 바다, 우주에 이르기까지 인류의 지속 가능한 미래를 위한 한화그룹의 산재되어 있던 주요 사업을 효과적으로 보여주기 위해 디지털 쇼룸을 구축했다”고 홈페이지의 콘셉트를 설명했다.

“이미지는 고객들로 하여금 한화그룹이 말하고자하는 브랜드 메시지 및 비즈니스 활동을 한 눈에 확인할 수 있는 이미지를 사용했습니다. 특히 한화 허브 페이지의 경우 사업 규모감을 효율적으로 보여주기 위해 풀 3D 오브젝트 및 영상으로 구현했습니다.”

(자료=더즈인터랙티브)

패럴랙스 인터랙티브로 사용자와 상호작용

한화그룹 국문 웹사이트의 패럴랙스 인터랙티브(자료=더즈인터랙티브)

간결하고 직관적인 UI·UX나 적극적인 이미지, 영상 활용 이외에도 이번 한화그룹 국문 웹사이트를 탐색하다 보면 자연스럽게 깨닫게 되는 한 가지 특징이 더 있다. 바로 이번 한화 그룹 웹사이트는 사용자의 스크롤링과 마우스 커서 조작에 실시간으로 반응하고 있는 점이다.

대표적으로 사업분야 영역에선 마우스에 따라 펼쳐지는 아코디언 형태의 UI를 통해 사용자가 첫 진입할 시 4개의 사업 분야가 균등하게 노출된 상태에서 마우스 이동에 따라 영역이 펼쳐져 계열사 페이지의 상세 정보를 확인할 수 있다.

사용자의 스크롤링에 따라 배경과 전경 요소가 움직이는 시각 효과를 통해 사용자가 마치 살아 숨 쉬는 공간을 탐험하는 듯한 생동감 있고 몰입감 있는 경험을 제공하는 ‘패럴랙스 인터랙티브 기법’을 사용한 것이다.

철저한 사용자 조사를 동반한 페르소나 기반 디자인

(지료=더즈인터랙티브)

모름지기 좋은 UI·UX 디자인에는 풍부한 사용자 조사가 동반된다. 특히 이번 한화그룹 국문 웹사이트는 쉬운 정보 탐색과 직관적이고 쉬운 설명 등으로 홈페이지 리뉴얼 직후 다양한 사용자들에게 호평을 이끌어냈다.

홈페이지 리뉴얼 작업에 당연한 결과라 말할 수도 있지만, 의외로 적지 않은 홈페이지들이 리뉴얼 직후 ‘이럴 거면 차라리 옛날 버전이 더 좋았다’라는 반발에 직면한다. 바로 사용자 분석에 실패했기 때문이다. 하지만 이번 리뉴얼을 담당한 더즈인터랙티브는 20년 넘게 디지털 디자인 업계의 최전선을 달리고 있는 기업답게 사용자 분석 단계부터 철저하게 준비했다.

실제로 더즈인터랙티브는 “사이트를 방문하는 목적에 따라 대표 사용자 페르소나들을 분석하고 각각의 페르소나들의 고객 여정을 분석했다”며 “각 페르소나가 메인 페이지 첫 진입부터 어느 페이지로 정보 탐색을 할지 행동 및 페인포인트 값을 도출했고, 이에 따라 각 페르소나의 니즈를 파악해 작업에 적극 활용했다“고 말했다.

“사이트를 방문하는 목적에 따라 일반 방문자, 채용 희망자, 기자, 잠재적 투자자 이 4개의 페르소나를 설정했습니다. 그리고 각각의 페르소나 니즈를 페이지 내 정보 및 콘텐츠 배치, 검색 및 이동 기능 설계에 반영해 녹여내서 더욱 매끄러운 유저 플로우를 구현할 수 있었죠.”

기업 홈페이지라는 본질에도 충실해

(자료=더즈인터랙티브)

앞서 브랜드 메시지 영역에서 이미지를 사용해 키 메시지를 효율적으로 전달하고자 한 것처럼 이번 한화그룹 국문 웹사이트는 기업 소개 홈페이지라는 본질에도 충실한 웹사이트다.

특히 이번 한화그룹 국문 프로젝트는 단순 사업 소개를 넘어 뉴스 콘텐츠 제공에도 많은 공을 들였다. 실제 계열사 페이지에선 한화 계열사 정보를 확인 후 곧바로 뉴스를 확인할 수 있는 레이아웃 구조를 갖추고 있다.

전용 뉴스룸 페이지 역시 보도자료 기반으로 그룹에서 제공하는 미디어 자료를 통해 한화그룹을 집중 탐구하는 기회를 제공하는 등 브랜드 저널리즘을 실현하고 있는 모습 또한 인상적이다.

결과적으로 이번 한화그룹 국문 프로젝트는 단순히 기업 소개 홈페이지의 역할을 넘어, 보도자료를 비롯한 한화그룹의 브랜드 가치를 담고 있는 콘텐츠들을 사용자들에게 전달하는 ‘미디어 허브’ 플랫폼의 역할까지 수행하고 있는 것이다.

“좋은 기업 웹사이트는 기업 소개에 끝나지 않고 연계되는 정보 확인까지 복합적으로 이뤄져야 하는 사이트라고 생각합니다. 이를 위해 최신 뉴스 영역을 활용하거나 접근이 용이한 콘텐츠 검색 UI를 구현해 사용자로 하여금 더욱 원하는 내용을 선택하여 쉽고 빠르게 확인할 수 있는 구조로 기획했습니다.”

리뉴얼 효과도 증명

이처럼 공들인 디자인의 효과는 확실했다. 새롭게 진행된 한화그룹 국문 플랫 웹사이트 리뉴얼 결과 이전과 비교해 사용자 수 가 약 60% 이상 증가했으며, 트래픽 수는 약 75% 이상 증가하는 추세를 보였다. 웹사이트 리뉴얼이 실제로 사용자들에게 긍정적인 효과를 주고 있다는 것을 증명한 것이다.

일반 사용자들 사이에서도 호평이 이어졌다. 실제 홈페이지 리뉴얼 기념 SNS 인증 이벤트에는 2주 남짓의 짧은 기간에도 불구하고도 많은 사용자들이 참여해 “세련된 디자인과 미래지향적인 느낌이 느껴진다”, “간결한 구성으로 원하는 정보를 쉽게 찾을 수 있었다” “현황을 한눈에 볼 수 있어서 좋았다” 등의 호평을 내보이기도 했다.


Mini Interview
우병조 (주)한화 전략부문 과장

오랜 시간 쌓아온 한화그룹의 헤리티지와 브랜드 메시지를 잘 녹여내는 것, 그리고 한화그룹의 비전을 한번에 홈페이지에 담아 낸다는 것이 이번 프로젝트의 큰 숙제였습니다. 또한 한화그룹의 다양한 콘텐츠들을 허브역할을 할 수 있는 플랫폼에 모아 소비자들에게 전달 하려는 의도가 담긴 뉴스룸 역시 새로운 시도였습니다.
짧은 작업기간 임에도 다양한 고민이 담긴 제안을 해주신 더즈인터랙티브의 노고 덕분에 무사히 잘 마칠 수 있게 되어 개인적으로도, 업무적으로도 한층 더 성장할 수 있게 된 경험이라 생각합니다.

이병권 더즈인터랙티브 기획팀 선임

국내 최대 규모의 한화그룹 사이트를 성공적으로 리뉴얼한 것 같아 구축 직후 매우 기뻤습니다. 고객들로 하여금 어떻게 하면 사업활동 및 콘텐츠 들을 효율적인 UX를 통해 확인할 수 있을까, 어떻게 해야 가시적으로 사업 활동 등을 확인할 수 있을까, 하고 내부 작업팀들과 고민한 부분이 잘 표현된 것 같습니다. 또한 이러한 고민 포인트를 캐치해 잘 받아준 한화그룹과의 긴밀한 협력이 있어서 더욱 뿌듯했던 프로젝트였던 것 같습니다.

답글 남기기

이메일 주소는 공개되지 않습니다. 필수 필드는 *로 표시됩니다