#데이터 ν…Œμ΄λΈ” #κ°€μ΄λ“œ


#λ°μ΄ν„°ν…Œμ΄λΈ” #κ°€μ΄λ“œ
λ³΅μž‘ν•œ μ˜μ‚¬κ²°μ •μ„ λ•λŠ” 쒋은 UX : 데이터 ν…Œμ΄λΈ” λ§Œλ“€κΈ°
πŸ‘€ 윀영's νλ ˆμ΄νŒ… 멘트
아무리 λ§Žμ€ 데이터λ₯Ό λ³΄μœ ν•˜κ³  μžˆλ”λΌλ„ ν•„μš”μ— 따라 κ°€κ³΅ν•˜κ³  μƒν˜Έμ μΈ 관계λ₯Ό 찾지 λͺ»ν•œλ‹€λ©΄ μ•„λ¬΄λŸ° μ˜λ―Έκ°€ 없을 κ²ƒμž…λ‹ˆλ‹€. 데이터 정리와 κ΅¬μ‘°ν™”μ˜ κΈ°λ³Έ ν˜•νƒœμΈ '데이터 ν…Œμ΄λΈ”'의 λ””μžμΈμ—μ„œ κΈ°μ–΅ν•΄μ•Όν•  닀섯가지 원칙을 κ°„λž΅ν•˜κ²Œ μ •λ¦¬ν•œ 아티클을 κ³΅μœ ν•©λ‹ˆλ‹€.  

이 μ›μΉ™λ§Œ κΈ°μ–΅ν•œλ‹€λ©΄ 데이터 ν…Œμ΄λΈ”μ€ 더이상 ν˜•νŽΈμ—†μ§€ μ•Šμ„ 것이닀

데이터 ν…Œμ΄λΈ”(μ΄ν•˜ ν…Œμ΄λΈ”)은 λŒ€λΆ€λΆ„μ˜ μ—”ν„°ν”„λΌμ΄μ¦ˆ μ•±μ—μ„œ 핡심이닀.

μ‚¬λžŒλ“€μ΄ μ—‘μ…€μ΄λ‚˜ κ΅¬κΈ€μ‹œνŠΈμ— λ§Œλ“œλŠ” μˆ˜λ§Žμ€ "λŒ€μ‹œλ³΄λ“œ"만 봐도 μ•Œ 수 μžˆλ“―, ν…Œμ΄λΈ”μ€ μ œν’ˆμ΄λ‚˜ ν”Œλž«νΌμ—κ²Œ μ•„μ£Ό μ€‘μš”ν•œ μš”μ†Œμ΄λ‹€. ν•˜μ§€λ§Œ λͺ¨λ“  ν…Œμ΄λΈ”μ΄ ν‰λ“±ν•˜κ²Œ λ§Œλ“€μ–΄μ§€μ§€λŠ” μ•ŠλŠ”λ‹€.

잘 λ§Œλ“€μ–΄μ§„ ν…Œμ΄λΈ”μ€ 정보λ₯Ό λΆ„λ₯˜ν•˜κ³  μ†Œν™”ν•˜κΈ° μ‰½κ²Œ ν•œλ‹€. κ°€μž₯ μ€‘μš”ν•˜κ³  자주 μ‚¬μš©ν•˜λŠ” λ™μž‘λ“€μ€ 접근이 쉽고 화면을 μ–΄μ§€λŸ½νžˆμ§€ μ•ŠλŠ”λ‹€. λ˜ν•œ μ‚¬μš©μžλŠ” 데이터λ₯Ό ν•„μš”μ— 따라 μ‰½κ²Œ λ‹€λ£° 수 μžˆμ–΄ μ–΄λ €μš΄ μž‘μ—…λ„ μ›ν™œν•˜κ²Œ μˆ˜ν–‰ν•  수 μžˆλ‹€.

