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

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

ยท

2020. 7. 13. 10:52

728x90
๋ฐ˜์‘ํ˜•

๐Ÿ”ฎ ๋งค์ง๋ชจ์…˜(Magic Motion)์ด๋ž€?

๋งค์ง๋ชจ์…˜์€ ํ•œ ์ƒํƒœ์—์„œ ๋‹ค๋ฅธ ์ƒํƒœ๋กœ ๋ ˆ์ด์–ด์— ์• ๋‹ˆ๋ฉ”์ด์…˜์„ ์ ์šฉํ•  ์ˆ˜ ์žˆ๋Š” ์ „ํ™˜ ์œ ํ˜•์ž…๋‹ˆ๋‹ค.

ํ•œ ๋ ˆ์ด์–ด์—์„œ ๋‹ค์Œ ๋ ˆ์ด์–ด๋กœ ์ด๋™ํ•˜๋ฉด Framer๊ฐ€ ๋ณ€๊ฒฝ๋œ ๋ถ€๋ถ„์„ ์ฐพ์•„๋‚ด๊ณ  ์• ๋‹ˆ๋ฉ”์ด์…˜์„ ์ ์šฉํ•ฉ๋‹ˆ๋‹ค.

๐Ÿ’ ๋ชฉํ‘œ ๊ฒฐ๊ณผ๋ฌผ

๊ฐ•์˜๋ฅผ ๋๊นŒ์ง€ ๋”ฐ๋ผ์˜ค์‹œ๋ฉด ์•„๋ž˜์˜ ๋งค์ง ๋ชจ์…˜์ด ์ ์šฉ๋œ ํƒญ๋ฉ”๋‰ด๋ฅผ ๊ตฌํ˜„ํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.

๋งค์ง๋ชจ์…˜์ด ์ ์šฉ๋œ ํƒญ๋ฉ”๋‰ด

โ—๏ธ ์‹œ์ž‘ํ•˜๊ธฐ ์ „์—

ํ˜น์‹œ ์•„์ง Framer ๊ณ„์ •์„ ๊ฐ€์ž…ํ•˜์ง€ ์•Š์œผ์…จ๊ฑฐ๋‚˜ ํ”„๋ ˆ์ด๋จธ ์‚ฌ์šฉ๋ฐฉ๋ฒ•์„ ๋ชจ๋ฅด์‹œ๋Š” ๋ถ„์€ ์•„๋ž˜๋ฅผ ์ฐธ๊ณ ํ•ด์„œ ๊ณ„์ • ๋“ฑ๋ก์„ ํ•˜๊ณ  Framer ํ”„๋กœ์ ํŠธ ์ƒ์„ฑ๊นŒ์ง€ ํ•˜์‹œ๊ธฐ ๋ฐ”๋ž๋‹ˆ๋‹ค.

 

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

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

webruden.tistory.com

 

๐Ÿ“ฑ ๋””๋ฐ”์ด์Šค ๋ ˆ์ด์–ด ์ƒ์„ฑ

์ƒ๋‹จ์˜ ํ”„๋ ˆ์ž„์„ ๋ˆ„๋ฅด๊ณ  ์›ํ•˜๋Š” ๋””๋ฐ”์ด์Šค ๋ ˆ์ด์–ด๋ฅผ ์ถ”๊ฐ€ํ•ด ์ฃผ์„ธ์š”.

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

๐Ÿ“š ์Šคํƒ ์ถ”๊ฐ€

์Šคํƒ์„ ์‚ฌ์šฉํ•˜๋ฉด ํ”„๋ ˆ์ž„์„ ์‚ฌ์šฉํ•˜์—ฌ ์œ ์—ฐํ•˜๊ณ  ์ž๋™์œผ๋กœ ๋ถ„์‚ฐ๋œ ๋ ˆ์ด์•„์›ƒ์„ ์‰ฝ๊ฒŒ ๋งŒ๋“ค ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.

์Šคํƒ ์ถ”๊ฐ€ ์˜ˆ์‹œ

์Šคํƒ ์•ˆ์— ํ”„๋ ˆ์ž„์„ ์‚ฝ์ž…ํ•˜๋ฉด ์ด๋ ‡๊ฒŒ ์ž๋™์œผ๋กœ ์œ„์น˜๊ฐ€ ์ •๋ ฌ๋ฉ๋‹ˆ๋‹ค. ๊ต‰์žฅํžˆ ํŽธ๋ฆฌํ•˜์ฃ ? ๐Ÿ˜Ž

ํ”„๋ ˆ์ž„ ์‚ฝ์ž… ์˜ˆ์‹œ

