À¥À» ÅëÇØ »õ·Î¿î âÁ¶¸¦ ²Þ²Ù´Â Àΰ£ - kimdirector
kimdirector is Creative Web & Mobile UI/UX Planner and Designer
WEBDESK
Web Plan Report
HOME ¡µ WEBDESK ¡µ Webplan Report
¿ÍÀ̾î ÇÁ·¹ÀÓ¿¡¼­ ½Ã°¢Àû °èÃþÀ» Àü´ÞÇÏ´Â ¹æ¹ý
Posted by kimdirector | 2020.05.28 | Hit : 1215
¿ÍÀ̾î ÇÁ·¹ÀÓ  µðÀÚÀΠ »ö»ó 
¸ñ·Ïº¸±âÀÌÀüº¸±â
»ö»ó »ç¿ëÀº µðÀÚÀο¡¼­ ½Ã°¢Àû °èÃþ ±¸Á¶¸¦ Àü´ÞÇÏ´Â °¡Àå ÁÁÀº ¹æ¹ý Áß ÇϳªÀÔ´Ï´Ù. ±×·¯³ª ¿ÍÀ̾î ÇÁ·¹ÀÓ¿¡¼­´Â ÃÖ¾ÇÀÇ »óȲ Áß ÇϳªÀÔ´Ï´Ù. ¸¹Àº ¼³°èÀÚµéÀº °èÃþ ±¸Á¶¸¦ Àü´ÞÇϱâ À§ÇØ ¿ÍÀ̾î ÇÁ·¹ÀÓ¿¡¼­ »ö»óÀ» »ç¿ëÇØ¾ß ÇÑ´Ù°í »ý°¢ÇÕ´Ï´Ù. ½Ã°¢Àû ¹«°Ô¸¦ Ç¥½ÃÇϱâ À§ÇØ »ö»óÀ» »ç¿ëÇÏ´Â °æ¿ì ÃÖÁ¾ µðÀÚÀÎÀÇ ¼±¸íµµ°¡ ¶³¾îÁú ¼ö ÀÖ½À´Ï´Ù.
 

 
°èÃþÀû ¼±¸íµµ¸¦ È帮°Ô ÇÏ´Â »ö»ó
 
´Ù¸¥ ¸ðµç °ÍÀº Èæ¹éÀ̹ǷΠ¿ÍÀ̾î ÇÁ·¹ÀÓ¿¡¼­ »ö»óÀÌ ÁöÁ¤µÈ ¿ä¼ÒÀÇ ¹«°Ô¸¦ ½±°Ô º¼ ¼ö ÀÖ½À´Ï´Ù. ±×·¯³ª ÇØ´ç ¿ÍÀ̾î ÇÁ·¹ÀÓÀ» ¸ðÇüÀ¸·Î º¯È¯ÇÒ ¶§ ÇØ´ç ¿ä¼ÒÀÇ ¼±¸íµµ°¡ °°ÀºÁö ¾Ë ¼ö ÀÖ´Â ¹æ¹ýÀÌ ¾ø½À´Ï´Ù .
 
¸ðÇü¿¡´Â ´Ù¸¥ »ö»óÀÌ °æÀïÇϱ⠶§¹®ÀÔ´Ï´Ù. ¿ÍÀ̾î ÇÁ·¹ÀÓÀÇ »ö»ó ¿ä¼Ò°¡ ´õ ÀÌ»ó ¸íÈ®ÇÏ°Ô ³ªÅ¸³ªÁö ¾Ê½À´Ï´Ù. ´Ù¸¥ ÆäÀÌÁö ¿ä¼Ò¿¡µµ »ö»óÀÌ ÀÖÀ¸¸é ½Ã°¢Àû °¡ÁßÄ¡°¡ ÁÙ¾î µì´Ï´Ù.
 
 
»ö»ó »ç¿ëÀÇ ¶Ç ´Ù¸¥ À§ÇèÀº ¸¹Àº µðÀÚÀ̳ʰ¡ ½Ã°¢Àû °èÃþÀ» Ç¥½ÃÇÏ´Â ±âº» ¹æ¹ýÀ¸·Î »ö»ó¿¡ ÀÇÁ¸ÇÑ´Ù´Â °ÍÀÔ´Ï´Ù. ¿ÍÀ̾î ÇÁ·¹ÀÓ¿¡¼­ ¿ä¼Ò¸¦ »ö»óÀ¸·Î ½±°Ô Ç¥½ÃÇÒ ¼ö ÀÖ½À´Ï´Ù. ±×·¯³ª ½Ã°¢Àû °èÃþÀÌ ¾øÀ¸¸é ¾ó¸¶³ª ¸íÈ®Çմϱî?
 
