Credits: Eddie Lobanovskiy
±â¼úÀÇ ºü¸¥ ¹ßÀüÀ¸·Î ÀÎÇØ ¾Ö´Ï¸ÞÀ̼ÇÀº ½Ã°¢Àû °í±Þ½º·¯¿òÀ» À§ÇØ »ç¿ëÇϱ⠺¸´Ù´Â »ç¿ëÀÚ°¡ ±â´ëÇÏ´Â ±â´ÉÀû ¿ä±¸»çÇ×ÀÌ µÇ¾ú½À´Ï´Ù. ¾Ö´Ï¸ÞÀ̼ÇÀº ÀÎÅÍÆäÀ̽º¿¡ Á¸ÀçÇÏ´Â ¸¹Àº ±â´ÉÀû ¹®Á¦¸¦ ÇØ°áÇØÁÖ¸ç ÀÎÅÍÆäÀ̽º°¡ »ý±â ÀÖÀ¸¸é¼µµ ÁøÁ¤À¸·Î »ç¿ëÀÚ¸¦ À§ÇÑ´Ù°í ´À³¢°Ô ÇØÁÝ´Ï´Ù. ¸ð¹ÙÀÏ ÀÎÅÍÆäÀ̽ºÀÇ ±â´É¼º°ú °¨¼ºÀûÀÎ ÈûÀ» Çâ»ó½ÃÄÑÁÖ´Â ‘¾Ö´Ï¸ÞÀÌ¼Ç ÇÙ½É ¿ä·É’À» »ìÆìº¸µµ·Ï ÇϰڽÀ´Ï´Ù.
1. System Status
Ç×»ó ¾ÛÀÇ ¹é½ºÅ×ÀÌÁö¿¡¼´Â ¸¹Àº ¼öÀÇ ÇÁ·Î¼¼½º°¡ ÁøÇà ÁßÀÎ °æ¿ì°¡ ¸¹ÀÌ ÀÖ½À´Ï´Ù. °¡·É µ¥ÀÌÅͰ¡ ¼¹ö·ÎºÎÅÍ ´Ù¿î·ÎµåµÇ°í Àְųª, °è»êÀÌ ÁøÇà ÁßÀ̰ųª ÇÒ ¶§´Â ÀÌ·¯ÇÑ ÇÁ·Î¼¼½º¿¡´Â ¾ðÁ¦³ª ½Ã°£ÀÌ °É¸®±â ¸¶·ÃÀÔ´Ï´Ù. »ç¿ëÀÚ¿¡°Ô´Â ¾ÛÀÌ °íÀå³ °ÍÀÌ ¾Æ´Ï¸ç ÇÁ·Î¼¼½º°¡ ÁøÇà ÁßÀÎ »óÅÂÀÓÀ» ¾Ë·ÁÁà¾ß ÇÕ´Ï´Ù. ÇÁ·Î¼¼½º¿¡ ´ëÇÑ ½Ã°¢Àû ½ÎÀÎÀº »ç¿ëÀÚ°¡ ¾Û¿¡ ´ëÇØ¼ ÅëÁ¦°¨À» °¡Áú ¼ö ÀÖ°Ô ÇØÁÖ´Â °ÍÀÌ »ç¿ëÀÚ¿¡°Ô ¾ÈÁ¤°¨°ú µµ¿òÀ» ÁÙ ¼ö ÀÖÀ» °Í ÀÔ´Ï´Ù.
Loading Indicators
·Îµù ½Ã°£Àº ´ëºÎºÐÀÇ µðÁöÅÐ Á¦Ç°¿¡¼ ÇÇÇÒ ¼ö ¾ø´Â »óȲÀÔ´Ï´Ù. ¾Ö´Ï¸ÞÀ̼ÇÀÌ ÀÌ ¹®Á¦¸¦ ÇØ°áÇØ ÁÖÁø ¸øÇϰÚÁö¸¸, »ç¿ëÀÚ¿¡°Ô´Â ºÐ¸í ‘±â´Ù¸²’Àº Å« ¹®Á¦°¡ ¾Æ´Ñ °ÍÀ¸·Î ¸¸µé¾î ÁÝ´Ï´Ù. ±â´Ù¸²À» ÁÙÀÏ ¼ö ¾øÀ» ¶§¶óµµ, ±â´Ù¸²À» Á¶±Ý ´õ Áñ°Ì°Ô ¸¸µé¾î ÁÙ ¼ö´Â ÀÖ½À´Ï´Ù. âÀÇÀûÀÎ ÇÁ·Î¼¼½º ÀεðÄÉÀÌÅÍ´Â »ç¿ëÀÚ°¡ Áö°¢ÇÏ´Â ½Ã°£À» ÁÙ¿©ÁÙ ¼ö ÀÖ½À´Ï´Ù. ¾Ö´Ï¸ÞÀ̼ÇÀº »ç¿ëÀÚÀÇ Á¦Ç°¿¡ ´ëÇÑ Áö°¢¿¡ ¿µÇâÀ» ¹ÌÃļ ½ÇÁ¦º¸´Ù ´õ ÁÁÀº Á¦Ç°À̶ó°í ´À³¢°Ô ÇØ ÁÝ´Ï´Ù.
±â´Ù¸®´Â Àá±ñÀÇ ½Ã°£ µ¿¾È Èï¹Ì·Ó°Ô º¼ ¼ö ÀÖ´Â ¹«¾ð°¡¸¦ »ç¿ëÀÚ¿¡°Ô Á¦°øÇØ Áشٸé,
»ç¿ëÀÚ´Â ±â´Ù¸² ±× ÀÚü¿¡ ´ú ÁýÁßÇÏ°Ô µË´Ï´Ù.
Credits: Ramotion
Pull to refresh
ÀÌ ±×·ì¿¡¼ À¯¸íÇÑ ¾Ö´Ï¸ÞÀ̼ÇÀº “pull down to refresh” ¾Ö´Ï¸ÞÀ̼ÇÀ¸·Î, ¸ð¹ÙÀÏ µð¹ÙÀ̽º¿¡¼ ÄÜÅÙÃ÷°¡ ¾÷µ¥ÀÌÆ®µÇ´Â ÇÁ·Î¼¼½º¿¡ Àû¿ëµË´Ï´Ù.
ÆÁ : pull down to refresh ¾Ö´Ï¸ÞÀ̼ÇÀº ¾ÛÀÇ µðÀÚÀÎ ¾Æ¿ô¶óÀΰú ¸ÅÄ¡°¡ µÇ¾î¾ß ÇÕ´Ï´Ù.
¾ÛÀÌ ¹Ì´Ï¸ÖÇÑ µðÀÚÀÎÀ» µû¸£°í ÀÖ´Ù¸é, ÀÌ ¾Ö´Ï¸ÞÀÌ¼Ç ¿ª½Ã ±×·¡¾ß ÇÕ´Ï´Ù.
Credits: Zee Young
Notifications
¿òÁ÷ÀÓÀº ±× ÀÚü·Î À̸ñÀ» ²ø±â ¶§¹®¿¡ ¾Ë¸²¿¡ ¾Ö´Ï¸ÞÀÌ¼Ç È¿°ú¸¦ ÁÖ´Â °ÍÀº »ç¿ëÀÚÀÇ °æÇè¿¡ Áö³ªÄ¡°Ô ħ¹üÇÏÁö ¾ÊÀ¸¸é¼µµ Áñ°Ì°Ô ¾Ë¸²À» ÁÙ ¼ö ÀÖ´Â ¹æ¹ýÀÔ´Ï´Ù.

