본문으로 이동
DLDevelopment Lab책을 읽고, 직접 만드는 실험실
9국내 증시와 궁금한 종목을 한눈에 봅니다10이 회사는 최근 무엇을 공시했을까?11주가부터 공시까지, AI가 한 번에 브리핑합니다12더 빠르고 비용은 적게 드는 서비스로 개선합니다
PART 3 · 내가 고른 국내 주식, AI가 브리핑합니다9장

국내 증시와 궁금한 종목을 한눈에 봅니다

공식 시세로 시장과 종목·차트 화면을 만듭니다.

이어갈 프로젝트 · ai-stock-briefing

별도 주식 프로젝트를 시작하며 아파트 결과물은 그대로 둡니다.

커맨드준비막혔을 때완료 확인소스·검증
이번 장의 준비와 서비스

필요한 도구 · Node.js · TypeScript · Next.js

이미 준비한 계정과 기능은 그대로 이어갑니다.

data-go-kr 준비 안내 →github 준비 안내 →

실시간 가격으로 오해시키거나 없는 지수·거래를 0으로 채우지 않습니다.

순서대로 입력하는 커맨드

현재 단계와 입력 위치를 확인한 뒤 하나씩 복사하세요.

01시작 전 확인

Claude Code·Codex에 입력튜터 요청

9장을 처음 시작하거나 현재 장의 시작 조건을 확인해 달라고 요청할 때

먼저 확인 · 별도 주식 프로젝트를 시작하며 아파트 결과물은 그대로 둡니다. 이미 확인된 장·프로젝트는 다시 묻지 않고 현재 기록과 실제 상태를 대조합니다.

9장 시작해.

02새 프로젝트를 시작합니다

Claude Code·Codex에 입력실습

별도의 주식서비스 프로젝트와 기본 개발 환경을 시작할 때

먼저 확인 · 독자가 ai-stock-briefing 폴더를 만들고 Code 탭 로컬 작업 폴더로 선택했는지 확인합니다. apartment-explorer는 그대로 보존합니다.

지금 연 `ai-stock-briefing`은 앞으로 계속 발전시킬 새 프로젝트야.

국내 주식시장 데이터를 보여주는 웹서비스를 만들 거야.

이 프로젝트는 TypeScript와 Next.js를 사용해줘.

앞에서 정한 공통 작업 원칙을 참고해서 새 프로젝트에 필요한 준비와 TypeScript 기반 Next.js 기본 프로젝트 구조까지 만들어줘.

로그인이나 승인처럼 내가 직접 해야 하는 일이 나오면 그 지점에서 기다리고 무엇을 해야 하는지 안내해줘.

아직 주식 기능이나 데이터 연결은 만들지 마.

03인증키는 이미 아는 방식으로 준비합니다

Claude Code·Codex에 입력실습

세 금융위원회 API를 각각 신청한 뒤 안전한 키 입력을 준비할 때

먼저 확인 · 독자가 공공데이터포털에서 주식시세정보 15094808·지수시세정보 15094807·KRX상장종목정보 15094775를 각각 신청하고 승인 상태와 사용할 인증키를 확인했는지 봅니다.

금융위원회 주식시세정보, 지수시세정보, KRX상장종목정보를 사용할 거야.

세 API는 각각 활용신청을 마쳤고, 세 서비스에 표시되는 같은 인증키
하나를 세 API에서 함께 사용할 거야.

인증키가 코드나 Git에 들어가지 않게 준비해줘.

실제 값은 내가 직접 입력할게. 어디에 입력하면 되는지만 알려줘.

인증키에 `%`가 들어 있으면 그대로 써줘. 프로그램이 한 번 더 바꾸면
인증이 실패해.

04인증키는 이미 아는 방식으로 준비합니다

Claude Code·Codex에 입력실습

인증키 직접 입력 후 데이터 호출의 서버 경계를 확인할 때

먼저 확인 · 독자가 앞에서 안내한 로컬 위치에 실제 키를 직접 입력했는지 확인합니다.

데이터를 가져오는 일은 서버에서만 하게 해줘.

인증키가 브라우저로 내려가지 않는지도 Test로 확인해줘.

05오늘 날짜로 물었더니 아무것도 없습니다

