Claude Code 활용 주식 포트폴리오 자산 배분기 만들기

2026-06-07

해외 직구 상품명을 최적화하는 도구를 구축해본 경험이 있다면, 이번에는 자산을 효율적으로 관리하기 위한 실용적인 도구를 개발해보는 것도 좋습니다. 이번에 소개할 프로젝트는 인공지능 도구를 활용하여 구축하는 주식 포트폴리오 자산 배분기 웹앱입니다. 사용자가 자산별 목표 비중을 설정하고 현재 보유 금액을 입력하면, 실시간으로 각 자산의 실제 비중과 목표 비중 사이의 격차를 계산하여 최적의 리밸런싱 수량을 제안하는 도구입니다. 복잡한 개발 프로세스 없이 터미널 기반의 리밸런싱 에이전트 시스템을 사용하여 빠르게 화면과 로직을 완성할 수 있습니다. 최근 주목받는 AI 코딩 기법을 활용하면 개발 지식이 깊지 않아도 아이디어를 구체적인 소프트웨어로 빠르게 구현할 수 있습니다.

이 프로젝트는 별도의 서버 구축 없이 웹 브라우저에서 단일 HTML 파일로 실행할 수 있도록 설계되었습니다. 개발 환경에 설치된 Claude Code 도구를 활용하여 단계별로 기능을 추가하고 화면을 정교화하는 방식으로 진행됩니다. Vibe Coding 방식을 통해 사용자는 선언적인 프롬프트 입력만으로 복잡한 레이아웃과 자바스크립트 계산 공식, 그리고 차트 시각화까지 구현할 수 있습니다. 사용자가 의도와 원하는 화면을 텍스트로 자연스럽게 묘사하는 Vibe Coding 접근은 개발 생산성을 향상시키는 데 기여합니다. 번거로운 개발 환경 셋업이나 수많은 문서 검색 과정 없이 AI 코딩 어시스턴트와의 대화만으로 기능을 구현해 나갑니다.

첫 번째 단계: 자산 입력 화면 설계 및 기본 뼈대 생성

화면 구성의 시작은 사용자가 자산 정보를 편리하게 입력할 수 있는 테이블 구조를 만드는 것입니다. 다음과 같은 프롬프트를 작성하여 터미널 환경에서 실행해봅니다. 첫 단계인 화면 설계 단계에서는 터미널에 Claude Code 명령어를 입력하여 HTML 파일을 생성해 달라고 지시합니다.
이 프롬프트에 대응하여 도구는 사용자가 자산을 동적으로 추가하고 삭제할 수 있는 입력 폼을 생성합니다. 다크 네이비와 차콜 톤의 세련된 배경에 그리드 형태의 자산 추가 테이블이 배치되며, 각 입력 필드는 숫자와 텍스트를 직관적으로 받아들일 수 있는 레이아웃을 갖춥니다. 디자인 레이아웃을 다듬는 과정에서도 AI 코딩 기술은 사용자 경험에 기반한 맞춤형 코드를 신속하게 제안합니다.

두 번째 단계: 실시간 리밸런싱 계산 공식 적용

입력 화면이 준비되면 자산 데이터를 바탕으로 매수 및 매도 필요 금액을 도출하는 핵심 로직을 추가해야 합니다. 실시간 괴리율 계산을 위해 다음과 같은 프롬프트로 기능을 확장합니다. 두 번째 단계에서도 터미널 창을 벗어나지 않고 Claude Code 에디터 기능을 통해 코드를 점진적으로 개선해 나갑니다.
이 계산 공식이 적용되면 사용자가 금액이나 비중을 수정할 때마다 전체 자산 대비 비율이 계산됩니다. 목표 비율에 미달하는 자산에는 추가 매수 금액이 표시되고, 초과한 자산에는 매도 금액이 붉은색 또는 푸른색의 대비되는 톤으로 시각화되어 화면 하단의 요약 카드에 반영됩니다. 각 자산의 비중이 목표치와 어긋날 때 자동으로 매수·매도 수량을 알려주는 리밸런싱 에이전트 기능은 수동 계산의 번거로움을 덜어주는 데 도움을 줍니다. 이처럼 주식 포트폴리오 내의 자산 비중을 조정하는 과정은 직관적인 인터페이스를 통해 한결 간결해집니다.

