LEEO TIL Dev Log

한 화면으로 이루어져 있는 앱을 만들다 보면, 다른 기능을 새로운 화면에 구성하고 싶은 생각이 듭니다. 이럴 때 필요한것이 화면 전화이죠. 화면 전환에는 여러가지 방법이 있으나, 그 중에 하나인, 가장 기본적이고 많은 기능을 제공하는 NavigationBar의 구성요소와 기능들에 대해 알아보도록 하겠습니다. 정의 및 구성요소 UINavigationBar 는 UINavigationController 라는 컨트롤러에 의해 제어됩니다. UIViewController 를 상속받아 구현되어 있기 때문에 UIViewController 가 가진 요소들을 가지고 있습니다. 가장먼저 UINavigationController 에 대해 먼저 알아보겠습니다. class UINavigationController : UIViewController UINavigationController 는 하나의 뷰 컨트롤러가 아닌 여러개의 뷰 컨트롤러의 계층을 만들고 관리 해주는 컨트롤러 입니다. 사용자가 상세화면이나 상위에 있는 화면이라고 생각하게 만들어주죠. 아래의 이미지를 보면서 생각해봅시다. 첫 화면에서 General 버튼을 누르면, General 페이지로 이동됩니다. 그려먼 화면의 타이틀이 바뀌고, 이전 페이지로 돌아갈 수 있는 버튼이 생기죠. 실제 화면이 쌓이고, 사라지는 순서를 관리하는 navigation stack 이 있습니다. 네비게이션의 첫 뷰 컨트롤러는 스택의 root인 root view controller 가 됩니다. 즉 네비게이션 컨트롤러는 root view controller 인 뷰컨트롤러가 필요하죠. 화면의 순서는 stack이 관리하지만, 사용자가 이 스택을 조종하기 위한 인터페이스로 UINavigationBar 가 있습니다. UINavigationBar 의 구성 요소는 위의 그림과 같습니다. 일반적으로 화면의 가장 상단에서 화면의 계층을 나타내 줍니다. 이전화면은 어디서 왔는지, 내가 할 수 있는 행동은 무엇인지, 이 페이지가 어디인지를 타이틀 등을

