[올인원 배당 파이어족 은퇴 시뮬레이터 메이킹 로그 #06] J커브의 쾌감, Recharts(또는 Chart.js)로 자산 성장 그래프 그리기

 

안녕하세요! 방구석에서 노트북 하나로 자본주의 생존 무기를 만들어가고 있는 1인 개발자입니다.

지난 5편에서는 물가상승률과 절세계좌(ISA)라는 현실적인 변수들을 스위치 하나로 통제하는 짜릿한 로직을 완성했었죠. 내부적으로는 수십 년 치의 완벽한 복리 데이터가 성공적으로 쌓이고 있었습니다. 하지만 숫자는 그저 숫자일 뿐입니다. 화면에 "은퇴까지 15년 남았습니다"라고 글씨만 띡 띄워주면 사람들의 가슴이 뛸까요? 절대 아닙니다.

 

파이어족을 꿈꾸는 사람들을 진짜 미치게 만드는 건, 시간이 지날수록 내 자산이 눈덩이처럼 불어나 결국 하늘로 솟구치는 거대한 '곡선'을 두 눈으로 직접 확인하는 순간입니다. 그래서 오늘 6편에서는 딱딱한 데이터 뭉치를 아름다운 곡선으로 탈바꿈시켜 준 데이터 시각화의 꽃, '차트 그리기'에 대한 썰을 풀어보겠습니다.

 

어떤 차트 라이브러리를 쓸까? 나의 선택은 'Recharts'

웹개발 생태계에는 정말 훌륭하고 다양한 무료 차트 라이브러리들이 있습니다. 가장 대중적인 Chart.js부터 시작해서, ApexCharts, D3.js 등 골라 먹는 재미가 있죠. 저는 이 수많은 도구 중에서 리액트(React)와 가장 찰떡궁합을 자랑하는 'Recharts(리차트)'라는 라이브러리를 선택했습니다.

 

이유는 아주 심플합니다. Recharts는 이름부터 '리액트를 위한 차트'인 데다가, 코드를 짜는 방식이 리액트 컴포넌트와 똑같이 생겼거든요. 복잡하게 자바스크립트로 캔버스를 그리고 그림을 그릴 필요 없이, 마치 레고 블록을 조립하듯이 <LineChart>, <XAxis>, <YAxis> 같은 태그들을 차곡차곡 쌓아 올리기만 하면 알아서 예쁜 차트가 뚝딱 완성됩니다. 1인 개발자의 생명은 스피드인데, 이보다 더 직관적이고 편한 도구는 없었죠.

 

데이터 들이붓기와 딜레마: 코끼리와 개미를 한 방에 넣으려면?

차트의 뼈대를 레고 블록처럼 조립하고 난 뒤, 4편에서 while 반복문을 돌리며 사진을 찍듯 차곡차곡 모아두었던 '수십 년 치 데이터 상자(배열)'를 차트 컴포넌트에 통째로 부어주었습니다.

가로축(X축)은 시간이 흘러가는 '연도'로 설정했죠. 자, 이제 세로축(Y축)에 두 가지 데이터를 선으로 그려야 합니다. 하나는 '총자산'이고, 다른 하나는 매월 받는 '월 배당금'입니다.

 

그런데 여기서 엄청난 딜레마가 발생합니다. 총자산은 1억, 5억, 10억 단위로 쑥쑥 커지는 '코끼리' 같은 숫자인데, 월 배당금은 50만 원, 100만 원, 300만 원 단위로 움직이는 '개미' 같은 숫자라는 겁니다. 이 두 숫자를 똑같은 왼쪽 세로축(Y축) 기준에 맞춰서 그려버리면 어떻게 될까요? 총자산 그래프는 화면 꼭대기까지 멋지게 올라가지만, 월 배당금 그래프는 단위를 쫓아가지 못하고 바닥에 딱 붙어서 일직선으로 기어 다니게 됩니다. 정말 볼품없는 그림이 되어버리는 거죠.

 

 

 

마법의 해결책: 양쪽으로 눈금을 나누는 '이중 축(Dual Axis)'

 

코끼리와 개미를 한 화면에서 모두 역동적으로 보여주기 위해, 저는 '이중 축(Dual Axis)'이라는 마법을 꺼내 들었습니다.

아주 간단합니다. 화면 왼쪽 세로줄에는 '총자산' 전용 눈금을 큼직큼직하게(1억, 2억...) 그려줍니다. 그리고 화면 오른쪽 세로줄에는 '월 배당금' 전용 눈금을 작고 귀엽게(50만 원, 100만 원...) 따로 그려주는 겁니다.

 

그리고 파란색 총자산 선은 왼쪽 눈금의 눈치를 보며 올라가게 만들고, 초록색 월 배당금 선은 오른쪽 눈금의 눈치를 보며 올라가게 설정했습니다. 결과는 대성공이었습니다! 바닥을 기어 다니던 초록색 배당금 선이 우측 눈금을 타고 함께 솟구쳐 오르면서, 파란색 자산 선과 나란히 하늘을 향해 날아가는 환상적인 '쌍끌이 J커브 곡선'이 화면에 펼쳐졌습니다. 이 두 선이 교차하며 올라가는 모습을 처음 본 순간, 속이 다 뻥 뚫리는 기분이었죠.

 

감성을 더하는 디테일: 마우스를 올렸을 때 나타나는 '커스텀 툴팁'

 

차트가 아무리 예뻐도 사용자가 정확한 숫자를 확인할 수 없다면 무용지물입니다. 보통 차트 위에 마우스를 올리면 툴팁(말풍선)이 뜨면서 숫자를 보여주는데, 기본 설정 그대로 두면 숫자가 너무 흉측하게 나옵니다. "2035년: 350000000" 이렇게 쉼표 하나 없이 날것의 데이터가 떠버리거든요. 저는 제 사이트에 들어온 분들이 이런 불친절함을 겪게 하고 싶지 않았습니다. 그래서 Recharts가 제공하는 '커스텀 툴팁(Custom Tooltip)' 기능을 활용해서 말풍선의 디자인을 완전히 제 입맛대로 개조했습니다.

 

코드를 약간 만져서, 마우스가 그래프의 특정 연도에 닿을 때마다 하얀색의 예쁜 네모 박스가 부드럽게 나타나도록 했습니다. 그리고 그 박스 안에는 쉼표도 없고 단위도 없던 딱딱한 숫자들을 가공해서 넣었죠. "2035년 달성 예상"이라는 예쁜 제목 아래, 파란색 글씨로는 "총 자산: 3억 5,000만 원", 초록색 글씨로는 "월 배당금: 150만 원"이라고 마치 친절한 은행원이 설명해 주듯 깔끔하게 포맷을 바꿔서 띄워주었습니다.

 

이 작은 툴팁 하나가 사용자의 체류 시간을 엄청나게 늘려줍니다. 사람들은 마우스를 이리저리 굴려보면서 "아, 5년 뒤에는 배당금이 이만큼 나오네?", "10년 뒤에는 자산이 이렇게 튀어 오르는구나!" 하며 시간 가는 줄 모르고 시뮬레이터에 빠져들게 되니까요.

 

 

눈에 보이는 것이 마음을 움직입니다.

수많은 변수들을 통제하고 로직을 짜는 과정도 재미있었지만, 역시 프론트엔드 개발의 진정한 쾌감은 내 머릿속에 있던 데이터들이 시각적으로 아름답게 빵! 하고 터져 나올 때인 것 같습니다. 엑셀 표 안에서 숨 막히게 갇혀있던 숫자들을 해방시켜서, 우상향 하는 초록색 생명력의 그래프로 만들어 띄워놓으니 이제야 비로소 제대로 된 '작품'이 완성되었다는 실감이 났습니다.

 

자, 이제 기획부터 디자인, 핵심 로직, 그리고 이렇게 예쁜 차트 시각화까지 모든 코딩 작업이 마무리되었습니다! 내 노트북 안에서는 이렇게 완벽하게 돌아가는데, 이걸 전 세계 사람들이 접속해서 쓸 수 있게 하려면 어떻게 해야 할까요? 다음 7편에서는 드디어 제 노트북 밖으로 코드를 날려 보내는 [올인원 배당 파이어족 은퇴 시뮬레이터 메이킹 로그 #07]내 노트북 속 코드를 전 세계로: Netlify 무료 배포 및 Github 연동으로 찾아오겠습니다. 드디어 세상에 서비스가 런칭되는 감격스러운 순간을 함께 지켜봐 주세요!

[올인원 배당 파이어족 은퇴 시뮬레이터 메이킹 로그 #07] 내 노트북 속 코드를 전 세계로: Netlify