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

๊ฐ•์˜/Framer

[๊ฐœ๋ฐœ์ž๊ฐ€ ์•Œ๋ ค์ฃผ๋Š” ํ”„๋ ˆ์ด๋จธ(Framer) #2] Stack ์ปดํฌ๋„ŒํŠธ ์™„๋ฒฝ์ •๋ฆฌ

1๊ฐ•์—์„œ๋Š” ํ”„๋ ˆ์ž„(Frame) ์ปดํฌ๋„ŒํŠธ์— ๋Œ€ํ•ด์„œ ๋‹ค๋ค„๋ดค์Šต๋‹ˆ๋‹ค. ํ”„๋ ˆ์ž„ ์ปดํฌ๋„ŒํŠธ ์ž์ฒด๋กœ๋„ ์ œ๊ณตํ•˜๊ณ  ์žˆ๋Š” ๊ธฐ๋Šฅ๋“ค์ด ์ •๋ง ๋งŽ๊ณ , ๋‹ค์–‘ํ•œ ๊ณณ์—์„œ ํ™œ์šฉํ•  ์ˆ˜ ์žˆ์Œ์„ ํ™•์ธํ–ˆ์Šต๋‹ˆ๋‹ค. ์ด๋ฒˆ ํฌ์ŠคํŒ…์—์„œ ์†Œ๊ฐœ๋“œ๋ฆด ์Šคํƒ(Stack) ์ปดํฌ๋„ŒํŠธ๋„ ์ •๋ง ์œ ์šฉํ•˜๊ฒŒ ์‚ฌ์šฉํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค. ์Šคํƒ(Stack) ? ์Šคํƒ ์ปดํฌ๋„ŒํŠธ๋ฅผ ํ™œ์šฉํ•˜๋ฉด ํ”„๋ ˆ์ž„์„ ์‚ฌ์šฉํ•˜์—ฌ ๋งค์šฐ ์œ ์—ฐํ•˜๊ณ  ์ž๋™์œผ๋กœ ๋ถ„์‚ฐ๋œ ๋ ˆ์ด์•„์›ƒ์„ ์‰ฝ๊ฒŒ ๋งŒ๋“ค ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค. ์„ค๋ช…์œผ๋กœ๋Š” ์ž˜ ์ดํ•ด๊ฐ€ ์•ˆ๋˜์‹œ์ฃ . CSS์˜ flex ์†์„ฑ์„ ํ™œ์šฉํ•ด์„œ ์ž๋™์œผ๋กœ ๊ฐ„๊ฒฉ์ด๋‚˜ ์œ„์น˜๋ฅผ ์กฐ์ •ํ•ด์ค๋‹ˆ๋‹ค. ์Šคํƒ ์ปดํฌ๋„ŒํŠธ๋Š” ํ”„๋ ˆ์ž„์„ ๊ธฐ๋ฐ˜์œผ๋กœํ•˜๋ฏ€๋กœ ๋ชจ๋“  ํ”„๋ ˆ์ž„ ์†์„ฑ์„ ์ง€์›ํ•ฉ๋‹ˆ๋‹ค! ์ข€ ๋” ์‰ฝ๊ฒŒ ์ดํ•ดํ•˜์‹œ๋ ค๋ฉด "ํ”„๋ ˆ์ž„์„ ์ข€ ๋” ๊ฐ„ํŽธํ•˜๊ฒŒ ๋ ˆ์ด์•„์›ƒ์„ ๊ตฌ์„ฑํ•˜๊ธฐ ์œ„ํ•ด์„œ ์Šคํƒ์ด ์กด์žฌํ•˜๋Š” ๊ตฌ๋‚˜" ๋ผ๊ณ  ์ƒ๊ฐํ•˜์‹œ๋ฉด ๋  ๊ฒƒ ๊ฐ™์Šต๋‹ˆ๋‹ค. ์Šคํƒ์— ํ”„..

2020.07.20 ๊ฒŒ์‹œ๋จ

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

๊ฐ•์˜/Framer

[๊ฐœ๋ฐœ์ž๊ฐ€ ์•Œ๋ ค์ฃผ๋Š” ํ”„๋ ˆ์ด๋จธ(Framer) #1-3] Frame ์ปดํฌ๋„ŒํŠธ ์™„๋ฒฝ์ •๋ฆฌ (Tap, Hover, Pan, Drag)

๊ฐœ๋ฐœ์ž๊ฐ€ ์•Œ๋ ค์ฃผ๋Š” ํ”„๋ ˆ์ด๋จธ ํ”„๋ ˆ์ž„(Frame) ์ปดํฌ๋„ŒํŠธ๋ฅผ ๋‹ค๋ฃจ๋Š” ๋งˆ์ง€๋ง‰ ํฌ์ŠคํŒ…์ž…๋‹ˆ๋‹ค. ์ฒซ ๋ฒˆ์งธ ๊ฐ•์˜์—์„œ๋Š” ์ปดํฌ๋„ŒํŠธ์˜ ์œ„์น˜๋‚˜ ํฌ๊ธฐ ๊ทธ๋ฆฌ๊ณ  ์‹œ๊ฐ์  ์š”์†Œ๋ฅผ ๋‹ค๋ฃจ๋Š” Layout๊ณผ Visual์— ๋Œ€ํ•ด์„œ ๋‹ค๋ค„๋ดค๊ณ , ๋‘ ๋ฒˆ์งธ ๊ฐ•์˜์—์„œ๋Š” ํ”„๋ ˆ์ž„์„ ๋™์ ์œผ๋กœ ๋ณ€ํ™˜์‹œ์ผœ์ฃผ๋Š” Transform, Animation, Transition, Variants ์†์„ฑ๋“ค์— ๋Œ€ํ•ด์„œ ์•Œ์•„๋ดค์—ˆ์Šต๋‹ˆ๋‹ค. ํ•ด๋‹น ๋ถ€๋ถ„์„ ์•ˆ ๋ณด์…จ๋‹ค๋ฉด ํ•œ๋ฒˆ ๋ณด๊ณ  ์˜ค์‹œ๋Š” ๊ฑธ ์ถ”์ฒœ๋“œ๋ฆด๊ฒŒ์š”! [๊ฐœ๋ฐœ์ž๊ฐ€ ์•Œ๋ ค์ฃผ๋Š” ํ”„๋ ˆ์ด๋จธ(Framer) #1-1] Frame ์ปดํฌ๋„ŒํŠธ ์™„๋ฒฝ์ •๋ฆฌ (Frame ์ •์˜, Layout, Visual) [๊ฐœ๋ฐœ์ž๊ฐ€ ์•Œ๋ ค์ฃผ๋Š” ํ”„๋ ˆ์ด๋จธ(Framer) #1-2] Frame ์ปดํฌ๋„ŒํŠธ ์™„๋ฒฝ์ •๋ฆฌ (Transform, Animation, Transition, Variant..

2020.07.19 ๊ฒŒ์‹œ๋จ

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

๊ฐ•์˜/Framer

[๊ฐœ๋ฐœ์ž๊ฐ€ ์•Œ๋ ค์ฃผ๋Š” ํ”„๋ ˆ์ด๋จธ(Framer) #1-2] Frame ์ปดํฌ๋„ŒํŠธ ์™„๋ฒฝ์ •๋ฆฌ (Transform, Animation, Transition, Variants)

์ด์ „ ํฌ์ŠคํŒ…์—์„œ๋Š” Frame ์ •์˜, Layout ๊ทธ๋ฆฌ๊ณ  Visual API์— ๊ด€๋ จํ•ด์„œ ๋‹ค๋ค„๋ดค์Šต๋‹ˆ๋‹ค. ์•„์ง ํ•ด๋‹น ํฌ์ŠคํŒ…์„ ์ฝ์ง€ ์•Š์œผ์…จ๋‹ค๋ฉด ํ”„๋ ˆ์ž„ ์ปดํฌ๋„ŒํŠธ ์™„๋ฒฝ์ •๋ฆฌ 1ํŽธ๋ถ€ํ„ฐ ๋ณด๊ณ  ์˜ค์‹œ๋Š” ๊ฒƒ์„ ์ถ”์ฒœ๋“œ๋ฆฝ๋‹ˆ๋‹ค. [๊ฐœ๋ฐœ์ž๊ฐ€ ์•Œ๋ ค์ฃผ๋Š” Framer #1-1] Frame ์ปดํฌ๋„ŒํŠธ ์™„๋ฒฝ์ •๋ฆฌ (Frame ์ •์˜, Layout, Visual) โœ๏ธ Frame์ด๋ž€? ๋ ˆ์ด์•„์›ƒ, ์Šคํƒ€์ผ, ์• ๋‹ˆ๋ฉ”์ด์…˜ ๋ฐ ์ด๋ฒคํŠธ๋ฅผ ์œ„ํ•œ ๊ธฐ๋ณธ ์ปจํ…Œ์ด๋„ˆ์ž…๋‹ˆ๋‹ค. ํ”„๋ ˆ์ž„ ์ปดํฌ๋„ŒํŠธ๋Š” ์ž‘์—…์„๋ณด๋‹ค ๋น ๋ฅด๊ฒŒ ์ˆ˜ํ–‰ ํ•  ์ˆ˜ ์žˆ๋„๋ก ๋‹ค์–‘ํ•œ ์˜ต์…˜๊ณผ ๊ธฐ๋ณธ๊ฐ’์„ ๊ฐ€์ง„ div์ž…๋‹ˆ๋‹ค. ํ”„๋ ˆ์ž„ webruden.tistory.com ๊ทธ๋Ÿผ 1ํŽธ์— ์ด์–ด์„œ ํ”„๋ ˆ์ž„ ์ปดํฌ๋„ŒํŠธ์˜ ๋™์ž‘๊ณผ ๊ด€๋ จ๋œ Transform, Animation, Transition, Variants ์†์„ฑ๋“ค์„ ์‚ดํŽด๋ณด๋„๋ก ํ•˜๊ฒ ์Šต๋‹ˆ..

2020.07.16 ๊ฒŒ์‹œ๋จ

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

๊ฐ•์˜/Framer

[๊ฐœ๋ฐœ์ž๊ฐ€ ์•Œ๋ ค์ฃผ๋Š” ํ”„๋ ˆ์ด๋จธ(Framer) #1-1] Frame ์ปดํฌ๋„ŒํŠธ ์™„๋ฒฝ์ •๋ฆฌ (Frame ์ •์˜, Layout, Visual)

โœ๏ธ Frame์ด๋ž€? ๋ ˆ์ด์•„์›ƒ, ์Šคํƒ€์ผ, ์• ๋‹ˆ๋ฉ”์ด์…˜ ๋ฐ ์ด๋ฒคํŠธ๋ฅผ ์œ„ํ•œ ๊ธฐ๋ณธ ์ปจํ…Œ์ด๋„ˆ์ž…๋‹ˆ๋‹ค. ํ”„๋ ˆ์ž„ ์ปดํฌ๋„ŒํŠธ๋Š” ์ž‘์—…์„๋ณด๋‹ค ๋น ๋ฅด๊ฒŒ ์ˆ˜ํ–‰ ํ•  ์ˆ˜ ์žˆ๋„๋ก ๋‹ค์–‘ํ•œ ์˜ต์…˜๊ณผ ๊ธฐ๋ณธ๊ฐ’์„ ๊ฐ€์ง„ div์ž…๋‹ˆ๋‹ค. ํ”„๋ ˆ์ž„ ์ปดํฌ๋„ŒํŠธ๋ฅผ ์‚ฌ์šฉํ•˜๋ฉด ์•„๋ž˜์˜ ํŠน์„ฑ์„ ์ด์šฉํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค. - ํฌ๊ธฐ์™€ ๋ ˆ์ด์•„์›ƒ์„ ์„ค์ •ํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค. - ์ˆ˜ํ‰, ์ˆ˜์ง ์ค‘์•™์ •๋ ฌ์„ ์„ค์ •ํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค. - ์ƒ‰์ƒ์ด๋‚˜ ๋ฐฐ๊ฒฝ ์ด๋ฏธ์ง€๋ฅผ ๋ณ€๊ฒฝํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค. - ์ƒํƒœ์— ๋”ฐ๋ฅธ ์• ๋‹ˆ๋ฉ”์ด์…˜์„ ์ถ”๊ฐ€ํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค. - ๋ฐ์Šคํฌํ†ฑ ๋ฐ ๋ชจ๋ฐ”์ผ์—์„œ ์ž‘๋™ํ•˜๋Š” ํƒญ ์ด๋ฒคํŠธ๋ฅผ ์ถ”๊ฐ€ํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค. - ๋“œ๋ž˜๊ทธ์™€ ๊ฐ™์€ ์ œ์Šค์ฒ˜๋ฅผ ๊ตฌํ˜„ํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค. - ํŒฌ๊ณผ ๊ฐ™์€ ๊ณ ๊ธ‰ ์ œ์Šค์ฒ˜์— ๋ฐ˜์‘ํ•˜๋„๋ก ํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค. โš™๏ธ ํŠน์ง• Performance ์• ๋‹ˆ๋ฉ”์ด์…˜์—์„œ ์ตœ๊ณ ์˜ ์„ฑ๋Šฅ์„ ์–ป์œผ๋ ค๋ฉด GPU ๊ฐ€์†์„ ํ™œ์šฉํ•˜์„ธ์š”...

2020.07.13 ๊ฒŒ์‹œ๋จ

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

๊ฐ•์˜/Framer

[์˜ˆ์ œ๋ฅผ ํ†ตํ•ด ํ•™์Šตํ•˜๋Š” ํ”„๋ ˆ์ด๋จธ(Framer) #1] ํŽ˜์ด์ง€ ํˆด์„ ํ™œ์šฉํ•œ ์Šค์™€์ดํ”„ ๊ธฐ๋Šฅ ๊ตฌํ˜„ (Page Interactions)

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

2020.07.10 ๊ฒŒ์‹œ๋จ

728x90
๋ฐ˜์‘ํ˜•