그동안 IOS 앱 개발에 무한한 관심만 갖고 살다가 이번에 윈도우(Windows) 컴퓨터에 Xcode를 설치해서 드디어 IOS 앱을 만들어 볼 수 있는 환경이 되었습니다. 그래서 오늘은 대부분의 프로그램 언어에서 처음 만들어보는 프로젝트인 "Hello" 출력을 해보고 버튼의 클릭 이벤트까지 정리를 해보려고 하는데 xcode에서 swift 코드와 UI 요소를 연결하는 방식이 좀 특이하네요. 일명 아웃렛(outlet)을 연결하는 과정인데요.
이제 막 Xcode를 접한지 이틀째지만 '안드로이드 스튜디오'보다는 뭔가 간결하면서 세련된 느낌이라고 해야 하나? 여하튼 처음 접하는 swift와 아웃렛(outlet)이지만 노트 정리 식으로 간단하게 정리하면서 개념을 잡아보겠습니다. 일단 윈도우에서 아이폰 앱을 만들어보고 싶은 분들은 아래 글 참고해서 개발 환경 구축해보시고요.
가상머신에서 돌아가는 IOS라서 조금 버벅거리기는 하지만 기초를 다지는 데는 충분할 것 같고 오늘도 역시 이 환경에서 앱을 만들어 볼 겁니다.
▲ 위 사진은 현재 작업이 가상머신에서 돌아가고 있다는 걸 확인시켜드리고자 윈도우 바탕화면을 포함해서 캡쳐를 해봤어요. 저처럼 IOS 앱 개발에 관심 있는 분들 중 '맥북' 구입이 부담되는 분들은 윈도우에서도 가능하니 이런 개발 환경이라도 만들어서 기초라도 다졌으면 하는 바람으로 언급을 했고요. 저는 이렇게 개발 환경을 만든 후 바로 서점으로 달려가서 기본서를 하나 구입했네요.^^
'송종근' 님의 "이것이 IOS다. Swift로 시작하는 ios 10 앱 개발 입문"이라는 책인데요. 많이 어렵지 않게 잘 풀어놓으셔서 진도를 쭉쭉 빼고 있답니다. ㅎㅎ
▲ 이 책을 공부하면서 노트 정리 식으로 작성하는 글이니 참고하셔서 제대로 공부하고 싶다면 서점 한 번 다녀오셔요. ㅎㅎ
이제 Xcode를 실행해서 프로젝트를 만들겠습니다.
▲ 두 번째 [Create a new Xcode project]를 선택해서 새로운 프로젝트를 만들고요.
▲ 템플릿을 선택하는 화면에서는 [Single View App]을 선택한 후 넘어갑니다. 곧 나머지 템플릿도 모두 사용해서 화려한 앱을 만드는 날이 오겠죠?^^ 저는 그때까지 꾸준하게 공부를 할 생각이니 여러분도 함께 도전 해보시게요.ㅎㅎ
▲ 각종 이름은 적당히 입력을 하고요. Language는 당연히 Swift를 선택한 후 아래쪽 옵션은 Include Unit Tests만 체크를 하고 [Next]를 눌러서 생성을 합니다.
▲ 저장 위치는 바탕화면으로 지정하고 Create를 했습니다.
▲ 이렇게 프로젝트가 생성되면 Main.storyboard로 이동해서 [인터페이스 빌더]에 Label과 Button을 하나씩 배치하겠습니다.
▲ 아직 아무것도 추가가 안됐기 때문에 빈 화면인데요. 오른쪽 Object Library에서 Label을 끌어다가 놓습니다.
▲ 그림처럼 가이드라인이 생기니까 중앙에 배치를 해보죠. 그리고 Label를 더블 클릭해서 이름을 바꿔주겠습니다.
▲ 그런데 글자를 늘리자 중앙에서 약간 벗어나게 되네요. 다시 끌어다가 가이드라인에 맞춰서 중앙에 배치를 하고요. 똑같은 방법으로 버튼을 끌어다가 그 아래 넣겠습니다.
▲ 버튼은 그냥 Click라는 이름을 줘봤고요. 이 녀석을 클릭하면 위쪽에 있는 Hello IOS라는 글자가 다른 걸로 바꾸도록 하는 과정을 정리할건데 이제 여기서 아웃렛(outlet)이 등장합니다. 아웃렛을 연결한다는 의미는 저 인터페이스 빌더와 Swift 코드를 직접 연결한다는 의미인데요. 천천히 해보죠.
▲ 먼저 위쪽 오른쪽에 있는 고리 모양의 [Assistant Editor]를 선택하고요. 오른쪽 유틸리티 영역은 필요가 없으니 감추도록 하겠습니다.
▲ 유틸리티 영역은 그림에서 표시한 부분을 클릭하면 사라지고요. 인터페이스 빌더 부분도 좀 더 넓히기 위해서 그림에서 가리키고 있는 버튼을 클릭하면...
▲ 비교적 쾌적한 환경이 된 거 같죠?^^ 이제 이 둘을 연결해볼게요.
▲ 연결하는 방법은 간단합니다. 인터페이스 빌더에서 Label을 오른쪽 마우스 누른 상태에서 Swift 파일로 끌면 그림처럼 선이 생기거든요. 그리고 원하는 위치에 놓으면 됩니다.
▲ 그렇게 끌고 가니 이런 창이 하나 열리면서 이름과 Type 등을 입력하라고 하는데요. type는 UILabel이 선택되어 있으니 그대로 두고 이름에 Label을 입력하고 Connect를 눌러주면...
▲ 이렇게 swift 코드에 아웃렛 변수가 선언이 되는데요. 저는 이 기능을 보고 솔직히 조금 놀랐어요.ㅎㅎ 다음으로 버튼도 아웃렛으로 연결을 해보죠. 버튼은 클릭했을 때 이벤트가 발생하도록 하기 위해서...
▲ 버튼을 오른쪽 마우스로 클릭하면 이런 메뉴들이 보이거든요. 이중 [Touch Down]을 선택한 후 이번에는 왼쪽 마우스를 클릭한 상태로 드래그를 해서 옮기면 됩니다.
▲ 이번에도 역시 연결 창이 나타나는데요. 이름과 type를 지정한 후 [Connect]를 눌렀습니다.
▲ 그랬더니 이렇게 메서드가 자동 생성됐습니다. 이제 이 안에다가 버튼을 눌렀을 때 실행될 내용을 작성하면 되겠죠? 이번 글에서는 간단하게 Label을 바꾸는 내용만 정의해봅니다.
▲ 버튼을 클릭하면 "Hello IOS"가 "I LOVE YOU"로 바뀌도록 했습니다. 이제 시뮬레이터를 실행해서 결과를 확인하고 마무리하겠습니다.
▲ 버튼을 클릭하자 Label의 텍스트가 바뀌는 걸 확인할 수 있습니다. 이렇게 해서 Swift와 인터페이스 빌드를 아웃렛으로 연결하면서 개념 정리를 해봤는데요.
IOS 앱 개발이 막연하게 어렵다고만 들었는데 막상 시작하니 재미있습니다.^^ 이제 시작하는 단계이고 험난한 과정(?)이 기다리고 있겠지만 열심히 공부하면서 즐겁게 그 과정을 받아들이도록 할렵니다. 수고하셨어요.