00:00실제로 주가가 살짝 올랐습니다

00:00와, 이거 너무 신기한데요

00:02자, 분명히 5분 전에 이러한 그래프가 있는데요

00:04"GPT스 ES 주식 예측"을 검색하면 다양한 제안 이유가 있습니다

00:06특정 종목 분석을 요청하면 일반적으로 해당 주식 종목에 관한 정보를 긁어와서 이렇게 요약해 주는 수준으로 주식을 예측해 줍니다

00:16그런데 이 주가 예측 GPT는 실시간으로 코스피 시가 총액에 12까지의 순위를 보여주기도 하고, 자, 여기서 삼성전자에 대한 종목명을 채팅창에 이렇게 입력을 하면, 자, 이런 식으로 현재 주가 그래프와 함께 앞으로 이어질 주가의 방향을 노란색 그래프로 표시해 줍니다

00:30자, 여기 설명을 보면 예측 가능한 시간은 현 시점에서 1분에서 5분 이내라고 하는데요

00:36자, 그러면 이번에는 다른 종목도 한번 검색을 해서 테스트를 해 보겠습니다

00:39현대차를 입력을 했는데, 자, 이번에도 이렇게 회색의 과거 차트와 앞으로 이어질 노란색의 예측 차트를 이렇게 잘 보여주고 있습니다

00:45자, 그러면 실제로 이 차트가 맞는지 네이버 증권에서 검색을 해서 실제 비교해 보도록 하겠습니다

00:53자, 이렇게 네이버에서 현대차를 검색을 해 봤는데요, 이 회색의 과거 차트 모양이 실제로 동일합니다

00:56이 주가 예측 GPT의 예상으로는 약 5분 이내에 이렇게 주식 방향이 올라간다고 하는데, 이 주가의 방향이 어떻게 될지 5분 후에 다시 한번 확인해 보겠습니다

01:06자, 5분이 지났기 때문에 새로 고침을 해 보도록 하겠습니다

01:09실제로 주가가 살짝 올랐습니다

01:11와, 이거 너무 신기한데요

01:13자, 분명히 5분 전에 이러한 그래프가 있었는데요

01:13주가 예측 차트가 예상해 준 그래프 모양대로 예, 움직이는 것을 확인해 볼 수가 있습니다

01:19이 API를 실제로 개발한 사이트에 들어가 보도록 하겠습니다

01:22자, 지금 보니까 이 사이트는 AI를 이용해서 주식 투자를 해주는 투자 플랫폼 같습니다

01:27여기 설명을 보니까 AI 투자 알고리즘 1위로 인증을 받았다고 하네요

01:31자, 이 서비스에서 이 주식 예측을 어떤 식으로 하는지 잠깐 한번 보도록 하겠습니다

01:37하이버프 AI [음악] [박수] [음악]는 처음에 주가 예측 채치 피티를 그냥 일반적으로 많이 사용되는 프롬프트로 학습을 시켜서 주가를 예측해주는 그러한 모델인 줄 알았는데요, 지금 보니까 보다 많은 기술들을 활용해서 이 주가를 예측하는 거 같습니다

02:20게다가 하이버프는 주식 투자 AI 모델을 외부에서 사용할 수 있도록 API를 제공하고 있습니다

02:25이 하이버프 API를 이용하면 굳이 우리가 직접 채치 PT 등의 유료 API를 사용하지 않더라도 무료로 투자 예측 웹앱을 만들 수 있을 것 같습니다

02:32자, 그럼 지금부터 한번 이 API를 활용해서 주식 예측 웹앱을 만들어 보도록 하겠습니다

02:37자, 먼저 여기 하이버에서 제공한 API 주소에 접속을 해 보도록 하겠습니다

02:42API 주소에 접속을 하니까 이렇게 에러가 발생을 했는데요

02:46자, 네이라 하는 파라미터를 입력을 하라고 하네요

02:48API라고 하는 것은 쉽게 얘기해서 요리를 주문할 수 있는 메뉴판 같은 역할을 하는데요

02:52API 주소는 메뉴를 주문할 수 있는 웨이터의 역할을 합니다

02:56그래서 이 주소에 접속을 하면 우리가 웨이터를 부를 수가 있는 건데요

02:59그런데 실제 요리를 주문을 하려면 정확한 메뉴를 웨이터에게 얘기해 줘야 되는데, 그 메뉴를 파라미터로 할 수 있습니다

03:04자, 여기 파라미터하는 메뉴에는 두 가지의 메뉴가 표시가 되어 있습니다

03:10메서드와 네임입니다

03:10간단히 식사와 음료로 비유를 하겠습니다

03:12여기 메서드라고 나와 있는 메뉴는 필수 주문이라고 표시가 되어 있네요

