온라인 차량 구매 플랫폼 속 개발자의 역할
현대차그룹의 프론트엔드, 백엔드 개발자의 업무를 살펴보았습니다.
자동차는 아날로그 시대에 태어난 이동수단입니다. 하지만 현재는 디지털의 첨단을 달리는 디바이스로 여겨지고 있습니다. 전통적인 차량 수리와 부품 교체 등의 하드웨어 서비스가 여전히 존재하면서, OTA(Over-The-Air) 업데이트를 통한 성능 개선과 정보 제공, 엔터테인먼트 서비스 등 소프트웨어 기반으로 제공되는 다양한 서비스도 이뤄지고 있기 때문입니다. 이와 같이 소프트웨어 기반의 온라인 서비스 영역이 확장되면서 IT 업계에서만 볼 수 있었던 소프트웨어 개발자를 자동차 회사에서 만나는 광경은 어느새 일반적인 모습이 되었습니다.
글로벌 브랜드인 현대자동차그룹은 여러 국가에 진출해 뿌리를 내리고 있습니다. 대표적인 이머징 마켓인 동남아시아 지역도 예외가 아닙니다. 특히 현대차와 기아는 태국과 같은 일부 국가에서 온라인 커머셜 플랫폼을 마련해 적극적인 판매 전략을 펼치고 있습니다.
현대차그룹 IT비즈플랫폼개발실에서 커머셜 플랫폼 개발을 담당한 강진경, 신지은 매니저와 함께 백엔드 및 프론트엔드 개발자가 실제 개발 프로젝트에서 어떤 역할을 담당했는지 들어보겠습니다.
*프론트엔드와 백엔드가 궁금하다면? <서비스를 구성하는 두 영역, ‘프론트엔드’와 ‘백엔드’> 콘텐츠 보러가기
웹사이트는 여러 단계를 거쳐 완성됩니다. 비교적 최근 런칭이 이뤄진 현대차와 기아의 태국 법인 홈페이지의 커머셜 플랫폼을 예시로 들어 볼까요? 우선 태국 현지 사업부와 기획팀은 웹사이트의 방향성과 요구사항을 조율합니다. 기획팀은 현지 사업부의 요구사항을 정리함과 동시에 차량의 상세 사양 선택에서 구매까지 이어지는 기능적인 흐름을 설계합니다. 구체적인 레이아웃이나 UI를 설계하기 위해 디자인팀과 협업도 진행합니다.
이후 웹 디자이너가 페이지를 기획 의도에 맞게 디자인하고, 퍼블리셔는 그렇게 완성한 디자인을 웹 화면에 구현할 수 있도록 구조화합니다. 이렇게 구성된 상품 페이지나 여러 버튼의 구성이 작동하게끔 코드를 설계하는 역할을 프론트엔드 개발자가 담당합니다. 그리고 그러한 기능들이 잘 동작할 수 있도록 백엔드 개발자가 지원합니다.
구매 과정 전반에 담긴 백엔드 설계
기아의 커머셜 플랫폼 모델 선택 페이지(상단)와 현대차 태국 커머셜 플랫폼에서 필터링 기능을 작동하는 모습(하단)완성된 커머셜 플랫폼은 이와 같은 모습을 갖추고 있습니다. 불필요한 디자인 요소는 배제하고 차량 구매에 집중할 수 있도록 구성한 모습입니다. 평소에 궁금했던 차량을 선택하면 필요한 차량 정보는 물론 내외관 디자인을 꼼꼼히 확인할 수 있고, 구매를 위한 단계까지 제공하고 있습니다. 고객은 해당 플랫폼에서 차량 상세 정보가 담긴 카탈로그를 확인하거나, 운전해 보고 싶은 차량의 시승 신청도 할 수 있습니다.
원하는 제품을 빠르게 찾을 수 있도록 필터링 기능도 제공합니다. 여기서는 연료와 변속기, 구동 방식 종류를 포함해 차량 비용의 범주까지 설정할 수 있습니다. 선택 사항을 바꿀 때 마다 하단에 보여지는 차량 리스트가 실시간으로 업데이트됩니다.
강진경 매니저는 커머셜 플랫폼의 백엔드 영역에 필요한 개발을 맡았습니다하지만 지금까지 우리가 본 화면은 보기 좋은 ‘틀’에 불과합니다. 위와 같은 기능들이 원활하게 돌아갈 수 있도록 더 많은 동작들이 화면 너머에서 이뤄지고 있기 때문입니다. 각각의 기능이 제 역할을 하기 위해서는 차량 이미지, 고객 정보, 주문 내역 등의 데이터를 모아 놓는 백엔드 영역이 반드시 존재해야 합니다. 이를 위해 데이터베이스를 구축하고, 프론트엔드 영역과 소통하기 위한 ‘API(Application Programming Interface)'를 구성합니다.
강진경 매니저는 태국 웹 커머셜 플랫폼 개발 당시 백엔드 영역의 설계를 담당했습니다. 그는 태국 내 기아 딜러십(판매 대리점)이 사용 중인 시스템과 온라인 판매 시스템을 연계해 유기적으로 작동할 수 있도록 백엔드를 설계했습니다. 차량을 선택할 때 위치 정보가 확인되는 상황이면 근처에 있는 딜러십이 자동으로 추천되고, 선택 시 해당 딜러십에서 구매 가능한 차량만 골라서 확인할 수 있도록 편리함도 더했습니다. 해당 기능의 원활한 작동을 위해 시스템은 딜러십의 차량 정보를 주기적으로 동기화하고 있습니다.
데이터베이스의 연동으로 입력한 고객 정보를 딜러십에 곧장 전달하는 게 가능합니다고객이 시승 신청을 할 때도 백엔드 설계에 따라 데이터가 제공됩니다. 고객 정보를 기입하고 원하는 위치의 딜러십을 선택한 후 제출하면 해당 딜러십으로 시승 신청 정보가 자동으로 전달되는 방식입니다. 강진경 매니저에 따르면, 프론트엔드에서 입력된 고객 관련 정보를 데이터베이스에 저장하고 이를 신청 정보에 맞게 가공하여 제공하는 방식으로 동작한다고 합니다. 이후 딜러십의 시스템 API를 통해 시승 신청이 딜러십에 전달되도록 구현했습니다.
이 과정에서 강진경 매니저는 시스템 사이의 오류를 예방하기 위해 여러 장치를 마련했습니다. 요청과 응답 정보 역시 데이터베이스에 저장하게끔 일종의 백업 체계를 구성했고, 오류를 빠르게 확인할 수 있도록 로그 추적 시스템(로깅 시스템)도 구축했죠. 또한 유지보수가 용이하도록 커머스 플랫폼 서버와 외부 시스템의 연동을 위한 별도의 서버 설계로 안정성을 높였습니다.
판매 중인 차량을 선택해 직관적으로 비교할 수 있는 기능도 더했습니다커머셜 플랫폼은 고객의 라이프 스타일에 맞는 차량을 선택할 수 있도록 모델 비교 기능도 갖췄습니다. 선택 가능한 트림과 가격, 색상 및 주요 제원을 표로 정리해 한 눈에 비교할 수 있도록 제공하고 있습니다. 이와 같은 모든 페이지는 개발자와 디자이너가 설계하고 다듬은 구조입니다. 고객이 한결 편리하게 웹사이트를 경험할 수 있도록 시스템 간의 연동과 기능의 최적화 등, 여러 개발자들의 손길이 구석구석 닿아 있습니다.
일관된 경험을 제공하는 프론트엔드 설계
매끄러운 데이터 활용으로 자연스러운 컨피규레이터 기능을 구현했습니다내친김에 차량을 직접 구매해 보겠습니다. 원하는 모델을 클릭하면 차량 360도로 감상할 수 있는 컨피규레이터 화면이 나타납니다. 마우스를 스크롤하면 차량이 360도 회전하기 때문에 손쉽게 차량의 전반적인 형태를 확인할 수 있습니다. 재미있는 건, 이 컨피규레이터는 3D 그래픽으로 차량을 구현해서 카메라 각도를 변경하는 게 아니라는 사실입니다. 여러 각도에서 촬영한 수십 장의 사진을 마치 3D 그래픽처럼 보이도록 구현한 것이 특징입니다.
신지은 매니저는 기아 태국 커머셜 플랫폼의 프론트엔드 개발을 담당했습니다. 그는 특정 서버에 차량 이미지를 저장하고, 스크롤을 움직일 때마다 해당 각도의 사진을 순차적으로 보여주는 방식으로 해당 기능이 동작한다고 설명했습니다. 여러 장의 사진을 이어 붙였음에도 불구하고 실제 움직이는 것처럼 자연스럽게 360도를 확인할 수 있고, 차체 색상이나 휠 디자인을 바꾸는 것도 가능합니다.
이 기능이 매끄럽게 작동하려면, 이미지가 저장된 서버에서 고객이 원하는 데이터를 빠르게 가져와 화면에 자연스럽게 표시하는 기술 측면에서의 최적화가 무엇보다 중요합니다. 다시 말해 백엔드와 프론트엔드 영역이 잘 맞물려야 고객은 끊김 없는 쾌적한 구매 경험을 할 수 있습니다.
어떤 기능을 사용해도 끊김 없는 사용자 경험을 제공하기 위해 최적화 과정을 진행했습니다일부 차량의 경우 실내도 360도 둘러볼 수 있습니다. 하지만 특정 각도에서 360도를 보여주는 외관과는 달리 모든 각도에서 실내 공간을 확인할 수 있는 것이 특징입니다. 이는 사진을 이어 붙인 외관과는 달리 3D 모델링을 통해 내부 인테리어를 구현했기 때문입니다. 그럼에도 고객은 두 컨피규레이터의 경험적 차이를 인지하기 어렵습니다. 일관된 경험을 제공하기 위한 프론트엔드와 백엔드, 그 외 다양한 영역의 개발자들이 최적화를 철저하게 진행한 덕분입니다.
신지은 매니저는 기획 단계에서의 요구사항이 충분히 갖춰지고, 주기적인 업데이트로 안정성을 확보한 라이브러리*를 찾아 활용하는 것 또한 개발자의 역량이라는 의견도 더했습니다. 실제로 오픈소스로 제공되는 라이브러리를 검토하고 활용하는 사례가 많기 때문에 안정적인 라이브러리를 선정하는 것이 중요합니다.
*라이브러리(Library) : API를 기반으로 특정 기능을 위해 모듈화된 프로그램의 집합
대출 계산기 기능의 경우 은행마다 다른 금융 조건을 제공하기 위해 시스템 API와의 연동이 필요했습니다태국 커머셜 플랫폼에서는 고객이 보유 자금과 금융 프로그램을 함께 활용할 때 금전적인 부분을 쉽게 계산할 수 있도록 ‘대출 계산기’ 기능도 제공합니다. 고객이 입력하는 할부원금, 이자율, 할부 기간 등의 여러 데이터에 따라 실시간으로 대출 금액과 월 상환금을 계산하는 일종의 계산기 프로그램을 마련한 셈입니다. 단순한 기능처럼 보이지만 사실 은행마다 제공하는 대출 조건이 상이해 은행 시스템 API를 호출해 조건 정보를 불러오도록 설계되어 있습니다. 고객은 이를 통해 자신의 자금 상황에 맞는 최적의 금융 조건을 손쉽게 확인할 수 있습니다. 신지은 매니저는 이 기능을 구현하고자 자바스크립트를 활용했다고 전했는데요. 이처럼 각각의 기능들은 눈에 보이지는 않지만 다양한 컴퓨터 언어로 구현되곤 합니다.
고객의 위치 정보를 기반으로 가까운 딜러십 리스트를 제공하거나, 데이터 동기화로 해당 딜러십에서 어떤 차량을 판매하는지도 확인할 수 있습니다차량의 세부 사양과 구입 방법 등을 선택하고 나면 GPS 데이터를 기반으로 고객의 위치와 가까운 딜러십을 제공합니다. 이때 백엔드 영역의 통신 기능을 활용해 위치 정보를 탐색하고 고객과 가까운 순서로 딜러십 리스트를 나열합니다. 이는 현지 판매시스템과의 데이터 동기화로 구현한 기능으로, 강진경 매니저와 같은 백엔드 개발자들이 운영 중 오류가 발생하지 않도록 꾸준히 모니터링하고 있습니다. 따라서 우리가 웹사이트를 사용할 때 기능상 문제가 발생할 염려는 지극히 적습니다.
끊임없는 소통으로 완성되는 웹 서비스 플랫폼
이 일련의 구매 과정을 완성하는 웹 커머셜 플랫폼을 구성하려면 이렇게 프론트엔드 영역과 백엔드 영역이 꾸준히 상호작용을 이뤄야 합니다. 웹 사이트는 하나의 벽을 두고 안쪽과 바깥쪽이 나뉘어 있는 개념이 아닙니다. API라는 매개체를 사이에 두고 서로의 구성 요소들이 이리저리 얽혀 있는 구조이기 때문에 원활한 소통과 협업 없이는 이를 온전하게 구현하기 어렵습니다. 따라서 각 영역의 개발자들은 페이지를 구성하는 요소들을 더욱 매끈하게 연동하고 고객의 요청에 빠르게 반응할 수 있도록 개발 과정 속에서 지속적인 조율 과정을 거치고 있습니다.
웹 서비스 개발 시에는 운영 상의 오류를 최소화하기 위해 여러 단계의 개발 과정을 거칩니다. 크게 로컬 서버(Local) – 개발 서버(Development) – 검증 서버(Staging) – 운영 서버(Production), 네 단계로 나누어 개발과 시스템 반영을 반복해 검증하며 오류를 최소화하고 있습니다. 개발자들은 가장 먼저 자신의 컴퓨터에서만 사용할 수 있는 가상의 공간을 만들고 기능 작동여부를 점검할 수 있습니다. 이 때 만들어지는 가상의 공간이 로컬 서버입니다.
‘개발 서버’에서는 본인 뿐만 아니라 사내 개발자들이 설계한 코드를 모아 테스트 할 수 있습니다. 해당 서버는 외부 API의 연동이나 실제 고객에 대한 데이터베이스 구성 없이 작성한 코드의 기능적인 테스트만 가능합니다. 이후 실제 운영 환경이 반영된 ‘검증 서버’를 마련해 핵심 기능을 점검합니다. 로그인에 필요한 고객 정보는 실제 운영 시에 필요한 ‘운영 서버’에 담겨있기 때문에 완전히 동일하다고는 할 수 없지만, 그 외에는 대부분의 기능이 실제 운영과 동일하게 동작하도록 구성됩니다. 앞서 살펴본 차량 구매 과정과 같이 최종적으로 고객에게 제공되는 시스템이 운영 서버에서 동작합니다.
웹 서비스는 여러가지 서버 기반의 개발 체계를 거쳐 완성됩니다웹페이지가 완성되었다고 해서 능사는 아닙니다. 이를 수놓고 있는 여러 개의 코드가 ‘효율적으로’ 짜였는지 확인할 필요가 있죠. 예컨대 코드를 구성하는 것에 완벽한 정답이란 있을 수 없습니다. 개발자들 각각의 성격이나 업무 스타일에 따라 구성이 충분히 달라질 수 있기 때문입니다. 따라서 코드를 구성할 때 다른 누군가가 봐도 식별하기 쉽게 기재한다든가, 필요할 때는 코드를 재사용하는 것도 중요하죠.
이를 해소하기 위해 현대차그룹 웹 개발자들 사이에는 ‘코드 리뷰’라는 문화가 자리잡고 있습니다. 작성한 코드를 공유하면 다른 동료 개발자들이 함께 확인하고 더 나은 방향으로 나아갈 수 있도록 의견을 제시해 주고 있습니다. 강진경, 신지은 매니저는 개발 분야나 직급에 구애 받지 않고 자유롭게 의견을 남길 수 있는 문화가 잘 형성되어 있어 개발자들 사이의 신뢰를 높이고, 개개인의 역량도 향상시킬 수 있는 기회가 되고 있다고 이야기했습니다.
이번 인터뷰를 통해 강진경 매니저와 신지은 매니저는 각각 다른 분야의 개발을 담당하고 있었지만, 서로의 업무도 꿰뚫고 있는 모습을 보여주었습니다. 웹 서비스 개발자들이 개발 영역을 불문하고 얼마나 밀접하게 업무를 진행하고 있는지 확인할 수 있는 대목이죠. 완전히 다른 공간에서 서로 다른 내용의 코드를 짤 것이라는 예상이 보기 좋게 무너진 순간이었습니다.
현대차와 기아의 태국 법인 웹사이트의 커머셜 플랫폼이 쉽고 간편하게 다룰 수 있었던 것도 현대차그룹 웹 개발자들의 수많은 협력과 조율이 있었기에 가능했던 건데요. 두 개발자는 마지막으로 고객에게 한결 편리한 서비스 경험을 제공하기 위해 앞으로도 노력할 것이라는 이야기로 인터뷰를 마쳤습니다.
사진. 최진호
현대자동차그룹 뉴스 미디어, HMG 저널 바로가기
