Level 1 : Xcode, First meet!

Jay·2025년 2월 6일

Level 1 : Xcode, First meet!

목록 보기

1/1

Ready

iOS 개발은 애플에서 제공하는 엑스코드라는 툴을 사용합니다.
엑스코드의 한글판도 없을 뿐더러 어설픈 번역이 오히려 혼란을 조장할 수 있으므로 이 책에서는 용어를 사용할 때 최대한 엑스코드의 표기대로 따르는 것을 원칙으로 합니다.
이 책은 철저하게 입문자에게 초점이 맞춰져 있으므로 처음 나오는 개념에 대한 설명은 어느정도 공부를 한 분이라면 다소 장황하게 느껴질 수 있지만 한번 설명은 개념은 지면상 반복하지 않습니다.
갑자기 모르는 내용이 등장한다면 앞부분에 분명히 설명이 되어 있을것이므로 돌아가서 공부하길 바랍니다.

프로그래밍은 수학적인 개념과 외국어적인 요소를 동시에 지니고 있어서 공부할 때도 수학과 영어의 접근방법을 동시에 실행하기를 권장합니다.

수학적 접근 : 수학을 읽기만 해서는 절대 실력이 상승하지 않습니다. 문제를 풀기 전에 고민하는 과정과 답을 확인 후 고찰하는 과정이 필요합니다.
외국어적 접근 : 잘 몰라도 무조건 따라하고 계속 사용하고 반복하는 과정이 필요합니다.

각 챕터의 구성은 다음과 같습니다.

Goal
챕터에서 익히려는 핵심 내용입니다.

Meterials
Goal 을 달성하기 위한 재료입니다.

Thinking First
코딩하기전 먼저 생각해 볼 내용 또는 힌트를 제시합니다. 어느 정도 실력이 쌓이면 이 단계에서 먼저 코딩을 시도해 보는것이 좋습니다.

Making Next
Meterials 를 이용해 코딩한 내용입니다. 본인이 작성한 내용과 비교해 보시길 바랍니다.

Concept Check
챕터에서 필요한 개념을 따로 설명합니다.

Closing
추가로 생각해볼 문제를 제시하고 정리합니다.

전체적인 테마를 세계여행으로 정하여 관련된 앱을 만들면서 필요한 개념들을 설명하는 방식을 취합니다.

앱 하나를 만들기위해서 필요한 기술을 크게 2가지로 나눠본다면,

툴을 다루는 기술
언어를 다루는 기술

이라고 볼수 있습니다. iOS에서의 툴은 엑스코드이고 언어는 스위프트입니다.
스위프트는 버전 5.0에 맞추어 씌여졌고 시간이 지남에 따라 다소 변경되는 부분이 있겠지만 공부하는데 버전에 따른 이슈는 큰 문제가 아님을 알게 되실겁니다.

이 책에서는 두가지 기술에 대해 기본적인 사용법을 원리위주로 설명하여 입문자가 스스로 새로운 기술을 익힐 수 있도록 하는데 주안점을 두었습니다.

프로그래밍 공부를 지속하지 못하는 이유중 하나는 어려운 개념과 더불어 공부하는 개념이 실제 개발에서 왜 필요하고 어디에 쓰이는지 알지 못해서 흥미를 잃기 때문이라고 생각합니다.
그래서 이 책의 커리큘럼은 다른 책과 다소 다른 패턴일 수 있는데 핵심 컨셉은 비유를 활용하여 개념의 분명한 이해를 돕고, 각 프로젝트를 만들면서 그 상황에서 실제 필요한 개념을 설명함으로써 왜 그 주제에 대한 공부가 필요하고 어떻게 쓰이는지 바로 알 수 있도록 하였습니다.
본문에서는 지면상 낮춤말을 사용합니다.

Start

엑스코드를 처음 접한다면 설렘과 동시에 상당히 생소하고 이질적인 감정이 드는것이 당연할 것이다.
레벨1에서는 본격적인 개발 공부에 앞서 엑스코드라는 개발도구에 적응해보는 시간이다.

