🌟 λ””ν…ŒμΌμ˜ 간격 μ‹œλ¦¬μ¦ˆ! [πŸ’« 상황 별 λ‘œλ”© μ• λ‹ˆλ©”μ΄μ…˜μ΄ ν•„μš”ν•œ 이유] (πŸ‘€κ°„λ‹¨ μš”μ•½) λ²„νŠΌμ„ λˆŒλ €λŠ”λ° 화면에 μ–΄λ–€ 변화도 μ—†λ‹€λ©΄ μ‚¬μš©μžλŠ” μ–΄λ–»κ²Œ λŠλ‚„κΉŒμš”? μ•„λ¬΄λŸ° λ°˜μ‘μ΄ μ—†λŠ” 화면은 κ³ μž₯ λ‚œ κ²ƒμ²˜λŸΌ λ³΄μž…λ‹ˆλ‹€. λ‘œλ”©μ€ μ‚¬μš©μžμ˜ 행동에 λŒ€ν•œ ν”Όλ“œλ°±μœΌλ‘œ λ‹€μŒ 화면을 뢈러올 μ€€λΉ„λ₯Ό ν•˜κ³  μžˆλ‹€λŠ” 상황을 μΈμ§€μ‹œμΌœμ€λ‹ˆλ‹€. μ μ ˆν•œ λ‘œλ”© μ• λ‹ˆλ©”μ΄μ…˜μ€ ν”„λ‘œλ•νŠΈμ˜ 완성도λ₯Ό 높일 뿐 μ•„λ‹ˆλΌ, μ„œλΉ„μŠ€μ˜ λΈŒλžœλ”©μ„ λ‹΄μ•„λ‚Ό 수 μžˆμŠ΅λ‹ˆλ‹€. πŸ“Œ λ‘œλ”© μ• λ‹ˆλ©”μ΄μ…˜μ˜ μ’…λ₯˜ λ‘œλ”© μ• λ‹ˆλ©”μ΄μ…˜μ€ λ§₯락에 따라 전체 λ‘œλ”©κ³Ό λΆ€λΆ„ λ‘œλ”©μœΌλ‘œ λ‚˜λˆŒ 수 μžˆμŠ΅λ‹ˆλ‹€. 전체 λ‘œλ”©μ€ ν™”λ©΄ 전체에 μ μš©λ˜λŠ” λ‘œλ”©μœΌλ‘œ μŠ€μΌˆλ ˆν†€ UI, μŠ€ν”Œλž˜μ‹œ ν™”λ©΄ 등이 μžˆμŠ΅λ‹ˆλ‹€. λΆ€λΆ„ λ‘œλ”©μ€ ν™”λ©΄μ—μ„œ 일뢀 μ»΄ν¬λ„ŒνŠΈμ— μΌμ–΄λ‚˜λŠ” λ‘œλ”©μž…λ‹ˆλ‹€. λŒ€ν‘œμ μœΌλ‘œ λ²„νŠΌ λ‘œλ”© μ• λ‹ˆλ©”μ΄μ…˜μ΄ μžˆμŠ΅λ‹ˆλ‹€. βœ“ μŠ€μΌˆλ ˆν†€ UI (Skeleton UI) μŠ€μΌˆλ ˆν†€ UIλŠ” μ‹€μ œ 데이터가 λ Œλ”λ§ 되기 μ „, 보일 ν™”λ©΄μ˜ μœ€κ³½μ„ λ¨Όμ € κ·Έλ €μ£ΌλŠ” λ‘œλ”© μ• λ‹ˆλ©”μ΄μ…˜μž…λ‹ˆλ‹€. μ‚¬μš©μžμ—κ²Œ β€˜μ΄ μžλ¦¬μ— μ–΄λ–€ 것듀이 보이게 될 거야’라고 μ•Œλ €μ£ΌλŠ” ν™”λ©΄μ˜ 예고편이라 ν•  수 μžˆμŠ΅λ‹ˆλ‹€. βœ“ 루프 μ• λ‹ˆλ©”μ΄μ…˜ (Loop Animation) λ‹¨μˆœν•œ κ·Έλž˜ν”½ μš”μ†Œκ°€ λ¬΄ν•œ λ°˜λ³΅λ˜λŠ” μ• λ‹ˆλ©”μ΄μ…˜μž…λ‹ˆλ‹€. μ‚¬μš©μž 행동에 λŒ€ν•œ κ°•ν•œ ν”Όλ“œλ°±μ„ μ œκ³΅ν•˜λ©°, 동적인 μš”μ†Œλ‘œ μ‚¬μš©μžκ°€ 지루함을 λŠλΌμ§€ μ•Šκ²Œ ν•©λ‹ˆλ‹€. βœ“ ν”„λ‘œκ·Έλž˜μŠ€ λ°” (Progress Bar) ν”„λ‘œκ·Έλž˜μŠ€ λ°”λŠ” ν™”λ©΄ μƒλ‹¨μ—μ„œ 얇은 λ°” ν˜•νƒœλ‘œ λ‘œλ”©μ˜ μƒνƒœλ₯Ό μ§κ΄€μ μœΌλ‘œ λ³΄μ—¬μ£ΌλŠ” λ‘œλ”© μ• λ‹ˆλ©”μ΄μ…˜μž…λ‹ˆλ‹€. κΈ°μ‘΄ 화면을 μœ μ§€ν•˜λ©΄μ„œ λ‘œλ”© 상황을 μ§κ΄€μ μœΌλ‘œ 보여쀄 수 μžˆμŠ΅λ‹ˆλ‹€. πŸ“Œ μ–΄λ–€ μƒν™©μ—μ„œ μ–΄λ–€ λ‘œλ”© μ• λ‹ˆλ©”μ΄μ…˜μ„ μ‚¬μš©ν•΄μ•Ό ν• κΉŒμš”? βœ“ μŠ€μΌˆλ ˆν†€ UI (Skeleton UI) - λ‘œλ”©μ΄ 짧게 λŠκ»΄μ§€κ²Œ ν•΄μ•Όν•˜λŠ”κ°€? -이전 ν™”λ©΄ 없이 μƒˆλ‘œ κ·Έλ €μ§€λŠ” 화면인가? -ν™”λ©΄μ˜ 변동이 μž¦μ§€ μ•Šμ€κ°€? ν™ˆ 화면은 앱을 켜고 처음 λ§ˆμ£Όν•˜λŠ” ν™”λ©΄μœΌλ‘œ μ€‘μš”λ„κ°€ λ†’μŠ΅λ‹ˆλ‹€. 첫 λ‘œλ”© μ†λ„λŠ” μ„œλΉ„μŠ€μ˜ 인상을 μ’Œμš°ν•˜κΈ°λ„ ν•©λ‹ˆλ‹€. λ˜ν•œ 변경이 μž¦μ§€ μ•Šμ•„ μŠ€μΌˆλ ˆν†€ UIλ₯Ό 맀번 μ œμž‘ν•˜λŠ” 것에 λŒ€ν•œ 뢀담이 μ μŠ΅λ‹ˆλ‹€. λ‘œλ”© μ „κ³Ό ν›„κ°€ λΆ€λ“œλŸ½κ²Œ 이어져 μ‹¬λ¦¬μ μœΌλ‘œ λ‘œλ”© 속도가 더 짧게 느껴질 수 μžˆλŠ” μŠ€μΌˆλ ˆν†€ UIλ₯Ό μ μš©ν–ˆμŠ΅λ‹ˆλ‹€. βœ“ 루프 μ• λ‹ˆλ©”μ΄μ…˜ (Loop Animation) 루프 μ• λ‹ˆλ©”μ΄μ…˜μ€ 전체 λ‘œλ”©κ³Ό λΆ€λΆ„ λ‘œλ”©μ— λͺ¨λ‘ ν™œμš©ν•  수 μžˆμŠ΅λ‹ˆλ‹€. λ§ˆμ΄λ¦¬μ–ΌνŠΈλ¦½μ—μ„œλŠ” λŒ€λΆ€λΆ„μ˜ λ‘œλ”©μ— μŠ€ν”Όλ„ˆλ₯Ό μ‚¬μš©ν•˜κ³  μžˆμ—ˆμŠ΅λ‹ˆλ‹€. 전체 λ‘œλ”©μ— μƒˆλ‘­κ²Œ μ œμž‘ν•œ λ§ˆμ΄λ¦¬μ–ΌνŠΈλ¦½ λ‘œλ”© μ• λ‹ˆλ©”μ΄μ…˜μ„, λΆ€λΆ„ λ‘œλ”©μ— μŠ€ν”Όλ„ˆλ₯Ό ν™œμš©ν•˜κΈ°λ‘œ ν–ˆμŠ΅λ‹ˆλ‹€. μŠ€ν”Όλ„ˆ -뢀뢄적인 λ‘œλ”©μ΄ μΌμ–΄λ‚˜λŠ”κ°€? -μ‚¬μš©μž μ•‘μ…˜μ— λŒ€ν•œ ν”Όλ“œλ°±μ΄ κ°•ν•΄μ•Ό ν•˜λŠ”κ°€? (λ‘œλ”©μ΄ μΌμ–΄λ‚˜κ³  μžˆμŒμ„ λͺ…ν™•ν•˜κ²Œ μΈμ§€μ‹œμΌœμ•Ό ν•˜λŠ”κ°€?) λ‘œλ”© μ• λ‹ˆλ©”μ΄μ…˜ -전체 λ‘œλ”©μ΄ μΌμ–΄λ‚˜λŠ”κ°€? -이전 ν™”λ©΄μ˜ 정보가 μœ μ§€λ˜μ–΄μ•Ό ν•˜λŠ”κ°€? 기타 λ‘œλ”© ν™”λ©΄ λ‘œλ”© μ‹œκ°„μ΄ λΆˆκ°€ν”Όν•˜κ²Œ κΈΈκ³ , μ‚¬μš©μžμ—κ²Œ λͺ…ν™•ν•˜κ²Œ μ „λ‹¬ν•˜κ³ μž ν•˜λŠ” 메세지가 μžˆλŠ” 경우 화면에 μ»€μŠ€ν…€ ν•œ λ‘œλ”© 화면을 μ μš©ν•©λ‹ˆλ‹€. λ§ˆλ¦¬νŠΈμ—μ„œλŠ” μŠ€ν”Œλž˜μ‹œ, ν˜Έν…” 검색, ν•­κ³΅κΆŒ 검색 λ‘œλ”© ν™”λ©΄ 등이 μžˆμŠ΅λ‹ˆλ‹€. -λ‘œλ”© μ‹œκ°„μ΄ λΆˆκ°€ν”Όν•˜κ²Œ κΈΈμ–΄μ§€λŠ”κ°€? -μ‚¬μš©μžμ—κ²Œ λͺ…ν™•ν•˜κ²Œ μ „λ‹¬ν•˜κ³ μž ν•˜λŠ” 메세지가 μžˆλŠ”κ°€? (πŸ‘‹μ€‘μš”ν•œ μ΄μœ κ°€ λ­”κ°€μš”?) μŠ€ν”Œλž˜μ‹œ 화면에 λŒ€ν•΄ λͺ‡ 번 글을 μž‘μ„±ν•œ 적 μžˆλŠ”λ°μš”. μŠ€ν”Œλž˜μ‹œμ˜ κ°€μž₯ 큰 λͺ©μ μ€ μ•±μ˜ μ£Όμš” 데이터λ₯Ό λ‘œλ”©ν•˜κΈ° μœ„ν•œ μ‹œκ°„μ„ 벌기 μœ„ν•¨μž…λ‹ˆλ‹€. μ‹œκ°μ μœΌλ‘œ μ‚¬μš©μžλ₯Ό μž μ‹œ 머물게 ν•˜λŠ” μž₯치인 것이죠. 이처럼 μ•±μ˜ μ‹€ν–‰λΆ€ν„° μ£Όμš” ν™”λ©΄μœΌλ‘œμ˜ 이동, 쑰건에 λ”°λ₯Έ 검색 λ“± λ‹€μ–‘ν•œ κ³Όμ •μ—μ„œ μ‚¬μš©μžλŠ” 'κΈ°λ‹€λ¦Ό'을 λ§ˆμ£Όν•  수 밖에 μ—†μŠ΅λ‹ˆλ‹€. κ΅­λ‚΄ μ‚¬μš©μžμ—κ²Œ 이런 기닀림은 앱을 ν‰κ°€ν•˜λŠ” μ£Όμš” 기쀀이 λ˜κΈ°λ„ ν•˜μ£ . κ·Έλž˜μ„œ 이번 글이 μ œκ²ŒλŠ” 더 μ€‘μš”ν•˜κ²Œ λ‹€κ°€μ™”μŠ΅λ‹ˆλ‹€. ν™”λ©΄μ΄λ‚˜ 상황에 따라 기쀀을 λ§Œλ“€κ³ , ꡬ체적인 λ‘œλ”© μ• λ‹ˆλ©”μ΄μ…˜μ„ ν™œμš©ν•˜λŠ” 방법에 λŒ€ν•œ 글이 많이 μ—†κΈ° λ•Œλ¬Έμž…λ‹ˆλ‹€. κΈ°λ‹€λ¦Όμ˜ μ‹œκ°„μ„ 긍정적인 κ²½ν—˜μœΌλ‘œ λ°”κΎΈλŠ” 이런 λ””ν…ŒμΌλ“€μ΄ μžˆλ‹€λ©΄, μ‚¬μš©μžλ“€μ—κ²ŒλŠ” μ„œλΉ„μŠ€μ— λŒ€ν•œ μ „λ°˜μ μΈ 인식이 μ’‹μ•„μ§ˆ 수 밖에 없지 μ•Šμ„κΉŒμš”? (πŸ’Œν•¨κ»˜ μ½μ–΄λ³΄μ„Έμš”!) λͺ¨λ°”일 μ•±μ—μ„œμ˜ β€˜λ‘œλ”© μ• λ‹ˆλ©”μ΄μ…˜β€™ μ–΄λ–»κ²Œ ν™œμš©ν•˜λ©΄ μ’‹μ„κΉŒ? : http://icunow.co.kr/loading-animation/ μŠ€ν”Œλž˜μ‹œ ν™”λ©΄, μ–΄λ–»κ²Œ κ΅¬μ„±ν•˜λ©΄ μ’‹μ„κΉŒ? : https://stib.ee/Z722

