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

๋‚จ์–‘์ฃผ๊ฐœ๋ฐœ์ž

ยท

2020. 7. 10. 16:37

728x90
๋ฐ˜์‘ํ˜•

๐Ÿ“‘ Framer๋ž€?

Framer๋Š” ์• ๋‹ˆ๋ฉ”์ด์…˜, ํ„ฐ์น˜ ๊ธฐ๋ฐ˜ ์ œ์Šค์ฒ˜ ๋ฐ ์Šคํฌ๋กค, ํŽ˜์ด์ง• ๋ฐ ์ธํ„ฐํŽ˜์ด์Šค ํ๋ฆ„์„ ์œ„ํ•œ ์—ฌ๋Ÿฌ ์žฌ์‚ฌ์šฉ ์ปดํฌ๋„ŒํŠธ๋ฅผ ์ œ๊ณตํ•˜๋Š” ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ์ž…๋‹ˆ๋‹ค. ์ฒ˜์Œ ์ ‘ํ•˜์‹œ๋Š” ๋ถ„๋“ค๋„ ์–ด๋ ค์›€ ์—†์ด ์„œ๋น„์Šค ์•„์ด๋””์–ด๋“ค์„ ๊ตฌํ˜„ํ•  ์ˆ˜ ์žˆ๋„๋ก ์„ค๊ณ„๋˜์–ด ์žˆ์Šต๋‹ˆ๋‹ค. Framer๋Š” ์•„๋ž˜์˜ ๊ธฐ์ˆ  ์Šคํƒ์œผ๋กœ ๊ตฌ์„ฑ๋˜์–ด ์žˆ์Šต๋‹ˆ๋‹ค.

๐Ÿ’ป ๊ธฐ์ˆ  ์Šคํƒ

React

์‚ฌ์šฉ์ž ์ธํ„ฐํŽ˜์ด์Šค๋ฅผ ๋งŒ๋“ค๊ธฐ ์œ„ํ•œ JavaScript ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ์ž…๋‹ˆ๋‹ค.

Jsx

JavaScript์—์„œ HTML๊ณผ ๊ฐ™์€ ๊ตฌ๋ฌธ์„ ์ง์ ‘ ์‚ฌ์šฉํ•˜์—ฌ ์นœ์ˆ™ํ•œ ๋ฐฉ์‹์œผ๋กœ ๋ฌธ์„œ ๊ตฌ์กฐ๋ฅผ ํ‘œํ˜„ํ•  ์ˆ˜ ์žˆ๋Š” ๋ฐฉ๋ฒ•์ž…๋‹ˆ๋‹ค.

Typescript

TypeScript๋Š” Javascript์˜ ์ƒ์œ„ ํ™•์žฅ ๊ฐœ๋… ์–ธ์–ด์ž…๋‹ˆ๋‹ค. ๊ทธ๋ž˜์„œ ES5์˜ ๋ฌธ๋ฒ•์„ ๊ทธ๋Œ€๋กœ ์‚ฌ์šฉํ•  ์ˆ˜ ์žˆ๊ณ , ES6์—์„œ ์ƒˆ๋กญ๊ฒŒ ์ถ”๊ฐ€๋œ ๊ธฐ๋Šฅ๋“ค์„ ๊ธฐ์กด์˜ ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ ์—”์ง„์—์„œ ์‹คํ–‰ํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.

 

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

๐Ÿƒ ์‹œ์ž‘ํ•˜๊ธฐ

์ž Framer๋ฅผ ํ•œ๋ฒˆ ์‹œ์ž‘ํ•ด๋ด…์‹œ๋‹ค! ์šฐ์„  ์‹œ์ž‘ํ•˜๋ ค๋ฉด Framer๋ฅผ ๊ฐ€์ž…ํ•ด์•ผ๊ฒ ์ฃ ?

Framer ํšŒ์›๊ฐ€์ž…์„ ํ•˜๋„๋ก ํ•˜๊ฒ ์Šต๋‹ˆ๋‹ค.

ํšŒ์›๊ฐ€์ž…

 

Framer: The prototyping tool for teams

It’s prototyping made simple—no code required, browser-based, and free for everyone. High-fidelity in half the time.

www.framer.com

์•„๋ž˜ ์ด๋ฏธ์ง€์ฒ˜๋Ÿผ ๊ฐ€์šด๋ฐ Sign up for free๊ฐ€ ์žˆ์ฃ ?

 

Framer ๊ณต์‹ํ™ˆํŽ˜์ด์ง€

 

๊ตฌ๊ธ€์„ ํ†ตํ•ด ์†Œ์…œ ๋กœ๊ทธ์ธ ํšŒ์›๊ฐ€์ž…์„ ํ•˜์…”๋„ ๋˜๊ณ  ์ €์ฒ˜๋Ÿผ ์•„๋ž˜ ๊ฐ€์ž…์ •๋ณด๋ฅผ ๊ธฐ์ž…ํ•˜๊ณ  ์ด๋ฉ”์ผ๋กœ ํšŒ์›๊ฐ€์ž…์„ ํ•˜์…”๋„ ๋ฉ๋‹ˆ๋‹ค. ์ €๋Š” ์ด๋ฉ”์ผ๋กœ ํšŒ์›๊ฐ€์ž…์„ ํ•˜๋„๋ก ํ•˜๊ฒ ์Šต๋‹ˆ๋‹ค.

 

ํšŒ์›๊ฐ€์ž…

 

์ด๋ฉ”์ผ๋กœ ํšŒ์›๊ฐ€์ž…์„ ํ•˜๋ฉด ์•„๋ž˜์™€ ๊ฐ™์ด ์ด๋ฉ”์ผ ์ธ์ฆ ๋ฉ”์ผ์ด ์˜ค๊ฒŒ ๋ฉ๋‹ˆ๋‹ค. ์ด๋ฉ”์ผ์„ ํ™•์ธํ•˜์—ฌ ํ•ด๋‹น ์ด๋ฉ”์ผ์˜ Launch Framer Web์„ ๋ˆ„๋ฅด๊ณ  ํ”„๋ ˆ์ด๋จธ๋ฅผ ์‹คํ–‰ํ•ด์ฃผ์„ธ์š”!

 

ํ”„๋ ˆ์ด๋จธ ์ด๋ฉ”์ผ ํšŒ์›๊ฐ€์ž…

 

Launch Framer Web ๋ฒ„ํŠผ์„ ํ†ตํ•ด Framer๋กœ ๋Œ์•„์˜ค๋ฉด ์ด๋ ‡๊ฒŒ ๋Œ€์‹œ๋ณด๋“œ์—์„œ ํ”„๋กœ์ ํŠธ๋ฅผ ์„ค์ •ํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.

 

