그래프 라이브러리 0. 기획, 자료구조

이번에 부스트캠프 그룹 프로젝트를 하면서 프로젝트 기획에 포함되어있는 그래프 라이브러리를 구현하기 위해 필요한 기획과 자료구조에 대해 정리해보았다. (project repo, library repo)

기획

우선, 우리 프로젝트 기획에 맞게끔 그래프 라이브러리를 구현하기 위해 필요한 기능들을 정리해보았고, 위와 같이 크게 두가지로 나뉘게 되었다. 심플모드와 상세모드. 심플모드는 단순히 그래프만 제공하고, 상세모드에서는 축과 터치 시 가격표가 오버레이 되는 기능을 제공한다. 여기서 상세모드를 먼저 구현하고, 심플모드는 상세모드에서 넣은 기능들을 제거하는 옵션을 추가하는 방법으로 구현하기로 하였다. 또한 이 라이브러리를 오픈소스로 배포하는것까지 목표에 두었다.

이를 토대로 구현 순서에 대해서 정의를 해보자면,

1. 커스텀 뷰를 만든다
2. 그래프 축을 그린다
3. 그래프를 그린다
4. 디자인을 입힌다
5. 터치 및 상호작용을 구현한다
6. 배포한다

위 순서대로 블로그 포스팅을 하고자 한다. 하지만 팀원들과 분업을 한 부분이 있기 때문에, 추후 포스팅에서 일부 부분은 약간 미흡한 부분이 있을 수 있다.

자료구조

interface ChartData {
    val x: Float
    val y: Float
    val valid: Boolean
}

우선 프로젝트의 UseCase에 맞게끔 데이터를 정의해보았다. x, y 좌표를 가지고 있고, valid는 해당 데이터가 유효한 데이터인지를 나타낸다. (우리 프로젝트에서는 품절인 경우에 valid가 false가 된다) valid가 false인 경우에는 해당 부분만 따로 그래프 라인의 색상을 변경할 수 있도록 하였다. 또한 x, y의 값은 기획에 맞게 Float으로 고정하게 되었다.

interface ChartDataset {
    val showXAxis: Boolean
    val showYAxis: Boolean
    val isInteractive: Boolean
    val graphMode: GraphMode
    val data: List<ChartData>
    val gridLines: List<GridLine>
}

기획을 기반으로 그래프 라이브러리에서 받을 데이터를 정의해보았다. 심플모드와 상세모드를 위해 X축, Y축의 활성화 유무, 그래프의 상호작용 유무, 그래프의 모드 (그래프를 보여줄 기간 선택), 데이터, 그리고 눈금선의 목록을 추가하였다.

enum class GraphMode {
    DAY,
    WEEK,
    MONTH,
    QUARTER
}

interface GridLine {
    val name: String
    val value: Float
}

결과적으로 차트 데이터를 이렇게 구축한걸 보면 많이 아쉽다는 생각이 든다. 처음 기획할 단계에서는 누구나 사용할수 있게끔 범용적인 라이브러리를 만들어 오픈소스로 배포하고자 하였으나, 프로젝트의 UseCase에 맞게끔 구축 및 구현하다보니 범용성이 떨어지는 라이브러리가 되어버렸다. 현재 X축은 시계열 데이터만 가능, 그리고 X, Y 데이터 모두 Float형만 지원하는 이상한 라이브러리가 된 상태이다. 이 부분은 추후에 리팩토링을 통해 꼭 개선하고 싶다.

다음 게시글에서는 커스텀 뷰를 만들고 초기 설정하는 부분에 대해 이야기하고자 한다.