상황에 λ§žλŠ” λ‘œλ”© μ• λ‹ˆλ©”μ΄μ…˜ μ μš©ν•˜κΈ°

Medium

상황에 λ§žλŠ” λ‘œλ”© μ• λ‹ˆλ©”μ΄μ…˜ μ μš©ν•˜κΈ°

λ‹€μŒ λ‚΄μš©μ΄ κΆκΈˆν•˜λ‹€λ©΄?

μ§€κΈˆ κ°„νŽΈ κ°€μž…ν•˜κ³  λ‹€μŒ λ‚΄μš©μ„ 확인해 λ³΄μ„Έμš”!

λ˜λŠ”

이미 νšŒμ›μ΄μ‹ κ°€μš”?

2020λ…„ 7μ›” 2일 μ˜€ν›„ 11:55

λŒ“κΈ€ 0

μ£Όκ°„ 인기 TOP 10

1

μ„œμ˜ ν”„λ‘ νŠΈμ—”λ“œ 개발자

μ˜¬λ°”λ₯Έ REST API λ””μžμΈ 사둀 : API 섀계 κ°€μ΄λ“œ πŸ₯°

2

λ°•μ§„λ§Œ μ—‘μ…ˆ ν’€μŠ€νƒ 개발자

λ‚˜μ˜ κ°€μΉ˜λ₯Ό ν–₯상 μ‹œν‚€λŠ” 방법(λΆ€μ œ: λ‚΄κ°€ 야근을 ν•˜λŠ” 이유)

