증권사 앱 같은 차트, AI랑 직접 만들어 봤다｜맥미니 한 대로 만든 주식 앱 3편

📌 AI랑 같이 만든 미국주식 현황판 '월가 작전실' 개발기 3편이에요. 이번엔 증권사 앱 같은 차트와 분기 재무 점검을 어떻게 만들었고, 손가락으로 만지는 화면에서 어떤 삽질을 했는지 정리했어요. 수량·평단·금액은 ???로 가렸고, 투자 권유가 아닙니다. 결론만 보실 분은 맨 아래 최종 요약으로 가세요.

지난 2편에서는 매일 아침 텔레그램 보고와 앱 첫 화면을 다뤘어요. "숫자가 왜 안 바뀌어?"를 잡느라 시간이 제일 많이 들었죠.

📎 궁금하신 분들은 지난 「아침 8시 반, 텔레그램이 내 주식 상황을 먼저 알려 준다」 포스팅을 참고하세요 → 글 보러 가기

🔍 차트를 왜 직접 만들었나요?

증권사 앱(MTS)에도 차트는 있어요. 그런데 거기엔 제 기록이 없어요. 언제 샀고 언제 팔았는지, 그때 왜 그렇게 판단했는지를 차트 위에서 같이 보고 싶었어요. 그래서 목표를 "MTS 기본 차트 기능 + 나만의 표시"로 잡았어요. 주문은 하지 않아요.

• 📊 기본기: 캔들과 거래량, 확대·이동, 기간(1개월~전체)과 날짜 지정, 이동평균 20·60·120·200, 볼린저밴드, RSI, MACD, 십자선 값.
• ✍️ 나만의 표시: 매수 ▲(빨강)·매도 ▼(파랑), 판단 메모(날짜·이유·목표가·손절가), 평단선, 수평선·추세선 그리기와 저장.

첫 차트는 10월 4일 하루에 나왔어요. 오후 5시쯤 현황판과 종목 차트가, 6시쯤 보조지표·메모·그리기가 붙었어요. 차트 라이브러리는 TradingView가 공개한 lightweight-charts를 썼어요. 화면 구석의 TV 로고는 그 라이선스 표시예요.

차트 탭. 기간·봉 단위·이동평균 범례가 한 화면에

봉은 일·주·월을 고를 수 있고, 일봉이 3,000개를 넘으면 자동으로 주봉으로 바꿔요. 이동평균도 봉 단위를 따라가서, 주봉이면 120선이 '120주'가 돼요. 10월 9일에는 메모를 차트 봉 위에 작은 글씨로 바로 보이게 했어요.

1. 폰 한 화면에 다 넣기

10월 19일에 폰으로 차트를 보다가 이렇게 말했어요. "핸드폰으로 차트를 보면, 차트의 전체가 짤려서 나와…" 가격 칸, 거래량, 보조지표가 위아래로 쌓이다 보니 스크롤을 해야 다 보였거든요.

지금은 폰에서 차트 높이를 "화면 높이에서 위아래 막대와 범례 줄을 뺀 만큼"으로 계산해요(최소 260px). 한 화면에 가격·거래량·보조지표가 다 들어와요. 같은 날 아래 칸마다 왼쪽 위에 이름과 마지막 값("거래량 2.6M", "RSI(14) 48.2")도 붙였어요. 칸이 여러 개면 어느 게 뭔지 헷갈렸거든요.

2. "120선이랑 RSI 넣어 줘"는 사실 이미 있었다

같은 날 "120선 추가 및 RSI 추가"를 부탁했는데, 알고 보니 둘 다 이미 있었어요. 문제는 차트를 열 때마다 기본값(20·60·200, 보조지표 없음)으로 돌아가서 없는 것처럼 보였던 것이에요. 그래서 켜고 끈 상태를 기기에 기억하게 했어요. 다른 종목을 열어도, 앱을 껐다 켜도 120선과 RSI가 그대로 켜져 있어요. 뒤로가기로 돌아오면 보던 차트와 스크롤 위치도 그대로예요.

AI한테 "기능을 추가해 줘"라고 했는데 진짜 원인은 "설정을 기억 못 함"이었던 거죠. 요청을 그대로 받지 않고 원인부터 찾아 준 게 고마웠던 일이에요.

3. 대공황·닷컴·코로나를 차트 배경에 칠하기

