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

๊ฐ•์˜/Framer

[๊ฐœ๋ฐœ์ž๊ฐ€ ์•Œ๋ ค์ฃผ๋Š” ํ”„๋ ˆ์ด๋จธ(Framer)] ์˜ค๋ฒ„๋ผ์ด๋“œ(Override) ๊ฐœ๋…์ •๋ฆฌ

์ด์ „ ํฌ์ŠคํŒ…๋“ค์€ ํ”„๋ ˆ์ด๋จธ(Framer) ํˆด์„ ์‚ฌ์šฉํ•ด์„œ ์›Œ๋ฐ์—…์œผ๋กœ ๋ช‡ ๊ฐ€์ง€ ์˜ˆ์ œ๋“ค์„ ๋‹ค๋ค˜์Šต๋‹ˆ๋‹ค. ํ•˜์ง€๋งŒ, ๋ถ„๋ช… ์ €๋ณด๋‹ค๋Š” ์œ ๋Šฅํ•œ ๋””์ž์ด๋„ˆ ๋ถ„๋“ค๊ป˜์„œ ํ•ด๋‹น ํˆด์— ๋Œ€ํ•œ ์ดํ•ด๋„๊ฐ€ ํ›จ์”ฌ ๋†’์„ ๊ฒƒ์ด๊ณ , ์‹ฌ์ง€์–ด ๋” ๋‹ค์–‘ํ•œ ์ธํ„ฐ๋ž™ํ‹ฐ๋ธŒํ•œ ๋ชจ์…˜๋“ค์„ ๊ตฌํ˜„ํ•  ์ˆ˜ ์žˆ์„ ๊ฒƒ์ž…๋‹ˆ๋‹ค. ํ•˜์ง€๋งŒ ์˜ค๋Š˜ ํฌ์ŠคํŒ…์—์„œ ๋‹ค๋ฃฐ ์ฃผ์ œ๋Š” ์กฐ๊ธˆ ๋‹ค๋ฅด๋‹ค๊ณ  ์ƒ๊ฐํ•ฉ๋‹ˆ๋‹ค. ์˜ค๋Š˜ ๋‹ค๋ฃฐ ์ฃผ์ œ๋Š” ์˜ค๋ฒ„๋ผ์ด๋“œ(Override)์ž…๋‹ˆ๋‹ค. ์ด๋ฒˆ ํฌ์ŠคํŒ…์„ ์‹œ์ž‘์œผ๋กœ ์˜ค๋ฒ„๋ผ์ด๋“œ ์ •์˜๋ถ€ํ„ฐ ์‹œ์ž‘ํ•ด์„œ ๋‹ค์–‘ํ•œ ์˜ˆ์ œ๋“ค์„ ๋‹ค๋ค„๋ณผ ์˜ˆ์ •์ž…๋‹ˆ๋‹ค. ์–ด๋ ต์ง€ ์•Š๊ฒŒ ์ตœ๋Œ€ํ•œ ํ’€์–ด์„œ ์„ค๋ช…ํ•  ๊ฒƒ์ด๋‹ˆ ํฌ๊ธฐํ•˜์ง€ ๋งˆ์‹œ๊ณ  ๋๊นŒ์ง€ ๋”ฐ๋ผ์˜ค์…”์„œ ์˜ค๋ฒ„๋ผ์ด๋“œ์— ๋Œ€ํ•ด์„œ ์ œ๋Œ€๋กœ ์•Œ๊ณ  ๋„˜์–ด๊ฐ‘์‹œ๋‹ค! ์˜ค๋ฒ„๋ผ์ด๋“œ(Override)๋ž€ ๋ฌด์—‡์ธ๊ฐ€? ์˜ค๋ฒ„๋ผ์ด๋“œ๋ฅผ ์ •๋ณตํ•˜๊ธฐ ์œ„ํ•ด์„œ ์šฐ์„  ์˜ค๋ฒ„๋ผ์ด๋“œ์˜ ๊ฐœ๋…์„ ์•Œ์•„์•ผ๋˜๊ฒ ์ฃ ? ์ฝ”๋“œ ์žฌ์ •์˜๋Š” ํ”„๋กœํ† ํƒ€์ž…์„..

2020.07.22 ๊ฒŒ์‹œ๋จ

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

๊ฐ•์˜/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) #3-4] Overlay Effect๋ฅผ ํ™œ์šฉํ•œ UI ๊ตฌํ˜„ (Side Menu)

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

2020.07.17 ๊ฒŒ์‹œ๋จ

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

๊ฐ•์˜/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) #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 ๊ฒŒ์‹œ๋จ

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

๊ฐœ๋ฐœ/Framer

Framer์™€ Framer X์˜ ์ฐจ์ด์  (Differences between Framer and Framer X)

