온라인 쇼핑(이커머스) 시장은 매년 꾸준히 성장하고 있으며, 특히 코로나 이후 온라인으로 소비 패턴이 급격하게 변화되었습니다.
소비자들은 모바일과 웹을 통해서 더 편리하게 제품을 구매하고 비교할 수 있게 되었으며, 합리적인 소비, 즉 가성비 제품을 선호하는 현상이 두드러지게 나타나고 있습니다.

 

이에 많은 기업들은 온라인 상에서 빠르게 변화하는 소비 트렌드를 파악하고 시장에 맞는 제품을 출시하거나 기존 제품의 마케팅 전략을 수정하는 등 다양한 시도들을 하고 있습니다.

이를 위해, 기업에서는 신제품 출시 기획부터 마케팅 그리고 판매에 이르기까지 않은 인력과 시간을 투자하여 시장 분석 및 소비자 트렌드 분석을 하고 있습니다. 하지만 많은 기업들은 시장 분석의 중요성에서 대해서는 인지하고 있지만 현실에서는 인력, 비용과 같은 리소스가 부족하여 전문적인 시장 분석보다는 제품 자체의 R&D(연구개발)에 많은 포커스를 맞추는 경우가 많습니다. 

다행히 최근 AI 기술의 발전으로 데이터 수집부터 분석까지 사람에 의존하지 않고 많은 부분에서 AI의 도움을 받고 있습니다. 
이러한 AI 빅데이터 분석 기술의 발전은 많은 기업들에게 온라인 기반 이커머스 시장의 소비 트렌드를 분석하는 데 많은 시너지를 가져다 주고 있으며, 이를 활용한 다양한 웹 서비스가 나타나고 있습니다. 

이러한 AI 온라인 이커머스 분석 서비스는 리소스 부족으로 어려움을 겪고 있는 기업들이 보다 쉽게 고객 데이터를 분석하여 구매 패턴을 파악하고, 예측 분석을 통해 효과적인 신제품 개발, 재고 관리 및 마케팅 전략을 수립하는 데에 큰 도움을 주고 있습니다.

이번 포스팅에서는 메시어스의 SpreadJS(JS Excel 컨트롤)와 Wijmo(JS 차트 & 그리드 UI)를 활용하여 개발되어, 많은 기업에게 도움을 주고 있는 사례 중 하나 인 "온라인커머스 AI 빅데이터 분석 솔루션"에 대해 소개하겠습니다.

SpreadJS를 통한 데이터 전처리 기능 개발

IT 전문가가 아니어도 할 수 있는 데이터 가공 및 전처리

시장 및 소비자 트렌드 분석은 다양한 데이터를 수집하고 이를 활용 가능한 데이터로 만드는 것으로부터 시작합니다.

이를 위해, "뉴스", "잡지", "트렌드 보고서" 및 "소비자 설문조사" 등과 같은 전통적인 자료부터, 최근에는 페이스북, 인스타그램, 블로그 등 온라인 데이터에 이르기까지 수 많은 데이터를 수집하고, 이를 다시 로우 데이터로 가공하는 것이 일반적인 작업일 것입니다.

<기존 데이터 수집 프로세스>

이러한 작업은 많은 인력, 시간, 그리고 비용이 드는 작업임에는 누구도 부인하지 않을 것입니다. 또한, 이런 과정에서 이미 시장은 레드 오션이 되어 버리거나 트렌드가 변하여 제품을 출시하여도 고객의 반응을 얻지 못하는 경우가 많이 발생합니다.  

온라인 커머스 AI 빅데이터 분석 솔루션은 이러한 문제를 효과적으로 해결해 줍니다.

우선 정확한 분석을 위한 데이터를 수집을 위해 해당 "온라인 커머스 AI 빅데이터 분석 솔루션"은 관세청의 해외무역 데이터와 온라인 상의 소셜 미디어, 아마존, 국내의 다양한 이커머스로부터 다양한 쇼핑 데이터를 실시간으로 웹으로부터 가공되지 않은 비정형 또는 정형의 형태로 수집하여 저장합니다.

이러한 가공되지 않은 데이터를 통해 정확하게 사용자가 원하는 데이터를 분석하기 위해서는 "데이터 정형화 과정"이 필수적입니다. 이를 위해서 해당 솔루션에서는 AI의 도움을 통해서 사용자가 필요한 데이터를 조회하고 직접 데이터를 가공할 수있는 데이터 정형화 기능을 제공하고 하고 있습니다. 

