µðÀÚÀÎ ½Ã½ºÅÛ: Àϰü¼º°ú È¿À²¼ºÀ» ¸¸µå´Â Àü·«Àû µµ±¸
»ê¾÷ ³»ºÎÀÇ µðÀÚÀÎ, '½Ã½ºÅÛ'ÀÌ µÉ ¶§
»ç¿ëÀÚ Á᫐ µðÀÚÀÎÀ̶ó°í ÇÏ¸é º¸Åë ¼ÒºñÀÚ¸¦ ´ë»óÀ¸·Î ÇÏ´Â ¼ºñ½º, ¿¹¸¦ µé¾î ¾ÛÀ̳ª À¥»çÀÌÆ®ÀÇ UI/UX¸¦ ¶°¿Ã¸®±â ½±´Ù. ÇÏÁö¸¸ »ç½Ç»ó ¿ì¸®°¡ Á¦Ç°°ú ¼ºñ½º¸¦ ¸¸µé¾î³»´Â °³¹ß ÇÁ·Î¼¼½º ³»ºÎÀÇ Á¾»çÀÚµé ¿ª½Ã ÇϳªÀÇ »ç¿ëÀÚ¶ó°í º¼ ¼ö ÀÖ´Ù. À̵éÀº µðÀÚÀÌ³Ê¿Í °³¹ßÀÚ, ±âȹÀÚ, ¿î¿µÀÚ µî Á¦Ç° Á¦ÀÛ¿¡ Á÷Á¢ °ü¿©ÇÏ´Â »ç¶÷µé·Î, ±×µéÀÌ »ç¿ëÇÏ´Â µµ±¸³ª ½Ã½ºÅÛ ¶ÇÇÑ ¸íÈ®ÇÏ°í Æí¸®ÇÑ »ç¿ëÀÚ °æÇèÀ» Á¦°øÇØ¾ß ÇÑ´Ù.
ÃÖ±Ù¿¡´Â µðÁöÅÐ ¼ºñ½ºÀÇ ¾çÀÌ Æø¹ßÀûÀ¸·Î Áõ°¡Çϰí ÀÖ´Ù. ÀÌ °¡¿îµ¥ À¯µ¶ ´«¿¡ ¶ç´Â ºê·£µåµéÀÌ ÀÖ´Ù. ÀÌµé ºê·£µå´Â ´ÜÀÏ Á¦Ç°¸¸À¸·Î ½ÂºÎÇÏÁö ¾Ê´Â´Ù. ´Ù¾çÇÑ Ç÷§Æû°ú ¼ºñ½º, º¹ÀâÇÑ ±â´ÉµéÀÌ ¾ôÇô ÀÖÀ½¿¡µµ ºÒ±¸Çϰí ÀϰüµÈ ½Ã°¢Àû °æÇè°ú »ç¿ë¼ºÀ» Àü´ÞÇÑ´Ù. ±× °á°ú »ç¿ëÀÚµéÀº ¼ºñ½º¸¦ ³Ñ³ªµé¸é¼µµ µ¿ÀÏÇÑ ºê·£µå ¾È¿¡ ¸Ó¹°·¯ ÀÖ´Ù´Â ÀνÄÀ» ÇÏ°Ô µÈ´Ù.
ÀÌó·³ ÇϳªÀÇ ºê·£µå°¡ ¿©·¯ Á¦Ç°±ºÀ» ÀϰüµÇ°Ô À¯ÁöÇÒ ¼ö ÀÖ´Â ¹è°æ¿¡´Â ¹Ù·Î ¡®µðÀÚÀÎ ½Ã½ºÅÛ¡¯ÀÌ Á¸ÀçÇÑ´Ù. µðÀÚÀÎ ½Ã½ºÅÛÀº ´Ü¼øÈ÷ º¸±â ÁÁ°Ô ¸¸µå´Â µµ±¸¸¦ ³Ñ¾î¼, µðÀÚÀΰú °³¹ßÀÇ È¿À²À» ³ôÀ̰í, Çù¾÷À» ¿øÈ°ÇÏ°Ô Çϸç, ºê·£µå Á¤Ã¼¼ºÀ» À¯ÁöÇÏ´Â ÇÙ½É ¼ö´ÜÀÌ µÈ´Ù. ±×·¡¼ À̹ø ¸®Æ÷Æ®¿¡¼´Â µðÀÚÀÎ ½Ã½ºÅÛÀÌ ¹«¾ùÀÎÁö, ¿Ö Áß¿äÇÑÁö, ±×¸®°í ¾î¶»°Ô ¸¸µé°í Ȱ¿ëÇÒ ¼ö ÀÖ´ÂÁö¸¦ Á¤¸®Çغ»´Ù.
µðÀÚÀÎ ½Ã½ºÅÛÀ̶õ ¹«¾ùÀϱî?
µðÀÚÀÎ ½Ã½ºÅÛÀº ÀϰüµÈ »ç¿ëÀÚ °æÇèÀ» ¸¸µé±â À§ÇÑ ½Ã°¢Àû ¾ð¾î¿Í ±ÔÄ¢ÀÇ ÁýÇÕÀÌ´Ù. ¿©±â¿¡´Â ¹öư, ¾ÆÀÌÄÜ, »ö»ó, ŸÀÌÆ÷±×·¡ÇÇ °°Àº UI ±¸¼º ¿ä¼Ò´Â ¹°·Ð, ±× ¿ä¼ÒµéÀÌ ¾î¶»°Ô ¾²¿©¾ß ÇÏ´ÂÁö¿¡ ´ëÇÑ °¡À̵å¶óÀαîÁö Æ÷ÇԵȴÙ. ´õ ³ª¾Æ°¡ ÄÚµå ´ÜÀ§ÀÇ Àç»ç¿ë °¡´ÉÇÑ ÄÄÆ÷³ÍÆ®, Áï °³¹ßÀÚ°¡ ½ÇÁ¦ ±¸ÇöÇÒ ¼ö ÀÖ´Â ÅäÅ«(token)°ú ÄÄÆ÷³ÍÆ®·Î ¿¬°áµÇ±âµµ ÇÑ´Ù.
½±°Ô ¸»Çϸé, µðÀÚÀÎ ½Ã½ºÅÛÀº µðÀÚÀÌ³Ê¿Í °³¹ßÀÚ°¡ °°Àº ¾ð¾î·Î ´ëÈÇÒ ¼ö ÀÖ°Ô ÇØÁÖ´Â ¡®°øÅëÀÇ ÂüÁ¶ ¹®¼¡¯ÀÌÀÚ ¡®µµ±¸ »óÀÚ¡¯ ¿ªÇÒÀ» ÇÑ´Ù. »õ·Î¿î ȸéÀ» ¸¸µé ¶§¸¶´Ù µðÀÚÀÎÀ» »õ·Î ÇÏ´Â °ÍÀÌ ¾Æ´Ï¶ó, ¹Ì¸® Á¤ÀÇµÈ ±¸¼º ¿ä¼Ò¸¦ Á¶ÇÕÇÔÀ¸·Î½á ºü¸£°í Á¤È®ÇÏ°Ô ÀÛ¾÷ÇÒ ¼ö ÀÖ°Ô µ½´Â´Ù.