¿òÁ÷ÀÌ´Â ¿ÀºêÁ§Æ®´Â Áï½Ã »ç¿ëÀÚÀÇ À̸ñÀ» ²ø°Ô µË´Ï´Ù.
Credits: Arjun Kani
2. Navigation and Transitions
¾Ö´Ï¸ÞÀ̼ÇÀÌ °¡Àå ±âº»ÀûÀ¸·Î Ȱ¿ëµÇ´Â »ç·Ê´Â Àüȯ È¿°úÀÔ´Ï´Ù. ÆäÀÌÁöÀÇ ·¹À̾ƿô¿¡ ¹æ±Ý ¹ß»ýÇÑ º¯È°¡ ¹«¾ùÀÎÁö, ¹«¾ùÀÌ º¯È¸¦ Ã˹ßÇß´ÂÁö, ±× º¯È¸¦ ³ªÁß¿¡ ´Ù½Ã ÁÖ·Á¸é ¾î¶»°Ô ÇØ¾ß ÇÏ´ÂÁö µîÀ» »ç¿ëÀÚ°¡ ÀÌÇØÇÒ ¼ö ÀÖµµ·Ï µµ¿òÀ» ÁÖ±â À§ÇØ ÀÌ·± À¯ÇüÀÇ ¾Ö´Ï¸ÞÀ̼ÇÀÌ »ç¿ëµË´Ï´Ù. °íÀüÀûÀÎ »ç·Ê·Î´Â ¼û°ÜÁø ÄÜÅÙÃ÷¸¦ º¸¿©ÁÖ´Â Çܹö°Å ¹öưÀÌ ÀÖ½À´Ï´Ù.

