- ÇöÀç À§Ä¡
- home > ÄÄÇ»ÅÍ¡¤ICT¡¤¾îÇÐ > ÄÄÇ»ÅÍ¡¤IT µµ¼ > À¥»çÀÌÆ® > À¥ µðÀÚÀÎ & À¥ ÆÛºí¸®½ÌÀ» À§ÇÑ ÇDZ׸¶ ¿Ïº® È°¿ë¼[ºñÁ¦ÀÌÆÛºí¸¯]
º» µµ¼´Â À¥ µðÀÚÀλӸ¸ ¾Æ´Ï¶ó À¥ ÆÛºí¸®½Ì ±¸Çö±îÁö ÇÑ ¹ø¿¡ ÇнÀÇÒ ¼ö ÀÖ´Â À¯ÀÏÇÑ Ã¥ÀÌ´Ù. Ã¥ Àü¹Ý¿¡ °ÉÃÄ ¡®µðÀÚÀΡ¯ºÎÅÍ ¡®ÄÚµù¡¯±îÁö ÃѸÁ¶óÇϸç, ¸ð¹ÙÀÏ ¼îÇθô ¹× ¹ÝÀÀÇü Æ÷Æ®Æú¸®¿À À¥ ÆäÀÌÁö¸¦ Á¦ÀÛÇÑ´Ù.
[µðÀÚÀÎ ÆÄÆ®]¿¡¼´Â ·¹ÀÌ¾î ¡¤ ½ºÅ¸ÀÏ ¡¤ ÆÀ ¶óÀ̺귯¸® ¡¤ ÀÎÅÍ·¢¼Ç µî À¥ µðÀÚÀο¡ ÇÊ¿äÇÑ ÇDZ׸¶ÀÇ ÁÖ¿ä ±â´ÉÀ» ¼Ò°³ÇÑ´Ù. ƯÈ÷, ¾î¶»°Ô Çϸé È¿À²ÀûÀÌ°í ÀÏ°ü¼º ÀÖ°Ô ÄÚµùÇÒ ¼ö ÀÖÀ»Áö °í¹ÎÇÏ¸ç µðÀÚÀÎÇϱ⠶§¹®¿¡ ÃßÈÄ °³¹ß¿¡ ¿ëÀÌÇÏ°Ô ÀÛ¾÷ÇÏ´Â ¹æ¹ýÀ» ÀÍÈú ¼ö ÀÖ´Ù. [ÆÛºí¸®½Ì ÆÄÆ®]¿¡¼´Â ¿Ï¼ºÇÑ µðÀÚÀÎÀ» HTML ¡¤ CSS ¡¤ jQuery µîÀÇ ¾ð¾î·Î ±¸ÇöÇϸç, µ¥½ºÅ©Åé ¡¤ ÅÂºí¸´ ¡¤ ¸ð¹ÙÀÏ µî ´Ù¾çÇÑ Ç÷§Æû¿¡ ¸ÂÃç ±¸ÇöÇÑ´Ù. ÀÌ °úÁ¤¿¡¼ ÃֽŠÀ¥ Æ®·»µå ÄÚµù ±â¹ý°ú ÇDZ׸¶¸¦ ½º¸¶Æ®ÇÏ°Ô È°¿ëÇÏ´Â ÀúÀÚÀÇ ³ëÇϿ츦 üµæÇÒ ¼ö ÀÖ´Ù.
ÇDZ׸¶ÀÇ ¼ûÀº ±â´É±îÁö ºüÁü¾øÀÌ Ã¶ÀúÇÏ°Ô Â¤¾îÁÖ´Â ÀÌ Ã¥À» ÅëÇØ ÇDZ׸¶¸¦ ¿Ïº®ÇÏ°Ô È°¿ëÇÏ´Â ¹æ¹ýÀ» Å͵æÇØ º¸ÀÚ. À¥ µðÀÚÀÌ³Ê¿Í À¥ ÆÛºí¸®¼ÅÀÇ °æ°è¸¦ Ç㹫´Â, µðÀÚÀÎ ´É·Â»Ó¸¸ ¾Æ´Ï¶ó °³¹ß Áö½Ä±îÁö °®Ãá ¡®½Ç¹«Çü ÀÎÀ硯·Î °Åµì³¯ ¼ö ÀÖÀ» °ÍÀÌ´Ù.
[µðÀÚÀÎ ÆÄÆ®]¿¡¼´Â ·¹ÀÌ¾î ¡¤ ½ºÅ¸ÀÏ ¡¤ ÆÀ ¶óÀ̺귯¸® ¡¤ ÀÎÅÍ·¢¼Ç µî À¥ µðÀÚÀο¡ ÇÊ¿äÇÑ ÇDZ׸¶ÀÇ ÁÖ¿ä ±â´ÉÀ» ¼Ò°³ÇÑ´Ù. ƯÈ÷, ¾î¶»°Ô Çϸé È¿À²ÀûÀÌ°í ÀÏ°ü¼º ÀÖ°Ô ÄÚµùÇÒ ¼ö ÀÖÀ»Áö °í¹ÎÇÏ¸ç µðÀÚÀÎÇϱ⠶§¹®¿¡ ÃßÈÄ °³¹ß¿¡ ¿ëÀÌÇÏ°Ô ÀÛ¾÷ÇÏ´Â ¹æ¹ýÀ» ÀÍÈú ¼ö ÀÖ´Ù. [ÆÛºí¸®½Ì ÆÄÆ®]¿¡¼´Â ¿Ï¼ºÇÑ µðÀÚÀÎÀ» HTML ¡¤ CSS ¡¤ jQuery µîÀÇ ¾ð¾î·Î ±¸ÇöÇϸç, µ¥½ºÅ©Åé ¡¤ ÅÂºí¸´ ¡¤ ¸ð¹ÙÀÏ µî ´Ù¾çÇÑ Ç÷§Æû¿¡ ¸ÂÃç ±¸ÇöÇÑ´Ù. ÀÌ °úÁ¤¿¡¼ ÃֽŠÀ¥ Æ®·»µå ÄÚµù ±â¹ý°ú ÇDZ׸¶¸¦ ½º¸¶Æ®ÇÏ°Ô È°¿ëÇÏ´Â ÀúÀÚÀÇ ³ëÇϿ츦 üµæÇÒ ¼ö ÀÖ´Ù.
ÇDZ׸¶ÀÇ ¼ûÀº ±â´É±îÁö ºüÁü¾øÀÌ Ã¶ÀúÇÏ°Ô Â¤¾îÁÖ´Â ÀÌ Ã¥À» ÅëÇØ ÇDZ׸¶¸¦ ¿Ïº®ÇÏ°Ô È°¿ëÇÏ´Â ¹æ¹ýÀ» Å͵æÇØ º¸ÀÚ. À¥ µðÀÚÀÌ³Ê¿Í À¥ ÆÛºí¸®¼ÅÀÇ °æ°è¸¦ Ç㹫´Â, µðÀÚÀÎ ´É·Â»Ó¸¸ ¾Æ´Ï¶ó °³¹ß Áö½Ä±îÁö °®Ãá ¡®½Ç¹«Çü ÀÎÀ硯·Î °Åµì³¯ ¼ö ÀÖÀ» °ÍÀÌ´Ù.
ÀúÀÚ: ±èµ¿ÁÖ
[PART 1] Figma 100% È°¿ëÇϱâ - À¥ µðÀÚÀÎ
A. Figma ½ÃÀÛÇϱâ
i. Figma ¼³Ä¡ ¹× ½ÇÇà
ii. Figma UI
iii. Frame ¡¤ Shape ¡¤ Text
iv. Page
v. Pen Åø: »ç°¢Çü ¸¸µé±â
vi. Vector ÆíÁý: ¸é Ãß°¡Çϱâ
vii. Fill ¡¤ Stroke
viii. SVG ÃßÃâ ¹× ÄÚµå º¹»ç
ix. Component
x. Grid
B. µðÀÚÀ̳ÊÀÇ Figma »ç¿ëÇϱâ
i. Figma µðÀÚÀÎ
____·Î±×ÀÎ Çì´õ ¸¸µé±â
____·Î±×ÀÎ Æû µðÀÚÀÎÇϱâ
____Forgot Password Ãß°¡Çϱâ
____Footer ¼³Á¤Çϱâ
____Á¦¾à Á¶°Ç ¼³Á¤Çϱâ
ii. ÇÁ·ÎÅäŸÀÌÇÎ
____´ë½Ãº¸µå ÆäÀÌÁö µðÀÚÀÎ
____ȸ¿ø°¡ÀÔ ÆäÀÌÁö µðÀÚÀÎ
____ºñ¹Ð¹øÈ£ ã±â ÆäÀÌÁö µðÀÚÀÎ
____ÇÁ·ÎÅäŸÀÌÇÎ ¼³Á¤Çϱâ
iii. Çǵå¹é
[PART 2] Figma ½ÇÀü - ÇÁ·ÎÁ§Æ® µðÀÚÀÎ
A. Figma °í±Þ È°¿ë
i. ·¹À̾î Á¦¾à Á¶°Ç
ii. ¹öÀü °ü¸®
iii. ½ºÅ¸ÀÏ
____Color ½ºÅ¸ÀÏ
____Text ½ºÅ¸ÀÏ
____Drop Shadow ½ºÅ¸ÀÏ
____Grid ½ºÅ¸ÀÏ
iv. ÆÀ ¶óÀ̺귯¸®
v. ÇÁ·ÎÅäŸÀÌÇÎ
____µð¹ÙÀ̽º ÇÁ·¹ÀÓ
____¿ÜºÎ À¥»çÀÌÆ® URL
____ÀÌÀü ÇÁ·¹ÀÓÀ¸·ÎÀÇ Hotspots
____°íÁ¤ ¿ÀºêÁ§Æ®
____½ºÅ©·Ñ ¿µ¿ª
____ÀÎÅÍ·¢¼Ç ¡¤ Æ®·£Áö¼Ç
vi. Figma¿¡¼ Illustrator ÆÄÀÏ »ç¿ëÇϱâ
vii. Çù¾÷
____Figma·Î Çù¾÷Çϱâ
____ÆÀ »ý¼º°ú °ü¸®
____ÆÀ ¸â¹ö ±ÇÇÑ °ü¸®
____ÄÄÆ÷³ÍÆ® ½ºÅ¸ÀÏ °øÀ¯Çϱâ
____°øÀ¯
____ÄÚ¸àÆ®
____¹öÀü °ü¸®
____±âŸ Åø·Î ÅëÇÕ
B. [½ÇÀü ÇÁ·ÎÁ§Æ®] ¸ð¹ÙÀÏ ¼îÇθô°ú ¹ÝÀÀÇü ·£µùÆäÀÌÁö ¿Ï¼ºÇϱâ
i. ÃֽŠÀ¥ µðÀÚÀÎ Æ®·»µå
____UI/UX
____Micro-Interaction
____Minimalism
____Typography
ii. ¸ð¹ÙÀÏ ¼îÇθô µðÀÚÀÎ
____¸ÞÀΠȸé
____·Î±×ÀÎ
____ȸ¿ø°¡ÀÔ
____»óÇ° ¸ñ·Ï
____Ä«Å×°í¸® ¸ñ·Ï
____»óÇ° »ó¼¼ÆäÀÌÁö
____Àå¹Ù±¸´Ï
____ÁÖ¹® ÆäÀÌÁö
____³×ºñ°ÔÀÌ¼Ç ¸Þ´º
iii. ¹ÝÀÀÇü Æ÷Æ®Æú¸®¿À ÆäÀÌÁö µðÀÚÀÎ
____PC ȸé
____ÅÂºí¸´ ȸé
____¸ð¹ÙÀÏ È¸é
[PART 3] Figma ¾÷±×·¹À̵å - ½º¸¶Æ®ÇÑ È°¿ë¹ý
A. Figma Ç÷¯±×ÀÎ
i. Unsplash
ii. Content Reel
iii. Image Palette
iv. Super Tidy
v. Able
B. Figma À¯¿ëÇÑ ÆÁ
i. ·¹À̾î ÆгΠÆÁ
____¸ðµç ¿ÀºêÁ§Æ® Àá±Ý Ç®±â ¹× ¼û±è ÇØÁ¦
____·¹À̾î À̸§ ºü¸£°Ô º¯°æÇϱâ
____´ÙÁß ·¹À̾ ÇѲ¨¹ø¿¡ ¿°í ´Ý±â
____·¹À̾îÀÇ Ç¥½Ã¸¦ ºü¸£°Ô ÀüȯÇϱâ
ii. ¿ÀºêÁ§Æ® ¼±Åà ÆÁ
____°°Àº ¼Ó¼ºÀÇ ¿ÀºêÁ§Æ® ºü¸£°Ô ¼±Åà ÆíÁýÇϱâ
____»ó/ÇÏÀ§ ¿ä¼Ò ¼±ÅÃÇϱâ
iii. ·¹ÀÌ¾î ½×±â ÆÁ
____·¹ÀÌ¾î ¼ø¼ º¯°æÇϱâ
____·¹ÀÌ¾î ºü¸£°Ô ¼±ÅÃÇϱâ
iv. ĵ¹ö½º ÆÁ
____µðÀÚÀΠȸ鿡¼ ·¹ÀÌ¾î ¼±ÅÃÇϱâ
____Á» ´õ Á¤È®ÇÏ°Ô È®´ë Ãà¼ÒÇϱâ
____¿ÀºêÁ§Æ® Áß½ÉÀ¸·Î ¹Ù·Î È®´ëÇϱâ
v. ÇÁ·¹ÀÓ ÆÁ
____³»¿ëÀ» Æ÷ÇÔÇÏ¿© »õ ÇÁ·¹ÀÓ »ý¼ºÇϱâ
____³»¿ë¿¡ ¸ÂÃç ÇÁ·¹ÀÓ Å©±â Á¶ÀýÇϱâ
____ÇÁ·¹ÀÓ Å©±â È®´ë Ãà¼ÒÇϱâ
vi. ÇÁ·ÎÁ§Æ® ¡¤ ÆäÀÌÁö ¡¤ ¾ÆÆ®º¸µå ÆÁ
____ÇÁ·ÎÁ§Æ® ½æ³×ÀÏ ¸¸µé±â
____ÆäÀÌÁö Àüȯ
____¾ÆÆ®º¸µå °£ À̵¿Çϱâ
____ÇÁ·¹ÀÓ °¡µ¶¼º ¿Ã¸®±â
vii. ¼Ó¼º ÆÁ
____¿ÀºêÁ§Æ®ÀÇ ¼Ó¼º º¹»çÇϱâ
____ÅؽºÆ® ¼Ó¼º º¯°æÇϱâ
____¼Ó¼º°ªÀÇ ¼öÄ¡ º¯°æÇϱâ
____¹æÇâÅ°·Î »ö»ó Á¶ÀýÇϱâ
viii. À̹ÌÁö ÆÁ
____À̹ÌÁö ä¿ì±â ¼¼ÆÃ
____Æú´õÀÇ À̹ÌÁö¸¦ Åë°·Î Place ImageÇϱâ
____´ÙÁß À̹ÌÁö ·ÎµåÇϱâ
ix. º¤ÅÍ ±×·¡ÇÈ ÆÁ
____º¹ÀâÇÑ º¤ÅÍ ±×·¡ÇÈ ±¸ÇöÇϱâ
____¿ÀºêÁ§Æ®¿¡¼ ¹Ù·Î svg ÅÂ±× »ý¼ºÇϱâ
____svg ÅÂ±× º¹»çÇϱâ
x. ÄÄÆ÷³ÍÆ® ÆÁ
____ÄÄÆ÷³ÍÆ® Çø³Çϱâ
____¹Ýº¹ ÆÐÅÏ ¸¸µé±â
xi. ·¹À̾ƿô ÆÁ
____µîô¼º(Isometric) ½±°Ô ºñƲ±â(Skew)
____¾ÆÀÌÅÛ °£ÀÇ °£°Ý Á¦°ÅÇϱâ
____Á» ´õ Á¤È®ÇÏ°Ô Á¤·ÄÇϱâ
xii. ÇÚµå¿ÀÇÁ Å×½ºÆ® ÆÁ
____ÀνºÆåÆ® ÅÇÀ» ÅëÇÑ Ãâ·Â
____ºÙ¿©³Ö±âÇÒ ÄÚµå »ý¼ºÇϱâ
____¸ð¹ÙÀÏ ±â±â¿¡¼ Figma ¹Ì·¯ ¾ÛÀ¸·Î Å×½ºÆ®Çϱâ
____ºê¶ó¿ìÀú¿¡¼ Figma ¹Ì·¯ ¾ÛÀ¸·Î Å×½ºÆ®Çϱâ
xiii. ±âŸ ÆÁ
____¾Æ¿ô¶óÀÎ ¸ðµå Àüȯ
____´ÜÃàÅ°Ç¥ Á¢¼ÓÇϱâ
____³ÓÁö ¾ç Á¶ÀýÇϱâ
C. Figma ´ÜÃàÅ°
[PART 4] Figma 200% È°¿ëÇϱâ - À¥ ÆÛºí¸®½Ì
A. Figma È°¿ë À¥ ÆÛºí¸®½Ì
B. [Figma to HTML ½ÇÀü] ¸ð¹ÙÀÏ ¼îÇθô ¿Ï¼ºÇϱâ
i. ¸ð¹ÙÀÏ ¼îÇθô µðÀÚÀÎ HTML
ii. ¸ð¹ÙÀÏ ¼îÇθô µðÀÚÀÎ CSS
iii. ¸ð¹ÙÀÏ ¼îÇθô SCRIPT
C. [Figma to HTML ½ÇÀü] ¹ÝÀÀÇü Æ÷Æ®Æú¸®¿À ÆäÀÌÁö µðÀÚÀÎÇϱâ
i. Æ÷Æ®Æú¸®¿À ÆäÀÌÁöHTML
ii. Æ÷Æ®Æú¸®¿À ÆäÀÌÁöCSS - PC ȸé
iii. Æ÷Æ®Æú¸®¿À ÆäÀÌÁö CSS - ÅÂºí¸´ ¡¤ ¸ð¹ÙÀÏ È¸é
[PART 5] ºÎ·Ï - Figma¿Í Adobe XDÀÇ ºñ±³
A. Figma¿Í Adobe XD ºñ±³
i. Áö¿ø Ç÷§Æû
ii. Çù¾÷ ¡¤ °øÀ¯ ¡¤
iii. µðÀÚÀÎ
iv. µðÀÚÀÎ ½Ã½ºÅÛ
v. ÇÁ·ÎÅäŸÀÌÇÎ
vi. ÇÚµå¿ÀÇÁ
vii. ±âŸ »çÇ×
viii. °¡°Ý
ix. ÃÖÁ¾ ºñ±³
A. Figma ½ÃÀÛÇϱâ
i. Figma ¼³Ä¡ ¹× ½ÇÇà
ii. Figma UI
iii. Frame ¡¤ Shape ¡¤ Text
iv. Page
v. Pen Åø: »ç°¢Çü ¸¸µé±â
vi. Vector ÆíÁý: ¸é Ãß°¡Çϱâ
vii. Fill ¡¤ Stroke
viii. SVG ÃßÃâ ¹× ÄÚµå º¹»ç
ix. Component
x. Grid
B. µðÀÚÀ̳ÊÀÇ Figma »ç¿ëÇϱâ
i. Figma µðÀÚÀÎ
____·Î±×ÀÎ Çì´õ ¸¸µé±â
____·Î±×ÀÎ Æû µðÀÚÀÎÇϱâ
____Forgot Password Ãß°¡Çϱâ
____Footer ¼³Á¤Çϱâ
____Á¦¾à Á¶°Ç ¼³Á¤Çϱâ
ii. ÇÁ·ÎÅäŸÀÌÇÎ
____´ë½Ãº¸µå ÆäÀÌÁö µðÀÚÀÎ
____ȸ¿ø°¡ÀÔ ÆäÀÌÁö µðÀÚÀÎ
____ºñ¹Ð¹øÈ£ ã±â ÆäÀÌÁö µðÀÚÀÎ
____ÇÁ·ÎÅäŸÀÌÇÎ ¼³Á¤Çϱâ
iii. Çǵå¹é
[PART 2] Figma ½ÇÀü - ÇÁ·ÎÁ§Æ® µðÀÚÀÎ
A. Figma °í±Þ È°¿ë
i. ·¹À̾î Á¦¾à Á¶°Ç
ii. ¹öÀü °ü¸®
iii. ½ºÅ¸ÀÏ
____Color ½ºÅ¸ÀÏ
____Text ½ºÅ¸ÀÏ
____Drop Shadow ½ºÅ¸ÀÏ
____Grid ½ºÅ¸ÀÏ
iv. ÆÀ ¶óÀ̺귯¸®
v. ÇÁ·ÎÅäŸÀÌÇÎ
____µð¹ÙÀ̽º ÇÁ·¹ÀÓ
____¿ÜºÎ À¥»çÀÌÆ® URL
____ÀÌÀü ÇÁ·¹ÀÓÀ¸·ÎÀÇ Hotspots
____°íÁ¤ ¿ÀºêÁ§Æ®
____½ºÅ©·Ñ ¿µ¿ª
____ÀÎÅÍ·¢¼Ç ¡¤ Æ®·£Áö¼Ç
vi. Figma¿¡¼ Illustrator ÆÄÀÏ »ç¿ëÇϱâ
vii. Çù¾÷
____Figma·Î Çù¾÷Çϱâ
____ÆÀ »ý¼º°ú °ü¸®
____ÆÀ ¸â¹ö ±ÇÇÑ °ü¸®
____ÄÄÆ÷³ÍÆ® ½ºÅ¸ÀÏ °øÀ¯Çϱâ
____°øÀ¯
____ÄÚ¸àÆ®
____¹öÀü °ü¸®
____±âŸ Åø·Î ÅëÇÕ
B. [½ÇÀü ÇÁ·ÎÁ§Æ®] ¸ð¹ÙÀÏ ¼îÇθô°ú ¹ÝÀÀÇü ·£µùÆäÀÌÁö ¿Ï¼ºÇϱâ
i. ÃֽŠÀ¥ µðÀÚÀÎ Æ®·»µå
____UI/UX
____Micro-Interaction
____Minimalism
____Typography
ii. ¸ð¹ÙÀÏ ¼îÇθô µðÀÚÀÎ
____¸ÞÀΠȸé
____·Î±×ÀÎ
____ȸ¿ø°¡ÀÔ
____»óÇ° ¸ñ·Ï
____Ä«Å×°í¸® ¸ñ·Ï
____»óÇ° »ó¼¼ÆäÀÌÁö
____Àå¹Ù±¸´Ï
____ÁÖ¹® ÆäÀÌÁö
____³×ºñ°ÔÀÌ¼Ç ¸Þ´º
iii. ¹ÝÀÀÇü Æ÷Æ®Æú¸®¿À ÆäÀÌÁö µðÀÚÀÎ
____PC ȸé
____ÅÂºí¸´ ȸé
____¸ð¹ÙÀÏ È¸é
[PART 3] Figma ¾÷±×·¹À̵å - ½º¸¶Æ®ÇÑ È°¿ë¹ý
A. Figma Ç÷¯±×ÀÎ
i. Unsplash
ii. Content Reel
iii. Image Palette
iv. Super Tidy
v. Able
B. Figma À¯¿ëÇÑ ÆÁ
i. ·¹À̾î ÆгΠÆÁ
____¸ðµç ¿ÀºêÁ§Æ® Àá±Ý Ç®±â ¹× ¼û±è ÇØÁ¦
____·¹À̾î À̸§ ºü¸£°Ô º¯°æÇϱâ
____´ÙÁß ·¹À̾ ÇѲ¨¹ø¿¡ ¿°í ´Ý±â
____·¹À̾îÀÇ Ç¥½Ã¸¦ ºü¸£°Ô ÀüȯÇϱâ
ii. ¿ÀºêÁ§Æ® ¼±Åà ÆÁ
____°°Àº ¼Ó¼ºÀÇ ¿ÀºêÁ§Æ® ºü¸£°Ô ¼±Åà ÆíÁýÇϱâ
____»ó/ÇÏÀ§ ¿ä¼Ò ¼±ÅÃÇϱâ
iii. ·¹ÀÌ¾î ½×±â ÆÁ
____·¹ÀÌ¾î ¼ø¼ º¯°æÇϱâ
____·¹ÀÌ¾î ºü¸£°Ô ¼±ÅÃÇϱâ
iv. ĵ¹ö½º ÆÁ
____µðÀÚÀΠȸ鿡¼ ·¹ÀÌ¾î ¼±ÅÃÇϱâ
____Á» ´õ Á¤È®ÇÏ°Ô È®´ë Ãà¼ÒÇϱâ
____¿ÀºêÁ§Æ® Áß½ÉÀ¸·Î ¹Ù·Î È®´ëÇϱâ
v. ÇÁ·¹ÀÓ ÆÁ
____³»¿ëÀ» Æ÷ÇÔÇÏ¿© »õ ÇÁ·¹ÀÓ »ý¼ºÇϱâ
____³»¿ë¿¡ ¸ÂÃç ÇÁ·¹ÀÓ Å©±â Á¶ÀýÇϱâ
____ÇÁ·¹ÀÓ Å©±â È®´ë Ãà¼ÒÇϱâ
vi. ÇÁ·ÎÁ§Æ® ¡¤ ÆäÀÌÁö ¡¤ ¾ÆÆ®º¸µå ÆÁ
____ÇÁ·ÎÁ§Æ® ½æ³×ÀÏ ¸¸µé±â
____ÆäÀÌÁö Àüȯ
____¾ÆÆ®º¸µå °£ À̵¿Çϱâ
____ÇÁ·¹ÀÓ °¡µ¶¼º ¿Ã¸®±â
vii. ¼Ó¼º ÆÁ
____¿ÀºêÁ§Æ®ÀÇ ¼Ó¼º º¹»çÇϱâ
____ÅؽºÆ® ¼Ó¼º º¯°æÇϱâ
____¼Ó¼º°ªÀÇ ¼öÄ¡ º¯°æÇϱâ
____¹æÇâÅ°·Î »ö»ó Á¶ÀýÇϱâ
viii. À̹ÌÁö ÆÁ
____À̹ÌÁö ä¿ì±â ¼¼ÆÃ
____Æú´õÀÇ À̹ÌÁö¸¦ Åë°·Î Place ImageÇϱâ
____´ÙÁß À̹ÌÁö ·ÎµåÇϱâ
ix. º¤ÅÍ ±×·¡ÇÈ ÆÁ
____º¹ÀâÇÑ º¤ÅÍ ±×·¡ÇÈ ±¸ÇöÇϱâ
____¿ÀºêÁ§Æ®¿¡¼ ¹Ù·Î svg ÅÂ±× »ý¼ºÇϱâ
____svg ÅÂ±× º¹»çÇϱâ
x. ÄÄÆ÷³ÍÆ® ÆÁ
____ÄÄÆ÷³ÍÆ® Çø³Çϱâ
____¹Ýº¹ ÆÐÅÏ ¸¸µé±â
xi. ·¹À̾ƿô ÆÁ
____µîô¼º(Isometric) ½±°Ô ºñƲ±â(Skew)
____¾ÆÀÌÅÛ °£ÀÇ °£°Ý Á¦°ÅÇϱâ
____Á» ´õ Á¤È®ÇÏ°Ô Á¤·ÄÇϱâ
xii. ÇÚµå¿ÀÇÁ Å×½ºÆ® ÆÁ
____ÀνºÆåÆ® ÅÇÀ» ÅëÇÑ Ãâ·Â
____ºÙ¿©³Ö±âÇÒ ÄÚµå »ý¼ºÇϱâ
____¸ð¹ÙÀÏ ±â±â¿¡¼ Figma ¹Ì·¯ ¾ÛÀ¸·Î Å×½ºÆ®Çϱâ
____ºê¶ó¿ìÀú¿¡¼ Figma ¹Ì·¯ ¾ÛÀ¸·Î Å×½ºÆ®Çϱâ
xiii. ±âŸ ÆÁ
____¾Æ¿ô¶óÀÎ ¸ðµå Àüȯ
____´ÜÃàÅ°Ç¥ Á¢¼ÓÇϱâ
____³ÓÁö ¾ç Á¶ÀýÇϱâ
C. Figma ´ÜÃàÅ°
[PART 4] Figma 200% È°¿ëÇϱâ - À¥ ÆÛºí¸®½Ì
A. Figma È°¿ë À¥ ÆÛºí¸®½Ì
B. [Figma to HTML ½ÇÀü] ¸ð¹ÙÀÏ ¼îÇθô ¿Ï¼ºÇϱâ
i. ¸ð¹ÙÀÏ ¼îÇθô µðÀÚÀÎ HTML
ii. ¸ð¹ÙÀÏ ¼îÇθô µðÀÚÀÎ CSS
iii. ¸ð¹ÙÀÏ ¼îÇθô SCRIPT
C. [Figma to HTML ½ÇÀü] ¹ÝÀÀÇü Æ÷Æ®Æú¸®¿À ÆäÀÌÁö µðÀÚÀÎÇϱâ
i. Æ÷Æ®Æú¸®¿À ÆäÀÌÁöHTML
ii. Æ÷Æ®Æú¸®¿À ÆäÀÌÁöCSS - PC ȸé
iii. Æ÷Æ®Æú¸®¿À ÆäÀÌÁö CSS - ÅÂºí¸´ ¡¤ ¸ð¹ÙÀÏ È¸é
[PART 5] ºÎ·Ï - Figma¿Í Adobe XDÀÇ ºñ±³
A. Figma¿Í Adobe XD ºñ±³
i. Áö¿ø Ç÷§Æû
ii. Çù¾÷ ¡¤ °øÀ¯ ¡¤
iii. µðÀÚÀÎ
iv. µðÀÚÀÎ ½Ã½ºÅÛ
v. ÇÁ·ÎÅäŸÀÌÇÎ
vi. ÇÚµå¿ÀÇÁ
vii. ±âŸ »çÇ×
viii. °¡°Ý
ix. ÃÖÁ¾ ºñ±³