세 번째 단계: 시각 대시보드를 위한 도넛 차트 구현

수치 데이터로 표현된 자산 비중은 시각적 도구를 결합할 때 더 명확하게 파악할 수 있습니다. Chart.js 라이브러리를 활용하여 두 가지 비중을 한눈에 대조할 수 있도록 요청합니다. 세 번째 단계에서 차트를 추가할 때도 Claude Code 개발 도구는 외부 라이브러리인 Chart.js 코드를 깔끔하게 붙여넣어 줍니다.
이 요청을 통해 자바스크립트 영역에 도넛형 그래프를 그리는 코드가 삽입됩니다. 웹 브라우저를 새로고침하면 현재 자산 분포의 안쪽 도넛과 목표 비중을 나타내는 바깥쪽 도넛이 겹쳐져 표현되며, 마우스 오버 시 구체적인 비율 수치가 툴팁으로 표시되는 동적 그래프가 렌더링됩니다. 복잡한 알고리즘을 한 줄 한 줄 직접 짜는 대신, 큰 흐름을 지시하며 맞춰 나가는 Vibe Coding 스타일은 초보 개발자도 유용하게 활용할 수 있습니다. 전체 자산을 적절히 나누어 담는 자산 배분 전략은 시장 변동성에 대응하기 위해 필수적입니다.

네 번째 단계: 모바일 뷰포트 최적화 및 레이아웃 다듬기

마지막으로 다양한 기기에서 포트폴리오를 조회하고 편집할 수 있도록 반응형 레이아웃 작업을 진행합니다. 스마트폰 화면에서도 조작이 용이하도록 여백과 크기를 조정합니다. 스마트폰에서 주식 포트폴리오 현황을 수시로 모니터링하며 실제 매매와 병행할 수 있도록 레이아웃 디자인을 보강합니다.
이 단계를 거치면 모바일 브라우저의 좁은 화면에서도 표가 찌그러지지 않고 세로형 카드로 자연스럽게 전환됩니다. 터치 오류를 방지하기 위해 입력 칸의 높이가 확장되며 가독성이 개선되는 장점이 있습니다. 어려운 개발 방법론 대신 편안한 대화를 기반으로 결과물을 이끌어내는 Vibe Coding 트렌드는 점점 더 확산되는 추세입니다. 이와 같은 AI 코딩 방식은 단순 반복 작업을 줄이고 기획과 아이디어 실현에 집중하도록 돕습니다.

구현 과정에서 주의할 점

사용 중에 도넛 차트 영역이 빈칸으로 나타난다면 라이브러리를 정상적으로 불러오지 못한 상태일 수 있습니다. Chart.js는 네트워크를 통해 외부 라이브러리를 동적으로 로드하므로 인터넷 연결이 원활한지 확인해야 합니다. 만약 금액이나 비중을 소수점으로 입력했을 때 연산이 올바르게 수행되지 않는다면 코드 내에서 정수 변환 함수가 사용되었기 때문일 수 있으므로 이를 실수 변환 형식으로 변경하도록 요청하면 해결됩니다. 또한 화면의 크기가 바뀔 때 특정 영역의 스크롤이 자연스럽지 않다면 스타일 시트의 스크롤 제어 속성이 뷰포트에 맞지 않게 설정되어 있는 것이니 관련 속성을 화면 크기에 맞춰 유연하게 조정하는 것이 바람직합니다. 개인별 맞춤형 자산 배분 비율을 한눈에 관리함으로써 시장 환경 변화에 기민하게 반응할 수 있습니다.

이러한 단계를 거쳐 완성된 자산 배분 도구는 다양한 자산 관리 상황에 적용할 수 있습니다. 다음 단계에서는 이 도구에 금융 데이터 API를 결합하여 매번 수작업으로 입력할 필요 없이 현재 가격을 자동으로 갱신하고 구체적인 거래 수량까지 산출해내는 자동화된 리밸런싱 에이전트 시스템으로 확장해볼 예정입니다. 스마트한 자산 관리를 돕는 이 리밸런싱 에이전트 솔루션은 일정한 주기로 비중을 조절하는 데 큰 도움이 됩니다.