¸ð¼Ç µðÀÚÀÎÀº Á¤º¸¸¦ Àü´ÞÇϸ鼵µ Àç¹ÌÀÖ´Â ¹æÇâÀ¸·Î È¿°úÀûÀ¸·Î À¯ÀúÀÇ À̸ñÀ» ²ø ¼ö ÀÖ½À´Ï´Ù.
Credits: Gal Shir
¿©±â¼´Â º¸Åë Çܹö°Å ¾Ö´Ï¸ÞÀ̼ÇÀÌ °¡Àå ¸¹ÀÌ °í·ÁµÇ´Â ¿É¼ÇÀÏ ÅÙµ¥, ³»ºñ°ÔÀ̼ǿ¡ Ȱ¿ëµÉ ¼ö ÀÖ´Â ¾Ö´Ï¸ÞÀ̼ÇÀº ´ÙÀ½°ú °°ÀÌ ´Ù¾çÇÕ´Ï´Ù.
Transport between navigational context
µðÀÚÀ̳ʴ ¾Ö´Ï¸ÞÀ̼ÇÀ» Ȱ¿ëÇÏ¿© »ç¿ëÀÚ°¡ ã°í ÀÖ´Â ÄÜÅØ½ºÆ®·Î ¸Å²ô·´°Ô À̵¿Çϵµ·Ï µµ¿ÍÁÖ¸ç, ½ºÅ©¸° »óÀÇ ¿ä¼Ò ¹èÄ¡¿¡ »ý±ä º¯È¸¦ ¼³¸íÇÕ´Ï´Ù. Àüȯ È¿°ú´Â ¼·Î ´Ù¸¥ UI »óÅ »çÀÌ¿¡¼ ´Ù¸® ¿ªÇÒÀ» ÇØÁÜÀ¸·Î, ½ºÅ©¸° »ó¿¡ º¯È°¡ »ý°åÀ» ¶§ ¾î¶² ÀÏÀÌ ÀϾ°í ÀÖ´Â °ÍÀÎÁö »ç¿ëÀÚ°¡ ÀÌÇØÇÒ ¼ö ÀÖ°Ô ÇØÁà¾ß ÇÕ´Ï´Ù.
Visual hierarchy and connection between elements
¾Ö´Ï¸ÞÀ̼ÇÀº ÀÎÅÍÆäÀ̽º »óÀÇ ¿ÀºêÁ§Æ®¸¦ Ç¥ÇöÇÏ°í ¿ÀºêÁ§Æ®³¢¸® ¾î¶»°Ô »óÈ£ÀÛ¿ëÇÏ´ÂÁö º¸¿©ÁÖ´Â µ¥ À¯¿ëÇÕ´Ï´Ù. ¾Ö´Ï¸ÞÀ̼ÇÀº ¿ä¼Ò°¡ ¼·Î ¾î¶»°Ô ¿¬°áµÇ¾î ÀÖ´ÂÁö º¸¿©ÁÝ´Ï´Ù.