µðÀÚÀ̳ʰ¡ ´Ù¸¥ °èÃþÀû ¼Ó¼ºÀ» ¹«½ÃÇÒ ¶§ »ö»óÀº ¸íÈ®¼ºÀ» À§ÇØ ¹öÆÀ¸ñÀÌ µË´Ï´Ù. µðÀÚÀÎ ºÎÁ·À» º¸¿ÏÇϱâ À§ÇØ »ö»óÀ» »ç¿ëÇÏÁö ¸¶½Ê½Ã¿À. µðÀÚÀο¡´Â ¸íÈ®ÇÑ °èÃþ ±¸Á¶°¡ ¾ø¾î¾ß ÇÕ´Ï´Ù.
 
¸¹Àº »çÀÌÆ®¿¡ »ö¸Í »ç¿ëÀÚ°¡ Àֱ⠶§¹®¿¡ »öÀ» »ç¿ëÇÏ´Â °ÍÀÌ Ç×»ó È¿°úÀûÀÎ °ÍÀº ¾Æ´Õ´Ï´Ù. ¸ðµç »ç¿ëÀÚ°¡ ¿ä¼ÒÀÇ ¹«°Ô¸¦ ¸íÈ®ÇÏ°Ô ÇÏ·Á¸é µðÀÚÀο¡ ´Ù¸¥ ¼Ó¼ºÀÌ Æ÷ÇԵǾî¾ß ÇÕ´Ï´Ù.
 
 
½Ã°¢Àû °èÃþÀÇ ´Ù¸¥ Ư¼º
 
¿ÍÀ̾î ÇÁ·¹ÀÓ¿¡ »ö»óÀ» Ãß°¡ÇÏ¸é ½Ã°¢Àû °èÃþ ±¸Á¶ÀÇ °­µµ¸¦ ÃøÁ¤ÇϱⰡ ¾î·Æ½À´Ï´Ù. »ö»óÀÌ ´Ù¸¥ °èÃþÀû ¼Ó¼ºÀ» °¡¸®±â ¶§¹®ÀÔ´Ï´Ù. »ö»óÀ» ÇÇÇϸé ÇØ´ç ¼Ó¼ºÀÌ µÎµå·¯Áý´Ï´Ù. ¸ðÇü¿¡¼­ »ö»óÀÇ ½Ã°¢Àû ¹«°Ô°¡ »ç¶óÁöÁö¸¸ ÀÌ·¯ÇÑ ¼Ó¼ºÀº ±×´ë·Î À¯ÁöµË´Ï´Ù.
 
