UI/UX 라이프

“영업 사원들이 환호한 이유는?” HD현대 EP사업부 웹 구축 비결

HD현대 EP사업부 웹사이트 구축 프로젝트 | 나인파이브 제작

2024.09.12

---

HD현대 EP(Eco Propulsion) 사업부는 친환경 선박 추진 솔루션을 개발하는 사업 부문이다. 엔진을 비롯해 후처리 시스템, 연료 공급 시스템, 전장품 등 선박 구동에 필요한 모든 부품을 다룬다. 국제 해운 업계가 온실가스 감축이라는 장기적 목표를 내건 가운데, 모든 해양 선박에 지속 가능한 하이브리드 및 전기 추진 솔루션을 제공, 깨끗한 해운 산업으로의 전환을 지원하는 것이 목표다.

EP사업부는 지난해 야심차게 출범한 신 사업부다. 기술력과 제품력은 세계적으로도 손꼽히는 수준이지만, 인지도나 영업 환경 면에선 아쉬움이 존재했다. 별도 웹사이트가 없어 카탈로그나 박람회, 링크드인을 통한 설명만으로는 고객 선주들에게 ‘올인원 솔루션 제공’이라는 EP사업부의 세일즈 포인트를 충분히 이해시키기 어려웠다.

이러한 영업 활동의 불편을 개선하기 위해 EP사업부는 디지털 디자인 에이전시 나인파이브와 함께 웹사이트를 구축하기로 결정했다. EP사업부만의 정체성을 담아내는 동시에 영업 일선에서 실제 세일즈에 유용하게 활용할 수 있는 기능을 탑재하는 것이 목표였다.

지난 8월 론칭된 EP사업부 웹사이트는 광범위한 사업 영역을 일목요연하게 정리하고 있으며, 무엇보다 방문자가 선박 부품을 하나하나 선택해 조립할 수 있는 3D쇼룸을 구축한 뒤 실제 견적 문의까지 넣을 수 있는 플로우를 구축해 영업 환경의 문제점을 실질적으로 개선했다는 평가를 받고 있다.

이처럼 B2B 세일즈 영역에 접목된 감각적인 디자인과 실제 영업 현장의 페인 포인트를 해결한 점을 높이 평가받아 지난 8월 디지털 인사이트가 주최·주관하는 ICT AWARD KOREA 2024에서 GRAND PRIZE를 수상하기도 한 EP사업부 웹사이트. 이번 프로젝트를 진행한 나인파이브를 만나 개발 비결을 들었다.

비결 1. EP사업부의 정체성을 담아낸 그릇

프로젝트 수주 당시 EP사업부는 별도의 웹사이트를 갖고 있지 않았다. 나인파이브와 EP사업부는 프로젝트 전부터 긴밀한 소통을 거쳐 사업부의 정체성을 뾰족하게 구체화하고, 이를 담아낼 수 있는 그릇으로써 웹사이트를 기획하기로 했다.

프로젝트를 담당한 최수지 나인파이브 PM은 EP사업부의 정체성을 ‘미래로 나아가는 추진력’으로 정의하고, 이를 웹사이트 전반에 담아내려 했다고 전했다.

“EP사업부를 마주하고 느낀 첫 감상은 ‘고객에게 다가가려는 곳’이라는 점이었어요. 현재에 머무르지 않고 미래로 나아가려 하는 점, 하이테크를 친환경이라는 관념에 투영하려는 노력 등을 이미지화해 웹사이트 전반에 녹여내려 했죠.”

이를 위해 키비주얼에서도 ‘나아감’이라는 개념을 시각적으로 표현했다. 이충무 나인파이브 디자인 디렉터는 “누구나 사업 영역을 직관적으로 이해할 수 있도록 선박 내부의 부품 이미지, 전진하는 물방울 등을 비주얼 요소로 활용했다”며 “단순한 디자인보다는 무에서 유가 창조되는 듯한 이미지를 최대한 살리려 했다”고 설명했다.

