케이스 요약
본 프로젝트는 데이터 스튜디오에서 베타 버전으로 제공하는 커뮤니티 시각화를 개발해서 데이터 스튜디오에서 제공하지 않는 캘린더 형태의 뷰를 구현한 사례입니다. 맞춤형 차트를 통해서 월별 매출채권의 가독성을 향상시키고, 현황을 쉽게 파악하고 관리할 수 있게 되었습니다.
클라이언트 소개
매출액 3,000억 원이 넘는 주영엔에스(주)와 2024년부터 여러 프로젝트를 진행하고 있습니다. 주영엔에스(주)는 2003년에 설립된 건강기능식품 원료 및 제품 개발/유통 전문 기업으로 서울시 문정동에 본사가 위치하고 있습니다. 뼈엔엠비피MBP, 관절엔콘드로이친1200 등의 히트 상품을 보유하고 있으며 매년 지속적인 성장을 이어가고 있는 기업입니다.
개발 니즈 및 목표
고객사의 재무팀에서는 기존에 엑셀로 작업하던 환경을 구글 시트로 옮기면서 앱스 스크립트, 빅쿼리를 통해 다양한 업무를 효율화, 자동화하고 있습니다. 그 결과물을 데이터 스튜디오에서 표와 차트의 형식으로 조회하고 보고 합니다.
그런데 데이터 스튜디오에서 정식으로 지원하는 차트의 종류에는 한계가 있습니다. 표나 피벗테이블을 사용해서 월간 채권 내역을 조회하고, 수금된 금액과 수금예정인 금액을 구분해서 볼 수는 있지만, 캘린더 형태로 보는 기능은 제공하지 않습니다. 물론 표로 보는 것도 데이터를 이해할 수 있지만, 캘린더로 볼 수 있다면 훨씬 가독성이 좋을 것이었습니다.
이런 문제의 솔루션으로 데이터 스튜디오에는 커뮤니티 시각화 (Community Visualization) 을 추가할 수 있도록 되어 있는데 맞춤형 표 또는 차트라고 볼 수 있습니다. 마치 데이터 스튜디오의 기본 차트처럼 측정기준과 측정항목을 입력받아서 정해진 모양으로 시각화를 구현하는 기능입니다.
구글 데이터 스튜디오 커뮤니티 시각화 갤러리
고객사가 원하는 기능은 커뮤니티 시각화 갤러리에서 찾을 수가 없기 때문에 “나만의 시각화 구축” 기능을 통해서 직접 만들어서 서비스하기로 결정하였습니다.
주요 개발 목표 •
캘린더에 일자별 채권 금액 표시 (가독성 향상): 캘린더를 생성하고 일자별로 채권 금액을 현금, 어음 나누어서 표시함으로 데이터 가독성 향상
•
스코어카드로 주요 지표 표시: 캘린더의 데이터를 기반으로 주요 지표를 스코어카드로 표시
•
엑셀로 복사: 표시된 데이터를 엑셀에 붙여넣기 할 수 있도록 클립보드에 복사하는 기능
적용 솔루션
커뮤니티 시각화의 개발 방법 및 샘플은 구글 문서에 나와 있습니다.
커뮤니티 시각화는 자바스크립트 기반이며, 구글 클라우드 스토리지 (GCS)에 총 4개의 파일을 업로드해야 합니다.
개발은 Codex 를 이용해서 진행했습니다. 샘플 파일을 구글 문서에서 다운로드해서 Codex에 제공하고, 개발 가이드라인을 정해주었습니다. 또한 데이터 스튜디오에 업로드하기 전에 미리 화면을 체크할 수 있도록 html과 js로 구성된 테스트 페이지도 개발하였습니다. 빅쿼리에서 실제로 사용하는 데이터를 csv로 제공하여 로컬에서 구현한 것을 미리 확인할 수 있었습니다.
아래 캡쳐화면에서 사용한 데이터는 샘플 데이터입니다.
1.
캘린더 페이지 개발
자바스크립트 기반 캘린더 뷰: 한 눈에 매출채권을 확인할 수 있습니다.
연도와 월 선택: 연도와 월을 선택하면 해당 연도와 월에 해당하는 데이터가 스코어카드와 캘린더에 표시 됩니다. 입금예정일/입금일 기준 토글: 빅쿼리의 데이터에는 입금예정인지 입금완료인지가 구분되어 있습니다. 입금예정일 기준으로 데이터를 보고, 입금완료일 기준으로도 데이터를 조회할 수 있어서 차이를 확인할 수 있습니다. 엑셀 복사 기능: 해당 월에 표시된 모든 데이터는 엑셀에 붙여넣기 할 수 있도록 클립보드에 복사가 되는 기능을 가지고 있습니다. 엑셀 다운로드 기능은 데이터 스튜디오의 보안상 불가능해서 클립보드 복사로 구현했습니다. 2.
일별 상세 보기 개발
일자를 클릭하면 하단에 거래처별 채권 상세 내역이 표시됩니다.
일자 클릭시 하단에 상세보기 표시: 캘린더의 일자에는 어음과 현금 금액의 합계가 표시되고 있고, 일자를 클릭하면 하단에 상세 내역이 표시됩니다. 상세 내역에는 거래처별 채권의 연체 여부, 입금여부, 이월장기채권 여부가 표시됩니다. 데이터 입력 누락 표시: 데이터에서 현금과 어음 컬럼이 누락된 경우에는 일자 우상단에 삼각형 빨간색 표시를 하여서 데이터 자체에 문제가 있음을 알려주는 기능을 구현했습니다. 이월장기채권 계산: 빅쿼리의 데이터에는 입금예정일자와 입금일자, 입금여부만 들어있습니다. 해당 데이터를 캘린더에서 받아서 계산식을 통해 가공해서 이월장기채권을 산정합니다. 이 케이스에서는 지난달 이전까지 입금예정이었으나 지난달까지 입금이 되지 않은 경우 이월장기채권으로 표시합니다. 3.
스코어카드 개발
스코어카드를 통해 주요 지표를 한 눈에 확인할 수 있습니다.
캘린더 요약 스코어카드: 입금예정, 입금완료, 장기채권, 이월 장기채권, 이월 장기채권 회수 스코어카드를 개발했습니다. 각각 조건을 두어서 데이터를 합산합니다. 클릭/호버해서 상세 내역 표시: 마우스를 클릭/호버하면 해당 스코어카드의 상세 내역을 볼 수 있습니다. 엑셀 복사버튼도 추가되어 있어서 상세 내역을 분석해야 할 때 유용합니다. 결과 및 효과
핵심성과
데이터 가독성 향상: 데이터 스튜디오의 기본 표/피벗테이블을 사용할 때보다 직관적으로 이해할 수 있는 캘린더를 통해 데이터 가독성이 향상되었습니다. 의사결정권자의 빠른 이해: 스코어카드를 통해서 의사결정권자가 채권 상태는 한 눈에 이해할 수 있습니다. 실무자의 업무 효율화: 캘린더를 통해 어떤 거래처에게서 언제 수금을 진행해야 하는지 빠르게 파악할 수 있고, 엑셀 복사 기능을 통해서 검증도 할 수 있게 되어 업무 효율성이 증가하였습니다. 개발 노하우
커뮤니티 시각화 커스텀 개발: Codex를 통해 개발하면서 AGENTS.md, DESIGN.md, SCORECARD.md 와 같은 여러 가이드 문서를 제공했습니다. 추후에도 지속적으로 Codex를 통해 유지보수 할 수 있습니다. 구글시트 - 앱시트 - 빅쿼리 설계: 데이터 시각화를 구현하기 위해서는 데이터 자체를 잘 준비할 필요가 있습니다. 앱시트를 통해 일관적인 데이터를 입력받도록 통제하고, 빅쿼리에서 데이터 가공작업을 진행해서 커뮤니티 시각화에서 활용할 수 있는 데이터를 준비했습니다. 
