14일 만에 아이폰 앱 만들기 챌린지(2) - xcode 세팅 및 설명

14일 만에 아이폰 앱 만들기 챌린지(2) - xocde 세팅 및 설명

이 포스팅에서는 다음과 같은 주제를 다룹니다.

• xcode 설치
• 새 xcode프로젝트 만들기
• xcode 인터페이스
• 프로젝트 파일
• xocde 네비게이팅

 

Xcode 설치

---

 

Xcode는 무료다. 앱스토어를 실행시키고 Xcode를 검색하면 된다. 검색하면 다음과 같은 페이지를 보게 된다.

앱스토어에 있는 Xcode

평가가 1.9라는 것이 눈에 띌 것이다. 맘에 안 드는 사람이 주는 평점이 많은 듯하다. 그래도 Xcode의 대체제가 있다면 좋을 것 같긴 하다. 경쟁할 수 있는 프로그램이 있어야 저런 댓글도 관리도 할 텐데.

 

스크롤을 내려보면 다음과 같은 정보가 있다.

설치하기 전에 자신의 컴퓨터에 여유용량이 있는지 확인하자. 명시되어 있는 크기보다 용량이 더 필요하니 참고하자.(시뮬레이터도 설치해야 한다.) 호환성도 확인하자. 오래된 맥북을 가진 사람이라면 다른 방법을 찾아봐야 될 수도 있다.

 

xcode는 아래 사이트에서도 다운로드할 수 있다.

developer.apple.com/xcode/resources/

Xcode - Resources - Apple Developer

 

베타 버전도 받을 수 있는데 전에 포스팅에서도 말했듯이 애플 개발자에 등록이 되어 있어야 가능하다. 베타 버전은 버그가 많기 때문에 추천하지 않는다. 정식 버전을 다운로드하도록 하자.

 

더 오래된 버전을 다운로드 하려면 스크롤을 내려 보면 받을 수 있는 링크가 있다.

오래된 버전을 받을려면 저 링크를 타고 가자

 

xcode를 처음 설치하면 컴퓨터 비밀번호를 물어볼 것이다. 자산의 컴퓨터 비밀번호를 입력하면 된다. 설치가 될 동안 커피 한잔 하면 된다.

 

 

새 xcode프로젝트 만들기

---

xcode를 처음 실행하면 다음과 같은 화면이 뜬다.

나는 예전에 공부한답시고 몇 개 프로젝트를 만들어 놓은 게 있어서 오른쪽에 만들어 놓은 프로젝트가 뜨지만 처음 실행하면 아무것도 없을 것이다. 새 프로젝트를 생성하기 위해서 Create a new Xcode project를 누르면 된다

 

 

이 같은 화면이 뜨지 않는다고 무서워하지 말자. 상단의 메뉴를 통해 프로젝트를 만들 수도 있다.

메뉴로 프로젝트 여는 법

 

새 프로젝트 생성을 클릭한다면 다음과 같은 화면이 뜰 것이다.

프로젝트 템플릿 고르기

App 항목을 선택하고 넘어가자.(App이 제일 기본이다.)

프로젝트 생성 옵션

설명이 필요한 항목에 대해 이야기하자면

• Team이라는 항목이 있는데 지금 팀이 없더라도 걱정하지 말자. 나중에 애플 계정을 넣을 때 팀을 넣을 수 있다.
• Organization Identifier는 웹사이트의 도메인 같은 거라 생각하면 된다. 즉, 다른 앱과 구분되기 위한 고유의 이름이다. 보통 도메인을 거꾸로 뒤집은 형태로 작성된다. 일단은 "com.<자기영어 이름 형태>" 로 작성하자. 나는 com.mangsantae라고 입력하겠다. 물론 이것도 나중에 바꿀 수 있다.
• interface는 두 가지 방식이 있는데 SwiftUI와 Storyboard 방식이 있는데 우리는 SwiftUI방식(가장 최근이고 낫다고 생각되는)으로 진행하겠다.
• Life Cycle도 SwiftUI에 맞춰 SwiftUI App으로 설정하자
• 체크 박스 부분은 모두 체크 해제하도록 하자. 

Next를 누르면 저장할 위치를 묻는데 자신이 찾기 편한 위치를 선택하면 된다. 나는 데스크탑에 저장했다.

 