ํ”„๋ ˆ์ด๋จธ ๊ตฌ๋™ํ™”๋ฉด

 

ํ”„๋กœ์ ํŠธ ์ƒ์„ฑ

์ขŒ์ธก ์‚ฌ์ด๋“œ ํŒจ๋„์—์„œ Draft ์˜†์— ํ”Œ๋Ÿฌ์Šค ๋ฒ„ํŠผ์„ ๋ˆ„๋ฅด์‹œ๋ฉด ์ƒˆ๋กœ์šด ํ”„๋กœ์ ํŠธ๋ฅผ ์ƒ์„ฑํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค. ํ”„๋กœ์ ํŠธ๋ฅผ ์ƒ์„ฑํ•ด๋ด…์‹œ๋‹ค.

 

ํ”„๋ ˆ์ด๋จธ ๋Œ€์‹œ๋ณด๋“œ

 

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

 

์ƒ๋‹จ์˜ Insert๋ฅผ ๋ˆ„๋ฅด๋ฉด ์—ฌ๋Ÿฌ ๊ฐ€์ง€ ์ปดํฌ๋„ŒํŠธ, ํŒจํ‚ค์ง€, ์ธํ„ฐ๋ ‰์…˜ ๋“ฑ ๋‹ค์–‘ํ•œ ๊ธฐ๋Šฅ๋“ค์„ ์‚ฝ์ž…ํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค. ์ €ํฌ๋Š” ๋””๋ฐ”์ด์Šค ๋ ˆ์ด์–ด๋ฅผ ์‚ฝ์ž…ํ•˜๋„๋ก ํ•ด๋ณผ๊ฒŒ์š”.

๋””๋ฐ”์ด์Šค ๋ ˆ์ด์•„์›ƒ ์‚ฝ์ž…

์ƒ๋‹จ ์‚ฝ์ž… ๋ฒ„ํŠผ

์‚ฝ์ž… ๋ฒ„ํŠผ์„ ๋ˆ„๋ฅด๋ฉด ์›ํ•˜๋Š” ์•„์ดํ…œ์„ ๊ฒ€์ƒ‰ํ•˜๋Š” ๊ฒ€์ƒ‰์ฐฝ์ด ๋“ฑ์žฅํ•˜๋Š”๋ฐ ์ €ํฌ๋Š” ๋””๋ฐ”์ด์Šค ๋ ˆ์ด์–ด๋ฅผ ์ถ”๊ฐ€ํ•  ๊ฑฐ๋‹ˆ๊นŒ Explore์— Frames๋ฅผ ํด๋ฆญํ•ฉ๋‹ˆ๋‹ค.

๊ฒ€์ƒ‰์ฐฝ

Frames๋ฅผ ํด๋ฆญํ•˜๋ฉด ๋‹ค์–‘ํ•œ ๋””๋ฐ”์ด์Šค๋“ค์ด ์กด์žฌํ•˜๋Š”๋ฐ์š”. ์ €๋Š” ์•„์ดํฐ 11 ํ”„๋กœ๋ฅผ ๊ฐ€์ง€๊ณ  ์‹ถ์œผ๋‹ˆ๊นŒ ์•„์ดํฐ 11 ํ”„๋กœ ๋””๋ฐ”์ด์Šค๋ฅผ ์„ ํƒํ•  ๊ฒ๋‹ˆ๋‹ค. ์—ฌ๋Ÿฌ๋ถ„์€ ์—ฌ๋Ÿฌ๋ถ„์ด ํ”„๋กœํ† ํƒ€์ดํ•‘ํ•˜๋ ค๊ณ  ํ•˜์‹œ๋Š” ๋””๋ฐ”์ด์Šค ์ŠคํŽ™์œผ๋กœ ์„ ์ •ํ•˜์…”์„œ ์„ ํƒํ•˜์‹œ๋ฉด ๋  ๊ฒƒ ๊ฐ™์Šต๋‹ˆ๋‹ค.

๋””๋ฐ”์ด์Šค ๋ ˆ์ด์–ด ์„ ํƒํ™”๋ฉด

์ž! ๋””๋ฐ”์ด์Šค๊ฐ€ ์ƒ์„ฑ๋˜์—ˆ์Šต๋‹ˆ๋‹ค. ์ขŒ์ธก์„ ๋ณด๋ฉด ์„ ํƒํ•œ ๋””๋ฐ”์ด์Šค๊ฐ€ ๋ณด์ด๊ณ  ์ค‘์•™์—๋Š” ์ €ํฌ๊ฐ€ ์„ ํƒํ•œ ๋””๋ฐ”์ด์Šค์˜ ๋ ˆ์ด์–ด ์˜์—ญ์ž…๋‹ˆ๋‹ค. ๋ ˆ์ด์–ด ์šฐ์ธก์— ์ž‘์€ ๋ฏธ๋ฆฌ๋ณด๊ธฐ ํ™”๋ฉด์ด ์žˆ๋Š”๋ฐ ์ €ํฌ ๋ ˆ์ด์–ด์˜ ์‹ค์ œ ๊ตฌ๋™ ํ™”๋ฉด์„ ๋ฏธ๋ฆฌ๋ณด๊ธฐ๋กœ ๋ณด์—ฌ์ฃผ๋Š” ํŒจ๋„์ž…๋‹ˆ๋‹ค. (Framer Web ํผํฌ๋จผ์Šค๊ฐ€ ์ •๋ง ์ข‹์€๋ฐ์š”? ์ง„์งœ ์ž˜ ๋งŒ๋“  ์„œ๋น„์Šค๋ผ๋Š” ๊ฒƒ์ด ๋Š๊ปด์ง‘๋‹ˆ๋‹ค.) ๊ทธ๋ฆฌ๊ณ  ์ œ์ผ ์šฐ์ธก์—๋Š” ๋ ˆ์ด์•„์›ƒ ์˜ต์…˜์„ ์กฐ์ •ํ•ด์ฃผ๋Š” ์—ฌ๋Ÿฌ ์ƒ์„ธ ๊ฐ’๋“ค์ด ์กด์žฌํ•ฉ๋‹ˆ๋‹ค. 

๋””๋ฐ”์ด์Šค ๋ ˆ์ด์•„์›ƒ

์ปดํฌ๋„ŒํŠธ ์ƒ์„ฑ

