iOS 개발환경 구성하기

본 포스팅은 그린컴퓨터아카데미에서 진행되는 “하이브리드 웹,앱 개발자 양성과정”에서 NCS 보조 학습 교재로 활용하기 위해 작성되었습니다. ITPAPER 멤버의 수업 교재 활용 이외에 이 포스팅에 대한 어떠한 방식의 2차 활용도 허용하지 않습니다.


NCS 분류 문화,예술,디자인,방송 > 문화콘텐츠 > 문화콘텐츠제작
능력단위 앱 개발계획
학습모듈명 앱 개발계획

 

준비사항

이 포스팅의 내용을 수행하기 위해서는 macOS가 구동되는 하드웨어(iMac, MacBook, Mac Mini)가 필요합니다.

 

 

XCode 설치하기

XCode는 macOS에서 mac용 응용프로그램, iOS용 응용프로그램을 개발하기 위해서 사용하는 개발툴(IDE)입니다. 이전에는 애플 개발자사이트에서 직접 내려받아야 했지만, 최근에는 macOS에 내장되어 있는 AppStore를 통해서 내려받을 수 있습니다.

AppStore 실행하기

macOS의 DocBar에서 AppStore를 실행합니다.

 

Xcode 검색하기

AppStore가 실행되면 우측 상단의 검색어 입력 박스에 “xcode”라고 입력하고 엔터를 누릅니다. 화면에 표시되는 검색결과 중에서 “Xcode” 항목에 대한 “설치”버튼을 클릭합니다.

 

Xcode 설치 및 실행하기

macOS의 Launchpad를 통해서 Xcode가 설치중인 모습이 확인됩니다.

 

설치가 완료되면 아이콘을 클릭하여 XCode를 실행합니다.

 

최초 구동시에는 아래와 같이 이용 약관 동의 화면이 표시될 수 있습니다.

 

 

HelloWorld 프로젝트 만들기

신규 프로젝트 생성

XCode를 실행하면 아래와 같이 “Welcome to Xcode” 화면이 표시됩니다. 이 화면에서 “Create a new Xcode project” 항목을 클릭합니다. 만약 이 화면이 표시되지 않는다면 “File > New > Project” 항목을 선택하여 진행할 수 있습니다.

 

프로젝트 템플릿 선택하기

생성할 프로젝트 종류를 선택합니다. “Single View Application” 항목을 선택하고 다음 단계를 진행합니다.

 

프로젝트 생성 정보를 입력.

  • Project Name : 프로젝트의 이름입니다. 여기에 입력한 값으로 디렉토리가 생성됩니다. 한글은 입력할 수 없습니다.
  • Organization Name : 조직이름. 일반적으로 개발사의 이름입니다. 개발자 본인의 이름을 입력하기도 합니다.
  • Organization Identifier: 조직의 고유 식별자 입니다. 일반적으로 개발사나 개발자의 웹 사이트 주소(도메인)를 역순으로 입력합니다. 여기서는 특별한 도메인이 없다고 가정하고 study.ios로 지정하였습니다.
  • Bundle Identifier: 이 앱의 고유 식별자 입니다. Organization Idetifier와 ProjectName이 조합되어 자동으로 생성됩니다.
  • Language : 이 프로젝트에서 사용할 프로그래밍 언어 입니다. 여기서는 Swift를 선택합니다.

 

프로젝트 저장 경로 선택하기

프로젝트가 저장될 경로를 지정합니다. 이 때 “Create Git repository on” 항목의 체크를 해제합니다. Git은 최근 각광받고 있는 버전관리 시스템 입니다. 여기에서는 Git에 대한 설명은 생략하겠습니다.

 

 

화면 구성하기

스토리보드에 Label 컴포넌트 배치하기

왼쪽의 프로젝트 트리에서 “Main.storyboard”를 선택합니다. 이때 더블클릭이 아닌 싱글클릭을 해야 합니다. 더블클릭을 할 경우 해당 파일이 새 창에서 열리게 됩니다.

storyboard는 App의 화면을 구성하는 작업을 진행하기 위한 파일입니다. storyboard가 열리면 화면 우측 중반부의 아이콘들 중에서 세 번째 아이콘을 클릭하여 화면에 배치할 수 있는 컴포넌트들의 목록을 엽니다.

컴포넌트들 중에서 “Label”이라는 항목을 선택하여 화면 중앙에 드래그 앤 드롭 합니다.

 

Label의 표시 내용 변경하기

화면에 배치한 Label을 더블클릭하면 표시될 메시지를 편집할 수 있습니다. “Hello World”라고 입력합시다.

 

Button 배치하기

같은 방법으로 “Button” 항목을 화면에 배치하고 “Touch Me”라고 메시지를 수정합니다.

 

 

버튼을 눌렀을 때에 대한 동작 구현하기

보조뷰 열기

XCode의 우측 상단에 두 개의 원이 겹쳐져 있는 모양의 아이콘이 표시되어 있는 버튼이 있습니다. 이 버튼을 클릭하면 “보조 뷰”라고 부르는 소스 편집창이 표시됩니다.

 

Label의 아웃렛 추가하기

왼쪽의 화면 영역에서 “Label”을 컨트롤 키를 누른 상태로 소스코드의 빈 공간에 드래그 앤 드롭 합니다.

 

곧 말풍선이 표시됩니다. “Connection”항목에서는 “Outlet”을 선택하고, “Name”에는 “myLabel” 이라고 입력한 후 “Connect”를 누릅니다.

 

“Label”에 대한 아웃렛이 생성되었습니다.

 

Button의 Action 추가하기

이번에는 “Button”을 컨트롤키를 누른 상태로 소스코드의 빈 공간에 드래그 앤 드롭합니다.  만약 빈 공간이 없다면 엔터키를 이용해서 빈 공간을 미리 만들어 주면 됩니다.

 

버튼을 보조뷰에 끌어 놓은 후 표시되는 말풍선에서 “Connection” 항목에는 “Action”을 선택하고 “Name”에는 “onButtonClick”이라고 입력한 후 “Connect”를 누릅니다.

 

버튼이 클릭되었을 때 동작할 메서드가 자동으로 생성됩니다. 이 메서드의 내부에 구현하는 내용이 버튼 클릭시 동작할 기능이 됩니다.

 

Action 함수 내부의 기능 구현하기

추가된 함수의 내부에 “myLabel.text = “안녕하세요. 아이폰” 이라고 입력합니다. Swift언어는 프로그램의 구문 끝에 세미콜론을 적지 않습니다. 주의하도록 합시다.

 

 

시뮬레이터를 통한 결과 확인

프로젝트 실행하기

Xcode의 왼쪽 상단에 위치하는 실행버튼을 클릭하면 시뮬레이터를 통해서 결과를 확인할 수 있습니다.

 

최초로 결과를 확인하는 경우 “Mac”에서 개발자 모드를 활성화 할지 묻는 대화상자가 표시됩니다. “Enable”을 클릭하여 개발자 모드를 활성화 하도록 합시다.

 

구동결과 확인

시뮬레이터가 구동되면서 결과가 표시됩니다.

버튼을 클릭하면 “Label”에 표시되는 텍스트가 소스코드에 작성한 내용으로 변경되는 것을 확인할 수 있습니다.

댓글 남기기