대화만으로 실시간 대시보드 3개를 만든 방법

준비물

세 대시보드 모두 같은 도구 위에서 만들었습니다. 계정과 키는 필요해지는 순간 하나씩 만들면 됩니다.

세 대시보드에 공통으로 쓴 7단계

주제는 달라도 흐름은 같았습니다. 각 단계의 요청 문장은 실제로 입력한 말입니다.

따라 할 때 꼭 챙길 것

실제로 입력한 요청 85개

세 대시보드를 만들면서 Claude Code에 입력한 요청을 시간 순서대로 모두 옮겼습니다. 각 요청 아래 줄은 그 요청으로 실제 무엇을 했는지입니다. 인증키·시크릿·이메일처럼 남에게 보이면 안 되는 값은 가렸습니다.

도로 상황판 my-dashboard-fawn-two.vercel.app 요청 44개

1. 9/16 19:51

   버셀 연동하자

   Next.js 틀을 만들고 Vercel CLI로 연결

2. 9/16 19:55

   https://data.ex.co.kr/openapi/safeDriving/forecast 이 공공데이터 활용 체크

   교통예보 API를 실제로 호출해 응답과 test 키 동작을 확인

3. 9/16 19:56

   응

   교통예보 값을 서버에서 받아 첫 화면에 연결

4. 9/16 19:59

   https://data.ex.co.kr/dataset/datasetList/list?pn=1&serviceType=OPENAPI playwrite 활용해서 위 사이트 체크 후 오픈 api 활용한 대시보드 설계 3가지 제안해줘 지도 이미지로 실시간으로 보여주는 자료 만들자

   Playwright로 도로공사 오픈API 93종 목록을 긁어 카탈로그로 정리

5. 9/16 20:00

   공공데이터 api 찾아줘 국내

   국내 공공데이터 API 목록을 분야별로 정리

6. 9/16 20:01

   교통 (지금 쓰는 API와 묶기 좋음) 이거 한눈에 볼 수 있는 실시간 대시보드 open api 연동해서 만들자

   지금 키로 응답하는 교통 API를 확인하고 실시간 대시보드 제작

7. 9/16 20:09

   전기차 충전소 현황 대시보드 구축 체크

   도로공사에는 충전소 API가 없고 환경공단 API가 필요함을 확인

8. 9/16 20:20

   한글로

   답변 언어를 한국어로 바꿈

9. 9/16 20:21

   실시간 데이터만 작업하자

   실시간으로 갱신되는 API만 남기도록 작업 범위를 좁힘

10. 9/16 20:30

    열어줘

    로컬 서버의 상황 지도를 브라우저로 열어 확인

11. 9/16 20:31

    열어줘

    로컬 대시보드와 하위 페이지를 브라우저로 염

12. 9/16 20:55

    한글로

    도로공사 서버 차단 상황과 다른 세션 작업 내용을 공유

13. 9/16 21:15

    다시 진행

    막혔던 API를 간격을 두고 한 번씩 다시 호출

14. 9/16 21:32

    한글로 말해 그리고 이 대시보드 모두 다 시각화해줘

    데이터가 나오는 페이지마다 그래프·지도를 자동으로 붙임

15. 9/16 21:42

    링크줘봐

    로그인해야 열리는 미리보기 주소를 전달

16. 9/16 21:43

    배포해줘

    누구나 열 수 있는 공개 주소로 첫 배포 (my-dashboard-fawn-two)

17. 9/16 21:45

    실제 교통 정보로 활용할 수 있는 대시보드 기획 5개해줘

    실제 교통 정보로 쓸 수 있는 대시보드 기획 5개를 제안

18. 9/16 21:46

    곧 추석이니까 추석 시즌 교통 정보 제공 아이디어로

    추석 특수일 통계 API에 자료가 있는지 확인하고 추석용 기획으로 전환

19. 9/16 22:15

    응

    추석 출발 시간 추천 기능 제작 시작

20. 9/17 07:01

    다시 진행

    작년 추석 통계 수집을 29페이지부터 간격을 늘려 이어받음

21. 9/17 07:05

    (발급받은 도로공사 인증키 값) 이거 추가

    도로공사 정식 키를 등록하고 유효한지 확인

22. 9/17 07:06

    인증키 있고 없고 차이 설명

    키 없음·test 키·발급 키로 각각 호출해 결과를 비교

23. 9/17 07:07

    지금 그럼 인증키 없어도 결과는 같아?

    키가 없으면 결과가 달라지지만 코드가 test 키로 대체함을 설명

24. 9/17 07:08

    지금 반영된거야?

    배포본이 새 키로 응답하는지 확인

25. 9/17 07:10

    지금 실시간으로 데이터 받을 수 있는 api 키만 별도로 추려서 서비스 개편하자

    API마다 응답이 몇 분 늦는지 재서 실시간 28종을 선별

26. 9/17 07:10

    슈파베이스 연결하자

    프로젝트 구조를 확인하고 Supabase 연결

27. 9/17 07:18

    슈파베이스 통해서 로그인 기능 추가 가능한거지?

    로그인 코드는 준비돼 있고 키 연결만 남았음을 확인