๊ทธ๋Ÿผ ์ด์ œ ๋ ˆ์ด์•„์›ƒ์— ๋„ฃ์„ ์ปดํฌ๋„ŒํŠธ๋ฅผ ๋งŒ๋“ค์–ด๋ณผ๊นŒ์š”? ์‚ฌ์‹ค ์ œ ์ฃผ๋ ฅ์€ ์ฝ”๋“œ ์ž‘์„ฑ์ด๋ผ ๊ทธ์ „๊นŒ์ง€๋Š” ๋””์ž์ธ ๊ด€๋ จ ํˆด์„ ๋‹ค๋ฃจ์‹œ๋Š” ์ „๋ฌธ๊ฐ€ ๋ถ„๋“ค์ด ํ›จ์”ฌ ๋” ์ž˜ ํŒŒ์•…ํ•˜๊ณ  ์ž˜ ์‚ฌ์šฉํ•˜์‹ ๋‹ค๊ณ  ์ƒ๊ฐํ•ฉ๋‹ˆ๋‹ค :) ์ €๋Š” ํˆด์„ ์‚ฌ์šฉํ•˜๋Š” ๊ฒƒ์ด ๊ต‰์žฅํžˆ ์„œํˆด๋Ÿฌ์„œ์š”. ์‚ฌ์šฉํ•ด๋ดค์ž Visual Studio Code ๋ฟ... 

์•„๋ž˜ ์ด๋ฏธ์ง€ ์ขŒ์ธก ํŒจ๋„์— Layouts์™€ Code ํƒญ์ด ์žˆ๋Š”๋ฐ Code๋ฅผ ์„ ํƒํ•˜๋ฉด ํƒญ์ด ์ „ํ™˜๋˜์–ด ์ปดํฌ๋„ŒํŠธ์˜ ๋ชฉ๋ก์„ ๋ณด์—ฌ์ฃผ๊ณ  ์ฝ”๋“œ๋ฅผ ์ƒ์„ฑํ•  ์ˆ˜ ์žˆ๋Š” ๋ฒ„ํŠผ์ด ํ™œ์„ฑํ™”๋ฉ๋‹ˆ๋‹ค. ์•„๋ž˜ Create Code File์„ ์„ ํƒํ•ด์„œ ์ฝ”๋“œ๋ฅผ ์ƒ์„ฑํ•ด๋ด…์‹œ๋‹ค.

 

์ €๋Š” ์ปดํฌ๋„ŒํŠธ ์ด๋ฆ„์„ FirstComponent๋กœ ์ง“๊ณ  Create ํ•˜๋„๋ก ํ•˜๊ฒ ์Šต๋‹ˆ๋‹ค. ๊ทธ๋Ÿผ ์ด๋ฏธ์ง€ ์šฐ์ธก์ฒ˜๋Ÿผ ์ปดํฌ๋„ŒํŠธ๊ฐ€ ์ƒ์„ฑ๋˜์—ˆ์Œ์„ ํ™•์ธํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.

์ปดํฌ๋„ŒํŠธ ์ƒ์„ฑ

์ปดํฌ๋„ŒํŠธ ๋‚ด๋ถ€ ์ฝ”๋“œ๋ฅผ ๋ณด๋ฉด ๊ต‰์žฅํžˆ ๋ณต์žกํ•œ ๊ฒƒ์ฒ˜๋Ÿผ ๋ณด์ž…๋‹ˆ๋‹ค. ํ•˜์ง€๋งŒ ์—ฌ๋Ÿฌ๋ถ„์€ ์ง€๊ธˆ ์ด๊ฑธ ๋‹ค ์ดํ•ดํ•˜์‹ค ํ•„์š”๊ฐ€ ์—†์Šต๋‹ˆ๋‹ค. ์™œ๋ƒํ•˜๋ฉด ์˜ค๋Š˜์€ ํ”„๋ ˆ์ด๋จธ๋ฅผ ์‚ฌ์šฉํ•˜๊ธฐ ์œ„ํ•œ ์‚ฌ์ „ ์ค€๋น„! ์›Œ๋ฐ์—…์„ ํ•˜๋Š” ๊ณผ์ •์ด๊ธฐ ๋•Œ๋ฌธ์— ๋ฒŒ์จ๋ถ€ํ„ฐ ํž˜ ๋นผ์‹ค ํ•„์š” ์—†์Šต๋‹ˆ๋‹ค. ์ƒ์„ฑํ•œ ์ปดํฌ๋„ŒํŠธ์˜ ์ƒ˜ํ”Œ ์ฝ”๋“œ๋ฅผ ์•„์ฃผ ๊ฐ„๊ฒฐํ•˜๊ฒŒ ๋‹ค ๋‚ ๋ ค๋ฒ„๋ฆฌ๊ฒ ์Šต๋‹ˆ๋‹ค.

์ปดํฌ๋„ŒํŠธ ๋‚ด๋ถ€ ์ฝ”๋“œ

๐ŸŽฏ ์ปดํฌ๋„ŒํŠธ ๊ธฐ๋ณธ ๊ตฌ์กฐ ์ƒ์„ธ ์„ค๋ช…

์ด๋ ‡๊ฒŒ ์ฝ”๋“œ๋ฅผ ๋‹ค ๋‚ ๋ ค์ค๋‹ˆ๋‹ค. ์ด๊ฒŒ ํ”„๋ ˆ์ด๋จธ์˜ ๊ธฐ๋ณธ ์ปดํฌ๋„ŒํŠธ ๊ตฌ์กฐ๋ผ๊ณ  ๋ณด์‹œ๋ฉด ๋ฉ๋‹ˆ๋‹ค. ํ•˜๋‚˜์”ฉ ๋œฏ์–ด๋ณด๋ฉด์„œ ํŒŒ์•…ํ•ด ๋ณผ๊นŒ์š”?

 

ํ”„๋ ˆ์ด๋จธ ๊ธฐ๋ณธ ์ปดํฌ๋„ŒํŠธ ๊ตฌ์กฐ

๋ฆฌ์•กํŠธ๋ฅผ ์‚ฌ์šฉํ•˜๊ธฐ ์œ„ํ•œ ๊ตฌ๋ฌธ์ž…๋‹ˆ๋‹ค. ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ์—์„œ react ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ๋ฅผ ๊ฐ€์ ธ์™€์„œ ์‚ฌ์šฉํ•˜๊ฒ ๋‹ค๋Š” ํ‘œํ˜„์‹์ด๋ผ๊ณ  ๋ณด๋ฉด ๋ฉ๋‹ˆ๋‹ค.

import * as React from "react"

์กฐ๊ธˆ ์‰ฝ๊ฒŒ ํ’€์–ด์„œ ์„ค๋ช…๋“œ๋ฆฌ๋ฉด,

 

