AFTER
그때의 판단을 기록하는 투자 회고 서비스
NH투자증권 PLUG OpenAPI
- 기간
- 2026
- 역할
- Full-stack / Securities API Integration / Realtime
- 주요 기술
- NH투자증권 PLUG OpenAPI, Django REST Framework, Django Channels, PostgreSQL, React, TypeScript, OpenDART
- 9
- 사용한 PLUG API · 실시간 채널
- 1,345
- 장중 검증 때 받은 실시간 메시지
- 44
- 백엔드 자동 테스트
Soobin's scope
직접 구현한 부분
Full-stack / Securities API Integration / Realtime
- 01NH투자증권 PLUG OpenAPI 연동: 토큰, 현재가, 기간별 시세, WebSocket 실시간 체결(oc) · 호가(ob)
- 02서버가 PLUG에 한 세션으로 접속해 여러 브라우저에 나눠 보내는 실시간 중계 허브(등록 한도 · 중복 제거 · 재접속)
- 03구조화된 투자 편지: 선택형 판단 기록, 봉인 · 개봉 · 답장, 기록 보관함 저널
- 04OpenDART 기업 정보 · 공시 연동과 서버 캐시, 확인된 공식 링크만 표시
- 05가상 계좌와 관리자 전용 실계좌 조회(조회 전용, 주문 API 없음, 계좌번호 마스킹)
01 — 프로젝트 개요
어떤 서비스인가
AFTER는 투자 결과보다 그때의 판단을 남기는 서비스입니다. 종목을 고르고 현재 상태, 예상 방향, 판단 근거, 확신 정도, 감정, 생각을 바꿀 조건을 선택한 뒤 자유롭게 편지를 씁니다.
봉인하는 순간의 확정 종가가 함께 기록되고, 개봉일 전에는 판단과 본문을 볼 수 없습니다. 개봉하면 그때의 판단과 개봉 시점의 종가, 그 사이의 가격 흐름을 보고 답장을 남기며, 답장할 때마다 상태 · 확신 · 감정을 다시 골라 생각이 어떻게 바뀌었는지 쌓아 갑니다.
시세 · 차트 · 실시간 체결과 호가는 NH투자증권 PLUG OpenAPI에서, 기업 정보와 공시는 금융감독원 OpenDART에서 가져옵니다. 아래 체험 데모는 서버 없이 브라우저 안의 예시 데이터로 같은 화면과 흐름을 재현합니다.
02 — 제품 흐름
직접 살펴보는 제품 사용 흐름
실제 AFTER 프론트엔드를 이 페이지 안에서 그대로 눌러 볼 수 있습니다.
실제 서비스는 NH투자증권 PLUG OpenAPI에서 시세 · 차트 · 실시간 체결과 호가를 받아오지만, 체험 데모는 서버 없이 브라우저에서 만든 예시 시세로 동작합니다.
- 01
종목 보기
홈의 관심 종목이나 검색으로 종목을 열면 차트 · 기업 정보 · 공시 · 내 기록 탭과 실시간 체결 · 호가가 보입니다.
- 02
편지 쓰기
현재 상태 · 예상 방향 · 판단 근거 · 확신 · 감정 · 생각을 바꿀 조건을 고르고 편지를 쓴 뒤 봉인합니다.
- 03
개봉과 비교
기록 보관함의 예시 편지를 열면 그때의 판단과 지금의 답장, 두 시점의 종가와 가격 흐름을 나란히 봅니다.
- 04
바로 열어 보기
새로 쓴 편지는 개봉일 전까지 잠겨 있습니다. 체험 데모에서는 ‘지금 열 수 있게 하기’로 바로 열어 볼 수 있습니다.
03 — 담당 범위
SOOBIN'S SCOPE
- NH투자증권 PLUG OpenAPI 연동: 토큰, 현재가, 기간별 시세, WebSocket 실시간 체결(oc) · 호가(ob)
- 서버가 PLUG에 한 세션으로 접속해 여러 브라우저에 나눠 보내는 실시간 중계 허브(등록 한도 · 중복 제거 · 재접속)
- 구조화된 투자 편지: 선택형 판단 기록, 봉인 · 개봉 · 답장, 기록 보관함 저널
- OpenDART 기업 정보 · 공시 연동과 서버 캐시, 확인된 공식 링크만 표시
- 가상 계좌와 관리자 전용 실계좌 조회(조회 전용, 주문 API 없음, 계좌번호 마스킹)
- React · TypeScript 화면, GitHub Actions CI, Docker 운영 이미지
04 — 기술 구조
구조와 데이터 흐름
Quote & Letter
- React SPA세션 + CSRF
- Django RESTletters · market_data
- PLUG RESTcurrentPrice · period
- 가격 규칙KRX 정규장 확정 종가
- PostgreSQL봉인 기록 불변 트리거
Realtime
- Browser WS/ws/market/
- Channels Hub참조 수 · 중복 제거
- PLUG WebSocketoc 체결 · ob 호가
- 재접속 · 재구독지수 백오프
SOOBIN'S SCOPE / 직접 구현하고 구성한 구간
05 — 문제 해결
무엇이 어려웠나
상황 → 어려웠던 이유 → 실행한 행동과 판단 → 결과 순서로 정리했습니다.
제목을 누르면 상세가 펼쳐집니다.
01 · Situation
상황
편지의 핵심은 봉인 시점과 개봉 시점의 종가 비교인데, 외부 시세 API는 인증 · 호출 한도 · 점검으로 언제든 실패할 수 있었습니다.
02 · Why it was hard
어려웠던 이유
실패할 때 예시 가격으로 조용히 대체하면 화면은 멀쩡해 보여도 기록이 사실과 달라집니다. 장중 · 휴장일 · 마감 직후마다 어떤 종가를 확정으로 볼지도 정해야 했습니다.
03 · What I did
실행한 행동과 판단
비교 가격을 KRX 정규장 일봉 종가로 통일하고, 당일 종가는 마감 30분 뒤에 확정으로 보는 규칙을 만들었습니다. 실데이터 조회가 실패하면 봉인을 중단하고, 개봉 가격 조회가 실패하면 '확인 실패'로 남긴 뒤 다시 확인할 수 있게 했습니다.
04 · Result
결과
시세 모드(실데이터 · 데모)를 편지마다 영구 기록하고, 두 모드의 가격이 한 편지 안에서 섞이지 않게 했습니다.
06 — 결과
결과와 성과
- 2026-09-28 장중에 PLUG 실시간 체결 · 호가가 화면에 반영되는 것을 확인 (서버 수신 1,345건 / 전달 1,343건)
- 백엔드 테스트 44개와 프런트엔드 린트 · 빌드를 CI에서 통과
위 체험 데모는 서버 없이 브라우저 안에서 만든 예시 데이터로 동작하며, 실제 시세 · 기업 정보가 아닙니다. 실제 서비스는 NH투자증권 PLUG OpenAPI와 OpenDART를 호출하지만, 실시간 시세의 공개 재배포 조건을 확인하지 못해 공개 데모에는 실데이터를 쓰지 않았습니다. 작성한 기록은 이 브라우저에만 저장됩니다.
증권 API의 실시간 데이터를 서버에서 한 번만 받아 중계하고, 기록한 판단은 누구도 고칠 수 없게 만들었습니다.