λ°˜λ©΄μ— ν˜•νŽΈμ—†λŠ” ν…Œμ΄λΈ”μ€ κ°€λŠ₯ν•œ 데이터와 λ™μž‘λ“€μ„ 미리 ν•œκΊΌλ²ˆμ— 보여주렀고 ν•œλ‹€. 각 μ—΄κ³Ό 행을 μ΄ν•΄ν•˜κΈ° μœ„ν•΄ μ—„μ²­λ‚œ 집쀑λ ₯이 μš”κ΅¬λ˜λ©°, λˆˆμ•žμ— 놓인 λ°©λŒ€ν•œ μ–‘μ˜ λ°μ΄ν„°λ‘œ 인해 ν…Œμ΄λΈ”μ€ κ²°κ΅­ 흐릿해지고 λ§Œλ‹€. μ˜λ„μ μœΌλ‘œ λ‚˜μœ ν…Œμ΄λΈ”μ„ λ””μžμΈν•˜λŠ” μ‚¬λžŒμ€ μ—†λ‹€. λ‹€λ§Œ 정보λ₯Ό λ°°μΉ˜ν•˜λ‹€λ³΄λ‹ˆ μ ˆμΆ©μ•ˆκ³Ό κ°„κ³Όν•œ λ™μž‘λ“€μ΄ μ§€λ‚˜μΉ˜κ²Œ λ§Žμ•„μ‘Œμ„ 뿐이닀.

잠재적인 문제λ₯Ό ν™•μΈν•˜λ €λ©΄ κ°€μž₯ μš°μ„ μ μœΌλ‘œ ν”„λ‘œλ•νŠΈ μ˜€λ„ˆλ‚˜ μ£Όμš” μ΄ν•΄κ΄€κ³„μžλ“€κ³Ό ν•¨κ»˜ ν…Œμ΄λΈ”μ˜ μš”κ΅¬μ‚¬ν•­κ³Ό μ‚¬μš© λ§₯락에 λŒ€ν•΄ νŒŒμ•…ν•΄μ•Ό ν•œλ‹€. ν…Œμ΄λΈ” λ””μžμΈμ„ ν•  λ•Œ μ•„λž˜ μ§ˆλ¬Έλ“€μ—λŠ” 닡을 ν•  수 μžˆμ–΄μ•Ό ν•œλ‹€.

  • μ–΄λ–€ μœ ν˜•μ˜ 데이터λ₯Ό 닀루고 μžˆλŠ”κ°€? 주어진 정보가 λ‚ μ§œλ‚˜ 총앑과 같은 λ‹¨μˆœ 숫자의 λ‚˜μ—΄μΈμ§€, ν˜Ήμ€ ν…μŠ€νŠΈ 단락/링크/μ²¨λΆ€νŒŒμΌ 처럼 μ’€ 더 κΉŒλ‹€λ‘œμš΄ 데이터인지에 따라 μš”κ΅¬λ˜λŠ” λ””μžμΈκ³Ό λ™μž‘μ€ 달라진닀.
  • ν…Œμ΄λΈ”μ˜ ν™œμš© λͺ©μ μ€ 무엇인가? μ€‘μš”ν•œ 정보λ₯Ό λΉ λ₯΄κ²Œ ν›‘μ–΄λ‚΄κΈ° μœ„ν•œ ν…Œμ΄λΈ”κ³Ό νŠΉμ • 값듀을 μ„œλ‘œ λΉ„κ΅ν•˜κΈ° μœ„ν•œ ν…Œμ΄λΈ”μ€ λ””μžμΈ λ‹¨κ³„μ—μ„œ ν•„μš”ν•œ μ˜μ‚¬κ²°μ •μ΄ μ„œλ‘œ λ‹€λ₯΄λ‹€.
  • ν…Œμ΄λΈ”μ€ 정보 제곡 λ§Œμ„ μœ„ν•¨μΈκ°€, μ•„λ‹ˆλ©΄ λ™μž‘μ΄ μš”κ΅¬ λ˜λŠ”κ°€? 예λ₯Ό λ“€μ–΄, 데이터λ₯Ό ν•΄μ„ν•˜λŠ” 것이 λͺ©μ μΈ ν…Œμ΄λΈ”μ€ 'λ·°νƒ€μž…'을 μ€‘μ‹¬μœΌλ‘œ λ””μžμΈμ΄ κ³ λ €λ˜μ–΄μ•Ό ν•  것이닀. ν•˜μ§€λ§Œ 데이터에 λŒ€ν•œ λ™μž‘μ΄ μš”κ΅¬ λœλ‹€λ©΄ 그것을 μ‹€ν–‰ν•  수 μžˆλŠ” μ˜μ—­κ³Ό μΈν„°λž™μ…˜μ„ κ°•μ‘°ν•˜λŠ” 것이 μ€‘μš”ν•˜λ‹€.
  • ν…Œμ΄λΈ”μ„ 보게 될 μ΄ν•΄κ΄€κ³„μžλ“€μ€ λˆ„κ΅¬μΈκ°€? μ‚¬λžŒμ— 따라 정보에 λŒ€ν•œ μš”κ΅¬μ‚¬ν•­μ΄λ‚˜ μš°μ„ μˆœμœ„κ°€ λ‹¬λΌμ§ˆ 것이닀.

