LEEO TIL Dev Log

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

얼마전까지만 해도, 무겁고 낡아서 안쓸만한 앱이라고 생각하고 있던 쇼핑몰 앱 중 하나인 G마켓 앱을 다시 써 보았는데, 굉장히 많이 달라졌고 또 좋아져서 한 번 살펴보자! 하는 마음에 탐구를 시작하게 되었습니다. 앱실행 앱을 실행해서 가장 첫 페이지에 들어갔을 때, 서치 뷰컨트롤러에 애니메이션에 눈이갑니다. 런치에 애니메이션이 들어간게 아닌, ViewWillAppear 때 애니메이션을 실행해줍니다. 동시에 탭바의 스마일 버튼도 같이 웃어줍니다. 시선이 분산되는게 조금 아쉬웠지만, 여러 애니메이션이 있어서 역동적인 느낌을 받았습니다. 또한 강조하고 싶은 메뉴에 빨콩(?) 버튼이 있어서 배너와 빨콩에 손이 먼저 갔습니다. 탭바 메뉴들 검색 검색은 탭바 메뉴에 있는데, 모달로 올라오는게 조금 신기한 느낌이었습니다. 하지만 검색을 하고나면, 네비게이션 푸쉬를 해 주고, 팝을 했을 떄, 메인 페이지로 돌아가는 동선이 낯설었습니다. 뒤로가기를 눌렀는데 내가 온 곳으로 돌아가지 못하기 때문에 그렇게 느꼈나봅니다. 스마일 스마일 클럽을 위한 공 소개입니다. 이 페이지 또한 탭바인데, 모달처럼 오른쪽 위에 닫기 버튼이 있습니다. 누르면 홈 탭으로 돌아갑니다. 마이페이지 마이페이지 탭바의 메뉴중 하나입니다. 하지만 누르면 네비게이션 푸쉬가 됩니다. 뒤로가기를 누르면 이전에 있었던 페이지로 돌아갑니다. 히스토리 매우 인상적인 페이지였습니다. 동작은 마이페이지 처럼 화면전환이 있지만, 그 내용은 사용자의 행동정보가 남아있습니다. 검색기록, 상품조회 등이 타임라인으로 남아있습니다. 내가 아이 쇼핑을 했던 내역을 돌아보며 아까 마음에 들었던 물품으로 돌아가기 좋아보였습니다. 탭바의 이미지가 가장 최근 상품의 썸네일로 변하는 것은 사용자의 호기심을 자극하기 충분해 보였습니다. 하지만 상품의 크기가 다르기 때문에 떄로는 이쁘지만 어쩔때는 이상해 보였습니다. 성능 사용하는데 답답함을 느끼지 못했습니다. 로딩뷰가 있긴 하지만, 기본적으로 로딩이 굉장히 빠르다고 느꼈

이 글은 제목처럼 Optional이란 무엇인가요? 라는 질문에 대답하지 못하는 사람을 위해 쓰였습니다. Swift 문법 책에서 Optional은 써 보았지만, 무엇인지 왜 쓰는지 모르는 사람을 위해 쓰였습니다. 그리고 미래의 저를 위해 쓰였습니다. 옵셔널은 타입 옵셔널을 이해하기 위해서는 타입에 대한 이해가 필요합니다. 스위프트에는 두 종의 타입이 필요합니다. 하나는 이름이 있는 타입(named type)이고, 나머지 하나는 이름이 없는 혼합된 타입(compound Types)입니다. 사용자가 만든 클래스 타입, 배열, 딕셔너리 등은 전부 다 이름이 있는 타입입니다. 또한 데이터의 자료형을 나타내는 숫자, 문자 형들도 다 이름이 있는 타입이죠. 혼합 타입은 이름이 없이 정의된 타입입니다. 예를들면 튜플의 (Int, Double) 로 정의된 타입들이 혼합형 타입입니다. 이름이 없고, 이미 정의된 타입들이 섞여있습니다. 그렇다면 타입의 종류에는 어떤 것들이 있을까요? type → function - type type → array - type type → dictionary- type type → type -identifier type → tuple- type type → optional- type type → implicitly-unwrapped-optional- type type → protocol-composition- type type → opaque- type type → metatype- type type → any- type type → self- type type → ( type ) 타입들을 살펴보다보면, 옵셔녈 타입이 있습니다. 그러므로 옵셔널은 타입중에 하나 입니다. 이름 그대로 이미 정의된 타입에 값이 있을 수도 있고 없을 수도 있는 타입입니다. 옵셔널로 만들어 써보기 옵셔널 타입을 만드는 방법은 간단합니다. 타입의 뒤에 ? 기호를