아울러 그룹사인 HD현대 웹사이트와의 통일성을 유지하면서도 EP사업부만의 정체성을 드러내기 위해 HD현대의 디자인 가이드라인을 참고, 폰트, 컬러, UI 노트 등을 준수했으며, 광범위한 서비스와 기술적인 요소를 논리적으로 구조화해 세일즈에 중점을 둔 EP사업부만의 색깔도 살렸다.

비결 2. 글로벌 해운 업계 최초 3D쇼룸 제작

EP사업부 웹사이트가 갖고 있는 핵심 역할 중 하나는 효과적인 제품 홍보를 통해 세일즈에 기여하는 것이다.

이에 나인파이브는 친환경 솔루션을 체험할 수 있는 3D 쇼룸을 제작했다. 온라인 가상 스튜디오에서 엔진과 구동 시스템 등 각 부품을 선택해 나만의 선박을 커스터마이징할 수 있는 기능으로, 웹사이트를 방문한 고객은 물론 영업 사원들이 선주들과 마주한 자리에서 EP사업부 제품을 설명하는 용도로 활용되고 있다.

이처럼 웹 상에서 구동되는 제품 커스터마이징 서비스는 전 세계 해운 업계에서 EP사업부 웹사이트가 유일하다. 나인파이브는 실제 영업 현장에 도움이 되는 기능을 구현하기 위해 프로젝트에 앞서 EP사업부 엔지니어 및 기술자 등 10~20명과 심층 인터뷰를 진행, 현장에서 요구되는 부분을 꼼꼼하게 체크했다.

특히 3D 쇼룸을 개발할 때 집중했던 건 크게 두 가지로 하나는 빠른 속도이고, 또 하나는 디테일이다.

속도가 중요한 이유는 명확하다. 조금이라도 버벅거리면 사용자가 이탈하기 때문이다. 나인파이브에 따르면, 현재 EP사업부 3D 쇼룸의 구동 환경은 국내외 관련 업계의 유사한 3D 서비스를 모두 통틀어 최고 수준이다.

“웹에서 3D 서비스를 개발할 때는 지연이 있으면 안 돼요. 디테일을 하나하나 잡아가면서 로직을 효율적으로 짜는 데 가장 집중했어요. 아주 작은 것까지 다 체크했죠. 특히 EP사업부의 주요 고객이 북유럽 선박 회사라서요. 해당 국가 HD현대 법인의 피드백을 받아가며 유럽 접속 환경이 원활하도록 완성도를 높이는 데 많은 신경을 썼어요.” 3D 쇼룸 개발을 담당한 김상훈 WebGL 개발자의 말이다.

또 다른 특징은 수백 가지에 달하는 경우의 수에 완벽히 대응하는 디테일이다. 부품의 조합을 묘사하는 데 그치지 않고, 각 조합에 따른 연료 효율과 에너지 흐름의 변화까지 시각적으로 보여주고 있다. 이래야만 고객이 “이런 식으로 견적을 짜면 배가 이렇게 구동하고, 연료가 덜 먹는구나”를 직관적으로 이해할 수 있기 때문이다.

김상훈 개발자는 “부품 조합에 따라 선주들이 얻는 이점이 다르고, 이를 반응형으로 대응할 수 있도록 설계하는 것이 과제였다”며 “선주들은 해당 분야의 전문가들이기 때문에 미묘한 부품의 위치와 에너지 흐름, 연료 효율의 변화를 정확하게 반영할 수 있도록 신경 썼다”고 했다.

부품을 3D 모델링하는 것도 난관이었다. EP사업부에서 제공해준 3D 모델링 파일 가운데 웹 용으로 제작된 것이 없었기 때문이다. 이에 나인파이브 팀원들이 직접 사진과 설계 도면을 보면서 부품의 형태를 추정, 3D 모델링을 진행했다.

김상훈 개발자는 “3D 쇼룸 이용자가 선주인 만큼 적어도 부품의 외양은 완벽하게 구현해야 했다”며 “하지만 너무 디테일하게 표현하면 파일이 무거워져 웹에서 작동하지 않을 테니 어떤 부위가 핵심인지 파악하는 일이 중요했다. 모델러 분들이 직접 전공 서적과 유튜브를 통해 선박 부품에 대해 공부하고, 고객사와 소통하면서 모델링 작업을 했던 기억이 난다”고 전했다.

