[SwiftUI] - TabView, Progress bar를 활용한 메인 화면 구성

현재 진행중인 택배 조회 앱을 개발하던 중 다음과 같은 메인 화면을 개발하게 되었다.

화면 구성을 보면

1. 하단에 탭 버튼을 클릭해 메인 화면, 택배 리스트 화면, 설정 화면으로 이동 가능

2. 좌우 스크롤을 이용해 현재 택배들의 위치 표시(애니메이션 활용)

3. 기타 정보들 표시

정도로 이루어져 있다. 

우선 하단 탭 버튼을 이용해 화면을 이동하는 것은 팀원이 알려준 자료를 활용해 쉽게 구현할 수 있었다. 

struct MainView: View {
    var body: some View {
        TabView {
            mainTabView
                .tabItem{
                    Image(systemName: "house")
                        .environment(\.symbolVariants, .none)
                }
            packListTabView
                .tabItem {
                    Image(systemName: "shippingbox")
                        .environment(\.symbolVariants, .none)
                }
            systemTabView
                .tabItem {
                    Image(systemName: "gearshape")
                        .environment(\.symbolVariants, .none)
                }
        }
        .padding(.leading, 20)
        .padding(.top, 20)
        .accentColor(ColorManager.primaryColor)
    }   
}

위의 코드는 각각에 해당하는 View를 따로 빼서 다음과 같이 mainTabView, packListTabView, systemTabView로 나타냈다.

(만약 좀 더 기초적인 내용을 알고 싶다면 하단의 링크를 참조하면 될 것 같습니다!!)

https://www.youtube.com/watch?v=5E_D9D8Z5nQ 

여기까지는 어렵지 않았지만 가장 어려웠던 부분은 애니메이션을 활용해 택배의 현재 위치를 표시해주고, 스와이프를 활용하는 것이었던 것 같다. (완성 화면은 하단에 첨부했습니다)

스와이프 부분도 tabView를 활용해 개발했다.(해당 부분은 위의 영상에서 보실 수 있습니다.)

TabView에서 ForEach를 활용해 각각의 스와이프 화면을 구성하였다. 간단히 나타나면 다음과 같이 사용할 수 있다. 

struct SliderTabView: View {
    var body: some View {
        let packageName: [String] = [
            "토리든 다이브인 저분자 하알루", "2번째 택배", "3번째 택배"
        ]
        let packageNumber: [String] = [
            "12345664343433", "343343545", "2453452345"
        ]
        
        TabView {
            ForEach(0..<packageName.count) { item in
		Text(packageName[item])
                Text(packageNumber[item])
            }
        }                             
        .tabViewStyle(PageTabViewStyle(indexDisplayMode: .always))
    }
}

 

그리고 택배 차가 이동하는 애니메이션은 progress bar를 활용했다. progress bar에 대한 내용은 다음 블로그를 참고해서 개발했다.

https://finsi-ennes.medium.com/how-to-build-a-progress-bar-with-swiftui-animations-fa7226d01eab

 

 마지막으로 가장 어려웠던 점은 디자인적인 부분에서 디테일을 표시하는 데 가장 많은 시간을 할애했던 것 같다. view의 cornerRadius가 몇인지, text의 font는 무엇인지 등 큰 부분부터 사소한 부분까지 고려해야 할 부분이 굉장히 많았다. 기존에 디자이너 없이 작업을 했을 때는 체계적인 절차가 잡혀있지 않아 주먹구구식으로 작업을 했다면, 해당 프로젝트를 진행하면서 이런 부분도 신경을 써야 된다는 것을 알게 된 것이 뜻깊은 경험 중 하나가 아닐까 싶다.

 

SwiftUI를 활용한 앱을 개발하면서 기존 StoryBoard 방식의 화면 구성의 단점과 장점을 점점 명확히 알 수 있을 것 같다.

가끔 layout을 개발할 때 StoryBoard의 장점인 직관성이 그립기도 했지만, 화면 구성을 수정하는 유지보수 측면에서 SwiftUI가 더 유용하다는 느낌을 받았다. 

또한, 기존에 StoryBoard로 작업을 했을 때 코드로 view를 구성하기보다 AutoLayout을 선호하였던 나로써 개발자보다는 디자이너 같다는 느낌을 받을 때가 많았는데, SwiftUI에서는 모든 view를 코드로 작업하면서 그런 느낌이 없어서 좋았던 것 같다.

아직은 회원가입 화면과 메인화면 밖에 구성하지 못했지만, 1개월 안에는 꼭 서비스를 완성하고 싶다.

 

완성 화면