[iOS] 내 소개 어플리케이션

iOS 프로그래밍

---

README

1. 프로젝트명

   • 내 소개 애플리케이션

2. 공부할 내용

   • UIKit
   • Auto Layout
   • HIG (Human Interface Guide) for iOS
   • View Programming Guide

INDEX

1. 레이아웃 구성

2. 제약조건 설정

3. UIKit & 개발자 문서

4. HIG (Human Interface Guide)

5. 돌아보기

1. 레이아웃 구성

#Layout Configuration

---

(프로젝트를 생성하기 이전에 프로젝트에서 사용할 이미지를 구해둔다.)

Single View App 템플릿을 이용해 프로젝트를 생성한다.

프로젝트를 생성한 이후 Assets.xcassets 파일에 이미지를 import 해준다.

이후 View Controller에 Image View 인스턴스를 추가해준다.

이후 Image view 인스턴스를 클릭하고 Attribute Inspector 에서 이미지를 추가해준다.

다음으로 문자열을 보여주기 위한 Text field 인스턴스를 3개 추가한 뒤 각각의 placeholder 를 지정해준다.

이후 각각의 텍스트 필드가 활성화 되었을 때에 따른 적절한 키보드를 보여주기 위한 Keyboard Type 설정을 진행한다.

이름 필드는 그냥 일반 키보드를 출력해주면 되고
이메일 필드는 E-mail Address 타입으로 지정해주고 전화번호 필드는 Phone pad 로 지정해준다.

애플은 UX(User eXperience)를 매우 중요시한다.

이러한 사소한 사용자 경험이 하나하나 모여서 훨씬 간편하고 편리한 애플리케이션이 제작된다.

이후 scene 에 Text View 인스턴스를 추가한 뒤, 배경색을 변경해준다.

이후 시뮬레이터를 실행하여 설정한 기능(placeholder, Keyboard type..etc)들이 정상적으로 작동하는지 확인한다.

2. 제약조건 설정

#Set Constraints

앞서 구성한 오토레이아웃에는 제약조건을 설정하지 않아 각각의 디스플레이 또는 가로모드 등에 따라 유연하게 반응하지 못한다.

이를 잡기 위해서 오토 레이아웃의 제약조건을 설정하도록 한다.

첫번째로, 왼쪽 상단에 배치한 Image View 인스턴스의 제약조건을 설정해본다.

Image View를 활성화하고 이에 대한 Constraints를 추가한다.

왼쪽 끝과 상단 끝으로 부터 16pt 떨어지도록 설정하고 Aspect Ratio를 체크하여 기존 비율을 유지하도록 한다.

이와같이 오토 레이아웃은 scene 내에 각각의 객체들과의 상대적인 관계를 형성하여 레리아웃을 구성한다.

각각의 객체들과 관계를 형성하면 해상도가 변하여도 이에따라 모두 유연하게 처리가 가능하다.

Alignment Constraints와 기본 Constraints를 적절히 조합하여 뷰의 레이아웃 제약조건을 설정해준다.

제약조건을 적절히 설정한 뒤 기기별 디스플레이에 따른 뷰 유지, 세로모드와 가로모드를 모두 확인해보도록 한다.

3. UIkit과 개발자 문서

---

UIKit 공식 문서

UIKit 이란 User Interface Kit의 약자로 iOS 또는 tvOS의 사용자 인터페이스 구성을 위한 프레임워크이다.

이는 Foundation 프레임워크와 더불어 iOS의 대부분의 큰 기능을 이루는 뼈대이다.

UIKit 문서를 한번 쓱 살펴보고 개발자 문서를 읽는 습관을 들이자.

4. HIG(Human Interface Guide)

#HIG

---

Human Interface Guide (이하 HIG)는 애플에서 제공하는 공식 문서이다.

사용자와 상호작용이 필요한 기술 또는 개념을 정리해놓은 문서이다.

이 문서에서는 사용자 입장에서 경험해봤을만한 내용들이 들어있다.

애플이 사용자의 경험을 축적하여 작성한 문서이므로 이를 이해하는 것이 개발자도 편하게 애플리케이션을 만들고 사용자도 편하게 애플리케이션을 사용하는 지름길이다.

따라서 이 문서는 꼭 읽어봐야 하는 문서중 하나로 개발자, 기획자, 디자이너 모두가 읽어봐야 할 문서이다.

본 문서에서도 Auto-Layout에 대해서도 간단히 설명하고 있다.

5. 돌아보기

#돌아보기

이번에는 화면에 사용해던 뷰 컴포넌트들에 대해서 살펴본다.

앱을 실행시키고 디버그 기능을 활성화 시키면 아래와 같이 뷰의 게층을 살펴볼 수 있다.

이러한 화면이 어떻게 구성되어있고 어떻게 관리를 해야하는지에 대한 정보는 View Programming Guide 문서에 제공된다.