HACKING WITH SWIFT - WeSplit

🧑‍💻이번 시간부터는 실제 프로젝트를 만들어 보면서  앞서 배운 Swift의 기본을 이용하여 실제 코드에 기술해볼 것이다!

 

 

해당 프로젝트는 인원수와 남기고 싶은 팁을 기준으로 내야 하는 금액을 분할하는 앱으로서 우리나라에서는 팁이라는 개념이 없기 때문에 쉽게 말해 "뿜빠이", "더치페이💸" 앱을 만드는 것이 궁극적인 목표이다. 

 

 

---

 

1. 프로젝트 생성 및 구성 요소 

 

SwiftUI로 새 앱을 만들기 위해서는 일단 당연히 Xcode가 이용되는데 이전의 경우 Playground를 통해 실습해보았지만, 지금부터는 바로 SwiftUI를 이용하여 하나의 앱을 구현해보자.

 

먼저 개발하려는 앱의 이름과 개발 언어 및 저장 위치 등등 설정하고 나면

바로 이렇게 개발을 시작할 수 있는 환경이 만들어지게 된다. 아마 안드로이드를 개발해봤거나 했다면 이런 과정은 금방 쉽게 할 수 있을 것이다.

먼저 왼쪽을 보면 Project Navigator로 불리는 부분이 있는데 여기서 현재 프로젝트에서 확인할 수 있는 것은 다음과 같다.

그리고 캔버스 부분에서는 현재 페이지에 대한 미리 보기를 제공할 수 있다. 

• WeSplitApp.swift에는 앱을 시작하기 위한 코드가 포함되어 있다. 앱이 실행될 때 무언가를 만들고 그것을 계속 유지하려고 하면, 해당 부분을 여기서 개발하게 된다.
• ContentView.swift에는 프로그램의 초기 사용자 인터페이스(UI)가 포함되어 있으며, 이 프로젝트에서 거의 모든 작업을 수행할 예정이다.
• Assets.xcassets는 앱에서 사용할 Assets 카탈로그이다. 또한 앱 아이콘, 아이메시지 스티커 등과 함께 색상을 추가할 수 있다.
• Preview Content는 내부에 Preview Assets.xcassets가 포함된 그룹입니다. 이 그룹은 다른 Assets 카탈로그로, 특히 사용자 인터페이스를 설계할 때 사용할 이미지와 같이 프로그램이 실행될 때 어떻게 표시되는지 알려 준다.

 

---

 

 

이번 프로젝트에서는 특히 위에서 언급한 ContentView에서 모든 개발을 진행하기 때문에 기본적으로 세팅되어있는 코드에 대해서 간단히 알아보자.

 

 

1. import SwiftUI가 보인다. 이건 Swift의 SwiftUI 프레임워크가 제공하는 모든 기능을 사용할 수 있도록 해준다. Apple은 기계 학습, 오디오 재생, 이미지 처리 등과 같은 작업을 위한 많은 프레임워크를 제공하고 있다. 도서관에서 이미 작가가 쓴 책을 빌려서 읽는 것이라 생각하면 더욱 쉽게 이해될 것 같다. 
2. struct ContentView: View라는 구조체가 하나 보인다. View는  View 프로토콜로 구성된 ContentView라 불리는 새로운 구조체 하나를 만든다. 여기서 View는 SwiftUI의 기본 프로토콜이다. 
3. var body: some View는 body라는 새로운 계산 속성을 정의한다. 그리고 some View는 우리의 레이아웃인 View 프로토콜을 준수하는 것을 반환하는 것을 의미한다. 
4. Text("Hello, world!")는 "Hello, world!" 문자열을 사용하여 텍스트 보기를 만든다. Text View는 화면에 그려지는 정적 텍스트의 작은 조각으로 필요에 따라 여러 줄에 걸쳐 자동으로 줄을 바꾼다.
5. ContentView 구조체 아래에는 PreviewProvider 프로토콜을 준수하는 ContentView_Previews 구조가 표시된다. 이 코드는 실제로 앱 스토어에 연결되는 최종 앱의 일부가 아니라 코드와 함께 UI 디자인의 미리 보기를 보여줄 수 있도록 Xcode가 사용하도록 특별히 설계되었다.

 

---

2. 양식 만들기 

 

많은 앱들은 사용자에게 입력을 요구하거나 정보를 보여 준다.  하지만 텍스트 필드, 버튼, 등과 같은 사용자 대화형 컨트롤을 포함할 수 있다. 그럼 여기서 우리는 더욱 효과적이고 쉽게 표현하기 위한 방법에 대해서 배울 수 있다. 

 

 

- Form

 

var body: some View {
    Form {
        Text("Hello, world!")
            .padding() //Form을 쓰면 패딩도 제거 할수있다.
    }
}

 Form은 기본 텍스트 보기를 내부에 래핑함으로써 기본 양식을 만들 수 있다. 

바로 캔버스에서 해당 변경사항 또한 살펴보자!

위에서 최초의 Hello World와 비교해보면 차이가 있다.