길게 보는 투자라서, 지금 하락이 과거 큰 하락들과 비교해 어느 정도인지 궁금했어요. 그래서 차트 배경에 시장 역사 구간을 칠했어요. 계획과 출처 비교를 먼저 받고, 제가 "전부 추천대로"라고 답한 뒤 세 단계로 만들었어요.

• 🟥 약세장 띠: S&P500 종가가 고점에서 20% 넘게 떨어지면 시작, 저점에서 20% 오르면 끝. 1927년부터 21개예요. 대공황(−86.2%), 닷컴(−49.1%), 금융위기(−56.8%) 같은 큰 사건 8개엔 이름표가 붙어요.
• ⬜ 경기침체 띠: 미국 경기침체 공식 기록(NBER)의 18개 구간을 회색으로. 누르면 기간, S&P500 등락, 고점 회복일, 지금 보는 종목의 같은 기간 등락이 카드로 떠요.
• 🔀 비교 탭에도: 여러 지표를 겹쳐 볼 때 같은 띠를 켤 수 있어요(4편에서 다룰게요).

상승장은 칠하지 않았어요. 화면이 너무 알록달록해지거든요. 폰에서는 이름표를 숨기고, 5년·전체 기간을 볼 때만 자동으로 켜져요.

S&P500 전체 기간. 1920년대 쪽은 봉이 촘촘해 띠가 얇게 보여요

띠를 누르면 카드가 떠요. 금융위기는 고점까지 돌아오는 데 5년 넘게 걸렸어요

4. 손가락으로 만지는 차트의 삽질

기간 버튼이 안 먹었다

10월 8일, 폰에서 3년 이상, PC에서 10년 이상을 고르면 버튼을 눌러도 화면이 그대로였어요. 라이브러리가 봉 하나에 최소 0.5px은 쓰게 막아 둬서, 봉이 많으면 더 줄어들지 않았던 거예요. 그 최소값을 확 낮춰서 해결했어요.

미래 쪽 빈칸, 세 번 만에 잡았다

차트를 축소하면 오른쪽에 아직 오지 않은 날짜만큼 빈칸이 생겼어요. 10월 18일 "미래부분은 줌아웃 안되게"라고 했고, 범위를 막는 코드가 들어갔어요. 그런데 다음 날 폰에서 또 생겼어요. 이번엔 "옛날 화면이 캐시에 남아서"라고 보고 자동 새로고침을 넣었는데, 그것도 아니었어요. "앱을 껐다 켰는데도 여전히"라고 했더니, 결국 라이브러리에 있던 오른쪽 끝 고정 옵션을 켜서 끝났어요. 그날 저녁 제 답은 "고쳐졌어."였어요.

고쳤다는데 또 빈칸, 세 번째

터치는 자동 테스트로 확인이 안 된다

여기서 배운 게 하나 있어요. 맥미니에서 돌리는 자동 브라우저로 차트를 마우스로 끌어 보면, 화면이 움직이지 않고 십자선만 떠요. 손가락으로 끌기, 두 손가락 확대, 휙 밀기 같은 건 자동으로는 확인이 안 되는 거예요. 그래서 이런 건 AI가 "확인했다"고 쓰지 않고, 제 폰으로 직접 만져 본 뒤에야 끝난 걸로 쳐요.

5. 오늘 장중 값까지 잇기

일봉 차트는 전날 종가까지만 있어요. 장중에 지금 어떤지 보고 싶어서 '오늘(장중)' 버튼을 붙였어요. 1분봉을 30초마다 받아 그리고, 저장은 하지 않아요. 무료 데이터라 몇 분 늦을 수 있다고 화면에 적어 뒀어요.

'오늘(장중)' 화면. 점선이 전일 종가예요

종목 상세 창과 차트에는 카드와 같은 최신 값을 쓰고, '최신 값'과 '공식 일별 값'을 나눠 보여 줘요. 장이 끝나면 오늘 봉이 하나 더 그려지고, 다음 날 아침 공식 종가가 들어오면 그 값으로 바뀌어요.

6. 분기 재무 점검: 적자에서 흑자로 돌아섰나

1편에서 말했듯 종목을 고를 때 분기 이익과 적자에서 흑자로 돌아섰는지를 봐요. 이걸 매번 손으로 찾기 귀찮아서, 미국 증권거래위원회(SEC) 공시에서 최근 8개 분기를 모아 자동으로 판정하게 했어요.