ํ”„๋ ˆ์ž„์˜ ์—ฌ๋ฐฑ์„ ์—†์• ๊ธฐ ์œ„ํ•ด Layout ํŒจ๋„์— ์žˆ๋Š” Width์™€ Height ์†์„ฑ์„ Fixed์—์„œ Fraction๋กœ ๋ณ€๊ฒฝํ•ฉ๋‹ˆ๋‹ค. ๋ถ€๋ชจ ์Šคํƒ ์‚ฌ์ด์ฆˆ์— ๋งž์ถฐ์„œ ์—ฌ๋ฐฑ์—†์ด ๋ชจ๋‘ ์ฑ„์›Œ์ง‘๋‹ˆ๋‹ค.

Fraction ์ ์šฉ ์˜ˆ์‹œ

๐Ÿ– ๊ทธ๋ผ๋””์–ธํŠธ ์ ์šฉ

ํƒญ๋ฉ”๋‰ด ๋ฐฑ๊ทธ๋ผ์šด๋“œ์— ๊ทธ๋ผ๋””์–ธํŠธ๋ฅผ ์ ์šฉํ•ฉ๋‹ˆ๋‹ค. #0eca68,#00bf5f ์ด๋ ‡๊ฒŒ 2๊ฐ€์ง€ ์ปฌ๋Ÿฌ๋กœ ๊ทธ๋ผ๋””์–ธํŠธ๋ฅผ ์ ์šฉํ•˜๋„๋ก ํ•˜๊ฒ ์Šต๋‹ˆ๋‹ค. ๊ทธ๋ผ๋””์–ธํŠธ์˜ ๋ฐฉํ–ฅ์€ ์‹ค์„ ์˜ ์–‘์ชฝ์— ์žˆ๋Š” ํ•ธ๋“ค๋Ÿฌ๋กœ ์›€์ง์ด๋ฉด์„œ ์กฐ์ •ํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.

๊ทธ๋ผ๋””์–ธํŠธ ์ ์šฉ ์˜ˆ์‹œ

ํƒญ ๋ฉ”๋‰ด์— ๊ฐ ํƒญ์— ํ•ด๋‹นํ•˜๋Š” ํ…์ŠคํŠธ๋ฅผ ์‚ฝ์ž…ํ•ฉ๋‹ˆ๋‹ค.

ํ…์ŠคํŠธ ์‚ฝ์ž…

ํƒญ ๋ฉ”๋‰ด์— ๋‰ด์Šค, ์—ฐ์˜ˆ, ์Šคํฌ์ธ , ๊ฒ€์ƒ‰์ฐจํŠธ ํ…์ŠคํŠธ๋ฅผ ์‚ฝ์ž…ํ•ด์ค๋‹ˆ๋‹ค.

๋ชจ๋“  ํƒญ์˜ ํ…์ŠคํŠธ ์ปฌ๋Ÿฌ๋Š” #fff๋กœ ๋™์ผํ•˜๊ณ  ๋น„ํ™œ์„ฑํ™” ํƒญ์˜ ํ…์ŠคํŠธ์˜ ๊ฒฝ์šฐ opacity 0.75๋ฅผ ์ ์šฉํ•˜๊ฒ ์Šต๋‹ˆ๋‹ค.

๋„ค๋น„๊ฒŒ์ด์…˜ ์˜ˆ์‹œ

๋งค์ง ๋ชจ์…˜์„ ์ ์šฉํ•˜๊ธฐ ์œ„ํ•ด ํƒญ ๋ฉ”๋‰ด ํ•˜๋‹จ์— ํ”„๋ ˆ์ž„์„ ์ถ”๊ฐ€ํ•ฉ๋‹ˆ๋‹ค. border์˜ ํšจ๊ณผ๋ฅผ ๋‚ด๊ธฐ ์œ„ํ•ด ์ถ”๊ฐ€ํ•œ ํ”„๋ ˆ์ž„์ž…๋‹ˆ๋‹ค.

์ƒ‰์ƒ์€ #fff opacity 0.75์„ ์ค๋‹ˆ๋‹ค.

ํ”„๋ ˆ์ž„ ์ถ”๊ฐ€

ํ™œ์„ฑํ™” ํƒญ์— ํ™œ์„ฑํ™” ํšจ๊ณผ๋ฅผ ์ฃผ๊ธฐ ์œ„ํ•ด ํ”„๋ ˆ์ž„์„ ์ถ”๊ฐ€ํ•ฉ๋‹ˆ๋‹ค. ์•„์ดํ…œ ํฌ๊ธฐ์— ๋งž์ถฐ์„œ ํ”„๋ ˆ์ž„์„ ์ถ”๊ฐ€ํ•ฉ๋‹ˆ๋‹ค. ์ปฌ๋Ÿฌ๋Š” #fff, ๋†’์ด๊ฐ’์€ 4px์ž…๋‹ˆ๋‹ค.

