보령청년센터 · 청년 AI 자산관리 연구소 심화반 7강 · 2026.11.11
경제 자료와 ETF 가격으로
비중 자동 계산하기
내 자산 계산기와 첫 GitHub
수업에서 남길 것
출처가 적힌 경제 자료 1개, 현금이 포함된 비중 계산값, GitHub 저장소의 변경 기록, 배포된 실행 주소를 남깁니다. 기본 57화면과 선택 설명·출처 8화면으로 구성했습니다. 로그인 문제로 배포를 끝내기 어려운 수강생도 계산 파일과 HTML을 가져갈 수 있게 진행합니다.
120분 진행표
| 시간 | 슬라이드 | 핵심 진행 | 수강생 확인 |
|---|---|---|---|
| 19:00~19:05 | 1~5 | 완성품 시연, 준비 | 강의·실습 화면 열림 |
| 19:05~19:20 | 6~13 | 출처·날짜·단위 | 원문 주소를 포함한 자료 1개 |
| 19:20~19:40 | 14~24 | 현금 포함 비중·납입금·오류 | 48% 검산, 누락 입력 보류 |
| 19:40~19:55 | 25~31 | AI 제작 요청·작은 수정 | index.html 저장 |
| 19:55~20:05 | 32 | 휴식 | 파일 저장 |
| 20:05~20:30 | 33~45 | GitHub 개념, 업로드, 수정, README | 변경 기록 두 개 비교 |
| 20:30~20:50 | 46~53 | Pages 직접 업로드·재배포 | 휴대폰에서 실제 제목 확인 |
| 20:50~21:00 | 54~57 | 완료 확인·다음 수업 | 주소와 다음 수정 1개 저장 |
58~65화면은 선택 설명과 공식 출처입니다. 각 슬라이드의 N 버튼 또는 ‘강사 노트’에서 진행 설명을 볼 수 있습니다.
수업 전 5분 점검
- 강의 사이트와
practice.html을 열고 정상 예시가 표시되는지 확인합니다. - 학생용 ZIP을 받아 해제한
index.html을 브라우저로 열어 봅니다. - GitHub·Cloudflare 로그인과 수강생 파일 저장 위치를 확인합니다.
- 수업용 AI가 파일을 만들 수 있는지 확인합니다. 2분 이상 지연되면 시작 파일로 이어갑니다.
- 공개 화면에 학생 접속 주소, 실제 계좌, 키, 개인 식별정보가 없는지 확인합니다.
예제 정답과 계산 가정
| 자산 | 평가액 | 현재 | 목표 | 이론상 조정액 |
|---|---|---|---|---|
| 국내 ETF A | 9,600,000원 | 48% | 40% | −1,600,000원 |
| 글로벌 ETF B | 6,400,000원 | 32% | 40% | +1,600,000원 |
| 단기채 ETF C | 3,000,000원 | 15% | 20% | +1,000,000원 |
| 현금 | 1,000,000원 | 5% | 0% | −1,000,000원 |
| 합계 | 20,000,000원 | 100% | 100% | 0원 |
30만 원 추가 납입 시 현금은 130만 원, 전체 금액은 2,030만 원입니다. 국내 현재 비중은 약 47.29%, 국내·글로벌 목표 금액은 각각 812만 원, 단기채 목표 금액은 406만 원입니다. 이론상 조정액에는 정수 수량·수수료·세금·호가 차이·매도 대금 사용 가능 시점을 반영하지 않았습니다.
평가일과 모든 가격일이 같아야 계산하는 교실 규칙을 적용합니다. 과거 자료를 시험할 때는 평가일을 해당 거래일로 직접 바꿉니다. 실제 서비스는 휴장일·시차·가격 공표 시각을 추가로 다뤄야 합니다. 예시의 목표 비율은 교육용 가정입니다.
자주 막히는 곳
| 상황 | 진행 방법 |
|---|---|
| 계정 가입·인증 지연 | 가상 계산을 먼저 끝내고 파일로 저장합니다. 로그인은 별도로 마칩니다. |
| AI가 긴 설명만 답함 | index.html 한 파일의 완성 코드를 요청하거나 학생용 시작 파일을 사용합니다. |
| 파일 이름이 index.html.txt | 확장자를 표시하고 실제 이름을 index.html로 바꿉니다. |
| GitHub에 ZIP만 보임 | ZIP을 풀고 index.html을 저장소 맨 위에 올립니다. |
| GitHub 제목은 바뀌었지만 웹은 옛 제목 | 직접 업로드는 수정 파일을 다시 배포해야 합니다. 같은 Pages 프로젝트를 사용합니다. |
| 자료 발표일 확인 어려움 | 임의 날짜를 넣지 말고 ‘확인 불가’로 남깁니다. |
| 노트북이 없어 모바일만 사용 | 웹 실습의 입력·검산·기록을 먼저 완료하고 파일 업로드는 강사 시연을 참고합니다. |
화면 조작
←·→ 또는 PageUp·PageDown으로 이동합니다. M은 목차, R은 전체 읽기, N은 강사 노트, F는 전체 화면입니다. 입력칸·버튼·링크를 사용 중일 때는 이동 키가 입력을 방해하지 않게 했습니다. 목차에서 제목을 검색할 수 있고, ‘자료와 도움말’에서 강의 전체를 인쇄할 수 있습니다. 모바일은 전체 읽기로 시작합니다.
배포 안내
학생용 시작 예제는 빌드가 필요 없는 단일 HTML입니다. Cloudflare Pages 직접 업로드에서 완성 파일을 올립니다. Git 연동으로 시작한다면 빌드 명령 exit 0, 출력 폴더는 index.html이 있는 실제 위치를 지정합니다. 이 강의 전체 프로젝트는 npm run build로 dist를 만듭니다. 두 프로젝트의 설정을 섞지 마세요.
Direct Upload 프로젝트를 Git 연동으로 바꾸려면 새 프로젝트가 필요합니다. 공개 배포한 페이지의 HTML·JS에는 키와 비밀번호를 넣을 수 없습니다. 정적 계산 화면과 실제 시세 수집은 별도 작업입니다.
공식 문서는 강의 마지막 화면에 모았습니다. 출처 목록 열기