이 때 SpreadJS - JavaScript Excel UI 컨트롤을 사용하여, 현업 사용자에게 친숙한 Excel UI 화면과 기능을 제공하는 웹 Excel 에디터를 웹 상에 개발하여 쉽게 데이터를 가공할 수 있는 기능을 제공하였습니다. 

이를 통해, AI로부터 1차로 가공된 데이터를 SpreadJS 스프레트시트로 불러와 사용자가 엑셀에서 데이터를 편집하는 것과 동일한 방식으로 직접 n차 데이터를 가공하여, 이를 이후 데이터 분석에 사용할 수 있는 데이터 셋으로 만들 수 있도록 지원하고 있습니다.

<SpreadJS를 활용한 데이터 전처리 프로세스>

 * SpreadJS 컨트롤은 Excel과 유사한 UI와 함수 등 다양한 Excel의 기능을 제공하기 때문에 보다 쉽게 원하는 화면을 웹 상에 구현할 수 있습니다. (자세히 알아보기) 

Wijmo를 통한 효과적인 데이터 시각화

빅데이터를 딜레이 없이 시각화하는 고성능 차트 & 그리드

데이터 전처리 과정이 끝나면, "온라인 커머스 AI 빅데이터 분석 솔루션"에서는 AI가 자동으로 데이터 분석을 해주고, 분석 결과를 다양한 차트와 그리드를 통해 효과적으로 시각화합니다.

AI가 생성한 대시보드를 통해 새롭게 시장에 진출하고자 하는 또는 판매 중인 상품의 시장 점유율, 제품별 판매 현황, 판매 채널별 매출 현황, 요일별 주문, 연령 및 성별에 따른 선호도 등 다양한 정보들을 확인할 수 있으며, 이를 통해, 기업에서는 더욱 효율적으로 시장에 대한 이해를 할 수 있으며, 의사 결정에도 많은 도움을 받고 있습니다.

이커머스에서 실시간으로 생성되는 데이터의 양은 하루에도 상상을 초월할 만큼 많을 것입니다. 또한 사용자가 늘어나면서 온라인 상의 데이터의 수는 기하 급수적으로 증가하고 있습니다.

이러한 방대한 양의 데이터를 필요에 따라 정형화 했다고 하더라도, 대량의 데이터를 웹 시스템 상에서 사용자에게 딜레이와 같은 불편함을 주지 않고 시각화 렌더링 한다는 것은 쉽지 않은 일입니다. 특히 대시보드에서 개발하시면서 더 많은 인사이트를 사용자에게 제공해주고자 대량의 데이터를 차트 및 그리드 등 다양한 시각화 컨트롤에 바인딩하는 순간 화면이 멈추거나, 버벅이는 현상을 많이 경험해 보셨을 것입니다.

이러한 이슈로 개발자들은 보편적으로 가져오는 데이터를 최소화하는 방법을 적용하곤 합니다. 이 경우, 시각화 요소의 렌더링 속도 자체를 높일 수는 있으나, 해당 분석 솔루션과 같이 대량의 데이터를 통해서 사용자에게 정확한 분석과 다양한 인사이트를 제공해야 하는 솔루션의 경우 제품 경쟁력을 약화하는 요소가 됩니다.

이에, 해당 솔루션에서는 이러한 분석 자료를 보기 위한 사용자의 기다림과 불편함을 최소화하기 위해, Wijmo의 그리드와 차트, 입력 컨트롤을 도입하여 고성능 분석 대시보드를 개발하고 현업 단의 니즈에 맞게 커스터마이징하여 보다 더 효과적인 데이터 시각화를 제공하였습니다.

Wijmo는 자체 데이터 컬렉션(DataCollection) 그리고 가상화 렌더링 기술을 통해, 대용량 데이터도 수 밀리초 안에 처리할 수 있는 놀라운 성능을 보여줍니다.

이를 통해, 사용자가 대량의 데이터에 필터나 검색 조건을 실시간으로 바꾸더라도, 즉시 변경되어 데이터에 맞춰서 그리드와 차트와 같은 시각화 요소를 렌더링 해줄 수 있습니다.

또한, 모든 차트 및 시각화 UI 컨트롤은 사용자의 인터랙션에 빠르게 반응하며, 애니메이션 효과를 통해 더욱 더 시선을 사로잡는 대시보드를 구현할 수 있으며, 이를 통해 사용자들에게 직관적인 데이터 분석 기능을 제공합니다.

