๊ด€๋ฆฌ ๋ฉ”๋‰ด

๋ชฉ๋ก๋‹คํฌ๋ชจ๋“œUX (1)

UI Code Lab

๐ŸŒ‡ ๋‹คํฌ ๋ชจ๋“œ ์ „ํ™˜ ์‹œ, ๋ถ€๋“œ๋Ÿฝ๊ณ  ์™„์„ฑ๋„ ๋†’์€ ์›น UI ๋งŒ๋“ค๊ธฐ

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