• 📋 보는 숫자: 매출, 영업이익, 순이익, 영업현금흐름, 설비투자, 그리고 둘을 뺀 잉여현금흐름(FCF).
• 🔁 판정: 작년 같은 분기에 적자였다가 이번에 흑자면 '흑자 전환', 반대면 '적자 전환', 둘 다 적자면 '적자 축소/확대'.
• 📈 영업이익률 추세: 4개 분기 동안 0.3%p 넘게 오르면 ↑, 내리면 ↓.
• 🔔 알림: 새 분기 공시나 정정이 나온 날만 아침 보고에 그 종목 4분기 블록이 붙어요. 없으면 그 구역은 아예 안 나와요.

💡 4분기 숫자는 어떻게 구하나요? 미국 회사는 4분기만 따로 공시하지 않고 1년치를 내요. 그래서 "1년 합계 − 1~3분기"로 계산해요. 외국 회사처럼 분기 자료가 없는 곳은 야후 파이낸스 값으로 채우고 화면에 출처를 적어요.

재무 탭 위쪽. 최근 8분기 흑자·적자 전환이 먼저 나와요(보유하지 않은 종목)

이익 막대. 빨강이 흑자, 파랑이 적자

재무 화면에는 요약 카드, 8분기 흑자·적자 전환 목록, 막대 그래프(매출 회색, 이익 빨강, 손실 파랑)와 영업이익률 선이 있어요. 분기/연간, 1·3·5·10년을 바꿔 볼 수 있어요. 계산 규칙은 아침 보고 판정과 똑같아서 화면과 보고가 서로 다른 말을 하지 않아요.

재무 화면 삽질 세 가지

• 흑자 전환이 연달아 뜬다: 직전 분기가 아니라 작년 같은 분기와 비교해서 그래요. 헷갈려서 "직전 분기 대비 아님" 설명을 붙였어요.
• 막대가 0 아래로 내려갔다: 흑자·적자 전환 표시를 막대 위아래에 같이 달았더니, 차트가 그 자리를 비우느라 축이 뒤집혀 흑자 막대가 0 아래로 그려졌어요. 표시를 차트 밖으로 빼고 숫자 앞에 색 ▲▼만 붙였어요.
• 필요 없는 버튼은 뺐다: 차트에 붙였던 '구간 등락' 버튼이 재무 그래프에도 따라 붙어 있었어요. "재무 그래프에는 필요없는 기능이라 없애줘."

⚠️ 주의사항

⚠️ 투자 권유가 아니에요: 흑자 전환 판정은 공시 숫자를 정리한 것일 뿐, 사라 팔라는 신호가 아니에요.

⚠️ 장중 값은 늦을 수 있어요: 무료 데이터라 몇 분 늦고, 공식 종가는 다음 날 아침에 확정돼요.

마치며

차트는 하루 만에 나왔는데, 손에 맞게 만드는 데 2주가 넘게 걸렸어요. 대부분 "폰에서 만져 보니 이상하다"에서 시작했고, 그건 제가 직접 만져 봐야만 알 수 있었어요. AI가 코드를 빨리 짜 줘도, 마지막 확인은 결국 쓰는 사람 손가락이더라고요.

터치 확인, 자동으로 하려 하지 말고 직접 만지거라

다음 4편에서는 지표 겹쳐 보기와, 제 VIX 규칙을 과거 36년에 돌려 본 백테스트 결과를 정리할게요.

최종 요약

✅ 결론만 보고 싶은 분

1. 차트는 MTS 기본 기능에 내 매매 표시·메모를 얹는 걸 목표로, 첫날 하루에 만들었어요.

2. 폰 한 화면 맞추기, 켬 상태 기억, 미래 빈칸, 기간 버튼 같은 손맛 문제에 시간이 더 들었어요. 터치는 직접 만져서 확인해요.

3. 차트 배경에 약세장·경기침체 구간을 칠해서 지금 하락을 과거와 비교해요.

4. 분기 재무는 SEC 공시 8분기로 흑자·적자 전환을 자동 판정하고, 새 공시가 있는 날만 아침 보고에 붙여요.

· · ·

차트나 재무 화면 직접 만들어 보신 분 있으면 댓글로 얘기 나눠요!

#월가작전실 #주식차트 #재무분석 #ClaudeCode #맥미니