혹시 설치부터 모르겠다면 맥에 기본 설치되어 있는 앱스토어에서 ‘xcode’ 를 검색해보자.

‘설치' 버튼을 누르고 한참을 기다리면 맥북에 엑스코드가 설치된다. 무료이므로 자유롭게 사용할 수 있지만 차후에 개발한 앱을 배포하려면 유료 개발자 계정이 필요할 것이다.
물론 아직은 배포를 논할 단계가 아니므로 충분히 연습해서 배포를 할 정도의 실력이 쌓이면 개발자 계정은 그때 신청해도 늦지 않다.
이제 그 머나먼 여정을 시작해보자!

1.1 Xcode, 첫만남

처음 엑스코드를 실행해보면 다음과 같은 런처화면을 볼 수 있다.
현재 엑스코드 버전은 11.3임을 알 수 있는데 엑스코드 버전에 따라 실행되는 MacOS 버전과 개발할 수 있는 언어,iOS 버전이 달라질 수 있다.
버전이 낮으면 최신 iOS 버전에 맞춰 개발하기 어려운 문제가 있고 높으면 이전 버전에서 개발한 코드가 동작하지 않을 수 있어서 변환 작업이 필요하므로 각자 처한 상황에 맞춰 결정해야 하는데 결국 버전은 올릴수 밖에 없으므로 연습 할 때는 가장 최신 버전으로 유지하도록 하자.
(이 책이 출간된 후 오랜 시간이 지나 공부하게 되면 버전이 안맞아 다소 다른 부분이 있겠지만 이 책은
기본적인 내용에 중점을 두었으므로 큰 차이점은 없을 것이다.)

“Create New Project” 를 클릭해서 새로운 프로젝트를 만들어 보자.

템플릿을 선택하는 박스이다. 엑스코드는 iOS 뿐 아니라 애플에 관련된 다양한 프로그램 개발이 가능하다.
우리는 iOS 의 애플리케이션을 개발할 것이기 때문에 iOS 탭의 'App'에서 프로젝트 개발을 시작한다.

선택후 Next 를 클릭해보자.

Product Name 에 앱의 이름을 설정한다. Interface 는 SwiftUI/Storyboard 중 선택할 수 있는데 우선 Storyboard 위주로 설명할것이라서 Storyboard 로 선택한다.
나머지는 지금 단계에서 중요치 않고 변경 가능하므로 기본값으로 두고 Next 를 클릭하자.

이어서 프로젝트가 생성될 폴더를 선택하고 Create 를 클릭하면 다음과 같은 엑스코드의 메인 화면과 만난다.

앞으로 새로운 용어를 많이 접하게 될 것인데 용어는 약속이므로 용어에 대한 설명을 꼭 암기하도록 하자.
당연하게도 용어에 대한 개념이 흔들리면 문장자체가 이해되지 않을것이다.

[특수기호가 나타내는 키]

⌘ : command
⇧ : shift
⌥ : option

자주 사용하는 기능들은 단축키를 알아두면 편리할 것이다.

엑스코드는 크게 5개의 화면으로 구성되어 있다.

툴바(ToolBar) : 앱을 만들거나(building) 실행(running) 하는 컨트롤을 담당한다.

네비게이터 영역(Navigator Area) : 파일이나 이미지등 프로젝트의 내용물(assets)을 관리하는 프로젝트 네비게이터를 포함해 총 8개의 네비게이터로 구성되어 있으며 영역 상단의 작은 아이콘을 클릭해서 각 네비게이터를 전환할 수 있다.

에디터 영역(Editor Area) : 코드나 그래픽화면을 편집하는데 그래픽화면을 편집할 때 에디터 영역을 ‘인터페이스 빌더(Interface Builder)’ 라고 바꿔 칭한다.

유틸리티 영역(Utility Area) : 인터페이스의 속성(attributes)을 편집할 수 있는 애트리뷰트 인스펙터(attributes inspector)를 포함한 6개의 인스펙터로 구성되어 있다.

디버그 영역(Debug Area) : 앱의 로그를 확인하고 디버그 콘솔(Debug Console)과 커뮤니케이션 한다.