Claude Code·Codex에 입력실습

준비한 인증키로 오늘 날짜의 실제 시세 응답을 먼저 관찰할 때

먼저 확인 · 키 입력·서버 경계 검사와 세 API 승인 상태를 확인합니다.

준비한 인증키로 금융위원회 주식시세정보가 실제로 동작하는지 확인해줘.

오늘 날짜의 주식 시세를 몇 건만 가져와서 사람이 알아볼 수 있게 보여줘.

인증키 값은 출력하지 마.
6. 오늘 날짜로 물었더니 아무것도 없습니다 선택·문제 발생 시
Claude Code·Codex에 입력선택·문제 발생 시

오늘 날짜의 실제 시세 조회가 오류 없이 0건을 반환했을 때

먼저 확인 · 직전 요청의 실제 정상 0건을 확인합니다. 데이터가 있거나 인증 오류인 경우 이 정본의 0건 진술을 사실처럼 사용하지 않습니다.

오늘 날짜로 조회하니 0건이 나왔어.

이 데이터가 언제 어떻게 제공되는지 확인하고, 가장 최근에 제공된
거래일을 찾아서 그 날짜의 데이터를 가져오게 해줘.

주말이나 연휴에도 동작해야 해.

그리고 그 날짜가 며칠인지 항상 알 수 있게 해줘.

07모든 숫자에는 기준일이 있습니다

Claude Code·Codex에 입력실습

확보한 지수와 종목 시세의 기준일을 구분하도록 정할 때

먼저 확인 · 실제 제공된 거래일과 지수·종목 자료 상태를 확인합니다. 날짜를 추측해서 합치지 않습니다.

지수와 종목 시세의 기준일이 서로 다를 수 있어.

다를 때 하나로 합치지 말고, 각각의 기준일을 그대로 보여줘.

두 날짜가 다르면 다르다는 것을 사용자가 알 수 있게 알려줘.

08시장 화면을 만듭니다

Claude Code·Codex에 입력실습

공식 데이터와 기준일을 준비한 뒤 시장 첫 화면을 만들 때

먼저 확인 · 서버 연결·실제 자료·기준일 구분을 확인합니다.

시장 상황을 보는 첫 화면을 만들어줘.

데이터 기준일, 코스피와 코스닥 현황, 상승률 상위 5종목, 하락률 상위 5종목,
종목 검색창을 보여줘.

지수는 지수 자체의 기준일을 함께 보여주고, 등락률 순위는 종목 시세의
기준일을 함께 보여줘.

등락률 순위 목록에는 종목명, 현재가, 등락률, 거래대금을 보여줘.

화면 제목에 오늘이라는 말은 쓰지 마. 오늘 기준이라고 보장할 수 없어.

증권사 HTS처럼 지표를 많이 넣지 말고 주식을 잘 모르는 사람도 읽을 수
있게 만들어줘.

제작 도구의 기본 화면을 그대로 두지 마. 지수와 순위 목록은 흰 카드에 담고
카드 사이에 여백을 줘. 상승은 빨강, 하락은 파랑으로 쓰고, 누르는 곳에는
강조색을 하나만 정해서 써줘. 같은 정보를 한 화면에 여러 번 반복하지 마.

화면 아래에는 출처와 이 화면을 조회한 시각을 남겨줘.

09등락률 순위에는 조건을 넣습니다

Claude Code·Codex에 입력실습

시장 화면의 등락률 순위 집계 대상을 정리할 때

먼저 확인 · 시장 첫 화면과 실제 데이터가 있는지 확인합니다.

등락률 순위는 KOSPI와 KOSDAQ의 보통주만 대상으로 만들어줘.

우선주와 스팩은 빼고, 그날 거래가 없던 종목도 빼고, 거래대금이 10억원
이상인 종목만 남겨줘.

어떤 조건으로 골랐는지도 화면에 보여줘.

10등락률 순위에는 조건을 넣습니다

Claude Code·Codex에 입력실습

정해진 순위 조건과 실제 집계 범위를 화면에 밝힐 때

먼저 확인 · 앞 단계의 실제 필터 적용과 전체·집계 대상 건수를 확인합니다.

등락률 순위를 뽑을 때 쓴 조건을 화면 아래에 그대로 적어줘.

