Chikong

• 사진 세트와 같은 정렬된 콘텐츠 세트를 관리하고 커스텀 가능하고 시각적인 레이아웃으로 제공
• 컬렉션은 엄격하게 선형 형식을 시행하지 않기 때문에 크기가 다른 항목을 표시하는 데 적합
• 컬렉션은 이미지 기반 콘텐츠를 과시하는 데 이상적
• 배경과 같은 부수적인 뷰는 항목의 하위 집합을 시각적으로 구별하기 위해 선택적으로 구현

• 컬렉션은 상호 작용과 애니메이션을 모두 지원한다
• 기본적으로 탭하여 선택하고, 길게 터치하여 편집하고, 스와이프하여 스크롤할 수 있다
• 필요한 경우, 커스텀된 작업을 수행하기 위해 더 많은 제스처를 추가할 수 있다
• 컬렉션 내에서 항목을 삽입, 삭제 또는 재정렬할 때마다 애니메이션을 활성화할 수 있으며 커스텀 애니메이션도 지원한다

고려사항

• 행이나 그리드 레이아웃이 충분할 때 새로운 디자인을 만들지 마세요.
  • 컬렉션은 사용자 경험을 향상시켜야 합니다.
  • 항목을 쉽게 선택할 수 있도록 하세요. 컬렉션에서 항목을 탭하는 것이 어렵다면, 유저입장에서 앱에대한 불편한 인식을 남길수 있습니다.
  • 레이아웃을 깨끗하게 유지하고 콘텐츠가 겹치지 않도록 콘텐츠 주위에 적절한 패딩을 사용하세요.
• 컬렉션에 텍스트만 표시한다면, 테이블 뷰를 고려하세요.
  • 스크롤 가능한 목록에 표시될 때 텍스트 정보를 테이블 뷰로 구성하는 것이 더 간단하고 효율적입니다.
• 동적 레이아웃을 변경할 때 주의하세요.
  • 컬렉션의 레이아웃은 언제든지 변경할 수 있습니다.
  • 사람들이 레이아웃을 보고 상호 작용하는 동안 레이아웃을 동적으로 변경한다면, 변경 사항이 합리적이고 추적하기 쉬운지 확인하십시오.
  • 동기 부여되지 않은 레이아웃 변경은 앱을 예측할 수 없고 사용하기 어렵게 만들 수 있습니다.
  • 레이아웃 변경으로 인해 컨텍스트가 손실되면, 유저 입장에서 불편한 앱으로 인식될 수 있습니다.

⇒ 참고 문서

• 테이블은 데이터를 섹션이나 그룹으로 나눌 수 있는 행의 스크롤, 단일 열 목록으로 표시
• 일반적으로 테이블은 텍스트 기반 콘텐츠에 이상적이다
• 테이블 뷰는 일반적으로 3가지 스타일로 제공 - Plain, Group, inset Group

Plain

• 행은 라벨이 지정된 섹션으로 분리될 수 있으며, 인덱스는 테이블의 오른쪽 가장자리를 따라 수직 표시
• 섹션의 첫 번째 항목 앞에 헤더가 나타날 수 있으며, 마지막 항목 뒤에 푸터가 나타남

Group

• 행은 그룹으로 표시
• 헤더 앞에 푸터가 뒤따를 수 있음
• 항상 적어도 하나의 그룹을 포함하며 각 그룹은 항상 적어도 하나의 행을 포함
• 그룹화된 테이블에는 인덱스가 포함되어 있지 않음

Inset Group

• 행은 모서리가 둥글고 부모 뷰의 가장자리에 삽입된 그룹으로 표시
• 항상 적어도 하나의 그룹을 포함하며 각 그룹은 항상 적어도 하나의 행을 포함
• 헤더 앞에 푸터가 뒤따를 수 있음
• Inset Group 된 테이블에는 인덱스가 포함되어 있지 않음
• 컴팩트한 환경에서 공간이 적기 때문에, 큰 화면의 ( iPad 같은 ) 환경에 적합

고려사항

• 테이블의 너비를 생각할 것
  • 테이블의 너비가 너무 얇거나 너무 두꺼우면 콘텐츠를 읽는데 오히려 방해 요소가 된다
• 테이블 내용을 빠르게 표시할 것
  • 이미지나 복잡한 데이터를 포함해야 한다면 텍스트를 먼저 보여주고, 이후에 데이터를 표시
  • 유저에게 즉시 유용한 정보를 제공하고 앱의 반응성을 높일 수 있음
• 콘텐츠가 로드될 때 진행 상황을 전달할 것
  • 테이블의 데이터를 로드하는 데 시간이 걸린다면, 진행률 표시줄이나 progress 등을 이용하여 앱이 실행 중이라는 것을 사람들에게 인식 시켜야 한다