메뉴에서 Xcode > Preference(⌘,) 를 클릭하면 각종 환경설정을 할 수 있다.
앞으로 조금씩 자신에게 최적화된 환경으로 설정하는 것도 필요할 것이다.

우선 Fonts & Colors 탭에서 읽기 편안한 폰트와 컬러로 설정해보자.

네비게이터 영역의 첫번째 네비게이터인 프로젝트 네비게이터에서 Main.storyboard 파일을 클릭하면 아이폰과 유사한 뷰가 보인다.
이것이 UI를 시각적으로 편집할 수 있는 스토리보드(Storyboard) 이고 뒤의 배경을 캔버스(Canvas)라고 한다.

앞으로 눈에 보이는 대부분의 작업들은 여기 인터페이스 빌더에서 하게 될 것이다. 첫 시작을 기념하는 관례를 따라서 “Hello, World” 를 화면에 출력해보자.

스토리보드가 클릭된 상태에서 툴바 우측 + 아이콘을 클릭하면 오브젝트 라이브러리가 나타난다.
오브젝트 라이브러리는 앱을 만들기 위한 도구들을 모아놓은 일종의 창고라고 생각하자.

오브젝트 라이브러리에서 검색창에 ‘label’ 입력해보면 문자를 입력할 수 있는 레이블이 표시된다.
인터페이스빌더로 드래그&드롭하여 파란색 기준선이 나타나는 정가운데 위치시키고 더블클릭하여 텍스트를 “Hello, World” 로 바꿔보자.

툴바 좌측에 삼각형모양을 클릭하면 앱을 빌드(만들고)하고 시뮬레이터나 실제 디바이스에서 구동하는 작업을 실행한다. 앞으로 런버튼(⌘R)이라고 부를 것이다. 클릭해보자.

런버튼 우측영역을 스킴(Scheme) 이라고 한다.

scheme : (운영) 계획, 제도

현재 ‘MyFirstProject’ 라는 스킴이 선택되어져 있고 우측에 구동할수 있는 디바이스를 선택할 수 있다. 원하는 아이폰 기종으로 변경하고 다시 실행해보자. (⌘R)

축하한다. 첫번째 프로젝트를 만들고 아이폰 시뮬레이터에서 구동해보았다.

그러나 예상과 달리 시뮬레이터에서는 레이블이 정가운데 있어 보이지 않는데 이제 그 이유를 알아보자.

1.2 Concept Note - 오토레이아웃의 기본개념

먼저 UI(User Interface) 에 대해 정의해보자. 인터페이스라는 단어는 꽤 포괄적인 의미를 지니고 있지만 핵심은 서로 다른 무언가가 소통하기 위한 창구역할이다. 우리는 앱과 어떻게 소통할까?
화면을 보고 터치하고 반응하므로 결국 디바이스에 보이는 화면이 UI 인 것이다.

iOS 앱들이 얼마나 다양한 디바이스에서 실행되는지 생각해보자. 예들 들어 iPad Air, iPad Pro, 그리고 각각의 iPhone 들이 있고 앞으로도 새로운 디바이스는 계속 생겨날 것이며 각 디바이스의 화면 사이즈는 대부분 다르다. 그렇다고 각각의 디바이스의 사이즈에 맞추어 따로 UI 개발을 하는 것은 매우 지루하고 소모적인 일이 될 것이다.

그래서 엑스코드에서는 UI 는 한번만 만들고 각각의 환경에 맞춰서 유동적으로 변화하는 방법을 제공하는데 이른바 오토레이아웃(Auto Layout) 이다.

먼저 엑스코드의 좌표개념을 살펴보면 최상단 좌측을 원점으로 오른쪽이 x 좌표의 +, 아래쪽이 y좌표의 + 를 의미하고 거리의 단위로 포인트(point)를 사용한다.

이전 챕터에서 다룬 것처럼 어떤 컴포넌트를 스크린에 정중앙에 위치시키고 싶은 상황이다. 가령 특정 디바이스에서 “x방향으로 250포인트, y방향으로 200포인트 떨어진 지점" 을 정중앙이라고 생각하고 이같은 위치를 설정해 놓았다고 생각해보자. 그런데 디바이스를 옆으로 돌리거나, 디바이스의 스크린이 더 커지거나 혹은 작아진다면 최초에 설정해놓은 위치는 정중앙이 되지 않는다.