highlight ํ”„๋ ˆ์ž„ ์˜ˆ์‹œ

๐Ÿ–ผ ์ƒ˜ํ”Œ ์ด๋ฏธ์ง€ ์ถ”๊ฐ€

์ด์ œ ๊ฐ ํƒญ์— ์ƒ˜ํ”Œ ์ฝ˜ํ…์ธ ๋ฅผ ๋„ฃ์–ด๋ณผ๊ฒŒ์š”! ๋‰ด์Šค, ์—ฐ์˜ˆ, ์Šคํฌ์ธ , ๊ฒ€์ƒ‰์ฐจํŠธ์— ๋งž๋Š” ์ƒ˜ํ”Œ ์ด๋ฏธ์ง€๋ฅผ ์‚ฝ์ž…ํ•ฉ๋‹ˆ๋‹ค.

์ƒ˜ํ”Œ๋กœ ์‚ฌ์šฉ๋  ์ด๋ฏธ์ง€

์ƒ˜ํ”Œ ์ด๋ฏธ์ง€๋ฅผ ๋„ฃ์„ ์˜์—ญ์— ํ”„๋ ˆ์ž„์„ ์‚ฝ์ž…ํ•ฉ๋‹ˆ๋‹ค. ํƒญ ๋ฉ”๋‰ด ํ•˜๋‹จ ์ „์ฒด ์˜์—ญ์œผ๋กœ ์žก๊ณ  ํ”„๋ ˆ์ž„์„ ์‚ฝ์ž…ํ•ฉ๋‹ˆ๋‹ค.

๋”๋ฏธ ์ด๋ฏธ์ง€ ์˜์—ญ ์˜ˆ์‹œ

์ƒ์„ฑํ•œ ํ”„๋ ˆ์ž„์˜ ๋ฐฑ๊ทธ๋ผ์šด๋“œ์— ์ด๋ฏธ์ง€๋ฅผ ์‚ฝ์ž…ํ•ฉ๋‹ˆ๋‹ค.

์ด๋ฏธ์ง€ ์‚ฝ์ž… ์˜ˆ์‹œ

์ด์ œ ๊ฐ ํƒญ์— ๋งž๋Š” ์ด๋ฏธ์ง€๋ฅผ ์‚ฝ์ž…ํ•˜๊ธฐ ์œ„ํ•ด ๋ ˆ์ด์–ด๋ฅผ ๋ณต์ œํ•ฉ๋‹ˆ๋‹ค.

์ด๋ฏธ์ง€ ๋ณต์ œ

๋ ˆ์ด์–ด๋ฅผ ๋ณต์ œํ•œ ํ›„ ๊ฐ ๋ ˆ์ด์–ด์˜ ์ด๋ฆ„์„ Tab A, Tab B, Tab C, Tab D๋กœ ๋ณ€๊ฒฝํ•ฉ๋‹ˆ๋‹ค.

ํƒญ ์ด๋ฆ„ ๋ณ€๊ฒฝ

์ด์ œ ๊ฐ ํƒญ์— ๋งž๋Š” ์ด๋ฏธ์ง€๋ฅผ ๋ณต์ œํ•œ ๋ ˆ์ด์–ด ํƒญ์— ์‚ฝ์ž…ํ•ฉ๋‹ˆ๋‹ค.

๊ฐ ํƒญ์˜ ํ™œ์„ฑํ™” ์ƒํƒœ๋ฅผ ๋ณ€๊ฒฝํ•ด์ค๋‹ˆ๋‹ค.

ํ™œ์„ฑํ™” ์ƒํƒœ ๋ณ€๊ฒฝ

๐Ÿ”ฎ ๋งค์ง๋ชจ์…˜ ์ ์šฉ

์ด์ œ ๋ ˆ์ด์–ด์˜ ํƒญ๋ฉ”๋‰ด์— ๋งค์ง๋ชจ์…˜์„ ์ ์šฉํ•ฉ๋‹ˆ๋‹ค. ์ฒซ ๋ฒˆ์งธ ๋ ˆ์ด์–ด์˜ ์—ฐ์˜ˆ ํƒญ์— Tab B ๋ ˆ์ด์–ด๋ฅผ ์—ฐ๊ฒฐํ•˜๋„๋ก ํ•˜๊ฒ ์Šต๋‹ˆ๋‹ค.