전체 몇 종목 중 몇 종목을 대상으로 집계했는지도 보여줘.

이 조건이 투자 판단 기준이 아니라는 것도 밝혀줘.

11궁금한 종목을 찾아 들어갑니다

Claude Code·Codex에 입력실습

시장 화면에서 종목 검색과 상세 이동을 연결할 때

먼저 확인 · 시장·순위 화면과 KRX상장종목정보 실제 응답을 확인합니다.

종목을 찾아 상세 화면으로 들어갈 수 있게 해줘.

등락률 순위 목록의 종목을 누르면 그 종목 화면으로 가게 해줘.

검색창에서는 종목명이나 종목코드로 찾을 수 있게 해줘. 종목 목록은
KRX상장종목정보를 사용해줘.

KRX상장종목정보의 종목코드는 주식시세정보와 형태가 달라. 화면과 주소에는
우리가 익숙한 형태로 통일해서 보여줘.

검색 결과가 여러 개면 목록에서 고르게 하고, 딱 하나면 바로 그 종목
화면으로 보내줘.

찾는 종목이 없을 때는 빈 화면 대신 무엇을 다시 시도하면 되는지 알려줘.

한 페이지에 계속 쌓지 말고 화면이 분명하게 전환되게 하고, 시장
화면으로 돌아가는 길도 만들어줘.

12종목 하나를 제대로 봅니다

Claude Code·Codex에 입력실습

선택한 종목의 상세 가격과 기준일을 표시할 때

먼저 확인 · 검색한 종목과 연결된 실제 종목코드·시세를 확인합니다.

종목 상세 화면을 만들어줘.

종목명, 종목코드, KOSPI인지 KOSDAQ인지, 현재가, 등락, 등락률을 위에
보여줘.

시가, 고가, 저가, 거래량, 거래대금도 보여줘.

등락은 전일 종가가 아니라 기준가와 비교한 값이야. 기준가도 함께 보여주고,
화면에는 기준가와 비교한 값이라고 밝혀줘.

이 숫자들이 며칠 기준인지 반드시 함께 보여줘.

시장 전체 기준일과 이 종목의 기준일이 다르면 두 날짜를 그대로 각각
보여줘.

13최근 1년의 주가 흐름을 봅니다

Claude Code·Codex에 입력실습

종목 상세에 최근 1년 가격과 거래량 차트를 붙일 때

먼저 확인 · 현재 선택 종목의 상세 화면과 실제 일별 시세를 확인합니다.

이 종목의 최근 1년 일별 시세로 차트를 그려줘.

하루마다 시가·고가·저가·종가가 보이는 형태로 그리고, 아래에 거래량도
함께 보여줘.

차트 제목은 `최근 1년 주가 흐름`으로 하고, 일봉과 종가 선을 전환해서 볼
수 있게 해줘. 차트 위에는 실제 시작일·마지막 거래일·거래일 수를 표시해줘.

마우스를 올리면 그날의 날짜와 시가·고가·저가·종가·거래량·거래대금을 볼
수 있게 해줘.

1년이면 날짜가 240개가 넘으니까 가로축은 읽을 수 있게 정리해줘.

이동평균이나 RSI 같은 기술적 지표는 넣지 마.

141년이 없는 종목도 있습니다

Claude Code·Codex에 입력실습

차트를 만든 뒤 이력이 짧은 실제 종목의 표시를 확인할 때

먼저 확인 · 일반 종목의 차트가 동작하는지 확인합니다. 짧은 이력 종목은 실제 자료에서 찾아야 합니다.

최근 상장 종목처럼 1년치 거래일이 없는 경우가 있어.

그런 종목이 실제로 있는지 확인하고, 열어볼 종목 하나를 알려줘.

그리고 이럴 때 1년인 것처럼 보여주지 말고, 실제 구간이 며칠인지 알려줘.

15색이 없어도 읽히는지 확인합니다

Claude Code·Codex에 입력실습

완성한 시장·종목 화면의 색 외 표현과 작은 화면을 확인할 때

먼저 확인 · 시장과 종목 상세·차트가 동작하는지 확인합니다.

상승과 하락을 색만으로 전달하지 말아줘.

