README

빗썸테크캠프 야곰 아카데미

개요

프로젝트 목표

빗썸 Public API 사용한 앱 구현

프로젝트 기간

2022.02.21 ~ 2022.03.13

팀원 소개

오동건(DonggeonOh)	김진영(제로)	황제하(허황)
[email protected]	[email protected]	[email protected]
https://github.com/DonggeonOh	https://github.com/z3rosmith	https://github.com/HJEHA

프로젝트 기술 스택

• 아키텍쳐
  • MVC
• 의존성 관리도구
  • Swift Pakage Manager (SPM)
• 라이브러리
  • Charts
• 데이터베이스
  • Core Data
• UI
  • 1 Storyboard, 1 ViewController
  • Modern collection view

앱 구동 화면

코인 리스트 화면

라이트 모드	다크 모드

코인 상세 화면(차트)

라이트 모드	다크 모드

코인 상세 화면(호가)

라이트 모드	다크 모드

코인 상세 화면(체결 내역)

라이트 모드	다크 모드

입출금 현황 화면

라이트 모드	다크 모드

더보기 화면

라이트 모드	다크 모드

주요 기능 소개

네트워크

코어데이터

• 코인 상세 화면의 차트
• 코인 상세 화면 오른쪽 상단의 차트
• 관심 코인 목록

코인 리스트 화면

• 관심/원화 탭으로 관심/원화 셀로 스크롤 기능

  유저가 터치를 한번 더 해서 관심목록에 접근할 필요 없이 한 화면에서 관심/원화 목록에 접근할 수 있도록 하기 위해서 한 화면에 관심/원화 목록을 넣었음

• 코인명 및 심볼로 검색 기능
• 인기순(최근 24시간 거래금액 기준), 이름순, 현재가순, 변동률순 정렬 기능
• 셀 슬라이드 시 즐겨찾기 추가
• 현재가 및 변동률 실시간 업데이트

코인 상세 화면

• 웹소켓을 이용한 실시간 데이터 반영(현재가, 변동가, 변동률)
• 차트 구현 (최근 3개월 시가 기준)

코인 상세 화면(차트)

• 시간(1분, 10분, 30분, 1시간, 1일) 별 차트 데이터 표시
• 차트의 캔들스틱 터치 시 정보(시가, 고가, 저가, 종가) 표시
• 웹소켓을 이용한 실시간 캔들스틱 데이터 반영

코인 상세 화면(호가)

• 매수, 매도 영역 분리
• 웹소켓을 이용한 실시간 데이터 반영
• 매도, 매수의 전체 수량을 표시
• 매도 또는 매수 셀만 화면에 표시될 경우 반대 주문의 최저가, 최고가 뷰 노출

코인 상세 화면(체결 내역)

• 웹 소켓을 이용한 실시간 데이터 반영

입출금 현황 화면

• 코인의 입출금 현황 상태 표시
• 코인명, 심볼 검색 시 필터링
• 현황 상태에 대한 전체, 정상, 중단 모아보기
• 코인 이름, 입금, 출금 순으로 정렬

더보기 화면

• 팀원들의 정보 및 라이센스를 한 화면에 간단하게 표시

트러블 슈팅

네트워크

코어데이터

• CoreDataManger를 어떻게 관리할 지
  • fatalError

코인 리스트 화면

• 전체코인목록(원화)에서 관심코인목록으로 Coin을 복사를 할 경우 diffable data source에서 오류를 내는 문제 발생

  Coin을 그대로 복사하면 Coin의 hash value가 동일하기 때문에 Coin을 새로 생성해서 가진 UUID값이 다르도록 하게 해서 해결하였음

• 관심 버튼을 누르고 data source에 snapshot을 apply하여도 관심 버튼 변화가 반영이 안되는 문제

  Diffable data source는 hash value를 기준으로 변화를 감지하는데, 이때까지는 item identifier을 Hashable하게 만들 때 UUID만 사용했기 때문에 버튼의 select 상태 감지를 못하는 것이었음 item identifier를 Hashable하게 만들 때 item identifier의 property 모두를 사용하도록 hash(into hasher:) 함수와 static func == 함수 정의를 아예 빼버림으로서 해결

• coinListCollectionView의 datasource 클래스가 코인의 정렬과 같은 기능을 담당할지 고민

  datasource클래스가 정렬기능을 가지면 ViewController의 일을 줄일 수 있기 때문에 좋을것이라고 예상 더 나아가 datasource클래스가 통신 기능을 가지면 굳이 MVVM패턴을 사용하지 않고 MVC패턴에서도 ViewController의 비대화를 막을 수 있을 것이라고 예상

• 처음에 현재가 정하려고 전체 코인목록에 있는 코인마다 다 transaction api를 호출(192번)하려고했음. 하지만 보여지는 셀만 통신하면 된다고 생각하여 보여지는 셀만 통신을 하는걸로 구현. 하지만 또 그렇게하니 전체 기준으로 정렬할 수가 없었음. 다시 192번 호출하는거로 바꿈, 192번 호출 후 모두 완료됐음을 확인을 어떻게 할것인지 고민

  192번의 비동기 작업을 하나의 태스크로 만들어 줄 수 있는 DispatchGroup을 이용하여 작업의 완료를 확인할 수 있었음

