이 글은 iOS앱 개발시 필요한 기본적인 UI를 다룰 수 있는 지식을 공부하면서 정리했습니다.
사진 및 주 내용은 Xcode 9 기반 애플 공식 문서를 참고하였습니다.
Xcode, Storyboard
먼저 아래의 내용을 설명하기에 앞서 UI가 무엇인지부터 간단히 정리하겠습니다.
UI : User Interface의 약어이며, 사용자와의 접점을 뜻한다.
즉, 사용자가 보는 화면을 정의한다고 생각하면 됩니다.
iOS 앱의 UI에 화면 요소들을 간단하게 컨트롤 하기 위해서 Apple은 Interface Builder라는 것을 제공하고 있습니다.
바로 오늘의 주인공 스토리보드(Storyboard)가 그 역할을 하고 있습니다.
UI를 변경하거나 확인하기 위해선 위에 말한 스토리보드파일을 열어야 합니다.
기본적으로 프로젝트를 생성하면 자동으로 생기는 Main.storyboard와 LaunchScreen.storyboard가 바로 스토리보드 파일입니다.
LaunchScreen.storyboard의 경우 앱이 처음 실행될때(Launching)뜨는 화면으로 그 화면의 UI를 변경하거나 확인할때 사용하면 됩니다.
그 외엔 Main.storyboard를 이용하면 됩니다. 아래 사진을 통해 기본적인 UI화면과 Xcode 에서 어느 위치에 있는지 확인할 수 있습니다.
위 사진에 명시되어 있는 명칭은 후에 구글링이나 커뮤니케이션을 할때 필요한 부분이니 잘 기억하시기 바랍니다.
기본화면에서 버튼을 추가해보겠습니다.
화면에 버튼을 추가하는 방법은 위의 사진을 토대로 Object library에서 버튼을 드래그해 원하는 곳에 배치시키면 간단히 성공하실 수 있습니다.
혹시 화면의 방향을 바꾸거나 여러 기기에 대응하는 화면을 확인해보고 싶다면 아래에 [View as: 기기명]이라고 씌여져 있는 Device configuration controls 부분을 클릭하면 아래와 같은 화면이 나타나기 때문에 다양하게 변경하면서 확인할 수 있습니다.
IBOutlet, IBAction
위에 간단히 버튼을 추가하고 다양한 기기에서 표현되는 것을 확인해보았지만 실제 프로그래밍을 할 때는 지금 당장 소스(코드)에서 해당 버튼에 접근할 수 있는 방법이 없습니다.
이유는 소스(코드)들과 UI가 현재는 따로 구분되어 있기 때문입니다.
이때는 Storyboard의 Interface Builder기능을 활용해야 합니다.
방법은 간단합니다. 아래의 사진처럼 해당 버튼 혹은 텍스트나 다른 화면 요소들을 원하는 Controller클래스가 있는 부분에 컨트롤(Ctrl)을 누른채 드래그 해서 올려놓기만 하면 자동으로 처리가 됩니다.
한가지 마무리 작업으로 Ctrl + 드래그를 마친순간 아래와 같은 팝업창이 뜨는데 해당 팝업창에 원하는 Connection 타입과 Name(프로퍼티 이름) 그리고 Type(프로퍼티의 타입)을 정의해줘야 합니다.
아래의 사진은 Button과 Label을 각각 IBAction과 IBOutlet에 매핑시킨 결과입니다.
IBOutlet과 IBAction은 Connection 타입 중 하나로 각각 프로퍼티와 메소드로 생성되어 화면 요소들을 컨트롤 할 수 있는 연결고리가 되는 것입니다.
이렇게 설정해놓은 경우 내부에 구현되어 있는 코드에 의해 Interface Builder기능이 적용되어 자동으로 화면 요소와 소스코드가 매핑되어 간단히 접근이 가능하다고 생각하면 됩니다.
여기서 한가지 짚고 넘어야할 부분은 IBOutlet과 IBAction은 똑같이 View(화면-Storyboard)와 Controller를 매핑시켜주지만 역할은 다릅니다.
위 그림처럼 IBAction의 경우 유저(사용자)를 통한 특정 이벤트를 감지해서 Controller에 알리는 역할을 하고, IBOutlet은 처리 결과를 View단에 알려서 원하는 동작을 이끌어 냅니다.
마치며
iOS의 UI를 다루는 방법은 Storyboard와 Interface Builder를 활용하는 방법만 존재하는 것은 아닙니다.
위의 방법은 개발시에도 눈으로 확인해가면서 편리하게 작업하도록 제공해주는 방식입니다.
다른 방법으로는 소스코드를 활용해 직접 UI를 다루는 방법이 있습니다. 이 경우엔 Storyboard와의 연결고리가 필요하지 않기 때문에 IBOutlet이나 IBAction등의 프로퍼티 혹은 메소드 없이 직접 각 필요한 기능을 포함하는 Protocol을 채택하여 처리할 수 있습니다.
두 경우 모두 사용하기 때문에 항상 둘 다 연습하고 잘 알고 있어야 합니다.
소스 코드를 활용하는 경우는 앞으로 다른 포스트를 통해 자주 등장할 예정이기에 이 글에선 Storyboard의 기초적인 활용 방법인 위의 내용을 끝으로 마치겠습니다.