본문 바로가기

iOS - 실무관련92

App architecture - Launching 앱을 시작하는 순간은 사람들이 앱에 대해 느끼는 방식에 상당한 영향을 미칩니다. 사람들이 사용하는 기기나 앱을 마지막으로 연 이후 시간에 관계없이 앱을 시작하는 경험은 빠르고 원활해야 합니다. 아래 지침은 즐거운 출시 경험을 디자인하는 데 도움이 될 수 있다. Responding to the Launch of Your App 시작 화면을 제공한다. 시스템은 앱이 시작되는 순간 시작 화면을 표시하고 앱의 첫 번째 화면으로 빠르게 교체한다. 시작 화면의 기능은 사람들에게 앱이 빠르고 반응적이라는 인상을 주는 동시에 초기 콘텐츠가 로드 되도록 하는 것이다. 시작 화면에서 매끄럽게 전환되도록 하려면 첫 번째 앱 화면과 유사하고 그 자체로 주의를 끌지 않는 일반 화면을 디자인하자. Launch Screen 적절한.. 2022. 3. 29.
iOS - Interface Essentials [Interface Essentials] 대부분의 iOS 앱은 UIKit라는 공동 인터페이스 요소들을 규정하는 개발 프레임워크를 사용해 설계된다. 이 프레임워크(UIKit)는 시스템 전체에 변함없는 모습을 달설하는 동시에, 높은 수준의 커스텀을 가능하게 한다. UIKit요소는 유연하면서 친숙하다. 또 적응 가능하며, 어떤 iOS기기에서 멋지게 보이는 앱을 디자인할 수 있고, 시스템의 형태가 변경될 때마다 자동적으로 업데이트를 한다. UIKit에서 제공하는 인터페이스 요소는 세가지 주요 범주로 나뉜다. Bar - 사용자에게 앱 내 위치를 알리고 탐색을 제공하며 작업을 시작하고 정보를 전달하기 위한 버튼 또는 기타 요소를 포함할 수 있다. View - 텍스트, 크래픽, 애니메이션, 대화형 요소와 같이 사람들.. 2022. 3. 29.
iOS - Themes [iOS Design Themes] 명확성 문자는 각각의 크기마다 읽기 쉬우며, 아이콘은 정확하고 뚜렷하게, 장식은 섬세하며 적절하고, 기능에 명확히 집중해 디자인에 동기부여를 한다. 네거티브 스페이스, 색, 서체, 그래픽 그리고 인터페이스의 요소들은 중요한 내용을 미묘하게 강조하고, 상호작용성을 전달한다. 차이 유연한 움직임과 아름다운 인터페이스는 사람들이 하지 않고 내용을 이해하고, 상호작용하는데 도움을 준다. 내용(컨텐츠)는 대부분 화면의 전체를 채우거나, 반투명과 블러 처리는 뭔가 더 있음을 암시한다. 베젤, 그라디언트와 드롭섀도우(그림자)사용을 최소화함으로서 인터페이스를 가볍게 만들고 내용을 무엇보다 중요하게 만든다. 깊이 뚜렷하게 구분되는 시각 레이어와 사실적인 모션은 위계를 전달하고, 활기를.. 2022. 3. 29.
UI component UI component를 알아보기전에 UIKit이 무엇인지 알아보자. UIKit이란 iOs 애플리케이션의 사용자 인터페이스를 구현하고 이벤트를 관리하는 프레임워크(제공받은 일정한 요소와 틀, 규약을 가지고 무언가를 만드는 일)이다. UIKit 프레임워크는 제스처 처리, 애니메이션, 그림 그리기, 이미지 처리, 텍스트 처리등 사용자 이벤트 처리를 위한 클래스 포함. Table View, Slider, Button, Text Field등 애플리케이션의 화면을 구성하는 요소를 포함. UIKit은 iOS와 tvOS 플랫폼에서 사용 [Label] - 정보 텍스트의 한 줄 이상을 표시하는 보기. - 텍스트의 글꼴, 텍스트 색상, 정렬, 강조 표시 및 음영을 제어 가능. [Button] - 사용자 상호 작용에 대한 .. 2022. 3. 28.
Info.plist Info.plist Full name: Information Property List Files 말 그대로 Info.plist파일은 실행 패키지에 관한 필수 설정 정보가 포함된 구조화된 텍스트 파일이다. Info.plist가 필요한 이유? Info.plist는 번들 실행 파일에 대한 필수 구성 정보를 포함하는 구조화된 텍스트 파일이다. 파일 자체는 반적으로 유니코드 UTF-8 인코딩을 사용하여 인코딩되며 내용은 XML을 사용하여 구성된다. 루트 XML 노드는 번들의 다양한 측면을 설명하는 키 및 값 세트의 콘텐츠를 포함하는 사전이다. (시스템은 이러한 키와 값을 사용하여 앱과 앱 구성 방법에 대한 정보를 얻는다. 결과적으로 번들로 제공되는 모든 실행 파일(플러그인, 프레임워크 및 앱)에는 정보 속성 목록.. 2022. 3. 28.
App Project [PROJECT] : 생성하는 모든 프로젝트는 해당 특정 프로젝트의 모든 대상에 대한 기본 빌드 설정을 정의한다. : 하나 이상의 소프트웨어를 만드는데 필요한 모든 파일, 리소스, 정보를 위한 저장소 Info Deployment Target : 해당 iOS 타겟을 설정해줄 때는 iOS 점유율을 참고하여 설정 Configuration : 기본적으로 Debug, Release를 지원하며 개발 버전, 릴리즈버전, 무료버전, 유료버전, 베타 등 다양한 환경에서 테스트를 할 때 사용함 Localization : 로컬라이징(나라별로 언어를 설정하는 것) 해주고 싶은 언어를 설정해주는 곳 Build Settings : 빌드 설정은 어떻게 특정 측면의 제품 빌드과정이 수행될 지에 관한 정보를 포함하는 변수 수정된 Bu.. 2022. 3. 28.
App Life Cycle / Scene Life Cycle / View Life Cycle [App] Life Cycle Not Running : 앱이 실행되지 않은 상태 : 실행되고 난 후, 시스템은 UI가 화면에 보여야한다면 앱을 inactive 상태에, 아니라면 background 상태에 둔다. : foreground로 시작할 때 시스템은 자동으로 앱을 active상태로 전환한다 Inactive : 앱이 foreground에서 실행중이지만 아무런 이벤트를 받지 않고 있는 상태 : 앱의 화면은 보이지만 상호작용이 안되는 상태 Active : 앱이 foreground에서 실행중이며 이벤트를 받고 있는 상태 : 앱의 화면도 보이고 상호작용도 되는 상태 Background : 앱이 background에 있으며 실행되는 코드가 있는 상태 : 대부분 앱은 suspended상태로 이행하는 도중에 일시.. 2022. 3. 28.
Info.plist - Privacy 알아두면 좋은 속성 - 앱 reject 사유로 자주 언급되는 항목 사용예시 - Privacy - Camera Usage Description [Privacy - Access to a File Provide Domain Usage Description] 앱이 파일 공급자가 관리하는 파일에 액세스해야 하는 이유를 사용자에게 알려주는 메시지입니다. [Privacy - AppleEvents Sending Usage Description] 앱이 Apple 이벤트를 보낼 수 있는 기능을 요청하는 이유를 사용자에게 알려주는 메시지입니다. [Privacy - Bluetooth Always Usage Description] 앱이 블루투스에 액세스해야 하는 이유를 사용자에게 알려주는 메시지입니다. [Privacy - Bl.. 2022. 3. 28.
동기 / 비동기와 직렬 / 동시 [GCD] GCD: 우리가 Queue에 작업을 보내면 그에 따른 Thread를 적적히 생성해서 분배해주는 방법 GCD에 대해서 자세히 말하자면 어느 Task를 어느 Thread가 할 것인지, Mutil - Thread로 할 것인지, Sync으로 할지, Async로 할지 등을 처리하는 API queue: OS자체에서 다른 Thread들에게 일을 분산처리 해주는 곳 (선입선출) - GCD에서 사용하는 queue의 이름은 Dispatch Queue 이다. 즉, Dispatch Queue에서 작업이 추가되면 GCD는 작업에 맞는 Thread를 자동으로 생성해서 실행하고, 작업이 종료되면 Thread를 제거하게 된다. 이제 그림을 나타내면 아래와 같다. 코드로 작성해본다면 DispatchQueue.global().. 2022. 3. 28.
URL to Image let url = URL(string: "해당URL입력") let data = try? Data(contentsOf: url!) foodImage.image = UIImage(data: data!) 2022. 3. 28.
HexColor 사용하기 extension ViewController { func hexStringToUIColor (hex:String) -> UIColor { var cString:String = hex.trimmingCharacters(in: .whitespacesAndNewlines).uppercased() if (cString.hasPrefix("#")) { cString.remove(at: cString.startIndex) } if ((cString.count) != 6) { return UIColor.gray } var rgbValue:UInt32 = 0 Scanner(string: cString).scanHexInt32(&rgbValue) return UIColor( red: CGFloat((rgbValue & .. 2022. 3. 28.
Navigation Controller 관련 코드 1. Navigation bar 없애기 사용이유: Navigation bar를 사용하지 않고 버튼과 UIView를 통해서 Navigation bar를 구현할 때 override func viewWillAppear(_ animated: Bool) { super.viewWillAppear(animated) self.navigationController?.setNavigationBarHidden(true, animated: animated) } override func viewWillDisappear(_ animated: Bool) { super.viewWillDisappear(animated) self.navigationController?.setNavigationBarHidden(false, animate.. 2022. 3. 28.
Alamofire 관련 코드 1. Get - queryString import Foundation import Alamofire class FastRequest { func getData() { let url = "해당URL입력" let params = [ "매개변수명" : "값"] AF.request(url, method: .get, parameters: params, encoding: URLEncoding.queryString) .validate() .responseDecodable(of: FastResponse.self) { response in switch response.result { case .success(let response): print("DEBUG>> Success \(response) ") //로그인한 사용자.. 2022. 3. 28.
모듈화 - iOS 라이징테스트 템플릿 라이브러리 이용 팝업 - code 팝업 - storyboard DropDown - pickerView 이외의 선택 View Bottom Sheet 움직이는 Label TapMan - 상단탭으로 화면전환 Side Menu Charts Auto---Banner_Demo TableVie Json To TableView - 템플릿 버전 x Json To TableView - 템플릿 버전 O TableView_Demo - 마켓컬리 마이컬리 ExpandableTableView_Demo - 마켓컬리 카테고리 가로 스크롤 + 테이블뷰 커스텀 CollectionView-in-TableView(라인 1개) 커스텀 CollectionView-in-TableView(라인 여러개) 소셜로그인 FaceBook.. 2022. 3. 28.
화면전환 방법 1. 네비게이션 컨드롤러를 이용한 화면전환 우선 Navigation Controller - ViewController - ViewController 형식으로 만들어준다. Navigation Controller - ViewController를 segue로 "root view controller" 연결하고 첫번째 ViewController에 버튼을 놓아준다. 첫번째 ViewController의 버튼과 두번째 ViewController를 segue로 "show" 연결한다. 2. 화면 일부 / 전부를 덮는 modal 아래와 같이 버튼과 ViewController 두개를 구성해준다. 일부만 덮는) 버튼을 두번째 ViewController와 segue로 "Present Modally" 연결해준다. 전체를 덮는) 버.. 2022. 3. 28.
Navigation back button custom하기 Navigation Controller의 bar를 선택해서 back, back Mask 이미지를 바꾼다. root ViewController에 있는 bar를 선택한다. Back Button부분에 스페이스바를 한번눌러 공백을 만들고 Enter를 눌러주면 < back 에서 2022. 3. 28.
TableView로 스크롤되는 UI 구성하기 오늘은 스크롤 되는 화면을 구성할 때 사용한 방법을 설명해보겠다. 만들어볼 화면은 배달의 민족앱에서 장바구니 화면을 구현해볼 것이다. 0. 앱을 만들기전 기획 기획단계에서는 아래의 항목이 들어가면 좋다. 몇개의 Cell을 사용할 것인지? 각 Cell의 Height Cell 내부의 Label, Button의 여부 1. TableView와 UIView를 사용해서 스크롤이 되지 않는 고정적인 UI만 구성해준다. 상단: UIView 위에 장바구니 Label과 전체삭제 Button 하단: 주문하기 Button과 그 아래의 UIView 2. UI구성을 완료했다면 각 Cell을 만들어보자. cell을 구성하기전 TableViewCell을 아래와 같이 만들어야함. ) 중요! indetifier는 각 Cell의 Clas.. 2022. 3. 28.
Push segues can only be used when the source controller is managed by an instance of UINavigationController. Push segues can only be used when the source controller is managed by an instance of UINavigationController. 위와 같은 에러가 떴을 땐 대부분의 문제는 UINavigationController를 연결하지 않아서 생기는 오류이다. 하지만 나는 위의 문제외의 다른 문제가 발생해서 생기는 오류의 해결법에 대해서 작성하겠다. [문제] 현재 내 상황은 로그인VC에서 MainVC를 연결하고 MainVC에서 버튼을 클릭하면 Push로 화면 전환을 하도록 만들었다. (이때 MainVC는 UINavigationViewController와 연결되어 있다.) 하지만 Push를 코드를 작성하면 아무런 반응이 없었고 Segue로 연결하면 위의.. 2022. 3. 27.
UserDefaults UserDefaults를 사용하는 이유? 앱내부에 데이터를 저장해야 하는 경우 보안이 필요하지 않는 소량의 데이터를 저장할 때 사용한다. 대량의 데이터는 다른 방법으로 UserDefaults의 데이터 저장 형태 데이터는 [데이터, Key] 형태로 저장한다. 이때 Key는 String이다. UserDefaults의 사용법 현재 우리가 토글 스위치 상태를 저장하려 한다고 생각하고 코드를 바라보자. UserDefaults.standard.set(TestSwitch.isOn, forKey: "switchState") // 스위치의 상태를 데이터 저장 1 let myUserDefaults = UserDefaults.standard myUserDefaults.set(TestSwitch.isOn, forKey: "s.. 2022. 3. 27.
실습편 - Dynamic Font 이미지 크기에 따라서 text의 크기가 변경되는 인증서 실습을 해보겠다. [잘못된 방법의 예시 - 비율 문제] 1. image View를 화면에 놓고 인증이미지를 선택해준다. 2. cmd + = 을 눌러서 실제 이미지의 크기를 화면에 만들어주고 leading, trailing을 각 20씩 잡아주고 vertical정렬을 해준다. Content Mode에 대해서 scaleToFill: 이미지의 높이와 너비가 ImageView의 크기와 동일하게 늘어난다. AspectFit: 이미지의 가장 긴 부분(height or width)이 ImageView와 일치하도록 늘어난다. (이미지 왜곡x) AspectFill: 이미지의 가장 짧은 부분(height or width)이 ImageView와 일치하도록 늘어난다. (이.. 2022. 3. 27.
12. 코드로 컴포넌트 추가하기 1. 객체 생성 let myButton = UIButton.init(type: .system) //시스템 타입의 버튼 객체 생성 2. 타이틀 작성 myButton.setTitle("MyButton", for: .normal) //버튼의 title을 작성하고 일반 버튼으로 설정 3. addSubview self.view.addSubview(myButton) //현재 ViewController에 addSubview를 통해서 버튼을 올리는 것 현재까지의 코드 import UIKit class ViewController: UIViewController { override func viewDidLoad() { super.viewDidLoad() let myButton = UIButton.init(type: .sy.. 2022. 3. 27.
11. Botton [Button inset] Label과 다르게 버튼은 터치로 눌러야하기 때문에 Xcode자제에서 기본적으로 컨텐츠에 비해서 여백을 만들어준다. Label도 위아래 여백이 있는거 처럼 보이지만 여백이 없이 text에 딱 맞춰진 것이다. 따라서 Label에는 inset을 조절하는 부분이 없다. 버튼으로 돌아와서 버튼의 사이즈 인스펙터로 가면 Content insets이라는 부분이 있다. 이 부분을 통해서 버튼의 여백을 조정해보자. 현재 버튼의 위아래 여백은 있는데 왼쪽, 오른쪽의 여백은 없으므로 추가해보자. (좌우 10) 여백이 추가는 되었지만 컨텐츠의 크기가 줄어들었기 때문에 "Cmd + ="을 눌러서 여백과 컨텐츠에 맞는 버튼의 크기로 만들자. 이렇게 해주면 기본적으로 위아래 여백 + 양쪽 10씩의 여백.. 2022. 3. 27.
10. StackView StackView의 장점은 여러개의 컴포넌트를 정렬해야할 때 복잡한 Constraints를 단순화 시켜서 간단하게 만들 수 있다. StackView를 화면에 놓고 다른 컴포넌트들을 StackView위에 놓으면 StackView안에 컴포넌트들이 들어가게 된다. 하지만 위의 방식처럼 StackView에 컴포넌트를 추가하는 경우 View자체를 2개이상 추가했을 때 상위View에 View가 들어가서 중첩 View가 될 수 있다. 다음 방법으로 진행하면 오류가 나지 않게 만들 수 있다. [오류 없는 StackView] 1. StackView에 넣을 컴포넌트들을 우선적으로 화면에 배치해준다. 폰트와 글자 길이가 다른 Label 3개를 추가해주었다. 2. 추가한 컴포넌트를 모두 클릭하고 우측하단에 있는 Embed i.. 2022. 3. 27.
9. Margin 1. View를 추가하고 배경색을 바꿔준다. 2. Constrains를 모두 0으로 잡아준다. 이 때 우리가 항상 체크해제했던 Constrains to margins을 체크해준뒤 잡아준다. 딱히 달라진건 없다. marging을 체크한다는 것은 View안의 무언가를 넣었을 때와 관련있기 때문에 View 외부의 어떤 Constraints와는 관련이 없어서 아무 변화가 없다. View의 사이즈 인스펙터를 보면 아래와 같은 layout margins이 있다. layout marginsdml Defaults 값은 8이다. 무슨말인지는 아래의 과정으로 확인해보자. 3. 이제 새로운 View를 추가해서 margin을 체크했을 때랑 하지 않았을 때의 차이를 보자. [체크해제] [체크] "layout marginsdml.. 2022. 3. 27.
8. ScrollView ScrollView를 사용하는 상황은 이미지 또는 컨텐츠가 화면의 크기로 감당할 수 없을 때 사용한다. [큰 이미지를 스크롤 뷰로 보기] 1. 우선 이미지를 준비해서 imageView를 이용해서 이미지를 추가한다. (Content Mode: Scale To Fill) Editor - size to fit Contetnt을 클릭하면 아래와 같이 화면크기보다 이미지의 크기가 큰것을 확인할 수 있다. 이 크기를 우리는 스크롤 View를 이용해서 나타내보려고 한다. 이미지 크기는 다시 원래 상태로! 2. 해당하는 컨텐츠를 클릭하고 우측하단에 Embed in View - ScrollView를 클릭해준다. 3. 이제 ScrollView를 전체화면크기로 키우기 위해서 Constraints의 값을 모두 0으로 해준다... 2022. 3. 27.
7. Size Class 이번에는 핸드폰 화면 방향이 세로모드와 가로모드가 되었을 때의 오토레이아웃에 대해서 배워보자 1. 우선 위에는 버튼이 있고 아래에는 textView가 있는 화면을 구성해보자. 2. Constraints를 top 30 leading 30 trailing 30 bottom 30으로 잡아보자. 버튼이 잘 안보이기 때문에 색상을 넣어주자. HIG - Adaptivity and Layout - Size Class를 보면 [세로모드] width: Compact (작음) height: Regular (보통) [가로모드] width: Compact or Regular (Any) height: Compact (작음) 즉, 세로모드일 떄는 height: Regular 가로모드일 때는 height: Compact 라는 것을.. 2022. 3. 27.
6. priority★★★ priority: 우선순위 내가 우선순위를 설정했다는 것은 여러개의 컴포넌트들이 화면에 있을 때 우선순위가 높은 것들이 먼저 크기, 위치가 지정이 되고 낮은 것들은 나중에 지정이 되는 것이다. Content Hugging Priority: 주어진 크기보다 작아질 수 있다. Content Compression Resistance Priority: 주어진 크기보다 커질 수 있다. priority는 1부터 1000까지 설정할 수 있다. 수가 높을 수록 우선순위가 높은 것이다. 1000은 어떤 상황에서도 먼저 변화지 않는 상태를 만들어 놓는 것이다. [Hugging priority 실습] Content Hugging Priority: 주어진 크기보다 작아질 수 있다. 1. 화면에 Label 두개를 놓는다. 2... 2022. 3. 27.
5. Multiplier Multiplier: 곱, 비율 [Multiplier 개념] Multiplier는 쓰기가 까다로운 상황들이 있어 정확하게 알고 써야한다. 1. View를 추가하고 Contraints를 각 0으로 설정해서 화면에 꽉 차도록한다. (SafeArea내부에서 꽉차게) 2. View를 선택하고 Leading의 Multiplier를 조절해보자. 0.5(50%): 기존의 반 1(100%): 기존과 동일 2(200%): 기존의 두배 하지만 직접 조절해보면 아무런 변화가 없다. 그 이유는 Leading부분이 시작하는 곳이 0이기 때문에 0 * 0.5 = 0, 0 * 1 = 0, 0 * 2 = 0 으로 변화가 없다. 그러면 Constant를 조정해주면 변화가 생기지 않을까? 전혀 변화가 없다. 그 이유는 Constant는.. 2022. 3. 27.
4. Align Align: 정렬 화면에 새로운 두개의 View를 놓고 크기를 다르게 설정해보자. 노란색(200 200) 빨간색 (100 100) 크기에 대한 부분은 지정이 되었지만 위치에 대한 정보는 지정되지 않아서 오류가 뜬다. 그렇기 떄문에 아래와 같이 위치를 잡아보자. 노란색 (top: 20, leading: 20) [정렬해보기 - 2개] 이제 빨간 View를 노란 View와 정렬을 해보자. 1. 두 View를 동시에 클릭한다. 2. 우측 하단에 있는 align을 클릭해서 Top Edges, Leading Edges를 클릭해준다. 결과적으로 빨간색 View가 노란색 View의 top, leading에 맞게 정렬이 되고 크기는 아까 잡아둔대로 100 100으로 잡히게 된다. (Top Edges, Leading Ed.. 2022. 3. 27.
3. Constraints Equal Constraints Equal [두개 이상의 View의 Constraints] 위와 같이 UIView로 화면을 구성하고 4방향의 Constraints를 20씩 설정해주자. 여기서 Trailing의 Constraints는 화면으로부터 20의 Constraints가 잡히는 것이 아니라 노란색 View부터 20의 Constraints가 잡히는 것이다!!! [오류 발생1 - 왼쪽View, 오른쪽 View] Constraints을 잡게 되면 위와 같이 에러가 뜨는 것을 확인 할 수 있다. 그 이유는 노란색 View의 Constraints가 제대로 잡히지 않아서이다. 보라색 View의 Trailing은 노란색 View와 Constraints를 공유하기 떄문에 노란색 View 입장에서는 Leading이 잡히게 된다.. 2022. 3. 27.

티스토리툴바