import = ๊ฐ€์ ธ์˜จ๋‹ค!

* as React = react ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ์— ์žˆ๋Š” ๋ชจ๋“  ๊ธฐ๋Šฅ๋“ค์„ React๋ผ๋Š” ์ด๋ฆ„์œผ๋กœ ์‚ฌ์šฉํ•  ๊ฑฐ๋‹ค!

from "react" = ํ”„๋ ˆ์ด๋จธ์—์„œ ๋ฏธ๋ฆฌ ๋‹ค์šด๋ฐ›์•„ ๋†“์€ react๋ผ๋Š” ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ๋ฅผ ๊ฐ€์ ธ์˜จ๋‹ค!

 

์ €๋„ ๋ฌธ๊ณผ์ƒ์œผ๋กœ์„œ ๋…ํ•™์œผ๋กœ React, Vue๋ฅผ ๊ณต๋ถ€ํ•˜๋ฉด์„œ ์ด๋Ÿฐ ์šฉ์–ด ํ•˜๋‚˜ํ•˜๋‚˜๊ฐ€ ๊ต‰์žฅํžˆ ์ดํ•ดํ•˜๊ธฐ ํž˜๋“ค๊ณ  ๊นŒ๋‹ค๋กœ์› ๋˜ ์ƒ๊ฐ์ด ๋“ญ๋‹ˆ๋‹ค. ํ•˜์ง€๋งŒ ๊พธ์ค€ํžˆ ์ฝ”๋“œ๋ฅผ ๋ฐ˜๋ณต์ ์œผ๋กœ ์ ‘ํ•˜๊ณ , ์ž‘์„ฑํ•˜๋‹ˆ ์ž์—ฐ์Šค๋ ˆ ์ด๋Ÿฌํ•œ ๊ตฌ๋ฌธ๋“ค๊ณผ ์นœํ•ด์ง€๊ฒŒ ๋˜์—ˆ๋˜ ๊ธฐ์–ต์ด ๋‚ฉ๋‹ˆ๋‹ค. ๋ฐ˜๋ณต! ๊ทธ๋ฆฌ๊ณ  ์—ฐ์Šต์ด ๋‹ต์ธ ๊ฒƒ ๊ฐ™์•„์š”. ๊ทธ๋ž˜๋„ ์ตœ๋Œ€ํ•œ ์‰ฝ๊ฒŒ ์„ค๋ช…ํ•˜๋ ค๊ณ  ๋…ธ๋ ฅํ•˜๋„๋ก ํ•˜๊ฒ ์Šต๋‹ˆ๋‹ค.

 

๊ทธ ์•„๋ž˜์— Framer ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ์—์„œ Frame ์ปดํฌ๋„ŒํŠธ๋ฅผ ๊ฐ€์ ธ์˜ค๋Š” ๊ตฌ๋ฌธ์ด ์žˆ๋„ค์š”. ์ฝ”๋“œ๋Š” ์•„๋ž˜์™€ ๊ฐ™์Šต๋‹ˆ๋‹ค.

import { Frame } from "framer"

์•„๊นŒ ๋ฆฌ์•กํŠธ ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ๋ฅผ ๊ฐ€์ ธ์˜ค๋Š” ๊ตฌ๋ฌธ๊ณผ ๋น„์Šทํ•˜์ฃ ? ํ•˜์ง€๋งŒ ๋ฆฌ์•กํŠธ๋Š” ์ „์ฒด๋ฅผ ๊ฐ€์ ธ์˜ค๋Š” ๊ตฌ๋ฌธ์„ ์‚ฌ์šฉํ–ˆ์ง€๋งŒ(*<๊ฐ€์ง€๊ณ  ์žˆ๋Š” ๋ชจ๋“  ๊ฒƒ๋“ค์„> as React<React๋ผ๋Š” ์ด๋ฆ„์œผ๋กœ ์‚ฌ์šฉํ• ๋ž˜!>) ํ”„๋ ˆ์ด๋จธ๋Š” ์กฐ๊ธˆ ๋‹ค๋ฅด์ฃ ? ๊ทธ๋ ‡๋‹ค๋ฉด import ์˜†์— ์žˆ๋Š” ์ € ์ค‘๊ด„ํ˜ธ๋Š” ๋„๋Œ€์ฒด ๋ญ๋ƒ!

์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ import ๊ตฌ๋ฌธ ์‚ฌ์ด์˜ ์ค‘๊ด„ํ˜ธ๋Š” from ๋’ค์— framer๋ผ๋Š” ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ์—์„œ ์ œ๊ณตํ•˜๋Š” ๋‹ค์–‘ํ•œ ์ปดํฌ๋„ŒํŠธ๋“ค์„ ๊ฐœ๋ณ„๋กœ ๊ฐ€์ ธ์˜ค๊ฒ ๋‹ค๋Š” ์˜๋ฏธ๋ฅผ ๊ฐ€์ง€๊ณ  ์žˆ์Šต๋‹ˆ๋‹ค. 

 

{ Frame } ?

"framer์—์„œ ์ œ๊ณตํ•˜๊ณ  ์žˆ๋Š” ๋‹ค์–‘ํ•œ ์ปดํฌ๋„ŒํŠธ ์ค‘์—์„œ Frame์˜ ์ด๋ฆ„์„ ๊ฐ€์ง€๊ณ  ์žˆ๋Š” ์ปดํฌ๋„ŒํŠธ๋ฅผ ๊ฐ€์ ธ์˜ฌ ๊ฑฐ์•ผ!" ๋ผ๋Š” ์˜๋ฏธ๋กœ ๋ณด์‹œ๋ฉด ๋ฉ๋‹ˆ๋‹ค.

 

๊ทธ๋ ‡๋‹ค๋ฉด framer์—์„œ ์ œ๊ณตํ•˜๋Š” ๋‹ค์–‘ํ•œ ์ปดํฌ๋„ŒํŠธ ์ค‘์—์„œ Page ์ปดํฌ๋„ŒํŠธ๋ฅผ ํ•˜๋‚˜ ๋ถˆ๋Ÿฌ์˜ค๊ณ  ์‹ถ์œผ๋ฉด ์–ด๋–ป๊ฒŒ ํ• ๊นŒ์š”?

import { Page } from "framer"

์ด๋ ‡๊ฒŒ ์ž‘์„ฑํ•˜๋ฉด ๋˜๊ฒ ์ฃ ? ๊ฐ„๋‹จํ•˜์ฃ ? 

 

๊ทธ๋Ÿผ ์ด์ œ ๋Œ€๋ง์˜ ์ปดํฌ๋„ŒํŠธ ๊ตฌํ˜„์ฒด ๋ถ€๋ถ„์ž…๋‹ˆ๋‹ค.