3

ν•œκΈ°μš© UpZen μ°½μ—…μž λŒ€ν‘œ

뢈경기 μ·¨μ—… λ„ˆλ¬΄ μ–΄λ ΅μ£ ?

4

Outsider λ‹Ήκ·Όλ§ˆμΌ“ SRE

Git의 μƒˆλ‘œμš΄ κΈ°λ³Έ Merge μ „λž΅ ort

5

μ†‘μš”μ°½ λ°°λ―Ό ν”„λ‘ νŠΈμ—”λ“œ ν”„λ‘œκ·Έλž˜λ¨Έ

νšŒμ‚¬ λŒ€ν‘œμ˜ μ ˆλ¬˜ν•œ μ±…λž΅

6

κ³¨λΉˆν•΄μ»€ Lead of Generative AI

ν”„λ‘œμ νŠΈ ν›„ 회고λ₯Ό ν•œλ‹€κ³  ν•˜λ©΄, λŒ€λΆ€λΆ„ 과정에 λŒ€ν•œ 회고λ₯Ό ν•œλ‹€

7

κΉ€λ„μ˜ 넀이버 / λΈŒλžœλ“œ 기획자

μž˜ν•˜λŠ” μ‚¬λžŒλ“€ μ‚¬μ΄μ—μ„œ, 쒋은 μ‚¬λžŒλ“€λ‘œλΆ€ν„° λ°°μš΄λ‹€

8

ν•œμ •(Jung Han) λΌμΈν”ŒλŸ¬μŠ€ ν”„λŸ°νŠΈμ—”λ“œ 개발자

ν•œ μ€„λ‘œ μ—…κ·Έλ ˆμ΄λ“œν•˜λŠ” 12가지 μ΅œμ‹  CSS

9

μ„œμ§„ν˜Έ HPC&AI Presales Consultant at HPE

<무료 AI κ°•μ’Œ>

10

κΆŒνƒœκ΄€ NAVER μ†Œν”„νŠΈμ›¨μ–΄ μ—”μ§€λ‹ˆμ–΄

이 μ½”λ“œ λͺ» 짜면 λ„Œ μ£Όλ‹ˆμ–΄

μ§€κΈˆ κ°€μž…ν•˜κ³  개발 νŠΈλ Œλ“œ λ‰΄μŠ€λ ˆν„°λ₯Ό λ°›μ•„λ³΄μ„Έμš”!

개발 관심 λΆ„μ•Ό 쀑 ν•˜λ‚˜λ₯Ό 관심 λΆ„μ•Όλ‘œ μ„ νƒν•˜λ©΄ λ°›μ•„λ³Ό 수 μžˆμ–΄μš”.