- ÇöÀç À§Ä¡
- home > ÄÄÇ»ÅÍ¡¤ICT¡¤¾îÇÐ > ÄÄÇ»ÅÍ¡¤IT µµ¼ > À¥»çÀÌÆ® > Figma °¡À̵åºÏ[ºñÁ¦ÀÌÆÛºí¸¯]
»õ·Ó°Ô µîÀåÇÑ µðÀÚÀÎ Åø Figma¸¦
ÀÌ Ã¥ ÇÑ ±ÇÀ¸·Î Á¤¸®ÇÑ´Ù!
Figma´Â Áö±Ý±îÁöÀÇ ÇÁ·ÎÅäŸÀÌÇÎ Åø°ú ´Þ¸® ½Ç½Ã°£ Çù¾÷À» Á¦°øÇÏ°í ºê¶ó¿ìÀú ±â¹ÝÀÇ º¤ÅÍ µðÀÚÀÎ ÀÛ¾÷ÀÌ °¡´ÉÇÕ´Ï´Ù. ¿Â¤ý¿ÀÇÁ¶óÀο¡ ¹«°üÇÏ°Ô ÀÛ¾÷ÀÌ °¡´ÉÇÏ°í ¹«Á¦ÇÑ Å¬¶ó¿ìµå¸¦ Á¦°øÇؼ UI, UX µðÀÚÀ̳ÊÀÇ ÀÛ¾÷ ȯ°æÀ» °£°áÇÏ°Ô ¸¸µé¾îÁÝ´Ï´Ù.
ÄÄÆ÷³ÍÆ® ±â¹ÝÀ¸·Î ±¸µ¿ÇÏ´Â °³¹ß ȯ°æ¿¡ ¸ÂÃß¾î µðÀÚÀÎ ½Ã½ºÅÛÀ» ±¸ÃàÇÏ´Â ±â¾÷°ú °³ÀÎ ÇÁ·ÎÁ§Æ®°¡ Áõ°¡ÇÏ´Â Ãß¼¼¿¡ µû¶ó Figmaµµ µðÀÚÀÎ ÄÄÆ÷³ÍÆ®¸¦ ½±°Ô °ü¸®ÇÒ ¼ö ÀÖµµ·Ï ´Ù¾çÇÑ ±â´ÉµéÀ» Á¦°øÇÏ°í ÀÖ½À´Ï´Ù. ¿©·¯ºÐµµ ÀÌ Ã¥À» ÅëÇØ ´©±¸º¸´Ù ºü¸£°Ô ÃֽŠÇÁ·ÎÅäŸÀÌÇÎ ÅøÀ» Á¢ÇÏ´Â °æÇèÀ» Çغ¸½Ã±â ¹Ù¶ø´Ï´Ù.
ÀÌ Ã¥ÀÇ Æ¯Â¡
- ±âº»ÀûÀÎ FigmaÀÇ »ç¿ë ¹æ¹ýºÎÅÍ ÄÄÆ÷³ÍÆ® °ü¸®±îÁö ´Ù·é´Ù.
- ºÒÇÊ¿äÇÑ ³»¿ëÀº ¹èÁ¦ÇÏ°í ²À ÇÊ¿äÇÑ ±â´É¸¸ Á¤¸®Çß´Ù.
- ½ÇÀü µðÀÚÀÎ ¿¹Á¦¸¦ Çϳª¾¿ ¸¸µé¾î°¡¸ç ±â´ÉÀ» ÀÚ¼¼È÷ ¾Ë¾Æº¼ ¼ö ÀÖ´Ù.
ÀÌ Ã¥ÀÌ ÇÊ¿äÇÑ µ¶ÀÚ
- ¸ð¹ÙÀÏ, À¥ µðÀÚÀ̳ʷΠȰµ¿ÇÏ°íÀÚ ÇÏ´Â UI, UX µðÀÚÀ̳Ê
- µðÀÚÀÎ ½Ç·Â°ú ´õºÒ¾î ÇÁ·ÎÅäŸÀÌÇαîÁö ¿Ï¼ºÇغ¸°í ½ÍÀº µðÀÚÀ̳Ê
- ¸ð¹ÙÀÏ, À¥ ¼ºñ½º¸¦ ±âȹÇÏ´Â ±âȹÀÚ
µ¶ÀÚ´ë»ó
ÃÊÁß±Þ
¼Ò½ºÄÚµå ´Ù¿î·Îµå
https://github.com/bjpublic/figma
ÀÌ Ã¥ ÇÑ ±ÇÀ¸·Î Á¤¸®ÇÑ´Ù!
Figma´Â Áö±Ý±îÁöÀÇ ÇÁ·ÎÅäŸÀÌÇÎ Åø°ú ´Þ¸® ½Ç½Ã°£ Çù¾÷À» Á¦°øÇÏ°í ºê¶ó¿ìÀú ±â¹ÝÀÇ º¤ÅÍ µðÀÚÀÎ ÀÛ¾÷ÀÌ °¡´ÉÇÕ´Ï´Ù. ¿Â¤ý¿ÀÇÁ¶óÀο¡ ¹«°üÇÏ°Ô ÀÛ¾÷ÀÌ °¡´ÉÇÏ°í ¹«Á¦ÇÑ Å¬¶ó¿ìµå¸¦ Á¦°øÇؼ UI, UX µðÀÚÀ̳ÊÀÇ ÀÛ¾÷ ȯ°æÀ» °£°áÇÏ°Ô ¸¸µé¾îÁÝ´Ï´Ù.
ÄÄÆ÷³ÍÆ® ±â¹ÝÀ¸·Î ±¸µ¿ÇÏ´Â °³¹ß ȯ°æ¿¡ ¸ÂÃß¾î µðÀÚÀÎ ½Ã½ºÅÛÀ» ±¸ÃàÇÏ´Â ±â¾÷°ú °³ÀÎ ÇÁ·ÎÁ§Æ®°¡ Áõ°¡ÇÏ´Â Ãß¼¼¿¡ µû¶ó Figmaµµ µðÀÚÀÎ ÄÄÆ÷³ÍÆ®¸¦ ½±°Ô °ü¸®ÇÒ ¼ö ÀÖµµ·Ï ´Ù¾çÇÑ ±â´ÉµéÀ» Á¦°øÇÏ°í ÀÖ½À´Ï´Ù. ¿©·¯ºÐµµ ÀÌ Ã¥À» ÅëÇØ ´©±¸º¸´Ù ºü¸£°Ô ÃֽŠÇÁ·ÎÅäŸÀÌÇÎ ÅøÀ» Á¢ÇÏ´Â °æÇèÀ» Çغ¸½Ã±â ¹Ù¶ø´Ï´Ù.
ÀÌ Ã¥ÀÇ Æ¯Â¡
- ±âº»ÀûÀÎ FigmaÀÇ »ç¿ë ¹æ¹ýºÎÅÍ ÄÄÆ÷³ÍÆ® °ü¸®±îÁö ´Ù·é´Ù.
- ºÒÇÊ¿äÇÑ ³»¿ëÀº ¹èÁ¦ÇÏ°í ²À ÇÊ¿äÇÑ ±â´É¸¸ Á¤¸®Çß´Ù.
- ½ÇÀü µðÀÚÀÎ ¿¹Á¦¸¦ Çϳª¾¿ ¸¸µé¾î°¡¸ç ±â´ÉÀ» ÀÚ¼¼È÷ ¾Ë¾Æº¼ ¼ö ÀÖ´Ù.
ÀÌ Ã¥ÀÌ ÇÊ¿äÇÑ µ¶ÀÚ
- ¸ð¹ÙÀÏ, À¥ µðÀÚÀ̳ʷΠȰµ¿ÇÏ°íÀÚ ÇÏ´Â UI, UX µðÀÚÀ̳Ê
- µðÀÚÀÎ ½Ç·Â°ú ´õºÒ¾î ÇÁ·ÎÅäŸÀÌÇαîÁö ¿Ï¼ºÇغ¸°í ½ÍÀº µðÀÚÀ̳Ê
- ¸ð¹ÙÀÏ, À¥ ¼ºñ½º¸¦ ±âȹÇÏ´Â ±âȹÀÚ
µ¶ÀÚ´ë»ó
ÃÊÁß±Þ
¼Ò½ºÄÚµå ´Ù¿î·Îµå
https://github.com/bjpublic/figma
ÀúÀÚ: ±è¼öÀç
Chapter 01 »õ·Î¿î µðÀÚÀÎ Åø FigmaÀÇ µîÀå
1.1 Figma »ç¿ë ÁغñÇϱâ
1.2 Figma ´ÜÃàÅ° ¹Ì¸®º¸±â
1.3 Figma¿Í ¿ÀÇÁ¶óÀο¡¼ ÀÛ¾÷Çϱâ
1.4 Figma ¼³Ä¡
1.5 Figma µÑ·¯º¸±â
1.6 Figma¿¡¼ »õ·Î¿î µðÀÚÀÎ ÆÄÀÏÀ» »ý¼ºÇÏ´Â ¹æ¹ý
Chapter 02 Figma ¸Þ´º
2.1 À̵¿ µµ±¸/½ºÄÉÀÏ µµ±¸
2.2 Figma ´ÜÃàÅ° ¹Ì¸®º¸±â
2.3 ¸ð¾ç µµ±¸
2.4 Ææ µµ±¸
2.5 ÅؽºÆ® µµ±¸
2.6 ÇÚµå Åø
2.7 ÄÚ¸àÆ®
2.8 °´Ã¼ ÆíÁý
2.9 ÄÄÆ÷³ÍÆ® »ý¼º
2.10 ¸¶½ºÅ©
2.11 Boolean
2.12 ¸ÖƼ Ç÷¹ÀÌ¾î ¹× °üÂû ¸ðµå
2.13 °øÀ¯
2.14 ÇÁ·¹Á¨Å×À̼Ç
2.15 º¸±â ¸ðµå¿Í ÁÜ(Zoom)
2.16 ·¹À̾ƿô ±×¸®µå
2.17 ¸ÖƼ Ç÷¹À̾î Ä¿¼
2.18 ĵ¹ö½º µÑ·¯º¸±â
2.19 À̹ÌÁö¸¦ Figma·Î °¡Á®¿À´Â ¹æ¹ý
Chapter 03 Figma ÀÌÇØÇϱâ
3.1 ÇÁ·¹ÀÓ
3.2 Figma ±âº», µµÇü¿¡ ´ëÇÑ ÀÌÇØ
Chapter 04 Figma¸¦ È°¿ëÇÑ UI µðÀÚÀÎ
4.1 UI µðÀÚÀÎ Âü°í »çÀÌÆ®
4.2 ÄÄÆ÷³ÍÆ®¸¦ »ç¿ëÇÏ´Â ÀÌÀ¯
4.3 ±âº» ÄÄÆ÷³ÍÆ® ¸¸µé±â
4.4 ÄÄÆ÷³ÍÆ®¸¦ ±×·ìÀ¸·Î ¸¸µé±â
4.5 ¿¬°üµÈ ÄÄÆ÷³ÍÆ®¸¦ È°¿ëÇÏ´Â ¹æ¹ý
4.6 ¿¬°ü ÄÄÆ÷³ÍÆ®¸¦ ¸¸µå´Â ¶Ç ´Ù¸¥ ¹æ¹ý
4.7 ³»ºñ°ÔÀÌ¼Ç ÄÄÆ÷³ÍÆ® µðÀÚÀÎ
4.8 ¿ÜºÎ UI KIT¸¦ UI¿¡ Àû¿ëÇϱâ
4.9 Åǹ٠¸¸µé±â
4.10 ¹ÝÀÀÇü UI ±¸¼º
Chapter 05 ÄÄÆ÷³ÍÆ® ±â¹Ý µðÀÚÀÎ ½Ã½ºÅÛ ±¸Ãà
5.1 µðÀÚÀÎ(UI, UX) °¡À̵å¶óÀÎ
5.2 µðÀÚÀÎ ½Ã½ºÅÛ
5.3 µðÀÚÀÎ ½Ã½ºÅÛÀ» ±¸ÃàÇÏ¸é¼ ¹è¿ì´Â Figma
Chapter 06 ÇÁ·ÎÅäŸÀÌÇÎ
6.1 ÇÁ·ÎÅäŸÀÌÇÎ
6.2 ÇÁ·ÎÅäŸÀÌÇÎÀÇ Çʿ伺
6.3 ÇÁ·ÎÅäŸÀÌÇΰú »ç¿ëÀÚ Å×½ºÆ®
6.4 ÇÁ·ÎÅäŸÀÌÇÎ ±¸ÇöÇϱâ
Chapter 07 Figma Àüȯ È¿°ú
7.1 Navigate to
7.2 ÇÁ·ÎÅäŸÀÌÇÎÀÇ ²É ¡®Smart Animate¡¯
7.3 Smart Animate ±â´ÉÀ» È°¿ëÇؼ µµÇüÀ» À̵¿½ÃÅ°±â
7.4 ½ºÅ©·Ñ ±â´É
7.5 Å°º¸µå ÇÁ·ÎÅäŸÀÌÇÎ È¿°ú
7.6 ¿À¹ö·¹À̸¦ È°¿ëÇÑ Å°º¸µå ÇÁ·ÎÅäŸÀÌÇÎ È¿°ú
Chapter 08 ¿Ï¼ºµÈ ³»¿ëÀ» È®ÀÎÇÏ´Â ¶Ç ´Ù¸¥ ¹æ¹ý Mirror ¾Û
Chapter 09 °øÀ¯ ¹× °øµ¿ ÀÛ¾÷
9.1 °³¹ßÀÚ¿ÍÀÇ °øÀ¯
9.2 ÃÊ´ëµÈ »ç¿ëÀÚ°¡ ÇÒ ¼ö ÀÖ´Â °Í
Chapter 10 ½ÇÀü UI ÀÛ¾÷ ÇÉÅ×Å© ¾Û µðÀÚÀÎ
Chapter 11 ÆÀ ¶óÀ̺귯¸® ¸¸µé±â
Chapter 12 ÆÄÀÏ ºê¶ó¿ì¡°ú ¹öÀü °ü¸®
Chapter 13 Á÷Á¢ Figma ÆÄÀÏ °ü¸® ¹æ¹ý
Chapter 14 ½ºÄÉÄ¡ ÆÄÀÏÀ» Figma¿¡¼ ¿±â
Chapter 15 TIPS
1.1 Figma »ç¿ë ÁغñÇϱâ
1.2 Figma ´ÜÃàÅ° ¹Ì¸®º¸±â
1.3 Figma¿Í ¿ÀÇÁ¶óÀο¡¼ ÀÛ¾÷Çϱâ
1.4 Figma ¼³Ä¡
1.5 Figma µÑ·¯º¸±â
1.6 Figma¿¡¼ »õ·Î¿î µðÀÚÀÎ ÆÄÀÏÀ» »ý¼ºÇÏ´Â ¹æ¹ý
Chapter 02 Figma ¸Þ´º
2.1 À̵¿ µµ±¸/½ºÄÉÀÏ µµ±¸
2.2 Figma ´ÜÃàÅ° ¹Ì¸®º¸±â
2.3 ¸ð¾ç µµ±¸
2.4 Ææ µµ±¸
2.5 ÅؽºÆ® µµ±¸
2.6 ÇÚµå Åø
2.7 ÄÚ¸àÆ®
2.8 °´Ã¼ ÆíÁý
2.9 ÄÄÆ÷³ÍÆ® »ý¼º
2.10 ¸¶½ºÅ©
2.11 Boolean
2.12 ¸ÖƼ Ç÷¹ÀÌ¾î ¹× °üÂû ¸ðµå
2.13 °øÀ¯
2.14 ÇÁ·¹Á¨Å×À̼Ç
2.15 º¸±â ¸ðµå¿Í ÁÜ(Zoom)
2.16 ·¹À̾ƿô ±×¸®µå
2.17 ¸ÖƼ Ç÷¹À̾î Ä¿¼
2.18 ĵ¹ö½º µÑ·¯º¸±â
2.19 À̹ÌÁö¸¦ Figma·Î °¡Á®¿À´Â ¹æ¹ý
Chapter 03 Figma ÀÌÇØÇϱâ
3.1 ÇÁ·¹ÀÓ
3.2 Figma ±âº», µµÇü¿¡ ´ëÇÑ ÀÌÇØ
Chapter 04 Figma¸¦ È°¿ëÇÑ UI µðÀÚÀÎ
4.1 UI µðÀÚÀÎ Âü°í »çÀÌÆ®
4.2 ÄÄÆ÷³ÍÆ®¸¦ »ç¿ëÇÏ´Â ÀÌÀ¯
4.3 ±âº» ÄÄÆ÷³ÍÆ® ¸¸µé±â
4.4 ÄÄÆ÷³ÍÆ®¸¦ ±×·ìÀ¸·Î ¸¸µé±â
4.5 ¿¬°üµÈ ÄÄÆ÷³ÍÆ®¸¦ È°¿ëÇÏ´Â ¹æ¹ý
4.6 ¿¬°ü ÄÄÆ÷³ÍÆ®¸¦ ¸¸µå´Â ¶Ç ´Ù¸¥ ¹æ¹ý
4.7 ³»ºñ°ÔÀÌ¼Ç ÄÄÆ÷³ÍÆ® µðÀÚÀÎ
4.8 ¿ÜºÎ UI KIT¸¦ UI¿¡ Àû¿ëÇϱâ
4.9 Åǹ٠¸¸µé±â
4.10 ¹ÝÀÀÇü UI ±¸¼º
Chapter 05 ÄÄÆ÷³ÍÆ® ±â¹Ý µðÀÚÀÎ ½Ã½ºÅÛ ±¸Ãà
5.1 µðÀÚÀÎ(UI, UX) °¡À̵å¶óÀÎ
5.2 µðÀÚÀÎ ½Ã½ºÅÛ
5.3 µðÀÚÀÎ ½Ã½ºÅÛÀ» ±¸ÃàÇÏ¸é¼ ¹è¿ì´Â Figma
Chapter 06 ÇÁ·ÎÅäŸÀÌÇÎ
6.1 ÇÁ·ÎÅäŸÀÌÇÎ
6.2 ÇÁ·ÎÅäŸÀÌÇÎÀÇ Çʿ伺
6.3 ÇÁ·ÎÅäŸÀÌÇΰú »ç¿ëÀÚ Å×½ºÆ®
6.4 ÇÁ·ÎÅäŸÀÌÇÎ ±¸ÇöÇϱâ
Chapter 07 Figma Àüȯ È¿°ú
7.1 Navigate to
7.2 ÇÁ·ÎÅäŸÀÌÇÎÀÇ ²É ¡®Smart Animate¡¯
7.3 Smart Animate ±â´ÉÀ» È°¿ëÇؼ µµÇüÀ» À̵¿½ÃÅ°±â
7.4 ½ºÅ©·Ñ ±â´É
7.5 Å°º¸µå ÇÁ·ÎÅäŸÀÌÇÎ È¿°ú
7.6 ¿À¹ö·¹À̸¦ È°¿ëÇÑ Å°º¸µå ÇÁ·ÎÅäŸÀÌÇÎ È¿°ú
Chapter 08 ¿Ï¼ºµÈ ³»¿ëÀ» È®ÀÎÇÏ´Â ¶Ç ´Ù¸¥ ¹æ¹ý Mirror ¾Û
Chapter 09 °øÀ¯ ¹× °øµ¿ ÀÛ¾÷
9.1 °³¹ßÀÚ¿ÍÀÇ °øÀ¯
9.2 ÃÊ´ëµÈ »ç¿ëÀÚ°¡ ÇÒ ¼ö ÀÖ´Â °Í
Chapter 10 ½ÇÀü UI ÀÛ¾÷ ÇÉÅ×Å© ¾Û µðÀÚÀÎ
Chapter 11 ÆÀ ¶óÀ̺귯¸® ¸¸µé±â
Chapter 12 ÆÄÀÏ ºê¶ó¿ì¡°ú ¹öÀü °ü¸®
Chapter 13 Á÷Á¢ Figma ÆÄÀÏ °ü¸® ¹æ¹ý
Chapter 14 ½ºÄÉÄ¡ ÆÄÀÏÀ» Figma¿¡¼ ¿±â
Chapter 15 TIPS