728x90
๋ฐ˜์‘ํ˜•
 ํฌ์ŠคํŒ… ์ธ๋„ค์ผ ์ด๋ฏธ์ง€

๊ฐ•์˜/Framer

[์˜ˆ์ œ๋ฅผ ํ†ตํ•ด ํ•™์Šตํ•˜๋Š” ํ”„๋ ˆ์ด๋จธ(Framer) #3-4] Overlay Effect๋ฅผ ํ™œ์šฉํ•œ UI ๊ตฌํ˜„ (Side Menu)

์‚ฌ์ด๋“œ ๋ฉ”๋‰ด(Side Menu)? Overlay Effect๋ฅผ ํ™œ์šฉํ•œ UI ๊ตฌํ˜„ ๋งˆ์ง€๋ง‰ ํฌ์ŠคํŒ…์ž…๋‹ˆ๋‹ค! ์ด๋ฒˆ์— ๋‹ค๋ฃฐ ์˜ˆ์ œ๋Š” ์‚ฌ์ด๋“œ ๋ฉ”๋‰ด์ž…๋‹ˆ๋‹ค. ์‚ฌ์ด๋“œ ๋ฉ”๋‰ด UI๋Š” ์•ฑ ๋ฟ๋งŒ ์•„๋‹ˆ๋ผ ์›น์—์„œ๋„ ์ •๋ง ๋งŽ์ด ์‚ฌ์šฉ๋˜๋Š” UI ์š”์†Œ ์ค‘ ํ•˜๋‚˜ ์ž…๋‹ˆ๋‹ค. ์•„๋ž˜์ฒ˜๋Ÿผ ๋ฒ„ํŠผ์„ ๋ˆŒ๋ €์„ ๋•Œ ํŠน์ • ๋ฐ•์Šค๊ฐ€ ํ™”๋ฉด์— ๋ชจ์…˜๊ณผ ํ•จ๊ป˜ ์ขŒ์—์„œ ์šฐ, ์šฐ์—์„œ ์ขŒ๋กœ ์—ด๋ฆฌ๋Š” ๋ฐฉ์‹์ž…๋‹ˆ๋‹ค. ํ”„๋ ˆ์ด๋จธ(Framer)๋Š” ์‚ฌ์ด๋“œ ๋ฉ”๋‰ด์—์„œ ์‚ฌ์šฉ๋˜๊ณ  ์žˆ๋Š” ๋ชจ์…˜(Motion)์„ ๊ต‰์žฅํžˆ ์‰ฝ๊ฒŒ ๊ตฌํ˜„ํ•  ์ˆ˜ ์žˆ๊ฒŒ ์ œ๊ณตํ•˜๊ณ  ์žˆ์Šต๋‹ˆ๋‹ค. ์‚ฌ์ด๋“œ ๋ฉ”๋‰ด๋Š” ๋Œ€๋ถ€๋ถ„ ๋ชจ๋ฐ”์ผ ์• ํ”Œ๋ฆฌ์ผ€์ด์…˜์— ๊ธฐ๋ณธ์ ์œผ๋กœ ๋‹ค ๋“ค์–ด์žˆ์„๊ฑฐ๋ผ ์ƒ๊ฐํ•ฉ๋‹ˆ๋‹ค. ์ œ ๋ธ”๋กœ๊ทธ์—๋„ ๊ธฐ๋ณธ์ ์œผ๋กœ ์ขŒ์ธก์— ํƒ‘์žฌ๋˜์–ด ์žˆ์ฃ . ์˜ค๋Š˜์€ ๋Œ€๋ถ€๋ถ„์˜ ์• ํ”Œ๋ฆฌ์ผ€์ด์…˜์— ์กด์žฌํ•˜๊ณ  ์žˆ๋Š” ์ด ์‚ฌ์ด๋“œ ๋ฉ”๋‰ด๋ฅผ ๋‹ค๋ค„๋ณด๋„๋ก ํ•˜๊ฒ ์Šต๋‹ˆ๋‹ค. โ—๏ธ ์‹œ์ž‘ํ•˜๊ธฐ ์ „์— ํ˜น์‹œ ์•„์ง F..

2020.07.17 ๊ฒŒ์‹œ๋จ

 ํฌ์ŠคํŒ… ์ธ๋„ค์ผ ์ด๋ฏธ์ง€

๊ฐ•์˜/Framer

[์˜ˆ์ œ๋ฅผ ํ†ตํ•ด ํ•™์Šตํ•˜๋Š” ํ”„๋ ˆ์ด๋จธ(Framer) #3-3] Overlay Effect๋ฅผ ํ™œ์šฉํ•œ UI ๊ตฌํ˜„3 (Modal Box)

Modal Box? Modal Box๋Š” ์•ฑ ๋ฟ๋งŒ ์•„๋‹ˆ๋ผ ์›น์—์„œ๋„ ์ •๋ง ๋งŽ์ด ์‚ฌ์šฉ๋˜๋Š” UI ์š”์†Œ ์ค‘ ํ•˜๋‚˜ ์ž…๋‹ˆ๋‹ค. ์•„๋ž˜์ฒ˜๋Ÿผ ๋ฒ„ํŠผ์„ ๋ˆŒ๋ €์„ ๋•Œ ํŠน์ • ๋ฐ•์Šค๊ฐ€ ํ™”๋ฉด์— ๋ชจ์…˜๊ณผ ํ•จ๊ป˜ ๋…ธ์ถœ๋˜๋Š”๊ฒŒ ๋ฐ”๋กœ Modal Box์ž…๋‹ˆ๋‹ค. ํ”„๋ ˆ์ด๋จธ(Framer)๋Š” Modal์—์„œ ์‚ฌ์šฉ๋˜๊ณ  ์žˆ๋Š” ๋ชจ์…˜(Motion)์„ ๊ต‰์žฅํžˆ ์‰ฝ๊ฒŒ ๊ตฌํ˜„ํ•  ์ˆ˜ ์žˆ๊ฒŒ ์ œ๊ณตํ•˜๊ณ  ์žˆ์Šต๋‹ˆ๋‹ค. Modal Box๋Š” ๊ฐ์ข… ํ”„๋ ˆ์ž„์›Œํฌ์—์„œ ๋ชจ๋‘ ์‚ฌ์šฉํ•˜๊ณ  ์žˆ๋Š” UI ์š”์†Œ์ž…๋‹ˆ๋‹ค. Bootstrap์ด๋‚˜ Ant Design ๋ชจ๋‘ ์—„์ฒญ ์œ ๋ช…ํ•œ ์›น ๊ฐœ๋ฐœ ํ”„๋ ˆ์ž„์›Œํฌ์ธ๋ฐ ๋ชจ๋‘ ๊ตฌํ˜„๋˜์–ด ์žˆ์ฃ . ๋ฌผ๋ก  ์ด์™ธ์— Material Design ๋“ฑ ์ •๋ง ๊ฐ์ข… ํ”„๋ ˆ์ž„์›Œํฌ์—์„œ ๋ชจ๋‘ ์‚ฌ์šฉํ•˜๊ณ  ์žˆ๋‹ค๊ณ  ์ƒ๊ฐํ•˜์…”๋„ ๋ฌด๋ฐฉํ•ฉ๋‹ˆ๋‹ค. Modal Use Bootstrapโ€™s JavaScript modal plugin..

2020.07.16 ๊ฒŒ์‹œ๋จ

 ํฌ์ŠคํŒ… ์ธ๋„ค์ผ ์ด๋ฏธ์ง€

๊ฐ•์˜/Framer

[์˜ˆ์ œ๋ฅผ ํ†ตํ•ด ํ•™์Šตํ•˜๋Š” ํ”„๋ ˆ์ด๋จธ(Framer) #3-2] Overlay Effect๋ฅผ ํ™œ์šฉํ•œ Draggable Sheet UI ๊ตฌํ˜„

Draggable Sheet? ์• ํ”Œ๋ฆฌ์ผ€์ด์…˜์„ ์‚ฌ์šฉํ•˜๋ฉด์„œ ์œ„์—์„œ ์•„๋ž˜๋กœ ๋Œ์–ด๋‚ด๋ฆฌ๊ฑฐ๋‚˜ ์•„๋ž˜์—์„œ ์œ„๋กœ ๋Œ์–ด์˜ฌ๋ฆฌ๋Š” UI๋ฅผ ์ ‘ํ•ด๋ณธ ์ ์ด ์žˆ์„ ํ…๋ฐ์š”. ์ •๋ง ๋Œ€๋ถ€๋ถ„ ์• ํ”Œ๋ฆฌ์ผ€์ด์…˜์—์„œ ์ด ๋ชจ์…˜์„ ์‚ฌ์šฉํ•œ๋‹ค๊ณ  ํ•ด๋„ ๋ฌด๋ฐฉํ•  ์ •๋„๋กœ ๊ต‰์žฅํžˆ ๋งŽ์ด ์‚ฌ์šฉ๋˜๋Š” ๊ธฐ๋Šฅ ์ค‘ ํ•˜๋‚˜์ž…๋‹ˆ๋‹ค. ํ”„๋ ˆ์ด๋จธ๋ฅผ ํ™œ์šฉํ•˜๋ฉด ์ •๋ง ๊ฐ„๋‹จํ•˜๊ฒŒ Draggable Sheet UI๋ฅผ ๊ตฌํ˜„ํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค. โ—๏ธ ์‹œ์ž‘ํ•˜๊ธฐ ์ „์— ํ˜น์‹œ ์•„์ง Framer ๊ณ„์ •์„ ๊ฐ€์ž…ํ•˜์ง€ ์•Š์œผ์…จ๊ฑฐ๋‚˜ ํ”„๋ ˆ์ด๋จธ ์‚ฌ์šฉ๋ฐฉ๋ฒ•์„ ๋ชจ๋ฅด์‹œ๋Š” ๋ถ„์€ ์•„๋ž˜๋ฅผ ์ฐธ๊ณ ํ•ด์„œ ๊ณ„์ • ๋“ฑ๋ก์„ ํ•˜๊ณ  Framer ํ”„๋กœ์ ํŠธ ์ƒ์„ฑ๊นŒ์ง€ ํ•˜์‹œ๊ธฐ ๋ฐ”๋ž๋‹ˆ๋‹ค. [๊ฐœ๋ฐœ์ž๊ฐ€ ์•Œ๋ ค์ฃผ๋Š” Framer X #0] ํ”„๋ ˆ์ด๋จธ ์‰ฝ๊ฒŒ ์‹œ์ž‘ํ•ด๋ณด์ž. ๐Ÿ“‘ ํ”„๋ ˆ์ด๋จธ๋ž€? ํ”„๋ ˆ์ด๋จธ๋Š” ์• ๋‹ˆ๋ฉ”์ด์…˜, ํ„ฐ์น˜ ๊ธฐ๋ฐ˜ ์ œ์Šค์ฒ˜ ๋ฐ ์Šคํฌ๋กค, ํŽ˜์ด์ง• ๋ฐ ์ธํ„ฐํŽ˜์ด์Šค ํ๋ฆ„์„ ์œ„ํ•œ ์—ฌ๋Ÿฌ ์žฌ..

2020.07.15 ๊ฒŒ์‹œ๋จ

728x90
๋ฐ˜์‘ํ˜•