DESIGN ๐ŸŒˆ 3

[๋‚ด๋ณด์“ด] Figma์—์„œ component, Instance๋Š”..?

์ž, ๋‚˜๋Š” ๊ธธ๊ฒŒ ์“ฐ๋Š” ๊ฑธ ์•ˆ์ข‹์•„ํ•˜๋‹ˆ ์งง๊ณ  ๊ฐ„๋‹จํ•˜๊ฒŒ ์š”์•ฝํ•  ๊ฒƒ์ด๋‹ค. figma์—์„œ component๊ฐ€ ๋ญ˜๊นŒ์š”?์šฐ์„  ๊ทธ๋Œ€๋กœ ํ•ด์„ํ•˜๋ฉด *component = ์š”์†Œ๋„ค, ๋ง ๊ทธ๋Œ€๋กœ ์š”์†Œ์ž„ ใ…‡ใ…‡.   ctrl+alt+K (ํ˜น์€ ์šฐํด๋ฆญ ํ›„ -> create component)๋กœ ์ปดํฌ๋„ŒํŠธ๋ฅผ ๋งŒ๋“ค์–ด์ค์‹œ๋‹ค.๋ณด๋ผ์ƒ‰์ด ๋๋‹ค๋ฉด? ์ปดํฌ๋„ŒํŠธ ๋œ๊ฑฐ์ž„.  ์ขŒ์ธก์— 'Assets'์—์„œ๋„ ํ™•์ธํ•  ์ˆ˜ ์žˆ๋‹ค.๊ทธ๋ฆฌ๊ณ  ํ•ด๋‹น ๋„ํ˜•์„ ์›ํ•˜๋Š” ๊ณณ์— ๋“œ๋ž˜๊ทธ ํ•˜๋ฉด ์˜ฎ๊ฒจ์™€์ง!ํšจ์œจ๋งŒ๋ ™ good goooooooood  ๊ทธ๋ ‡๋‹ค๋ฉด, instance๋Š” ๋ญ์ž„?๊ทธ๋‹ˆ๊นŒ. ์•ผ๋งค๋กœ ๋Œ€์ถฉ ์„ค๋ช…ํ•ด๋ณด์ž๋ฉด..๊ทธ๋ฆผ์ž ๊ฐ™์€ ์—ญํ• ์ด๋ผ ์ƒ๊ฐํ•˜๋ฉด ๋จ~๋ณธ์ฒด ํŒ”์„๋“ค๋ฉด ๊ทธ๋ฆผ์ž๋„ ํŒ”์„ ๋“ค์ž–์Šด?๊ทธ๋Ÿฐ๋А๋‚Œ ^^  component๋œ ๊ฒƒ์„ ๋ณต์‚ฌํ•ด์„œ ๋ถ™์—ฌ๋„ฃ์œผ๋ฉด instance๊ฐ€ ๋จ.instance ๊ตฌ๋ณ„๋ฒ•์„..

#01 (์‚ฌ์šฉ์ž๋ฅผ) ์ƒ๊ฐํ•˜๊ฒŒ ํ•˜์ง€๋งˆ! (1)

(์ฃผ๊ด€์ ์ธ ์ƒ๊ฐ์ด ๋งŽ์Šต๋‹ˆ๋‹ค ๐Ÿค”) ์ž˜ ์•Œ๊ณ  ์ง€๋‚ด๋Š” ๊ฐœ๋ฐœ์ž์—๊ฒŒ ์•„๋ž˜์™€ ๊ฐ™์€ ๋ง์„ ๋“ค์€ ์ ์ด ์žˆ๋‹ค. ๊ฐœ๋ฐœ์ž ์ž…๋ฌธ์ž๋Š” '์ฝ”๋”ฉ'์„ ๋ฐฐ์šด๋‹ค๊ณ  ํ•˜์ง€๋งŒ ๋””์ž์ธ ์ž…๋ฌธ์ž๋Š” ์™œ '๋””์ž์ธ'์ด ์•„๋‹Œ 'ํ”ผ๊ทธ๋งˆ' ์‚ฌ์šฉ๋ฒ•์„ ๋ฐฐ์šด๋‹ค๊ณ  ํ• ๊นŒ? ์ด ๋ง์„ ๋“ฃ๊ณ  ๋‚˜๋Š” ๋’คํ†ต์ˆ˜๋ฅผ ํ•œ๋Œ€ ์–ป์–ด๋งž์€ ๊ฒƒ ๊ฐ™์•˜๋‹ค. ์ƒ๊ฐํ•ด๋ณด๋ฉด, 'vs code' ์‚ฌ์šฉ๋ฒ•์„ ๋ฐฐ์šด๋‹ค๊ณ  ํ•˜๋Š” ๊ฐœ๋ฐœ์ž๋Š” ๋ณธ์ ์ด ์—†๋Š” ๊ฒƒ ๊ฐ™๋‹ค. vs code๋„ ์—ฌ๋Ÿฌ ๊ธฐ๋Šฅ์ด ์žˆ๋Š” ๊ฒƒ์œผ๋กœ ์•Œ๊ณ  ์žˆ๋‹ค. ํ”ผ๊ทธ๋งˆ๋Š” ๋ฌผ๋ก  ๊ธฐ๋Šฅ์ด ๋งค์šฐ ๋งŽ์•„์„œ ๋ฐฐ์›Œ์•ผ ํ•˜๋Š” ๊ฑด ๋งž์ง€๋งŒ, ํˆด์˜ ์‚ฌ์šฉ๋ฒ•๋ณด๋‹ค ์‚ฌ์šฉ์ž ๊ฒฝํ—˜, ๋ ˆ์ด์•„์›ƒ, ๊ทธ๋ฆฌ๋“œ ๋“ฑ์˜ ์Šคํ„ฐ๋””๋ฅผ ๋จผ์ € ์ง„ํ–‰ํ•˜๋Š” ์‚ฌ๋žŒ์€ ๋งŽ์ด ๋ชป๋ณธ ๊ฒƒ ๊ฐ™๋‹ค. ๋‚˜๋Š” ํ˜„์žฌ UI/UX๋””์ž์ด๋„ˆ์ง€๋งŒ, ์‚ฌ์‹ค ์‚ฌ์šฉ์ž๋ฅผ ์ดํ•ดํ•˜๋Š” '๋””์ž์ด๋„ˆ'๋ณด๋‹ค 'ํˆด ์‚ฌ์šฉ์ž'์— ๋” ๊ฐ€๊นŒ์› ๋‹ค. ์‚ฌ์šฉ์ž๋ฅผ ๋ชจ๋ฅด๋Š” ๋””์ž์ด๋„ˆ๋Š” ๋””์ž์ด๋„ˆ๊ฐ€ ..

#01 ๋ฉ”๋‰ดํŒ๋””์ž์ธ2

์•„์ง ๋””์ž์ธ์„ ์ž˜ ํ•˜๋Š”ํŽธ์ด ์•„๋‹ˆ์ง€๋งŒ ๊พธ์ค€ํžˆ ํ•˜๋ฉด ์˜ค๋ฅด๊ฒ ์ง€!? ํ™”์ดํŒ… ์ด๋‹ค.. (์‹œํ—˜์ด์—ˆ์–ด์„œ 3์ผ์ฐจ๊นŒ์ง€๋Š” ๊ฒŒ์‹œ๊ธ€์„ ํ•œ๋ฒˆ์— ์˜ฌ๋ฆฝ๋‹ˆ๋‹น 8ใ……8)