알아야 할 점
- 본 문서는 iOS 프로그래밍 강의 내용을 중심으로 작성되었어요.
- 이전 내용을 모르면 이해가 어려울 수 있어요.
- 앞으로도 계속 내용을 추가할 예정이에요.
목적
iOS앱을 만드는 방법에 대해 알아볼거에요.- 버튼과 텍스트 박스 사용법에 대해 알고, 동작시켜볼 수 있어요.
Xcode를 통해 앱이 동작하는 방법에 대해 이해할 수 있어요.
학습 순서
프로젝트 생성 → Xcode 설정 → 요소 추가 → 앱 기능 동작
1. 프로젝트 생성
1 - 1. Xcode 실행
Xcode를 실행하고 아래 두 가지 방법 중 하나로 프로젝트를 생성해요.
방법 1
방법 2
주의 :Xcode앱을 클릭한 후에 상단에 표시돼요.
1 - 2. 템플릿 선택
iOS 앱을 만들 것이기 때문에 다음과 같은 순서로 진행해요.
- 상단
iOS선택 →App선택 →Next선택
1 - 3. 프로젝트 정보 입력
프로젝트 이름을 원하는 이름으로 입력하고 다음과 같이 설정해요.
Product Name : 원하는 앱 이름
Organiztion Identifier : 교윳값 입력(중복X)
Interdace : Storyboard
Language : Swift
1 - 4. 설치 경로
원하는 경로를 선택하고 Create 클릭해서 경로를 지정해줘요.
하단의 Source Control의 경우 Git repository를 생성하여 소스파일을 관리할 수 있어요.
1 - 5. 프로젝트 생성 완료
프로젝트를 정상적으로 생성하면 다음과 화면으로 구성된 것을 확인할 수 있어요.
- 처음 설정에 따라 조금 다를 수 있어요!
2. Xcode 설정
이제 동일한 실행 환경을 위해 설정을 할게요.
2 - 1. 실행 환경 설정
아래 사진을 따라 실행 환경을 iPhone 15 Pro로 설정해요.
2 - 2. 테스트 실행
프로젝트 및 시뮬레이터가 정상적으로 동작하는지 한 번 실행해서 확인해요.
아직은 디자인이나 기능을 아무것도 추가하지 않았기 때문에 하얀 화면이 나오는 것이 정상이에요.
2 - 3. View Controller
Xcode 내에서 앱의 화면 디자인 추가 및 수정을 하기 위해 다음 순서로 앱 화면을 나타내요.
- 화면 좌측
Main더블 클릭- 앱 화면이 안 나오는 경우 아래 사진에 파란 박스 부분을 클릭 시 정상적으로 나타나요.
3. 요소 추가
이제 기본적인 설정을 마쳤으니, 앱의 기능을 동작하기 위한 요소들을 추가할게요.
3 - 1. 요소 추가 방법
단축키 Commend + Shift + L 또는 화면 상단의 + 버튼을 통해 요소 추가를 할 수 있어요.
3 - 2. Label 추가
위 화면에서 Label을 선택하고 드래그를 하여, 적절한 위치에 배치해요.
그러면 화면 좌측의 View Controller Scene에 추가된 것을 확인할 수 있어요.
조금 더 잘 보일 수 있도록 크기를 늘려주고 다음 값들을 수정해요.
Text : 표시될 text 입력
Color : 글씨의 색상
Font : 폰트 및 크기 지정
Alignment : 정렬 위치 (가운데 지정)
Background : 원하는 색상 지정
3 - 3. 디자인
위의 방법을 통해 Text Field와 Button을 추가할게요.
- 텍스트 필드 안에서 도움말은
placeholder에 입력하면 사용할 수 있어요.
3 - 4. 실행
실행해보고 정상적으로 동작하는지 확인해볼게요.
정상적으로 잘 동작하는 것을 확인할 수 있어요.
디자인을 원하는대로 표시할 수 있지만, 아직 기능이 동작하지 않기 때문에 이제 기능을 추가해볼게요.
4. 앱 기능 동작
이제 배치된 요소들을 활용해서 실제로 앱이 동작할 수 있도록 설정할게요.
4 - 1. 요소 연결
먼저, 다음 사진과 같이 화면을 구성해요.
우측 상단에 있는 버튼을 클릭한 후, 화면 좌측의 View Controller를 더블클릭해서, 두 화면을 나타낼 수 있어요.
그 다음 앱 화면에 있는 요소를 클릭한 후, Ctrl 키를 누른 상태로 코드 영역으로 가져오면 아래 화면처럼 나타나요.
드래그 시 다음과 같은 화면이 나타나요.
Label과 TextField에 다음과 같이 지정해줘요.
Name : 구분 가능한 이름
Storage : Weak
Button은 다음과 같이 설정해요.
Connection : Action
Name : 구분 가능한 이름
Type : UIButton
지정 후 Connect 클릭
4 - 2. 기능 구현
이제 지정한 요소들이 정상적으로 동작할 수 있도록 코드를 작성할게요.
import UIKit
class ViewController: UIViewController {
@IBOutlet weak var lblLabel: UILabel!
@IBOutlet weak var txtInput: UITextField!
@IBAction func btnSend(_ sender: UIButton) {
lblLabel.text = "Hello, " + txtInput.text!
}
override func viewDidLoad() {
super.viewDidLoad()
}
}
4 - 3. 동작 확인
이제 실행 후 정상적으로 동작하는지 확인할게요.
화면이 정상적으로 표시되었다면 값을 입력해서 Text Area가 변경되는지 확인해요.
TextField에 입력 후 Button을 클릭해요.
정상적으로 변경되는 것을 확인해요.
정리
Xcode를 이용해서iOS에서 동작하는 간단한 앱을 제작했어요.- 프로젝트를 생성하고 실행하면서 어떤 동작이 어떤 기능을 수행하는지 확인할 수 있었어요.
- 입력한 값을 화면에 표시하는 것만으로 많은 응용이 가능하다는 것을 알 수 있어요.