03:17그리고 이 메뉴에서 고를 수 있는 값에는 예, 포트폴리오 AI, 마켓캡이라는 두 가지 세부 메뉴가 있습니다

03:23그럼 먼저 이 메서드 메뉴에서 마켓캡을 주문해 보겠습니다

03:25자, 주문하는 방법은 이 주소 뒤에 물음표를 입력하고 해당되는 메뉴를 적어 주면 되겠습니다

03:31그래서 해당되는 메뉴는 메서드, 마켓캡으로 하겠다고 이렇게 주문을 해 보겠습니다

03:38자, 그럼 바로 음식이 나왔는데요, 이렇게 브라우저 화면에 제이슨 형식으로 결과값이 나왔습니다

03:41자, 코스피와 코스닥의 시가 총액 12 종목을 보여주고 있습니다

03:45자, 그럼 이번에는 마켓캡 메뉴가 아니라 포트폴리오 AI라는 메뉴를 한번 주문해 볼게요

03:50자, 그런데 이 포트폴리오 AI 주문할 때는 이 네임이라는 음료도 같이 주문을 해야 된다고 합니다

03:57이 네임은 종목 이름이라고 표시가 되어 있습니다

03:59자, 그럼 한번 주문을 해 볼게요

04:00자, 메서드는 포트폴리오 AI고 입력을 하고, 자, 여기서 추가 메뉴를 입력을 할 때는 그리고의 의미가 있는 & 기호를 넣어 주시고요

04:09추가적으로 주문을 해주면 됩니다

04:11그래서 네임은 예, 삼성전자로 이렇게 다시 주문을 해 보도록 하겠습니다

04:15자, 잠시 후 결과값으로 이렇게 PNG 이미지 파일의 주소가 출력이 되는데요

04:22이 주소를 복사해서 주소창에 붙여 넣기를 하면 이렇게 주가 예측 차트 이미지가 표시가 됩니다

04:27자, 이제 어떻게 주가 예측 주문을 하는지 알았으니까 이러한 API 정보를 바탕으로 클로드에게 주식 예측 웹앱을 만들어 달라고 요청해 보겠습니다

04:35자, 클로드에게 프롬프트를 입력해 볼게요

04:39자, 다음 API를 이용해서 주식 예측 웹앱을 만들어 달라고 했고요

04:42자, HTML 코드로 만들어 달라고 요청을 했습니다

04:45자, 그리고 방금 전에 우리가 확인했던 그 API 이렇게 입력을 해 줬고요

04:48주식 예측 같은 경우에는 종목 이름을 이렇게 중괄호 두 개로 표시해 줬습니다

04:54자, 중괄호는 보통 코딩을 할 때 변수를 표시해 줄 때 많이 사용되는 기호가 되겠습니다

04:58자, 그러면 이렇게 요청을 해 볼게요

05:00자, 이렇게 코드 생성이 완료가 됐고요

05:02자, 그러면 실제로 이 코드를 한번 실행해 보겠습니다

05:05예, 안정적인 코드 실행을 위해서 Artifacts에서 바로 실행하기보다는 이 코드를 복사해서 Replit에 가서 한번 실행해 보도록 하겠습니다

05:12자, 새로운 HTML 템플릿을 하나 만들어 주시고요

05:16자, 그리고 HTML 파일에 기존에 있는 코드는 삭제를 하고, 자, 우리가 방금 전에 복사한 코드를 이렇게 붙여넣기를 하고 실행을 해 보도록 하겠습니다

05:23자, 이 코드를 실행하면 이렇게 나오고요

05:25예, 시가 총액 순위 보기를 눌렀더니 예, 시가 총액 순위가 제이슨 파일이 이렇게 보기 좋게 그래프로 나왔고요

05:30자, 이번에는 삼성전자라고 적고 예측 차트 보기 버튼을 클릭을 해 봤습니다

05:35잠시 후에 이렇게 삼성전자의 예측 차트를 자, 이미지로 잘 표시해 주는 것을 확인해 볼 수가 있습니다

05:41이번에는 현대차를 입력하고 예측 차트 보기를 눌러 보겠습니다

05:47자, 현대차의 예측 차트도 이렇게 이미지로 잘 표시가 되었고요

05:51아, 지금 예측 차트로 보니까 큰 폭의 상승이 있는 것으로 표시가 되네요

05:53자, 제가 당연하지만 노파심에서 여러분들께 말씀을 드리지만, 지금 제가 만들고 있는 주식 예측 웹은 제가 개발의 재미와 여러분들에게 콘텐츠를 소개해 드리기 위해서 만들고 있는 것이지 이 차트를 이용해서 제가 투자를 한다거나, 여러분들께 투자를 권유하는 것이 절대 아닙니다

