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

ToolBar 앱 화면 하단에 존재 반투명과 색조가 존재 ex) safari는 사용자들이 페이지 하단으로 스크롤하는 동안 ToolBar를 숨기고 화면 상단으로 스크롤하거나 화면 하단을 탭하면 다시 가져오는 형태필요하지 않은 경우 종종 숨겨지는 형태 TabBar와의 차이점 TabBar: 현재 컨텍스트와 연관되지 않은 화면이동 ToolBar: 현재 컨텍스트와 관련된 항목 추가, 삭제, 주석 추가, 사진 촬영과 같은 일 버튼이 3개 이하인 ToolBar에서는 텍스트를 사용 or 글리프 사용 버튼 사이의 공간은 상수값 UIBarButtonSystemItemFixedSpace 사용 버튼은 UIBarButtonItem 사용 Toolbar 버튼에 커스텀 glyph를 적용할 경우 사이즈 규약 ToolBar에는 segm..

Tab bar 모든 화면 방향에서 동일한 높이를 유지 키보드 등장 시 자동으로 숨김처리 TabBar vs ToolBar TabBar: 현재 컨텍츠와 전혀 다른 섹션간의 전환 (ex 알람, 스톱워치, 타이머 탭) ToolBar: 현재 컨텐츠와 연관된 작업 (ex 항목 생성, 삭제, 사진 촬영) TabBar Guide 탭 막대에 들어가는 아이템 배치에는 독립적이고 정보 계층 구조 평평화 탐색용으로만 TabBar를 표시하고 현재 화면의 요소에 대해 작동하는 컨트롤은 ToolBar 사용 iPhone에는 탭 아이템을 3~ 5개만 사용: 너무 많으면 탭할 수 있는 영역이 줄어들고 앱의 복잡성이 증가하여 정보를 찾기가 어려워지는 현상 사용자가 앱의 다른 영역으로 이동할 때 탭 표시줄을 숨기지 말고 언제나 표출: 탭 ..

Status bar status bar를 custom하지 말고 시스템에서 제공하는 것을 그대로 사용: 사용자는 시스템 전체에서 status bar가 일관된 모습을 기대하기 때문 컨텐츠와 대비되는 것으로 status bar 색상 조정 dark status bar는 밝은 컨텐츠 에 적용 light status bar는 어두운 컨텐츠에 적용 사진, 동영상을 표출할 땐 일시적으로 status bar를 숨길것: 몰입감 상승 Status bar를 영구적으로 숨기는 것을 지양: 사용자가 Wi-Fi에 연결되어 있는지 확인하기 위해 앱을 나가야 하는 상황 발생 interaction통해 status bar를 나오게끔 하는 설정 추가 ex 사진 앱) 전체 화면 사진을 탐색할 때 한 번 탭하면 status bar가 다시 표출..

* UISearchController 구현 참고: https://ios-development.tistory.com/578 [iOS - swift] UI 컴포넌트 - UISearchController, tableView * UISearchBar HIG 먼저 참고: https://ios-development.tistory.com/505 [iOS - HIG] 31. Search Bars (검색창) Search Bars UITextField가 아닌 SearchBar 사용 TextField는 사용자들이 기대하는 표준 검색 창.. ios-development.tistory.com Search Bars UITextField가 아닌 SearchBar 사용 TextField는 사용자들이 기대하는 표준 검색 창 모양이 아..

Navigation Bar 사용자에게 현재화면이 어느 화면인지 인지 할 수 있게끔 제공 뒤로가기 버튼 현재 화면의 타이틀 문구 기타 버튼 사용자에게 컨텐츠 몰입감을 주기 위해서, 평상시에는 navigation bar를 숨긴 상태 -> 탭을 한 경우 다시 보이도록 설정 Navigation bar의 제목 label 레이아웃 탐색 표시 줄에 현재 화면의 제목을 표출: 사용자가 현재 어떤 화면을 사용하고 있는지 알리기 위함 제목을 표출하지 않아도 명확히 알 수 있는것에는 생략 ex) notes 앱 문맥을 강조하고 싶은 경우 더욱 크고 굵은 제목을 사용 큰 제목을 사용할때는, 사용자가 scroll할 경우 title이 다시 작은 사이즈로 변경 후 중앙으로 이동하게끔 설정 큰 제목을 사용할 경우, separator ..

시스템 아이콘 iOS 13+ : SF 기호 사용 iOS 12이하: UIBarButtonSystemItem, UITabBarSystemItem, UIApplicationShortcutIconType 아이콘에 대한 대체 텍스트 레이블을 제공하는것을 지향: 시각장애인을 위한 VoiceOver 용도 시스템 아이콘에서 필요로하는 것을 찾지 못한경우, 사용자 지정 아이콘(Glyphs)을 디자인하여 사용 UIBarButtonSystemIcon Tab Bar Icons Home Screen Quick Action Icons * 참고 https://developer.apple.com/design/human-interface-guidelines/ios/icons-and-images/system-icons/

앱 아이콘 단순함 즉시 주의를 끌고 앱을 명확하게 식별하는 단일 중앙 지점 아이콘 선택 배경을 단순하게하고 아이콘 이미지는 불투명성을 지양 홈화면에서 앱 아이콘 밑에 바로 앱 이름이 표출되므로, 아이콘 이미지에 불필요한 문구를 넣지 말것 아이콘 이미지 모서리를 정사각형으로 지정: 시스템에서 자동으로 아이콘 모서리를 둥글게 지정 앱 아이콘 속성 (지키지 않을 경우 리젝 사유 중 하나) format: .png shape: corner가 라운되어 있지 않은 정사각형 이미지 layers: 투명성이 없는 레이어 앱 아이콘 크기 홈 화면 Spotlight 검색 결과 아이콘, 설정, 알림 아이콘 * 참고 https://developer.apple.com/design/human-interface-guidelines/i..

Point 단위 iOS가 화면에 콘텐츠를 배치하는데 사용되는 좌표계는 1pixel = 1point @1x, @2x, @3x는 픽셀의 배율을 의미 예시) @2x: 1포인트에 2배의 픽셀이 담긴다는 의미 표준 해상도 디스플레이는 1:1 픽셀 밀도(= @1x) 고해상도 디스플레이는 1:2, 1:3 배율의 픽셀 밀도 (= @2x, @3x) ... 1point에 2배의 pixel이 들어가 있는 형태 예시) 100px * 100px의 표준 해상도에 @1x 이미지가 있을 때, @2x버전은 200px * 200px 장치에 따른 Scale Factor 고해상도 디자인 grid는 8*8 픽셀을 사용: 흐릿한 디테일을 최소화하는 적절한 값은 8*8 bitmap, raster artwork에는 PNG파일 사용 PNG파일은 투..