이렇게 너무 구체적인 거리를 이용하면 디바이스의 크기나 좌표 등에 따라 위치는 천차만별이 될 수 있다. 그래서 우리는 좀 더 상대적이고 추상적으로 레이아웃을 생각해야 할 필요가 있다.

오토레이아웃에서는 이른바 제약조건(constraints)이라는 개념을 이용하는데
예를 들어, 레이블을 스크린 중앙에 배치하기 위해 “수평의 중앙, 수직의 중앙" 이라는 조건을 설정해 주는 것이다.
따라서 스크린의 사이즈가 제각각이더라도 이러한 제약조건에 따라 항상 정중앙에 위치 시킬 수 있는것이다.

제약조건은 상당히 강력하고 그만큼 복잡한면도 있다. 꽤 많은 연습이 필요하지만 위에서 말한 핵심개념에서 크게 벗어나지 않으므로 계속 연습하다보면 자연스럽게 익숙해 질 것이다.

UI 는 한번만 디자인한다. 그리고 어디서든 사용한다.
이제 오토레이아웃을 적용하여 UI 를 디자인해보자.

1.3 오토레이아웃 적용하기

Goal

제약조건(Constraint) 개념을 이해하고 오토레이아웃을 적용해보기.

Thinking First

앞서 만든 앱의 디바이스를 각각 변경해서 실행해보자. 디바이스마다 레이블의 위치가 조금씩 다르다.
이제 모든 디바이스에서 정 가운데 위치하도록 제약조건을 설정해보자.

Making Next

프로젝트 네비게이터에서 Main.storyboard 의 현재 만들어진 레이블을 선택한다.

하단의 바를 주목해보자. 현재 좌측을 보면 아이폰16 스크린에 맞게 설정되어 있으므로 아이폰16에서 실행하면 동일하게 정가운데로 나타나지만 다른 기기에서는 다른 위치로 표시되는데 클릭하면 다른 디바이스로 변경가능하다. 중앙에 돋보기 버튼으로 확대,축소를 할 수 있고 우측에 3개의 버튼이 오토레이웃과 관련된 메뉴로서 Align 버튼을 클릭하면 다음과 같은 메뉴가 나타난다.

여기서 정렬(Align) 과 관련된 제약조건을 설정할 수 있다.
‘Horizontally in Container’ 는 현재 선택된 컴포넌트를 포함한 컨테이너(여기서는 기본뷰이다) 에서 수평 중앙으로부터 몇 포인트 떨어진 좌표에 위치시킬것인가를 의미하는데 수평의 중앙에 위치시킬 것이므로 ‘0’으로 설정하여 체크하고 ‘Add Constraints’ 를 클릭해보자.

이제 엑스코드에서 제약조건을 설정하기 시작했으므로 정상적으로 설정된 제약조건은 푸른색으로, 불충분하거나 충돌하면 붉은색으로, 현재 보여지는 뷰와 제약조건이 일치하지 않을 경우 노란색으로 경고해 줄 것이다.

좌측의 계층뷰(Hierarchy)를 보면 붉은색 화살표가 표시되어 제약조건이 불충분하거나 충돌함을 표시해주고 클릭해보면 어떤 조건이 문제가 되는지 알 수 있다. 우리는 지금 레이블에게 수평의 중앙에 위치하도록 제약조건을 설정해주어 x 좌표의 포지션은 문제가 없지만 y 좌표를 알 수 없기 때문에 에러가 발생한 것이다.

정렬 제약조건중 ‘Vertically in Container’ 를 마저 추가해주면 에러는 사라지고 정상적으로 설정된 2개의 제약조건이 푸른색으로 표시된다.
이제 디바이스를 변경하면서 앱을 실행해보면 레이블은 어떤 디바이스에서 실행하든 정중앙에 나타난다. 이것이 오토레이아웃의 기능이다.