개발을 하고, 리팩토링을 하다보면 Enum을 썼을 때 좋은 결과를 얻은 경험이 많습니다. 그러나 너무 남발하게되면 또 코드가 더러워져서 어떻게 응용하면 좋을지 정리해 보도록 하겠습니다. 다음 아티클 을 보고 가져온 코드도 있고, 이해했는지 검증하기 위해 새로 짠 코드들도 있습니다. enum이 무엇인지 문법을 알지만 어떻게 활용해야 할지 모르는 분들 미래의 나를 위해 작성했습니다 프로퍼티 활용방법 enum에는 stored properties 를 만들 수 없습니다 즉 변수를 선언해서 할당할 수 없다는 뜻이죠. 하지만 computed properties 는 선언해서 활용할 수 있습니다. 예제 코드를 보여드릴게요 enum Food { case korean case japanese var name: String { switch self { case . korean: return "kimchi" case . japanese: return "sushi" } } } let todaysLunch = Food.korean.name print(todaysLunch) / / kimchi 위와 같이, 음식의 종류를 정했다면, 저장 프로퍼티인 name 을 만들어서 각각의 값을 저장 해 줄 수 있습니다. 저는 enum에 String을 지정해서 return을 해주려고 했었는데 이 방법이 훨씬 깔끔한 것 같아요. 각각에 변수마다 필요한 값들을 내려주는 것이 명확하네요 메소드 활용방법 프로퍼티 말고 메소드도 enum에 정의해서 활용할 수 있습니다. 아래의 예시를 통해 설명 드리도록 하겠습니다. enum Food { case korean case japanese func description () -> String {

UIkit introduction - User Interface Objects 살펴보기 OverView iOS 앱을 처음 개발하면, 무엇인지도 모르고 공부하기전에 먼저 써보게 됩니다. 알고 쓰는 것보다, 쓰고나서 알아가는게 더 좋다고도 생각합니다. 그래도 어떤 것들이 있고 그래서 무엇을 해주는 것인지 정리해보려 합니다. UIKit에 대한 사용경험이 있다고 전제하여, 작성되었습니다. 없으시다면 TableView를 만들어 보거나, NavigationController를 사용해 보는 것을 추천드립니다. 제가 공부하는 방식은 일단 많이 만들어보고, 좀 더 자세하게 공식문서를 읽으면서 정리하고, 다시 사용하면서 내것으로 만드는 것 입니다. UIkit은 iOS개발에 필요한 기본적인 것들을 제공 해 줍니다. 화면을 그리는데 필요한 것들과 사용자의 이벤트를 처리하는데 필요한 것들이죠. 예를들면 터치 이벤트와 같은 것들입니다. 다음은 UIKit을 사용하는데 종요한 내용입니다. 지금당장은 이해가 되지 않아도 알고 있으면 언젠가 깨달음을 얻을 수 있습니다. 특별한 경우를 제외하고는 앱의 main thread 혹은 main dispatch queue 에서만 UIKit을 사용하세요. 이러한 제한사항은 특별히 UIResponder에서 만들어지거나 어떤식으로든 앱의 사용자 인터페이스를 조작하는 것과 관련된 클래스에 적용됩니다. 기본적으로 AppIcon, Launch screen storyboard가 제공됩니다. 이 두가지는 앱을 구성하는 필수 요소이기 때문에 빈화면으로 제공되지만 다른 앱들과 구분할 수 있도록 제공해야 합니다. Info.plist에는 앱의 Meta data들이 들어있습니다. 여러 설정값들을 이 파일을 수정하여 적용할 수 있습니다. UIKit의 코드는 MVC 패턴으로 되어있습니다. 간단하게 설명드리자면, 아래의 구조와 같습니다. 데이터들은 모델링을 통해 어플리케이션에서 사용될 수 있습니다. 모델링이 왜 필요한지는 없이 앱을 만들어보시면, 보다 명확함을

테이블뷰와 셀프 사이징 테이블뷰을 활용한 간단한 앱입니다. 엄청 간단한 앱이라 금방 만들겠네 했었는데, 생각보다 모르는 부분이 많아서 이번 기회에 배운 내용들을 하나씩 정리 하려고 합니다. 구현을 하면서 막혔던 이슈들에 대한 정리로 서술됩니다. 전체 코드는 이곳 에 있습니다. 먼저 앱이 동작하는 것을 보시고, 아 이런 건 이렇게 만들어야지가 바로 떠오르신다면 이 글을 볼 필요가 없습니다! 앱의 동작은 이곳 에 있습니다. 앱의 구조 앱은 크게 2개의 화면으로 되어있습니다. 하나는 아티스트들을 나열하는 테이블 뷰와 클릭 했을 때 상세 내용을 보여주는, 상세 테이블 입니다. 상세 페이지로 이동하기 위해서 네비게이션 바에 넣어주었습니다. 커스텀 네비게이션 바 앱의 가장 첫 화면에서 보이는 네이게이션 바를 그리면서 문제가 생겼습니다. 스토리보드에서 navigationBar의 스타일 옵션중에 prefersLargeTitles 을 true로 설정하고 배경색을 주고 폰트까지 설정한다음 화면을 보니. 원하는 모습이 나오지 않았습니다. 원래 원했던 것은 위까지 다 차있는 모습이었는데, navigationBar 부분만 색상이 찼습니다. 당연히 navigationBar의 부분의 배경색만 바뀌는게 맞습니다. 내가 원하는대로 바꾸려면 커스터마이징을 해주어야 합니다. 그리고 그 커스터 마이징을 하기 위해서는 UINavigationBarAppearance 를 공부해야했습니다. 자세한 정리는 아래에 참고에 써 놓도록 하겠습니다. 블로그에 정리하는 것도 좋지만 잘 정리된 내용을 정독하는 방법도 개인적으로는 효율적이라고 생각합니다. let myColor = UIColor(red: 118.0 / 255.0 , green: 158.0 / 255.0 , blue: 71.0 / 255.0 , alpha: 1.0 ) let appearance = UINavigationBarAppearance() appearance. backgroundColor = myColor app

30개의 프로젝트를 만들고 있다가, 중간에 멈춰버린 프로젝트입니다. 이유는 간단했습니다. 테스트 코드를 어떻게 짜야하는지도 모르는데 TDD로 프로젝트를 시작했다가 낭패를 보았습니다. 이 프로젝트를 진행하면서 Test는 어떻게 할 수 있는 것이고 어느 부분을 할 수 있는지 나중에 공부하기로 미뤄두었습니다. 메인페이지 Test 페이지를 뺴면 그리 복잡한 앱은 아닙니다. 가장 메인에 테이블 뷰 하나를 만들어 줍니다. 그리고 우측 상단에 새로운 TodoList의 아이템을 추가할 수 있는 뷰를 하나 추가해주고, 마지막으로 투두 리스트를 눌렀을 때, 상세 내역이 보이도록 하는 디테일 뷰가 필요합니다. 기능 구현 추가는 원래 서버에 저장하고 잘 불러오는지에 대해서도 추가해야 하지만, 간단하게 앱내의 저장영역에 저장했습니다. 너무 길어지다 보니 애정도 떨어지고, 개발에 대한 흥미도 떨어지면서 완성을 제대로 하지 못했습니다. 나중에 기회가 된다면 다시 잘 만들고 싶은 앱 입니다. 테이블 뷰 이 이전 앱 부터 테이블 뷰를 쓰는 방법은 익혀왔고, 딱히 이 앱에서 더 특별한 것은 없어서 이렇게 간단히 구현하고 앱 구현을 마칠까 합니다.

개발자 혼자 토이 프로젝트를 하기 어려울 때, 인사이트를 얻기 위해 사용하는 앱 입니다. 디자이너를 위한 앱이라 그런지 디자인 적으로 굉장히 아름답다고 생각하면서 쓰고 있었는데, 이번에는 좀 더 들여다 보면서 UI/UX적으로 스스로 얼마나 볼 수 있는지 정리하고자 선택하게 되었습니다. 앱의 시작 런치 뷰 부터 감동이었습니다. 보통 스켈레톤은 디테일 페이지나, 다른 뷰로 넘어갈 때 로딩화면으로 쓰이는 걸로만 봤습니다. HIG에 보면 런치 뷰(앱의 맨 처음 시작화면)를 첫 화면과 비슷하게 구현해야 사용자가 기다림을 많이 느끼지 않고 무엇이 나올지 미리 예상할 수 있어서 앱을 바로 사용하기에 좋기에 권장하고 있는 방식입니다. 하지만 보통 기업의 앱은 광고 모델이 들어가거나, 자신들의 로고가 들어갑니다. 이해가 안돼는 부분은 아닙니다. 광고하기에 정말 좋은 포인트 이기 때문에 광고를 넣는 것 이라고 생각하기 때문입니다. 첫 화면과 런치뷰가 비슷하게 생건 것을 본 적이 없었는데, 처음으로 경험했고 매우 좋은 경험이었습니다. 앱의 구조 탭바로 되어있습니다. 총 5개의 메뉴이고, 탭바에는 아이콘만 그려져 있습니다. 홈, 검색, 동영상, 알림, 내정보 로 구분되어있는 것 처럼 보였습니다. 너무나 직관적인 아이콘이라 탭바에 글자로 설명이 필요해 보이지 않았습니다. 상단의 인스타그램의 스토리 처럼 구성된 동영상, 사진이 상단에 있었습니다. 그 뷰를 제외한 나머지는 카드로 이루어 져 있었습니다. 이미지가 로딩이 되어있지 않을때는 검정색 이미지를 플레이스홀더로 사용했고 쉐도우를 주어 약간 볼록 튀어나와 보이게 만든 카드가 굉장이 이뻐보였습니다. 플랫한 카드의 앱스토어와는 다른 매력이 있어 보였습니다. 개인적으로는 플랫 디자인 보다는 이게 더 입체감 있고 좋았습니다. 검색 굉장히 독특한 느낌의 검색이었습니다. 일단 하단에 필터가 상시로 떠 있어서 약간은 거슬리지만, 사라지지 않아 원할 때 마다 바꿀 수 있어서 좋았습니다. 이미지 검색은 컬렉션 뷰로 구현되어 있는 것 처럼

앱을 만들다보면, SingleView App에서 어느새 여러개의 화면전환이 필요한 순간이 오게됩니다. 그런데 화면 전환의 방법과 종류가 너무 많아서 어느 순간에 어떤 화면을 써야하는지 계속 찾계되어 정리하게 되었습니다. 화면 전환할 때, 이전 코드를 복사해서 쓰고있는 사람 다른 사람의 코드를 복사해서 화면전환을 하는 사람 이것 저것 다 해보다가 내가 원하는 결과가 나온사람 미래의 나 가 읽으면 좋을 것 같습니다. 화면전환                     화면 전환이란 다른 화면이 등장하는 것을 말합니다. 버튼을 눌렀을 때 혹은 테이블 뷰나 컬렉션 뷰의 셀을 눌렀을 때 다른 화면이 나오는 경우이죠. 보통 많이 사용했던 방법을 나열 해보면 아래와 같습니다. viewController에서 다른 viewController를 present 해줍니다. NavigationController에 embed 시켜고 다른 viewController를 push 합니다. 스토리 보드에서 seque를 이용해서 control키를 누르고 드래그로 나타날 화면을 지정 해줍니다. 모달이나 전체화면과 같은 화면의 종류에 대해서는 이 글에서 다루지 않겠습니다. modalPresentationStyle에 대한 글을 나중에 정리하게 되면 추가 해놓겠습니다. viewController에서 다른 viewController 부르기 viewController를 만드는 방법에는 저는 보통 2가지를 사용합니다. 코드로 만들거나, storyBoard에 뷰컨트롤러를 그립니다. 코드로 뷰 컨트롤러를 만들었을 때, present의 인자로 내가 만든 viewController의 인스턴스를 넘겨줍니다. 그러면 화면 전환이 일어납니다. @IBAction func clickPresentByCodeButton ( _ sender: Any) { let myViewController = MyViewController () self .present(myViewC