처음 Xcode를 실행하면 위와 같이 보입니다. 프로젝트를 시작하려면 두 번째 줄인 "Create a new Xcode project"를 클릭합니다. 그러나 앱 프로젝트 생성은 스위프트(Swift)를 처음 배우는 사람이 문법을 익히기에 적합하지 않습니다. 첫 시작은 첫 번째 줄인 "Get started with a playground"를 클릭하여 시작하는 것이 좋습니다.
Xcode에서 스위프트를 시작할 때 : 플레이그라운드
플레이그라운드(Playground)는 별다른 설정 없이 스위프트 구문을 실행시켜 볼 수 있는 개발 환경입니다. Xcode에서만 사용할 수 있는 것이 아니라, Swift Playgrounds라는 독립적인 앱을 맥 혹은 아이패드(iPad)에서 다운로드해 사용하거나 웹 환경인 Online Swift Playground로도 사용할 수도 있습니다. 스위프트 문법을 공부하거나 간단한 구문 테스트를 위해 사용하기 좋습니다. 대빵디노처럼 프로젝트부터 만들었다가 스위프트 구문 헤매지 말고 플레이그라운드로 연습해보시는 것을 추천합니다.
웰컴 창에서 아래처럼 '플레이그라운드로 시작하기'를 클릭하면 플레이그라운드 템플릿을 선택하는 창이 뜹니다. 생성 위치와 파일명도 설정해주세요.
"Hello, playground" 기본 코드가 입력되어 있습니다.
위 스크린샷에서 빨간 네모로 표시된 버튼 두 개가 있습니다. 왼쪽 버튼은 콘솔 출력을 보여주는 디버그 영역(Debug area)을 올리거나 내리는 버튼입니다. 오른쪽 버튼은 플레이그라운드 실행 버튼입니다.
아래와 같이 'print'를 이용해 콘솔에 문자열을 출력해 볼 수 있습니다.
앱 만들기 시작 : Xcode 프로젝트 생성
스위프트를 어느 정도 공부했으면, 앱 개발 프로젝트를 생성해 봅니다. 웰컴 창에서 아래처럼 '새로운 Xcode 프로젝트 생성하기'를 클릭하면 프로젝트 템플릿을 선택하는 창이 뜹니다.
템플릿을 선택하고 '다음(Next)' 버튼을 클릭하면, 프로젝트 옵션을 선택하는 단계로 넘어갑니다.
프로젝트 설정의 옵션은 다음과 같습니다.
- 프로젝트명 (Product Name) : 일반적으로 파스칼 표기법(Pascal case)으로 작성
- 팀/계정 (Team) : None으로도 생성 가능하며, 계정을 추가하면 Personal로 생성
- 조직명 (Organization Name) : 소속한 곳 이름
- 조직 식별자 (Organization Identifier) : 유일해야 함!
- 번들 식별자 (Bundle Identifier) : (자동 생성) 조직 식별자 + "." + 프로젝트명
- 언어 (Language) : 스위프트(Swift) 혹은 오브젝티브 C(Objective-C) 선택 가능
- UI (User Interface) : SwiftUI 혹은 스토리보드(Storyboard) 선택 가능
- 코어 데이터 사용(Use Core Data), 유닛 테스트 포함(Include Unit Tests), UI 테스트 포함(Include UI Tests)은 필요한 경우 체크
설정을 완료하고 다음으로 넘어가서 생성 위치와 파일명도 설정해주세요.
아래와 같이 프로젝트가 생성됩니다. PreviewProvider를 이용하여 캔버스(Canvas) 창에서 프리뷰(Preview)를 확인해 볼 수 있습니다. 캔버스의 프리뷰는 보통 코드가 변경되면 바로 업데이트가 되는데, 캔버스 창을 띄우거나 빌드가 실패한 경우에는 Resume 버튼을 눌러 다시 빌드합니다.
빌드가 성공하면 위와 같이 프리뷰를 확인할 수 있습니다.
그런데 그냥 흰 화면에 뷰만 보이고, 기기 프레임과 동적 이벤트를 확인하기 위한 라이브 프리뷰(Live Preview) 버튼이 안 보입니다. 이건 Xcode 전체 크기가 작은 경우, 캔버스보다 프리뷰가 더 커서 상하좌우가 잘려보이는 겁니다. 네.... 대빵디노는 멍청하게도 이걸 생각도 못하고 한참 헤맸습니다...😂 아래 스크린샷에 빨간 네모로 표시된 축소/확대 버튼을 클릭하시면 기기 프레임과 라이브 프리뷰 버튼까지 확인할 수 있습니다.
영어 잘 하지 못해도 SwiftUI 튜토리얼
SwiftUI를 처음 사용해 보고 싶을 때 쉽게 따라할 수 있는 설명을 찾는다면, 애플 개발자 페이지의 SwiftUI 튜토리얼을 추천합니다. 영어가 부담스러운 개발자들은 "영문"이라고 적혀 있어 보기를 망설이실 수 있습니다. 하지만 걱정 마세요! 애플 개발자 페이지의 SwiftUI 튜토리얼은 영어를 잘 못해도 알아볼 수 있을 만큼 친절하게 구성되어 있습니다.
애플 개발자(Apple Developer) 페이지에 들어가면 위와 같은 화면을 볼 수 있습니다. 정확히는 애플 개발자 사이트의 "개발" 메뉴를 클릭하면 됩니다. 해당 페이지의 중간에 SwiftUI 소개 페이지로 가는 링크가 있습니다.
튜토리얼 링크는 SwiftUI 소개 페이지 중간 즈음에서 찾을 수 있습니다. 바로 아래에 동영상 설명도 있으니, 동영상을 선호하시는 개발자들은 해당 링크로 들어가면 됩니다.
튜토리얼 페이지에서 시작 버튼을 누르면 첫 번째 튜토리얼 페이지로 넘어갑니다. 아니면 아래로 내려서 다른 항목을 볼 수도 있습니다.
튜토리얼 내용은 아래 스크린샷처럼 구성되어 있습니다. 간단한 설명과 스크린샷, 코드, 미리보기(프리뷰)를 함께 보여줍니다. 뭘 선택해야 하는지, 어떤 코드를 작성해야 하는지 하이라이트까지 되어 있습니다. 보기 편합니다. 아주 보기 편해요. 영어 걱정 마시고 튜토리얼 페이지로 SwiftUI 공부하시길 바랍니다. 우리 모두 화이팅 😁
'모바일 개발 > iOS 앱 개발' 카테고리의 다른 글
| [Swift] Firebase 실시간 데이터베이스에서 (한 번에 모든) 데이터 읽어오기 (0) | 2020.08.30 |
|---|---|
| [Swift] 커스텀 탭(PagerTabStrip) 구현하기 (0) | 2020.08.22 |
| [Swift] Using SVG file in Xcode (엑스코드에서 SVG파일 사용하기) (0) | 2020.08.01 |