프로젝트 생성 후 첫 화면

프로젝트 생성 후 위와 같은 화면을 볼 수 있다. 모르는 게 너무 많다고 겁내지 말자. 어려운 것은 없다. 익숙함의 문제일 뿐이다.

 

우선 왼쪽에 "네비게이션 바"라는 것부터 먼저 보도록 하자.

네비게이션 바navigation bar

프로젝트에 있는 파일들을 보여준다.

그리고 상단에 보면 다른 것을 볼 수 있는 탭들이 있다. 지금은 급한 것이 아니니 나중에 필요할 때 다시 보도록 하자.

처음에는 제일 왼쪽 파일들을 볼 수 있는 탭이 현재 탭으로 설정되어있다.

 

파일을 선택하면 중앙에 있는 영역에 파일의 내용이 표시된다. 이 영역은 에디터 영역이라고 한다. 이 영역은 우리에게 파일을 편집할 수 있도록 해준다. swift파일을 선택하면 코드를 띄워줄 것이며 xcassets파일을 선택하면 이미지를 넣는 화면으로 전환된다.(아직 이게 뭔지는 몰라도 된다.)

 

에디터 영역editor area

 

제일 오른쪽은 인스펙터 영역inspector area라고 한다.

인스펙터 영역inspector area

인스펙터 영역은 에디터 영역에 있는 내용을 보충해서 보여준다. 또는 에디터 영역에 있는 요소들의 설정을 변경하는 곳이기도 하다. 

 

예를 들어 ContentView.swift파일을 네비게이터에서 선택하고 인스펙터 영역은 상단의 물음표 버튼을 클릭하도록 하자. 그리고 에디터 영역에 있는 코드에서 이것저것 선택해보면 오른쪽 에디터 영역에서 선택한 코드에 대해서 설명을 해주는데 선택할 때마다 변경되는 것을 볼 수 있다.

파일 정보 표시 탭

인스펙터 영역의 상단에 보면 여러 가지 탭이 있는데 그중 한쪽 모퉁이가 접문 종이 모양의 아이콘이 있다. 이 탭은 파일에 대한 정보(어디에 있는지, 어디에 include 되고 있는지)를 보여준다. 

 

옵션 설정 탭

위와 같은 탭을 선택할 경우 파일의 설정 값들을 바꿀 수 있다. 이 탭이 뜨는 파일이 있고 안 뜨는 파일이 있다. 안 뜬다고 겁먹지 말자.

 

상단을 보도록 하자.

상단 툴바

• 제일 왼쪽과 제일 오른쪽에 있는 버튼은 생긴 게 비슷한데 각각 내비게이션 바와 인스펙터 영역을 보여주거나 보여주지 않게 할 수 있다. 화면의 크기가 제한적일 경우 사용하면 좋다.
• 가운데 제일 긴 영역이 있는데 이 영역은 현재 상태를 보여준다. 현재 xcode가 무엇을 하고 있는지를. 에러가 있는지를. 경고가 있는지를.
• 그 왼쪽에 보면 핸드폰을 선택할 수 있는 버튼이 있는다. dropdown방식으로 나오는데 여기서 선택하는 핸드폰이 시뮬레이터로 나타난다. 즉, 개발하는데 핸드폰이 없어서도 개발을 할 수 있다. 물론 직접 폰으로 테스트하는 것도 가능하다. usb로 아이폰을 연결하면 시뮬레이터 목록에 usb로 연결한 아이폰 뜬다. 선택하면 된다.
• "재생"처럼 생긴 아이콘이 있는 버튼이 있는데 이 버튼을 클릭하면 시뮬레이터로 프로젝트가 실행된다.
• "정지"처럼 생긴 아이콘이 있는 버튼은 돌아가던 프로젝트를 중지한다.
• 오른쪽에 + 버튼이 있는데 이는 인터페이스를 불러오는 버튼이다. 코드 스니펫, 이미지, 컬러 등을 미리 정해놓고 불러오는 것도 가능하다. 필요한 것들을 검색해서 찾아서 선택하고 에디터 영역으로 불러올 수 있다.

 

이렇게 네비게이터, 에디터, 인스펙터, 상단 바 이렇게 네 가지 영역이 xcode의 메인 영역이라고 할 수 있다.

 

 