Å©±â
¸ðµç ¿ä¼ÒÀÇ Å©±â°¡ °°¾Æ¾ß ÇÏ´Â °ÍÀº ¾Æ´Õ´Ï´Ù. ¿ä¼Ò°¡ Ŭ¼ö·Ï ´õ ¸¹Àº °ü½ÉÀ» ²ø°Ô µË´Ï´Ù. Å©±â°¡ ÀÛµ¿ÇÏ·Á¸é ¿ä¼Ò°¡ ÁÖº¯ÀÇ ´Ù¸¥ ¿ä¼Ò¿¡ ºñÇØ Ä¿¾ß ÇÕ´Ï´Ù.

 
¸ð¾ç
°­Á¶ Ç¥½ÃÇÏ·Á´Â ÆäÀÌÁö¿¡ ÄÁÅÙÃ÷°¡ ÀÖÀ» ¼ö ÀÖ½À´Ï´Ù. ´ç½ÅÀº »ö»ó°ú Å©±â¿¡¸¸ ±¹ÇѵÇÁö ¾Ê½À´Ï´Ù. ¸ð¾çÀ» »ç¿ëÇÒ ¼öµµ ÀÖ½À´Ï´Ù. ³»¿ë ÁÖÀ§¿¡ »óÀÚ¸¦ ¹èÄ¡Çϰųª ¼±À¸·Î ±¸ºÐÇÏ¸é ¿µ¿ªÀÌ Áß¿äÇÏ´Ù´Â °ÍÀ» ¾Ë ¼ö ÀÖ½À´Ï´Ù.

 
³õ±â
»ç¿ëÀڴ ƯÁ¤ ÆÐÅÏÀ¸·Î ÆäÀÌÁö¸¦ ½ºÄµÇÕ´Ï´Ù. ´Ù¸¥ °Íº¸´Ù ´õ ÁÖ¸ñÀ» ¹Þ´Â ÆäÀÌÁö ¿µ¿ªÀÌ ÀÖ½À´Ï´Ù. Áß¿äÇÑ ºÎºÐ¿¡ Áß¿äÇÑ ³»¿ëÀ» ³ÖÀ» ¼ö ÀÖ½À´Ï´Ù. Á¢Èù ºÎºÐ°ú À§ÂÊ ¹× ¿ÞÂÊÀ» µû¶ó »ç¿ëÀÚÀÇ ´«ÀÌ °¡Àå ¸¹ÀÌ °íÁ¤µÇ´Â À§Ä¡ÀÔ´Ï´Ù.

 
¿ª»ö
»ö»óÀº °èÃþÀû ¼±¸íµµ¸¦ ¸ðÈ£ÇÏ°Ô ÇÏÁö¸¸ ¿ª»öÀº Ãß°¡ÇÒ ¼ö ÀÖ½À´Ï´Ù. ´ëºÎºÐÀÇ ¿ÍÀ̾î ÇÁ·¹ÀÓÀº ¹àÀº ¹è°æ¿¡¼­ ¾îµÎ¿î »öÀ» »ç¿ëÇÕ´Ï´Ù. ´ëºÎºÐÀÇ »çÀÌÆ®¿¡¼­ Á¾Á¾ Á߸³ ¹è°æ»öÀ» »ç¿ëÇϱ⠶§¹®ÀÔ´Ï´Ù. ±×·¯³ª »ö»óÀ» ¹ÝÀü½ÃŰ¸é ¾îµÎ¿î ¹è°æ¿¡ ¹àÀº »ö»óÀÌ Àû¿ëµË´Ï´Ù. À̰ÍÀº ƯÁ¤ »ö»óÀ» Á¦¾ÈÇÏÁö ¾Ê°í »ö»óÀ» Àü´ÞÇÏ´Â È¿°úÀûÀÎ ¹æ¹ýÀÔ´Ï´Ù.
 
 
ƯÁ¤ »ö»óÀ» Á¦¾ÈÇÏ¸é ½ÃûÀÚ°¡ ÇØ´ç »ö»óÀÌ µðÀÚÀÎÀÇ ³ª¸ÓÁö ºÎºÐ¿¡ ¾î¶² ¿µÇâÀ» ¹ÌÄ¡´ÂÁö ±Ã±ÝÇØ ÇÒ ¼ö ÀÖ½À´Ï´Ù. ±×°ÍÀº ¿ÍÀ̾î ÇÁ·¹ÀÓ¿¡¼­ ¿øÇÏ´Â °ÍÀÌ ¾Æ´Õ´Ï´Ù. ´ç½ÅÀº ±×µéÀÌ ±¸Á¶¿Í ·¹À̾ƿô¿¡ ÁýÁßÇϱ⸦ ¿øÇÕ´Ï´Ù.
 
°­ÇÑ »ö ä¿ì±â°¡ ÇÊ¿äÇÑ ÀÎÅÍÆäÀ̽º ¿ä¼Ò¿¡´Â ¿ª»öÀ» »ç¿ëÇØ¾ß ÇÕ´Ï´Ù. ¹öư, ¸Þ´º ¹× ¾Ë¸²Àº »ç¿ëÀÚ°¡ »óÈ£ ÀÛ¿ëÇϱ⠶§¹®¿¡ ½Ã°¢ÀûÀ¸·Î ¸íÈ®ÇØ¾ß ÇÕ´Ï´Ù. ±×·¯³ª ±×·¸°Ô ÇÏÁö ¸¶½Ê½Ã¿À. ¸ðµç ¿ä¼Ò°¡ ¹à°Ô Ç¥½ÃµÇ¸é °èÃþ ±¸Á¶°¡ ¼Õ½ÇµË´Ï´Ù.
 
 
¿ÍÀ̾î ÇÁ·¹ÀÓ ÆÐÅÏ
 
½Ã°¢Àû °èÃþ ±¸Á¶¸¦º¸´Ù ½±°Ô Àü´ÞÇÒ ¼ö ÀÖ´Â ¿ÍÀ̾î ÇÁ·¹ÀÓ ÅøÅ¶ÀÌ ÀÖ½À´Ï´Ù. ¿ì¸®°¡ µðÀÚÀÎÇÑ ¿ÍÀ̾î ÇÁ·¹ÀÓ ÅøÅ¶À» ¾òÀ» ¼ö ÀÖ½À´Ï´Ù :  ¿ÍÀ̾î ÇÁ·¹ÀÓ ÆÐÅÏ . °¢ UI ÆÐÅÏÀº »ö»óÀ» »ç¿ëÇÏÁö ¾Ê°í ½Ã°¢Àû ¹«°Ô¿Í ¼±¸íµµ·Î ¼³°èµÇ¾ú½À´Ï´Ù.
 
 
»ö»óÀÌ ¾ø´Â ½Ã°¢Àû °èÃþ
 