Framer X? Framer Web์€ Framer X์˜ ํ›„์† ๋ฒ„์ „์ด ์•„๋‹ˆ๋ผ ๋ธŒ๋ผ์šฐ์ €์—์„œ ํŽธํ•˜๊ฒŒ ์‚ฌ์šฉํ•  ์ˆ˜ ์žˆ๋Š” ๋˜ ๋‹ค๋ฅธ ๋ธŒ๋ผ์šฐ์ € ๊ธฐ๋ฐ˜ ์›น ์• ํ”Œ๋ฆฌ์ผ€์ด์…˜์ž…๋‹ˆ๋‹ค. macOS ๋ฐ์Šคํฌํƒ‘ ์• ํ”Œ๋ฆฌ์ผ€์ด์…˜์ธ Framer X๋Š” Framer Web๊ณผ ๊ฐ™์ด ๊ณต์กดํ•˜๊ณ  ์žˆ์œผ๋ฉฐ Pro ๋˜๋Š” Enterprise ์š”๊ธˆ์ œ์—์„œ ์‚ฌ์šฉํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค. ๐Ÿ“ฃ Framer X์—์„œ Framer๋กœ ์ด๋ฆ„๋งŒ ๋ณ€๊ฒฝ๋˜์—ˆ์„ ๋ฟ ๋ชจ๋“  ๋ถ€๋ถ„์€ ๊ธฐ์กด๊ณผ ๋™์ผํ•ฉ๋‹ˆ๋‹ค. Framer Web and Framer Desktop App ๊ทธ๋Ÿฌ๋ฏ€๋กœ ๊ธฐ์กด Framer X๋Š” Framer๋กœ ์ด๋ฆ„์ด ๋ฐ”๋€Œ์—ˆ๊ณ , ์ด์ œ ๋ธŒ๋ผ์šฐ์ € ๊ธฐ๋ฐ˜ ์›น ์• ํ”Œ๋ฆฌ์ผ€์ด์…˜ Framer Web๊ณผ ๋ฐ์Šคํฌํƒ‘ ์• ํ”Œ๋ฆฌ์ผ€์ด์…˜ Framer App (๊ธฐ์กด Framer X)์œผ๋กœ ๊ตฌ์„ฑ๋˜์–ด ์žˆ๋‹ค๊ณ  ๋ณด์‹œ๋ฉด ๋ฉ๋‹ˆ๋‹ค. Framer ๋ฐ์Šคํฌ..

2020.07.14 ๊ฒŒ์‹œ๋จ

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

๊ฐ•์˜/Framer

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

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

2020.07.13 ๊ฒŒ์‹œ๋จ

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

๊ฐ•์˜/Framer

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

์ด๋ฒˆ ํฌ์ŠคํŒ…์—์„œ๋Š” ํ”„๋ ˆ์ด๋จธ์—์„œ ์ œ๊ณตํ•˜๋Š” Overlay Effect๋ฅผ ํ™œ์šฉํ•ด์„œ ์•„๋ž˜์˜ UI ์š”์†Œ๋“ค์„ ๊ตฌํ˜„ํ•ด๋ณด๊ฒ ์Šต๋‹ˆ๋‹ค. ๊ฐœ์ธ์ ์œผ๋กœ ์ผ์ƒ์—์„œ ๊ฐ€์žฅ ๋งŽ์ด ์ ‘ํ•  ์ˆ˜ ์žˆ๋Š” UI ์š”์†Œ๋“ค์ธ๋ฐ ๋ฐ”๋กœ Bottom Sheet, Draggable Sheet, Modal Box, Side Menu์ž…๋‹ˆ๋‹ค. ๋‹จ์–ด๋กœ ์„ค๋ช…๋“œ๋ ค์„œ ์–ด๋–ค ๊ฑด์ง€ ๊ฐ์ด ์•ˆ ์˜ค์‹ค ์ˆ˜๋„ ์žˆ์œผ๋‹ˆ ์•„๋ž˜ ์˜ˆ์‹œ๋ฅผ ๊ฐ™์ด ๋ณผ๊นŒ์š”? ๐Ÿ“‘ Overlay Effect ์˜ˆ์‹œ ์ด์ฒ˜๋Ÿผ ์• ํ”Œ๋ฆฌ์ผ€์ด์…˜์—์„œ ๊ฑฐ์˜ ํ•„์ˆ˜์ ์ธ UI ์š”์†Œ๋ผ๊ณ  ๋ด๋„ ๋ฌด๋ฐฉํ•œ ๊ธฐ๋Šฅ๋“ค์ž…๋‹ˆ๋‹ค. Bottom Sheet UI ์š”์†Œ๋ถ€ํ„ฐ ์ฐจ๊ทผ ์ฐจ๊ทผ ๋‹ค๋ค„๋ณด๋„๋ก ํ•˜๊ฒ ์Šต๋‹ˆ๋‹ค. Bottom Sheet ๋จธํ…Œ๋ฆฌ์–ผ ๋””์ž์ธ์—๋„ ๊ธฐ๋ณธ ์š”์†Œ๋กœ ๊ฐ€์ง€๊ณ  ์žˆ์„ ๋งŒํผ ๋Œ€์ค‘์ ์ธ UI ์š”์†Œ์ž…๋‹ˆ๋‹ค. Material Design Build beautiful, u..

