9년 전에 만들었던 React Native 차트 라이브러리를 9년 만에 2.0.0으로 업데이트해서 npm에 올렸습니다. 이번 업데이트 작업의 대부분은 AI 에이전트가 수행했고, 그 과정을 공유합니다.

먼저 라이브러리 소개입니다. react-native-pure-chart는 이름 그대로 "pure"가 정체성입니다. react-native-svg도, ART도, 요즘 표준이 된 Skia도 쓰지 않고 RN의 순수 View/Text 컴포넌트만으로 라인/바/파이 차트를 그립니다. 렌더링 원리는 이렇습니다. 두 데이터 포인트 사이의 거리와 각도를 삼각함수로 계산해서, 가늘고 긴 View를 rotate transform으로 회전시켜 선분처럼 보이게 하고, 이런 조각들을 이어붙여 차트 전체를 구성합니다. 네이티브 드로잉 라이브러리를 link하거나 pod install 과정에서 빌드가 깨질 걱정 없이 npm install 한 줄로 사용할 수 있는 것, 즉 의존성 제로가 핵심 가치입니다. 피크 시절 npm 주간 2,000 다운로드, 약 820개 프로젝트에서 사용됐고 star는 289개였습니다. 이후 9년간 방치됐고, 최신 RN에서 동작하는지도 알 수 없는 상태였습니다.

마침 곧 한도가 초기화되는 AI 계정이 하나 남아 있어서, 점심시간에 프롬프트 하나를 남겨두었습니다.

"git clone 해뒀는데 최신 expo/RN 환경에서 잘 돌아가게 해. 하네스 문서 참고"

여기서 "하네스"는 미리 세팅해둔 자가검증 환경입니다. Maestro 같은 모바일 e2e 도구로 iOS 시뮬레이터와 안드로이드 에뮬레이터를 직접 조작하고, 스크린샷을 찍어 렌더링 결과를 확인할 수 있게 해둔 구성입니다. 이번 작업의 핵심이 여기에 있습니다.

9년 전 RN 코드베이스를 최신 expo/RN에서 동작시키려면 손댈 곳이 많습니다. 당시의 컴포넌트 작성 방식과 API가 그대로 남아 있어서 단순 버전업이 아니라 사실상 현대화 리팩토링이 필요한 상태였습니다. 이런 작업은 각각의 난이도는 높지 않지만 양이 많고, 하나 고칠 때마다 실제 화면에서 깨지는 부분이 없는지 확인해야 해서 사람이 직접 하면 상당한 시간이 드는 종류입니다.

제가 다른 일을 하는 동안 에이전트는 몇 시간 동안 혼자 루프를 돌았습니다. 코드를 수정하고, 시뮬레이터와 에뮬레이터에서 앱을 구동하고, e2e로 화면을 조작한 뒤 스크린샷을 찍고, 그 스크린샷을 보고 렌더링 문제를 판정한 다음 다시 코드를 수정하는 반복입니다. 이 검증이 컴파일 에러나 테스트 통과 수준이 아니라는 점이 중요합니다. 차트 라이브러리는 빌드가 성공해도 선이 어긋나 있거나 축이 밀려 있으면 실패입니다. 정답이 "화면에 보이는 것"인 프로젝트라서, 스크린샷을 판정 기준으로 삼는 시각적 회귀 루프가 유닛 테스트로는 확인할 수 없는 부분을 채워줬습니다.

이번 버전에서 가장 큰 변화는 곡선(스무스 라인) 차트 지원입니다. 사실 9년 전에는 곡선 차트를 지원하지 못했습니다. 직선은 View 하나를 회전시키면 되지만, 곡선은 구간을 잘게 쪼개 각 조각의 좌표와 각도를 계산해 짧은 선분들로 근사해야 하는데, 조각과 조각 사이가 미세하게 끊기거나 각져 보이는 문제를 당시에는 해결하지 못해서 기능 자체를 넣지 않았습니다. 이번에 에이전트는 전체 스크린샷 확인에서 그치지 않고, 곡선이 끊긴 것으로 의심되는 구간을 확대 캡처해서 점검했습니다. 그리고 조각의 좌표와 각도 계산에 쓰이는 변수값을 조정하고, 다시 렌더링하고, 다시 확대해서 확인하는 사이클을 반복했습니다. 파라미터를 바꾸고 결과를 눈으로 확인하는 튜닝 루프를 사람이 직접 반복하면 어느 시점에 타협하게 되는데, 에이전트는 수렴할 때까지 계속 반복했고 결과적으로 매끄러운 곡선 차트가 새 기능으로 추가됐습니다. 9년 전에 구현하지 못했던 기능이 이번에 들어간 셈입니다.

결과적으로 최신 expo/RN 환경 호환, 곡선 차트 신규 지원, README 차트 스크린샷 갱신, npm 2.0.0 빌드와 배포까지 완료됐습니다. 9년 만의 업데이트입니다.

이번 작업에서 느낀 점입니다. 에이전트 코딩의 병목은 모델 성능보다 검증 환경에 있다고 생각하게 됐습니다. 결과를 스스로 확인할 수 있는 하네스가 갖춰지면 사람의 리뷰 없이도 시각적 품질까지 수렴합니다. 특히 UI 라이브러리처럼 정답이 화면에 있는 프로젝트에서 e2e 조작과 스크린샷 판정의 조합이 효과적이었습니다. 레거시 현대화처럼 난이도는 낮지만 반복 확인 비용이 큰 작업은 에이전트에게 맡기기 좋은 카테고리가 된 것 같습니다.

GitHub: https://github.com/oksktank/react-native-pure-chart

npm: https://www.npmjs.com/package/react-native-pure-chart