์ฒซ ๋ฒˆ์งธ ๋ ˆ์ด์–ด(Tab A)์˜ ์—ฐ์˜ˆ ํƒญ์„ ๋ˆ„๋ฅธ ํ›„ Interactions -> Tap -> Magic Motion์„ ์„ ํƒํ•œ ํ›„ Target์„ ๋‘ ๋ฒˆ์งธ ๋ ˆ์ด์–ด(Tab B)๋กœ ์ง€์ •ํ•ฉ๋‹ˆ๋‹ค.

Tab A ๋งค์ง๋ชจ์…˜ ์ ์šฉ ์˜ˆ์‹œ

Tab A ๋ ˆ์ด์–ด์— ๋งค์ง๋ชจ์…˜์„ ์ ์šฉํ•œ ๊ฒƒ์ฒ˜๋Ÿผ Tab B ๋ ˆ์ด์–ด์˜ ๋‰ด์Šค ํƒญ์— ๋™์ผํ•˜๊ฒŒ ๋งค์ง๋ชจ์…˜์„ ์ ์šฉํ•˜๊ฒ ์Šต๋‹ˆ๋‹ค. ๋ฐฉ๋ฒ•์€ ๋™์ผํ•˜๊ณ  Target์„ Tab A๋กœ ์ง€์ •ํ•ด์ฃผ์‹œ๋ฉด ๋ฉ๋‹ˆ๋‹ค.

Tab B ๋งค์ง๋ชจ์…˜ ์ ์šฉ ์˜ˆ์‹œ

ํƒญ ๋ฉ”๋‰ด๋ฅผ ๋ˆ„๋ฅด๋ฉด ๋งค์ง ๋ชจ์…˜์ด ์ ์šฉ๋˜์—ˆ์Œ์„ ํ™•์ธํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.

๋งค์ง ๋ชจ์…˜ ์ ์šฉ ์˜ˆ์‹œ

์ „์ฒด ๋ ˆ์ด์–ด์˜ ํƒญ ๋ฉ”๋‰ด์— ๋งค์ง๋ชจ์…˜์„ ์ถ”๊ฐ€ํ•ด์ค๋‹ˆ๋‹ค.

ํƒญ๋ฉ”๋‰ด ํƒญ๋ ˆ์ด์–ด ์—ฐ๊ฒฐ ์˜ˆ์‹œ

๐ŸŽ‰ ๊ฒฐ๊ณผ๋ฌผ

ํƒญ๋ฉ”๋‰ด ๊ฒฐ๊ณผ๋ฌผ

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

Framer์—์„œ ์ œ๊ณตํ•˜๋Š” Magic Motion๊ณผ Stack์„ ํ™œ์šฉํ•ด์„œ ํƒญ ๋ฉ”๋‰ด๋ฅผ ๊ตฌํ˜„ํ•ด๋ดค์Šต๋‹ˆ๋‹ค. Magic Motion์œผ๋กœ ๊ตฌํ˜„๋œ ์• ๋‹ˆ๋ฉ”์ด์…˜ ํผํฌ๋จผ์Šค๋Š” ์ƒ๊ฐ๋ณด๋‹ค ํ›Œ๋ฅญํ–ˆ์Šต๋‹ˆ๋‹ค. (์›น์—์„œ ์• ๋‹ˆ๋ฉ”์ด์…˜์„ ๋ถ€๋“œ๋Ÿฝ๊ฒŒ ๊ตฌ๋™์‹œํ‚ค๋ ค๋ฉด ๊ต‰์žฅํžˆ ์„ธ์‹ฌํ•˜๊ฒŒ ์‹ ๊ฒฝ์„ ๋งŽ์ด ์จ์•ผ ๋ฉ๋‹ˆ๋‹ค.) ๊ทธ๋ฆฌ๊ณ  Stack์˜ ํŽธ๋ฆฌํ•จ์€ ์ •๋ง ๋†€๋ผ์› ์Šต๋‹ˆ๋‹ค. ์„ธ๋ถ€์ ์ธ ์กฐ์ • ํ•„์š” ์—†์ด ์ž๋™์œผ๋กœ ๊ฐ ์•„์ดํ…œ๋“ค์˜ ์ •๋ ฌ์„ ๋งž์ถฐ์ฃผ๋Š” ๊ฒŒ ๊ต‰์žฅํžˆ ํŽธ๋ฆฌํ–ˆ์Šต๋‹ˆ๋‹ค. ๋‹ค์Œ ํฌ์ŠคํŒ…์—๋Š” ์ข€ ๋” ์žฌ๋ฐŒ๋Š” ์˜ˆ์ œ๋กœ ์ฐพ์•„๋ต™๋„๋ก ํ•˜๊ฒ ์Šต๋‹ˆ๋‹ค. ๐Ÿ˜Ž

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

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

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

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