[Swift] '지구 온도계' 프로젝트(2)

Erick·2022년 12월 14일

'지구 온도계' 프로젝트

목록 보기

2/4

'지구 온도계' 프로젝트(2)

길어지는 프로젝트

프로젝트를 시작하고 어느새 두 달이 지났네요.. 이쯤 되면 제가 두 달마다 블로그를 쓰는 건 아닐까요?
12월 초에는 끝날 줄 알았던 프로젝트가 늦어지고 늦어져 아직 진행 중에 있습니다. 그동안 프로젝트의 초기 디자인과 기본적인 ui 구축 그리고 API 연결을 진행했고 아직은 그 작업을 계속해서 하는 중입니다.

디자인

디자인을 담당하는 팀원이 '피그마'라는 플랫폼을 써 본 적이 있다고 하여 '피그마'를 활용하여 디자인하고 저희는 그것을 보고 ui 구축을 하게 되었습니다.

위 그림이 최종 선택된 '지구 온도계'의 디자인입니다.
가장 위에 뷰가 '지구 온도계'의 아이덴티티와도 같은 현재까지 상승한 지구의 온도를 나타내는 뷰입니다.

클릭을 하고 들어가면 위와 같이 연도별 상승 온도와 '파리협정'에 대한 설명이 나와있습니다.

파리협정은 기후변화를 인류가 직면한 위기로 인식하고 이를 대응하기 위해 전 세계가 뜻을 모은 국제조약입니다.

그 외에 디자인과 기능들은 다른 날씨 앱과 비슷하게 디자인하였습니다.

WeatherKit

저번 포스팅에서도 알 수 있듯 첫 기획 당시에는 날씨 Open API를 사용해서 날씨 데이터를 받아오려고 했습니다.
하지만 회의 조금 더 해보고 날씨 API를 써보는 것도 좋지만 WWDC 2022에서 발표한 WeatherKit을 사용해 보면 어떻겠냐라는 의견이 나와 API로 데이터를 받아오는 것이 아닌 WeatherKit을 사용하여 데이터를 받아오는 것으로 방향을 바꾸었습니다.

WeatherKit을 사용하는 것은 쉽지 않았습니다.
시뮬레이터와 Xcode의 버전 문제로 인한 에러, CLLocation 설정 문제 등 어려 문제가 있었지만 지금까지와는 다르게 자료가 많지 않아, 이를 해결하는 데 더 많은 시간이 걸렸습니다.
학업과 병행하며 프로젝트를 하다 보니 찾아봤던 문제를 또 찾아보고 등 시간 낭비가 더 길어졌고 일주일은 WeatherKit 문제만 해결했던 것 같습니다.

//서울의 좌표
let seoul = CLLocation(latitude: 37.5666, longitude: 126.9784)
//날씨 데이터 저장
var weather: Weather?
//WeatherService 선언
let weatherService = WeatherService.shared
        
DispatchQueue.main.async {
    Task {
        do {
            self.weather = try await weatherService.weather(for: self.seoul)
        } catch {
            print("error")
        }
    }
}

결론적으로 사용한 WeatherKit 코드입니다. 코드는 처음 Apple 개발자 문서에 가져온 그대로이고, 에러는 Xcode 버전 업데이트와 info.plist에서의 권한 설정 그리고 .shared으로 접근하니 해결되었습니다.

진행정도

뷰컨트롤러와 뷰 터치

기본 뷰컨트롤러에는 스크롤뷰를 올려 휴대폰 액정 비율이 작아짐에 따라 생기는 화면 잘림을 해결하였습니다.
스토리보드에 오토레이아웃 정리를 쉽게 하기 위해 버튼이 아닌 뷰 위에 레이블과 이미지를 올리는 방식으로 진해하였고 다음 화면으로의 전환을 위해 뷰를 터치할 수 있도록 만드는 코드와 제스처를 추가해 주었습니다.

//view를 클릭 가능하도록 설정
self.firstview.isUserInteractionEnabled = true
//제쳐스 추가
self.firstview.addGestureRecognizer(UITapGestureRecognizer(target: self, action: #selector(self.firstViewTapped)))

//첫번째 뷰를 눌렀을 때
@objc func firstViewTapped(_ sender: UITapGestureRecognizer) {
    performSegue(withIdentifier: "showFirstView", sender: sender)
}

상승온도 슬라이더

첫 번째 뷰로 들어가면 아래와 같은 화면이 나오는데(백그라운드 배경은 아직 추가하지 않았습니다.)
슬라이더를 바꾸면 연도에 따라 상승 온도가 나오도록 기능을 추가해 주었습니다.

슬라이더가 바뀜에 따라 1950년부터 2021년까지 상승 온도를 나타내는 코드입니다.

@IBAction func sliderChanged(_ sender: UISlider) {
    let year = 1950 + Int(sender.value * 71)
    yearLabel.text = "\(year) 년"
    tempLabel.text = temp["\(year)"]
    dates = year
}

하프 모달 캘린더

캘린더 뷰를 누르면 크기에 맞게 모달을 중간 크기로만 올라오도록 설정하였습니다.

//모달의 높이를 중간으로 설정
if #available(iOS 15.0, *) {
    if let sheetPresentationController = sheetPresentationController {
        sheetPresentationController.detents = [.medium()]
    }
}

그 외에 기능은 계속해서 구현 중입니다.

마치며

제가 학업과 병행하며 프로젝트를 진행했고, 다른 팀원들도 회사 및 학교로 인해 프로젝트에 집중력이 많이 떨어져 예상보다 프로젝트가 길어지고 있습니다.
(WeatherKit으로 인한 시간 소요도 컸던 것 같네요..)
1월에는 새로운 팀 프로젝트도 시작해 보고 싶어서 12월 중으로는 기능 구현을 모두 마무리하고 돌아오겠습니다.