
[๊ฐ๋ฐ์๊ฐ ์๋ ค์ฃผ๋ ํ๋ ์ด๋จธ(Framer) #0] Framer ์ฝ๊ฒ ์์ํด๋ณด์.
๋จ์์ฃผ๊ฐ๋ฐ์
ยท2020. 7. 10. 16:37
๐ 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๊ฐ ์์ฃ ?
๊ตฌ๊ธ์ ํตํด ์์ ๋ก๊ทธ์ธ ํ์๊ฐ์ ์ ํ์ ๋ ๋๊ณ ์ ์ฒ๋ผ ์๋ ๊ฐ์ ์ ๋ณด๋ฅผ ๊ธฐ์ ํ๊ณ ์ด๋ฉ์ผ๋ก ํ์๊ฐ์ ์ ํ์ ๋ ๋ฉ๋๋ค. ์ ๋ ์ด๋ฉ์ผ๋ก ํ์๊ฐ์ ์ ํ๋๋ก ํ๊ฒ ์ต๋๋ค.
์ด๋ฉ์ผ๋ก ํ์๊ฐ์ ์ ํ๋ฉด ์๋์ ๊ฐ์ด ์ด๋ฉ์ผ ์ธ์ฆ ๋ฉ์ผ์ด ์ค๊ฒ ๋ฉ๋๋ค. ์ด๋ฉ์ผ์ ํ์ธํ์ฌ ํด๋น ์ด๋ฉ์ผ์ 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 ๊ฐ๋ค์ ์ค์ ํด๋ณผ๊ฒ์.
์ ์ปดํฌ๋ํธ ์ค์ ์ ์๋ฃํ์ต๋๋ค. ๊ทธ๋ผ ์ด์ ์ปดํฌ๋ํธ๋ฅผ ๋๋ฐ์ด์ค ๋ ์ด์์์ ๋ฃ์ด๋ณผ๊น์? ์ฐ๋ฆฌ๊ฐ ๋ง๋ ํ์ผ์ ๋๋๊ทธํด์ ๋๋ฐ์ด์ค ๋ ์ด์์ ์์ ๋ฃ์ด์ฃผ๋ฉด ๋ฉ๋๋ค.
์ง ! ๋๋๊ทธํ ์ปดํฌ๋ํธ๊ฐ ๋๋ฐ์ด์ค ๋ ์ด์์์ ์ถ๊ฐ๋์์ต๋๋ค.
๐ ๋ง๋ฌด๋ฆฌ
์ด๋ฒ ํฌ์คํ ์์๋ Framer๊ฐ ๋ฌด์์ธ์ง ๊ทธ๋ฆฌ๊ณ ์ด๋ค ๊ธฐ์ ์คํ์ผ๋ก ๊ตฌ์ฑ๋์ด ์๋์ง ์ดํด๋ณด์๊ณ , ๊ธฐ๋ณธ์ ์ธ ํ์๊ฐ์ ๊ทธ๋ฆฌ๊ณ ์ฌ์ฉ ๋ฐฉ๋ฒ์ ๋ํด์ ๋ค๋ค๋ณด์์ต๋๋ค. ์ต๋ํ ์ฝ๊ฒ ์ค๋ช ํ๋ค๊ณ ํ์ด์ ์ค๋ช ํ๋๋ฐ ์ ๊ฐ ์ค๋ช ์ ์ ๋ชปํด์ ์ด ๊ธ์ ์ ํ์๋ ๋ถ๋ค์ด ๊ณผ์ฐ ์ ์ดํดํ์ จ์์ง๋ ์ ๋ชจ๋ฅด๊ฒ ๋ค์. ์์ผ๋ก ํ๋ ์ด๋จธ ๊ฐ์๋ฅผ ๊ณ์ ์ฌ๋ฆดํ ๋ฐ ์ข ๋ ์ฝ๊ฒ ์ค๋ช ํ๋๋ก ๋ ๋ ธ๋ ฅํ๊ฒ ์ต๋๋ค!
์์ ๋ฅผ ํตํด์ ์ฝ๊ฒ ํ์ตํ์๊ณ ์ถ์ผ์ ๋ถ๋ค์ ์๋ ๊ฐ์๋ ๊ด์ฐฎ์์! ๐๐๐
[์์ ๋ฅผ ํตํด ํ์ตํ๋ ํ๋ ์ด๋จธX #1] ํ์ด์ง ํด์ ํ์ฉํ ์ค์์ดํ ๊ธฐ๋ฅ ๊ตฌํ (Page Interactions)
โ๏ธ ํ์ด์ง ํด์ด๋? ํ์ด์ง ํด์ด๋ ํ๋ ์ด๋จธX์์ ์ ๊ณตํ๋ ๊ธฐ๋ฅ ์ค ํ๋๋ก ์น์๋น์ค์์ ์ฌ์ฉ๋๋ ์ค์์ดํ ๊ธฐ๋ฅ์ ๊ตฌํํ ์ ์๊ฒ ๋์์ฃผ๋ ๋๊ตฌ์ ๋๋ค. ํ์ด์ง ํด์ ์ฌ์ฉํ๋ฉด ์ค์์ดํ ๊ธฐ๏ฟฝ๏ฟฝ
webruden.tistory.com
๊ฐ์ฌํฉ๋๋ค.
2020.08.07 09:44
์ด๋ ๊ฒ ์ข์ ๊ธ์ ์จ์ฃผ์ ์ ๊ฐ์ฌํฉ๋๋ค :)
moonkey
2021.08.14 14:20
ํํ ๋ฆฌ์ผ ์ ๋ง ๊ฐ์ฌํฉ๋๋ค! ๋๋ฌด ์ฌ๋ฐ๋ค์ใ ใ ใ ใ
ํ๊ต๋์์ด๋
2021.09.01 10:24
๋์์ด๋๋ผ์ ๋ฐฐ์ฐ๊ธฐ ๋๋ฌด ์ด๋ ค์ ๋๋ฐใ ใ ํ๋ํ๋ ์น์ ํ ์ค๋ช ํด ์ฃผ์ ์ ๊ฐ์ฌํฉ๋๋ค!!!
jamieee
2021.10.06 18:00
์๋ ํ์ธ์! ํผ๊ทธ๋ง์จ์ค๋ค๊ฐ ์ด๋ฒ์ ํ๋ ์ด๋จธ๋ก ํ๋ฒ ๋์ด์ค๋ ค๋ ์ ์ ์ ๋๋ค ใ ใ
๋ค๋ฆ์ด ์๋๋ผ ์์ฒด๊ฐ์ ๋ถ๋ถ์ ์ปค์คํ ์์ฒด ์ฐ๋ ค๋ฉด ์ ๋ฃํ๋ ๊ตฌ์ ํด์ผ ํ๋๋ผ๊ตฌ์
๋ง์ฝ์ ์ ๊ฐ ์ ๋ฃํ๋์ ๊ตฌ์ ํ๋ฉด ๋ค๋ฅธ ๋์์ด๋๋ ๊ฐ๋ฐ์์ ํ๋ก์ญํธ ๊ณต์ ๋ฅผ ํ ๋
๊ณต์ ๋ฅผ ๋ฐ์ ๋ทฐ์ด๋ถ๋ค์ ๋ฌด๋ฃ ํ๋์ผ๋ก๋ ๋ฌด๋ฆฌ์์ด ์์ ์ด ๊ฐ๋ฅํ ๊น์?
๋ฆฌํํผ๊ทธ
2021.10.20 08:37
์ ๋ ํ๋ฒ ๋ฐฐ์๋ณด๊ณ ์ถ์ด์ ํ๋์ฉ ๋ฐ๋ผ์ ํด๋ณด๊ฒ ์ต๋๋ค! ๊ฐ์ฌํด์!
2022.02.11 23:09 ์ ๊ณ
ํ๋ ์ด๋จธ ์ ๋ฌธ ์ค์ธ๋ฐ ๋๋ฌด ์ดํด๊ฐ ์๊ฐ๊ฒ ํฌ์คํ ํด์ฃผ์ ์ ๊ฐ์ฌ๋๋ฆฌ๊ณ ์ถ์ด์
์ข์ ๊ธ ๊ฐ์ฌํฉ๋๋ค
์์๋ค
2022.06.26 11:57
์น์ ์ข๋ ์ฝ๊ฒ ๊ฐ๋ฐํ๋ ค๊ณ ๊ฒ์ํด์ ๊ณต๋ถํ๋ค๊ฐ ๋ค์ด์์ต๋๋ค.
๊ทธ๋ฐ๋ฐ ํ๋ ์ด๋จธ๋ ์์ฒด ํธ์คํ ์ธ์๋ ๋ค๋ฅธ ํธ์คํ ์ ํ์ฉํ์ง ์๋ ๊ฒ ๊ฐ๋ค์.
๋ง์ผ html export ํ๋ฉด... ํ๋ ์ด๋จธ์ cms ๊ธฐ๋ฅ์ ์์คํ๊ณ ๊ทธ๋ฅ ์ฌ์ดํธ ๊ป๋ฐ๊ธฐ๋ง ์ฌ์ฉํ๊ฒ ๋์ง ์์๊น ์ถ์ต๋๋ค.
ํน์ ์ด์ ๋ํด์ ๋ ์๊ณ ๊ณ์ ์ ๋ณด๊ฐ ์๋์ง์?
์๋ ๋งํฌ์์ ์ฐธ๊ณ ํ์ต๋๋ค.
https://www.framer.com/learn/custom-hosting/