Category: 04_UX ๐Ÿ’…

0

Svg๋กœ Rounded rectํ˜•ํƒœ์˜ progress bar ๋งŒ๋“ค๊ธฐ (feat. animation, path)

Progress bar๋ฅผ ๊ตฌํ˜„ํ•ด์•ผํ•œ๋‹ค.์›น์—์„œ ์ฐพ์„ ์ˆ˜ ์žˆ๋Š” ์—ฌ๋Ÿฌ ์˜ˆ์ œ๋“ค์„ ์ฐธ๊ณ ํ•˜์—ฌ ์‚ฌ์šฉํ•ด๋„ ๋˜์ง€๋งŒ, ์ปค์Šคํ…€ํ•˜๊ธฐ ์–ด๋ ค์šด ๊ฒฝ์šฐ ์ง์ ‘ ๊ตฌํ˜„์„ ํ•ด์•ผํ•œ๋‹ค.๋ฐ”๋กœ ์ƒ๊ฐ๋‚˜๋Š” ์—ฃ์ง€ ์ผ€์ด์Šค๋Š” ๋ฌด์—‡์ผ๊นŒ ? Rounded progress bar์˜ ์ฝ”๋„ˆ ๋ถ€๋ถ„์ฑ„์›Œ์ง€๋Š” bar์˜ Corner ๋ถ€๋ถ„! base bar์˜ ์ฝ”๋„ˆ๊ฐ€ rouneded๊ฐ€ ์•„๋‹ˆ๊ฑฐ๋‚˜ + ์ฑ„์›Œ์ง€๋Š” bar๋„ roun

0

ํ”ผ์ธ ์˜ ๋ฒ•์น™๊ณผ Touch Target

[UX/UI์˜ 10๊ฐ€์ง€ ์‹ฌ๋ฆฌํ•™ ๋ฒ•์น™] ์ฑ…์„ ์ฝ์œผ๋ฉฐ ๋ฒ•์น™๋ณ„๋กœ๋‚ด์šฉ ์š”์•ฝ + ๊ฐœ์ธ์ ์œผ๋กœ ์ฐพ์•˜๋˜ ๋ ˆํผ๋Ÿฐ์Šค + ๊ทธ๋ฐ–์— ์ž๋ฃŒ๋“ค์„ ๋ชจ์•„์„œ ์ž‘์„ฑํ•œ ๊ธ€์ž…๋‹ˆ๋‹ค. ์‚ฌ์šฉํ•˜๊ธฐ ์œ„ํ•ด ์›€์ง์ด๋Š”(์†Œ๋น„ํ•˜๋Š”) ์‹œ๊ฐ„์„ ์ค„์ธ๋‹ค. โ†’ ์ ‘๊ทผ์„ฑ ์ธํ„ฐ๋ ‰์…˜์€ ์ตœ์†Œํ•œ์˜ ๋…ธ๋ ฅ๋งŒ์œผ๋กœ ๋ถˆํŽธ์—†์ด ๊ฐ„๋‹จํ•˜๊ฒŒ ์ด๋ค„์ ธ์•ผ ํ•œ๋‹ค. ์‚ฌ์šฉ์ž๊ฐ€ ์ธํ„ฐ๋ž™ํ‹ฐ๋ธŒ ์š”์†Œ๋ฅผ ์‚ฌ์šฉํ•˜๋ ค๊ณ  ์›€์ง์ด๋Š” ๋ฐ ๋“œ๋Š” ์‹œ๊ฐ„์€, ์ธํ„ฐ๋ ‰์…˜์˜ ์ค‘์š”ํ•œ

0

ํ”„๋ก ํŠธ์—”๋“œ ๊ฐœ๋ฐœ์ž์—๊ฒŒ UX๋Š”? ์—ฐ๊ธฐ์— ๋ชฐ์ž…ํ•ด์„œ ๋‚˜์˜ค๋Š” ๋ฐฐ์šฐ๋“ค์˜ ์• ๋“œ๋ฆฝ

