κ°œλ°œν•˜λŠ” ν›ˆμ΄ 2021. 8. 22. 18:39
πŸ’‘ 개인적인 곡뢀λ₯Ό λͺ©μ μœΌλ‘œ λ²ˆμ—­ν•˜μ—¬ κ°„λž΅ν•˜κ²Œ μ •λ¦¬λ§Œ ν•œ κΈ€μž…λ‹ˆλ‹€. 전문을 ν¬ν•¨ν•˜κ³  μžˆμ§€ μ•ŠμœΌλ‹ˆ μžμ„Έν•œ λ‚΄μš©μ€ κ³΅μ‹λ¬Έμ„œλ₯Ό μ½μ–΄λ³΄μ‹œκΈΈ κΆŒν•΄λ“œλ¦½λ‹ˆλ‹€!
https://developer.apple.com/design/human-interface-guidelines/ios/views/tables/
 

Tables - Views - iOS - Human Interface Guidelines - Apple Developer

Tables A table presents data as a scrolling, single-column list of rows that can be divided into sections or groups. Use a table to display large or small amounts of information cleanly and efficiently in the form of a list. Generally speaking, tables are

developer.apple.com

Tables 

ν…Œμ΄λΈ”μ€ ν•˜λ‚˜μ˜ 열에 μ—¬λŸ¬ 행듀을 리슀트둜 λͺ¨μ•„ 슀크둀이 κ°€λŠ₯ν•˜κ²Œ λ§Œλ“­λ‹ˆλ‹€. 리슀트 ν˜•νƒœλ‘œ 정보λ₯Ό 효과적으둜 ν‘œν˜„ν•˜κ³  싢을 λ•Œ μ‚¬μš©ν•  수 μžˆμŠ΅λ‹ˆλ‹€. iOSμ—μ„œλŠ” μ„Έ μ’…λ₯˜μ˜ ν…Œμ΄λΈ”μ„ μ œκ³΅ν•©λ‹ˆλ‹€ : plain, grouped, inset grouped.

Plain

Plain μ—μ„œλŠ” 각 행이 라벨링된 μ˜μ—­μœΌλ‘œ λ‚˜λˆ„μ–΄μ§‘λ‹ˆλ‹€. 였λ₯Έμͺ½ 끝에 μ›ν•œλ‹€λ©΄ 인덱슀λ₯Ό ν‘œμ‹œν•  수 μžˆμŠ΅λ‹ˆλ‹€. ν—€λ”λŠ” μ˜μ—­μ˜ 첫 μ•„μ΄ν…œ 전에 ν‘œμ‹œλ˜κ³ , ν‘Έν„°λŠ” λ§ˆμ§€λ§‰ μ•„μ΄ν…œ λ‹€μŒμ— ν‘œμ‹œλ©λ‹ˆλ‹€.

 

Grouped

행이 헀더와 ν‘Έν„°λ‘œ λ‚˜λˆ„μ–΄ κ·Έλ£¨ν•‘λ©λ‹ˆλ‹€. 이 μŠ€νƒ€μΌμ€ 항상 적어도 ν•œ 개의 그룹을 ν¬ν•¨ν•΄μ•Όν•˜κ³ , 각 그룹은 적어도 ν•œ 개의 행을 가지고 μžˆμ–΄μ•Όν•©λ‹ˆλ‹€.

Inset Grouped