이 같은 3D쇼룸은 세일즈 환경을 크게 개선한 것으로 평가 받는다. 이충무 수석은 “이전에는 영업 현장에서 카탈로그를 가지고 수백 가지의 경우의 수를 일일이 설명해야 했는데, 이제는 바로 보여줄 수 있으니 고객과 소통하기가 훨씬 수월해졌다”고 했다.

현재 웹사이트 론칭이 얼마 되지 않아 정량적으로 측정할 수 있는 성과는 적지만, 이미 업계의 반응은 뜨겁다. 지난 6월 유럽 해운 박람회에 참석해 개발이 어느 정도 완료된 3D쇼룸만 선 공개한 결과 “드디어 해운 업계에도 이런 서비스가 등장했다”며 선주들의 열렬한 관심을 받은 것으로 나타났다.

비결 3. 세일즈 전반에 도움이 되는 웹사이트

이번 프로젝트는 ‘다이내믹 익스펜션(Dynamic Expansion)’이라는 콘셉트 하에, 브랜딩과 고객 경험, 비즈니스 전반을 통합적으로 확장하여 B2B모델을 넘어선 B2B4C 사이트를 구축하는 것을 목표로 진행됐다. 특히 비즈니스 측면에서 정보 수용자에 그쳤던 사용자를 정보 공유자로 탈바꿈해 양방향 고객 커뮤니케이션 채널을 확보하는 등 사용자 경험 개선에 초점을 맞췄다.

우선 다양한 CTA 버튼을 적재적소에 배치해 자연스럽게 제품 견적 및 문의로 이어지도록 유도했다. 아울러 회원가입 사용자에게는 3D 쇼룸에서 만든 제품 견적을 저장하고 카카오톡과 SNS 등으로 외부 공유할 수 있게 해 언제든 다시 확인하고 수정할 수 있도록 했다.

웹사이트 구조 면에서도 사용자의 니즈를 고려했다. 최수지 PM은 “EP사업부 웹사이트를 방문한 선주가 가장 궁금해할 만한 내용은 ‘과연 내 배도 여기서 제작할 수 있을까?’일 것”이라며 “아주 작은 배부터 아주 큰 배까지 EP사업부가 모두 소화할 수 있다는 점을 명확하게 드러내기 위해 제품의 스펙과 라인업을 구조화하는 데 신경 썼다”고 했다.

아울러 그는 “포트폴리오 페이지도 같은 맥락에서 구축됐다”며 “EP사업부가 납품한 실제 선주들의 선박 데이터를 사진과 상세 스펙과 함께 담아냈다. 실제 포트폴리오를 보여 준다면 더 다양한 사용자까지 고객 범주에 끌어들일 수 있을 것”이라고 전했다.

이처럼 뚜렷한 목적을 갖고 프로젝트에 임한 덕일까. EP사업부 웹사이트는 ICT 서비스를 대상으로 열리는 국내 최대 시상식 ICT AWARD KOREA에서 앱·웹사이트 품질 부문 GRAND PRIZE를 수상할 수 있었다. 수상 비결을 묻는 질문에 이충무 디렉터는 다음과 같이 답했다.

“우선은 B2B 세일즈 분야의 웹사이트임에도 친근하고 감각적인 디자인이 주목을 받은 것 같아요. 현재 EP사업부 경쟁사의 웹 대부분이 마치 PDF 문서를 그대로 옮긴 것처럼 딱딱하거든요. 여기에 더해 세일즈 활동에 실질적으로 기여하는 등 고객사의 니즈와 사용자의 방문 목적을 충분히 고려해 제작된 점이 좋은 평가를 받았다고 생각합니다.”

• 나인파이브
• 웹사이트
• 플랫폼

• 에디터장준영 (zzangit@ditoday.com)
• 섬네일손 찬호