BOTFOLIO: Claude를 활용해 만든 개인 포트폴리오 시각화 도구

실용적 조언

복잡한 UI 애니메이션을 AI로 구현할 때는 물리 법칙이나 구체적인 움직임을 단계별로 나누어 프롬프트에 포함하라.
자산 비중 시각화에는 트리맵과 버블 차트를 조합하여 데이터의 가독성을 높여라.

섹션별 상세

작성자는 Claude를 활용하여 주식, 암호화폐, 현금을 관리할 수 있는 시각화 도구인 BOTFOLIO를 개발했다. 사용자가 보유한 자산 데이터를 입력하면 테이블, 트리맵, 버블 차트 형태로 변환하여 자산 간 비중을 직관적으로 비교할 수 있게 지원한다. 웹 기술과 LLM의 협업을 통해 복잡한 데이터 구조를 시각적 요소로 빠르게 매핑하는 워크플로우를 구축했다.

버블 차트 구현 과정에서 '자연스러운 거품의 움직임'을 Claude에게 이해시키는 데 가장 많은 노력을 기울였다. 물리적인 상호작용이나 미세한 애니메이션 효과는 텍스트만으로 정의하기 어려워 여러 차례의 피드백과 수정 과정을 거쳐 완성했다. AI 코딩 시 시각적 디테일을 제어하기 위해 프롬프트를 고도화하는 과정이 필수적임을 확인했다.

현재 구현된 기능 외에도 퍼즐 차트와 리퀴드 차트 등 독특한 시각화 옵션을 추가할 예정이다. 사용자가 자신의 포트폴리오를 단순히 숫자로 보는 것을 넘어 다양한 그래픽 인터페이스로 탐색할 수 있도록 기능을 확장하고 있다. Vercel을 통해 배포된 결과물은 AI를 활용한 1인 개발 프로젝트의 실질적인 구현 성과를 증명한다.

용어 해설

트리맵(Treemap): — 계층적 데이터를 중첩된 사각형으로 표현하는 시각화 기법이다. 각 사각형의 면적은 데이터의 크기에 비례하며, 전체 대비 부분의 비중을 한눈에 파악하기 용이하다. 자산 포트폴리오의 구성 비율을 직관적으로 보여주는 데 효과적이다.
버블 차트(Bubble Chart): — 데이터 값을 원의 크기로 나타내는 그래프 형식이다. 3차원 데이터를 평면에 표현할 때 유용하며, 자산 포트폴리오의 상대적 규모를 시각적으로 강조하는 데 사용된다. 원들의 배치를 통해 데이터 간의 관계를 역동적으로 보여줄 수 있다.
프롬프트 엔지니어링(Prompt Engineering): — AI 모델로부터 원하는 결과를 얻기 위해 입력값(프롬프트)을 최적화하는 기술이다. 이 프로젝트에서는 '자연스러운 움직임'과 같은 추상적 요구사항을 코드로 변환하기 위해 AI와 상호작용하는 과정에서 핵심적인 역할을 했다.

언급된 도구

Claude추천

코딩 보조 및 시각화 로직 구현

언급된 리소스

DemoBOTFOLIO Demo