* 목차 *

2026년 1월 20일 화요일

주식 기술적 분석 웹앱 COSTAR 스크립트

https://script.google.com/macros/s/AKfycbx0Btu5OW6k424LGp47DA284g8JZAE39B7X14M4ui-GSlDYtpGv4vIF2khgIYrWqsAt/exec

주식 기술적 분석 웹앱 COSTAR 프롬프트 

C — Context (배경)

너는 구글 앱스 스크립트(GAS) 로 동작하는 주식 기술적 분석 대시보드 웹앱을 만드는 시니어 풀스택 개발자이자, 초보자도 이해시키는 금융 분석 리포트 작성 전문가다.
사용자는 주식 초보자이며, “수치”보다 “지금의 의미(매수/매도/관망 신호)”를 한국어로 쉽고 직관적으로 알고 싶어 한다.

데이터 소스는 네이버 증권(finance.naver.com) 이며, GAS 서버에서 UrlFetchApp으로 HTML 스크래핑해 일별 시세를 가져온다.
앱 구성은 반드시 2개 파일로만 만든다:

  • Code.gs (백엔드)

  • index.html (프론트엔드)

O — Objective (목표)

사용자가 종목 코드를 입력하고 “분석 시작”을 누르면 즉시 동작하는 대시보드를 만든다.

필수 기능:

  1. 데이터 수집

  • finance.naver.com에서 일별 시세(날짜/시가/고가/저가/종가/거래량) 스크래핑

  • 가능하면 현재가도 추가로 스크래핑(실패 시 최신 종가로 대체)

  1. 지표 계산

  • 이동평균선: 5, 10, 20, 60, 120, 240

  • 일목균형표: 전환선(9), 기준선(26), 선행스팬A(+26), 선행스팬B(52,+26), 후행스팬(26,-26)

  • Slow Stochastic 3세트: (5,3,3), (10,6,6), (20,12,12)

  1. 시각화

  • 우측 상단: 가격 + 다중이평 + 일목구름(구름 채움) + 전환선/기준선/후행스팬

  • 우측 하단: 스토캐스틱 3세트(%K/%D)

  • 툴팁에서 값 표시(hover)

  • 제목 클릭 시 새로고침

  1. AI 해석(한국어)

  • 단순 나열 금지

  • 초보자 친화적 표현 사용 (“에너지가 과열”, “힘이 좋음”, “애매한 구간”, “추격은 조심”)

  • 내용에는 다음이 반드시 포함:

    • 추세(정배열/역배열/엉킴)

    • 일목(구름 위/안/아래, 전환-기준 관계, 후행스팬 힌트)

    • 스토캐스틱(과열/침체/중립 + K/D 방향)

    • 목표가/손절가(최근 20일 고점/저점 기반 안내)

    • “정보 제공 목적/투자 책임” 고지

  1. UI/UX

  • Tailwind 기반 다크모드(슬레이트/딥블루) 금융 대시보드 스타일

  • 모바일/데스크톱 반응형

  • 로딩 스피너 표시

  1. 차트 품질(중요)

  • 세로 높이 문제 해결: canvas에 height 속성 주지 말고, 부모 div에 h-[...] md:h-[...]로 높이 고정

  • 가격축 자동 스케일링: 0~5000처럼 과도하게 넓어지지 않도록
    최근 N봉(기본 140) + 미래구름 26칸 범위에서 min/max 산출 후
    suggestedMin/Max 적용 + 패딩(기본 6%)

S — Style (스타일)

  • UI: “고급 금융 대시보드” 느낌, 깔끔한 여백, 카드형 구성, glass 느낌

  • 기술 스택:

    • Front: Tailwind CDN + Chart.js

    • Back: GAS (UrlFetchApp + HtmlService)

  • 코드 스타일:

    • 함수 단위로 명확히 분리

    • 안전성(safeData) 철저: NaN/null로 차트가 깨지지 않게 처리

T — Tone (어조)

  • 사용자에게 보여지는 모든 문구는 한국어

  • 분석 리포트 톤:

    • 신뢰감 있는 전문가 말투

    • 용어는 쉽게 풀어쓰기 (“모멘텀/에너지”, “추세/힘”, “숨 고르기”)

    • 단정 대신 확률/조건부 표현 (“~일 수 있습니다”, “확인이 필요합니다”)

A — Audience (대상)

  • 차트를 잘 못 보는 주식 입문자

  • 기술적 지표의 수치보다 “행동(매수/관망/매도)” 신호가 필요한 개인 투자자

R — Response Format (출력 형식)

출력은 반드시 아래 순서로 제공하라.

  1. Code.gs 전체 코드 (코드블록)

  • doGet() 포함

  • getStockDashboardData(stockCode) 포함

  • 네이버 HTML 스크래핑 로직 포함

  • 지표 계산 함수 포함(이평/일목/스토캐스틱)

  • safeData 처리 포함

  1. index.html 전체 코드 (코드블록)

  • Tailwind + Chart.js 로드

  • 레이아웃: 좌측(현재가/목표/손절/AI 해석) + 우측(가격차트/스토캐스틱)

  • 로딩 스피너, hover 툴팁, 제목 클릭 새로고침

  • 차트 렌더링 지연(setTimeout)

  • 차트 세로 높이 고정(div h-[] 적용)

  • 가격축 자동 스케일링 함수 포함

  1. 마지막에 아주 짧게:

  • 배포 방법 4줄(웹 앱 배포)

  • “추가 확장 가능 항목” 3개 정도만 제시

✅ Constraints (제약)

  • 파일은 반드시 2개만: Code.gs, index.html

  • 통신은 반드시 google.script.run 사용

  • 차트 렌더링은 캔버스 준비 후 지연 로직 적용

  • 외부 서버/DB/라이브러리(Chart.js, Tailwind 제외) 추가 금지

  • 네이버 페이지 구조 변경 가능성 고려: 예외 처리 필수

  • 불필요한 설명 장황하게 하지 말고, “실행 가능한 코드”를 최우선 제공 

By 시간:
라벨: ,