28. 9/17 07:19

    연결 체크

    Supabase 접속과 로그인 흐름을 점검

29. 9/17 07:23

    지금 구축된게 https://my-dashboard-fawn-two.vercel.app/ 이거 하나지?

    공개된 사이트 주소와 페이지 목록을 정리

30. 9/17 07:28

    https://my-dashboard-fawn-two.vercel.app 여기서 실제 작동하는 실시간 데이터 정보만 살리고 나머진 삭제

    지연 기준으로 실시간이 아닌 페이지를 삭제

31. 9/17 07:51

    한글로 안내해 앞으로

    한국어로 안내하는 규칙을 메모리에 저장

32. 9/17 07:53

    분리하자 도로 상황판과 주식 대시보드를

    도로·주식을 폴더·Vercel 프로젝트·주소까지 분리

33. 9/17 08:00

    도로 실시간 상황판 https://www.its.go.kr/map/cctv 이거 연결하고, 지금 대시보드 사용성을 더 높여야하는데 아이디어 3개만 줘봐

    ITS CCTV는 공식 API 키가 필요함을 확인하고 사용성 아이디어 3개 제안

34. 9/17 08:02

    1응 2응 순서대로 진행

    도로 상황판 배포 후 휴대폰 요약 → 내 귀성길 순으로 제작

35. 9/17 08:33

    귀성 구간은 직접 선택하게 하자 지금 전주 일산 고정인데 선택 방식으로 수정

    전국 고속도로망을 그래프(지점 596개·구간 1,338개)로 만들어 최단 시간 경로 계산으로 교체

36. 9/17 08:48

    응 그리고 레이아웃 개선하자

    10분마다 구간 소요시간을 Supabase에 저장하고 레이아웃 개선

37. 9/17 08:59

    디자인 적용 체크

    주식 대시보드와 나란히 캡처해 디자인이 같은지 비교

38. 9/17 09:05

    진행 모두 다

    레이아웃 개선 5가지를 모두 적용

39. 9/17 09:32

    지금까지 내가 대시보드를 구축한 과정을 하나의 흐름으로 정리해줘

    구축 과정을 단계별 흐름으로 정리

40. 9/17 09:33

    3개 세션 모두 정리해줘 html로

    세 대시보드를 하나의 HTML 가이드로 정리

41. 9/17 09:41

    링크 배포해줘

    가이드를 공개 주소(dashboard-guide)로 배포

42. 9/17 10:49

    https://my-dashboard-fawn-two.vercel.app/?from=gangseo&to=jeonju 오류 체크

    서버 위치를 미국→서울로 옮기는 등 오류 4가지 수정

43. 9/17 10:58

    그리고 출발 시간을 선택할 수 있게해줘

    출발 날짜·시각을 골라 소요시간을 보는 기능 추가

44. 9/20 19:23

    3개 대시보드 만든 대화 내용과 프롬프트를 모두 정리해서 아래 링크에 추가 https://dashboard-guide-nu.vercel.app/

    세 세션의 대화 기록과 프롬프트를 이 가이드에 추가

주식 대시보드 stock-dashboard-virid-three.vercel.app 요청 23개

1. 9/16 20:48

   주식 시세 대시보드 구축

   금융위원회 주식시세정보 API를 확인

2. 9/17 07:26

   데이터포맷 JSON+XML End Point https://apis.data.go.kr/1160100/GetStockSecuritiesInfoService_V2 일반 인증키 (발급받은 인증키 값) 이 정보 활용해서 주식 정보 대시보드 정리 가능한지 체크

   금융위 주식시세 API가 실제로 응답하는지 호출

3. 9/17 07:28

   삼성전자 하이닉스 추가

   관심 종목 2개로 /stock 페이지 제작

4. 9/17 07:35

   한글로

   한국어로 답변하며 종목 카드 구성을 안내

5. 9/17 07:35

   https://github.com/yybmion/public-apis-4Kr 지금 파일 복사

   공개 API 목록 저장소를 프로젝트 안 폴더로 복사

6. 9/17 07:36

   어떤 종류 api 있는지 알려줘

   국내·해외 API 목록 두 가지를 정리해 안내

7. 9/17 07:40

   미국 주식 대시보드 구축 가능해?

   기존 주식 페이지가 무엇을 하는지 확인

8. 9/17 07:40

   미국 주식도 가능해?

   키 없이 쓸 수 있는 미국 시세 소스를 테스트

9. 9/17 07:41

   응 애플 테슬라 스페이스엑스

   스페이스X가 상장돼 있는지부터 확인

10. 9/17 07:42

    (발급받은 인증키 값)

    키가 어느 서비스 것인지 확인한 뒤 저장

11. 9/17 07:56

    https://jusikbot.com/ 이거 참고해서 만들어

    참고 사이트 구성을 분석해 화면에 반영

12. 9/17 08:04

    배포

    배포 후 운영 주소에서 데이터가 들어오는지 확인

13. 9/17 08:07

    이렇게 하자 나는 스페이스x, 엔비디아, 테슬라, 팔란티어, qqq, qqqm, tqqq, 애플을 매수했고, 실시간 기업 정보 기사가 보이게해줘

    보유 8종목 시세와 한글·영문 기사를 연결

