라티의 작은 일기장

오늘은 드디어 LED 전광판 앱의 기능을 구현해보는 실습을 진행한다. 앱의 기본적인 기능은 글자와 배경의 색을 입혀 보여주는 것이지만, 오늘 구현할 기능은 그것에 앞서 설정화면에서 각 컴포넌트의 색상을 선택했을 때, 그것이 선택되었다고 알려주는 기능이다. 말로만 들으면 별로 중요해보이지 않는 기능이지만 구현이 끝나고나서 생각해보면 또 다를 것이다. 우선 설정 화면의 기능을 담당하는 SettingViewController 파일을 프로젝트 폴더에 추가해보자. 그리고 해당 파일을 스토리보드에 연결하고 Assistant까지 띄워보면 이렇게 될 것이다. 이제 스토리보드에 있는 각 VC 내 컴포넌트에 대해 Outlet 변수를 선언할 것이다. 우선 전광판 화면에 있는 중앙의 큰 Label을 contentLabel이라..

어제 부로 UI 구현이 다 끝난 줄 알았는데...! 오늘 강의 내용을 보니 아직 하나 더 남은 것 같다... 아이고.. 추가할 UI는 뭐 그렇게 대단한건 아니고 설정 화면을 이미지 파일을 활용해서 꾸며주려고 한다. 실제 서비스를 위한 앱 또는 웹 사이트를 개발하게되면, 아주 많은 양의 에셋 파일(이미지, 소리, 영상, 폰트 등)들을 활용하게 되는데, 아주 간단한 형태의 JSP 웹 사이트를 개발할 때에도 프로젝트 홈 디렉토리에 "assets"라고 하는 디렉토리를 따로 만들어서 관리하게 된다. Xcode에서 앱 개발을 할 때에도 똑같이 에셋 파일을 관리하는 공간을 두게 된다. 사실 이미 만들어져 있을 것이다. 프로젝트 폴더 내에 Assets 또는 Assets.xcassets라고 하는 것을 찾을 수 있는데, ..

오늘은 LED 전광판 앱의 UI 구현의 나머지 부분을 처리할 것이다. 지난 번에 구현한 화면은 앱에서 전광판이 비춰지는 메인(Main) 화면이었고, 오늘은 전광판의 내부 설정값(문자열 값과 폰트 설정)을 변경할 수 있는 설정(Settings)화면을 만들게 된다. 일단 메인 스토리보드에서 새로운 View Controller를 하나 추가해주자. 그리고 전광판 메인 화면에서 우측 상단의 "설정" 버튼을 눌렀을 때 이 View Controller로 화면이 전환되어야 하므로, 설정 버튼에 새롭게 추가한 View Controller에 대해 Action Segueway를 설정하자. 이제 설정 화면에 포함될 컴포넌트를 하나씩 채워보자. 우선 사용자로 하여금 이 화면이 앱의 설정을 위한 화면인 것을 알게하기 위해 상단의..

이제 드디어 LED 전광판 앱의 UI를 그리는 단계로 들어섰다! 기존에 화면 전환, 화면(View)간 데이터 전달을 위한 예제 실습용 프로젝트가 아닌, LED 전광판 앱 개발 실습을 위한 프로젝트 "LEDBoard"를 따로 생성해주자! 그리고 실습에서 그랬던 것 처럼 화면 전환을 위해 Navigation Controller를 추가하자. 그리고 똑같이 디폴트로 생성된 View Controller를 지우고 기존에 생성된 VC를 Navigation Controller의 Root VC로 지정해보자. 그럼 대충 이런 모양이 된다. (놀랍게도, Root VC를 위한 스토리보드 진입점을 나타내는 화살표는 Drag&Drop 방식으로 VC를 넘나들 수 있었다!) 그리고 우클릭 드래그를 통해 초기 VC를 Root VC로 ..

오늘은 화면(View) 간에 데이터를 전달하는 방법에 대해 알아보자. 이전 화면에서 생성된 데이터를 다음 화면에서 활용하는 경우가 분명 생길텐데, 이번 파트에서 잘 학습해두자. 이번 실습은 지난번에 화면 전환 구현 예제에서 약간의 코드 변형을 통해 이루어진다. 우선 코드를 활용하여 화면 전환하는 VC의 스토리보드 상에 Label을 추가해주자. 그리고 각 VC의 코드에 해당 Label에 대한 Outlet 변수도 추가해주자. 그리고 그 Outlet 변수 밑에 name이라는 String 프로퍼티도 추가해주자. var name: String? 다음으로 Root View Controller의 코드에서, VC를 인스턴스화 해주는 메소드에 전환되는 VC 클래스로 다운캐스팅하는 코드를 추가해보자. @IBAction f..

지난번에 간단히 화면 전환 구현 실습을 진행하였는데, 이번에는 ViewController의 Life Cycle(생명 주기)에 대해 알아보려 한다. 앱 내에서 화면이 전환되면 Root View Controller가 로드 된 이후에 새로운 VC가 나타나거나, 사라지는 일 들이 생기는데 이러한 일들을 담당하는 특정 메소드들에 대해 알아보려 한다. 애플 공식 개발자 레퍼런스 사이트에 방문하면 ViewController의 생명 주기를 표현한 상태 전이 그래프를 하나 찾을 수 있는데,이 그래프를 통해 이해를 하는 것이 가장 좋고 빠를 것 같아서 가져와봤다. 우선 위 그래프의 상태에 해당하는 뷰의 각 상태에 대해 알아보자. Appearing : 뷰가 화면에 나타나는 중 Appeard : 뷰가 화면에 나타나는게 완료된..

오늘은 어제 개념적으로 배운 화면 전환 구현에 대해 실습을 진행해볼것이다. 화면 전환을 위해 새로운 프로젝트를 만들어주고, 우선 메인 스토리보드를 띄워보자. 그리고 어제 배운 Navigation Controller를 스토리보드에 끌어와보자! 검색하면 쉽게 찾을 수 있다. 그런데 문제는 늘 해왔듯 끌어와서 보면.. 이렇게 웬 생뚱맞은 뷰가 2개나 더 생겨버린다! Navigation Controller는 말 그대로 화면 전환을 담당하는 친구니까 내버려두고, 디폴트로 생성된 Root View Controller를 선택하고 지워주자. 그러면 이렇게 딱 두 화면만 남는데, 여기서 끝이 아니라 원래 있던 뷰를 새로운 Root View Controller로 설정해줘야한다. 방법은 IBOutlet 변수 추가했던 것 처..

오늘은 중요한 시험 전날이지만... 어김없이 Swift 공부는 시작된다..! 그래서 오늘 공부할 것은 iOS 앱 개발에서 필수적일 수 밖에 없는 개념이지 않을까 싶다. 세상에 잘 만들어졌다고 평가받는 어느 앱이 딱 하나의 화면으로만 구성돼있던가? (물론 몇몇 특수 앱들 제외) 아이폰에서 유저 친화적인 제스처를 통해 화면을 넘기고, 다시 불러오고, 앱의 주요 기능에 속해 있는 많은 세부 기능들을 다른 화면에 모아두고, 메인 화면에서는 그것을 볼 수 없게 하여 앱에서도 미니멀리즘을 표현할 수단으로서 활용하는 그것은 바로~~? 화면 전환! 그렇다! 화면(View Controller) 간 전환이다! 이번에 우리가 구현할 전광판 앱은 둘 이상의 화면을 가진 앱이기 때문에, 화면 전환과 그 방법에 대해 공부해볼 필..