[SwiftUI Playgrounds] 스위프트 플레이그라운드#2 (애플 디벨로퍼 아카데미 MC1)
기획한 앱: 짐챙
개발배경
애플 디벨로퍼 아카데미에서 짐챙기는 앱을 만들었다. 팀원들과 여행을 어떻게하면 더 행복할 수 있을까라는 주제로 이야기를 나누었다. 자료조사와 인터뷰를 통해서 여행준비단게에서 힘들어하는 사람들을 알아보았고 그 중 짐챙기는 일이 가장 불안한 요소로 꼽혔다. 그래서 이 앱을 기획하게 되었다. 바로 짐 체크리스트를 만들어 주는 앱이였다.
기획 중 어려웠던 것
앱을 기획하는 것은 처음이였고 서비스를 개발하기 이전 그냥 주제를 가지고 자유롭게 이야기하는 형식으로 문제점을 찾는 것도 아닌 그냥 궁금한 것들 그냥 탐구하고 싶은 것들을 찾으면서 기획이란 것을 생각하지않고 이야기를 나누었다. 예전 웹개발을 해보고 서비스개발을 조금이라도했던 내 입장에서도 개발을 안해본 사람 입장에서도 막연히 이야기를 하려니 어려웠던 것 같다. 하지만 오히려 기획이라는 생각을 버리고 얘기를 하니 틀에 박힌 생각보다 폭 넓게 많은 이야기를 나눈 것 같아서 신기했다.
개발과정
내가 결국 가장 기대했던 것은 개발에서 구현이였다. 디자인보다는 이게 어떤식으로 작동하는지에 대해 관심이 많았던 것 같아서 기대되었다. playgroud를 사용하여 구현을 해보았다. 내가 개발하면서 필요한 것은 check버튼, 페이지가 넘어가는 네비게이션, 그리고 체크된 항목을 리스트에 저장하고 보여주는 것들, crud를 활용한 리스트가 들어갔다.
네비게이션 활용
화면을 넘기는 것은 네비게이션스택과 네비게이션 링크를 활용하였다. 덮어질 화면을 네비게이션 스택으로 묶고 안에 네비게이션 링크를 만들어 주었다.
import SwiftUI
struct StartView: View {
var body: some View {
NavigationStack{
VStack {
Text("짐챙")
.font(.system(size: 130))
.multilineTextAlignment(.leading)
.padding(.bottom, 230) // 제목과 버튼 사이에 간격 추가
NavigationLink(destination: GenderView()) {
Image(systemName: "chevron.right")
.font(.largeTitle)
.padding()
.background(
RoundedRectangle(cornerRadius: 10)
.foregroundColor(.blue)
)
.foregroundColor(.white)
.padding(.bottom, 30)
}
Text("화살표를 눌러 시작하기")
.padding(.bottom, 300) // 버튼 패딩 추가
.foregroundColor(.gray) // 텍스트 색상 조정
Text("Designed by SSan") // 작고 연하게 텍스트 추가
.font(.caption) // 텍스트 크기 조정
.foregroundColor(.gray) // 텍스트 색상 조정
.padding(.bottom, 50) // 텍스트와 버튼 사이에 간격 추가
}
.padding(25) // 전체 내용을 패딩 처리
}위의 코드처럼 네비게이션 스택으로 모두 묶어주고 링크로 넘어가게 했다.
구조체(struct) 활용
처음에 구조체가 뭔지 잘 몰랐다. 그래서 공식문서들과 챗지피티를 활용해서 알아보았다.
struct는 객체를 생성하고 조작할 때 사용할 수 있었다. 스위프트에서는 struct를 활용해서 만들 수 있었다. 데이터구조를 만들고 그것을 쉽게 활용할 수 있었다.
import SwiftUI
struct Userfeature {
var mountain: Bool
var beach: Bool
var city: Bool
var park: Bool
var valley: Bool
var desert: Bool
var swim: Bool
var workout: Bool
var surf: Bool
var camping: Bool
var hiking: Bool
var cycle: Bool
var jogging: Bool
var ski: Bool
var motorcycle: Bool
var gender: Int
var nation: String위 코드 처럼 변수와 그것들을 하나의 Userfeature라는 것으로 묶어둘 수 있었다.
import SwiftUI
struct GenderView: View {
@State var custom: Userfeature = Userfeature
(mountain: false, beach: false, city: false,
park: false, valley: false, desert: false,
swim: false, workout: false, surf: false,
camping: false, hiking: false, cycle: false,
jogging: false, ski: false, motorcycle: false,
gender: 0, nation: "Stirng")
var body: some View {
NavigationStack{
VStack {
HStack{
Text("성별을 알려주세요")
.fontWeight(.bold)
.font(.largeTitle)
위 코드는 내가 쓴 코드 중 일부분이다. 이 코드에서 구조체를 처음사용하는 뷰이다. 이때는 변수를 설정해서 구조체를 사용했다. 처음 값을 넣어야해서 저렇게 값을 주었다. 그리고 버튼을 클릭하면 액션에서 값이 변하도록 구현하여 데이터를 저장하였다.
Button(action: { custom.gender = 1 },
label: {
if custom.gender == 1 {
Text("남자")
.foregroundColor(.red)
}
else {
Text("남자")
.foregroundColor(.blue)})
바인딩 활용
바인딩이라는 개념도 활용해야한다. swift에서 뷰 간의 이동시 뷰와 데이터를 연결할때 사용하는 것이다. 나는 데이터를 각각의 뷰에서 받아와 꼭 사용해야했다. 바인딩을 사용할때는 네비게이션링크에서 $기호를 사용해야한다.
예시이다.
NavigationLink(destination: NationView(custom: $custom))그리고 받는 뷰에서는 이렇게 적어줘야한다. 다른 뷰에서 데이터를 전달받을 때 쓰는 것이다. 프로퍼티 패러중 하나인 @Binding을 사용해서 선언해야 한다.
@Binding var custom: Userfeature이동하는 뷰의 custom과 현재의 custom속성을 연결하는 의미이다. 뷰사이의 데이터 통신을 가능하게해서 상태관리와 데이터 흐름을 효율적으로 처리할 수 있다.
crud활용
내가 crud는 아직 완벽하게 공부하지 못하고 이해안가는 부분도 되게 많았다. 이 부분은 더 공부해서 crud를 중심으로 벨로그를 써봐야겠다. 챗지피티와 공식문서들을 활용해서 만들어서구현은 잘 되지만 내가 완벽하게 설명하지 못하는게 내 자신도 아쉬운 것 같다.
개발하고 느낀점
이번 개발을 통해서 가장 중요한 것은 꺾이지 않는 마음이라는 것을 알았다. 얼마전 유행하는 말이였지만 생각이 났다. 처음과 다르게 개발이 진행될 수록 의욕이 줄어드는 느낌이 들어 마무리가 너무 아쉽게 느껴졌다. 이번에는 개인적인 생각과 이정도면 되겠지하는 안일함도 약간 있어 후회가 많이 되는 개발이였다. 하지만 바인딩과 구조체 그리고 네비게이션 스택을 활용한 뷰 이동에 대해서는 잘 알게 된 것 같아서 다행이라는 생각이 들었다. 그리고 앞으로는 앱을 개발할때 진정으로 가슴이 뛰는 의욕이 생기는 개발이 하고 싶다. 그 주제가 너무 좋아서 또는 돈이 된다던가! 그런 동기부여가 굉장히 중요하다고 생각했다.