행듀이 λ‘₯그런 λͺ¨μ„œλ¦¬λ‘œ ν‘œμ‹œλ˜κ³  λΆ€λͺ¨ λ·°λ‘œλΆ€ν„° inset을 κ°€μ§‘λ‹ˆλ‹€.

 

  • ν…Œμ΄λΈ”μ˜ κ°€λ‘œν¬κΈ°λ₯Ό μƒκ°ν•˜μ„Έμš”. 
    • κ°€λ‘œκ°€ λ„ˆλ¬΄ 짧은 ν…Œμ΄λΈ”μ€ μ€„λ°”κΏˆμ„ λ§Œλ“€κ³  λΉ λ₯΄κ²Œ 읽기 μ–΄λ ΅κ²Œ ν•©λ‹ˆλ‹€.
    • λ„ˆλ¬΄ κΈ΄ ν…Œμ΄λΈ” μ—­μ‹œλ„ 읽기가 μ–΄λ ΅κ±°λ‚˜ μ»¨ν…μΈ λ‘œλΆ€ν„° λ„ˆλ¬΄ λ–¨μ–΄μ Έ 있게 λ©λ‹ˆλ‹€.
  • ν…Œμ΄λΈ”μ˜ μ»¨ν…μΈ λŠ” λΉ λ₯΄κ²Œ λ³΄μ—¬μ£Όμ„Έμš”.
    • ν…Œμ΄λΈ”μ˜ 행을 ν…μŠ€νŠΈλ‘œ μ±„μš°κ³  큰 λ°μ΄ν„°λŠ” μ€€λΉ„κ°€ λ˜μ—ˆμ„ λ•Œ λ³΄μ—¬μ£Όμ„Έμš”.
  • μ»¨ν…μΈ μ˜ λ‘œλ”© 상황을 κ³΅μœ ν•˜μ„Έμš”.
    • ν…Œμ΄λΈ”μ˜ 컨텐츠λ₯Ό λΆˆλŸ¬μ˜€λŠ”λ° μ‹œκ°„μ΄ μ˜€λž˜κ±Έλ¦°λ‹€λ©΄, λ‘œλ”© λ°”λ‚˜ νšŒμ „ν•˜λŠ” 인디케이터λ₯Ό 톡해 μ‚¬μš©μžλ“€μ—κ²Œ 앱이 λ™μž‘ν•˜κ³  μžˆμŒμ„ μ•Œλ €μ•Όν•©λ‹ˆλ‹€.
  • μ»¨ν…μΈ λŠ” μ΅œμ‹  μƒνƒœλ₯Ό μœ μ§€ν•˜μ„Έμš”.
    • μ •κΈ°μ μœΌλ‘œ ν…Œμ΄λΈ”μ˜ 컨텐츠λ₯Ό μ—…λ°μ΄νŠΈ ν•΄μ„œ μ΅œμ‹  데이터가 λ°˜μ˜λ˜λ„λ‘ ν•˜μ„Έμš”.
    • μƒˆλ‘œμš΄ μ»¨ν…μΈ λŠ” ν…Œμ΄λΈ”μ˜ κ°€μž₯ μ²˜μŒμ΄λ‚˜ λ§ˆμ§€λ§‰μ— λ°°μΉ˜ν•΄μ„œ μ‚¬μš©μžλ“€μ΄ 컨텐츠가 μ€€λΉ„λ˜μ—ˆμ„ λ•Œ μŠ€ν¬λ‘€ν•  수 μžˆλ„λ‘ ν•˜μ„Έμš”.
  • 였λ₯Έμͺ½ μ •λ ¬λœ μš”μ†Œλ₯Ό κ°€μ§€λŠ” ν…Œμ΄λΈ” ν–‰κ³Ό 인덱슀λ₯Ό ν•¨κ»˜ μ‚¬μš©ν•˜λŠ” 것을 ν”Όν•˜μ„Έμš”.
    • μΈλ±μŠ€λŠ” μŠ€μ™€μ΄ν”„ 제슀쳐λ₯Ό 톡해 ν†΅μ œλ©λ‹ˆλ‹€. λ‹€λ₯Έ μš”μ†Œλ“€μ΄ κ·Όμ²˜μ— μžˆλ‹€λ©΄, 제슀처λ₯Ό 톡해 μ˜λ„ν•˜μ§€ μ•Šμ€ λ™μž‘μ΄ μˆ˜ν–‰λ  수 μžˆμŠ΅λ‹ˆλ‹€.

Table Rows 

  • ν…μŠ€νŠΈλ₯Ό κ°„κ²°ν•˜κ²Œ ν•˜κ³  곡간이 λΆ€μ‘±ν•΄ ν…μŠ€νŠΈλ₯Ό 자λ₯΄λŠ” 것을 ν”Όν•˜μ„Έμš”.
  • μ‚­μ œ λ²„νŠΌμ—λŠ” μ»€μŠ€ν…€ 제λͺ©μ„ μ‚¬μš©ν•˜μ„Έμš”.
  • 선택이 λ˜μ—ˆλ‹€λ©΄ ν”Όλ“œλ°±μ„ μ œκ³΅ν•˜μ„Έμš”.
    • μ‚¬λžŒλ“€μ€ μ–΄λ–€ 컨텐츠가 μ„ νƒλ˜μ—ˆμ„ λ•Œ ν•˜μ΄λΌμ΄νŠΈ λ˜λŠ” 것을 κΈ°λŒ€ν•©λ‹ˆλ‹€. 그리고 μ²΄ν¬λ§ˆν¬μ™€ 같은 μƒˆλ‘œμš΄ μš”μ†Œκ°€ μƒμ„±λ˜κΈΈ κΈ°λŒ€ν•©λ‹ˆλ‹€.
  • ν‘œμ€€ ν…Œμ΄λΈ”κ³Ό 행을 μ‚¬μš©ν•˜μ§€ μ•Šμ„ λ•ŒλŠ” μ»€μŠ€ν…€ 셀을 μ‚¬μš©ν•˜μ„Έμš”.