Ã¥¼Ò°³
UI µðÀÚÀÎ È°¿ë¼. ÀÌ Ã¥Àº ÄÄÇ»ÅÍ ¼ÒÇÁÆ®¿þ¾î¸¦ ¸¸µå´Â µ¥ ÇÊ¿äÇÑ µðÀÚÀÎ ÆÐÅÏÀ» ÅëÇØ ÁÁÀº ÀÎÅÍÆäÀ̽º¸¦ »ç¿ëÇÏ´Â ÆÐÅÏ°ú »óÈ£ÀÛ¿ëÀÌ ³ôÀº ÀÎÅÍÆäÀ̽º¿¡ Àû¿ëµÇ´Â Á¤º¸±¸Á¶, ÆÐÅÏ°ú ÄÁÆ®·ÑÀ» ´Ù·ç´Â ¹ý µîÀ¸·Î ±¸¼ºÇß´Ù. ¡¶DESIGNING INTERFACES¡·´Â »ç¿ëÀÚ Á¶»çÀÇ ±âº»°ú ÄÁÅÙÃ÷ ±¸¼º, ÆäÀÌÁö ±¸¼º°ú º¹ÀâÇÑ µ¥ÀÌÅÍ º¸¿©ÁÖ±â, »ç¿ëÀڷκÎÅÍ ÀÎDz ¾ò±â, º¸±â ÁÁ°Ô ¸¸µé±â µîÀ¸·Î ±¸¼ºÇß´Ù.
ÀúÀÚ¼Ò°³
ÀúÀÚ_ Á¦´ÏÆÛ Æ¼µåÀ£ ÀúÀÚÀÎ Á¦´ÏÆÛ Æ¼µåÀ£Àº ÀÎÅÍ·¢¼Ç µðÀÚÀ̳ÊÀÌÀÚ ¼ÒÇÁÆ®¿þ¾î °³¹ßÀÚ·Î Å×Å©´ÏÄà ÄÄÇ»Æà ¼ÒÇÁÆ®¿þ¾î Á¦Á¶»çÀÎ MathWorks¿¡¼ ÀÏÇÏ°í ÀÖ´Ù. ±×³à´Â µðÀÚÀΰú µ¥ÀÌÅÍ ±¸Á¶ ºÐ¼®, ½Ã°¢È ÅøÀ» Àü¹®ÀûÀ¸·Î ´Ù·ç°í ÀÖÀ¸¸ç MATLAB µ¥ÀÌÅÍ ÅøÀÇ »õ·Î¿î µðÀÚÀÎÀ» °³¹ßÇÏ¿´´Ù. MATLABÀº ÀÚµ¿Â÷, ºñÇà±â, ´Ü¹éÁúÀ» °³¹ßÇÏ°í ¿ìÁÖ ÀÌ·ÐÀ» ¿¬±¸ÇÏ´Â ¼¼°è °¢±¹ÀÇ ¸®¼Ã³, Çлý, ¿£Áö´Ï¾îµé¿¡°Ô ¾²ÀÌ´Â ¼ÒÇÁÆ®¿þ¾îÀÌ´Ù. ÀúÀÚ´Â À¥ »çÀÌÆ® µðÀÚÀο¡ ´ëÇؼµµ Àü¹®ÀûÀÎ Áö½ÄÀ» °¡Áö°í ÀÖÀ¸¸ç ÃÊâ±â ¸®Ä¡ ÀÎÅÍ³Ý ¾ÖÇø®ÄÉÀ̼Ç(RIA) ±â¼ú¿¡ ¿ÁßÇÏ¿© 2000³â Ãʱ⿡ CurlÀ» µðÀÚÀÎÇÏ°í °³¹ßÇϴµ¥ µµ¿òÀ» ÁÖ¾ú´Ù. Á¦´ÏÆÛ´Â MIT¿¡¼ ±â¼ú ±³À°À» ¹Þ¾ÒÀ¸¸ç ¸Å»ç½ºÃß¼¼Ã÷ ¿¹¼ú ´ëÇп¡¼ µðÀÚÀÎ ±³À°À» ¹Þ¾ÒÀ¸³ª, ¾ÆÁ÷±îÁöµµ ¹è¿òÀÇ ±æÀ» ¸ØÃßÁö ¾Ê°í ÀÖ´Ù. ±×³à´Â 1997³âºÎÅÍ »ç¿ëÀÚ ÀÎÅÍÆäÀ̽º ÆÐÅϵéÀ» Á¶»çÇØ¿Ô´Ù. ±× ¿Ü¿¡µµ ±×¸²À» ±×¸®°í ±ÛÀ» ¾²´Â âÁ¶ÀûÀÎ È°µ¿¿¡ ¸ôÀÔÇØ ÀÖÀ¸¸ç, ´º À×±Û·£µåÀÇ ¾ß¿Ü¿¡¼ ¹ÙÀÌÅ©, º¸Æ®, »êÃ¥, ½ºÅ°, µî»êÀ¸·Î ¸¹Àº ½Ã°£À» º¸³»°í ÀÖ´Ù. http://jtidwell.net¿¡¼ ÀúÀÚÀÇ °³ÀÎ À¥ »çÀÌÆ®¸¦ º¼ ¼ö ÀÖ´Ù. [¿ªÀÚ¼Ò°³] ¿ªÀÚ_ ±è ¼Ò ¿µ ououmomo@gmail.com ÀÌÈ¿©ÀÚ´ëÇб³ ÈÇаú¸¦ °ÅÃÄ ±¹¹Î´ëÇб³ ½Ã°¢µðÀÚÀÎÇаú¸¦ Á¹¾÷ÇÏ¿´´Ù. ´Ù³â°£ UI Àü¹® ȸ»ç¿¡¼ PC ¾ÖÇø®ÄÉÀ̼Ç, ¸ð¹ÙÀÏ, DTV, ³»ºñ°ÔÀ̼Ç, Ȩ³×Æ®¿öÅ©, »ýÈ° °¡Àü µî ´Ù¾çÇÑ Á¦Ç°ÀÇ ÀÎÅÍÆäÀ̽º ÇÁ·ÎÁ§Æ®¸¦ ÁøÇàÇϸç, GUI µðÀÚÀÎ, UI ¼³°è, »ç¿ëÀÚ Á¶»ç, ¸®¼Ä¡¿Í ±âȹ¿¡ À̸£±â±îÁö À¯Àú ÀÎÅÍÆäÀ̽º¿¡ ´ëÇÑ ±íÀÌ ÀÖ´Â ½Ç¹« °æÇèÀ» ½×¾Ò´Ù.
¸ñÂ÷
¼¹® 01Àå. »ç¿ëÀÚµéÀº ¹«¾ùÀ» Çϴ°¡ ¸ñÀûÀ» ÀÌ·ç±â À§ÇÑ ¼ö´Ü »ç¿ëÀÚ Á¶»çÀÇ ±âº» »ç¿ëÀÚµéÀÇ ¹è¿ì°íÀÚ ÇÏ´Â µ¿±â ÆÐÅÏ 01 ¾ÈÀüÇÑ Å½»ö(safe exploration) 02 Áï°¢ÀûÀÎ ¸¸Á·(instant gratification) 03 ÃÖ¼ÒÇÑÀÇ ÃæÁ·(satisficing) 04 È帧 º¯È(changes in midstream) 05 ¼±Åà ¹Ì·ç±â(deferred choices) 06 ±¸Á¶ ´Ã¸®±â(incremental construction) 07 ½À°üÈ(habituation) 08 °ø°£ ±â¾ï(spatial memory) 09 ¹Ì·¡ ¿¹Ãø ±â¾ï(prospective memory) 10 ´É·üÀûÀÎ ¹Ýº¹(streamlined repetition) 11 Å°º¸µå¸¸ »ç¿ëÇϱâ(keyboard only) 12 ´Ù¸¥ À̵éÀÇ Ãæ°í(other people s advice) 02Àå. ÄÜÅÙÃ÷ ±¸¼ºÇϱâ: Á¤º¸ ±¸Á¶¿Í ¾ÖÇø®ÄÉÀÌ¼Ç ±¸Á¶ Á¤º¸ ±¸Á¶ÀÇ ±âº» : ³ª´©±â ¹°¸®ÀûÀÎ ±¸Á¶ ÆÐÅÏ 13 Åõ ÆгΠ¼¿·ºÅÍ(two-panel selector) 14 ĵ¹ö½º Ç÷¯½º ÆÈ·¹Æ®(canvas plus palette) 15 ¿ø À©µµ¿ì µå¸±´Ù¿î(one-window drilldown) 16 ¾óÅͳ×ÀÌƼºê ºä(alternative views) 17 À§ÀÚµå(wizard) 18 ¿¢½ºÆ®¶ó ¿Â µð¸Çµå(extras on demand) 19 ÀÎÆ®¸®±ë ºê·£Ä¡(intriguing branches) 20 ¸ÖƼ ·¹º§ ÇïÇÁ(multi-level help) 03Àå. µÑ·¯º¸±â: ³»ºñ°ÔÀ̼Ç, »çÀÎ, ±æ ã±â ¸Ó¹°·¯¼ ã±â ³»ºñ°ÔÀ̼ÇÀÇ ºñ¿ë ÆÐÅÏ 21 Ŭ¸®¾î ¿£Æ®¸® Æ÷ÀÎÆ®(clear entry points) 22 ±Û·Î¹ú ³»ºñ°ÔÀ̼Ç(global navigation) 23 Çãºê ¾Ø ½ºÆ÷Å©(hub and spoke) 24 ÇǶó¹Ìµå(pyrimid) 25 ¸ð´Þ ÆгÎ(modal panel) 26 ½ÃÄö½º ¸Ê(sequence map) 27 ºê·¹µåÅ©·´½º(breadcrumbs) 28 ÁÖ¼®ÀÌ ÀÖ´Â ½ºÅ©·Ñ ¹Ù(annotated scrollbar) 29 Ä÷¯ ÄÚµðµå ¼½¼Ç(color-coded sections) 30 ¾Ö´Ï¸ÞÀÌƼµå Æ®·£Áö¼Ç(animated transition) 31 À̽ºÄÉÀÌÇÁ ÇØÄ¡(escape hatch) 04Àå. ÆäÀÌÁö ±¸¼ºÇϱâ: ÆäÀÌÁö ¿ä¼ÒÀÇ ·¹À̾ƿô ÆäÀÌÁö ·¹À̾ƿôÀÇ ±âº» ÆÐÅÏ 32 ºñÁÖ¾ó ÇÁ·¹ÀÓ¿öÅ©(visual framework) 33 ¼¾ÅÍ ½ºÅ×ÀÌÁö(center stage) 34 ŸÀÌƲ ¼½¼Ç(tilted sections) 35 Ä«µå ½ºÅÃ(card stack) 36 Ŭ·ÎÀúºí ÆгÎ(closable panels) 37 ¹«¹öºí ÆгÎ(movable panels) 38 ¿À¸¥ÂÊ/¿ÞÂÊ ¹è¿(right/left alignment) 39 ´ë°¢¼± ±ÕÇü(diagonal balance) 40 ¼Ó¼º ½ÃÆ®(property sheet) 41 ¸®½ºÆÇ½Ãºê µð½ºÅ¬·ÎÀú(responsive disclosure) 42 ¸®½ºÆǽúê Àο¡ÀÌºí¸µ(responsive enabling) 43 ¸®Äûµå ·¹À̾ƿô(liquid layout) 05Àå. ½ÇÇàÇϱâ: ¾×¼Ç°ú Ä¿¸Çµå Ǫ½Ì ¹Ù¿î´õ¸® ÆÐÅÏ 44 ¹öÆ° ±×·ì(button groups) 45 ¾×¼Ç ÆгÎ(action panel) 46 Áß¿äÇÑ ¿Ï·á ¹öÆ°(prominent done button) 47 ½º¸¶Æ® ¸Þ´º ¾ÆÀÌÅÛ(smart menu items) 48 ÇÁ¸®ºä(preview) 49 ÇÁ·Î±×·¹½º ÀεðÄÉÀÌÅÍ(progress indicator) 50 ĵ½½·¯ºô¸®Æ¼(cancelability) 51 ¸ÖƼ ·¹º§ ¾ðµÎ(multi-level undo) 52 Ä¿¸Çµå È÷½ºÅ丮(command history) 53 ¸ÅÅ©·Î(macros) 06Àå. º¹ÀâÇÑ µ¥ÀÌÅÍ º¸¿©ÁÖ±â: Æ®¸®, Å×À̺í, ±×¸®°í ´Ù¸¥ Á¤º¸ ±×·¡Çȵé Á¤º¸ ±×·¡ÇÈÀÇ ±âº» ÆÐÅÏ 54 ¿À¹öºä Ç÷¯½º µðÅ×ÀÏ(overview plus detail) 55 µ¥ÀÌÅÍÆÁ(datatips) 56 ´ÙÀ̳»¹Í Äõ¸®(dynamic queries) 57 µ¥ÀÌÅÍ ºê·¯½Ì(data brushing) 58 ·ÎÄà ÁÖ¹Ö(local zooming) 59 ·Î¿ì ½ºÆ®¸®ÇÎ(row striping) 60 ¼ÒÅͺí Å×À̺í(sortable table) 61 Á¡ÇÁ Åõ ¾ÆÀÌÅÛ(jump to item) 62 ´º ¾ÆÀÌÅÛ ·Î¿ì(new-item row) 63 ij½ºÄ³À̵ù ¸®½ºÆ®(cascaing lists) 64 Æ®¸® Å×À̺í(tree table) 65 ¸ÖƼ Y ±×·¡ÇÁ(multi-Y graph) 66 ½º¸ô ¸ÖƼÇÃÁî(small multiples) 67 Æ®¸®¸Ê(treemap) 07Àå. »ç¿ëÀڷκÎÅÍ ÀÎDz ¾ò±â: Æû°ú ÄÁÆ®·Ñ Æû µðÀÚÀÎÀÇ ±âº» ÄÁÆ®·Ñ ¼±Åà ÆÐÅÏ 68 °ü¿ëÀûÀÎ Æ÷¸Ë(forgiving format) 69 ±¸Á¶ÈµÈ Æ÷¸Ë(structured format) 70 ºó °÷ ä¿ì±â(fill-in-the-blanks) 71 ÀÎDz ÈùÆ®(input hints) 72 ÀÎDz ÇÁ·ÒÇÁÆ®(input prompt) 73 ÀÚµ¿ ¿Ï¼º(autocompletion) 74 µå·Ó´Ù¿î ¼±ÅÃÀÚ(dropdown chooser) 75 ±×¸²À¸·Î µÇ¾î ÀÖ´Â ¼±Åà Ç׸ñ(illustrated choices) 76 ¸®½ºÆ® ºô´õ(list builder) 77 ±Â µðÆúÆ®(good defaults) 78 µ¿ÀÏÇÑ ÆäÀÌÁö¿¡¼ ¿À·ù ¸Þ½ÃÁö(same-page error messages) 08Àå. ºô´õ¿Í ÆíÁý±â ÆíÁý±â µðÀÚÀÎÀÇ ±âº» ÆÐÅÏ 79 ¿¡µðÆ® ÀÎ Ç÷¹À̽º(edit-in-place) 80 ½º¸¶Æ® ¼¿·º¼Ç(smart se