SwiftUI / Team Project

오늘은 팀 회의를 통해 사전캠프 기간 동안 팀 프로젝트로 구현해 볼 UI를 결정하고, 이를 SwiftUI로 일부 구현해 보았다.

-UI 선정-

• 구현할 UI는 팀원과의 회의 끝에 CoffeeShop UI를 구현하기로 결정
• 각 팀원별로 SwiftUI, UIKit, Storyboard 등을 통해 UI를 구현
• 추후 GitHub를 통해 취합하여 하나의 프로젝트화 계획
  

  Coffee Shop App UI Kit Concept Image

---

-작업 진행-

• 개발 언어: SwiftUI
• 개발 환경: Xcode
• 제외한 기능: 로그인, 회원가입, OTP, 로케이션 등
• 제외된 기능은 UI만 구현 후 추후에 구현여부 결정

금일 구현한 뷰(SplashScreenView, StartedView, LogInView)

---

View Review

1. SplashScreenView
스플래쉬 스크린 뷰는 앱을 실행 시 가장 먼저 사용자에게 보여지는 화면으로, 메인 뷰가 보이기 전 실행되고 일정 시간이 지난 뒤 메인화면으로 자동으로 넘어갈 수 있도록 구성하였다.
별도의 swift 파일을 생성하고, 메인 뷰가 되는 ContentView 에서 SplashScreenView를 불러오도록 하였다.
이 때, 현 뷰의 상태를 파악하기 위해 열거형과 Switch문을 통해 뷰가 전환되도록 하였다.

import SwiftUI
enum CurrentState {
	case loading, success, login
}

struct ContentView: View {

    @State private var state: CurrentState = .loading    
    
    var body: some View {
    
    	Switch state {
        case .loading:
        	SplashScreenView()
            	.onAppear(perform: {
                	// 스플래시 스크린 뷰가 켜지면 3초 후 state 값을 변경하여 뷰 변경
                	DispatchQueue.main.asyncAfter(deadline: .now() +3) {
                    	withAnimation {
                        	self.state = .success
                        }
                    }
                })
         // 후략...
        }
    
    }    
}

---

StartedView
스타트 뷰는 스플래시 스크린 뷰가 사라지면 가장 처음에 보일 뷰이다.
앱에 대한 설명이 있고, Get Started 버튼을 통해 로그인 뷰로 이동할 수 있다.
처음엔 Get Started 버튼을 Navigation View로 구현할까 싶었지만, 피그마의 화면을 보면 네비게이션 뷰를 만들면 자동으로 생성되는 < Back버튼이 없음을 알 수 있었다.
때문에 네비게이션 뷰가 아닌, 스플래시 스크린 뷰를 구현할 때 사용한 Switch문을 한번 더 활용하기로 하였다.
또, 스타트 뷰에서 버튼을 누르면 LogInView로 이동되도록 구성하였다.

import SwiftUI

struct StartedView: View {
	// ContentView의 @State 값을 변경하기 위해 바인딩 선언
	@Binding var state: CurrentState
    
    init(state: Binding<CurrentState> = .constant(.loading)) {
    	_state = state
    }
    
    var body: some View {
    	// 전략...
        Button(action: {
        	print("Get started button click")
            withAnimation {
            	// Get Started 버튼을 누르면 로그인 뷰로 이동
            	self.state = .login
            }
        }) {
        	Text("Get Started")
            	.foregroundColor(.white)
                .font(.system(size: 15))
                .fontWeight(.medium)
                .frame(width: 320, height: 35)
                .background(Color.coffee) // 커스텀 ColorSet
                .cornerRadius(10)
        }
    	// 후략...
    }

}

---

LogInView
로그인 뷰는 스타트 뷰에서 버튼 트리거를 통해 넘어오는 화면이다.
현재는 UI만 구성해두어 추후에 버튼 트리거를 통해 다음 뷰로 넘어가도록 구현할 계획이다.
특히 아래의 구글과 페이스북을 통한 로그인은 해당 페이지로 이동만 하도록 구현할 계획이다.

---

결과물

---

-오늘의 학습 후기-

오늘은 팀 프로젝트로 진행할 UI를 선정하고, 이를 SwiftUI로 구현해보는 시간을 가졌다.
아직은 초반이라 큰 막힘없이 진행하고 있지만, 다음 뷰를 진행할 수록 난이도가 올라갈 것 같아 걱정이 된다.
또, 지금은 SwiftUI로 구현 중이지만, 본 학습에 들어가면 아마도 Storyboard로 앱을 구현하게 될텐데 지금처럼 잘 해낼 수 있을지 걱정이 된다.
스토리보드도 따로 시간을 내어 공부를 할 필요성을 느꼈다.