½Ã°¢Àû °èÃþÀÌ »ö»ó¾øÀÌ ¸íÈ®ÇÏÁö ¾ÊÀ¸¸é µðÀÚÀο¡ ÃæºÐÇÑ Æ¯¼ºÀÌ »ç¿ëµÇÁö ¾Ê½À´Ï´Ù. »ö»ó¾øÀÌ ½Ã°¢Àû °èÃþ ±¸Á¶¸¦ Àü´ÞÇÒ ¼ö ÀÖÀ» »Ó¸¸ ¾Æ´Ï¶ó ÇÊ¿äÇÕ´Ï´Ù.
 
±×·¸°Ô ÇÏ¸é ±¸Á¶¿Í ·¹À̾ƿôÀÇ ¼±¸íµµ¸¦ ÃøÁ¤ÇÒ ¼ö ÀÖ½À´Ï´Ù. »ö»ó¾øÀÌ ¼±¸íÇÏÁö ¾ÊÀº ¿ÍÀ̾î ÇÁ·¹ÀÓÀº °­·ÂÇÑ °èÃþ ±¸Á¶°¡ ¾ø´Â ¿ÍÀ̾î ÇÁ·¹ÀÓÀÔ´Ï´Ù. »ö»óÀ» Ãß°¡Çصµ ¹®Á¦°¡ ÇØ°áµÇÁö ¾ÊÀ¸¸ç ´õ ³ªÀº µðÀÚÀÎÀÔ´Ï´Ù.
 
ÀÚ¼¼ÇÑ ³»¿ëÀº ¿ø¹®À» È®ÀÎÇϽñ⠹ٶø´Ï´Ù. º»³»¿ëÀº ¹ø¿ªÇÑ ³»¿ëÀ¸·Î ÀÇ¿ªÀÌ ÀÖÀ» ¼ö ÀÖÀ¸¸ç, Ãß°¡ÀûÀÎ ¼³¸íÀÌ Æ÷ÇԵǾî ÀÖÀ¸´Ï, Âü°íÇϽñ⠹ٶø´Ï´Ù.
Posted by kimdirector | 2020.05.28 | Hit : 1215
Origin https://uxmovement.com/wireframes/how-to-communicate-visual-hierarchy-on-wireframes/
Tags ¿ÍÀ̾î ÇÁ·¹ÀÓ  µðÀÚÀΠ »ö»ó 
Trackback http://www.kimdirector.co.kr/bbs/zerotb.php?id=webplan&no=286

COMMENT
¸ñ·Ïº¸±âÀÌÀüº¸±â
WEBDESK
Webdesign Report
Web Plan Report
Inspiration
Web Development
Recommend Site
Insight Story
Popular Contents
Category Cloud
About us Review Portfolio Design Review Leaders Story Mobile Work IT Information Web Identity Work Everyday Mobile Life Webdesign Web Development Homepage Work Web Plan Report Practical Use Tip Inspiration Download Recommend Site  ETC. Work  Artwork  Typography Work
Tags
¸®´õ½Ê App ÆÛ½º³Î ºê·£µå °øÀ¯ ȨÆäÀÌÁö ½ºÅ¥¸ð¾îÇÈ ¸¶ÀÌÅ©·Î¼ÒÇÁÆ® Àü·« iPhone ¸ð¹ÙÀÏ »ç¹«½Ç µðÀÚÀΠȰ¿ë emeco ½º¸¶Æ®¿öÄ¡ µ¿±âÈ­ Android Draft ·Î°íµðÀÚÀÎ µðÀÚÀÎ ¸ð¹ÙÀÏ ³ª´®±Û²Ã¿¡ÄÚ ¾ÆÀÌÆù Æ÷Æ®Æú¸®¿À ¿µ¹® ¾ÖÇø®ÄÉÀÌ¼Ç À¥»çÀÌÆ® ¼Ö·ç¼Ç âÁ¶ ÀÚ¹Ù½ºÅ©¸³Æ® À¥µðÀÚÀÎ ½ºÅ©·Ñ ¹è¿ò °áÁ¦ °³¹ß CIOkorea âÀÇ·Â HTML5 Homepage
Recommend Tags
µðÀÚÀÎ ¾ÅÅ· ÆÛ½º³Î ºê·£µå »ç¿ëÀÚ °æÇè ¼­ºñ½º µðÀÚÀÎ