• 콘텐츠를 최신화 할것
  • 새로운 데이터를 반영하기 위해 테이블의 콘텐츠를 정기적으로 업데이트하는 것을 고려
  • 스크롤 위치를 변경하지 마세요. ( 수직 스크롤 고정 ) 내용을 테이블의 시작이나 끝에 추가하고, 사람들이 준비가 되면 스크롤하도록 하세요.
  • 일부 앱은 새 데이터가 추가되었을 때 표시기를 표시하고 바로 점프할 수 있는 컨트롤을 제공해야 함.
  • 유저들이 언제든지 수동으로 업데이트를 수행할 수 있도록 새로 고침 컨트롤을 포함하는 것을 권장
  • ⇒ 참고 문서
• 인덱스를 오른쪽 정렬된 요소가 포함된 테이블 행과 결합하지 마세요.
  • 테이블 행의 오른쪽에 다른 요소가 있다면 예상하지 못한 제스쳐가 발생하여 유저에게 혼란을 줄 수 있습니다.
  • ⇒ 참고 문서

Table Rows

표준 테이블 셀 스타일을 사용하여 테이블 행에 콘텐츠가 어떻게 나타나는지 정의

Basic (Default)

행의 왼쪽에 이미지와 왼쪽 정렬된 텍스트가 표시

추가 정보가 필요하지 않은 항목을 표시하는 데 좋음

참고 문서

Subtitle

첫번째 줄에는 왼쪽 정렬된 제목을, 다음 줄에는 왼쪽 정렬된 Subtitle을 정의

행의 구분이 잘 되지않는 항목의 경우 subtitle은 행을 구분하는 데 도움이 된다.

참고 문서

Right Detail (Value 1)

행의 왼쪽에는 Title을, 오른쪽에는 subTitle을 배치

참고 문서

Left Detail (Value 2).

행의 오른쪽에는 Title을, 왼쪽에는 subTitle을 배치

참고 문서

고려 사항

• 클리핑을 피하기 위해 텍스트를 간결하게 유지할 것
  • 단어나 문장이 잘리면 유저에게 가독성을 낮출수 있다
• 삭제 버튼에 커스텀 제목을 사용하는 것을 고려할 것
  • 행이 삭제를 지원하고 명확성을 제공하는 데 도움이 된다면, 시스템에서 제공하는 삭제 제목을 커스텀하여 사용하세요
• 선택 시 피드백을 제공할 것
  • 사람들은 콘텐츠를 탭할 때 행이 짧게 강조되기를 기대한다.
  • 사람들은 새로운 뷰가 나타나거나 체크 표시가 나타나는 것과 같은 무언가가 바뀔 것으로 예상한다
• 비표준 테이블 행을 위한 커스텀 테이블 셀 스타일을 디자인할 것
  • 표준 스타일은 다양한 일반적인 시나리오에서 사용하기에 적합하지만, 일부 콘텐츠나 전반적인 앱 디자인은 크게 맞춤화된 테이블 모양을 필요로 할 수 있다.
  • 자신만의 셀을 만드는 방법을 배우려면, 참고 문서 를 참고하세요

⇒ 참고 문서

Scroll View 란 무엇인가?

• Scroll View를 사용하면 문서의 텍스트나 보이는 영역보다 큰 이미지 모음과 같은 콘텐츠를 탐색
• 사람들이 스와이프하고, 더블탭을 하고, 드래그하고, 탭하고, 줌아웃을 때, Scroll View는 제스처를 따르며, 자연스럽게 느껴지는 방식으로 콘텐츠를 드러내거나 확대
• Scroll View 자체는 모양이 없지만, 사람들이 상호 작용할 때 일시적인 스크롤 인디케이터를 표시
• Scroll View는 페이징 모드에서 작동하도록 구성할 수도 있으며, 스크롤은 현재 페이지를 이동하는 대신 완전히 새로운 콘텐츠 페이지 표시

지켜야 할 점

• 줌 동작을 적절하게 지원할것
  • 앱에서 의미가 있다면, 사람들이 줌아웃을 하거나 두 번 탭하여 확대/축소하도록 하세요.
  • 확대/축소를 활성화할 때, 의미가 있는 최대 및 최소 스케일 값을 설정하세요. 예를 들어, 한 문자가 화면을 채울 때까지 텍스트를 확대하는 것은 대부분의 앱에서 의미가 없습니다.
• Scroll View가 페이징 모드에 있을 때 페이지 컨트롤 요소를 표시하는 것을 고려할 것
  • 페이지 컨트롤은 사용 가능한 페이지, 화면 또는 기타 콘텐츠 수를 표시하고 현재 볼 수 있는 페이지를 나타냅니다.
  • Scroll View로 페이지 컨트롤을 표시하는 경우, 혼란을 피하기 위해 같은 축의 스크롤 인디케이터를 비활성화하십시오. Page Controls ← HIG 문서 참고
• Scroll View 안에 또다른 Scroll View를 중첩하지 말것
  • 제어하기 어려운 예측할 수 없는 인터페이스가 생성됩니다.