레이블을 드래그하여 위치를 살짝 변경해보자. 제약조건이 노란색으로 바뀌는데 좌측에 표시되는 노란색 화살표를 클릭해보자.

제약조건과 현재뷰가 일치하지 않는다는 경고를 나타낸다. 노란색 삼각형을 클릭하면 다음과 같은 메뉴가 나타난다.

Update frames : 프레임을 제약조건에 맞게 이동시키므로 원래위치로 돌아갈 것이다.
Update constraints : 현재 프레임에 맞게 제약조건을 변경한다.
Reset to suggested constraints : 설정된 제약조건을 모두 삭제하고 엑스코드가 임의로 재설정한다.
Apply to all views in containter : 체크하면 컴포넌트가 포함된 컨테이너의 모든 뷰를 동일하게 적용한다.

‘Update constraints’ 를 체크하고 ‘Fix Misplacement’ 를 클릭해보자. 해당위치에 맞게 제약조건이 변경되었다.

레이블을 하나 더 추가해서 적당한 텍스트를 입력하고 우측에 ‘Attribute inspector’ 에서 폰트나 컬러 등을 자유롭게 변경해보자.

새로 만든 레이블을 선택하고 이번엔 우측에 3번째 버튼(Add New Constraints)을 클릭해보자. 다른 컴포넌트와의 관계에 대한 일반적인 제약조건을 설정하는 메뉴로서 상단에서 동서남북 수직방향으로 가장 가까운 컴포넌트에 대한 거리를 설정할 수 있다.

이 값을 변경하고 싶으면 새로운 숫자를 입력하고 붉은색 점선을 클릭하면 실선으로 변경된다. ‘Constrain to margins’ 는 여백을 포함할지에 대한 옵션이다.
현재 ‘Hello,World’ 레이블과 80포인트, 좌측 끝과 100 포인트 떨어져 있는 제약조건을 설정하기 위해 실선으로 변경했다.

위치에 대한 제약조건만 설정한 것이므로 스크린에 따라 컴포넌트의 사이즈는 변경될 수 있다. 만약
특정 크기를 유지해야 한다면 ‘Width’ 와 ‘Height’ 도 체크해주면 될 것이다. ‘Aspect Ratio’ 는 현재 비율을 유지하는 제약조건이다. 조건에 대한 설정이 끝났다면 ‘Add Constraints’ 를 클릭해보자.

마찬가지로 ‘I learn to Xcode’ 레이블에 대한 제약조건이 설정되었으므로 디바이스가 변경되어도 설정한 조건을 유지할 것이다.

Closing

오토레이아웃의 기본적인 개념을 익혀 보았다. 사실 깊게 들어갈수록 복잡한 부분이 많기 때문에 앞으로도 꾸준한 연습이 필요할 것이다.

1.4 Concept Note

iOS Tools & Technologies

우리가 iOS 앱을 개발할 수 있도록 많은 사람들이 만들어 놓은 툴과 기술에 대해 알아보자.
그동안 많은 앱들은 C언어에 기반한 언어인 Objective-C 언어로 개발이 되어왔다.
2014년에 애플에서 새로운 언어인 스위프트를 발표했고 최근의 개발자들은 스위프트를 이용해 앱을 개발하는 추세이다.

우리가 스위프트로 코드를 만들면 컴파일러(Compiler)라는 일종의 번역기가 iOS 디바이스가 이해할 수 있는 기계어로 변환하여 앱이 동작할 수 있게 된다.

컴파일러는 우리가 짜놓은 코드와 더불어 다른 개발자가 이미 만들어놓은 추가적인 코드를 합하여 컴파일링한다. 여기서 추가적인 코드는 라이브러리(library) 혹은 프레임워크(framework) 라는 이름으로 감싸져 있다.

예를 들어, 어떤 사운드를 플레이하는 코딩을 할때 우리는 그 사운드가 재생되는 방법에 대해 고민할 필요없이 이미 만들어진 프레임워크를 가져와서 쓰기만 하면 될 뿐이다.
바퀴가 이미 발명이 되었는데 또 바퀴를 만들기 위해 애쓰지 말고 더 멋진 바퀴를 만들기 위해 집중하는 것이 당연한 과제일 것이다.

