iOS Swift - Xcode로 간단한 앱 만들기(2)
※이 iOS 카테고리의 글 들은 학교 강의와 과제를 기반으로 작성한 것입니다.※
이번 포스트에서는 전 포스트에서 만든 앱에서 좀 더 확장해 보겠습니다.
먼저 2가지 기능만 먼저 알아보겠습니다.
- Button Action Optional Binding
저번 포스트에서 다뤘던 Action btnsend()가 기억나시나요?
Action btnsend()로 버튼의 기능을 지정해 줬었습니다. 그 버튼의 기능 중 Optional이 있었는데 이를 해제하게 되면 어떻게 될까요? 이를 먼저 알아봅시다.
위처럼 오류가 발생하게 됩니다. 위 오류는 txtName.text에 아무런 값이 없을 경우 처리할 수 없으므로 Optional로 지정해 주라는 의미입니다. 예를 들어 사용자가 아무런 값을 입력하지 않고 버튼을 클릭하는 경우가 있겠죠? 이러한 상황을 위해 지정해주어야 합니다. 그래서 이전 포스트에서 txtName.text!로 옵셔널 바인딩을 적용해 주었습니다. 하지만 다른 방법도 있습니다.
* Alt 클릭 -> Fix 클릭 시 해당 추천 방법으로 코드를 고쳐줌
nil 합병 연산자(??)가 기억나시나요? 위 코드는 txtName.text에 값이 있다면 txtName.text를 출력하고 값이 없다면 공백을 출력하는 옵셔널 바인딩 기법입니다. 위처럼 코드를 사용할 수도 있습니다.
- break point
break point는 디버깅 과정 중 지정한 위치에서 진행을 멈춰 중간 상황을 확인할 수 있게 해주는 기능입니다.
왼쪽 숫자를 클릭하면 파란 오각형으로 break point가 생성되고 이를 오른쪽으로 드래그하면 삭제가 가능합니다.
이후 Navigator창에 Debug Navigator가 열리는 것을 확인 후 들어가면 중간 오류를 수정할 수 있습니다.
- 앱 아이콘 추가하기
앱 아이콘은 assets의 AppIcon으로 들어가서 추가할 수 있습니다.
현재 버전에서는 1024x1024 크기의 이미지가 필요합니다.
아래처럼 아이콘을 추가한 후 시뮬레이터에서 아이콘이 추가된 것을 확인할 수 있습니다.
이제 본격적으로 앱 기능을 확장해 보겠습니다.
- Label 색상 변경 기능 추가하기
기존 버튼으로 Label의 색상을 변경할 것이니 lblHello.textColor = .(원하는 색상)을 입력합니다.
. 을 입력하면 해당 색상을 쭉 보여주니 원하는 색상을 선택하시면 됩니다. 저는 magenta 색상으로 지정하였습니다.
위처럼 아무것도 입력하지 않고 클릭 시 옵셔널 바인딩으로 인해 실행이 가능하고 Label의 txt 색상이 변경된 것을 확인할 수 있습니다.
- 이미지 추가하기
이제 버튼 아래에 이미지를 추가해 보겠습니다.
위 버튼을 추가하는 것과 같이 Shift + cmd + l -> Image View를 드래그하여 가져옵니다.
이처럼 추가되고 이미지를 삽입하려면 asset에 사용할 이미지를 추가해야 합니다.
왼쪽 하단의 + 를 클릭 -> New Image Set -> 원하는 이미지 드래그 드롭 순서로 진행합니다.
이후 Image View에서 Image를 클릭하면 추가한 이미지가 있는 것을 확인할 수 있습니다. 해당 이미지를 클릭하면 ImageView에 이미지가 추가됩니다.
- 로딩 화면 설정하기
앱을 클릭하면 로딩화면이 나오는 것을 추가해 보겠습니다. 예를 들어 넷플릭스 앱을 클릭하면 N모양과 함께 사운드가 나오는 로딩화면 같은 것이 있겠죠. 이러한 로딩화면을 추가해보겠습니다.
Navigator의 LaunchScreen을 클릭 -> ImageView, Label 추가
위처럼 로딩화면이 앱 기본 화면이 나오기 전에 추가되어 나오는 것을 확인할 수 있습니다.
- Label 초기화 버튼 추가
TextField에 값을 입력하고 버튼을 클릭하면 Label에 추가되어 출력이 되었었습니다. 이번엔 버튼을 클릭하면 Label이 초기화어 원래대로 돌아가는 기능을 담당하는 버튼을 추가해 보겠습니다.
1. Shift + cmd + l -> btnClean 이름 지정 -> Action으로 지정하여 추가 -> Ctrl + 드래그 드롭합니다.
2. 이후 Label의 초기 형태와 맞춰주기 위해 lblHello1의 내용을 "안녕하세요! "로 지정합니다.
3. TextField의 내용도 초기화돼야 하기 때문에 " "으로 지정합니다.
4. 색상은 원래대로 지정하지 않았기 때문에 내용만 초기화되고 색상은 그대로 유지됩니다.
- 숫자 Up & Down 버튼, Label 추가
추가적으로 Up 버튼을 클릭하면 Label의 값이 1씩 증가되고 Down을 클릭하면 1씩 감소하는 기능을 추가해 보겠습니다.
1. 버튼 2개, Label 1개를 추가합니다.
2. 숫자를 하나씩 증가시켜야 하므로 변수 x 1개를 추가합니다.
3. btnUp을 통해 x = x + 1로 변수의 값을 1씩 증가시키고 문자열 형태의 x의 값을 Label의 text로 추가합니다.
4. btnDown과 마찬가지로 x = x - 1로 변수의 값을 1씩 감소시키고 문자열 형태의 x의 값을 Label의 text로 추가합니다.
위처럼 시뮬레이터에서 "더하기" 버튼을 클릭하면 1씩 증가되고 "빼기" 버튼을 클릭하면 1씩 감소하는 것을 확인할 수 있습니다.
- 추가적 기술 내용
Xcode에서는 연결 관계라는 것이 있습니다. 이러한 연결 관계는 예를 들어 1개의 버튼에는 1개의 Label과 연결되는 관계를 의미합니다. 즉, 1개의 기능에는 1가지의 기능만 연결될 수 있다는 것이죠.
아래처럼 2개의 Label에 각각 다른 1개씩 연결하지 않으면 오류가 발생하게 되는 것입니다.
이러한 연결 관계는 꼭 체크해주셔야 하며 중요한 내용입니다.
추가적으로 코드에서 주석처리를 한다 해도 결국 연결되는 Label은 1개이기 때문에 오류가 발생하는 것을 확인할 수 있습니다.
- Is Initial View Contorller
이 기능은 앱이 처음 시작될 때 보이는 뷰 컨트롤러를 가리킵니다. 즉, 앱이 실행되면 가장 먼저 사용자에게 보여지는 화면을 의미합니다.
이를 사용하면 UI를 디자인할 때, 스토리보드 내에서 화살표(Entry Point Indicator)로 표기되어 개발자가 쉽게 인식할 수 있습니다.
- Optional Binding을 통한 시뮬레이터 화면과 콘솔 출력 결과 차이
위에서 UILabel을! 를 사용해 선언하였습니다. 출력해 보면 이를 통해 옵셔널로 출력되지만 시뮬레이터에서는! 때문에 자동으로 값이 풀어져 Label로 들어가기 때문에 차이점이 있습니다.
기존 앱에서 새로운 기능을 추가하여 봤는데 "100번 듣는 것보다 1번 하는 게 낫다."라는 말처럼 저번 주에 실습해 보니 이번 주에는 더욱 다루기 쉬웠습니다. 문법도 헷갈리지 않았고 이해도 더욱 빨라져 역시 "경험이 중요하다."는 말을 다시 한번 깨닫게 되었습니다. 이렇게 깨닫게 된 것을 다른 공부를 할 때도 접목시켜 열심히 배워나가겠습니다.
피드백은 언제나 환영입니다!