brunch

매거진 쉽게 배우고 쉽게 만드는 아이폰앱

라이킷 7 댓글 2

You can make anything
by writing

C.S.Lewis

계정을 잊어버리셨나요?

by 윤민섭 Nov 17. 2020

태양계 행성 앱 4

조금 더 재밌는 앱 만들기

이제 두 번째 앱도 끝이 보입니다. 마지막 기능만 적용하면 됩니다.

3. 애니메이션이 살짝 있으면 좋을 것 같다.

애니메이션을 적용해보겠습니다. 애니메이션은 애플에서 만들어놓은 CoreAnimation을 사용하지만, 보다 간단하게 적용할 수 있는 방법이 있습니다. 애니메이션 적용을 위해 전역적으로 제공되는 UIView.animate 함수를 사용하겠습니다.

planetImageDidTapped함수에서 alpha값으로 조절로 행성 설명을 보여주게 됩니다.

이 함수에 애니메이션 코드를 작성해보겠습니다.

함수로 3개의 값을 넣어야겠죠.

먼저 duration은 몇 초 동안 이 애니메이션을 실행할지 정합니다. 그다음 animations에는 소괄호, 화살표, Void가 있습니다. 이 형태는 클로져라고 하는 스위프트 문법인데요, 간단하게 함수라고 생각하면 좋습니다.

클로저는 아주 중요한 개념이지만 우선은 함수가 들어간다 정도로 생각하고 넘어가겠습니다.

다시 돌아와서 animations에는 어떤 것에 애니메이션을 적용할지 코드를 작성합니다. 여기선 information.alpha = 1이 되겠습니다.

그다음 completion도 클로져가 들어가네요, completion은 애니메이션이 종료되고 호출되는 함수가 들어갑니다. 애니메이션이 종료되고 아무런 동작도 하지 않을 것입니다. 그런 경우 completion은 지우면 됩니다.

우선 애니메이션 시간은 0.5초 정도로 지정하고 애니메이션 동작을 구현하겠습니다.

아주 간단합니다. 이제 앱을 실행하면 애니메이션이 적용된 것을 확인할 수 있습니다.

행성 정보가 사라지는 경우에도 똑같이 적용할 수 있겠죠.

이렇게 정말 간단하게 애니메이션을 추가했고 ~~3. 애니메이션이 살짝 있으면 좋을 것 같다.~~ 기능도 완료됐습니다.

이번 앱엔 앱 아이콘과 런치 스크린도 추가해보겠습니다. 우선 앱 아이콘을 아래 링크에서 다운로드하여주세요. 그다음 프로젝트로 돌아가서 이미지를 관리하는 Assets.xcassets를 확인합니다.

AppIcon을 추가할 수 있는 영역이 있고, 다운로드한 아이콘을 사이즈에 맞게 추가합니다. 각각 이미지는 iPhone/iPad로 나뉘고 각각 Notification영역, setting영역 등 필요한 부분에 사용됩니다. 우선 아이패드에는 추가하지 않고 아이폰만 고려해보겠습니다.

추가했다면 앱을 실행하고 홈 화면으로 이동해보겠습니다.

앱 아이콘 적용은 완료했고, 런치 스크린이 남았습니다.

런치 스크린은 LaunchScreen.storyboard에 적용할 수 있습니다. LaunchScreen.storyboard에는 별도의 ViewController를 적용할 수 없고 UI 적용만 가능합니다.

배경은 검은색으로 정하고 텍스트를 추가해보겠습니다. 텍스트는 X값은 화면의 오른쪽에서 40pt만큼 떨어져 있으며 Y값은 화면의 중앙에 위치하도록 제약 조건을 설정합니다.

앱을 실행하면 런치 스크린이 잠깐 노출되고 앱의 내용이 보이는 것을 확인할 수 있습니다. 런치 스크린은 '앱의 내용을 준비하기 위한 단계'이기 때문에 내용을 보여줄 수 있을 때 사라집니다. 즉, 개발자가 임의로 런치 스크린 노출 시간을 수정할 수 없습니다. 물론 커스텀하게 런치 스크린을 만든다면 가능하지만, 이 글에선 다루지 않겠습니다.

두 번째 앱이 완성됐습니다. 이제 앱에 대한 이해가 조금씩 생기시나요? 모든 글들은 개발에 대한 전반적인 이해를 목표로 하기에 기술적인 내용이 부족하다 느끼실 수 있습니다. 기술적으로 상세하게 알고 싶다면 Swift나 iOS 개발을 다루는 책을 더 공부하셔도 좋을 것 같습니다.

세 번째 앱은 목록을 보여주는 앱을 만들어보겠습니다.

고맙습니다.

앱 아이콘

keyword