미국, 한국 주식 모의 투자 사이트 만들기

안녕하세요. 이번엔 주식 공부를 하다가 모의 투자 사이트를 만들면 어떨까 하는 생각이 들어서 만들어 보게 되었습니다.
역시 visual studio code를 사용했습니다. 구조를 간단하게 보자면 아래와 같습니다. API는 Finnhub를 사용하고 Yahoo Finance도 같이 사용하였습니다. 전체 코드는 맨 아래에 Github 주소로 올렸습니다.

 

[파일 구조]

 

사이트를 들어가면 아래와 같이 로그인 화면이 보이게 됩니다. 회원가입과 로그인은 간단하게 구현을 했습니다. 회원가입을 완료하고 로그인을 하면 기본으로 USD: 100000$와 KRW: 10000000￦을 지급합니다.

 

[로그인,회원가입]

 

[첫 페이지]

오른쪽 상단을 보시면 보유 달러와 보유 현금이 처음 시작할 때는 100000$와 10000000￦일 것입니다. 
지금은 제가 누적 자산 추이 때문에 3개의 계정을 주식 매수를 해둔 상태입니다. 이 부분은 뒤에 설명해 드리고,
총 7개의 부분으로 나눠서 설명해 드리겠습니다.

 

1. 관심 종목 추가/조회
2. 관심 종목 리스트
3. 주식 차트(1,2)
4. 최근 거래 내역
5. 보유 종목 비중
6. 오늘의 수익률(%), 총 수익률(%)
7. 트레이더 랭킹

 

[관심 종목 추가/조회]

미국 주식은 검색/추가를 하고 싶으면 그 주식의 코드를 넣어주시면 됩니다. 한국 주식은 KRX 정보 데이터시스템 사이트에서 종목 코드 및 주가 정보를 다운받아서 kr_stocks_data.json 파일에 아래 코드로 작성하였습니다. 그렇기 때문에 검색란에 한국 주식은 주식 이름으로 검색하면 나옵니다.

{
    "symbol": "",
    "name": "",
    "market": "KOSPI"
  }

 

[ 관심 종목 리스트 ]

관심 종목 추가를 해서 넣으면 미국 주식과 한국 주식을 구분해서 나눠 놨고 매수/매도 퍼센티지를 누르면 그 퍼센티지만큼 주식의 개수가 뜨게 되면 매수,매도를 눌러서 거래하면 됩니다. 주식 이름은 주식 종목 코드로 나타나게 됩니다.

 

[ 주식 차트(1,2) ] 

 

주식 이름을 누르면 위에 사진같이 오늘 자로 시간별 상세 차트가 나오고 차트 버튼을 누르면 일별 시세 그래프가 나오는 기능입니다. 

 

[ 최근 거래 내역 ]

관심 종목으로 추가하고 매수 혹은 매도하게 되면 최근 거래 내역이 최신순으로 쌓이게 됩니다. 하지만 중요한 부분이 하나 있습니다. 미국 주식과 한국 주식은 각각의 장시간이 있습니다.

미국 주식: 23:00~06:00
한국 주식: 09:00~15:30

저 장시간 외에도 사이트 내에서 매수와 매도를 할 수가 있습니다. 주식은 장시간 제외하고 주가가 변동되지만 매수와 매도를 장 외 시간에 한다면 종가 기준으로 가격이 고정되기 때문에 차이가 있을 수 있습니다. 하지만 본 장시간에는 주가가 변동하고 정확한 가격으로 매수와 매도를 하여 거래를 할 수 있습니다. 

 

[ 보유 종목 비중 ]

보유 종목 비중을 한국 주식과 미국 주식 두 개의 차트로 나눴고 가격을 기준으로 차트에 적용이 됩니다. 사용자가 자신의 주식을 편하게 볼 수 있도록 하였습니다.

 

[ 오늘의 수익률(%), 총 수익률(%) ]

 

오늘의 수익률과 총수익률은 총 두가지 중에서 고민했습니다. 실시간으로 주가가 변동되는 상태에서의 수익률로 표시할 것인지 아니면 매도를 기준으로 수익률이 발생하도록 할 것인지 중에서 골랐습니다. 저는 후자로 선택하였고 가지고 있는 주식을 매도 했을 때만 적용이 됩니다. 추가로 수수료를 0.001로 계산하였습니다.  총자산은 가지고있는 달러+ 1달러당 1350원으로 잡아서 총 자산을 계산합니다. 총 자산은 매도 기준으로 바뀌게 됩니다.

총자산을 그래프로 확인 할 수 있는 누적 자산 추이입니다. 이 부분은 아이디를 만들어서 거래하고 2~3일 정도 후에 그래프로 나타낼 수 있습니다. 

[트레이더 랭킹]

 

여러 사용자의 수익률 랭킹입니다. 기간을 정해서 모의 투자 대회를 여는 것도 하나의 이벤트가 될 수 있을 것 같습니다. 

 

github 주소: https://github.com/aerfdad/Mock-Investment-Site

GitHub - aerfdad/Mock-Investment-Site

감사합니다!