기존에는 흰색 바탕의 중앙에 Hello World 가 자리하고 있었지만 Form을 통해 바탕이 밝은 회색이고 Hello World의 위치 또한 상단으로 올라간 것을 확인할 수 있다. 여기서 한 개가 아닌 여러 개를 설정할 수 있을까? 그것도 가능하다. 이번에는 Hello World를

Form {
    Text("Hello, world!")
    Text("Hello, world!")
    Text("Hello, world!")
    Text("Hello, world!")
    Text("Hello, world!")
    Text("Hello, world!")
    Text("Hello, world!")
    Text("Hello, world!")
    Text("Hello, world!")
    Text("Hello, world!")
}

이렇게 하면???

요런 식으로 하나의 Form안에 10개의 텍스트가 각각 출력된 것을 확인할 수 있다. 그런데 여기서 의문은 11개, 12개 그 이상은 못할까? 

SwiftUI는 하나의 Form안에 10명 이상의 자식에 대해 제한을 두었는데 이것은 Form 말고도 다른 곳에서도 적용된다. 따라서 Form안에는 10까지만! 사용 가능하다.

 

 

 

- Group

 

그렇다면 Form안에 10개 보다 더 많은 항목을 추가시키려면 어떻게 해야 할까? 

그때 사용하는 것이 바로 Group이다. 

 

그룹은 실제 사용자 인터페이스가 보이는 방식을 변경하지 않고, Form의 제한을 해결할 수 있도록 한다. 

이때 캔버스를 확인해보면 다르게 보이는 것은 따로 없지만 말 그대로 Form의 개수 제한에서 벗어나 원하는 만큼 텍스트 박스를 추가할 수 있게 된다. 하지만 한 페이지에 너무 많은 텍스트 박스는 가독성 측면에서는 오히려 별로일 수도 있다. 

 

 

 

 

- Section

 

그럼 항목을 분리하여 Form이 다르게 보이게 할 수는 없나?

그럴 때는 Section이라는 걸 이용하면 된다. 이건 Form이 개별적으로 시각적 그룹으로 분할되게 된다.

Form {
    Section {
        Text("Hello, world!")
    }

    Section {
        Text("Hello, world!")
        Text("Hello, world!")
    }
}

 

 

 

---

 

3. 내비게이션 바 추가

 

 

우리는 원한다면 iOS를 사용하다 보면 상단의 시계와 하단의 홈 표시기를 포함한 화면의 아무 곳에나 콘텐츠를 배치할 수 있다. 하지만 보기에 좋을까? 그랬다면 어떠한 앱을 이용하더라도 어지러워 보이고 정신없어 보일 것 같은데, 여기서 SwiftUI 또는 시스템 UI가 둥근 모서리로 가릴 수 없는 영역에 배치 덮을 수 없는 영역, 안전 영역이라고 불리는 것을 배치하는 이유이다. 

 

예를 들어 iPhone13에서 안전 영역은 노치 바로 아래에서 홈 표시기 바로 위까지의 영역이다. 그 안에서는 개발자가 원하는대로 사용할 수 있게 된다. 아까 위에서 배웠던 Section 파트를 한번 ios 시뮬레이터로 실행해보면 다음과 같이 안전 영역이 어디 있는지 더욱 잘 확인할 수 있다. 

 

그런데 앱을 사용하다 보면 위, 아래, 좌우로 스와이프 하는 경우나 폰 자체를 회전 시킬수도 있다. 그런데 현재 상태에서는 위쪽에 있는 시간 부분이나 배터리 표시기와 같은 부분에 해당 뷰들이 같이 엉켜 둘 다 읽기 어려워진다. 이 문제를 해결하기 위한 공부를 지금부터 해보자!

 

 

여기서 해당 문제를 해결 하기 위해서는 화면 상단에 내비게이션 바를 배치하는 것이다. 내비게이션 바는 제목과 버튼이 있을 수 있고, SwiftUI에서는 사용자가 작업을 수행할 때 새로운 View를 표시할 수 있는 기능도 제공한다. 

 

 

 NavigationView {
        Form {
            Section {
                Text("Hello, world!")
            }
        }
    }
}

이전에 Section파트에서 사용한 코드에 NavigationView 내부에 모두 집어 넣으면 우리는 벌써 쉽게 내비게이션 바를 사용하게 된 것이다. 바로 실행하여 확인해보면 아마 그 차이를 분명히 느낄 수 있을 것이다. 

 

 

그럼 이번에는 이렇게 설정한 네비게이션 바에 제목을 한번 넣어보자!

여기서는 앞서 배웠던 Modifier을 추가하게 되는데 코드로 확인해보면 다음과 같다. 

NavigationView {
               Form {
                   Section {
                       Text("Hello, world!")
                   }
               }
               .navigationTitle("SwiftUI Test")
           }

 

. navigationTitle()을 Form에 추가하면서 Swift는 내비게이션 제목과 기존 항목들이 있는 새로운 Form을 하나 생성한 것을 확인할 수 있다.

여기서 또 다른 Modifier을 추가로 설정하여 글꼴도 바꿀 수 있는데 

.navigationBarTitleDisplayMode(.inline)

여기서는 작은 글꼴로 설정해보았다.

 

---

learning by repetition