06:07자, AI 모델을 만든 하이버프에서 얘기를 하고 있지만, 투자의 참고용으로만 활용을 하셔야지, 이거를 전적으로 믿고 투자에 몰빵을 하시면 절대 안 된다는 것을 강조 드리고요

06:17자, 혹시나 하는 마음에서 말씀을 드렸고요

06:19자, 이렇게 간단하게 하이버프의 API를 이용해서 주식 예측 웹앱을 이제 만들어보았는데요

06:24자, 이 웹앱을 독립적으로 하나의 서비스로 만들 수도 있지만, 저는 지난 영상에서 제가 넥스트 JS 리액트로 만들었던 리치 뉴스라는 웹사이트에 하나의 기능으로 넣어 보도록 하겠습니다

06:35자, 이 사이트 같은 경우에는 외부에서 뉴스를 긁어와서 그 뉴스를 AI 분석을 해서, 해당 뉴스가 일상 생활, 주식 시장, 부동산 시장에 미치는 영향을 분석해 주는 그러한 뉴스 크롤링 사이트인데요

06:48자, 여기 위에 보면 이 버튼이 하나가 있습니다

06:49이 버튼이 근데 전혀 활성화가 안 돼 있기 때문에 이 버튼을 눌러도 아무런 기능을 하지 않고 있는데, 방금 전에 만든 이 주가 예측 프로그램을 리치 뉴스 서비스에 추가 기능으로 넣어서 이 버튼을 클릭하면 주가를 예측할 수 있는 서비스 팝업창이 나타나도록 이 서비스를 업데이트 해 보도록 하겠습니다

07:04자, 그래서 저는 리액트로 만든 웹사이트에 이 코드를 넣기 위해서 클로드에게 리액트 코드로 변경해 달라고 다시 요청하겠습니다

07:12제가 리액트 컴포넌트 코드로 변화해 달라고 했고요, 자, 이렇게 코드가 완성됐습니다

07:15이 컴포넌트라고 하는 것은 리액트에서 블록처럼 사용할 수 있는 그러한 개념인데요, 리액트를 사용하는 주된 이유 중 하나가 이렇게 어떠한 코드가 있을 때 그것을 하나의 블록처럼 컴포넌트로 다 연결을 해서 확장이 하기가 매우 쉽다는 겁니다

07:29자, 그래서 이렇게 어떠한 기능을 만들었을 때, 이 기능을 컴포넌트와 하면 우리의 서비스에 쉽게 이 기능을 갖다 붙일 수가 있는 거죠

07:36자, 그러면 이렇게 컴포넌트로 만든 리액트 코드를 복사해서 자, 이전에 만든 우리의 웹서비스에 붙여넣기를 해보도록 하겠습니다

07:43이전에 만든 리액트 프로젝트를 커서로 열었고요

07:46현재 주요 파일로는 페이지 폴더의 인덱스 파일과 컴포넌트 폴더의 카드 파일이 있습니다

07:52터미널 창에서 npm run으로 현재 코드를 실행해 보겠습니다

07:56자, 이제 메인 화면에 주가 예측 버튼을 클릭하면 주가 예측 팝업창에 뜨도록 요청해 볼 건데요, 이 요청과 동시에 컴포넌트 파일을 바로 생성할 수 있도록 Ctrl과 K를 눌러서 컴포저 창을 열고 이렇게 요청해 보도록 하겠습니다

08:10주가 예측 버튼을 클릭하면 팝업 창이 뜨도록 해 달라고 했고요, 팝업 창에 컴포넌트는 아래의 코드를 참고해서 만들어 달라고 했습니다

08:17그리고 복사해 온 코드를 붙여넣기로 하겠습니다

08:18자, 그리고 엔터를 치면 컴포즈 방금 전에 제가 요청한 이 코드를 실행하기 위해서 이 프로젝트의 모든 파일을 분석하고 이렇게 필요한 컴포넌트 파일을 새로 생성하기하고 인덱스 파일의 수정될 부분을 알아서 수정을 해 줍니다

08:31그래서 내용을 확인해 보고 이 아래 All 버튼을 클릭하면 이 모든 내용이 자동으로 저장이 됩니다

08:36자, 여기 보시면 기존에는 카드 파일만 있었는데 이 새로운 컴포넌트로 스톡 프레딕션이라는 파일이 생성이 되었고요

08:41이렇게 인덱스 파일도 자동으로 수정이 되었습니다

08:45이제 주가 예측 버튼을 클릭하면 이렇게 팝업창이 뜨면서 주가를 예측할 수 있는 새로운 기능이 완성이 되었습니다

08:51자, 지금까지 하이버프 API를 이용해서 주가 예측 웹앱을 만드는 방법에 대해서 알아보았는데요

08:56여러분들도 리치 뉴스 웹앱을 참고해서 여러분들만의 투자 웹앱을 만들어 보시기 바랍니다.