export function FirstComponent(props) {
    return (
        <Frame
            width={100}
            height={100}
            background={"#242424"}
        >
        ์‹œ์ž‘์ด๋‹ค
        </Frame>
    )
}

 

import ๊ตฌ๋ฌธ์„ ์‚ฌ์šฉํ•ด์„œ ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ์—์„œ ์ œ๊ณตํ•˜๋Š” ๋‹ค์–‘ํ•œ ์ปดํฌ๋„ŒํŠธ๋‚˜ ๊ธฐ๋Šฅ๋“ค์„ ๊ฐ€์ ธ์˜จ ๊ฒƒ ๊ธฐ์–ตํ•˜์‹œ๋‚˜์š”?

import๊ฐ€ ์žˆ์œผ๋‹ˆ export๋„ ์žˆ๊ฒ ์ฃ ? export๋Š” export ๋’ค์— ๊ตฌํ˜„ํ•œ ๋กœ์ง๋“ค์„ ๋ฐ–์œผ๋กœ ๋‚ด๋ณด๋‚ด๊ฒ ๋‹ค๋Š” ์˜๋ฏธ๋ฅผ ๊ฐ€์ง€๊ณ  ์žˆ์Šต๋‹ˆ๋‹ค.

export ๋’ค์— function FirstComponent() { } ํ•จ์ˆ˜๋ฅผ ์„ ์–ธํ•œ ๊ตฌ๋ฌธ์ด ์žˆ๋Š”๋ฐ ์ฒ˜์Œ ๋ณด์‹œ๋ฉด ๋ญ์ง€? ๋ผ๋Š” ์ƒ๊ฐ์„ ๊ฐ€์ง€์‹ค ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค. ์ฐจ๊ทผ์ฐจ๊ทผ ํ•ด๊ฒฐํ•ด๋ด…์‹œ๋‹ค