이에 λŒ€ν•œ λŒ€λ‹΅μ€ ν…Œμ΄λΈ”μ— ν•„μš”ν•œ λ””μžμΈ, μ„œμ‹, μΈν„°λž™μ…˜ 등을 κ³ λ₯΄λŠ” 기쀀이 되며, κ·Έ 과정을 훨씬 μˆ˜μ›”ν•˜κ²Œ λ§Œλ“€μ–΄μ€„ 것이닀.

μ‹€μ²œ 방법 5가지 
λ””μžμ΄λ„ˆλ‘œμ„œ μˆ˜λ§Žμ€ ν…Œμ΄λΈ”μ„ λ””μžμΈν•˜λ©° λ‚˜ 뿐만 μ•„λ‹ˆλΌ ν•¨κ»˜ μΌν•œ κ°œλ°œμžλ“€μ—κ²Œλ„ λ†€λΌμš΄ κ²°κ³Όλ₯Ό κ°€μ Έμ˜¨ κ²€μ¦λœ 원칙듀이 λͺ‡κ°€μ§€ μžˆλ‹€.
쒋은 λ””μžμΈμ€ UIμ—μ„œ κ·ΈμΉ˜λŠ” 것이 μ•„λ‹ˆλΌ νŽΈμ•ˆν•¨κΉŒμ§€ μ œκ³΅ν•œλ‹€. μ–΄μ©” 수 없이 머리λ₯Ό 많이 μ¨μ•Όν•˜λŠ” κΈ°λŠ₯을 λ””μžμΈ ν•  λ•Œμ— μ•„λž˜ 방법듀을 μ‹œλ„ν•΄λ³Ό 것을 μΆ”μ²œν•œλ‹€.


πŸ”¬μΈν„°νŽ˜μ΄μŠ€ λ§ŒνΌμ΄λ‚˜ 신경써야 ν•  ν…Œμ΄λΈ” λ‚΄ λ””μžμΈ
ν…μŠ€νŠΈμ™€ 숫자의 정렬을 손 λ³΄λŠ” 것 λ§ŒμœΌλ‘œλ„ μ¦‰κ°μ μœΌλ‘œ 확인할 수 μžˆλŠ” μ–΄λ§ˆμ–΄λ§ˆν•œ μ„±κ³Όκ°€ μžˆλ‹€. μ‚¬λžŒλ“€μ΄ ν…μŠ€νŠΈμ™€ 숫자λ₯Ό μŠ€μΊ”ν•˜λŠ” 방법이 각각 μ–΄λ–»κ²Œ λ‹€λ₯Έμ§€ νŒŒμ•…ν•œλ‹€λ©΄ μ½˜ν…μΈ λ‘œ 인해 λ””μžμΈκ³Ό κ΅¬ν˜„μ΄ λ°©ν•΄ λ°›λŠ” 일은 없을 것이닀.

