산업&테마별 종목 분류 웹서비스 제작 (1편)

0. 배경

햇수로 6년간 주식을 해오면서 반복적으로 하는 일이 있다.

 

'당일 상한가 및 특징주 정리하기'

 

이 작업을 해오며 미래에 예측할 수 있는 눈을 기르고 '싶었다'..

 

이번 내일배움캠프 프론트엔드 과정을 참가하며

자바스크립트와 HTML, CSS 등 웹페이지 제작에 필요한 요소들을 배우고 있다.

 

여기서 배운 것들을 내가 하는 루틴에 적용해서

반복되는 일을 자동으로 처리할 수는 없을까?

하는 호기심에 시작해보았다. 사실 귀찮았다.

 

하는 김에 다른 사람들에게도 도움이 될 수 있을 것 같아

서버도 만들고 트래픽도 체크해보는 걸 도전해볼 계획이다.

 

 

1. 기획

전체 가이드라인을 먼저 잡고 시작하려니

경험이 짧은터라 아이디어가 떠오르지 않아

시작 자체를 못하고 있었다.

 

그래서 우선 1페이지부터 기획을 해보았다.

하나하나 기획과 구현을 병행하며 진행할 것이다.

 

첫 화면은 사용자가 직관적으로 이해할 수 있게

간결하게 담겨야한다고 생각했다.

 

담을 정보가 많지만,

한꺼번에 보여주면 사용자 입장에선 '무엇부터' 봐야할지 모르기 때문이다.

하나하나 큐레이팅하듯이 선택적으로 보여주기로했다.

 

분석의 기본인 탑다운, 바텀업 두 가지 방식을 차용해서

먼저 사용자가 원하는 종목을 검색할 수 있는 인풋바와

산업&테마별로 종목 리스트를 찾아볼 수 있는 네비바를 구현하기로 했다.

 

 

 

2. 시안

피그마를 이용해서 간단하게 만들어보았다.

전체적인 아웃라인을 머리로만 짚고 넘어가는 것과 차이가 크기 때문이다

 

 

 

3. 기능

(1) 개요

비율 단위를 사용하여 반응형으로 구현

 

(2) 사용자가 원하는 종목을 검색할 수 있는 인풋바

 

(3) 산업&테마별로 종목 리스트를 찾아볼 수 있는 네비바