export function FirstComponent(props) {

export ์•ž์— function์€ ํ•จ์ˆ˜๋ฅผ ๋งŒ๋“ค๊ฒŒ ๋„์™€์ฃผ๋Š” ์˜ˆ์•ฝ์–ด์ž…๋‹ˆ๋‹ค.

์˜ˆ์•ฝ์–ด๋Š” ๋˜ ๋ญ์•ผ? ํ•จ์ˆ˜๋Š” ๋˜ ๋ญ์•ผ? ๋ผ๋Š” ์ƒ๊ฐ์„ ํ•˜์‹œ๊ฒ ์ฃ ?

์˜ˆ์•ฝ์–ด๋Š” ๋ง ๊ทธ๋Œ€๋กœ ํŠน์ • ์–ธ์–ด๋ฅผ ์‚ฌ์šฉํ–ˆ์„ ๋•Œ์— ๋ฏธ๋ฆฌ ์ง€์ •๋˜์–ด ์žˆ๋Š” ๊ตฌ๋ฌธ์ด๋ผ๊ณ  ๋ณด์‹œ๋ฉด ๋ฉ๋‹ˆ๋‹ค.

import, export, const, function, class ๋“ฑ ์—ฌ๋Ÿฌ ๊ฐ€์ง€ ์˜ˆ์•ฝ์–ด๊ฐ€ ์กด์žฌํ•ฉ๋‹ˆ๋‹ค. ์ €ํฌ๋Š” ๊ทธ์ € function์ด๋ผ๋Š” ๋‹จ์–ด๋Š” "์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ์—์„œ ํ•จ์ˆ˜๋ฅผ ์‚ฌ์šฉํ•˜๊ธฐ ์œ„ํ•ด์„œ ์‚ฌ์šฉํ•˜๋Š” ๊ฑฐ๊ตฌ๋‚˜!" ๋ผ๊ณ  ์ƒ๊ฐํ•˜์‹œ๊ณ  ๋„˜์–ด๊ฐ€์‹œ๋ฉด ๋ฉ๋‹ˆ๋‹ค.

ํ•จ์ˆ˜๊ฐ€ ์™œ ๋‚˜์™”์„๊นŒ์š”?

์ €ํฌ๊ฐ€ ํ”„๋ ˆ์ด๋จธ์—์„œ ์ด์•ผ๊ธฐํ•˜๋Š” ์ปดํฌ๋„ŒํŠธ๋“ค์ด ๋ฐ”๋กœ ์ด ํ•จ์ˆ˜๋กœ ๊ตฌ์„ฑ๋˜์–ด ์žˆ์Šต๋‹ˆ๋‹ค. ํ•จ์ˆ˜๋ฅผ ํ†ตํ•ด์„œ ์ปดํฌ๋„ŒํŠธ๊ฐ€ ๋งŒ๋“ค์–ด์ง€๋Š” ๊ฒƒ์ด์ฃ . (์‚ฌ์‹ค ์ข€ ๋” ๋ณต์žกํ•˜๊ฒŒ ๋“ค์–ด๊ฐ€๋ฉด React์˜ ํŠน์ง•์ ์ธ ๋ถ€๋ถ„๋“ค์ด๋ผ ํ•จ์ˆ˜ํ˜•, ํด๋ž˜์Šคํ˜• ์ปดํฌ๋„ŒํŠธ๋“ค์ด ์กด์žฌํ•ฉ๋‹ˆ๋‹ค. ํ•˜์ง€๋งŒ ํ˜„์žฌ๋Š” ๋ˆˆ์•ž์— ๋ณด์ด๋Š” ์ € ํ•จ์ˆ˜๋Š” ์ปดํฌ๋„ŒํŠธ๋ฅผ ๋งŒ๋“ค๋ ค๊ณ  ์ €๋ ‡๊ฒŒ ํ•จ์ˆ˜๋ฅผ ๋ถˆ๋Ÿฌ์™”๊ตฌ๋‚˜~ ๋ผ๊ณ  ์ƒ๊ฐํ•˜๊ณ  ๋„˜์–ด๊ฐ€์‹œ๋ฉด ๋ฉ๋‹ˆ๋‹ค.)

์ €ํฌ๋Š” ์‰ฝ๊ฒŒ ์ƒ๊ฐํ•˜๋„๋ก ํ•ด์š”. "ํ•จ์ˆ˜๋ฅผ ํ™œ์šฉํ•ด์„œ ์ปดํฌ๋„ŒํŠธ๋ฅผ ๋งŒ๋“œ๋Š”๊ตฌ๋‚˜~" ๋ผ๊ตฌ์š”.

function ์•ž์— FirstComponent๋Š” ๋ญ˜๊นŒ์š”? ๋ฐ”๋กœ ํ•จ์ˆ˜ ์ด๋ฆ„์ž…๋‹ˆ๋‹ค.

ํ•จ์ˆ˜๊ฐ€ ๋ญ๋ผ๊ณ  ํ•˜์ž๊ณ  ํ–ˆ์ฃ ? ์ปดํฌ๋„ŒํŠธ์ฃ . ๊ทธ๋Ÿผ ๋ฐ”๊ฟ” ๋งํ•ด์„œ ์ปดํฌ๋„ŒํŠธ์˜ ์ด๋ฆ„์ด๋ผ๊ณ  ์ƒ๊ฐํ•˜์‹œ๋ฉด ๋ฉ๋‹ˆ๋‹ค. FirstComponent์˜ ์ด๋ฆ„ ๋’ค์— ์†Œ๊ด„ํ˜ธ๊ฐ€ ์กด์žฌํ•˜๋„ค์š”. ์†Œ๊ด„ํ˜ธ๋Š” ์ปดํฌ๋„ŒํŠธ์— ์ „๋‹ฌ๋ฐ›์„ ๊ฐ’๋“ค์„ ์ง€์ •ํ•ฉ๋‹ˆ๋‹ค.

props๋Š” ์ถ”ํ›„ ์„ค๋ช…๋“œ๋ฆด๊ฒŒ์š”. "props๋ผ๋Š” ๊ฐ’์„ ๋ฐ›์€ (์ง€๊ธˆ์€ ๋ฌด์Šจ ๋ฐ์ดํ„ฐ์ธ์ง€ ๋ชจ๋ฅด์ฃ ) FirstComponent ๊ตฌ๋‚˜" ๋ผ๊ณ  ์ƒ๊ฐํ•˜์‹œ๋ฉด ๋ฉ๋‹ˆ๋‹ค.

(props)๋ฅผ ์ง€๋‚˜์„œ { ์ค‘๊ด„ํ˜ธ์˜ ์‹œ์ž‘์ ์„ ๋งŒ๋‚ฌ์Šต๋‹ˆ๋‹ค. ํ•จ์ˆ˜ ๋‚ด๋ถ€์— ํŠน์ • ๊ธฐ๋Šฅ์„ ๋ถ€์—ฌํ•˜๊ธฐ ์œ„ํ•ด์„œ ์ด๋ ‡๊ฒŒ ์ค‘๊ด„ํ˜ธ ์‚ฌ์ด์— ์—ฌ๋Ÿฌ ๊ฐ€์ง€ ๋กœ์ง์„ ์ž‘์„ฑํ•ฉ๋‹ˆ๋‹ค. ์ค‘๊ด„ํ˜ธ ์‚ฌ์ด์— ์•„๋ž˜์™€ ๊ฐ™์ด return ๊ตฌ๋ฌธ๊ณผ ํ•จ๊ป˜ ์–ด๋– ํ•œ ๋กœ์ง์ด ์ž‘์„ฑ๋˜์–ด ์žˆ๋Š” ๊ฒƒ์„ ์•Œ ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.

    return (
        <Frame
            width={100}
            height={100}
            background={"#242424"}
        >
        ์‹œ์ž‘์ด๋‹ค
        </Frame>
    )
  }

return์ด๋ž€ ํ•จ์ˆ˜์—์„œ ์ž‘์„ฑ๋œ ๊ฒฐ๊ณผ๋ฌผ์„ ๋‚ด๋ณด๋‚ด๊ธฐ ์œ„ํ•œ ๊ตฌ๋ฌธ์ž…๋‹ˆ๋‹ค.

return ๊ตฌ๋ฌธ ๋’ค์— Frame๊ณผ ๊ด€๋ จ๋œ ์ฝ”๋“œ๊ฐ€ ์ž‘์„ฑ๋˜์–ด ์žˆ์ฃ ? ๋ง ๊ทธ๋Œ€๋กœ Frame ์ฝ”๋“œ๋“ค์„ return(๋ฐ–์œผ๋กœ ๋ฐ˜ํ™˜ํ• ๊บผ๋‹ค!)๋ผ๋Š” ์˜๋ฏธ์ž…๋‹ˆ๋‹ค.

์ด ๋ถ€๋ถ„์„ ๊ถ๊ธˆํ•ดํ•˜์‹œ๋Š” ๋ถ„๋“ค๋„ ๋งŽ์„ ๊ฒƒ ๊ฐ™์Šต๋‹ˆ๋‹ค.

"return์€ ์•Œ๊ฒ ์–ด์š”. ๊ทผ๋ฐ return ๋’ค์— ์™œ ์†Œ๊ด„ํ˜ธ()๋กœ ๊ฐ์‹ธ์„œ ์ €๋ ‡๊ฒŒ Frame ๋ญ์‹œ๊นฝ์ด๋ฅผ ์ž‘์„ฑํ•œ ๊ฑฐ์ฃ ?"

์†Œ๊ด„ํ˜ธ๋ฅผ ์‚ฌ์šฉํ•˜๋Š” ์ด์œ ๋Š” ๊ฐ€๋…์„ฑ์„ ์ข‹๊ฒŒ ํ•˜๊ธฐ ์œ„ํ•ด ์‚ฌ์šฉ๋œ JSX ๊ตฌ๋ฌธ์ž…๋‹ˆ๋‹ค. JSX๋ผ๊ณ  ํ•˜๋ฉด ๋˜ ์—„์ฒญ ๋‚ฏ์„ค์ฃ . 

"JSX ๋ฌธ๋ฒ•์—์„œ ์—ฌ๋Ÿฌ ์ค„๋กœ ์ฝ”๋“œ๋ฅผ ๊น”๋”ํ•˜๊ฒŒ ์ž‘์„ฑํ•˜๊ธฐ ์œ„ํ•ด ์ €๋ ‡๊ฒŒ ์†Œ๊ด„ํ˜ธ๋ฅผ ์‚ฌ์šฉํ•˜๋Š”๊ตฌ๋‚˜~" ๋ผ๊ณ  ์ƒ๊ฐํ•˜์‹œ๊ณ  ๋„˜์–ด๊ฐ€์‹œ๋ฉด ๋ฉ๋‹ˆ๋‹ค :)