쑰금 κΉŒλ‹€λ‘œμšΈ 순 μžˆμ§€λ§Œ ν…Œμ΄λΈ” λ‚΄ ν…μŠ€νŠΈ 정렬은 κ½€λ‚˜ ν• λ§Œν•˜λ‹€.
예λ₯Ό λ“€μ–΄, μ–΄λ¦Όμž‘μ•„ λ§ν•˜μžλ©΄ μ™Όμͺ½μ—μ„œ 였λ₯Έμͺ½ λ°©ν–₯으둜 글을 μ½λŠ” 것이 μ΅μˆ™ν•œ ν˜•νƒœμ΄κΈ° λ•Œλ¬Έμ— ν…μŠ€νŠΈλŠ” 쒌츑 정렬이 λ˜μ–΄μ•Ό ν•˜κ³ , λ‚ μ§œμ™€ 같은 숫자 값은 였λ₯Έμͺ½ 정렬이 λ˜μ–΄μ•Ό ν•œλ‹€(ν…Œμ΄λΈ”μ˜ 첫번째 열이라면 λ”λ”μš± κ·Έλ ‡λ‹€).

😎 κΌ­ μž¬λ―Έμ—†μ„ ν•„μš”λŠ” μ—†λ‹€
μ•„μ΄μ½˜, 아바타, 색, 진행λ₯  ν‘œμ‹œμ™€ 같은 μž¬λ°ŒλŠ” UI μš”μ†Œλ₯Ό μ‚¬μš©ν•΄ 데이터 κ²½ν—˜μ„ ν–₯μƒμ‹œν‚¬ 수 μžˆλ‹€.
색, 폰트 λ‘κ»˜ 및 크기λ₯Ό ν™œμš©ν•΄ ν…Œμ΄λΈ” λ‚΄ μ •λ³΄μ˜ μœ„κ³„λ₯Ό 달리 ν‘œν˜„ν•˜λŠ” 것은 λ³΅μž‘ν•œ μ •λ³΄μ˜ 전달λ ₯을 높이고 λ‹¨μ‘°λ‘œμ›€μ„ κ°œμ„ ν•  수 μžˆλŠ” 방법이닀. (ν…Œμ΄λΈ”μ˜ μ½˜ν…μΈ κ°€ μ±„μ›Œμ‘Œμ„ λ•Œμ™€ λΉ„μ—ˆμ„ λ•Œ μƒνƒœλ₯Ό λͺ¨λ‘ λ””μžμΈν•˜λŠ” 것을 μΆ”μ²œν•œλ‹€.)
색을 λ‹€μ±„λ‘­κ²Œ μ“Έ 경우 색이 λ‚΄ν¬ν•˜λŠ” μ˜λ―Έκ°€ μžˆλŠ”μ§€ 점검해보아야 ν•œλ‹€. ν†΅μƒμ μœΌλ‘œ 빨간색은 무언가 잘λͺ»λ˜μ—ˆλ‹€λŠ” κ±Έ μ˜λ―Έν•œλ‹€.

  μ»¬λŸ¬μ½”λ”©μ€ 정보λ₯Ό μ‰½κ²Œ μŠ€μΊ”ν•  수 μžˆλ„λ‘ λ•λŠ”λ‹€.  

