ÄÁÅÙÃ÷»ó¼¼º¸±â

DESIGNING INTERFACES: ÀÎÅÍÆäÀ̽º µðÀÚÀÎ 94°¡Áö ÆÐÅÏ
DESIGNING INTERFACES: ÀÎÅÍÆäÀ̽º µðÀÚÀÎ 94°¡Áö ÆÐÅÏ
  • ÀúÀÚÁ¦´ÏÆÛ ƼµåÀ£
  • ÃâÆÇ»çÇѺû¹Ìµð¾î
  • ÃâÆÇÀÏ2007-07-08
  • µî·ÏÀÏ2008-11-10
º¸À¯ 2, ´ëÃâ 0, ¿¹¾à 0, ´©Àû´ëÃâ 11, ´©Àû¿¹¾à 0

Ã¥¼Ò°³

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 peoples 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  Ä³½ºÄ³À̵ù ¸®½ºÆ®(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

ÇÑÁÙ ¼­Æò