2020.07.13 ๊ฒŒ์‹œ๋จ

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

๊ฐ•์˜/Framer

[์˜ˆ์ œ๋ฅผ ํ†ตํ•ด ํ•™์Šตํ•˜๋Š” ํ”„๋ ˆ์ด๋จธ(Framer) #2] Magic Motion์„ ํ™œ์šฉํ•œ ํƒญ๋ฉ”๋‰ด ๊ตฌํ˜„ (Animated Tabs)

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

2020.07.13 ๊ฒŒ์‹œ๋จ

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

๊ฐ•์˜/Framer

[๊ฐœ๋ฐœ์ž๊ฐ€ ์•Œ๋ ค์ฃผ๋Š” ํ”„๋ ˆ์ด๋จธ(Framer) #0] Framer ์‰ฝ๊ฒŒ ์‹œ์ž‘ํ•ด๋ณด์ž.

๐Ÿ“‘ Framer๋ž€? Framer๋Š” ์• ๋‹ˆ๋ฉ”์ด์…˜, ํ„ฐ์น˜ ๊ธฐ๋ฐ˜ ์ œ์Šค์ฒ˜ ๋ฐ ์Šคํฌ๋กค, ํŽ˜์ด์ง• ๋ฐ ์ธํ„ฐํŽ˜์ด์Šค ํ๋ฆ„์„ ์œ„ํ•œ ์—ฌ๋Ÿฌ ์žฌ์‚ฌ์šฉ ์ปดํฌ๋„ŒํŠธ๋ฅผ ์ œ๊ณตํ•˜๋Š” ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ์ž…๋‹ˆ๋‹ค. ์ฒ˜์Œ ์ ‘ํ•˜์‹œ๋Š” ๋ถ„๋“ค๋„ ์–ด๋ ค์›€ ์—†์ด ์„œ๋น„์Šค ์•„์ด๋””์–ด๋“ค์„ ๊ตฌํ˜„ํ•  ์ˆ˜ ์žˆ๋„๋ก ์„ค๊ณ„๋˜์–ด ์žˆ์Šต๋‹ˆ๋‹ค. Framer๋Š” ์•„๋ž˜์˜ ๊ธฐ์ˆ  ์Šคํƒ์œผ๋กœ ๊ตฌ์„ฑ๋˜์–ด ์žˆ์Šต๋‹ˆ๋‹ค. ๐Ÿ’ป ๊ธฐ์ˆ  ์Šคํƒ React ์‚ฌ์šฉ์ž ์ธํ„ฐํŽ˜์ด์Šค๋ฅผ ๋งŒ๋“ค๊ธฐ ์œ„ํ•œ JavaScript ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ์ž…๋‹ˆ๋‹ค. Jsx JavaScript์—์„œ HTML๊ณผ ๊ฐ™์€ ๊ตฌ๋ฌธ์„ ์ง์ ‘ ์‚ฌ์šฉํ•˜์—ฌ ์นœ์ˆ™ํ•œ ๋ฐฉ์‹์œผ๋กœ ๋ฌธ์„œ ๊ตฌ์กฐ๋ฅผ ํ‘œํ˜„ํ•  ์ˆ˜ ์žˆ๋Š” ๋ฐฉ๋ฒ•์ž…๋‹ˆ๋‹ค. Typescript TypeScript๋Š” Javascript์˜ ์ƒ์œ„ ํ™•์žฅ ๊ฐœ๋… ์–ธ์–ด์ž…๋‹ˆ๋‹ค. ๊ทธ๋ž˜์„œ ES5์˜ ๋ฌธ๋ฒ•์„ ๊ทธ๋Œ€๋กœ ์‚ฌ์šฉํ•  ์ˆ˜ ์žˆ๊ณ , ES6์—์„œ ์ƒˆ๋กญ๊ฒŒ ์ถ”๊ฐ€๋œ ๊ธฐ๋Šฅ๋“ค์„ ๊ธฐ์กด์˜ ์ž๋ฐ”..

2020.07.10 ๊ฒŒ์‹œ๋จ

728x90
๋ฐ˜์‘ํ˜•