Æ÷Åä¼¥À» ³Ñ¾î¼
UI µðÀÚÀ̳ÊÀÇ ¼Õ, Æ÷Åä¼¥
°ú°Å µðÀÚÀ̳ÊÀÇ ÀÛ¾÷½ÇÀº ¼ö¸¹Àº µµ±¸·Î °¡µæ Â÷ ÀÖ¾ú´Ù. µÎ²²°¡ ´Ù¸¥ ¿©·¯ °¡Áö Ææ°ú º×, µµÇüÀ» ±×¸®±â À§ÇÑ Á¦µµ ¿ë±¸, ±ÛÀÚ¸¦ ¹èÄ¡Çϱâ À§ÇÑ ·¹Å͸µ µµ±¸, À̹ÌÁö¿¡ È¿°ú¸¦ ÀÔÈ÷±â À§ÇÑ »çÁø½ÄÀÚ±â±îÁö. ±×·¯³ª ¿À´Ã³¯ÀÇ µðÀÚÀ̳ʴ ÀÌ ¸ðµç Àåºñ¸¦ ·¦Åé ÄÄÇ»ÅÍ¿¡ ³Ö°í ´Ù´Ñ´Ù. ¹Ù·Î ‘Adobe Photoshop’ÀÌ´Ù. Æ÷Åä¼¥Àº µðÀÚÀο¡ ÀÔ¹®ÇÏ´Â ÇлýÀÌ °¡Àå ¸ÕÀú ¹è¿ì´Â Çʼö µµ±¸ÀÌÀÚ, ÀÏ¹Ý »ç¿ëÀÚ±îÁö Æø³Ð°Ô ¾Æ¿ì¸¦ ¼ö ÀÖ´Â ±×·¡ÇÈ ¼ÒÇÁÆ®¿þ¾î´Ù. ¶ÇÇÑ À¥°ú ¾ÖÇø®ÄÉÀÌ¼Ç µðÀÚÀÎ(ÀÌÇÏ UI µðÀÚÀÎ)À» À§ÇÑ Çʼö µµ±¸·Î ¾Ë·ÁÁ® ÀÖ´Ù.
ÀÎÅÍÆäÀ̽º¸¦ ±×¸± ¶§ Æ÷Åä¼¥ÀÌ À¯¿ëÇÏ´Ù´Â °ÍÀ» óÀ½ ¹ß°ßÇÑ »ç¶÷µéÀº À¥ µðÀÚÀ̳ÊÀÌ´Ù. Æ÷Åä¼¥Àº À¥ÆäÀÌÁö¸¦ ±×¸®°Å³ª Á¶°¢³»´Â µ¥ ÈǸ¢ÇÑ ¼º´ÉÀ» ¹ßÈÖÇß°í, °ð ±×µéÀÇ ÁÖ·Â µµ±¸°¡ µÈ´Ù.(¿µ»óÀ̳ª ÃâÆÇ, ÀÏ·¯½ºÆ®·¹À̼ǿ¡ Á¾»çÇÏ´Â µðÀÚÀ̳ʵµ Æ÷Åä¼¥À» »ç¿ëÇÏÁö¸¸, ÁÖ·Î À̹ÌÁö ÆíÁýÀ» À§ÇÑ º¸Á¶ ¼ö´ÜÀÌ´Ù) À¥¿¡ ¸Ó¹°´ø ÀÎÅÍÆäÀ̽º µðÀÚÀÎÀÌ ´Ù¾çÇÑ µð¹ÙÀ̽º·Î È®´ëµÇ¸é¼ Æ÷Åä¼¥À» ¾²´Â »ç¶÷µéµµ ¸¹¾ÆÁ³´Ù. ‘UI µðÀÚÀ̳ʒµéÀÇ ¿ä±¸¸¦ ¼ö¿ëÇÏ¸ç Æ÷Åä¼¥Àº ÁøÈÇß°í, Áö±ÝÀº ¸í½Ç°øÈ÷ ¼¼°è¿¡¼ °¡Àå ¸¹ÀÌ ¾²ÀÌ´Â ÀÎÅÍÆäÀ̽º µðÀÚÀÎ µµ±¸´Ù.
±×·±µ¥, Æ÷Åä¼¥ 1.0ÀÌ Ãâ½ÃµÈ °ÍÀº 1990³âÀÌ´Ù. ¾Æ¹«¸® ¹öÀü¾÷ÀÌ °è¼ÓµÇ¾ú´Ù°í ÇØµµ 25³âÀÌ¸é ½ÅÀÔ»ç¿øº¸´Ù ´ÄÀº ¼ÒÇÁÆ®¿þ¾î´Ù. ¿ì¸®°¡ ÈçÈ÷ ¸»ÇÏ´Â ‘UI µðÀÚÀÎ’ÀÇ ½Ã¹ßÁ¡ÀÌ µÈ iPhoneÀÌ Ãâ½ÃµÈ °Íµµ 2007³âÀε¥, ±×µ¿¾È Æ÷Åä¼¥À» ´ëüÇÒ ¸¸ÇÑ µµ±¸°¡ Á¤¸» ¾ø¾ú´Ü ¸»Àΰ¡. UI µðÀÚÀ̳ʵéÀÌ Æ÷Åä¼¥À» »ç¶ûÇÏ´Â ÀÌÀ¯´Â ¾ÆÁ÷µµ ±×º¸´Ù Æí¸®ÇÑ µµ±¸°¡ ¾ø±â ¶§¹®Àϱî, ¾Æ´Ï¸é ¹Ìó ´Ù¸¥ µµ±¸¸¦ ½á º¼ »ý°¢À» ÇÏÁö ¸ø Çß´ø °É±î?
Æ÷Åä¼¥Àº °ú¿¬ ÀÎÅÍÆäÀ̽º µðÀÚÀÎÀ» À§ÇÑ µµ±¸Àΰ¡?
ÀÌ ±ÛÀº Æ÷Åä¼¥ÀÌ ¼Õ¿¡ Àͼ÷ÇÑ µµ±¸ÀÏ »Ó, ÀÎÅÍÆäÀ̽º µðÀÚÀο¡ ÀûÇÕÇÑ µµ±¸°¡ ¾Æ´Ï¶ó´Â »ý°¢¿¡¼ Ãâ¹ßÇÑ´Ù. Àß ¾²°í ÀÖ´Â Æ÷Åä¼¥ÀÌ ¿Ö ¹®Á¦³Ä°í? ±â¾ïÀ» ¶°¿Ã·Á º¸ÀÚ. ¹öư ½ºÅ¸ÀÏ¿¡ ¼öÁ¤ÀÌ »ý°Ü ¼ö½Ê °³ÀÇ ÆÄÀÏÀ» µÚÁ®°¡¸ç ¹Ù²å´ø Ãß¾ïÀ». °³¹ßÀÚ¸¦ ¾Õ¿¡ µÎ°í Á¤ÁöµÈ À̹ÌÁö¿¡ ¼ÕÁþ, ¹ßÁþÀ» ¼¯¾î¼ “¿©±â¼ ÀÌ·¸°Ô Ä¿Áö¸é¼ ½´¾Æ¾Æ¾Æ¾Ç~ ÇÎ?! ÇÏ°í ¿òÁ÷ÀÌ°Ô ¸¸µé¾î ÁÖ¼¼¿ä.”¶ó°í ¼³¸íÇß´ø ÀûÀº ¾ø´Â°¡?(¹°·Ð ¿òÁ÷ÀÌ´Â °Íó·³ ¸ð¼Ç ºí·¯ È¿°ú¸¦ ³Ö¾î¼ °¡Á®°¬´Ù´Â °Íµµ ´Ù ¾Ë°í ÀÖ´Ù.) ¾î´À Á¤µµ °ø°¨ÀÌ µÈ´Ù¸é, Æ÷Åä¼¥ÀÌ ºÒÆíÇÏ°Ô ´À²¸Áö´Â ¸¶¹ýÀ» °æÇèÇÏ·¯ ÇÔ²² ¶°³ª º¸ÀÚ.
ù°, Æ÷Åä¼¥Àº °³¹ß¿¡ ÇÊ¿äÇÑ Á¤º¸¸¦ À̹ÌÁö·Î ¾ÐÃàÇÑ´Ù
Àμ⹰°ú ´Þ¸® ÀÎÅÍÆäÀ̽º´Â ¹ÝÀÀÇÏ°í ¿òÁ÷ÀÌ´Â ¿ä¼Òµé·Î ÀÌ·ç¾îÁø´Ù. ¼ø¼¿Í ±ÔÄ¢ÀÌ ÀÖ´Â ¿©·¯ °³ÀÇ È¸é°ú ¹ÝÀÀÇÒ ¼ö ÀÖ´Â ¿ÀºêÁ§Æ®(¹öư, üũ¹Ú½º, Æû µûÀ§)´Â ¸¶Ä¡ À¯±âüó·³ ¿òÁ÷ÀδÙ. »ç¿ëÀÚÀÇ Æ¯Á¤ Á¦½ºÃ³³ª ÅÇÀ¸·Î ȸéÀÌ ÀüȯµÇ°í, ¾Ö´Ï¸ÞÀ̼ÇÀÌ Á¦°øµÉ ¶§µµ ÀÖ´Ù. µðÀÚÀÎÀ» ÇÒ ¶§µµ ÀÌ·± ±ÔÄ¢°ú ¿òÁ÷ÀÓÀ» °í·ÁÇØ¾ß ÇÑ´Ù.

