[암호화폐 거래소 앱 만들기] 프로젝트 시작 및 첫 화면 설계하기

학습했던 MVVM과 RxSwift를 활용해서 프로젝트를 진행하기로 했어요!

여기에 소켓 통신을 사용해보기 위해 암호화폐 거래소 앱을 주제로 선정했어요.

기본적으로는 클론 코딩의 형식을 갖고, 필요에 따라 조금씩 변화를 주며 구현할 계획이에요.

 

프로젝트 GitHub Repository

 

3인으로 팀을 구성해서 프로젝트를 진행했어요 :)

 

목표는 우선 메인화면과 실시간 호가 화면 등 총 3개의 화면으로 잡았는데 이번 글에서는 메인 화면 설계에 대한 글을 작성하려고 해요.

 

저는 앱을 설계하기 위해 아래와 같이 메인 화면을 분석했어요.

 

 

1. SearchBar

SearchBar는 NavigationBar에 넣는 방식으로 구현하는 것이 좋을 것 같다고 생각했어요. 

서치바    버튼    버튼    버튼 

위와 같이 4개의 요소를 stack처럼 쌓아 나가는 방식을 생각했어요.

 

2. Segmented Control

선택된 옵션의 색깔만 검은색으로 변경하며 언더바(_)를 추가하는 구조였어요.

가장 중요한 것은 어떤 요소가 선택됐는지를 추적하여 SegmentedControl을 소유한 ViewController가 선택된 값을 알게 하는 방법이라고 생각해요. 이 과정을 Rx를 사용할 계획이에요.

 

3. 변동률 기간 설정

Bottom Sheet를 구현해서 어떤 결과물을 보여줄지 옵션을 선택하는 화면이에요.

현재 사용하는 API에서는 이 옵션을 제공하지 않아요.. 아쉽지만 BottomSheet는 Deprecated 하고 이 기능과 버튼 자체를 없애야 해요🥲

 

4. Sort 바 구현

기준 4개를 사용하여 터치 횟수에 따라 오름차순, 내림차순 여부가 결정돼요. FilterView를 만들어 Sort하는 로직을 추가해야 할 것 같은데 메인화면 구현 우선순위에서 밀릴 것 같아요.

 

5. 검색 결과 뷰

테이블 뷰를 통해서 구현할 예정이에요.

각 Cell에 보이는 정보는 회의를 통해 결정할 계획이에요.

아쉬운 것은 공개 API에서 제공하는 정보가 너무나 한정적이라 원하는 만큼 정보를 못보여줄 것 같아요.

 

6. Tab Bar

TabBarController를 구현해요. 그리고 5개의 ViewController를 갖게 해요. 

5개의 탭을 모두 사용할 것은 아니지만 Dummy 값으로라도 우선 구현해놓을 예정이에요.

하나의 TabBar에서 5개의 ViewController 인스턴스를 직접 생성하여 갖는 구조는 마음에 들지 않지만 이번 프로젝트에서는 Factory 등을 사용할 것 같지는 않아요.

 

대략적인 분석과 흐름을 가지고 구현할 계획이에요.

부족한 내용들은 계속 보충해볼게요! :]