Credits: Vitaly Rubtsov
Function change
¾î¶² °æ¿ì¿¡, µðÀÚÀ̳ʴ ƯÁ¤ Á¶°ÇÇÏ¿¡ ±â´ÉÀûÀ¸·Î º¯ÈÇÏ´Â ¾×¼Ç ¹öưÀ» µðÀÚÀÎÇ϶ó´Â ¿ä±¸¸¦ ¹Þ±âµµ ÇÕ´Ï´Ù. º¸Åë Àü¹ÝÀûÀÎ °ø°£ÀÌ Á¦ÇÑµÈ ¸ð¹ÙÀÏ µðÀÚÀο¡¼ ¸¹ÀÌ ¹ß°ßÇÒ ¼ö ÀÖ½À´Ï´Ù.

“Àç»ý”°ú “Á¤Áö” ¹öưÀº ´ÙÁß»óÅ ¹öư Áß ¾Æ¸¶ °¡Àå ÈçÇÏ°Ô »ç¿ëµÇ´Â »ç·ÊÀϰÍÀÔ´Ï´Ù.
Credits: KREATIVA Studio
ÀÌ·± À¯ÇüÀÇ ¾Ö´Ï¸ÞÀ̼ÇÀº »ç¿ëÀÚ°¡ ±×°ÍÀ» »ç¿ëÇÒ ¶§ ¾î¶»°Ô ¹Ù²î´ÂÁö º¸¿© ÁÝ´Ï´Ù. ¾Æ·¡ »ç·Ê¸¦ º¸¸é, À¯Àú°¡ ÇÃ·ÎÆÃ ¾×¼Ç ¹öư(floating action button)À» ´©¸£¸é Ç÷¯½º ½ÎÀÎÀÌ ¿¬ÇÊ ¸ð¾çÀ¸·Î ¹Ù²ò´Ï´Ù. ¿¬ÇÊÀº °¡Àå ÁÖµÈ ÀÛ¼º ±â´ÉÀ» º¸¿©ÁÖ´Â °Í ÀÔ´Ï´Ù. ÀÌ·¯ÇÑ ÀÛÀº µðÅ×ÀÏÀÌ ‘´ÙÀ½¿¡ ÀϾ ÀÏÀ» ÃßÃøÇØ¾ß¸¸ ÇÏ´Â »óȲ’°ú ‘µÎ »óÅ¿¡¼ ¾ÆÀÌÄÜÀÌ ¾î¶² ÀǹÌÀÎÁö ÀÌ¹Ì ¾Æ´Â »óȲ’ÀÇ Â÷À̸¦ ¸¸µì´Ï´Ù.

¹öưÀº “Ç÷¯½º”¿¡¼ “¿¬ÇÊ”·Î ¸ð¾çÀÌ ¹Ù²î¸é¼ ¹öưÀÇ ±â´ÉÀÌ ¹Ù²î¾úÀ½À» º¸¿©ÁÝ´Ï´Ù.
Credits: Material Design
3. Visual Feedback
½Ã°¢Àû Çǵå¹éÀº ¾î¶² ÀÎÅÍÆäÀ̽º¿¡¼µç ¸Å¿ì Áß¿äÇÕ´Ï´Ù. »ç¿ëÀÚ°¡ ÅëÁ¦°¨À» ´À³¥ ¼ö ÀÖ°Ô ÇØÁִµ¥, »ç¿ëÀÚ¿¡°Ô ÅëÁ¦°¨À̶õ ¾ðÁ¦µç ½Ã½ºÅÛÀÇ Çö »óŸ¦ ¾Ë°í ÀÌÇØÇÑ´Ù´Â °ÍÀ» ÀǹÌÇÕ´Ï´Ù.
Acknowledgement
¹öưÀ̳ª ÄÁÆ®·Ñ °°Àº »ç¿ëÀÚ ÀÎÅÍÆäÀ̽º ¿ä¼Ò´Â À¯¸® µÚ¿¡ Á¸ÀçÇÑ´Ù ÇÒÁö¶óµµ ½ÇÁ¦ À¯ÇüÀÇ ¹°Ã¼·Î º¸ÀÌ°Ô ¸¸µé¾î¾ß ÇÕ´Ï´Ù. ¹°¸®Àû ¼¼°è¿¡¼ ¾²´Â ¹öưÀ̳ª ÄÁÆ®·Ñ, ±× ¿Ü ´Ù¸¥ ¿ÀºêÁ§Æ®µéÀº ¿ì¸®°¡ ÇØ´ç ¿ÀºêÁ§Æ®¿¡ °¡ÇÏ´Â Çൿ¿¡ ´ëÇÑ ¹ÝÀÀÀ» º¸ÀÔ´Ï´Ù. »ç¶÷µéÀº »ç¿ëÀÚ ÀÎÅÍÆäÀ̽º ÄÁÆ®·Ñ¿¡ ´ëÇØ¼µµ °°Àº ¼öÁØÀÇ ¹ÝÀÀ¼ºÀ» ±â´ëÇÕ´Ï´Ù. ÀÌ·¯ÇÑ °¸À» ÁÙÀ̱â À§Çؼ, ÀÎDzÀÌ ¹ß»ýÇÏ´Â Áï½Ã ÀÎÁöÇÏ¿©, ¸¶Ä¡ Á÷Á¢ Á¶ÀÛÇÏ´Â °Íó·³ º¸ÀÌ°í ´À²¸Áöµµ·Ï ½Ã°¢Àû ¸ð¼Ç ´Ü¼°¡ ¿òÁ÷¿©¾ß ÇÕ´Ï´Ù.

