시간관리 애플리케이션 '위치워치' 제작 일지 - (1) 마이페이지 디자인과 그래프

요즘 이것저것 많이 해보고 있는데,

그냥 제작만 해서는 경험들을 다 잊어버릴 것 같아서 약간이나마 기록 해 둘까 한다.

차피 아무도 안볼테니, 끄적이는 용도로.

일단 이 프로젝트는 학교에서 지원하는 CCP프로그램에 제출해서, 당선 되어 진행중인 프로젝트로

시간관리와 사회적 환원을 모토로 하는 애플리케이션이다.

사용자가 지정한 시간만큼의 집중을 하거나, 스마트폰을 사용하지 않는다면

사용한 시간에 비례해 포인트가 쌓이고, 그 포인트를 이용하여 기부를 할 수 있는 시스템.

우선적으로 iOS 앱으로 개발하기로 했다.

그래서 지난 한달간 edwith에서 제공하는 iOS 부스트 코스 강의를 들었고,

배운 것을 이용해 개발을 해 나갈 예정이다.

내가 맡은 부분은 디자인 및 마이페이지, 회원가입 뷰 제작.

마이페이지 뷰 디자인

마이페이지 프레임은 어도비 XD를 이용하여 간단하게 제작해 보았다.

상단에 프로필 사진과, 닉네임, 포인트 내역을 보여주고,

중간에는 내가 앱을 이용하여 집중한 시간을 그래프로 보여줄 예정이다.

그래프는 해당 일을 기준으로 지난 7일간의 데이터를 막대그래프로 보여준다.

꺾은선 그래프도 생각은 해봤는데, 일단 사용해봐야 알 것 같다.

마지막으로 하단에는 내가 기부한 내역을 볼 수 있게 디자인 했다.

설정페이지는 버전, 업데이트 , 공지 등의 내역을 표시할 예정이다.

그래프 구현하기

디자인에 맞춰서 간단하게 뷰를 제작했다. 진짜 그래프 구현... 너무 어려웠다.

그래프의 경우 Chart라는 라이브러리가 있어서 그것을 이용했다.

- Charts [https://github.com/danielgindi/Charts]

사용 방법은 아래 페이지를 참고했다.

- How to Create Beautiful iOS Charts in Swift[https://www.iosapptemplates.com/blog/swift-programming/ios-charts-swift]

다들 이런 라이브러리는 어떻게들 만드는건지....

암튼 기본 Chart는 스크롤, 확대 선택이 기본적으로 활성화 되어 있어서 옵션도 다 꺼줬다.

(찾느라 그냥 Enable 붙은 메서드는 다 쳐봤다..)

해당 부분 코드는 다음과 같은데, 아직 수정할 부분이 더 많긴 하다.

    func timeLineChart(dataPoints: [String], values: [Double]) {
        // 1. set data entry
        var dataEntries: [ChartDataEntry] = []
        for i in 0..<dataPoints.count {
            let dataEntry = BarChartDataEntry(x: Double(i), y: Double(values[i]))
            dataEntries.append(dataEntry)
        }
        
        let chartDataSet = BarChartDataSet(entries: dataEntries, label: nil)
        chartDataSet.stackLabels = self.date
        chartDataSet.barBorderColor = UIColor(red: 255, green: 0, blue: 0, alpha: 1)
        chartDataSet.barBorderWidth = 2.0
        chartDataSet.barShadowColor = NSUIColor(red: 0, green: 255, blue: 0, alpha: 1)
        chartDataSet.setColor(NSUIColor(red: 224/255, green: 207/255, blue: 232/255, alpha: 1))
        let chartData = BarChartData(dataSet: chartDataSet)
        let format = NumberFormatter()
        format.numberStyle = .none
        let formatter = DefaultValueFormatter(formatter: format)
        chartData.setValueFormatter(formatter)
        
        timeBarChartView.drawValueAboveBarEnabled = false;
        timeBarChartView.dragEnabled = false;
        timeBarChartView.pinchZoomEnabled = false;
        timeBarChartView.doubleTapToZoomEnabled = false;
        timeBarChartView.data = chartData
    }

지금 일지 쓰면서 느낀건데, Chart가 Select 되었을 때,

그 날의 집중시간을 표시해주면 좋겠다는 생각이 들었다.

구현해 봐야지.

아마도 마무리

글을 어떻게 써야 잘쓰는건지 모르겠다. 정리하다보면 차차 늘겠지

그래도 차트 라이브러리를 이용해보면서, Pod라는 것도 배웠다. 이건 다음에 쓸 예정.

처음에 부스트코스 강의를 들으면서는 그냥저냥 따라했었는데,

실제 앱을 만들기 시작하니, 계획이 너무 뒤죽박죽인 것 같아서 반성중...

요즘 프로젝트 이것저것을 같이 하는데, 무엇보다고 기획의 중요성을 느끼고 있다(ㅋㅋ)

다음 개발은 차트를 보기 좋게 수정하고, 더미데이터를 넣어서 기부 내역까지 같이 구현해 줄 예정.

'Projects > Witch Watch' 카테고리의 다른 글

Witch Watch 개발일기 (2) - 기획을 뒤엎었다. (0)	2020.09.07

서니서니