์†Œ๊ด„ํ˜ธ๋ฅผ ๋„˜์–ด์„œ ๋“œ๋””์–ด Frame ์ปดํฌ๋„ŒํŠธ๊ฐ€ ์ž‘์„ฑ๋œ ๊ณณ๊นŒ์ง€ ์˜ค์…จ์Šต๋‹ˆ๋‹ค. ์ฒ˜์Œ ์ฝ”๋“œ๋ฅผ ์ ‘ํ•˜์‹œ๋Š” ๋ถ„๋“ค์€ ์ด๋Ÿฐ ๋ถ€๋ถ„๋“ค๋„ ๊ต‰์žฅํžˆ ๊นŒ๋‹ค๋กญ๊ฒŒ ๋Š๊ปด์ง€๊ธฐ ๋งˆ๋ จ์ด์ฃ . ์ €๋„ ๊ทธ ๋งˆ์Œ ๊ต‰์žฅํžˆ ์ดํ•ด๊ฐ€ ๊ฐ€๊ตฌ์š”. ๊ทธ๋ž˜์„œ ์ตœ๋Œ€ํ•œ ์‰ฝ๊ฒŒ ์„ค๋ช…์„ ๋“œ๋ฆฌ๊ณ ์ž ํ•ฉ๋‹ˆ๋‹ค.

๊ธฐ์–ต์ด ๋‚˜์‹ค์ง€๋Š” ๋ชจ๋ฅด๊ฒ ์ง€๋งŒ(๋‚˜์…”์•ผ ํ•ฉ๋‹ˆ๋‹ค..ใ…Ž) ์œ„์—์„œ framer ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ์—์„œ Frame์ด๋ผ๋Š” ์ปดํฌ๋„ŒํŠธ๋ฅผ ๊ฐ€์ ธ์˜จ ๊ฒƒ ๊ธฐ์–ตํ•˜์‹œ๋‚˜์š”?

import { Frame } from "framer"

๋ฆฌ๋งˆ์ธ๋“œ ์ฐจ์›์œผ๋กœ ํ•œ๋ฒˆ ๋”! ์ด๋ ‡๊ฒŒ Frame์˜ ์ด๋ฆ„์„ ๊ฐ€์ง„ ์ปดํฌ๋„ŒํŠธ๋ฅผ ๊ฐ€์ ธ์™”์Šต๋‹ˆ๋‹ค. ๊ฐ€์ ธ๋งŒ ์˜ค๋ฉด ์˜๋ฏธ๊ฐ€ ์žˆ๋‚˜์š”? ์ด์ œ ์‚ฌ์šฉ์„ ํ•ด๋ด์•ผ๊ฒ ์ฃ ?

 

์‚ฌ์šฉํ•  ๋•Œ๋Š” ์•„๋ž˜์™€ ๊ฐ™์ด ์‚ฌ์šฉํ•˜๋ฉด ๋ฉ๋‹ˆ๋‹ค.

<Frame /> // ๊ทธ๋ƒฅ ์ปดํฌ๋„ŒํŠธ๋งŒ ๊ฐ€์ ธ์˜ค๊ณ  ์‹ถ๋‹ค๋ฉด ์ด๋ ‡๊ฒŒ ํ•˜์…”๋„ ๋ฉ๋‹ˆ๋‹ค.
<Frame></Frame> // ์ปดํฌ๋„ŒํŠธ ์•ˆ์— ๋‹ค๋ฅธ ๋กœ์ง์„ ์ž‘์„ฑํ•˜๊ณ  ์‹ถ์„ ๋•Œ ์—ด๊ณ  ๋‹ซ์Šต๋‹ˆ๋‹ค.

์—ฌ๊ธฐ์„œ ์ข€ ๋” ์ถ”๊ฐ€ํ•  ๊ฒŒ ์žˆ์ฃ ! ์œ„ ์˜ˆ์‹œ์—๋Š” <Frame {๋ฌด์–ธ๊ฐ€๊ฐ€ ์žˆ์—ˆ์ฃ ?}>

Frame ์‚ฌ์ด์— ๋ฌด์–ธ๊ฐ€๊ฐ€ ์žˆ์—ˆ์ฃ ? ๊ทธ ๋ฌด์–ธ๊ฐ€๊ฐ€ ๋ฐ”๋กœ ์•„๊นŒ ๋ง์”€๋“œ๋ฆฐ props๋ผ๋Š” ๊ฐ’๋“ค์ž…๋‹ˆ๋‹ค. props๋ผ๊ณ  ๋งํ•˜๋ฉด ๊ต‰์žฅํžˆ ์ƒ์†Œํ•˜์ฃ . ์šฐ๋ฆฌ๊ฐ€ ๋งŒ๋“ค๋ ค๋Š” ์ปดํฌ๋„ŒํŠธ์—๋‹ค๊ฐ€ ๋„ฃ์–ด์ค„ ๊ฐ’๋“ค์ด๋ผ๊ณ  ์ƒ๊ฐํ•˜์‹œ๋ฉด ๋ฉ๋‹ˆ๋‹ค.

Frame ์ปดํฌ๋„ŒํŠธ์— width, height, background๊ฐ€ ์žˆ๋Š” ๊ฒŒ ๋ณด์ด์‹œ์ฃ ? ๊ทธ ๋ง์€ ์ฆ‰์Šจ Frame์ด๋ผ๋Š” ์ปดํฌ๋„ŒํŠธ๋ฅผ ๋งŒ๋“ค ๋•Œ width, height, background๋ผ๋Š” ๊ฐ’์„ ๋ฐ›์•„์„œ ๋ญ”๊ฐ€๋ฅผ ํ•˜๊ฒ ๋‹ค๋Š” ์˜๋ฏธ์ž…๋‹ˆ๋‹ค. ์šฐ๋ฆฌ๋Š” framer์—์„œ ์ œ๊ณตํ•ด์ฃผ๋Š” Frame์ด๋ผ๋Š” ์ปดํฌ๋„ŒํŠธ๋ฅผ ์‚ฌ์šฉํ•˜๋Š” ๊ฒƒ์ด๋‹ˆ๊นŒ Frame ์ปดํฌ๋„ŒํŠธ์—์„œ ์ €๋ ‡๊ฒŒ ์ปดํฌ๋„ŒํŠธ๋ฅผ ๋งŒ๋“ค์–ด ๋†จ๊ฒ ์ฃ . ๋‹จ์ˆœํ•˜๊ฒŒ ์ œ๊ณตํ•ด์ฃผ๋Š” Frame ์ปดํฌ๋„ŒํŠธ๋ฅผ ์˜ˆ์‹œ๋กœ ๋“ค์ž๋ฉด ์•„๋ž˜์™€ ๊ฐ™์„ ๊ฒƒ์ž…๋‹ˆ๋‹ค.