USE CASE 

아래에서는 AI 빅데이터 분석 솔루션에서 SpreadJS와 Wijmo가 어떻게 사용되었는지 보여줍니다.

AI 빅데이터 분석 솔루션에서 SpreadJS는 사용자에게 Excel의 느낌으로 쉽고 직관적으로 데이터를 조회하고 수정할 수 있는 데이터 정형화 기능을 제공합니다.

데이터 정보 탭을 클릭하면, AI가 생성했거나, 다른 사용자가 생성한 다양한 이커머스 데이터 셋을 불러오거나 직접 추가하여 활용할 수 있는 화면이 보여집니다.

데이터 유효기간, 최종 수정일, 라이선스 등의 정보를 확인할 수 있으며, SpreadJS의 내보내기 기능을 통해 원하는 형식(CSV, XLSX, JSON)으로 다운로드할 수 있습니다.

또한, 데이터를 클릭하면, 아래와 같이 Excel과 유사한 편집기 화면(UI&UX)을 확인하실 수 있습니다.

아래 화면은 웹 상에서 Excel과 유사한 화면 & 메뉴 구성(UI&UX)부터 엑셀 다양한 편집 기능까지 모두 가능한 JavaScript 라이브러리인 SpreadJS 디자이너 컴포넌트를 사용하여 구현되었습니다.

이를 통해, 최종 사용자는 마치 엑셀에서 작업하는 것과 같이 엑셀 시트에 데이터를 불러오고 필요한 형태로 데이터를 가공할 수 있어 별도의 학습 없이 편리하게 사용이 가능합니다.

​* 위의 화면은 실제 고객사 솔루션 화면을 기반으로 재구성한 화면입니다. 

📖 SpreadJS 튜토리얼 바로가기

• 스프레드시트 생성하기
• Excel 가져오기 / 내보내기
• 웹 엑셀 에디터(디자이너 컴포넌트)

위에서 SpreadJS을 통해서 가공된 데이터를 AI가 분석을 하게 되며, 분석 후에는 아래와 같이 대시보드를 그려줍니다.

이때 시스템에서 Wijmo의 고성능 차트, 그리드, 지도 등 다양한 데이터 시각화 컨트롤을 사용하여 대용량의 분석 데이터를 수밀리초 안에 웹 화면에 렌더링하여 최종 사용자에게 보여줍니다.

아래 화면에서는 국가별 수출 현황을 보여주는 Wijmo 컨트롤을 사용하여 개발된 대시보드를 확인할 수 있습니다.

국가별 수출 현황을 보여주기 위해 Wijmo의 Map(지도) 컨트롤과 Grid(그리드)를 활용하였으며, 대시보드의 하단에서는 라인 차트를 통해 상세 히스토리 데이터를 확인할 수 있습니다. 

아래의 링크를 통해 각 컨트롤의 데모를 확인하실 수 있습니다.

📖 Wijmo 튜토리얼 바로가기

• Map(지도) - PureJS(SystemJS 버전) | Angular | React | Vue
• Grid(그리드) - PureJS(SystemJS 버전) | Angular | React | Vue
• Line Chart(라인 차트) - PureJS(SystemJS 버전) | Angular | React | Vue

위와 같이 Excel의 화면(UI), 엑셀 가져오기/내보내기, 편집 기능/함수 등 대부분의 기능을 제공해주는 SpreadJS 컨트롤을 사용하여 사용자에게 엑셀 스프레드시트 기반으로 데이터를 쉽고 빠르게 편집할 수 있는 기능을 빠르게 개발할 수 있습니다. 

또한, UI 컨트롤 집합인 Wijmo를 함께 활용하면, 어떠한 대량의 데이터도 딜레이 없이 시각화를 제공하는 대시보드 기능을 개발할 수 있습니다.

이러한 메시어스의 강력한 Excel 및 UI 컨트롤은 고객의 행동을 이해하고, 이를 통해 비즈니스 전략을 수립하거나 그 밖의 의사 결정 시에도 더욱 합리적이고 빠르게 결론을 도출할 수 있는 유사한 솔루션 개발을 고민하고 있는 개발자들에게 많은 도움을  제공할 수 있습니다.

지금 바로 SpreadJS와 Wijmo를 다운로드하여 직접 테스트해보세요!