À̹ÌÁö ¼³¸í: ¹®¼ ¹øÈ£(document numbering) »ý¼º ±ÔÄ¢. µðÀÚÀÎ ½Ã½ºÅÛÀº ¹®¼ ¹øÈ£¸¦ ºÙÀÌ´Â ¹æ½Ä°ú À¯»çÇÏ°Ô µðÀÚÀÎ ±ÔÄ¢À» ¸¸µå´Â °ÍÀÌ´Ù.
(Ãâó: https://images.app.goo.gl/ywr94kGGLkxSSi8L6)
µðÀÚÀÎ ½Ã½ºÅÛÀÌ ¿Ö ÇÊ¿äÇÒ±î?
µðÀÚÀÎ ½Ã½ºÅÛÀÇ °¡Àå Å« ÀåÁ¡Àº ¡®Àϰü¼º¡¯ÀÌ´Ù. ¿©·¯ ¸íÀÇ µðÀÚÀÌ³Ê¿Í °³¹ßÀÚ°¡ µ¿½Ã¿¡ ÀÛ¾÷ÇÏ´õ¶óµµ ÇϳªÀÇ Á¦Ç°Ã³·³ º¸À̰í ÀÛµ¿ÇÒ ¼ö ÀÖ°Ô ¸¸µç´Ù. »ç¿ëÀÚ´Â °¢±â ´Ù¸¥ ¼ºñ½º¿¡¼ À¯»çÇÑ ¹æ½ÄÀ¸·Î Á¤º¸¸¦ ã°í, ¹öưÀ» ´©¸£°í, ȸéÀ» Ž»öÇÏ°Ô µÈ´Ù. ±×¸¸Å ÇнÀ ºñ¿ëÀÌ ÁÙ¾îµé°í ¸¸Á·µµ°¡ ³ô¾ÆÁø´Ù.
¶ÇÇÑ ¡®»ý»ê¼º¡¯ÀÌ Å©°Ô Çâ»óµÈ´Ù. ¹Ýº¹ÀûÀ¸·Î ¸¸µé´ø ¹öưÀ̳ª Ä«µå µîÀÇ ÄÄÆ÷³ÍÆ®¸¦ ¸Å¹ø »õ·Î µðÀÚÀÎÇÏ°í °³¹ßÇÒ Çʿ䰡 ¾ø´Ù. ÀÌ¹Ì °ËÁõµÈ ÄÄÆ÷³ÍÆ®¸¦ °¡Á®´Ù ¾²¸é µÇ±â ¶§¹®¿¡, Á¦Ç° Ãâ½Ã±îÁöÀÇ ½Ã°£ÀÌ ´ÜÃàµÈ´Ù. µ¡ºÙ¿© Çù¾÷ °úÁ¤¿¡¼µµ È¥¶õÀ» ÁÙÀÏ ¼ö ÀÖ´Ù. µðÀÚÀÌ³Ê¿Í °³¹ßÀÚ°¡ µ¿ÀÏÇÑ ±âÁØÀ» °øÀ¯ÇÔÀ¸·Î½á Ä¿¹Â´ÏÄÉÀÌ¼Ç ºñ¿ëÀÌ ÁÙ°í, QA(ǰÁú °ËÁõ) °úÁ¤¿¡¼µµ ¿À·ù°¡ ÁÙ¾îµç´Ù.
ºê·£µå °ü¸® Ãø¸é¿¡¼µµ µðÀÚÀÎ ½Ã½ºÅÛÀº ÇʼöÀûÀÌ´Ù. ¼ºñ½º°¡ È®ÀåµÇ°í ÆÄÆíȵɼö·Ï ºê·£µåÀÇ Àϰü¼ºÀ» À¯ÁöÇϱ⠾î·Á¿öÁø´Ù. À̶§ µðÀÚÀÎ ½Ã½ºÅÛÀº ºê·£µåÀÇ ½Ã°¢Àû ¾ÆÀ̵§Æ¼Æ¼¸¦ ¸ðµç Á¢Á¡¿¡ µ¿ÀÏÇÏ°Ô Àû¿ëÇÒ ¼ö ÀÖµµ·Ï µµ¿ÍÁØ´Ù.
µðÀÚÀÎ ½Ã½ºÅÛÀÌ ¾øÀ¸¸é ¾î¶² ¹®Á¦°¡ »ý±æ±î?
µðÀÚÀÎ ½Ã½ºÅÛÀÌ ¾øÀ» ¶§ °¡Àå ¸ÕÀú µå·¯³ª´Â ¹®Á¦´Â ¡®»ç¿ëÀÚ °æÇèÀÇ ºÒÀÏÄ¡¡¯´Ù. ÆäÀÌÁö¸¶´Ù ¹öưÀÇ Å©±â³ª »ö»óÀÌ ´Þ¶óÁö°í, °°Àº ±â´ÉÀÌ ´Ù¸¥ ¹æ½ÄÀ¸·Î ±¸ÇöµÇ±âµµ ÇÑ´Ù. »ç¿ëÀڴ ȥ¶õÀ» ´À³¢°í, ºê·£µå¿¡ ´ëÇÑ ½Å·Úµµµµ ¶³¾îÁö°Ô µÈ´Ù.
µðÀÚÀ̳ʳª °³¹ßÀÚ ÀÔÀå¿¡¼µµ Áߺ¹ ÀÛ¾÷ÀÌ ¹Ýº¹µÇ°í È¿À²¼ºÀÌ ³·¾ÆÁø´Ù. ÀÌ¹Ì ´©±º°¡ ¸¸µç ÄÄÆ÷³ÍÆ®¸¦ ´Ù½Ã ¸¸µé°Ô µÇ°Å³ª, µðÀÚÀÎ QA °úÁ¤¿¡¼ °°Àº ¿À·ù°¡ ¹Ýº¹ÀûÀ¸·Î ÁöÀûµÇ±âµµ ÇÑ´Ù. °á±¹ ÆÀ ÀüüÀÇ ¸®¼Ò½º°¡ ³¶ºñµÇ°í, À¯Áöº¸¼ö°¡ ¾î·Á¿öÁø´Ù.
µðÀÚÀÎ ½Ã½ºÅÛÀº ¾ðÁ¦ ÇÊ¿äÇÒ±î?
µðÀÚÀÎ ½Ã½ºÅÛÀº ´ÙÀ½°ú °°Àº °æ¿ì¿¡ ƯÈ÷ Çʿ伺À» ü°¨ÇÏ°Ô µÈ´Ù:
µðÀÚÀ̳Ê, °³¹ßÀÚ µî ÆÀ¿øÀÌ ´Ù¼öÀÎ ÇÁ·ÎÁ§Æ®¿¡¼
ÇϳªÀÇ ¼ºñ½º°¡ ¿©·¯ Ç÷§Æû(iOS, Android, Web µî)À¸·Î È®ÀåµÉ ¶§
¼ºñ½º ±â´ÉÀÌ ÀÚÁÖ Ãß°¡µÇ°Å³ª ºü¸£°Ô ¾÷µ¥ÀÌÆ®µÇ´Â °æ¿ì
QA °úÁ¤¿¡¼ ¹Ýº¹ÀûÀÎ ½Ã°¢Àû ¿À·ù³ª ±â´É ¿À·ù°¡ ¹ß»ýÇÒ ¶§
±Ô¸ð°¡ Ä¿Áú¼ö·Ï ÀÌ·¯ÇÑ ¹®Á¦´Â ´õ º¹ÀâÇØÁö°í, ±×¸¸Å ½Ã½ºÅÛÈÀÇ Çʿ伺Àº Ä¿Áø´Ù.
µðÀÚÀÎ ½Ã½ºÅÛÀº ¾î¶»°Ô ¸¸µé°í Ȱ¿ëÇϴ°¡?
µðÀÚÀÎ ½Ã½ºÅÛÀº º¸Åë ´ÙÀ½°ú °°Àº ±¸¼º ¿ä¼Ò¸¦ °®Ãá´Ù
Foundation: »ö»ó, ŸÀÌÆ÷±×·¡ÇÇ, ¾ÆÀÌÄÜ, °£°Ý µî µðÀÚÀÎÀÇ ±âÃʰ¡ µÇ´Â ¼Ó¼º
Components: ¹öư, Ä«µå, Æû ¿ä¼Ò µî UI¸¦ ±¸¼ºÇÏ´Â ´ÜÀ§ ¿ä¼Ò
Patterns: ·Î±×ÀÎ, °Ë»ö, °áÁ¦ µî »ç¿ëÀÚ Çൿ È帧¿¡ µû¸¥ Á¶ÇÕ ÆÐÅÏ
Guidelines: ºê·£µå ¿øÄ¢, »ç¿ë ±ÔÄ¢, Á¢±Ù¼º ±âÁØ µîÀÇ °¡À̵å¶óÀÎ
Tokens: »ö»óÀ̳ª Å©±â °°Àº ¼Ó¼ºÀ» Äڵ忡¼ º¯¼öó·³ ¾²±â À§ÇÑ °ªµé

(Ãâó: https://images.app.goo.gl/iTL5Y4bZiGmUxrqG8)

(Ãâó: https://images.app.goo.gl/yJ4CttyReX4NZ7cdA)
µðÀÚÀÎ ½Ã½ºÅÛÀ» ¸¸µé±â À§Çؼ´Â ¸ÕÀú ÇöÀç Á¦Ç°¿¡ ¾²À̰í ÀÖ´Â µðÀÚÀÎ ¿ä¼ÒµéÀ» Á¤¸®ÇÏ°í ºÐ¼®ÇÏ´Â ÀÛ¾÷ÀÌ ÇÊ¿äÇÏ´Ù. À̸¥¹Ù ¡®UI °¨»ç(audit)¡¯ ´Ü°è´Ù. ±× ÈÄ ºê·£µå¿Í »ç¿ëÀÚ °üÁ¡¿¡ ¸Â´Â µðÀÚÀÎ ¿øÄ¢À» ¼ö¸³Çϰí, ¹Ýº¹ÀûÀ¸·Î ¾²ÀÌ´Â ÄÄÆ÷³ÍÆ®µéÀ» Á¤ÀÇÇÏ°í ¹®¼ÈÇÑ´Ù.

µðÀÚÀÎ ½Ã½ºÅÛ ³» ±¸¼º ¿ä¼ÒÀÇ ¿¹ ©°èÀ±¼±
µðÀÚÀÎ Åø(Figma, Sketch µî)¿¡¼´Â À̸¦ ±â¹ÝÀ¸·Î µðÀÚÀÎ ¶óÀ̺귯¸®¸¦ ¸¸µé°í, °³¹ßÀÚ´Â À̸¦ ±¸Çö °¡´ÉÇÑ ÄÚµå(React ÄÄÆ÷³ÍÆ®, CSS º¯¼ö µî)·Î º¯È¯ÇÑ´Ù. ¹®¼È µµ±¸(Storybook, Zeroheight µî)¸¦ Ȱ¿ëÇÏ¸é ´©±¸³ª ½±°Ô Á¢±ÙÇϰí ÀÌÇØÇÒ ¼ö ÀÖµµ·Ï ±¸¼ºÇÒ ¼ö ÀÖ´Ù.
µðÀÚÀÎ ½Ã½ºÅÛÀº ´õ ³ªÀº ȸéÀ» ¸¸µå´Â µµ±¸¶ó±âº¸´Ù, ¡®´õ ³ªÀº Çù¾÷À» À§ÇÑ ±â¹Ý ÀÎÇÁ¶ó¡¯¶ó°í ÇÒ ¼ö ÀÖ´Ù. ÇϳªÀÇ µðÀÚÀÎ ½Ã½ºÅÛÀº ¼ö¸¹Àº Á¦Ç°¿¡ ¿µÇâÀ» ¹ÌÄ¡°í, »ç¿ëÀÚÀÇ °æÇè»Ó¸¸ ¾Æ´Ï¶ó ÆÀÀÇ ÀÏ ¹æ½Ä°ú ºê·£µåÀÇ Á¤Ã¼¼º±îÁö Á¿ìÇÏ°Ô µÈ´Ù. ÀÌÁ¦ µðÀÚÀÎÀº ¡®Àß ±×¸®´Â¡¯ °ÍÀÌ ¾Æ´Ï¶ó, ¡®Àß Á¤ÀÇÇϰí, Àß ¿¬°áÇϴ¡¯ °ÍÀ̶ó´Â °üÁ¡¿¡¼ µðÀÚÀÎ ½Ã½ºÅÛÀ» ¹Ù¶óº¼ Çʿ䰡 ÀÖ´Ù.