사용법 Xcode

 오늘은 iOS 앱 개발을 위한 첫걸음을 떼고 싶다

Xcode로 앱을 만들기 위한 프로젝트를 생성합니다.1. Xcode를 실행하면 다음과 같은 시작화면이 나오는데, 여기서 [*Create anew Xcode project]를 클릭해서 새 프로젝트를 만들겠습니다.

*Create anew Xcode projec t:iPhone, iPad, 맥앱을 만들기 위한 새로운 프로젝트를 생성할 수 프로그램이다. 4, 일반적으로 가장 많이 쓰이는 프로그램이다.

2. 템플릿을 선택하는 새로운 프로젝트를 시작할 때 템플릿을 선택하는 창이 나타난다. 각 템플릿에는 용도에 맞는 앱 개발에 필요한 기본이 설정되어 있다. 개발자는 이 틀에 여러가지 기능을 추가해 앱을 만들면 된다.

여기서 [*Single view Application]을 선택한 후 Next 버튼을 클릭한다.

* Single view Application : 뷰를 사용하는 앱을 개발할 때 사용하는 템플릿이다. 기본적으로 하나의 뷰가 나타나며, 필요에 따라 새로운 뷰를 추가하여 만들 수 있다. 일반적으로 가장 많이 사용되는 템플릿이다.

3. 프로젝트의 기본정보를 입력할 창이 뜨면 프로젝트 , 사용할 언어 지정 등 프로젝트 기본정보를 입력한 후 [Next] 버튼을 클릭한다.

4) 이렇게 새 프로젝트가 생겼어 화면 좌측 네비게이터 영역에 프로젝트 파일(1)이 있는 것을 볼 수 있고,

2. Deployment Target : 앱이 지원하는 최하위 버전으로 버전을 바꾸는 기능이다. 여기서 버전을 낮추면 옛 버전에 아이폰도 만들려는 앱을 쓸 수 있다.Devices : 앱이 지원하는 기기를 선택할 수 있다. 즉, 아이폰, 아이패드 또는 유니버설 중에서 선택할 수 있다.

3. Device Orientation : 앱이 지원하는 회전 방향을 선택할 수 있다. 세워진 상태(Portrait), 거꾸로 뒤집힌 상태(Upside Down), 왼쪽으로 회전(Landscape Left), 오른쪽으로 회전(Landscape Right)을 선택할 수 있다.

Xcode 화면구성 보기

1. 네비게이터 영역: 프로젝트 네비게이터, 심볼 네비게이터, 검색 네비게이터, 이슈 네비게이터, 테스트 네비게이터, 디버깅 네비게이터, 브레이크포인트 네비게이터, 보고서 네비게이터 등의 정보를 보여주는 영역이다. 각 항목은 한번 클릭하면 가운데 에디터 영역에 나타나고 더블 클릭하면 새로운 창이 열리면서 나타난다.

2. 에디터 영역 : 소스를 직접 입력하거나 스토리보드를 이용하여 화면을 디자인 할 수 있는 영역이다.

3. 라이브러리 영역: 스토리보드에서 사용할 수 있는 버튼, 컨트롤러, 뷰와 같은 모든 오브젝트를 볼 수 있습니다.

X code의 기본화면이 어떻게 나뉘어져 있는지를 간단히 확인했다. 이번에는 *스토리보드 작업을 시작할 수 있도록 화면배치를 설정해보도록 한다.

* 스토리보드 : 앱 화면 구성을 시각적이고 직감적으로 구성할 수 있도록 도와주는 기능이다. 주로 홈페이지를 만들 때 사용한다. 스토리보드는 이름에서 알 수 있듯이 Xcode로 만들려는 앱이 어떤 형태로 화면에 구성되어 있고 버튼을 누르면 화면을 누르거나 화면을 스와이프 하는 등 특정 액션을 취했을 때 어떤 방식으로 화면 간 전환이 이루어지는지 보여준다.

스토리보드 작업화면 조정1. X code 화면이 처음 열렸을 때 화면 좌측 네비게이터 영역에서 [Main.storyboard]를 선택하면 스토리보드가 화면에 나타난다.

그런데 왼쪽 내비게이터 영역과 문서 아웃라인 영역이 꽤 많은 부분을 차지해 스토리보드 영역이 상대적으로 작아 보인다. 이럴 때는 네비게이터 영역 또는 문서 아웃라인 영역을 줄이거나 닫으면 스토리보드를 보기 쉬워진다.

2. 문서 아웃라인 영역 숨김 문서 아웃라인 영역은 [Hide Doument Outline] 버튼을 클릭하여 닫을 수 있다.

이 아이콘이 [Hide Doum ent Outline]이다 이 아이콘은 스토리보드 아래 칸에 있다. 다큐먼트 아웃라인의 여역이 사라지고 스토리보드가 커 보인다.

이제는 편집기 영역을 알 수 있을 것이다.

1. 기본 에디터(s tandard) 버튼 – 에디터 영역에 기본 에디터를 연다.

2. 보조 에디터(Assistant e ditor) 버튼 – 에디터 영역에 보조 에디터를 엽니다.

3. 버전 에디터(Vers ion Editor): 버전 에디터를 연다. 버전 편집기는 Source Control 기능을 이용할 경우 이전 버전과 현재 버전의 차이를 확인할 수 있다.