πŸ† μ‚¬μš©μžκ°€ κ°€μž₯ μ‰½κ²Œ λͺ©μ μ„ 달성할 수 μžˆκ²Œλ” λ•λŠ” κΈ°λŠ₯을 μš°μ„ μ μœΌλ‘œ κ³ λ €ν•˜κΈ°
ν…Œμ΄λΈ”μ€ μ•„μ£Ό λ³΅μž‘ν•΄μ§ˆ μˆ˜λ„ μžˆλ‹€. λ³΅μž‘ν•΄μ§€λŠ” 만큼 νŠΉμ • κΈ°λŠ₯에 얽맀여 ν…Œμ΄λΈ” μ „μ²΄μ˜ 역할을 κ°„κ³Όν•˜κΈ° μ‰¬μ›Œμ§„λ‹€.
이것이 정말 μ€‘μš”ν•œ 정보가 무엇인지 μ΄ˆλ°˜λΆ€ν„° 짚고 λ„˜μ–΄κ°€λŠ” λ¦¬μ„œμΉ˜ 단계가 ν•„μš”ν•œ μ΄μœ μ΄λ‹€. μ •λ ¬/검색/ν•„ν„°/슀크둀/λ™μ‹œ μž‘μ—… λ“±, ν–‰κ³Ό 열이 μ–΄λ–»κ²Œ 묢일 지 κ³ λ €ν•  λ•Œμ—λŠ” μ‚¬μš©μž μž…μž₯μ—μ„œ μ–΄λ–€ κΈ°λŠ₯이 μžˆμ–΄ μ•ˆμ‹¬ν•  수 μžˆμ„μ§€λ₯Ό κΈ°μ€€μœΌλ‘œ 생각해보면 λœλ‹€.

ν•œ μ—΄μ—μ„œ 일어날 수 μžˆλŠ” μˆ˜μ • μΈν„°λž™μ…˜μ˜ μ˜ˆμ‹œ

βœ‹ λ²„νŠΌ μ‚¬μš© κ·Έλ§Œλ‘κΈ°
μ§€λ‚˜μΉœ λ²„νŠΌ μ‚¬μš©μœΌλ‘œ ν…Œμ΄λΈ”μ„ λ§μΉ˜λŠ” 것은 ν”νžˆ λ³Ό 수 μžˆλŠ” μ‹€μˆ˜μ΄λ‹€. μ΄λŠ” ν•„μš” μ΄μƒμœΌλ‘œ ν…Œμ΄λΈ”μ„ λΉ½λΉ½ν•˜κ²Œ λ§Œλ“€κ±°λ‚˜ 폭과 길이λ₯Ό 늘릴 뿐이닀.
μˆ˜ν–‰ν•  수 μžˆλŠ” κΈ°λŠ₯을 μ‚¬μš©μžμ—κ²Œ 보기 μ‰½κ²Œ λ“œλŸ¬λ‚΄λ €λŠ” 것이 λ²„νŠΌμ˜ λͺ©μ μ΄λ‹€. 이 μž‘μ€ λ„€λͺ¨λ“€μ— λŒ€ν•œ 우리의 μ˜μ‘΄λ„λŠ” λ†’μ§€λ§Œ, λ‹€λ₯Έ μ˜΅μ…˜λ„ λΆ„λͺ…νžˆ μžˆλ‹€. 뢀가적인 μ •λ³΄λŠ” μΌ€λ°₯ 메뉴 μ•„μ΄μ½˜(μ„Έλ‘œλ‘œ 3개의 점이 λ°°μ—΄λœ 메뉴)을 μΆ”κ°€ν•΄ λͺ¨λ‹¬μ΄λ‚˜ μ‚¬μ΄λ“œ λ°”λ‘œ λ³΄λ‚΄λŠ” ν˜•νƒœμ²˜λŸΌ 말이닀.
기술적인 κ³΅μˆ˜κ°€ 쑰금 더 ν•„μš”ν•  μˆ˜λŠ” μžˆμ–΄λ„, μ‚¬μš©μžλ“€μ΄ 인라인 μ•‘μ…˜μ„ μˆ˜ν–‰ν•˜κ±°λ‚˜ νŠΉμ • ν–‰λ™μœΌλ‘œ 트리거된 λ™μž‘λ“€μ„ 보닀 μ—­λ™μ μœΌλ‘œ λ³΄μ—¬μ£ΌλŠ” 것은 ν…Œμ΄λΈ”μ˜ ν˜Όμž‘ν•¨μ„ μ€„μ΄λŠ” 데에 νš¨κ³Όμ μ΄λ‹€. ν•˜μ§€λ§Œ λ²„νŠΌμ„ μ—†μ• λ©΄ μž…λ ₯ν•˜λ©΄μ„œ 였λ₯˜κ°€ λ‚  μˆ˜λ„ μžˆλ‹€λŠ” 점은 염두에 두길 λ°”λž€λ‹€.