다시 네비게이터의 제일 상단의 파일을 선택해보자. 나같은 경우는 test라는 이름의 프로젝트 파일이다.

네비게이션 영역에서 프로젝트 파일 선택

에디터 영역에는 다음과 같이 뜬다.

 

에디터 영역

몇 가지 설정들을 바꿀 수 있다. 처음 우리가 프로젝트를 생성했을 때 정했던 값(Bundle Identifier 등)도 여기서 변경이 가능하다. Device Orientation에서는 앱의 방향도 바꿀 수 있다. 플랫폼의 버전도 정할 수 있다.

 

네비게이션 바에서 프로젝트 내부는 어떤 구성으로 되어있는지 보자.

프로젝트 내부 폴더

위의 test라는 폴더(어떻게 프로젝트 명을 정했는지에 따라 다를 수 있다.)는 코드 파일과 프로젝트 파일이 들어 있다.

Products폴더는 결과물 파일을 포함하고 있다. 프로젝트를 빌드하고 컴파일하면 Products폴더로 들어가는 것이다.  Products 안의 파일은 앱스토어로 배포가 가능한 파일이 된다.

 

test 폴더 내부에 testApp.swift 파일을 선택해보자. 그럼 에디터 영역에서 해당 파일의 코드를 보여줄 것이다.

testApp.swift

@main이라는 부분이 있는데 이는 이 앱의 시작 부분임을 알려준다. ContentView라는 것도 볼 수 있는데 ContentView.swift 파일로 연결됨을 의미한다. ContentView파일을 보도록 하자.

 

 

ContentView.swift

이 파일은 유저가 보게 되는 화면을 나타내고 있다. 코드가 인터페이스로 나타나게 되는데 그것은 나중에 보여주도록 하겠다.

 

Assets.xcassets파일을 보도록 하자. 이곳은 asset 라이브러리로 여기에 컬러, 아이콘, 이미지 등을 저장할 수 있다. 드래그 앤 드롭해서 저장할 수 있다.

 

info.plist 파일을 보도록 하자. 프로젝트의 추가적인 옵션을 설정할 수 있다.

Preview Content라는 폴더의 Preview Assets.xcassets 파일을 보도록 하자. 여기는 또 다른 asset 라이브러리인데 여기는 실질적으로 앱을 만드는데 필요한 asset들을 모아 놓는 곳이다. 배포할 때 필요한 asset들을 여기에 저장하면 된다. (나중에 배포할 때 다시 자세히 보도록 하자.)

 

이제 Xcode의 몇 가지 팁들을 살펴보자.

 

뒤로가기

뒤로 가기처럼 생긴 버튼이 있는데 이는 이전에 선택했던 파일 에디팅 화면으로 돌아가게 한다. 반대로 앞으로 가는 것도 있다. 네비게이터에서 파일을 찾는 것보다 이를 활용하면 편리하게 파일 간 이동이 가능하다.

 

파일을 여러 개 열면 상단의 열어져 있는 파일을 탭 형태로 볼 수 있다.

파일을 더 추가하고 싶으면 파일을 더블 클릭하거나 오른쪽 마우스 버튼을 누르고 Open in Tab을 선택하면 된다. Open in New Window는 새로운 창에서 해당 파일을 열게 한다.

 

에디터 영역을 두 개 이상 띄울 수도 있는데 에디터 영역의 우측 상단에 있는 버튼을 클릭하면 된다.

에디터 영역 추가

 

에디터 영역이 좌우로 나누어지는 것을 볼 수 있는데 위아래로 영역을 나누고 싶다면 option키를 누른 채 에디터 영역 추가 버튼을 클릭하면 된다.

 

에디터 영역의 상단에 보면 파일의 경로를 볼 수 있다.

파일 경로

제일 오른쪽 끝을 클릭하면 파일 내부에서 위치를 찾아갈 수 있다. 파일이 길어질 때는 유용하게 쓸 수 있다.

 

에디터 우측 상단, 에디터 영역 추가 버튼 왼쪽에 버튼이 하나 더 있는데 클릭하면 다음과 같이 뜬다.

미니맵 보여주기

저기서 미니맵을 활성화시킬 수 있다. 활성화하면 우측에 미니맵을 볼 수 있다.

 

미니맵

미니맵은 코드가 길어질 때 유용하게 사용이 가능하다.

 

Lesson2는 여기까지 끝!