# 04.28 UI 구상 및 기능 리스트업

<br><br>

# UI 구상 (앱뷰)

> 우선 배치와 컨셉만 잡은 상태. 디테일한 디자인, UI, 색상은 개선할 예정

## 메인(홈) 화면
<img src="https://i.imgur.com/5NWtmbD.png" alt="drawing" width="300"/>

- 토스를 모티브로 깔끔하면서 아기자기한 UI가 포인트
- 백그라운드 이미지는 일러스트를 배경으로
- 약간의 재미있는 웃긴? 요소를 추가
- **홈화면 첫화면에 넣을만한 괜찮은 문구 꾸준히 생각해보기**
- 각 페이지 하단에는 광고가 들어가고, 메인 페이지 하단에 파란색 버튼을 클릭하게 되면 2번 화면으로 넘어가 4개의 픽을 고를 수 있다.

## 메인에서 픽 버튼(코인하러가자?) 클릭했을 때
<img src="https://i.imgur.com/dBQds3H.png" alt="drawing" width="300"/>

- UI의 경우 캐러셀과 비슷한 방식으로 터치 슬라이드를 통해 선택
- 중앙에 보이는 화면 양옆과 뒤는 적절하게 opacity를 주어서 표현
- -> 구현하면서 방법 찾아야 할듯
- 각 매매법에 대한 이름과 설명은 그 자리에서 적절한 효과를 주어 나타나게 한다.
- 픽하기 버튼을 클릭 시 바로 3번째 로딩화면으로 넘어가며 정해진 시간(초)가 지나면 결과화면을 띄운다.

## 각 매매법 클릭 시 로딩
<img src="https://i.imgur.com/nJDs3xf.png" alt="drawing" width="300"/>
- 로딩 화면은 메인 사진에 각 매매법에 해당하는 동물이 나타나며 추가적으로 가능하면 애니메이션 효과를 준다.
- 매매법에 대한 이름과 아래에는 - 가 픽하는 중입니다, 혹은 더 좋은 재밌는 문구가 있으면 사용한다.
- 시간은 임의로 생각해봐야 할듯, 로딩하는 것을 일부러 보여주기 위한 용도가 더 클 듯?

## 결과 화면
<img src="https://i.imgur.com/hCHCloz.png" alt="drawing" width="300"/>

- 매매법과 아래 재미있는 유쾌한 문구를 삽입한다.
- 결과값으로 나온 코인에 대한 일러스트, 혹은 사진을 중앙에 띄워주면서 아래에는 코인의 이름
- 아래에는 설명이나 그래프로서 현재 위 테마에(매매법) 가장 적절한 코인에 대한 정보를 가능하면 시각적으로 제공한다.
- 아래 시각화 요소들 중 해당 코인픽커의 컨셉에 맞게 해당 코인에 대한 간략한 정보 시각화해서 보여줌
- 현재 거래량 순위(1~5위?)
- 그래프 (1일 or 1주일 가격 차트)
- 메이저 코인들 시총 순위?
- 김치 코인 거래량 순위?

<br><br>

# 기능 리스트업

### FE 기준
- 브라우저 단위 캐싱 (BE 서버에 API 최대한 적게 찌르도록)
- sessionStorage or localStorage 에 코인 정보 1분?정도 저장?
- 광고 최대한 노출시키는 좋은 방법?

### BE 기준

1. 시총 얻는 기능
- 코인마켓 캡에서 각 코인 시총에 대한 정보를 가져오는 기능
- https://coinmarketcap.com/api/documentation/v1/#tag/blockchain
- https://docs.coincap.io/#ee0c0be6-513f-4466-bbb0-2016add462e9

2. 전일대비 급등한 데이터를 얻는 기능
- 업비트에서 제공하는 전일대비 증가율 API 찔러서 받아오고, DB에 업데이트한 후 ORDER BY하여 클라에게 제공하기

3. 코인 시세 얻는 기능
- 업비트에서 제공하는 코인 시세 API 찔러서 받아오고, DB에 처리
- 논의해야 하는 것은 위에서 말한 **DB에 처리**임! 시세를 1분 주기로 받아와서 DB에 덮어씌울 것인지, 적재할 것인지? 덮어씌운다면 30분 혹은 1시간 주기로 따로 적재할 것인지(그래프 그리기 위한 용도)?

4. 스케줄링 및 DB 업데이트 기능
- 위 기능들에서 적용될 기능임. DB 제대로 설계하는 단계에서 어떻게 할지 정하기

5. 랜덤 뽑기 기능
- 위 기능들이 구현된 후 논의

# 그 외 논의사항

- 서버는 어떻게 할까?
1. 사내 서버
- 광고 붙이기 전까지 사내 서버로 만들기

2. 유료 서버
- 광고 붙을 때 유료 서버로 옮기기

<br><br>

# 다음주까지 할 일

- 스터디! 안하면 벌금이다~
- BE팀 따로 할 일
- ERD 설계
- API 설계 (URI 정도? 더 할 수 있으면 더 하기)

<br><br>

# 다음주 할 일

- 기술 스펙 정하기
- FE, BE 기술 스택 및 버전
- OS 스택 및 버전 (CentOS 갈까?), 프록시 여부
- DB (MySQL로 갈까?)