🌟 λ””ν…ŒμΌμ˜ 간격 μ‹œλ¦¬μ¦ˆ! [πŸ’« | 컀리어리

🌟 λ””ν…ŒμΌμ˜ 간격 μ‹œλ¦¬μ¦ˆ! [πŸ’« 상황 별 λ‘œλ”© μ• λ‹ˆλ©”μ΄μ…˜μ΄ ν•„μš”ν•œ 이유] (πŸ‘€κ°„λ‹¨ μš”μ•½) λ²„νŠΌμ„ λˆŒλ €λŠ”λ° 화면에 μ–΄λ–€ 변화도 μ—†λ‹€λ©΄ μ‚¬μš©μžλŠ” μ–΄λ–»κ²Œ λŠλ‚„κΉŒμš”? μ•„λ¬΄λŸ° λ°˜μ‘μ΄ μ—†λŠ” 화면은 κ³ μž₯ λ‚œ κ²ƒμ²˜λŸΌ λ³΄μž…λ‹ˆλ‹€. λ‘œλ”©μ€ μ‚¬μš©μžμ˜ 행동에 λŒ€ν•œ ν”Όλ“œλ°±μœΌλ‘œ λ‹€μŒ 화면을 뢈러올 μ€€λΉ„λ₯Ό ν•˜κ³  μžˆλ‹€λŠ” 상황을 μΈμ§€μ‹œμΌœμ€λ‹ˆλ‹€. μ μ ˆν•œ λ‘œλ”© μ• λ‹ˆλ©”μ΄μ…˜μ€ ν”„λ‘œλ•νŠΈμ˜ 완성도λ₯Ό 높일 뿐 μ•„λ‹ˆλΌ, μ„œλΉ„μŠ€μ˜ λΈŒλžœλ”©μ„ λ‹΄μ•„λ‚Ό 수 μžˆμŠ΅λ‹ˆλ‹€. πŸ“Œ λ‘œλ”© μ• λ‹ˆλ©”μ΄μ…˜μ˜ μ’…λ₯˜ λ‘œλ”© μ• λ‹ˆλ©”μ΄μ…˜μ€ λ§₯락에 따라 전체 λ‘œλ”©κ³Ό λΆ€λΆ„ λ‘œλ”©μœΌλ‘œ λ‚˜λˆŒ 수 μžˆμŠ΅λ‹ˆλ‹€. 전체 λ‘œλ”©μ€ ν™”λ©΄ 전체에 μ μš©λ˜λŠ” λ‘œλ”©μœΌλ‘œ μŠ€μΌˆλ ˆν†€ 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

    ν•¨κ»˜ 보면 더 쒋은

    πŸ’¦ λ‚˜λ§Œ λͺ¨λ₯΄λŠ” ν”„λ‘œλ•νŠΈ 관리 이야기 [✏️ μ§‘μš”ν• λ§ŒνΌ μš”κ΅¬μ‚¬ν•­μ— λŒ€ν•΄ μ§ˆλ¬Έν•΄μ•Ό ν•΄μš”!] (πŸ‘€κ°„λ‹¨ μš”μ•½) μ‚¬λ‚΄μ—μ„œ μ§„ν–‰ν•œ μ• μžμΌ ꡐ윑, κ·Έ 쀑 'Role-Play'에 λŒ€ν•œ κΈ€μ“΄μ΄μ˜ 개인적인 κ²½ν—˜κ³Ό 생각을 μ •λ¦¬ν•œ λ‚΄μš©μž…λ‹ˆλ‹€. πŸ“Œ Role-Play βœ“ 역할극은 μ„Έ λͺ…μ΄μ„œ ν•œ μ‘°λ₯Ό κ΅¬μ„±ν•˜λ©° 각자 고객, PO, 개발자 역할을 맑아 두 번의 ν”Œλ ˆμ΄λ₯Ό 진행 βœ“ μ§„ν–‰μžλŠ” κ³ κ°μ—κ²Œ 미리 직선 μš”μ†Œ 3가지, 곑선 μš”μ†Œ 3κ°€μ§€λ‘œ 이루어진 두 그림을 전달 βœ“ PO와 κ°œλ°œμžλŠ” 고객의 그림을 μ „ν˜€ μ•Œμ§€ λͺ»ν•˜λŠ” μƒνƒœμ΄λ©°, 고객은 μ˜€λ‘œμ§€ 말둜만 이 그림에 λŒ€ν•΄ μ„€λͺ… πŸ“Œ 고객 β†’ PO β†’ 개발자 βœ“ 고객은 말둜만 μ„€λͺ…ν•  수 μžˆλ‹€ λ³΄λ‹ˆ μ²˜μŒμ—” "큰 λŒ€κ°μ„  μ˜†μ— μ˜μ–΄ 슀펠링 M이 μžˆμ–΄μš”"λΌλŠ” λŸ¬ν”„ν•˜κ²Œ μš”κ΅¬μ‚¬ν•­ 전달 βœ“ λ¨Έλ¦Ώμ†μœΌλ‘œ λ‚˜λŠ” μ„ , 문자둜 μš”μ†Œλ₯Ό λ‚˜λˆ„κ³  각 μš”μ†Œμ— λŒ€ν•œ μœ„μΉ˜, 크기 λ“± 정보 ꡬ쑰도λ₯Ό κ·Έλ¦Ό βœ“ "큰 λŒ€κ°μ„  κΈ°μ€€μœΌλ‘œ μ™Όμͺ½μ—? 였λ₯Έμͺ½μ—?", "큰 λŒ€κ°μ„ μ€ μ–Όλ§ˆλ‚˜ ν΄κΉŒμš”?"라고 μš”κ΅¬μ‚¬ν•­μ— λŒ€ν•΄ λ‹€μ‹œ 질문 βœ“ "였λ₯Έμͺ½ μœ„μ— μžˆμ–΄μš”!", "A4μš©μ§€ κ°€λ‘œ κΈ°μ€€μœΌλ‘œ μ™Όμͺ½ μœ„μ—μ„œ 였λ₯Έμͺ½ μ•„λž˜λ₯Ό κ°€λ‘œμ§€λ₯Ό 만큼 μ»€μš”!"라고 λ‹΅ βœ“ 큰 λŒ€κ°μ„ μ˜ κΈ°μ€€μœΌλ‘œ '였λ₯Έμͺ½ μœ„μ— μžˆλ‹€'λΌλŠ” 말을 톡해 M의 μ‚¬μ΄μ¦ˆλ₯Ό μœ μΆ” βœ“ λŒ€κ°μ„ μ˜ '크닀'λΌλŠ” κ°œλ…μ΄, 넓이가 μ•„λ‹Œ κΈΈμ΄μž„μ„ μ•Œκ²Œ 됨 βœ“ ν•˜μ§€λ§Œ κ°œλ°œμžλŠ” 큰 λŒ€κ°μ„ μ˜ μ‹œμž‘μ  μœ„μΉ˜, M은 μ†Œλ¬Έμž? λŒ€λ¬Έμž? λ“±μ˜ μ§ˆλ¬Έμ„ λ‹€μ‹œν•¨ πŸ“Œ λ‹€μ‹œ ν•œ 번 βœ“ β€œμŠ€ν…Œμ΄μ‹œ(κΈ€ μž‘μ„±μž), μ§‘μš”ν•  만큼 μš”κ΅¬μ‚¬ν•­μ— λŒ€ν•΄ μ§ˆλ¬Έν•΄μ•Ό ν•΄μš”. Mκ³Ό m은 λ‹¬λΌμš”.” βœ“ λŒ€κ°μ„ μ€ λ‘˜μ§ΈμΉ˜κ³ , M은 슀슀둜 λ‹Ήμ—°νžˆ λŒ€λ¬ΈμžλΌκ³  νŒλ‹¨ν•΄ κ³ κ°μ—κ²Œ 확인쑰차 ν•˜μ§€ μ•Šμ•˜λ˜ 것 βœ“ κ°œλ°œμžλΆ„μ΄Β λ‹€λ₯ΈΒ μš”μ†Œλ₯ΌΒ κ·Έλ¦΄Β λ™μ•ˆΒ λ‹€μ‹œΒ κ³ κ°μ—κ²ŒΒ λŒμ•„κ°€Β λŒ€μ†Œλ¬ΈμžΒ κ΅¬λΆ„μ„Β ν™•μΈ πŸ“Œ 고객 & PO & 개발자 βœ“ A4μš©μ§€λ₯ΌΒ μ‚¬λ“±λΆ„,Β μ–΄λŠΒ μ •λ„μ˜Β μœ„μΉ˜μ—Β μ‘΄μž¬ν•˜ Β μ–΄λŠΒ μ •λ„μ˜Β λ©΄μ μ„Β μ°¨μ§€ν•˜λŠ”μ§€Β λ“±Β κ΅¬μ²΄μ μœΌλ‘œΒ λ¬Όμ–΄λ³΄λ €Β λ…Έλ ₯ βœ“ κ·ΈλŸ°λ°Β μ‹œκ°„μ΄Β μ§€λ‚ μˆ˜λ‘Β λ‚΄κ°€Β μ§ˆλ¬Έν•˜λŠ”Β μΌμ΄Β κ±°μ˜Β μ—†μ–΄μ§ βœ“ λ‚΄κ°€Β μš”κ΅¬μ‚¬ν•­μ„Β λ“€μ„Β λ•Œ,Β λ¨Έλ¦Ώμ†μœΌλ‘œΒ λ™μ‹œμ—Β μ •λ³΄μ˜Β μœ„κ³„λ₯ΌΒ λ‚˜λˆ΄λ‹€λ©΄Β κ°œλ°œμžλΆ„μ€Β λ™μ‹œμ—Β κ·Έλ €λ‚΄λŠ”Β λŠλ‚Œ βœ“ μž‘μ€Β μ›μ˜Β λ°˜μ§€λ¦„,Β λŒ€κ°μ„ μ˜Β μ‹œμž‘μ μ€Β κΌ­μ§“μ μœΌλ‘œλΆ€ν„°Β μ–΄λŠΒ μ •λ„μ˜Β κ°λ„μ— μœ„μΉ˜ν•΄Β μžˆλŠ”μ§€Β λ“±Β μ§ˆλ¬Έμ΄Β ν›¨μ”¬Β λ”Β κ΅¬μ²΄μ  πŸ“Œ λŠλ‚€μ  βœ“ Product ghOstκ°€Β λ˜μ§€Β μ•ŠμœΌλ €λ©΄Β μš”κ΅¬μ‚¬ν•­μ„Β λ””ν…ŒμΌν•˜κ²ŒΒ μˆ˜μ§‘ν•˜λŠ” 건 λ¬Όλ‘ Β κ³ κ°κ³ΌΒ μ‚¬μ—…μ—Β λŒ€ν•œΒ μ΄ν•΄λ„κ°€Β λ†’μ•„μ•ΌΒ ν•œλ‹€λŠ”Β μ  βœ“ λ‹¨μˆœνžˆΒ μ›ν•˜λŠ” κ²ƒμ„Β μ •ν™•νžˆΒ κ·Έλ¦¬κΈ°Β μœ„ν•¨μ„Β λ„˜μ–΄μ„ Β μ§„μ§œΒ λ¬Έμ œμ™€Β λͺ©μ μ„Β νŒŒμ•…ν• Β μˆ˜Β μžˆμ„Β κ²ƒ

    "μŠ€ν…Œμ΄μ‹œ, μ§‘μš”ν• λ§ŒνΌ μš”κ΅¬μ‚¬ν•­μ— λŒ€ν•΄ μ§ˆλ¬Έν•΄μ•Ό ν•΄μš”"

    brunch

    μΆ”μ²œ ν”„λ‘œν•„

    ν˜„μ§μžμ—κ²Œ 업계 μ£Όμš” μ†Œμ‹μ„ λ°›μ•„λ³΄μ„Έμš”.

    β€Œ
    β€Œβ€Œ
    β€Œ
    β€Œ
    β€Œβ€Œ
    β€Œ
    β€Œ
    β€Œβ€Œ
    β€Œ
    β€Œ
    β€Œβ€Œ
    β€Œ
    β€Œ
    β€Œβ€Œ
    β€Œ

    ν˜„μ§μžλ“€μ˜ 'μ§„μ§œ μΈμ‚¬μ΄νŠΈ'κ°€ λ‹΄κΈ΄ 업계 μ£Όμš” μ†Œμ‹μ„ λ°›μ•„λ³΄μ„Έμš”.

    컀리어리 | μΌμž˜λŸ¬λ“€μ˜ 컀리어 SNS