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

๊ฐ•์˜/Framer

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

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

2020.07.13 ๊ฒŒ์‹œ๋จ

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

๊ฐ•์˜/Framer

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

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

2020.07.10 ๊ฒŒ์‹œ๋จ

728x90
๋ฐ˜์‘ํ˜•