• 코인목록을 sort하는 함수에서 소트할 리스트를 인자로 넣고 리턴값으로 결과를 받아서 다시 소트할 리스트에 대입하는 방식을 썼었는데, 코드를 간결하게 하기 어려움이 있었음

  Array의 private extension으로 filter와 sorted함수를 구현하여 코드를 간결화 시킴

• 코인목록을 스크롤할때 섹션 헤더 뷰가 걸치는 시점에 관심/원화 탭 중 하나가 선택되도록 해야하는데 섹션 헤더 뷰가 걸치는 시점을 알아내기가 어려움

• 현재가를 불러오는 부분의 DispatchGroup적용이 잘 안되서 방법 찾는 중

• 웹소켓 적용시 코인 목록화면이 계속 위로 조금씩 올라가는 현상 해결방법 고민 중

• 웹소켓 적용 시 스크롤 올라가는 버그 해결

  전체를 data source에 apply 하지 않고 보이는 visible cell만 apply함으로서 해결

코인 상세 화면

코인 상세 화면(차트)

• Candlestick API의 가장 최신 데이터의 경우 시간에 따라 기준과 다른 경우에 대한 문제

  예를들어, 24시간을 기준으로 하면 제일 마지막(최신) 데이터는 이전 12시(자정)을 기준으로 한 데이터가 아닌 1시간을 기준으로 한 데이터가 넘어왔습니다. 실시간으로 업데이트 하기 위해 WebSocket Ticker API를 사용하여 데이터를 가져올 땐, 현재 시간에 대한 데이터를 넘겨받기 때문에 최신 캔들스틱에 대한 업데이트를 어떻게 해야할 지에 대한 고민을 하였습니다. 이 방법을 해결해주기 위해서 최근 데이터와 실시간으로 받은 데이터의 time을 Epoch timestamp로 변환한 후 둘의 타임스탬프 간 차이를 이용합니다. 그리고 각 단위(30분, 1시간 등..)마다의 타임스탬프를 계산 후 둘 간 차이 값을 비교하여 업데이트 혹은 캔들스틱 데이터를 추가해주었습니다.

• Charts 라이브러리를 사용하면서 X축을 날짜로 커스터마이징 할 때의 문제점

  X축을 날짜로 커스터마이징을 해줄 때 DefaultAxisValueFormatter 클래스를 이용하여 커스텀을 해줄 수 있습니다. 하지만, 해당 클래스로 커스터마이징을 하게 되면 캔들스틱의 캔들바가 보이지 않는 문제가 생겼습니다. 이유를 찾아보니, X축을 Epoch time으로 잡았는데 X축의 값이 너무크면 데이터를 표현할 뷰의 넓이가 조그맣게 된다는 답변을 찾았습니다. 따라서, X축을 배열의 인덱스로 변경하고, 데이터 포맷은 해당 인덱스의 Epoch timestamp 값을 저장하여 IndexAxisValueFormatter를 통해 커스터마이징 하였습니다.

• 처음 데이터를 갱신 할 때 그래프에 분포한 전체 범위를 보여주는데, 최근 부분으로 확대하여 보여주고 싶은 고민
  • 기존에는 그래프 스케일링을 고정으로 확대하여 보여주었습니다. 여기서 문제점은 각 코인마다의 데이터 양이 달라 확대해줘야 하는 값이 달라야 하였습니다. 간단하게 스케일 X, Y 값의 보정 값을 정하여 데이터 갯수 * 보정 값을 스케일로 잡았습니다. 각 코인마다 너무 확대되거나 너무 축소되는 문제를 해결하였습니다.

코인 상세 화면(호가)

• 웹 소켓으로 들어오는 데이터를 가공하는 방법

  Orderbook API(Bithumb Public API)로 호가 데이터를 DataManager에 셋업했습니다. Orderbookdepth 웹소켓으로 새로운 호가 정보와 DataManager의 호가 데이터를 딕셔너리 형태로 가공(가격[key], 수량[value]) 가공했습니다. 딕셔너리로 가공한 두 데이터를 딕셔너리 기본 메서드인 merge 이용해 같은 가격[key]를 가진 데이터가 존재할 경우 웹소켓을 통해 새로 들어온 수량[value]을 사용해 실시간으로 데이터를 반영할 수 있도록 가공했습니다. filter로 수량이 0인 데이터는 거르고 dropLast 메서드로 데이터의 개수가 30개가 넘지 않도록 했습니다.

• 매수 최고가, 매도 최저가 뷰 화면 노출

  호가 화면을 스크롤하다 보면 매도 또는 매수 셀만 화면에 노출되게 됩니다. 그럴 경우 반대 주문에 대한 정보를 알 수 없어 매수 최고가, 매도 최저가 데이터를 화면에 보여주면 거래량에 이점이 있을 것 같다는 생각을 했습니다. 호가 화면의 컬렉션 뷰의 delegate 메서드 중 scrollViewDidScroll를 이용해 스크롤될 때마다 컬렉션 뷰의 visibleCells를 이용해 현재 화면에 보이는 셀의 목록을 가져오고 셀의 아이템(Model)의 타입(매수, 매도)의 개수를 검사하여 주문의 반대되는 뷰를 노출시키도록 구현했습니다.

코인 상세 화면(체결 내역)

입출금 현황 화면