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

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

Picker 사용자들이 선택할 수 있는 스크롤 가능한 목록을 하나 이상 표출 iOS 14+에서는 Date Pickers 제공 (아래 내용 참고) 스크롤에 있어서 예측 가능하고 논리적으로 정렬된 값을 사용 Picker를 표출할 때 화면전환을 하지 않고 Picker는 일반적으로 화면 하단에서 나타나도록 설계 Date Picker iOS 14+ 터치, 키보드를 통해 날짜와 시간 둘 다 선택할 수 있는 인터페이스 DatePicker 추가 datePicker에서 제공하는 모드 날짜: 월 / 일 / 년도 시각: 시간 / 분 / AM / PM 날짜와 시간 카운트 다운 타이머: 최대 23시 59분까지 시간과 분을 표출 공간이 제한되어 있는 경우 간결한 DatePicker 사용 DatePicker 클래스: https:/..

Page Control indicator image를 통해서 flat 목록 페이지를 표출 스크롤되는 indicator row는 사용자가 원하는 페이지를 찾기 위해 목록을 탐색하는데 도움 인터렉션 - swipe: 왼쪽에서 오른쪽으로 미는 동작 or 오른쪽에서 왼쪽으로 미는 동작 scrubbing 중 페이지 전환에 애니메이션을 삽입을 지양: 사용자들이 매우 빠르게 scrub할 수 있으며, 애니메이션이 들어가면 산만한 시각적 영향 인터렉션 - scrub: page control을 꾹 누른 후 다른 페이지로 이동 Page Control의 indicator 스타일 3가지 Automatic: 사용자가 control과 상호작용 할때만 배경을 표시 page control이 현재 화면의 기본 탐색 control이 아닌 ..

Label 화면 인터페이스 요소를 설명하거나 짧은 메시지를 제공 사용자 입장에서 간결함을 느끼도록 최대한 짧게 유지 사용자가 시스템에서 text size를 변경할 때 반영이 되도록 dynamic type size 적용 string에 관한 애플 가이드 * 참고 https://developer.apple.com/design/human-interface-guidelines/ios/controls/labels/

Edit Menus TextField, TextView, WebView, ImageView에서 요소를 길게 터치하거나 두 번 탭하여 콘텐츠를 선택하고 복사 및 붙여넣기와 같은 편집 옵션 컨텍스트에 적합한 명령어를 표출 일반적인 구성: cut, copy, paste, select, select all, delete 위 명령 중 하나를 선택적으로 비활성화 하는 기능이 존재 image, text와 같은 요소를 선택하지 않는 부분에서는, 메뉴에 copy, paste와 같은 항목이 표출되지 않도록 구현 메뉴의 모양은 변경할 수 없지만 위치를 변경할수 있기 때문에, 중요한 내용이나 인터페이스의 일부를 가리지 않도록 필요의 경우 edit menu의 배치를 조정 edit menu와 동일한 기능을 가진 다른 contro..

Context Menus 상황에 맞는 메뉴를 제공하여 인터페이스를 복잡하게하지 않고 화면 항목과 관련된 추가 기능에 엑세스 할 수 있도록 표출 Peek and Pop: long touch 시 실행 사용 가이드: https://developer.apple.com/documentation/uikit/uicontextmenuinteraction 상황에 맞는 메뉴를 일관되게 채택: 어떤 곳에서는 항목에 대한 컨텍스트 메뉴를 제공하지만 다른 곳에서는 제공하지 않는 경우, 사용자 입장에서 앱에 문제가 있다고 판단 상황에 맞는 메뉴에서 각 명령에 글리프를 포함: 글리프는 명령의 의미를 강화하여 사용자들이 그 기능을 즉시 이해할 수 있게하는 장점이 존재 (SF symbol) 가장 자주 사용하는 항목을 메뉴 최상단에 위..

시스템 버튼 버튼을 누르면 어떤 일이 발생할지 암시하기 위해서 제목에 동사를 사용 복잡함을 나타낼수 있는 긴 텍스트보다는 짧게 유지 기본적으로는 시스템 버튼에는 테두리와 배경이 없지만, 익숙한 UI를 위해서 통화앱의 숫자버튼과 같은 경우에 테두리와 배경을 사용 Detail Disclosure Buttons 특정 행에 대한 정보에 접근하기 위해 테이블에서 사용되는 modal view를 띄우는 버튼 행을 탭하면 (didSelectRow) 상세화면으로 이동된다면 Detail Disclosure Button은 불필요 Info Button 타입은 밝은 스타일과 어두운 스타일 두 가지 존재 UIButtonTypeInfoLight, UIButtonTypeInfoDark Add Contact Buttons (연락처 추..

WebView HTML 및 웹 사이트와 같은 웹 콘텐츠를 앱 내에서 직접 로드하고 표출 애플의 Mail앱은 WebView를 이용하여 메시지에 HTML 콘텐츠를 표출 WebView의 뒤로, 앞으로 탐색이 디폴트로 비활성화 되어있으므로, 사용자가 WebView를 통해 여러 페이지를 방문하는 경우 앞뒤 탐색을 활성화 WebView를 통해 Web Browser 구축을 하지 않도록, 해당 앱에서 WebView는 잠시 머무는 역할로 사용 iOS에서 웹을 탐색하는 방법은 Safari가 존재하기 때문 * 참고 https://developer.apple.com/design/human-interface-guidelines/ios/views/web-views/