엑스코드는 앱을 만들기 위한 통합개발환경(IDE)으로서 애플에서 제공한 일종의 목공소다.
인터페이스 빌더에서 UI 를 시각적으로 설계하고 손쉽게 코드와 접목시킬 수 있으며 시뮬레이터에서 개발한 코드가 잘 동작하는지 테스트하고 인스트루먼트는 앱을 모니터링하고 디버그가 용이하도록 도와준다.

우리는 엑스코드라는 목공소에서 다양한 연장(라이브러리)과 설비(프레임워크)를 이용하여 원하는 제품을 만들어내면 되는 것이다. 의자 하나를 만들때도 다양한 방법이 존재하지만 훌륭한 목수라면 아무렇게나 만들지 않고 어느정도 검증된 방법론을 따라간다.

앱을 만들때도 마찬가지인데 그러한 방법론을 패턴(Pattern) 이라고 칭하고 그중 널리 쓰이는 패턴이 MVC 패턴이다. (이제 왕관을 넘겨줄 때가 된 듯하다)
물론 많이 쓰이는 패턴은 시대에 따라 변할수 있고 패턴을 익히는 이유는 코드를 조직적으로 관리하여 좀 더 훌륭한 코드를 만들려는 목적인데 여기서 훌륭한 코드란 읽기 쉬워야 하고, 간결하며, 단단하고, 유지보수가 용이함을 의미한다.

우리가 런버튼을 클릭하면 이러한 모든 재료들이 어우러져 하나의 앱이 동작한다. 하지만 가장 중요한 요소는 그 앱을 만드는 개발자임은 두말할 여지가 없다.

1.5 기본 개발방식 이해하기

Goal

기초적인 구현을 통해 코드가 왜 필요한지 이해해보기.

Thinking First

우리는 이미 오브젝트 라이브러리에서 레이블을 사용해보았다. 마찬가지 방법으로 다른 오브젝트도 에디터로 드래그&드롭하여 사용하는 방식이다.
오브젝트 라이브러리 하단에 필터에서 ‘button’ 을 검색하여 현재 뷰 하단의 적당한 위치에 이동시키고 스크린에서 잘리지 않도록 제약조건을 설정해보자.
그리고 버튼을 탭하면 배경색이 변경되도록 구현하여 기본적인 기능구현 방식을 익혀볼 것이다.

Making Next

우선 버튼을 더블클릭하여 ‘Chage Color’ 로 변경하고 제약조건을 설정해보자. 엑스코드에서 제약조건을 설정하는 방법은 꽤 다양하다. 버튼의 제약조건을 현재 뷰에 대해서 설정하고 싶다면 버튼에서 컨트롤드래그하여 계층뷰의 ‘View’ 에서 드롭해보자.

팝업메뉴에서 원하는 조건을 선택해주면 되는데
Leading Space 는 영어를 비롯한 대다수 언어처럼 왼쪽부터 읽어나가는 언어일 경우 왼쪽공간을, Trailing Space 는 오른쪽 공간을 의미하며 오른쪽부터 읽는 언어는 그 반대이다.
(대부분 왼쪽부터 읽는 언어를 사용하므로 Leading - Left 로 연결지어 기억해두자.)

Safe Area는 iOS에서 UI 요소가 화면에서 잘리는 것을 방지하기 위해 안전하게 사용할 수 있는 영역을 의미한다. iPhone의 다양한 화면 크기, 노치(Notch), 홈 인디케이터(Home Indicator), 상태 바(Status Bar) 등을 고려하여 Apple이 정의한 안전한 UI 배치 공간이다.

시프트키를 누른고 클릭하면 복수선택이 가능하다. 스크린에서 현재 버튼과 왼쪽여백과 떨어진 거리, 최하단과 떨어진 거리만큼 제약조건을 설정하려 한다. ‘Add Constraints’ 를 클릭하면 제약조건이 설정된다. 계층뷰가 아닌 에디터내의 현재뷰에도 동일하게 설정가능하지만 방향에 따라 필요없는 조건은 표시되지 않는다.