4. 네비게이터 영역을 숨기는 표시(Hide or show the Navigator) 버튼: 좌측 네비게이터 영역을 숨깁니다.

5. 디버깅 영역 숨김(Hide or shaw the Debug area) 버튼: 아래쪽 디버깅 영역을 숨깁니다.

6. 유틸리티 영역 숨김(Hide or show the Utilities) 버튼: 우측 유틸리티 영역을 숨깁니다.

그럼 지금부터 스토리보드의 크기를 변경해 보자 1. 스토리보드 아랫부분의 [Viewas : 아이폰8(wChR)]을 클릭한다.

2. 아래쪽에 다양한 디바이스 형태의 선택창이 뜬다.

3. 여기서 원하는 기기와 방향을 선택합니다. 여기서는 아이폰8+를 선택했다.

그러면 스토리보드로 어플 화면을 만들어보자.

레이블 , 수정 1. 레이블 추가

우선 Hello라는 메시지를 출력하는 레이블을 추가해 본다. Xcode 화면 우측 하단의 오브젝트 라이브러리(object Library)에서 찾아 드래그 한다. 오브젝트 리스트 중에서 스크롤하여 찾거나 검색란에 ‘레이블(Label)’을 입력한 후 선택하고 스토리보드로 드래그 하여 화면상의 중앙에 배치한다.

여기에서 라이브러리의 종류에 대해서 알아보자.

File Template Library 1. File Template Library : 파일 템플릿 목록을 보여준다. 파일 템플릿 라이브러리는 새로운 파일을 프로젝트에 추가할 때 사용한다. Cocoa Touch Class, Swift File, Objective – C File, Header File, C+ File 등의 목록에서 원하는 몰록을 선택하여 네비게이터 영역으로 드래그 하여 새로운 파일을 추가할 수 있다. 메뉴의 [File -> New -> File]을 선택한 후 파일 템플릿을 선택하는 것과 동일한 동작을 한다.

Code Snippet Library 2. Co de Snippet Library : 미리 지정해 놓은 자동 완성 코드 리스트를 보여준다. 원하는 자동 완성 코드를 마우스로 선택하고 편집기 영역으로 불러와서 사용할 수 있다.

Object Library 3. Object L ibrary: iOS에서 사용할 수 있는 객체의 목록을 보여준다. 레이블, 버튼, 텍스트 필드, 뷰 컨트롤러 등의 오브젝트를 마우스로 선택하여 스토리보드를 불러와 사용할 수 있다.

– Media Library 4 . Media Li brary : 프로젝트에서 사용할 그림, , 오디오, 파일 목록을 보여준다. 마우스로 드래그 하여 사용할 수 있다. 프로젝트에 첨부된 이미지 혹은 동영상 등이 없으면 ‘No Matches’라는 메시지가 나타난다.

2. 레벨의 길이 조정 레벨의 길이보다 출력하는 내용이 더 긴 경우 내용이 잘 보이지 않는다. 그래서 레이블을 선택한 후 레이블의 왼쪽 또는 오른쪽에 마우스를 놓으면 크기를 조절하는 아이콘이 나오는데 마우스를 움직여 레이블의 크기를 조절한다.

3. 레이블을 마우스로 더블클릭한 후 내용을 “정보통신공학과”로 변경하면 내용이 바뀐다.

4. 레이블을 선택한 상태에서 화면 우측 인스펙터 영역의 [Attributes inspector] 버튼을 클릭한다. 그리고 정렬[Alignment]를[중앙 맞춤]으로 선택한다.

여기서 어느 정도 완성된 앱 화면을 가지고 상세하게 설명한다.

1, 1-1: 레이블을 선택한 상태에서 화면 우측 인스펙터 영역의 [Attributes inspector] 버튼을 클릭한다. 그리고 정렬[Alignment]를[중앙 맞춤]으로 선택한다.

2. Label의 서색을 변경한다.

문자 글씨체(Font)를 바꾸는 기능이다.

4. Label의 벽지 색상을 변경한다.

5. Object Library에서 Label을 다시 이용하여 이름을 짓는다.

6. 텍스트 필드(Text Filed)를 추가하여 사용자가 이름을 입력할 수 있도록 추가한다.

7. 버튼(버튼)을 추가한다.

마지막으로, *아울렛 변수와 *액션 함수를 추가한다.

* 아웃렛 변수 : 앞에서 만든 텍스트 필드에 사용자가 일무를 입력하면 입력한 텍스트를 받아 저장하는 변수를 만들고, 만든 변수와 텍스트 필드를 연결시켜 주어야 한다.

* 액션함수 : [Send]라는 버튼을 클릭하였을 때 입력한 이름을 읽고 레이블에 출력할 함수를 만들어 이 함수를 버튼과 연결시켜 준다.소스작업을 위한 보조편집기 영역을 펼친다.이제 먼저 추가한 텍스트 필드에 연결한 아웃렛 변수와 버튼에 연결할 액션 함수를 추가해 본다. 아웃렛 변수와 액션 함수를 추가하기 위해서는 보조 에디터 영역(Assistant Editor)을 열어야 한다. 화면 우측 상단의 [Show the Assistant Editor] 버튼을 클릭하면 화면 중앙의 스토리보드 부분이 둘로 나뉘며 좌측에는 스토리보드, 우측에는 소스를 편집하는 영역이 나타난다.

이상 Xcode에 대한 설명 를 끝내다.