±×·¯³ª Æ÷Åä¼¥Àº À̸§ ±×´ë·Î Á¤ÁöµÈ ȸéÀ» ±×¸®±â À§ÇÑ µµ±¸À̸ç, »êÃâ¹° ¿ª½Ã ÄÚµå·Î ÇØ¼®ÇÒ ¼ö ÀÖ´Â µ¥ÀÌÅͰ¡ ¾ø´Â 'À̹ÌÁö'ÀÌ´Ù. '70 x 70pxÀÇ ¹öư', '¹è°æ»ö #FF66CC', '±¸¸§ ¸¹À½'À̶ó´Â ÅØ½ºÆ®µµ Æ÷Åä¼¥¿¡¼´Â ÆòµîÇÏ´Ù. µðÀÚÀ̳ʴ ¼ö¸¹Àº Ãþ(Layer)¿Í È¿°ú(Effects)·Î ÇϳªÀÇ Æ÷Åä¼¥ ÆÄÀÏ(.PSD)À» ¸¸µéÁö¸¸, °³¹ßÀÚ¿¡°Ô´Â ÅØ½ºÆ®Á¶Â÷ º¹»çÇÒ ¼ö ¾ø´Â ³³ÀÛÇÑ Æò¸é¿¡ ºÒ°úÇÑ °ÍÀÌ´Ù. Æò¸é À̹ÌÁö¸¦ Á¦Ç°À¸·Î ±¸ÇöÇϱâ À§Çؼ´Â Á¶¸³ ¼³¸í¼¿Í Àç·áµéÀ» ¿äûÇÒ ¼ö¹Û¿¡ ¾ø´Ù. ÆäÀÌÁö °³¼ö´ë·Î ÆÄÀÏÀ» ¸¸µé°í,(ÆäÀÌÁöµéÀº ¼·Î ¿¬°áµÇÁö ¾ÊÀº ¿©·¯ °³ÀÇ ÆÄÀÏ·Î Á¸ÀçÇÑ´Ù) ÀÎÅÍ·¢¼ÇÀ» Ç¥ÇöÇϱâ À§ÇØ ·¹À̾ ‘ Highlighted’, ‘release’ µûÀ§ÀÇ À̸§À» Áþ´Â´Ù. ±×·¡µµ ºÎÁ·ÇÑ ¼³¸í±îÁö µ¡ºÙÀÌ·Á¸é ‘µðÀÚÀÎ °¡À̵咵µ ÇÊ¿äÇÏ´Ù. µðÀÚÀο¡ ¸Â¸Ô´Â ½Ã°£À» °¡À̵å ÀÛ¼º¿¡ ½ñ¾Æ º×´Â ÀÌÀ¯´Â Äڵ带 »ý»êÇÏÁö ¸øÇÏ´Â Æ÷Åä¼¥ ¶§¹®ÀÌ´Ù.
µÑ°, ¿ÀºêÁ§Æ®¸¦ ´Ù·ç´Â ¹æ½ÄÀÌ ÀÎÅÍÆäÀ̽º µðÀÚÀΰú ¸ÂÁö ¾Ê´Ù
ÀÎÅÍÆäÀ̽º µðÀÚÀÎÀÇ ¶Ç ´Ù¸¥ Ư¡Àº ÇÑ ¹úÀÇ ¿ä¼Ò¿Í ½ºÅ¸ÀÏ(UI kit¶ó°íµµ ºÒ¸®´Â)À» ¿©·¯ ÆäÀÌÁö¿¡ °øÅëÀ¸·Î »ç¿ëÇÏ´Â Á¡ÀÌ´Ù. ¹öưÀ̳ª ºÒ¸´(bullet), º»¹® ½ºÅ¸ÀÏ, ŸÀÌÆ² ¹ÙÀÇ µðÀÚÀÎ µîÀº °ÅÀÇ ¸ðµç ÆäÀÌÁö¿¡¼ °øÅëÀ¸·Î ¾²ÀδÙ. Æ÷Åä¼¥À¸·Î ¸¸µç ÆäÀÌÁö¿¡¼ ƯÁ¤ ¹öưÀÇ µðÀÚÀÎÀ» º¯°æÇϱâ·Î Çß´Ù¸é, ¾î¶² ÀÏÀÌ ¹ú¾îÁú±î? µðÀÚÀ̳ʴ ÀÛ¾÷ÇÑ ÆÄÀÏÀ» ¸ðµÎ ¿°í ÇØ´ç ¹öưÀÌ ÀÖ´Â °÷À» ÀÏÀÏÀÌ Ã£¾Æ ¹Ù²ã¾ß ÇÑ´Ù. ÆäÀÌÁö°¡ ¸¹À»¼ö·Ï µ¿ÀÏ ÀÛ¾÷À» ¹Ýº¹ÇØ¾ß Çϴµ¥, Çö´ëÀÎÀ̶ó¸é ÀÌ·± ¼º°ÝÀÇ ³ëµ¿¿¡ ½Ã°£À» ÇãºñÇØ¼´Â ¾È µÈ´Ù. ÀÎÅÍÆäÀ̽º µðÀÚÀÎÀ» À§ÇÑ µµ±¸¶ó¸é ¿ÀºêÁ§Æ®¸¦ µû·Î ÀúÀåÇÏ´Â ¶óÀ̺귯¸®¸¦ µÎ°í, ¶óÀ̺귯¸®¿¡ ÀÖ´Â ¼Ò½º ¿ÀºêÁ§Æ®¸¦ ¾÷µ¥ÀÌÆ®ÇßÀ» ¶§ ´Ù¸¥ ÆäÀÌÁö¿¡ ¸ðµÎ ¶È°°ÀÌ Àû¿ëµÇ´Â °ÍÀÌ ÀÚ¿¬½º·´Áö ¾ÊÀ»±î?
¼Â°, ´Ù¾çÇÑ Ç÷§Æû°ú ÇØ»óµµ¿¡ ½±°Ô ´ëÀÀÇÒ ¼ö ¾ø´Ù
¿ÀºêÁ§Æ®ÀÇ À§Ä¡¿Í Å©±â¸¦ Á¤ÀÇÇÏ´Â ¹æ½ÄÀÌ °íÁ¤µÇ¾î ÀÖ´Â °Íµµ ´ä´äÇϱâ´Â ¸¶Âù°¡Áö´Ù. ÀÎÅÍÆäÀ̽º µðÀÚÀÎÀº ´Ù¾çÇÑ Ç÷§Æû°ú ÇØ»óµµ¸¦ Áö¿øÇØ¾ß ÇÏ´Â °æ¿ì°¡ ¸¹Àºµ¥, Æ÷Åä¼¥¿¡¼´Â ÇØ»óµµ°¡ Á¶±Ý ´Þ¶óÁú ¶§¸¶´Ù »õ·Î¿î ĵ¹ö½º¸¦ ¿°í ÀÛ¾÷À» ½ÃÀÛÇØ¾ß ÇÑ´Ù. µðÀÚÀÎ °¡À̵带 ÀÛ¼ºÇÏ´Â °Íó·³ ¿ÀºêÁ§Æ®ÀÇ Å©±â¿Í À§Ä¡¸¦ »ó´ëÀû ±âÁØÀ¸·Î Ç¥ÇöÇÒ ¼ö ÀÖ´Ù¸é ¾ó¸¶³ª ÁÁÀ»±î. °Å¸®¿Í ¸¶ÁøÀ» ±âÁØÀ¸·Î À§Ä¡¸¦ °áÁ¤ÇÒ ¼ö ÀÖ´Ù¸é, ĵ¹ö½ºÀÇ Å©±â°¡ ¹Ù²î¾îµµ ·¹À̾ƿôÀÌ À¯ÁöµÇ¾î ¸¹Àº ½Ã°£À» Àý¾àÇÒ ¼ö ÀÖÀ» °ÍÀÌ´Ù. ¹ÝÀÀÇü À¥À» µðÀÚÀÎÇÏ´õ¶óµµ ´Ù¾çÇÑ Å©±âÀÇ Ç÷§Æû¿¡¼ ¾î¶»°Ô º¯ÇÏ´ÂÁö ½Ç½Ã°£À¸·Î È®ÀÎÇÏ¸é¼ ÀÛ¾÷ÀÌ °¡´ÉÇØÁú °ÍÀÌ´Ù.
ÀÎÅÍÆäÀ̽º µðÀÚÀο¡ Æ¯ÈµÈ µµ±¸, ‘Sketch 3’¿Í ‘Fireworks’
´ÙÇàÈ÷µµ ÀÌ·± ºÒ¸¸À» °¡Áø »ç¶÷Àº ÇÊÀÚ È¥ÀÚ°¡ ¾Æ´Ï¶ó, Âü´Ù¸øÇØ Á¦Ç°À¸·Î Ãâ½ÃµÈ °æ¿ìµµ ÀÖ´Ù. ÃÖ±Ù ÁÖ¸ñ¹Þ°í ÀÖ´Â Bohemian cording»çÀÇ ‘Sketch 3’¸¦ »ç¿ëÇØ º¸¸é Æ÷Åä¼¥°ú ºñ±³ÇÒ ¼ö ¾øÀ» ¸¸Å ½±°í ºü¸£°Ô ÀÎÅÍÆäÀ̽º¸¦ ¿Ï¼ºÇÒ ¼ö ÀÖ´Ù. ¿ÀºêÁ§Æ®¸¦ PNG·Î Àϰý Ãâ·ÂÇϰí, CSSÄڵ带 ÇÔ²² Á¦°øÇÏ´Â °ÍÀº ¹°·ÐÀÌ´Ù. µû¶ó¼ À̹ÌÁö¸¦ ÀÚ¸£°í µðÀÚÀÎ °¡À̵带 ¸¸µé Çʿ䵵 °ÅÀÇ ¾ø¾îÁø´Ù.
Æ÷Åä¼¥À» ¸¸µç Adobe»ç ¶ÇÇÑ Æ÷Åä¼¥ÀÌ ÀÎÅÍÆäÀ̽º µðÀÚÀο¡ ÀûÀýÇÏÁö ¾ÊÀº µµ±¸¶ó´Â °ÍÀ» ´©±¸º¸´Ù Àß ¾Ë°í ÀÖ¾ú´Ù. Adobe¿¡¼ Æ÷Åä¼¥À» ´ëüÇÒ ¸¸ÇÑ Á¦Ç°À» ¿©·¯ Â÷·Ê Ãâ½ÃÇß´Ù´Â »ç½ÇÀ» ¾Ë°í ÀÖ´Â »ç¶÷Àº ¸¹Áö ¾Ê´Ù.(±â´É¸¸ µéÀ¸¸é ±ô¦ ³î¶ö ¸¸Å ÈǸ¢ÇÑ Á¦Ç°µµ ÀÖ´Ù) ±× °¡¿îµ¥ °¡Àå ÁÖ¸ñ¹Þ¾Ò´ø °ÍÀº º¤ÅÍ ±â¹ÝÀÇ ÀÎÅÍÆäÀ̽º µðÀÚÀÎ µµ±¸ ‘Adobe Fireworks’Àε¥, ÇѶ§ ‘Æ÷Åä¼¥º¸´Ù Fireworks°¡ ÁÁ³ª¿ä?.com’1°ú °°Àº »çÀÌÆ®°¡ »ý±æ Á¤µµ·Î ¸¹Àº Àα⸦ ¾ò¾ú´Ù.
»çÀÌÆ®¿¡ °ÔÀçµÈ ¼ö¹é °¡Áö ‘Æ÷Åä¼¥º¸´Ù Fireworks°¡ ÁÁÀº ÀÌÀ¯’ °¡¿îµ¥ ¸Å·ÂÀûÀÎ Ç׸ñ ¸î °¡Áö¸¦ ¿Å°Ü º¸¾Ò´Ù.
1. ¸¶½ºÅÍ ÆäÀÌÁö¸¦ ±â¹ÝÀ¸·Î ¿©·¯ ÆäÀÌÁö¸¦ µ¿½Ã¿¡ ÀÛ¾÷ÇÒ ¼ö ÀÖ´Ù.
2. ¶óÀ̺귯¸®¿¡¼ ¿ÀºêÁ§Æ®¸¦ °ü¸®Çϰųª, ÅØ½ºÆ® ½ºÅ¸ÀÏÀ» ÀúÀåÇØ¼ ¾µ ¼ö ÀÖ´Ù.
3. HTML·Î Ãâ·ÂÇÒ ¼ö ÀÖ´Ù.
4. ¿ÀºêÁ§Æ®¸¦ ±×¸®°í ³ µÚ¿¡µµ ¼öÁ¤Çϱ⠽±´Ù.(Radius Å©±âµµ ¾ðÁ¦ ¾îµð¼³ª)
5. ¿Ü ¼ö½Ê °¡Áö
±×·³¿¡µµ ºÒ±¸Çϰí, µðÀÚÀ̳ʴ Æ÷Åä¼¥À» ¾´´Ù
ÀϺΠÇ׸ñ¸¸ »ìÆìº¸´õ¶óµµ ‘Fireworks’´Â Æ÷Åä¼¥ ÇÁ·Î¼¼½ºÀÇ ±Ùº»Àû °áÇÔÀ» °³¼±ÇÑ Á¦Ç°À̶ó´Â °ÍÀ» ¾Ë ¼ö ÀÖ´Ù. ±×·³¿¡µµ ºÒ±¸Çϰí ÁÖº¯¿¡¼ Fireworks¸¦ »ç¿ëÇÏ´Â µðÀÚÀ̳ʸ¦ ã±â¶õ ºÒ°¡´É¿¡ °¡±õ´Ù.(½ÉÁö¾î ÇöÀç´Â ¹«·á ¹öÀüÀ¸·Î Ç®·Á Àִµ¥!) ‘Sketch3’ ¿ª½Ã »ç¿ëÀÚ°¡ ´Ã°í ÀÖÁö¸¸ °¥ ±æÀÌ ¸Ö¾î º¸ÀδÙ. ¿Ö ¼ö¸¹Àº ºÒÆíÀ» °¨¼öÇÏ¸é¼ µðÀÚÀ̳ʵéÀº Æ÷Åä¼¥ ¿ÜÀÇ µµ±¸µéÀ» ¿Ü¸éÇÏ´Â °ÍÀϱî?
°¡Àå ¸ÕÀú »ý°¢ÇØ º¼ ¼ö ÀÖ´Â °ÍÀº ÀÎÅÍÆäÀ̽º¿¡ Æ¯ÈµÈ ¼ÒÇÁÆ®¿þ¾îÀÇ ±×¸®±â ±â´ÉÀÌ Æ÷Åä¼¥¿¡ ºñÇØ »ó´ëÀûÀ¸·Î ºó¾àÇÏ´Ù´Â °ÍÀÌ´Ù. ƯÈ÷ ½ºÅ¥¾î¸ðÇÁ(Skeuomorph) µðÀÚÀÎ2À» À§Çؼ´Â Æ÷Åä¼¥ÀÇ ±×¸®±â ±â´ÉÀÌ ²À ÇÊ¿äÇß´Ù. ÇÏÁö¸¸ ¿äÁò ³ª¿À´Â Á¦Ç°µéÀÇ ÀÎÅÍÆäÀ̽º´Â ´ëºÎºÐ ÆòÆòÇÑ(flat) µðÀÚÀÎÀÌ´Ù. ±×¸®±â ±â´ÉÀÌ °ÅÀÇ ÇÊ¿ä ¾ø´Â »óȲÀε¥µµ ¿©ÀüÈ÷ µðÀÚÀ̳ʵéÀº Æ÷Åä¼¥À» ¾´´Ù.
¿©±â¿¡ ´ëÇØ¼´Â “µðÀÚÀ̳ʵéÀÌ Æ÷Åä¼¥À¸·Î µðÀÚÀÎ ÇÏ´Â °ÍÀ» °¡Àå ÆíÇÏ°Ô ´À³¤´Ù”´Â ÀáÁ¤Àû °á·ÐÀ» ³»¸± ¼ö¹Û¿¡ ¾øÀ» °Í °°´Ù. ±âÃÊÀûÀÎ ³»¿ëÀÌ¶óµµ ÄÚµùÀ» °øºÎÇØ º» µðÀÚÀ̳ʵéÀº ¸ö¿¡ ¸ÂÁö ¾Ê´Â ¿Êó·³ ºÒÆíÇÏ´Ù´Â À̾߱⸦ ÇÑ´Ù. ½Ã°¢Àû Çǵå¹éÀÌ ¾ø´Â ¼ýÀÚ¿Í Äڵ尡 ¹«Ã´ ¾î·Æ°Ô ´À²¸Áø´Ù´Â °ÍÀÌ´Ù. ¹Ý¸é Æ÷Åä¼¥À» ¹è¿ì´Â µ¥´Â ¿À·£ ½Ã°£ÀÌ ÇÊ¿äÇÏÁö ¾Ê´Ù. ´«¿¡ º¸ÀÌ´Â ´ë·Î ¿òÁ÷À̰í, ¼ÕÀ¸·Î Á¶ÀÛÇÏ´Â °Í °°Àº °æÇèÀ» Áֱ⠶§¹®ÀÌ´Ù. ¼öÄ¡¸¦ °è»êÇØ¼ ÀÔ·ÂÇÏ´Â °Íº¸´Ù ±×¸®´Â °ÍÀÌ Àͼ÷ÇÑ µðÀÚÀ̳ʵ鿡°Ô ‘Æ÷Åä¼¥’Àº ÀÚ¿¬½º·¯¿î ¼±ÅÃÀÎÁöµµ ¸ð¸£°Ú´Ù.
¶ÇÇÑ Á¶Á÷¿¡ ¼ÓÇØ ¿©·¯ »ç¶÷°ú ÇÔ²² Çù¾÷ÇØ¾ß ÇÏ´Â ÀÔÀå¿¡¼ È¥ÀÚ ÀÛ¾÷ µµ±¸¸¦ ¹Ù²Ù´Â °ÍÀº Å« ¸ðÇèÀÌ´Ù. ‘Sketch3’¸¦ »ç¿ëÇØ ¿½ÉÈ÷ ÀÛ¾÷ÇÑ µðÀÚÀÎ ÆÄÀÏÀ» ´Ù¸¥, Æ÷Åä¼¥À» »ç¿ëÇÏ´Â ÀÛ¾÷ÀÚ¿¡°Ô ÀΰèÇØ Áà¾ß ÇÑ´Ù¸é? HTML·Î ÀúÀåÇÑ µðÀÚÀÎ ÆÄÀÏÀ» µðÀÚÀÎ °¡ÀÌµå ¾øÀÌ °³¹ßÆÀ¿¡ ³Ñ°Üµµ ¹®Á¦°¡ ¾øÀ»±î? ȣȯ¼ºÀº ¼Ò±Ô¸ð ½ºÆ©µð¿À¿¡¼ ÀÏÇϰųª ÇÁ¸®·£¼ µðÀÚÀ̳ʰ¡ ¾Æ´Ñ ÀÌ»ó Æ÷Åä¼¥À» »ç¿ëÇÒ ¼ö¹Û¿¡ ¾ø´Â ¶Ç ´Ù¸¥ ÀÌÀ¯´Ù.
Æ÷Åä¼¥À» ¹Ù²Ü ¼ö ¾ø´Ù¸é °úÁ¤À» ¹Ù²Ù¾î º¸ÀÚ
ÇÁ·Î¼¼½º¸¦ ÅëÇÑ ´ë¾È, °¡À̵忡¼ Ãâ¹ßÇÏ´Â µðÀÚÀÎ
±âÁ¸ÀÇ ¹æ½ÄÀ» µû¶ó¾ß ÇÑ´Ù¸é, ±× ¾È¿¡¼ ´õ È¿À²ÀûÀ¸·Î ÀÏÇÒ ¼ö ÀÖ´Â ¹æ¹ý ¶ÇÇÑ Ã£¾ÆºÁ¾ß ÇÒ °ÍÀÌ´Ù. ÀÌ ¹®Á¦¸¦ ²ÙÁØÈ÷ °í¹ÎÇϰí ÀÖ´Â ½ºÅ¸Æ®¾÷ Wit studio3ȨÆäÀÌÁö¿¡¼ Á¦°øÇÏ´Â µðÀÚÀΰ¡ÀÌµå ¼¼¹Ì³ª ÀÚ·á4¸¦ ÅëÇØ ÈùÆ®¸¦ ãÀ» ¼ö ÀÖ´Ù. Wit studio´Â ‘ĵ¹ö½º¿¡¼ ±×¸²À» ±×¸®µí µðÀÚÀÎÇϱ⺸´Ù´Â ¸ðµâ·Î ¿ä¼ÒµéÀ» °ü¸®ÇÒ °Í’À» ±ÇÀåÇÑ´Ù. °¡À̵å´Â À̹ÌÁö¸¦ ¸ðµâÈÇϰí '¿øÄ¢'°ú '¼±¾ð'À¸·Î ¹ø¿ªÇÏ´Â °úÁ¤Àε¥, ÀÌó·³ ÀÎÅÍ·¢¼Ç°ú ¿ä¼ÒÀÇ À§Ä¡¸¦ Á¤ÀÇÇÏ´Â ÀÏ·ÃÀÇ °úÁ¤Àº Äڵ带 Â¥´Â °Í°ú À¯»çÇÑ ¸éÀÌ ÀÖ´Ù.
¿¹¿Ü 󸮰¡ ¸¹Àº ÄÚµå´Â °áÄÚ ÁÁÀº Äڵ尡 ¾Æ´Ï¶ó°í ÇÑ´Ù. ¸¶Âù°¡Áö·Î ¿øÄ¢ÀÌ ¾øÀÌ ¿¹¿Ü·Î °¡µæÂ÷ ÀÖ´Ù¸é °áÄÚ ÁÁÀº µðÀÚÀÎÀ̶ó ÇÒ ¼ö ¾øÀ» °ÍÀÌ´Ù. µðÀÚÀÎ °¡À̵带 ÀÛ¼ºÇÏ´Ù º¸¸é óÀ½ µðÀÚÀÎÀ» Á¶±Ý¾¿ ¼öÁ¤ÇÏ°Ô µÇ´Â ÀÏÀÌ ÀÚÁÖ »ý±ä´Ù. ´«À¸·Î °áÁ¤ÇÑ ºñÀ²°ú Å©±â¸¦ ¼ýÀÚ·Î ¹Ù²ã Àû´Â °úÁ¤¿¡¼ ºÒ±ÔÄ¢ÇÑ ºÎºÐÀÌ µå·¯³ª±â ¶§¹®ÀÌ´Ù. ¾î±ß³ ºÎºÐÀ» ¹Ù·ÎÀâÀ¸¸é, ±âºÐ Å¿ÀÎÁö ¸ô¶óµµ ºÐ¸í ´õ º¸±â¿¡ ÁÁ´Ù.(È£¿À? ‘°¡À̵忡 ¸ÂÃç µðÀÚÀÎÀ» ¼öÁ¤’Çß´õ´Ï ǰÁúÀÌ ÁÁ¾ÆÁö´Ù´Ï) ÀÌ´Â ¸íÈ®ÇÑ ±ÔÄ¢À» µû¶ó µðÀÚÀÎÇÒ ¶§ ´õ ÁÁÀº °á°ú¹°ÀÌ ¸¸µé¾îÁø´Ù´Â ¹æÁõÀÌ ¾Æ´Ò±î. ´õ ³ª¾Æ°¡¸é ‘°¡À̵咿¡¼ µðÀÚÀÎÀ» ½ÃÀÛÇÒ ¼öµµ ÀÖ´Ù´Â À̾߱â´Ù.
¸Å¹ø ÆäÀÌÁö¿¡ ¸Â´Â Å©±â¿Í Ä÷¯¸¦ ¼±ÅÃÇÏ´Â ´ë½Å, ÀÌ¹Ì °³¹ßµÈ µðÀÚÀÎ °¡À̵忡¼ Á¤ÀÇÇÑ ½ºÅ¸ÀÏÀ» ‘H1, H2, H3, T1, T2…’ °ú °°ÀÌ ÀúÀåÇØ µÎ¾ú´Ù°¡ È£ÃâÇÏ¿© µðÀÚÀο¡ Àû¿ëÇÑ´Ù¸é ¾î¶³±î.
¸»ÇÏÀÚ¸é ‘Àç·á°¡ ÇÑÁ¤µÈ µðÀÚÀÎ’À» ÇÏ´Â ¼ÀÀÌ´Ù. ³×À̹öó·³ ¼ºñ½º°¡ ´Ù¾çÇÑ ±â¾÷Àº ¼ö½Ê, ¼ö¹é°¡ÁöÀÇ °¢±â ´Ù¸¥ µðÀÚÀÎ °¡À̵尡 ÇÊ¿äÇÏÁö¸¸, À§ ¹æ¹ýÀ» »ç¿ëÇÑ´Ù¸é ÆÄÆíȸ¦ ¸·°í ¼Ò½º¸¦ ±ò²ûÇÏ°Ô À¯ÁöÇÒ ¼ö ÀÖÀ» °ÍÀÌ´Ù.(ƯÈ÷ ÆùÆ®°¡ ±×·¸´Ù) À¥¿¡¼´Â ±â¼úÀûÀÎ ¹®Á¦·Î Æ÷Åä¼¥¿¡¼ º¸´Â ÅØ½ºÆ®¿Í ¸¶Å©¾÷µÈ ÅØ½ºÆ®ÀÇ Å©±â¿Í ¸ð¾çÀÌ ´Ù¸£°Ô º¸À̴µ¥, ÀÌ·¸°Ô ÇÑ´Ù¸é °³¹ß ¿Ï·áµÈ »ùÇÃ ÅØ½ºÆ®¸¦ µðÀÚÀÎ Àü¿¡ È®ÀÎÇÒ ¼ö ÀÖÀ¸¹Ç·Î µðÀÚÀΰú ¸¶Å©¾÷ÀÇ °£±ØÀ» ÁÙÀÏ ¼ö ÀÖ´Ù. ¹öưÀ̳ª Ä÷¯ µî °øÅë ¿ä¼Ò¿¡ ¾÷µ¥ÀÌÆ®°¡ ÇÊ¿äÇÒ ¶§µµ ´ëÀÀÀÌ ÈξÀ ¼ö¿ùÇØÁø´Ù. Á¦ÇÑµÈ ¿øÄ¢°ú ¸ðµâ·Î µðÀÚÀÎ °¡À̵带 ¿î¿ëÇϱâ À§Çؼ´Â ȸ»ç Àüü¿¡¼ »ç¿ëÇÒ ¼ö ÀÖ´Â °¡À̵带 ¼Ò½º¿Í ÇÔ²² °ü¸®ÇÏ´Â ÆíÀÌ ÁÁÀ» °ÍÀÌ´Ù.
µðÀÚÀÎÀ» ÇÏ´Ù º¸¸é º¯¼ö°¡ »ý±â±â ¸¶·ÃÀ̶ó Á¦ÇÑµÈ °¡À̵带 ¹þ¾î³ª´Â °æ¿ìµµ »ý±æ °ÍÀÌ ºÐ¸íÇϰí, ¿¹¿Ü°¡ ´Ã¾î³ª¸é¼ ´õ º¹ÀâÇÑ °¡À̵尡 »ý±æÁöµµ ¸ð¸¥´Ù. °¡À̵å´Â ¸¸µå´Â °Íº¸´Ù ÃֽйöÀüÀ¸·Î À¯ÁöÇϰí ÀüÆÄÇÏ´Â °ÍÀÌ ´õ ¾î·Á¿î ¹ýÀÌ´Ï ±×¿¡ µû¸¥ ¸®¼Ò½ºµµ ¹«½ÃÇÒ ¼ö ¾ø´Ù. ±×·¡µµ ºÒÇÊ¿äÇÑ ÀÛ¾÷¿¡ Áö¼ÓÇÏ¿© ³ëµ¿·ÂÀ» ¼Ò¸ðÇÏ´À´Ï Çѹø ÇØ º¼¸¸ÇÑ ½Ãµµ°¡ ¾Æ´Ñ°¡ ½Í´Ù.
ÀÎÅÍ·¢¼Ç°ú ¾Ö´Ï¸ÞÀ̼ÇÀ» À§ÇÑ ´ë¾È, ‘Origami’¿Í ‘Framer.js’
ÀÎÅÍ·¢¼Ç°ú ¾Ö´Ï¸ÞÀ̼ÇÀ» Ç¥ÇöÇÏ´Â µ¿½Ã¿¡ °³¹ß¿¡ µµ¿òÀÌ µÇ´Â Äڵ带 »ý»êÇÒ ¼ö ÀÖ´Â ¹æ¹ýÀº ¾ÆÁ÷±îÁö ÇØ´äÀ» ã±â ¾î·Á¿ü´Ù. »ó´ëÀûÀ¸·Î Ä£¼÷ÇÑ ‘F lash’³ª ‘After Effects’ µîÀÇ ¿µ»ó ¼ÒÇÁÆ®¿þ¾î´Â Ä¿¹Â´ÏÄÉÀ̼ǿ¡ µµ¿òÀÌ µÇ±âµµ ÇÏÁö¸¸, µ¿ÀÛ °¡´ÉÇÑ ÇÁ·ÎÅäŸÀÔ(working prototype)¿¡´Â À̸£Áö ¸øÇÑ´Ù. »ç¼ÒÇÑ µðÀÚÀÎ ¼öÁ¤µµ ¿µ»óÀ¸·Î ¹Ý¿µÇÏ·Á¸é µÎ¼¼ ¹èÀÇ ½Ã°£ÀÌ µç´Ù´Â °ÍÀ» °¨¾ÈÇϸé Áö¾çÇØ¾ß ÇÒ ¹æÇâÀ̶ó°í »ý°¢ÇÑ´Ù.(ÇÁ·¹Á¨Å×À̼ÇÀ̳ª Ä¿¹Â´ÏÄÉÀ̼ÇÀ» À§ÇÑ ¿µ»ó ÇÁ·ÎÅäŸÀÌÇÎÀº Á¦Ç° °³¹ß¿¡ µµ¿òÀÌ µÇÁö ¾Ê´Â ¼Ò¸ðÀû ³ëµ¿À» ¿ä±¸ÇÏ´Â °æ¿ì°¡ ¸¹´Ù)
´ë¾ÈÀÌ µÉ ¼ö ÀÖ´Â µµ±¸·Î ‘Origami’¿Í ‘Framer.js’°¡ ÁÖ¸ñ¹Þ°í ÀÖ´Ù. µÑ ´Ù µðÀÚÀ̳ʸ¦ À§ÇØ ¸¸µé¾îÁø(½Ã°¢Àû Çǵå¹éÀÌ ÀÖ´Â) µ¿ÀÛ °¡´ÉÇÑ ÇÁ·ÎÅäŸÀÔ µµ±¸·Î, Äڵ忡 Àͼ÷ÇÏÁö ¾Ê¾Æµµ ¹è¿ì´Â µ¥ ¸¹Àº ½Ã°£ÀÌ µéÁö ¾Ê´Â´Ù. ‘Origami’´Â ÆäÀ̽ººÏ¿¡¼ ºñÁÖ¾ó ÇÁ·Î±×·¡¹Ö µµ±¸ Quartz composer¸¦ ÇÁ·ÎÅäŸÀÌÇο¡ Ȱ¿ëÇÒ ¼ö ÀÖµµ·Ï °³¹ßÇÑ Ç÷¯±×ÀÎÀÌ¸ç ‘Paper’ÀÇ °³¹ß °úÁ¤¿¡¼ Ȱ¿ëÇß´Ù°í ¾Ë·ÁÁ® ÀÖ´Ù. ¾ÆÁ÷±îÁö Äڵ带 Ãâ·ÂÇÏ´Â ±â´ÉÀ» Áö¿øÇϰí ÀÖÁö´Â ¾ÊÁö¸¸, ¾÷µ¥ÀÌÆ® ¿©ºÎ¿¡ µû¶ó ±â´ëÇØ º¼ ¸¸ÇÑ µµ±¸ÀÎ °Í °°´Ù. À¥ ±â¹ÝÀÇ ÇÁ·ÎÅäŸÀÌÇÎ µµ±¸ ‘Framer.js’´Â »ó´ëÀûÀ¸·Î °£´ÜÇÑ Äڵ带 ÀÛ¼ºÇØ ÀÎÅÍ·¢¼ÇÀ» ±¸ÇöÇØ º¼ ¼ö ÀÖ¾ú´Ù.
º¯ÈÀÇ ½ÃÀÛÀÌ ¹«¸£À;ú´Ù
¸î ³â Àü Æ÷Åä¼¥À» ´ëüÇÒ ±×·¡ÇÈ ¼ÒÇÁÆ®¿þ¾î¸¦ ¸¸µé°Ú´Ù¸ç ¾ß½É Â÷°Ô ¶Ù¾îµç ½ºÅ¸Æ®¾÷ wit studio°¡ ÁÖ¸ñ¹ÞÀº Á¦Ç°Àº ¾ÆÀÌ·¯´ÏÇϰԵµ ‘Æ÷Åä¼¥¿¡¼ µðÀÚÀÎ °¡À̵带 ½±°Ô ÀÛ¼ºÇÒ ¼ö ÀÖµµ·Ï µµ¿ÍÁÖ´Â ¼ÒÇÁÆ®¿þ¾î’¿´´Ù. Æ÷Åä¼¥ÀÇ ¾Æ¼ºÀ» ³Ñ¾î¼± µµ±¸´Â ¾ø¾úÁö¸¸ Æ÷Åä¼¥ÀÇ ºÎÁ·ÇÔÀ» »ÀÀú¸®°Ô ´À³¥ ¼ö ÀÖ´Â µµ±¸´Â ¸¹´Ù. ¾î¶² Á¦Ç°Àº Æ÷Åä¼¥º¸´Ù ÀÎÅÍÆäÀ̽º¸¦ ½±°í ºü¸£°Ô ¸¸µé ¼ö ÀÖ°í, ¾î¶² °ÍÀº »õ·Î¿î ÀÎÅÍÆäÀ̽º¸¦ »ý°¢ÇÒ ¼ö ÀÖ´Â °è±â°¡ µÇ±âµµ Çß´Ù.
ÇѶ§´Â ‘Æ÷Åä¼¥ ÆÄÀÏÀ» °³¹ß·Î ¹Ù²ã ÁÖ´Â µµ±¸’ÀÇ µîÀåÀ» ¹Ù¶ó´Â µ¥ ¸ØÃç ÀÖ¾úÁö¸¸ ±»ÀÌ ±×·² Çʿ䰡 ¾øÀ»Áöµµ ¸ð¸£°Ú´Ù. ¿ÀÈ÷·Á Æ÷Åä¼¥À» ³Ñ¾î¼± ÀÎÅÍÆäÀ̽ºÀÇ ¹Ì·¡°¡ ¹Ù¦ ´Ù°¡¿Í ÀÖ´Â °Í °°´Ù. ‘National Parks’, ‘Facebook Paper’, ‘iOS’ µî ÈǸ¢ÇÑ Á¦Ç°ÀÇ ÀÎÅÍÆäÀ̽º´Â °áÄÚ Adobe ¼ÒÇÁÆ®¿þ¾î¸¸ ½á¼ ¸¸µé¾îÁø °ÍÀÌ ¾Æ´Ï´Ù!
‘¶Ù¾î³ ¸ñ¼ö´Â ¿¬Àå Å¿À» ÇÏÁö ¾Ê´Â´Ù’´Â ¼Ó´ãó·³, µðÀÚÀÎÀ» ´õ Àß Çϱâ À§ÇØ ´õ ÁÁÀº µµ±¸°¡ ÇÊ¿äÇÑ °ÍÀÌ ¾Æ´Ï¶ó´Â °ÍÀ» ¿ì¸®µµ Àß ¾È´Ù. Æ÷Åä¼¥¸¸À¸·Î µðÀÚÀÎ Àß Çϱ⵵ Èûµé´Ù! ÇÏÁö¸¸ ÀåÀÎÀº Àڽſ¡°Ô °¡Àå ÀûÇÕÇÑ µµ±¸¸¦ ½º½º·Î ¸¸µç´Ù´Â °ÍÀ» ±â¾ïÇÏÀÚ. ¾Æ¸¶µµ µµ±¸°¡ »ý°¢ÀÇ Æ²À» °áÁ¤Çϱ⠶§¹®ÀÌ ¾Æ´Ò±î.
µðÀÚÀ̳ʴ °ÑÀ¸·Î º¸±â¿¡ âÁ¶ÀûÀÎ Á÷¾÷ó·³ º¸ÀÌÁö¸¸, ÇÑ ²¨Ç® ¹þ°Üº¸¸é ´ÜÁ¶·Î¿î ÀÏÀ» ¹Ýº¹ÇÏ´Â °æ¿ì°¡ ¸¹´Ù. ¿À´ÃÀ» Áö·çÇÏÁö ¾Ê°Ô º¸³»±â À§Çؼ¶óµµ °¢ÀÚÀÇ Çã¿ë ¹üÀ§ ¾È¿¡¼ Àç¹ÌÀÖ´Â ½Ãµµ¸¦ ÇØ º¸ÀÚ. ¾îÁ¦¿Í °°Àº ÀÏÀ» ´Ù¸£°Ô ÇÏ¸é ¿À´ÃÀÌ ´õ Áñ°Å¿ï °ÍÀÌ´Ù! ¸¶Áö¸·À¸·Î ’Noflo’¸¦ °³¹ß ÁßÀÎ Leigh Taylor°¡ ÈÄ¿øÀڵ鿡°Ô ´øÁø Ãâ»çÇ¥5ÀÇ ÇÑ ±¸ÀýÀ» ¿Å°Ü ÀûÀ¸¸ç ±ÛÀ» ¸¶¹«¸®ÇÑ´Ù.
Æ÷Åä¼¥º¸´Ù Fireworks°¡ ÁÁ³ª¿ä?.com
½ºÅ¥¾î¸ðÇÁ(Skeuomorph) µðÀÚÀÎ
: iOS °ÔÀÓ ¼¾ÅÍ ¾ÛÀÇ Å×À̺íÀÌ ³ì»öÀÇ ½ÇÁ¦ ´ç±¸´ë °°Àº ´À³¦À» ÁÖ´Â °Íó·³ ½ÇÁ¦ ÀçÁú°ú ¹°Ã¼¸¦ ¸ð¹æÇÏ´Â ¹æ½Ä
Æ÷Åä¼¥¿ë °¡ÀÌµå µµ±¸ ‘Assistor PS’¸¦ °³¹ßÇß´Ù.
µðÀÚÀÎ °¡ÀÌµå ±³À° ¼¼¹Ì³ª ÀÚ·á
Leigh Taylor´Â Æ÷Åä¼¥ÀÇ ´ÞÀÎÀÌ µÇ¾úÁö¸¸, ±×·¸°Ô ‘µðÀÚÀÎ’ÇÑ °á°ú¹°¿¡ ÇѰ踦 ´À²¼´Ù°í °í¹éÇÑ´Ù.
ÇöÀç´Â µðÀÚÀΰú Äڵ带 ³Ñ³ªµå´Â Çù¾÷ µµ±¸ ‘NoFlo’¸¦ µ¿·áµé°ú °³¹ß ÁßÀÌ´Ù.
<Photoshop is not a design tool>, Leigh Taylor.
[Ãâó] UX NOTE 05 : UX TALK|ÀÛ¼ºÀÚ ³×À̹ö ¼³°è(µðÀÚÀÎ)
|