개발/Swift

[Swift] Swift로 Hello World 앱 화면 꾸미기

dotudy 2024. 10. 5. 00:43

해당 글은 "Do it! 스위프트로 아이폰 앱 만들기 입문 개정 7판" 책을 토대로 공부하며 작성한 글입니다.

 

오른쪽 상단의 +를 눌러서 label을 추가하고 name 옆에는 텍스트 필드, Send 버튼을 추가한다. 클릭이 아니라 모두 드래그로 넣는다.

 

스토리보드에 추가한 객체를 선택하고 내용을 변경하거나 특정 동작을 수행하도록 하기 위해서는 해당 객체에 접근할 수 있는 변수인 '아웃렛 변수'와 동작을 정의한 함수인 '액션 함수'가 필요하다.

ex. 텍스트 필드에 사용자가 이름을 입력하면 입력한 텍스트를 받아 저장할 변수를 만들고 만든 변수와 텍스트 필드를 연결해줘야한다. 이러한 변수를 아웃렛 변수(Outlet Variable)이라 한다.

 

Send 버튼을 눌렀을 때 입력한 이름을 읽어서 레이블에 출력하는 함수를 만들고 이 함수를 버튼과 연결시켜줘야한다. 이러한 함수를 액션 함수(Action Function)이라 한다. 

 

레이블에 아웃렛 변수 추가하기

넣는 방법: Hello라고 입력된 레이블에 아웃렛 변수를 추가해 보겠다.

1. Hello 레이블을 오른쪽 클릭을 한 채 보조 편집기 영역으로 드래그한다. 

2. 연결선이 나타나면 이 연결선을 뷰 컨트롤러(ViewController)의 클래스 선언문 바로 아래에 끌어다 놓는다.

3. 연결 설정 창에서 연결(Connection): [Outlet], 변수 이름(Name): 'lblHello', 타입(Type): 'UILabel' 입력 및 확인하고 Storage를 'Strong'으로 선택한 후 Connect한다.

4. 'Hello' 레이블과 아웃렛 변수가 연결된다.

 

 

* swift 상수와 변수

상수: let을 사용해 선언한다. 값을 지정해 주어야하며 값이 한 번 결정되면 이후에는 값을 바꿀 수 없다.

변수: var을 사용해 선언한다. 최초 선언한 값 이외에도 변경 가능ㅎ다. 

 

* swift 이름을 지정할 때 지켜야 되는 규칙

1. 유니코드를 포함한 어떤 문자든지 사용가능하다. 단, 특수 문자, 수학 기호, 화살표, 개인용 유니코드 선, 상자 그리기용 문자 등은 사용할 수 없다. 

2. 숫자로 시작할 수 없다.

3. 이름을 읽었을 때 무슨 역할인지 파악가능해야 한다.

4. 명사, 동사 또는 전치사로 이루어진 단어를 연결하여 만든다.

5. 클래스 이름은 대문자로 시작한다.

6. 함수나 메서드 이름은 소문자의 동사로 시작한다. 

7. 변수나 상수는 소문자의 명사로 시작한다.

8. 시작 단어를 제외한 모든 단어의 시작은 대문자로 하고 그 이외의 모든 문자는 소문자로 한다.

 

텍스트 필드에 아웃렛 변수 추가하기

텍스트 필드는 사용자가 무언가를 입력할 수 있는 필드이다.

1. 마찬가지로 텍스트 필드를 오른쪽 클릭 드래그해서 보조 편집기 영역의 조금 전에 추가한 lblHello 변수 아래에 끌어다 놓는다.

2. 연결 설정 창에서 연결(Connection): [Outlet], 변수 이름(Name): 'txtName', 타입(Type): 'UITextField' 입력 및 확인하고 Storage를 'Strong'으로 선택한 후 Connect한다.

3. 텍스트 필드와 아웃렛 변수가 연결된다.

 

버튼에 대한 액션 함수 추가하기

1. Send 버튼을 마우스 오른쪽 버튼으로 누르고 보조 편집기 영역으로 드래그한다. 액션 함수는 일반적으로 클래스의 맨 마지막 부분에 추가한다. 

2. 연결 설정 창에서 연결(Connection): [Action], 변수 이름(Name): 'btnSend', 타입(Type): 'UIButton' 입력 및 확인하고 Connect한다.

 

* 아웃렛 변수/액션 함수를 추가/삭제할 떄 주의 사항

아웃렛 변수 및 액션 함수를 추가하면 코드 왼쪽에 왼으로 표시되는데 이것은 스토리보드의 컴포넌트와 소스 코드가 연결되어있음을 의미한다. 원 위에 커서를 올려두면 해당하는 컴포넌트가 표시된다.

 

객체를 선택한 후 오른쪽 창을 보면를 누르면 연결상태를 확인할 수 있고 오른쪽 마우스 버튼을 통해 확인가능하다.

txtName과 View Controller가 연결되어있음을 확인할 수 있다.

소스코드에서 해당 코드를 지워도 인스팩터 영역을 보면 여전히 연결 상태가 유지되어있음을 확인할 수 있다. 이때는

View Controller에 있는 x를 눌러 연결 상태도 삭제해야한다.

 

 

사용자가 Send를 누를 때 동작할 btnSend함수를 코딩해보자.

ViewController.swift를 누르고 인스팩터 영역을 연다.

오른쪽 위 Adjust Editor Options에서 minimap을 닫을 수 있다.

@IBAction func btnSend(_ sender: UIButton) {
        lblHello.text = "Hello, " + txtName.text!
    }

Hello, 라는 문자열과 txtName.text 문자열을 결합하여 lblHello.text에 넣는다는 의미이다. 

 

iOS Simulator는 개발한 앱이 아이폰에서 실제 동작하는 모습을 그래도 재현해 주는 도구이다. 

 

* iOS Simulator로 구현할 수 있는 기능

1. 좌, 우 회전

2. 흔들기 효과

3. 멀티 터치 (손가락 두 개)

4. GPS 기능(좌표 수동 입력)

 

iOS Simulator로 구현할 수 없는 기능

1. GPS를 이용한 실제 위치 취득

2. 전화 착신 시 동작

3. 카메라 동작

4. 가속도 센서

 

때문에 아이폰,아이패드의 가속도계, 카메라 등과 같이 하드웨어에 의존적인 기능을 테스트하려면 실제로 기기에 설치하여 테스트해야한다.

 

Command + R로 실행한다.

이름을 입력하면 위에 Hello, 이름이 뜨는 것을 확인할 수 있다.

 

핸드폰 모양이 뜨는 것을 기기의 베젤(Bezel)이 보인다고 표현한다.