À¯ÀúÀÇ ÅÇ¿¡ ¹ÝÀÀÀ» º¸¿©ÁÖ´Â ¹öư
Credits: Material Design
Visualize the results of the actions
¾Ö´Ï¸ÞÀ̼ÇÀº ÀÎÅÍ·¢¼ÇÀÇ ¸ðµç ÁöÁ¡À» °³¼±ÇØ ÁÙ ¼ö ÀÖÀ¸¸ç »ç¿ëÀÚ°¡ ¼öÇàÇÏ´Â ¾×¼ÇÀ» º¸°ÇØ ÁÙ ¼ö ÀÖ½À´Ï´Ù. ¾Æ·¡ StripeÀÇ »ç·Ê¸¦ º¸¸é, »ç¿ëÀÚ°¡ “Pay”¸¦ Ŭ¸¯Çϸé, °áÁ¦°¡ ¼º°øÀûÀ¸·Î µÇ¾úÀ½À» º¸¿©ÁÖ±â Àü¿¡ ½ºÇdzʰ¡ Àá±ñ ³ªÅ¸³³´Ï´Ù. üũǥ½Ã ¾Ö´Ï¸ÞÀ̼ÇÀº »ç¿ëÀÚ°¡ ½±°Ô °áÁ¦¸¦ Çß´Ù°í ´À³¢°Ô ÇØÁִµ¥, »ç¿ëÀÚ´Â ÀÌ·± Áß¿äÇÑ µðÅ×ÀÏÀ» ÁÁ¾ÆÇÕ´Ï´Ù.

½Ã°¢Àû ¹ÝÀÀÀº ÀΰÔÀÌÁö¸ÕÆ®¸¦ ³ôÀÏ ¼ö ÀÖÀ¸¸ç À¯Àú¸¦ ±â»Ú°Ô ÇØÁÙ ¼ö ÀÖ½À´Ï´Ù.
Imagecredit: Michaël Villar
Conclusion
¾Ö´Ï¸ÞÀ̼ÇÀº Á¤±³ÇÏ°Ô »ç¿ëµÇ¸é °·ÂÇÑ ÈûÀ» ¹ßÈÖÇÕ´Ï´Ù. ¾î¶² µðÀÚÀο¡µç »ý¸íÀ» ºÒ¾î ³Ö¾îÁÖ¸ç, »ç¿ëÀÚ°¡ ÀÏ»óÀûÀΠŽºÅ©¸¦ ¼öÇàÇÒ ¶§µµ ¸ôÀÔÇÒ ¼ö ÀÖ°Ô ÇØÁÖ¸ç, ´ç¿¬È÷ ¿©·¯ºÐÀÌ ±ºÁß ¼Ó¿¡¼ ´«¿¡ ¶ç°Ô ¸¸µé¾î ÁÙ °ÍÀÔ´Ï´Ù. Àß µðÀÚÀÎµÈ ¾Ö´Ï¸ÞÀ̼ÇÀº °øµé¿© ¸¸µé¾ú´Ù´Â ´À³¦À» ¹Þ°Ô ÇØÁÝ´Ï´Ù.
|