[SwiftUI Essentials] Creating and Combining View - 2

지난 글에서는 Apple Developer에서 제공하는 SwiftUI 튜토리얼의 첫 번째의 완성된 모습을 살펴보고, SwiftUI에서 배운 내용을 정리하였다. 이번 포스팅에서는 전체를 이루고 있는 MapView와 CircleImage가 어떻게 구성되어 있는지, 어떤 점을 배울 수 있었는지에 대해서 정리해보려고 한다.

 

MapView

MapView는 Swift에서 `MapKit`을 import해서 구현한다. 튜토리얼에서는 'Turtle Rock'의 위치를 지도로 표시해주었으나, 나는 익숙한 서울역의 좌표로 대체하여 표현하였다. 

 

우선, MapView를 새롭게 만들어주저야 한다. Xcode 상에서 cmd + n 버튼을 조합하여 새로운 파일을 생성한다. 이때, SwiftUI를 사용하기 위해서는 User Interface의 SwiftUI View를 만들어주어야 한다.

새로운 뷰를 추가해야 한다.

 

새로운 뷰의 이름을 MapView라고 지으면 최초의 코드는 빈 화면에 "Hello, World!"라는 문자가 떠 있는 화면이 구성되고 코드는 아래와 같이 구성되어 있을 것이다.

import SwiftUI

struct MapView: View {
    var body: some View {
        Text("Hello, World!")
    }
}

struct MapView_Previews: PreviewProvider {
    static var previews: some View {
        Test()
    }
}

 

이제 이 코드를 지도를 보이도록 수정할 것이다. 완성된 전체 코드를 보면 아래와 같다.

 

import SwiftUI
import MapKit

struct MapView: View {
    @State private var region = MKCoordinateRegion(center: CLLocationCoordinate2D(latitude: 37.55_583, longitude: 126.96_965),
        span: MKCoordinateSpan(latitudeDelta: 0.2, longitudeDelta: 0.2)
    )
    var body: some View {
        Map(coordinateRegion: $region)
    }
}

struct MapView_Previews: PreviewProvider {
    static var previews: some View {
        MapView()
    }
}

 

우선, 지도를 사용하기 위해서는 `MapKit`을 import해서 사용해야 한다. 기본적으로 애플 지도를 지원한다.

원하는 지역의 지도를 나타내기 위해서 `region` 변수를 선언한다. 이 변수는 특정 위도와 경도를 중심으로 한 사각형의 지역을 나타내는 `MKCoordinateRegion`을 사용한다. 중심으로 보일 위치의 위도와 경도를 center 매개변수에, 그리고 표현할 영역의 범위를 span 매개변수에 할당한다. span에 들어간 값이 클수록 더 넓은 범위를 나타내고, 작을수록 보다 더 좁은 범위를 나타낸다.

 

작성한 region 변수를 사용하여 지도 객체를 View에 포함시킨다. 이 때, 변수 앞에 `$`가 붙는다. 이 `$`가 붙는 이유는 만든 지도 객체에 사용자 상호작용을 반영하도록 하기 위해서이다. $를 통해 해당 지역을 바인딩하여, 사용자가 지도에서 이동하고, 줌인/아웃하는 기능을 실시간으로 할 수 있도록 한다. 그리고 `MKCoordinateRegion` 자체에서 바인딩된 변수를 필요로 하기 때문에 $를 붙이지 않을 경우 에러가 발생한다.

 

서울역이 중심이 된 MapView

 

이러한 과정을 거쳐, 서울역의 위도와 경도 위치를 중심으로 한 지도를 보여주는 MapView가 만들어진다.

 

CircleImage

완성된 이미지에서는 주어진 이미지가 원형으로 되어 있고, 주변에 테두리가 쳐져 있다. SwiftUI에서는 `Modifiers`를 사용하여 별도의 코드 추가 없이 이 과정을 매우 쉽고 빠르게 할 수 있다고 튜토리얼에서는 소개하고 있다. MapView를 만들었을 때와 마찬가지로 새로운 SwiftUI view를 추가해준다.

 

import SwiftUI

struct CircleImage: View {
    var body: some View {
        Image("seoul")
            .clipShape(Circle())
            .overlay(Circle().stroke(Color.white, lineWidth: 4))
            .shadow(radius: 7)
    }
}

struct CircleImage_Previews: PreviewProvider {
    static var previews: some View {
        CircleImage()
    }
}

 

우선, 사용할 이미지를 프로젝트 폴더 내에 있는 `Assets.xcassets`에 위치하도록 한다. 그리고 Image 객체를 생성한다. Modifiers가 없이 그냥 이미지를 불러올 경우, 불러온 원본 이미지 자체만이 화면에 보여진다. 

 

Modifiers를 사용하여 원하는 형태로 만들어준다. 우선 view를 원하는 형태로 만들어줄 clipShape를 통해 원형으로 이미지를 잘라준다. 테두리의 하얀 선을 위해 속이 비어 있는 원형 객체를 만들고, 테두리 색을 흰색, 두께를 4로 설정해준다. 이렇게 될 경우 이미지 객체 위해 올라오는(오버레이된) 형태로 구성되게 된다. 마지막으로 주어진 이미지의 그림자 효과를 주기 위해 shadow를 사용한다. 그림자의 정도를 radius를 통해 지정할 수 있다.

서울역 이미지를 활용한 CircleImage

 

Modifiers를 사용하여 손 쉽게 원하는 형태로 이미지를 구성할 수 있다. 이렇게 완성된 CircleImage를 만들 수 있다. 주의해야할 점이라면 modifiers를 사용할 때 순서를 잘 맞춰야 한다는 것이다. 위 예시에서 clipShape가 가장 마지막에 갈 경우에는 overlay와 shadow가 반영된 이미지를 원형으로 clip하는 것이기 때문에 지정한 효과들이 모두 사라지게 된다.

---

이렇게 SwiftUI essentials의 첫 번째인 Landmark 앱을 만드는 방법에 대해서 살펴보았다. SwiftUI에서 사용하는 기본적인 내용들과 여러 가지 View를 만들어 합치는 방법들에 대해서 확인할 수 있었다.