기호와 부호를 함께 쓰고, 화면 읽기 도구를 쓰는 사람도 상승인지
하락인지 알 수 있게 해줘.

데스크톱과 휴대전화에서 모두 주요 정보가 보이는지도 확인해줘.

16지금 만든 기능을 Test로 지킵니다

Claude Code·Codex에 입력실습

완성한 주식 기능의 회귀 Test와 실제 API 연결을 확인할 때

먼저 확인 · 시장·검색·상세·차트를 직접 사용하고 기준일·출처·순위 조건·짧은 이력·색 외 표시를 확인했는지 봅니다.

지금까지 만든 기능이 다음 장에서 깨지지 않도록 Test를 만들어줘.

인증키가 브라우저에 노출되지 않는지, 기준일과 출처, 순위 조건이 제대로
표시되는지 확인해줘.

시장 화면에서 종목을 선택하거나 검색해 상세 화면과 1년 차트까지
확인하고, 다시 시장 화면으로 돌아오는 과정도 검사해줘.

실제 금융위원회 API의 응답도 확인하고, 모든 Test를 통과한 뒤
완료했다고 알려줘.

17지금 만든 기능을 Test로 지킵니다

Claude Code·Codex에 입력실습

주식 화면 검사 후 이번 장 정상 상태를 로컬 Git에만 기록할 때

먼저 확인 · 관련 Test와 실제 화면·API 확인 결과를 확인합니다. 이번 정본은 GitHub 전송을 명시적으로 금지합니다.

이번 작업을 마무리해줘.

GitHub에 보내지는 말고 Git 기록까지만 해줘.

18이 장을 마쳤는지 확인합니다

Claude Code·Codex에 입력튜터 요청

9장의 실습 결과를 장별 완료 조건과 대조할 때

먼저 확인 · 앞 단계 실행 결과와 사람이 직접 확인할 항목을 확인합니다. 요청문을 보여주거나 실행했다고 완료로 세지 않습니다.

장 완료 확인해줘.
이 장에서 막혔을 때
디버깅 → 내 정상 기록으로 복구 → 장별 Source로 재시작

Git 명령을 외우거나 직접 입력할 필요는 없습니다. 아래 요청문을 그대로 붙여넣으면 Claude Code가 확인하고 처리합니다.

1. 디버깅 --- 먼저 무엇이 어긋났는지 그대로 말하고 고쳐봅니다. 대부분 여기서 해결됩니다.

지금 작업이 책과 다르게 진행됐어.
현재 상태와 화면에 나온 문제를 확인하고 원인을 찾아서 고쳐줘.

이 장에서 특히 자주 막히는 자리는 인증키가 준비됐는데도 등록되지 않은 인증키라는 응답이 오는 경우입니다. 공공데이터포털이 보여주는 인증키에는 %가 들어 있는 형태가 있고, 이것을 프로그램이 한 번 더 바꾸면 인증이 실패합니다.

인증키를 넣었는데 등록되지 않은 인증키라는 응답이 와.
인증키에 들어 있는 %를 프로그램이 한 번 더 바꾸고 있지 않은지 확인해줘.
실제 인증키 값은 출력하지 마.

조회 결과가 0건일 때는 인증키 문제가 아닐 수 있습니다. 이 데이터는 하루의 거래가 끝난 뒤에 제공되므로, 오늘 날짜로 물으면 아직 아무것도 없는 것이 정상입니다.

조회 결과가 0건이야.
가장 최근에 제공된 거래일을 찾아서 그 날짜로 조회하고 있는지 확인해줘.

2. 내 정상 기록으로 복구 --- 해결되지 않으면 실습하면서 내 프로젝트에 남겨둔 정상 기록으로 돌아갑니다. 지금까지 한 작업은 먼저 따로 보존합니다.

현재 작업은 잃지 않도록 먼저 별도로 보존해줘.
이 프로젝트에서 마지막으로 정상 동작했던 상태를 찾아 안전하게 복구해줘.

3. 장별 Source로 재시작 --- 그래도 이어갈 수 없을 때 사용합니다. 9장의 남은 실습은 건너뛰게 되므로 마지막 수단입니다.

