Claude Code 활용 미국 배당주 포트폴리오 계산기 1시간 완성

오늘 만들 것

만들기

프로젝트 시작과 규칙 정의하기

Step Number

1

Description

새로운 개발 작업을 시작하기 위해 전용 폴더를 생성하고, 터미널 환경에서 작동하는 AI 비서를 초기화하여 프로젝트 전반의 핵심 규칙과 가이드라인을 정의하는 과정입니다. 프로젝트 초기 설정 단계에서 명확한 목표와 기술 스택을 미리 규칙으로 정해두면 개발 생산성을 높일 수 있습니다.

Instruction

원하는 경로에 새 폴더를 만들고 터미널에서 `claude`를 실행한 후, `/init` 명령어로 프로젝트의 기본 정의 파일인 `CLAUDE.md`를 구성합니다. 이 파일은 향후 생성될 코드의 스타일과 아키텍처 규칙을 통제하는 중추적인 역할을 담당합니다.

배당 현황판 UI 화면 설계 및 생성

Step Number

2

Description

터미널 도구를 활용해 사용자가 편리하게 배당 정보를 입력하고 시각화된 차트를 볼 수 있도록 대시보드 화면을 구체적으로 설계합니다. 복잡한 웹 프레임워크 대신 직관적이고 가벼운 단일 HTML 페이지 구조로 UI 컴포넌트를 배치해 직관성을 높입니다.

Instruction

제공될 index.html 파일의 레이아웃 구성과 기본 데이터 설정을 요청합니다. 사용자가 실행 즉시 작동 방식을 파악할 수 있도록 애플(AAPL), 리얼티인컴(O), SCHD 등 대표적인 미국 배당주 샘플 데이터를 미리 포함하여 코드를 생성하도록 지시합니다.

목표 달성 시뮬레이터 에이전트 기능 탑재하기

Step Number

3

Description

단순히 현재 상태를 조회하는 기능을 넘어, 사용자가 설정한 미래의 목표 금액과 실시간 환율을 반영하여 자동으로 포트폴리오를 조정하는 계산 로직을 개발합니다. 자산 분배 비율을 안정적으로 유지하면서 목표 달성을 돕는 지능형 알고리즘을 추가합니다.

Instruction

사용자가 원하는 목표 금액을 입력하고 원화 환율을 설정하면, 종목별 추가 매수 예산을 자동 계산해 카드 UI로 띄워주는 기능을 index.html에 추가하도록 에이전트에 지시합니다. 사용자의 자산 비중이 깨지지 않도록 정교하게 매수 비율을 추천하는 계산 수식을 JavaScript로 구현해 적용합니다.

웹 브라우저를 통한 동작 검증 및 테스트

Step Number

4

Description

완성된 배당주 대시보드의 실시간 연동성과 수식 계산의 정확성을 최종적으로 검토합니다. 다양한 입력값과 시나리오를 적용하며 예상치 못한 버그나 화면 깨짐 현상이 없는지 꼼꼼하게 살피는 검증 단계입니다.

Instruction

로컬 환경에서 index.html을 구동하여 브라우저로 접속합니다. 새로운 배당 종목을 추가해보거나 목표 배당금을 변경해가면서, 차트의 막대그래프와 실시간 추가 매수 추천 수량이 오차 없이 연동되어 즉시 갱신되는지 확인합니다.