앱을 실행해서 시뮬레이터에서 버튼이 잘 보이는지 확인해보자. 클릭해보면 아무런 동작도 하지 않는데
여기에 배경색이 바뀌는 액션을 구현할 것이다. 드디어 코딩할 차례가 왔다. 어시스턴트 에디터를 열어보자.

버튼을 클릭한 상태에서 코드안으로 컨트롤 드래그하면 보조선이 생기는데 적당한 위치에 드롭하면
다음과 같은 메뉴가 팝업된다.

Connection 은 Action 으로, Name 은 ‘changeColor’ 로 변경하고 Connect 버튼을 클릭한다.

@IBAction func changeColor(_ sender: Any) {
      
}

‘changeColor’ 라는 액션메서드가 생성되었다. 지금은 액션메서드라는 단어의 의미나 각각의 키워드가 이해되지 않을것이다. 단순히 버튼을 클릭하면 중괄호안의 내용이 실행된다는 정도만 알아두자.
중괄호 안에 아래와 같은 코드를 입력한다.

   view.backgroundColor = UIColor.brown

입력하다 보면 관련된 코드가 나타나는데 탭이나 엔터키로 자동완성하면 편리하다.

앱을 실행해서 버튼을 클릭해보면 배경색이 브라운컬러로 바뀐다.
이제 각자 2개의 버튼을 더 배치하여 각각 다른 컬러로 변경되도록 구현해보자.
비슷한 방식으로 응용하면 어렵지 않을 것이다.


   @IBAction func changeColorToBrown(_ sender: Any) {
       view.backgroundColor = UIColor.brown
   }
   @IBAction func changeColorToWhite(_ sender: Any) {
          view.backgroundColor = UIColor.white
   }
   @IBAction func changeColorToBlack(_ sender: Any) {
          view.backgroundColor = UIColor.black
   }

다른 이름과 보조를 맞추기 위해 기존의 changeColor 를 changeColorToBrown 으로 변경해보자.
다시 앱을 실행해서 버튼을 클릭해보자. 새로 만든 버튼은 잘 동작하겠지만 변경된 버튼을 클릭하면 앱이 멈춘다. ‘앱이 크래쉬(Crash)되었다' 라고 표현한다.

처음에 만든 버튼을 마우스 오른쪽버튼으로 클릭해보면 다음과 같은 메뉴가 팝업된다.

이것은 현재 버튼과 연결된 코드가 무엇인지를 알려주는데 현재 Touch Up inside(터치 후 내부에서 다시 띄었을때) 액션이 발생하면 View Controller 의 changeColor 코드를 실행하게끔 되어있다. 그런데 우리는 chageColor 를 changeColorToBrown 으로 변경하였으므로 엑스코드에서는 코드를 찾지 못해서 크래쉬가 난 것이다.

이 문제를 해결하기 위해 기존연결을 끊고 재연결을 할 것이다. 중간쯤 x 표시를 클릭하면 연결이 끊어지는데 재연결하는 방법은 아주 간단하다.
changeColorToBrown 코드를 보면 다른 코드와 다르게 왼쪽에 작은원이 비어있다.

이것은 코드와 연결된 컴포넌트가 없다는 것을 의미하는데 원으로 드래그해서 + 표시가 생길때 클릭 드래그하여 changeColorToBrown 버튼으로 드롭해서 원이 채워지면 성공한것이다. 거꾸로 버튼에서 해당 코드로 드래그&드롭해도 결과는 같다.

이것이 엑스코드에서 기능을 구현하는 기초적인 방식이다.

컴포넌트(Component): 레이블이나 버튼 등 뷰를 구성하는 하나의 단위

Closing

레벨1은 본격적인 코딩에 앞서 기본적인 환경에 대해 적응해보는 시간이었다.
지금은 코드가 무엇을 의미하는지 모르는것이 당연하지만 코드가 왜 필요한지는 알 수 있을 것이다.
레벨2 에서 스위프트에 대해 공부해보자.

Jay

Software Engineer Specialized on iOS

Level 1 : Xcode, First meet!