내 현재 작업을 먼저 안전하게 보존해줘.
아래 9장 완성 Source에서 다시 시작해줘.
https://github.com/buildyourownai-lab/develop-like-a-pro-with-ai/tree/main/chapters/ch09/source/ai-stock-briefing
내 인증키를 입력할 자리를 알려주고
준비가 끝나면 9장을 마친 상태인지 확인해줘.

방향부터 확인하고, 더 필요할 때 다음 힌트를 펼치세요.

오늘 날짜의 시세가 없음
1단계 — 방향

화면을 연 날짜와 자료의 기준일을 구분합니다.

2단계 — 범위

휴장·자료 반영 지연·조회 실패를 나눕니다.

3단계 — 위치·원인 후보

최근 확인 가능한 거래일과 원본 응답 날짜를 대조합니다.

정답을 요청했을 때

실제 기준일을 표시하고 없음을 0으로 채우지 않습니다. 최신이라고 표시하려면 해당 기준일을 확인합니다.

검증 주의

이 설명만으로 원인이 확인됐거나 수정됐다고 말하지 않습니다. 현재 프로젝트의 근거를 먼저 대조합니다.

다른 종목 값이 섞임
1단계 — 방향

이름보다 공식 종목코드를 기준으로 봅니다.

2단계 — 범위

검색에서 선택한 코드와 상세 요청 코드를 확인합니다.

3단계 — 위치·원인 후보

기간·기준일·종목코드가 각 요청에서 같은지 봅니다.

정답을 요청했을 때

한 종목의 화면에서 다른 종목 자료가 섞이는 연결만 수정하고 검색부터 회귀 검사합니다.

검증 주의

이 설명만으로 원인이 확인됐거나 수정됐다고 말하지 않습니다. 현재 프로젝트의 근거를 먼저 대조합니다.

디버깅 → 정상 기록 복구 → 장별 소스로 재시작 →
이번 장의 완료 체크리스트
  • 프로젝트·키주식용 프로젝트와 정확한 시세 API 준비
  • 기준일확인 가능한 거래일과 단위·출처 표시
  • 시장 화면시장 정보와 상승·하락 목록 확인
  • 종목 검색종목명·종목코드로 원하는 회사를 찾음
  • 차트조회 기간과 가격·거래량을 구분
  • 예외·회귀휴장·빈 응답·오류와 기존 화면을 검사
장 완료 확인해줘.

실제 프로젝트에서 튜터와 확인합니다. 사이트를 열어본 기록은 학습 완료가 아닙니다.

장별 소스와 저자 검증 기록

저자는 빈 폴더에서 시작해 9장 요청문만으로 시장 화면과 종목 화면, 최근 1년 차트까지 갔습니다. 9장은 새 프로젝트를 시작하는 장이므로 이 장에서 새로 생긴 Test 23개가 프로젝트 전체 Test 23개이며 모두 통과했습니다. 실제 금융위원회 응답도 함께 확인했습니다. 근거는 verification/chapter-09/에 있습니다.

9장 완성 소스 ↗저자 검증 상세 기록 ↗

장별 소스는 해당 장까지의 기준 상태입니다. 정상 실습은 내 프로젝트를 이어가고, 완성 소스는 비교·복구할 때 사용합니다.

자료 판본 1c784213
이 장의 개발 용어
API
프로그램이 다른 서비스와 정해진 방식으로 요청·응답을 주고받는 연결 방법.
Test
정한 완료 조건을 반복 확인하는 검사. 검사하지 않은 전체 정확성을 보증하지 않습니다.
튜터 사용 안내실습 자료 업데이트
← 이전 장8장. 누구나 사용할 수 있는 아파트 찾기 서비스를 만듭니다다음 장 →10장. 이 회사는 최근 무엇을 공시했을까?
Development Lab아이디어를 AI와 함께 나만의 결과물로 만듭니다.

책에서 배운 개발 원칙을 AI와 직접 만들며 확인하는 실험실입니다. 아이디어를 서비스로, 서비스를 나만의 결과물로. AI와 함께 만들고, 직접 확인하며, 내 손으로 완성합니다.

자료실튜터 안내업데이트
SAStudy AI LabILInvestment LabDLDevelopment Lab

© 2026 Study AI Lab. All rights reserved.