export function Frame({ width, height, background }) {
    return (
    	// ๊ฐ€์ ธ์˜จ width, height, background ๊ฐ’๋“ค๋กœ ๋ญ”๊ฐ€๋ฅผ ๋งŒ๋“ค๊ณ 
        // ๋งŒ๋“  ๊ฒฐ๊ณผ๋ฅผ return ํ•ด์ค€๋‹ค.
		...
    )
}

Frame ์ปดํฌ๋„ŒํŠธ์— radius๋ž‘ size ๊ฐ’๋“ค์„ ์„ค์ •ํ•ด๋ณผ๊ฒŒ์š”.

 

FirstComponent

์ž ์ปดํฌ๋„ŒํŠธ ์„ค์ •์„ ์™„๋ฃŒํ–ˆ์Šต๋‹ˆ๋‹ค. ๊ทธ๋Ÿผ ์ด์ œ ์ปดํฌ๋„ŒํŠธ๋ฅผ ๋””๋ฐ”์ด์Šค ๋ ˆ์ด์•„์›ƒ์— ๋„ฃ์–ด๋ณผ๊นŒ์š”? ์šฐ๋ฆฌ๊ฐ€ ๋งŒ๋“  ํŒŒ์ผ์„ ๋“œ๋ž˜๊ทธํ•ด์„œ ๋””๋ฐ”์ด์Šค ๋ ˆ์ด์•„์›ƒ ์•ˆ์— ๋„ฃ์–ด์ฃผ๋ฉด ๋ฉ๋‹ˆ๋‹ค.

์ปดํฌ๋„ŒํŠธ ์ถ”๊ฐ€

์ง ! ๋“œ๋ž˜๊ทธํ•œ ์ปดํฌ๋„ŒํŠธ๊ฐ€ ๋””๋ฐ”์ด์Šค ๋ ˆ์ด์•„์›ƒ์— ์ถ”๊ฐ€๋˜์—ˆ์Šต๋‹ˆ๋‹ค.

๋””๋ฐ”์ด์Šค ๋ ˆ์ด์•„์›ƒ์— ์ถ”๊ฐ€

๐Ÿ‘‹ ๋งˆ๋ฌด๋ฆฌ

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

 

์˜ˆ์ œ๋ฅผ ํ†ตํ•ด์„œ ์‰ฝ๊ฒŒ ํ•™์Šตํ•˜์‹œ๊ณ  ์‹ถ์œผ์‹  ๋ถ„๋“ค์€ ์•„๋ž˜ ๊ฐ•์˜๋„ ๊ดœ์ฐฎ์•„์š”! ๐Ÿ‘๐Ÿ‘๐Ÿ‘

 

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

โœ๏ธ ํŽ˜์ด์ง€ ํˆด์ด๋ž€? ํŽ˜์ด์ง€ ํˆด์ด๋ž€ ํ”„๋ ˆ์ด๋จธX์—์„œ ์ œ๊ณตํ•˜๋Š” ๊ธฐ๋Šฅ ์ค‘ ํ•˜๋‚˜๋กœ ์›น์„œ๋น„์Šค์—์„œ ์‚ฌ์šฉ๋˜๋Š” ์Šค์™€์ดํ”„ ๊ธฐ๋Šฅ์„ ๊ตฌํ˜„ํ•  ์ˆ˜ ์žˆ๊ฒŒ ๋„์™€์ฃผ๋Š” ๋„๊ตฌ์ž…๋‹ˆ๋‹ค. ํŽ˜์ด์ง€ ํˆด์„ ์‚ฌ์šฉํ•˜๋ฉด ์Šค์™€์ดํ”„ ๊ธฐ๏ฟฝ๏ฟฝ

webruden.tistory.com

728x90
๋ฐ˜์‘ํ˜•

'๊ฐ•์˜ > Framer' ์นดํ…Œ๊ณ ๋ฆฌ์˜ ๋‹ค๋ฅธ ๊ธ€

[์˜ˆ์ œ๋ฅผ ํ†ตํ•ด ํ•™์Šตํ•˜๋Š” ํ”„๋ ˆ์ด๋จธ(Framer) #3-2] Overlay Effect๋ฅผ ํ™œ์šฉํ•œ Draggable Sheet UI ๊ตฌํ˜„  (0) 2020.07.15
[๊ฐœ๋ฐœ์ž๊ฐ€ ์•Œ๋ ค์ฃผ๋Š” ํ”„๋ ˆ์ด๋จธ(Framer) #1-1] Frame ์ปดํฌ๋„ŒํŠธ ์™„๋ฒฝ์ •๋ฆฌ (Frame ์ •์˜, Layout, Visual)  (0) 2020.07.13
[์˜ˆ์ œ๋ฅผ ํ†ตํ•ด ํ•™์Šตํ•˜๋Š” ํ”„๋ ˆ์ด๋จธ(Framer) #3-1] Overlay Effect๋ฅผ ํ™œ์šฉํ•œ UI ๊ตฌํ˜„(Bottom Sheet, Draggable Sheet, Modal Box, Side Menu)  (0) 2020.07.13
[์˜ˆ์ œ๋ฅผ ํ†ตํ•ด ํ•™์Šตํ•˜๋Š” ํ”„๋ ˆ์ด๋จธ(Framer) #2] Magic Motion์„ ํ™œ์šฉํ•œ ํƒญ๋ฉ”๋‰ด ๊ตฌํ˜„ (Animated Tabs)  (0) 2020.07.13
[์˜ˆ์ œ๋ฅผ ํ†ตํ•ด ํ•™์Šตํ•˜๋Š” ํ”„๋ ˆ์ด๋จธ(Framer) #1] ํŽ˜์ด์ง€ ํˆด์„ ํ™œ์šฉํ•œ ์Šค์™€์ดํ”„ ๊ธฐ๋Šฅ ๊ตฌํ˜„ (Page Interactions)  (0) 2020.07.10
[๊ฐœ๋ฐœ์ž๊ฐ€ ์•Œ๋ ค์ฃผ๋Š” ํ”„๋ ˆ์ด๋จธ(Framer) #0] Framer ์‰ฝ๊ฒŒ ์‹œ์ž‘ํ•ด๋ณด์ž.  (2) 2020.07.10

๐Ÿ’– ์ €์ž์—๊ฒŒ ์•”ํ˜ธํ™”ํ๋กœ ํ›„์›ํ•˜๊ธฐ ๐Ÿ’–

์•„์ด์ฝ˜์„ ํด๋ฆญํ•˜๋ฉด ์ง€๊ฐ‘ ์ฃผ์†Œ๊ฐ€์ž๋™์œผ๋กœ ๋ณต์‚ฌ๋ฉ๋‹ˆ๋‹ค

2๊ฐœ์˜ ๋Œ“๊ธ€