• 일반적으로, 한 번에 하나의 Scroll View를 표시할 것
  • 사람들은 종종 스크롤할 때 큰 스와이프 제스처를 하며, 같은 화면에서 중첩된 Scroll View와 상호 작용하는 것을 피하기 어려울 수 있습니다.
  • 한 화면에 두 개의 스크롤 뷰를 넣어야 하는 경우, 한 가지 제스처가 두 View 모두에 영향을 미치지 않도록 다른 방향으로 스크롤하도록 허용하는 것을 고려하십시오.
  • 예를 들어 iPhone이 세로 방향일 때 주식 앱에 회사별 정보 위로 수직으로 스크롤되는 주식 시세 표시가 표시됩니다.

UIScrollView ← 공식문서

Image View 란 무엇인가?

• Image View는 투명하거나 불투명한 배경 위에 단일 이미지 또는 애니메이션 이미지 시퀀스를 표시
• Image View 내에서 이미지를 늘리거나, 확장하거나, 크기에 맞게 조정하거나, 특정 위치에 고정될 수 있다.
• Image View는 기본적으로 상호 작용하지 않는다 ( 각각 고유의 이미지를 타나냄, 다른 이미지에 영향 X )

지켜야 할점

• 가능하다면, 애니메이션 시퀀스의 모든 이미지가 일관되게 크기인지 확인할것
• 이미지는 뷰에 맞게 미리 조정되어야 하므로 시스템이 스케일링을 할 필요가 없고, 시스템이 스케일링을 수행해야 하는 경우, 모든 이미지가 크기와 모양이 같을 때 원하는 결과를 얻기 쉽다

UIImageView ← 공식문서 참고

TabBar 란 무엇인가?

• 화면 하단에 탭 표시줄이 나타나 사람들이 앱이 제공하는 정보 유형이나 기능을 이해할 수 있도록 도움
• 각 섹션 내의 현재 내비게이션 상태를 유지하면서 앱의 최상위 섹션 사이를 빠르게 전환
• 기본적으로 탭 표시줄은 반투명이며, 콘텐츠가 뒤에 나타날 때만 배경 자료를 사용
• 키보드가 화면에 있을 때 탭 표시줄이 숨김

• 사진 앱과 같이 탭바 뒤에 컨텐츠가 있으면 배경색을 보여주고, 하단으로 스크롤 하면 뒤에 비치지 않음
• 장치 크기와 방향에 따라, 보이는 탭의 수는 총 탭 수보다 적을 수도 있다
• 화면에 모든 탭이 표시되지 않는경우, 더보기 탭이 되어 목록에 나머지 항목을 별도의 화면으로 표시

공식 문서 : UITabBar

Tip 
TabBar 와 ToolBar는 모두 화면 하단에 나타나지만, 서로 다른 목적을 갖는다 탭 바는 한 화면에서 탭에따라 다른 뷰를 표시해 주지만, ToolBar의 경우 항목 생성, 필터링, 콘텐츠 표시등을 위한 버튼 등이 포함된다 TabBar와 ToolBar는 동시에 표시할 수 없다.

지켜야 할점

• 어떠한 기능을 수행하기 위해 사용하지 말고, 오직 탭을 전환하는 용도로만 사용할것
• View의 요소에 어떠한 기능을 제공해야 하는 경우 Toolbar를 사용할것.
• 적당한 수의 탭을 사용할것, iPhone의 경우 3~5개 , iPad의 경우 조금더 많이 사용할것

⇒ 너무 많거나, 너무 적으면 오히려 디자인적 요소가 깨짐

• iPadOS 앱에서는 TabBar대신 SideBar를 사용하도록 권장
• Modal View를 제외한 다른 View에서 언제 어디서나 유저가 바로 이동할수 있도록 TabBar를 숨기지 말것
• 해당 탭의 컨텐츠를 이용할수 없는 경우에도 Tab을 숨기지 말고 이용할 수 없는 설명을 보여줄것
• 현재 선택된 탭에서 다른 탭의 View에 영향을 끼치지 말아야 함

→ 예를 들어, 분할된 view의 왼쪽에 부분에 있는 tab을 선택했다면, 분할된 view의 오른쪽에 갑자기 변경되지 않아야 하고 Popover에서 tab을 선택했다면 popup 뒤의 뷰가 변경되지 않아야 한다

• 소통을 위해서 badge를 사용할것 ( 알림이 있다면 뱃지를 사용하여 표시 ) ex) 카카오톡 채팅 탭

→ 공식 문서 : UITabBarItem

• SF 기호를 사용하여 확장 가능하고 시각적으로 일관된 TabBar 항목을 제공하는 것을 고려할 것

• Custom Tab Bar glyphs를 만들어야 하는 경우, 탭 바가 어떠한 환경에서든 일관성있게 보이도록 글리프를 두 가지 크기로 만들것   ( Regular, Compact )

⇒ Glyphs 문서