14. 9/17 08:14

    내가 요청한 수정 사항 반영된거야?

    로컬에만 반영됐고 배포가 필요함을 확인

15. 9/17 08:16

    샘플 데이터로 내가 가지고 있는 주식 수량과 실시간 수익율 보여주는 대시보드 추가 왼쪽 메뉴에

    보유 수량·평균 단가 샘플로 포트폴리오 페이지 추가

16. 9/17 08:18

    달러 원화 같이 표기하고 현재 환율 기준으로 환율도 보여줘

    달러·원화를 함께 표기하고 현재 환율을 표시

17. 9/17 08:25

    내 종목, 포트폴리오가 겹치는 것 같은데 이 부분 체크하고 첫 페이지가 전체 현황 판이 나오면 좋겠어 왼쪽은 내가 보유한 주식 현황, 오른쪽은 전체 현황

    겹치는 페이지를 정리하고 첫 화면을 전체 현황으로 재구성

18. 9/17 08:35

    배포해줘

    배포 후 페이지별 데이터 확인

19. 9/17 08:43

    시각 데이터를 그래프로 개선

    지수·보유 종목 미니 그래프와 손익 그래프 추가

20. 9/17 08:58

    좋아 배포하자 그리고 메인 홈 전체 대시보드 현황을 볼 수 있게 도식화하자 그래프로 한글로 답변해 규칙 추가

    배포하고 홈을 그래프로 도식화, 한국어 규칙 저장

21. 9/17 10:56

    2 진행

    Supabase에 SQL을 실행할 경로를 확인

22. 9/17 11:28

    해외 주식 정보 가녀오는 경로 알려줘

    해외 주식 정보의 출처와 담당 파일을 정리

23. 9/17 11:28

    오늘 연동을 위해 내가 가입한게 있는데 체크

    환경변수 이름만 보고 가입한 서비스가 동작하는지 테스트

테슬라 충전 대시보드 ev-dashboard-teal-one.vercel.app 요청 18개

1. 9/16 20:10

   전기차 충전소 관련 공공 api 기반으로 고속도로 충전소 현황 지도 구축

   바로 호출 가능한 충전소 API를 확인

2. 9/16 20:21

   한글로

   고속도로 충전소 지도를 만들고 인증키가 필요한 부분을 안내

3. 9/16 20:21

   테슬라 충전소만 표기

   운영기관이 테슬라인 충전기만 남겨 표시

4. 9/17 07:49

   (프로젝트 폴더 경로) Documents/com~apple~CloudDocs/Desktop/my dashboard/public-apis-4Kr 전기차 충전소 정보 대시보드 구축하자

   프로젝트 구조와 API 목록을 확인

5. 9/17 07:57

   https://teslacharger.co.kr/ 여기 참고해서 테슬라 전기차 관련 데이터만 대시보드로 구축

   참고 사이트를 분석해 테슬라 전용 구성으로 설계

6. 9/17 08:09

   배포

   로컬 빌드 후 배포 시도

7. 9/17 08:11

   한글로

   권한 검사에 막혀 배포되지 않은 상태를 설명

8. 9/17 08:11

   배포

   배포 재시도

9. 9/17 08:15

   현재 내 위치 기반으로 안내 가능하도록 기능 추가하고, 현재 사용 현황도 보여줘

   내 위치 기준으로 수퍼차저를 정렬하고 길안내 연결

10. 9/17 08:27

    응 배포

    배포 후 공개 주소와 API 경로 확인

11. 9/17 08:29

    고속도로 휴게소에 테슬라 충전소가 있는 곳 별도 표기

    휴게소 안에 있는 수퍼차저를 골라내는 방법 확인

12. 9/17 08:40

    고객 비밀번호 •••••••••••••••••••••••••• 오픈 소스 기여 여부 No OAuth 부여 유형 client-credentials, authorization-code 허용되는 출처 https://ev-dashboard-teal-one.vercel.app 허용되는 리디렉션 URI https://ev-dashboard-teal-one.vercel.app/api/tesla/callback 허용되는 반환 URL 반환 URL이 추가되지 않음

    테슬라 앱(OAuth) 설정값이 맞는지 확인

13. 9/17 08:40

    (내 이메일 주소)

    허용 이메일을 저장

14. 9/17 08:41

    (테슬라 시크릿 값)

    시크릿을 화면에 출력하지 않고 .env.local에만 저장

15. 9/17 08:41

    (테슬라 Client ID 값)

    Client ID를 저장하고 Vercel 환경변수 등록

16. 9/17 08:46

    실시간 현황 로그인 없이 보이게해줘

    토큰을 서버에 보관하는 구조로 바꿔 로그인 없이 보이게 함

17. 9/17 09:03

    휴게소 슈퍼차저도 지도로 보여줘

    휴게소 수퍼차저 전용 지도를 추가하고 목록과 연결

18. 9/17 10:56

    테슬라 api 연동으로 볼 수 있는 데이터 정리

    공식 문서를 확인해 테슬라 API로 받을 수 있는 데이터를 정리