우리는 무료 임베드 가능한 주식 감성 위젯을 만들었습니다 — 사용 방법
Source: Dev.to
왜 우리가 이것을 만들었는가
우리는 Reddit Stock Sentiment API를 운영하고 있습니다 — 이 API는 소매 투자자들이 Reddit과 X/Twitter에서 실시간으로 어떤 이야기를 나누는지 추적하고, 주식을 화제성, 감성, 그리고 추세 방향으로 점수화합니다.
이 API는 대시보드와 트레이딩 도구를 구축하는 개발자들에게 훌륭하지만, 우리는 계속해서 같은 요청을 들었습니다: “블로그에 위젯만 삽입하면 안 될까요?”
그래서 바로 그 위젯을 만들었습니다.
Source: …
세 가지 위젯
1. 티커 테이프
트렌딩 주식을 감성 지표와 함께 보여주는 가로 스크롤 바. 웹사이트 헤더에 블룸버그‑터미널 느낌을 주고 싶을 때 사용하세요.
<!-- Embed code for Ticker Tape goes here -->각 티커 항목은 주식 로고, 심볼, 버즈 점수, 색상 감성 점(녹색 = 상승, 빨간색 = 하락) 및 추세 방향을 표시합니다.
Attributes
| Attribute | Options | Default |
|---|---|---|
theme | light, dark | light |
source | reddit, x | reddit |
limit | 5, 10, 15, 20 | 10 |
speed | slow, normal, fast | normal |
2. 탑 무버스
가장 뜨거운 주식들을 순위별로 보여주는 리더보드. 버즈 점수, 상승 비율, 추세 방향, 그리고 7일 스파크라인 차트를 표시합니다.
<!-- Embed code for Top Movers goes here -->테이블은 완전 반응형이며, 태블릿에서는 회사 이름이 숨겨지고, 휴대폰에서는 스파크라인이 숨겨집니다.
Attributes
| Attribute | Options | Default |
|---|---|---|
theme | light, dark | light |
source | reddit, x | reddit |
limit | 5, 10, 15 | 10 |
period | 1, 3, 7, 14, 21, 30 (days) | 1 |
show-logos | true, false | true |
3. 주식 감성 카드
단일 주식에 대한 깊이 있는 카드. 버즈 점수, 상승 비율, 언급 횟수, 추세, 7일 스파크라인, 그리고 선택적으로 AI가 생성한 “왜 이 주식이 트렌드에 오르는가” 설명을 보여줍니다.
<!-- Embed code for Stock Sentiment Card goes here -->주식 분석 기사에 삽입하기에 최적입니다.
Attributes
| Attribute | Options | Default |
|---|---|---|
theme | light, dark | light |
source | reddit, x | reddit |
ticker | Any stock symbol | (required) |
show-explanation | true, false | true |
기술 결정
표준 웹 컴포넌트
React도, Vue도, Angular도 없습니다. customElements.define()와 Shadow DOM만 사용합니다. 위젯은 정적 사이트, WordPress, Next.js 등 어디서든 동작합니다 — 브라우저가 웹 컴포넌트를 지원한다면(모든 최신 브라우저가 지원) 바로 사용할 수 있습니다.
Shadow DOM 캡슐화
모든 위젯이 Shadow DOM을 사용하므로 우리의 스타일이 페이지에 새어 나가지 않고, 사용자의 스타일이 위젯을 깨뜨리지 않습니다. 기본적으로 깨끗한 격리를 제공합니다.
API 키 불필요
위젯은 서버‑사이드에서 인증을 처리하는 프록시 엔드포인트를 호출합니다. 별도로 회원가입하거나 키를 관리할 필요가 없으며, 프런트엔드 코드에 자격 증명이 노출되는 일도 없습니다.
내장 캐싱
각 위젯은 5분 TTL과 요청 중복 제거 기능을 갖춘 인‑메모리 캐시를 가지고 있습니다. 페이지에 위젯을 다섯 개 배치하면 캐시된 응답을 공유합니다. 불필요한 API 호출이 없습니다.
외부 의존성 제로
전체 위젯 라이브러리는 단일 바닐라‑JS 파일입니다. npm 패키지, 번들러, 폴리필이 필요 없습니다. 폰트 로딩(Space Grotesk + JetBrains Mono)은 내부에서 처리되며 페이지당 한 번만 트리거됩니다.
실제 예시
금융‑뉴스 사이트 헤더
<!-- Example embed for a site header -->주간 주식‑요약 블로그 포스트
<!-- Example embed for a blog post -->단일‑주식 분석 기사
<!-- Example embed for an analysis article -->다크‑테마 트레이딩 대시보드
<!-- Example embed for a dark dashboard -->라이브 구성기 사용해 보기
우리는 모든 속성을 조정하고 실시간 미리보기를 확인하며 임베드 코드를 복사할 수 있는 인터랙티브 구성기를 만들었습니다:
테마, 데이터 소스, 티커 수, 기간을 변경하면 미리보기가 즉시 업데이트되고 임베드 코드가 자동으로 재생성됩니다.
다음은 무엇인가
- CSS 사용자 정의 속성을 통한 맞춤 색상 테마
- 실시간 푸시 데이터를 위한 Webhook 트리거 업데이트
- Reddit와 X 외의 더 많은 데이터 소스
아이디어나 기능 요청이 있으면 아래에 댓글을 남기거나 adanos.org/contact 로 연락 주세요.
Adanos Software가 제작 — 우리는 개인 투자자를 위한 트레이딩 인텔리전스 도구를 개발합니다.