ํ”ผํ”Œ์›จ์–ด ์ฑ… ์ดˆ๋ฐ˜์— ์ด๋Ÿฐ๋‚ด์šฉ์ด ๋‚˜์˜จ๋‹ค. .. ์šฐ๋ฆฌ๊ฐ€ ์•„๋Š” ํ”„๋กœ์ ํŠธ ๋Œ€๋‹ค์ˆ˜์—์„œ ๊ทธ ์–ด๋–ค ๊ธฐ์ˆ ์ ์ธ ๋‚œ๊ด€๋ณด๋‹ค ์‚ฌํšŒ์ ์ธ ๋ณต์žก๋„๊ฐ€ ํ›จ์”ฌ ๋” ์ปธ๋‹ค๋Š” ์‚ฌ์‹ค์ด ๋ถ„๋ช…ํ•ด ์กŒ๋‹ค. ๊ทธ๋Ÿฌ๋ฉด์„œ, ๋ถˆ๊ฐ€ํ”ผํ•˜๊ฒŒ, ์šฐ๋ฆฌ๋Š” ์•„์ฃผ ์†์ƒํ•œ ๊ฒฐ๋ก ์— ๋„๋‹ฌํ–ˆ๋‹ค. ๋‹ค๋ถ„ํžˆ ์‚ฌํšŒํ•™์ด ๊ธฐ์ˆ ๋ณด๋‹ค ๋” ์ค‘์š”ํ•˜๋‹ค๋Š” ์‚ฌ์‹ค์„ ์˜ค๋žซ๋™์•ˆ ๋Š๋‚Œ์œผ๋กœ ์•Œ์•„์™”์œผ๋ฉด์„œ๋„ ์ •์ž‘ ์šฐ๋ฆฌ ์ค‘ ๋ˆ„๊ตฌ๋„ ๊ทธ๋ ‡๊ฒŒ ๊ด€๋ฆฌํ•˜๋ ค ์‹œ๋„ํ•˜์ง€ ์•Š๋Š”๋‹ค๋Š” ์‚ฌ

0

Airbnb - lottie - bodymovin ์›น์—์„œ ์‚ฌ์šฉํ•ด๋ณด๊ธฐ

airbnb ์•ฑ์„ ์“ฐ๋‹ค๋ณด๋ฉด ๊ณณ๊ณณ์—์„œ ๋‹ค์–‘ํ•œ ์• ๋‹ˆ๋ฉ”์ด์…˜์„ ๋ณผ ์ˆ˜ ์žˆ๋‹ค. ํ•œ ์„œ๋น„์Šค์— ์• ๋‹ˆ๋ฉ”์ด์…˜์ด ์žˆ์œผ๋ฉด ์žˆ์„์ˆ˜๋ก ์ž์—ฐ์Šค๋Ÿฌ์šด ์‚ฌ์šฉ์„ฑ ์œ ๋„, ์‚ฌ์šฉ์ž์˜ ๊ฐ์„ฑ์—๋„ ๋ฉ”์„ธ์ง€๋ฅผ ์ „ํ•  ์ˆ˜ ์žˆ๊ณ , ์„œ๋น„์Šค์˜ ๋ธŒ๋žœ๋“œ๊ฐ€ ๋” ๊ธฐ์–ต์— ์˜ค๋ž˜๋‚จ๊ณ  ๊ฐ•ํ•ด์ง„๋‹ค๊ณ  ์ƒ๊ฐํ•œ๋‹ค. ๋ชจ์…˜์„ ์ข‹์•„ํ•˜๋Š” ์„ฑํ–ฅ๊ณผ ๋ชจ์…˜์ด ์ค„ ์ˆ˜ ์žˆ๋Š” ์œ„์˜ ํŠน์ง•๋•Œ๋ฌธ์— ๊ณณ๊ณณ์— ๋ชจ์…˜์„ ๋„ฃ๋Š” ๊ฒƒ์„ ์ข‹์•„ํ•˜๋Š”๋ฐ, ๊ทธ๋Ÿฌ๋˜ ์ค‘ airbnb