react-native-pure-chart 2.0.0 — AI 에이전트로 부활한 React Native 차트 라이브러리

9년 전에 만들어진 React Native 차트 라이브러리가 AI 에이전트와 자가 검증 환경을 만나 2.0.0으로 돌아왔습니다. 단순히 의존성을 올린 수준이 아니라 최신 Expo와 React Native 호환, 곡선 차트 추가, 문서와 배포까지 한 흐름으로 끝낸 사례입니다.

핵심 요약: 9년 전에 만들었던 React Native 차트 라이브러리를 9년 만에 2.0.0으로 업데이트해서 npm에 올렸습니다. 이번 업데이트 작업의 대부분은 AI 에이전트가 수행했고, 그 과정을 공유합니다. 먼저 라이브러리 소개입니다. react-native-pure-chart는 이름 그대로…

의존성 없이 차트를 그리는 방식

react-native-pure-chart의 정체성은 이름 그대로 순수 React Native 컴포넌트만 사용한다는 점입니다. SVG, ART, Skia 같은 별도 그래픽 계층 없이 View와 Text로 라인, 막대, 원형 차트를 구성합니다.

라인 차트는 두 데이터 지점 사이의 거리와 각도를 계산한 다음, 가늘고 긴 View를 회전해 선분처럼 보이게 합니다. 여러 선분을 이어 붙이면 하나의 그래프가 됩니다. 네이티브 라이브러리를 연결하거나 CocoaPods 빌드 오류를 다룰 필요가 적어 설치와 유지가 단순하다는 장점이 있습니다.

npm install react-native-pure-chart

다만 의존성 제로가 곧 무료 성능을 뜻하는 것은 아닙니다. 데이터 지점이 많거나 애니메이션이 복잡한 경우에는 많은 View가 생성될 수 있으므로 실제 기기에서 렌더링 비용을 확인해야 합니다. 가벼운 대시보드와 앱 내부 통계 화면처럼 단순한 차트에 특히 잘 맞습니다.

이번 부활의 핵심은 모델보다 검증 환경

레거시 코드 현대화는 한 번의 큰 설계보다 작은 수정과 확인이 계속 반복되는 작업입니다. 최신 API로 바꾸고, 앱을 실행하고, 화면이 깨지지 않았는지 확인한 뒤 다시 고쳐야 합니다. 이번 사례에서는 모바일 E2E 도구가 시뮬레이터와 에뮬레이터를 조작하고 스크린샷을 남기는 하네스가 이 반복을 자동화했습니다.

1. 에이전트가 코드를 수정한다.
2. iOS와 Android에서 예제 앱을 실행한다.
3. 정해진 화면으로 이동해 스크린샷을 촬영한다.
4. 차트 축, 선, 레이블의 어긋남을 판정한다.
5. 문제가 있으면 다시 수정하고 같은 절차를 반복한다.

중요한 점은 컴파일 성공이나 단위 테스트 통과만으로 끝내지 않았다는 것입니다. 차트는 빌드가 성공해도 선이 끊기거나 레이블이 밀리면 실패입니다. 정답이 화면에 있는 프로젝트라면 시각적 회귀 검사가 사실상 핵심 테스트가 됩니다.

9년 전에 못 넣은 곡선 차트까지 추가

직선은 View 하나를 회전하면 되지만 곡선은 여러 개의 짧은 선분으로 근사해야 합니다. 조각이 너무 크면 각져 보이고, 좌표와 각도가 조금만 어긋나도 사이가 끊깁니다. 이번 업데이트에서는 의심 구간을 확대해 확인하고 파라미터를 조정하는 반복 루프를 통해 매끄러운 곡선 표현을 추가했습니다.

이 작업은 AI 에이전트에 잘 맞습니다. 한 번의 천재적인 해답보다 작은 값을 바꾸고 결과를 관찰하는 반복이 중요하기 때문입니다. 사람이 지치기 쉬운 튜닝 작업을 하네스가 일정한 기준으로 계속 수행합니다.

레거시 프로젝트에 적용하는 실전 체크리스트

• 작업 지침을 파일로 고정: 지원 버전, 금지 사항, 완료 조건을 저장소 안 문서로 남깁니다.
• 최소 예제 앱 준비: 라이브러리의 모든 주요 상태를 빠르게 재현할 수 있어야 합니다.
• 양쪽 플랫폼 검증: iOS만 통과하고 Android에서 깨지는 상황을 막습니다.
• 스크린샷 기준점 마련: 축, 범례, 색상, 여백, 곡선 연결부처럼 사람이 보는 결과를 비교합니다.
• 배포 전 실제 설치 확인: 새 프로젝트에서 npm 설치부터 예제 렌더링까지 재검증합니다.

특히 AI에게 모호하게 현대화를 부탁하는 것보다, 실행 가능한 검증 명령과 실패 판정 기준을 먼저 제공하는 편이 결과 품질을 크게 높입니다. 에이전트가 스스로 확인할 수 없는 작업은 결국 사람의 긴 리뷰 대기열로 돌아옵니다.

어떤 프로젝트가 좋은 후보인가

오랫동안 방치됐지만 사용자가 남아 있고, 변경 범위가 반복 작업 중심이며, 결과를 자동으로 확인할 수 있는 프로젝트가 좋은 후보입니다. 반대로 보안 경계가 크거나 테스트할 수 없는 비즈니스 규칙, 플랫폼별 비공개 API에 크게 의존하는 프로젝트는 자동화 범위를 좁혀야 합니다.

이번 사례가 보여주는 메시지는 AI가 낡은 코드를 마법처럼 고친다는 것이 아닙니다. 사람은 명확한 완료 조건과 하네스를 설계하고, 에이전트는 수정과 실행, 관찰의 루프를 오래 반복합니다. 레거시 현대화의 병목은 모델 성능보다 결과를 스스로 검증할 수 있는 환경에 가깝습니다.

정리

react-native-pure-chart 2.0.0은 순수 View 기반이라는 단순한 설계를 유지하면서 최신 React Native 환경으로 돌아왔습니다. 더 인상적인 부분은 몇 시간 동안 자율적으로 수정과 시각 검증을 반복해 9년 전 미완성이던 곡선 차트까지 완성한 과정입니다. 오래된 UI 라이브러리를 되살리려면 먼저 에이전트가 결과를 볼 수 있는 하네스부터 만드는 것이 가장 실용적인 출발점입니다.

---

📰 원본 출처 · https://news.hada.io/topic?id=31902 (#N=31902)

이 글은 GeekNews(긱뉴스)에 게제된 글을 기반으로 작성되었습니다. 원본의 라이선스와 저작권은 원작자에게 있습니다.