SwiftUI 기초: 내 손으로 첫 앱 만들기
SwiftUI 기초: 내 손으로 첫 앱 만들기
이 글은 정보를 공유하기 위한 참고내용입니다. 반드시 공식 정보를 확인하세요.
SwiftUI란 무엇이며 왜 선택해야 할까? 🤔
내 손으로 직접 아이폰 앱을 만들어보고 싶다는 생각, 한 번쯤 해보셨나요? 하지만 막상 시작하려고 하면 '코딩'이라는 거대한 장벽 앞에서 막막함을 느끼기 마련입니다. 바로 그 첫걸음을 가볍게 만들어 줄 강력한 도구가 바로 SwiftUI입니다.
SwiftUI는 Apple이 2019년에 공개한 최신 UI(사용자 인터페이스) 프레임워크입니다. 쉽게 말해, 앱의 화면을 구성하는 버튼, 텍스트, 이미지 등을 더 쉽고 직관적으로 만들 수 있도록 도와주는 도구 모음이라고 생각하면 됩니다.
기존에는 UIKit이라는 프레임워크를 사용했는데, 코드가 길고 복잡해서 초보자가 배우기에는 다소 어려운 점이 있었습니다. 하지만 SwiftUI는 '선언형 구문(Declarative Syntax)'을 채택하여 이러한 단점을 극복했습니다.
💡 SwiftUI 핵심 특징
- 선언형 구문: "버튼을 만들고, 그 버튼의 색을 바꾸고, 위치를 여기로 옮겨줘" 라고 명령하는 대신, "이곳에 파란색 버튼이 있다"라고 선언하듯 코드를 작성합니다. 훨씬 간결하고 이해하기 쉽습니다.
- 실시간 미리보기: 코드를 한 줄 수정할 때마다 바로 옆 화면에서 결과가 어떻게 바뀌는지 실시간으로 확인할 수 있습니다. 디자인과 개발을 동시에 진행하는 듯한 놀라운 경험을 제공합니다.
- 적은 코드로 더 많은 기능: 같은 기능을 구현하더라도 UIKit에 비해 훨씬 적은 양의 코드로 완성할 수 있어 생산성이 매우 높습니다.
이러한 장점 덕분에 SwiftUI는 이제 막 코딩에 입문하는 분들이나, 빠르고 효율적으로 앱을 만들고 싶은 개발자들에게 최고의 선택지로 자리 잡고 있습니다. 복잡한 명령 대신 내가 만들고 싶은 화면을 말로 설명하듯 코드를 작성하는 즐거움을 SwiftUI와 함께 느껴보세요.
iOS 앱 개발을 위한 필수 준비물, Xcode 설치하기 💻
축구 선수가 되려면 축구공과 운동장이 필요하듯, iOS 앱 개발자가 되기 위해서도 꼭 필요한 준비물이 있습니다. 바로 'Mac' 컴퓨터와 'Xcode'라는 프로그램입니다. 아쉽게도 윈도우(Windows) PC에서는 공식적으로 iOS 앱 개발이 불가능하니 이 점은 꼭 참고하셔야 합니다.
Xcode는 Apple에서 직접 만들어 무료로 제공하는 '통합 개발 환경(IDE)'입니다. 코드를 작성하고, 디자인을 확인하며, 에러를 잡고, 최종적으로 앱을 완성하여 앱스토어에 올리는 모든 과정이 바로 이 Xcode 안에서 이루어집니다. 따라서 iOS 개발의 첫걸음은 Xcode를 설치하는 것부터 시작됩니다.
설치 방법은 매우 간단합니다. Mac에 기본적으로 설치된 'App Store' 앱을 실행하고, 검색창에 'Xcode'라고 입력하여 검색한 뒤 '받기' 또는 '설치' 버튼을 누르면 됩니다. 마치 일반적인 앱을 다운로드하는 것과 똑같습니다.
⚠️ Xcode 설치 시 주의사항
Xcode는 용량이 매우 큰 프로그램입니다. 다운로드 및 설치에 시간이 꽤 걸릴 수 있으며, Mac의 저장 공간도 최소 30GB 이상의 여유 공간을 확보하는 것이 좋습니다. 설치 전에 저장 공간을 미리 확인해주세요.
설치가 완료되면 응용 프로그램 폴더에서 파란색 망치 모양의 Xcode 아이콘을 찾아 실행해보세요. 처음 실행하면 추가 구성 요소를 설치하라는 창이 나타날 수 있는데, 안내에 따라 모두 설치해주면 모든 준비가 끝납니다. 이제 당신만의 앱을 만들 작업대가 완벽하게 준비되었습니다.
첫 SwiftUI 프로젝트 생성 및 화면 구조 살펴보기 🚀
Xcode 설치를 마쳤다면, 이제 드디어 첫 번째 프로젝트를 만들어 볼 차례입니다. 설레는 마음으로 Xcode를 실행하고 다음 단계를 차근차근 따라 해보세요.
- 단계 1: Xcode 시작 화면에서 'Create a new project'를 선택합니다.
- 단계 2: 상단 탭에서 'iOS'를 선택하고, 'App' 템플릿을 선택한 후 'Next' 버튼을 누릅니다.
- 단계 3: 'Product Name'에 'MyFirstApp'과 같이 원하는 프로젝트 이름을 입력합니다. 다른 설정들은 일단 기본값 그대로 두고 'Next'를 누릅니다.
- 단계 4: 프로젝트를 저장할 위치를 지정하고 'Create' 버튼을 누르면, 드디어 첫 프로젝트가 생성됩니다.
프로젝트가 생성되면 다소 복잡해 보이는 화면이 나타나지만, 겁먹을 필요 없습니다. 지금 우리에게 가장 중요한 파일은 왼쪽 파일 탐색기에서 보이는 'ContentView.swift' 파일입니다. 이 파일이 바로 우리 앱의 첫 화면을 담당하는 곳입니다.
파일을 클릭하면 중앙에 코드가 나타나고, 오른쪽에는 'Preview'라는 이름의 미리보기 화면이 보일 겁니다. 만약 미리보기가 보이지 않는다면, 오른쪽 상단의 'Resume' 버튼을 누르거나 단축키 'Option + Command + P'를 눌러 활성화할 수 있습니다.
ContentView.swift 코드 살펴보기
파일 안에는 `struct ContentView: View` 와 `var body: some View` 라는 코드가 보일 겁니다. 이것이 SwiftUI 화면의 가장 기본적인 구조입니다.
- struct ContentView: View: 'ContentView'라는 화면(View)을 정의하겠다는 선언입니다.
- var body: some View: 이 화면이 실제로 어떤 내용을 담고 있는지 구체적으로 작성하는 부분입니다.
- Text("Hello, world!"): 화면에 "Hello, world!" 라는 글자를 보여주는 코드입니다.
오른쪽 미리보기 화면에 "Hello, world!" 라는 글자가 보인다면 성공입니다. 이것이 바로 여러분이 만든 첫 번째 앱 화면의 모습입니다!
텍스트와 이미지, 가장 기본적인 뷰(View) 다루기 🎨
이제 "Hello, world!"라는 글자를 우리 마음대로 꾸며보고, 이미지도 추가해보겠습니다. SwiftUI에서는 화면에 보이는 모든 요소를 '뷰(View)'라고 부릅니다. 그리고 뷰의 모양이나 속성을 변경하는 것을 '수식어(Modifier)'를 사용한다고 표현합니다.
예를 들어, `Text("Hello, world!")` 코드 바로 아래 줄에 `.font(.title)` 이라는 코드를 추가해보세요. 마침표(.)로 시작하는 것들이 바로 수식어입니다. 미리보기 화면의 글자가 즉시 커지고 굵어지는 것을 확인할 수 있습니다.
이런 식으로 여러 수식어를 체인처럼 연결하여 원하는 디자인을 만들 수 있습니다.
텍스트 꾸미기 예시 코드
Text("내 첫 SwiftUI 앱")
.font(.largeTitle) // 폰트 크기를 크게
.fontWeight(.bold) // 폰트 굵기를 굵게
.foregroundColor(.blue) // 글자 색상을 파란색으로
이번에는 이미지를 추가해볼까요? 이미지를 사용하려면 먼저 프로젝트에 이미지 파일을 추가해야 합니다. 왼쪽 파일 탐색기에서 'Assets.xcassets' 폴더를 클릭하고, 이미지 파일을 마우스로 끌어다 놓기만 하면 됩니다.
이미지를 추가했다면, `Text` 뷰를 지우고 `Image("이미지이름")` 코드를 작성해보세요. "이미지이름" 부분에는 Assets에 추가한 이미지 파일의 이름을 정확히 입력해야 합니다. 이미지가 너무 크다면 수식어를 사용해 크기를 조절할 수 있습니다.
- .resizable(): 이미지 크기를 조절할 수 있도록 만들어주는 필수 수식어입니다.
- .scaledToFit(): 이미지의 비율을 유지하면서 주어진 공간에 맞게 크기를 조절합니다.
- .frame(width: 200, height: 200): 이미지의 가로, 세로 크기를 직접 지정합니다.
버튼을 추가하여 간단한 상호작용 구현하기 🕹️
지금까지는 화면에 정적인 요소들만 배치했습니다. 이제 사용자가 직접 누를 수 있는 '버튼(Button)'을 추가하여 앱에 생동감을 불어넣어 보겠습니다. 버튼은 사용자의 행동에 반응하여 특정 동작을 수행하게 만드는, 앱의 가장 기본적인 상호작용 요소입니다.
SwiftUI에서 버튼을 만드는 방법은 매우 직관적입니다. `Button` 뷰를 사용하고, 버튼을 눌렀을 때 실행할 동작(action)과 버튼의 모양(label)을 지정해주면 됩니다.
하지만 단순히 버튼을 누르는 것만으로는 화면에 아무런 변화가 없습니다. "버튼을 눌렀을 때 텍스트의 내용이 바뀌는" 것과 같은 변화를 주기 위해서는, SwiftUI에게 어떤 값이 바뀔 수 있는지를 알려줘야 합니다. 이때 사용하는 것이 바로 `@State` 입니다.
@State란?
`@State`는 뷰(View) 안에서 사용하는 특별한 보관함 같은 것입니다. 이 보관함에 들어있는 값이 바뀌면, SwiftUI는 변화를 감지하고 화면을 자동으로 다시 그려줍니다. 즉, 데이터의 변화가 화면에 즉시 반영되도록 만들어주는 핵심 기능입니다.
아래 코드를 `ContentView`에 직접 입력해보세요. `@State` 변수를 하나 만들고, 버튼을 누를 때마다 그 변수의 값을 바꾸는 간단한 예제입니다.
struct ContentView: View {
@State private var message = "버튼을 눌러주세요"
var body: some View {
VStack {
Text(message)
.font(.title)
Button("메시지 변경!") {
self.message = "성공입니다! 🎉"
}
.padding()
}
}
}
이제 미리보기 화면에서 '메시지 변경!' 버튼을 눌러보세요. 상단의 텍스트가 "성공입니다! 🎉"로 바뀌는 것을 확인할 수 있습니다. 이것으로 여러분은 사용자와 상호작용하는 첫 번째 기능을 완성했습니다.
첫 앱 완성 후 다음 학습 로드맵 알아보기 🗺️
축하합니다! 여러분은 SwiftUI를 이용해 화면에 글자와 이미지를 표시하고, 버튼으로 상호작용하는 간단한 앱을 직접 만들어보는 데 성공했습니다. 작지만 매우 의미 있는 첫걸음을 뗀 것입니다.
이제 막 재미를 붙이기 시작했다면, 여기서 멈추지 말고 다음 단계로 나아가야 합니다. 더 복잡하고 멋진 앱을 만들기 위해 앞으로 무엇을 더 배우면 좋을까요?
다음은 여러분의 SwiftUI 여정을 이끌어 줄 학습 로드맵입니다.
- 레이아웃 컨테이너: 뷰들을 어떻게 배치하고 정렬할지 배우는 단계입니다. VStack(수직), HStack(수평), ZStack(겹치기)은 모든 화면 구성의 기본이 되므로 가장 먼저 익혀야 합니다.
- 리스트와 스크롤: 여러 개의 데이터를 목록 형태로 보여주는 List와 화면보다 내용이 길어질 때 스크롤 기능을 추가하는 ScrollView를 학습합니다. 대부분의 앱에서 사용되는 필수 기능입니다.
- 화면 전환 (Navigation): 버튼을 눌렀을 때 다른 화면으로 이동하는 방법을 배웁니다. NavigationView와 NavigationLink를 사용해 여러 화면을 가진 앱을 만들 수 있습니다.
- 사용자 입력 받기: 텍스트를 입력받는 TextField, 여러 옵션 중 하나를 선택하는 Picker, 켜고 끄는 Toggle 등 사용자로부터 직접 입력을 받는 다양한 컨트롤을 다루는 방법을 익힙니다.
이러한 개념들을 하나씩 차근차근 익혀나가다 보면, 머릿속으로 상상했던 앱을 점차 현실로 만들어낼 수 있을 겁니다. Apple의 공식 SwiftUI 튜토리얼이나 다양한 온라인 강의를 활용하여 꾸준히 학습하는 것을 추천합니다.