(λ°μŠ€ν¬νƒ‘ ν™˜κ²½μ—μ„œ) ν…Œμ΄λΈ”μ˜ λ™μž‘μ΄ λ“œλŸ¬λ‚˜λŠ” 방식

βœ… ν…Œμ΄λΈ” μˆ˜μ • κΈ°λŠ₯이 μžˆλ‹€λ©΄ 성곡 μ—¬λΆ€ λ˜λŠ” 였λ₯˜λ₯Ό ν‘œμ‹œν•˜κΈ°
λ§ˆμ§€λ§‰μœΌλ‘œ, ν…Œμ΄λΈ”μ— μˆ˜μ • κΈ°λŠ₯이 μžˆλ‹€λ©΄ μˆ˜μ •λœ λ‚΄μš©μ΄ μ˜¬λ°”λ₯΄κ²Œ μ €μž₯이 λ˜μ—ˆλŠ”μ§€μ— λŒ€ν•œ ν”Όλ“œλ°±μ΄ λΆ„λͺ…νžˆ μžˆμ–΄μ•Ό ν•œλ‹€. μ—„μ²­λ‚œ μ–‘μ˜ 데이터가 μž…λ ₯λ˜λŠ” κΈ°μ—…μš© μ†Œν”„νŠΈμ›¨μ–΄μ„œλŠ” νŠΉνžˆλ‚˜ μ€‘μš”ν•œ 뢀뢄이닀. μž…λ ₯ν•˜λŠ” 정보듀을 ν…Œμ΄λΈ”μ΄ 잘 μ €μž₯ν•˜κ³  μžˆλ‹€λŠ” 신뒰감을 μ£Όμ–΄μ•Ό ν•œλ‹€.

μ €μž :  Ceara C
λ²ˆμ—­μž : μ •μœ€μ˜
*무단 μ „μž¬ 및 재배포 κΈˆμ§€(링크 곡유 κ°€λŠ₯)
같이 읽고 싢은 μΉœκ΅¬κ°€ λ– μ˜€λ₯Έλ‹€λ©΄
디독을 톡해 λ°œν–‰ν•˜κ³  싢은 직접 λ²ˆμ—­ν•œ 아티클이 μžˆλ‹€λ©΄?
이번 λ ˆν„°λ„ 'μˆ˜κ³ ν–ˆλ‹€', λ§Œμ•½ 디독 νŒ€μ—κ²Œ μ»€ν”Ό ν•œ μž” 사주고 μ‹ΆμœΌμ‹  뢄듀이 κ³„μ‹œλ‹€λ©΄ μ•„λž˜ κ³„μ’Œλ₯Ό 톡해 ν›„μ›ν•΄μ£Όμ„Έμš”! ν–₯긋함은 덀, μ—¬λŸ¬λΆ„μ˜ λ”°λœ»ν•œ 관심과 도움이 μ„œλΉ„μŠ€ μœ μ§€μ— μ •λ§ 큰 힘이 λ©λ‹ˆλ‹€.  
6μ›” 후원해주신 λΆ„λ“€ 
κΉ€μ£Όμ—°, μ˜€κ·œν—Œ, 채성, 백정은, 였즈크둯 λ‹˜ μ™Έ 1λͺ… 

디독
d.dok.newsletter@gmail.com
-
μˆ˜μ‹ κ±°λΆ€ Unsubscribe