김종권의 iOS 앱 개발 알아가기

TextFields 한 줄의 고정 높이 필드 cf) 여러 줄의 텍스트 입력이 필요한 경우 TextView 사용 모서리가 둥근 경우가 많고 사용자가 탭하면 키보드가 자동으로 표출 이메일 주소와 같은 소량 정보 요청 목적을 전달하는 데 도움이되도록 텍스트필드에 PlaceHolder 표출 사용자가 모든 내용을 지우기위해 delete탭을 계속 탭할 필요가 없도록 텍스트필드 우측에 지우기 버튼을 표출 비밀번호와 같은 민감한 데이터를 요청할 때는 secure 속성 사용 Image를 사용하여 TextField에 명확성과 기능을 제공: 일반적으로 TextField 왼쪽 끝에 field의 용도로 이미지를 나타내는 이미지 사용 키보드 iOS는 서로 다른 유형의 입력을 지원하도록 설계된 여러 가지의 키보드를 지원하므로적절..

Switches 앱 스타일에 맞게 스위치의 색상을 변경하는 것을 지향: 스위치의 색상 커스텀 가능 TableView의 행에만 스위치를 사용: switch의 용도는 설정 목록과 같은 TableView에서 사용하기 위한 것이므로, 도구 모음이나 탐색 모음에서 유사한 기능이 필요할 경우, 두 개의 개별 단추 사용 스위치 값을 설명하는 Label을 추가하는 것을 지양: 스위치는 켜져 있거나 꺼져 있으므로 이러한 상태를 설명하는 Label을 제공할 경우 중복되고 인터페이스가 복잡해지는 현상 발생 하나의 switch로 인하여 다른 곳에 영향을 받는 곳을 고려하여 설계: switch는 설정에서 비행기 모드 스위치를 활성화하면, 셀룰러 및 핫스팟과 같은 특정 기타 설정이 비활성화 되는것처럼 다른화면의 콘텐츠에 영향을 ..

Steppers 증분 값을 늘리거나 줄이는데 사용되는 두 segmented control 기본적으로 setpper의 한 segment는 더하기 기호를 표시, 다른 segment는 빼기 기호를 표시 기호는 다른 이미지로 교체 가능 Stepper의 영향을 받는 값을 분명하게 표출 stepper 자체는 값을 표시하지 않으므로 사용자가 stepper를 사용할 때 변경되는 값을 알고 있어야 하는점 존재 큰 값이 변경 될 가능성이 있는 경우 stepper사용을 지양 인쇄 화면에서의 stepper를 이용한 복사 매수를 설정하는 부분인, 사용자들이 설정을 거의 변경하지 않는 경우에는 좋지만 stepper를 사용하여 페이지를 선택하는 것은 많은 interaction이 필요하므로 비효율적 * 참고 https://devel..

Slider 엄지 손가락이라고하는 컨트롤이 있는 가로 트랙 손가락으로 슬라이드하여 미디어 재생 중 화면 밝기와 같은 최소값과 최대값 사이 설정 슬라이더의 값이 변경될 경우 최소값에서 부터 엄지 손가락 사이의 트랙 부분이 색상으로 채워지는 형태 UISlider 사용 슬라이더 트랙 양쪽에있는 이미지를 한눈에 비교가 되는 이미지를 삽입 ex) 이미지 크기를 조정하는 Slider: 왼쪽에는 작은 이미지 아이콘, 오른쪽에는 큰 이미지 아이콘 사용 Slider를 사용하여 오디오 볼륨을 조정하는 것을 지양 볼륨 지정은 MPVolumeView를 사용: 볼륨 지정 Slider와 오디오 출력 장치를 변경하기 위한 컨트롤이 내장되어 있는 View * 참고 https://developer.apple.com/design/hum..

Segmented control 상호배타적인 내용의 버튼으로 두 개 이상의 세그먼트로 구성된 선형 세그먼트에는 텍스트, 이미지 모두 가능 넓은 세그먼트가 탭하기 쉬우므로 세그먼트 수를 5개 이하로 설정 세그먼트 컨텐츠 크기를 일관되게 유지하여 어색하지 않도록 표출 segmented control의 한 집합에는 하나의 텍스트 or 이미지만 사용하여 혼란스럽지 않게 표출 * 출처 https://developer.apple.com/design/human-interface-guidelines/ios/controls/segmented-controls/

Refresh Content Controls ScrollView에 추가하여 사용하는 형태 보통 ScrollView를 상속받은 TableView에서 loading시 사용 Refresh Content Control vs Activity Indicators 둘다 로딩을 암시하는 control이지만, refresh는 scrollView에 위치 Activity Indicator의 코드 lazy var activityIndicator: UIActivityIndicatorView = { let activityIndicator = UIActivityIndicatorView(frame: .init(x: 0, y: 0, width: 200, height: 200)) activityIndicator.backgroundCol..

* Pull-Down Menu는 Context Menu와 유사하므로 주의: https://ios-development.tistory.com/540?category=980570 [iOS - HIG] 45. Context Menus Context Menus 상황에 맞는 메뉴를 제공하여 인터페이스를 복잡하게하지 않고 화면 항목과 관련된 추가 기능에 엑세스 할 수 있도록 표출 Peek and Pop: long touch 시 실행 사용 가이드: https://developer.appl.. ios-development.tistory.com Pull-Down Menus iOS14+ 현재 컨텍스트에서 유용한 작업 목록을 나열하는 메뉴 메뉴를 표시하는 버튼 근처에 메뉴가 열리므로 사용자들이 수행중인 작업 간의 관계를 즉..

Progress Indicator 앱이 콘텐츠를 로드하거나 긴 데이터 처리 작업을 수행할 때까지 사용자가 정적 화면을 보는게 아닌, indicator를 보는 형태 Activity Indicators Refresh Content Controls과 구분 회전하는 Activity Indicator 사용자가 얼마나 오래걸릴지 예측할 수 있게끔 Activity Indicator보다는 Progress bar를 지향 사용자들은 정지된 화면을 보고 프로세스가 중단되었다고 느끼므로, 항상 Activity Indicator를 움직이도록 설정 작업이 완료 될때까지 기다리는 동안 사용자에게 유용한 정보를 제공 Progress Bars 왼쪽에서 오른쪽으로 채워지는 트랙 형태 앱이 바쁜 것처럼 보이도록 부정확한 진행 정보를 표출..