µðÁöÅПÀÓ½º

 


[¾Ë¾Æº¾½Ã´Ù] HTML5

ÇÁ¸°Æ® ÆäÀ̽ººÏ Æ®À§ÅÍ Ä«Ä«¿À½ºÅ丮
¸ÖƼ¹Ìµð¾î ³»ºÎÀû ±¸Çö Â÷¼¼´ë À¥Ç¥ÁØ
¸ð¹ÙÀÏȯ°æ ºê¶ó¿ìÀú ȣȯ¼º ÁÖ¸ñ
¿ÀÇÁ¶óÀμ­ ±¸µ¿ 'À¥ ¾Û' °³¹ß °¡´É
±¸±Û¤ý¾ÖÇà µî µµÀÔ ¡¦ 2012³â ¿Ï¼º


ÃÖ±Ù ±¸±ÛÀÌ Å©·Ò À¥ ºê¶ó¿ìÀú¿¡¼­ ÀÛµ¿ÇÏ´Â À¥ ½ºÅä¾î¸¦ ¹ßÇ¥Çϸ鼭 HTML5¿¡ ´ëÇÑ °ü½ÉÀÌ ³ô¾ÆÁö°í ÀÖ½À´Ï´Ù. ±×µ¿¾È HTML5´Â °³¹ßÀÚµéÀ̳ª ¾ó¸®¾î´äÅ͵éÀÇ °ü½É»ç¿´´Âµ¥ HTML5·Î °³¹ßµÈ À¥ ¾ÖÇø®ÄÉÀ̼ÇÀÌ µîÀåÇϸ鼭 ÀÌÁ¦´Â ÀÏ¹Ý ³×ƼÁðµéµµ HTML5¸¦ ½Ç°¨ÇÒ ¼ö ÀÖ°Ô µÆ½À´Ï´Ù. HTML5´Â ½º¸¶Æ®Æù, ÅÂºí¸´PC µî ¸ð¹ÙÀÏ ÄÄÇ»Æà ȯ°æÀÌ ºü¸£°Ô È®»êµÇ¸é¼­ ´õ¿í ±× Áø°¡¸¦ ¹ßÈÖÇÒ °ÍÀ¸·Î ¿¹»óµË´Ï´Ù.

¡Þ´Ù½Ã ÁÖ¸ñ¹Þ´Â À¥ Ç¥ÁØ=HTML(HyperText Markup Language)Àº ÀÎÅÍ³Ý À¥ »çÀÌÆ®¸¦ ¸¸µå´Â ÀÏÁ¾ÀÇ ÇÁ·Î±×·¥ ¾ð¾îÀÔ´Ï´Ù. HTMLÀº 1990³â´ë ÆÀ ¹ö³Ê½º ¸®¿¡ ÀÇÇØ Ã¢¾ÈµÆÀ¸¸ç ¿ùµå¿ÍÀ̵åÀ¥ÄÁ¼Ò½Ã¾ö(W3C)À» ÅëÇØ Ç¥ÁØÀÌ Á¦Á¤µË´Ï´Ù. W3C¿¡ ÀÇÇÑ HTML Ç¥ÁØÀÇ ÃÖÁ¾ ¹öÀüÀº 1999³â ¹ßÇ¥µÈ HTML4.01 ¹öÀüÀÔ´Ï´Ù. ±×¸®°í HTML5´Â 2007³âºÎÅÍ ³íÀǵDZ⠽ÃÀÛÇßÀ¸¸ç 2012³â¿¡¾ß Ç¥ÁØÀÌ ¿Ï¼ºµÉ ¿¹Á¤ÀÔ´Ï´Ù.

2000³â´ë µé¾î ÀÎÅÍ³Ý È¯°æÀº ±Þ¼Óµµ·Î ¹ßÀüÇßÀ¸³ª À¥ Ç¥ÁØÀº ÁøÀüµÇÁö ¸øÇß½À´Ï´Ù. Ç¥ÁØÀÌ ±â¼úÀÇ ¹ßÀü ¼Óµµ¸¦ µû¶óÀâÁö ¸øÇ߱⠶§¹®ÀÌÁÒ. ÀÎÅÍ³Ý »ç¾÷ÀÚµéÀº ±â¼úÇ¥ÁØÀ» ±â´Ù¸®Áö ¸øÇß°í ÀÌ¿¡ µû¶ó ´Ù¾çÇÑ `º¯Á¾'µéÀÌ ³ªÅ¸³ª±â ½ÃÀÛÇß½À´Ï´Ù. ¿ì¸®°¡ Àß ¾Ë°í ÀÖ´Â ¾×Ƽºê¿¢½º(ActiveX)³ª Ç÷¡½Ã(Flash)¿Í °°Àº ±â´ÉµéÀÌ ¹Ù·Î ÁÁÀº ¿¹ÀÔ´Ï´Ù. HTMLÀÌ °¡Áø ÇѰ踦 ±Øº¹Çϱâ À§ÇØ W3C´Â ´Ù¾çÇÑ ±â´ÉÀ» Áö¿øÇÏ´Â XML(extensible markup language)À̶ó´Â »õ·Î¿î ¸¶Å©¾÷ ¾ð¾î¸¦ Ç¥ÁØÈ­Çϱ⵵ Çß½À´Ï´Ù. ¶Ç, À¥ ÆäÀÌÁö¸¦ º¸´Ù Á¤±³ÇÏ°Ô ÀÛ¼ºÇÏ°í À¥ÆäÀÌÁö°£ Åë½ÅÀ» À§ÇØ CSS3³ª AJAX(asynchronous JavaScript and XML)¿Í °°Àº ±â´Éµéµµ ź»ýÇß½À´Ï´Ù.

Ç¥ÁØÀÌ ´Ê¾îÁö°í º¯Á¾µéÀÌ µîÀåÇϸ鼭 Á¡Á¡ ¸¹Àº ºÎÀÛ¿ëÀÌ ³ªÅ¸³ª±â ½ÃÀÛÇß½À´Ï´Ù. °¡Àå Å« ¹®Á¦´Â ȣȯ¼ºÀÔ´Ï´Ù. ±¹³» ´Ù¼öÀÇ ±â¾÷µéÀº ¾×Ƽºê¿¢½º³ª Ç÷¡½Ã ±â´ÉÀ» ÀÌ¿ëÇØ È¨ÆäÀÌÁö¸¦ Á¦ÀÛÇÏ°í Àִµ¥, ÆÄÀ̾îÆø½º¿Í °°ÀÌ ºñÇ¥ÁØÀ» Áö¿øÇÏÁö ¾Ê´Â À¥ºê¶ó¿ìÀú¿¡¼­´Â ÀÌ·± ±â¾÷ÀÇ È¨ÆäÀÌÁö¸¦ Á¦´ë·Î º¼ ¼ö ¾ø½À´Ï´Ù.

¿ì¸®³ª¶ó¿¡¼­ °¡Àå ¸¹ÀÌ »ç¿ëÇÏ´Â À¥ºê¶ó¿ìÀúÀÎ ¸¶ÀÌÅ©·Î¼ÒÇÁÆ®(MS)ÀÇ ÀÎÅͳÝÀͽºÇ÷η¯´Â ÀÌ·¯ÇÑ º¯Á¾ ±â´ÉµéÀ» Áö¿øÇÏ°í ÀÖ½À´Ï´Ù. ±× ´öºÐ¿¡ Æí¸®ÇÑ ±â´ÉµéÀ» ¸¹ÀÌ »ç¿ëÇÒ ¼ö ÀÖÁö¸¸ ¹Ý´ë·Î º¸¾È »ç°í°¡ ºó¹øÇÏ°Ô ¹ß»ýÇÏ´Â ¹®Á¦°¡ ¹ß»ýÇß½À´Ï´Ù.

±×µ¿¾È ¿ì¸®³ª¶ó¿¡¼­´Â À¥ Ç¥ÁØÀÇ ¹®Á¦Á¡À» ÀνÄÇÏÁö ¸øÇßÀ¸³ª ½º¸¶Æ®ÆùÀÇ µîÀåÀ¸·Î ¿©·¯ °¡Áö ºÒÆíÇÔÀÌ µå·¯³ª±â ½ÃÀÛÇß½À´Ï´Ù. ´ëÇ¥ÀûÀ¸·Î ¾ÖÇÃÀÇ ¾ÆÀÌÆù¿¡ ³»ÀåµÈ »çÆĸ®¶ó´Â À¥ºê¶ó¿ìÀú´Â ¾×Ƽºê¿¢½º¿Í Ç÷¡½Ã¸¦ Áö¿øÇÏÁö ¾Ê°í ÀÖ½À´Ï´Ù. °¶·°½ÃS´Â Ç÷¡½Ã¸¦ Áö¿øÇÑ´Ù´Â Á¡À» °­Á¡À¸·Î ³»¼¼¿ï Á¤µµ¿´½À´Ï´Ù. ÇÏÁö¸¸ ±¹³» ÀÎÅÍ³Ý »çÀÌÆ®¿¡ º¸ÆíÈ­µÈ ¾×Ƽºê¿¢½º´Â ½º¸¶Æ®ÆùÀ̳ª ÅÂºí¸´PC¿¡¼­´Â ÀÌ¿ëÇÒ ¼ö ¾ø½À´Ï´Ù.


ÀÌ¿¡ µû¶ó ±¹³»¿Ü À¯¸í À¥»çÀÌÆ®µéÀÌ ´Ù½Ã À¥ Ç¥ÁØ¿¡ ´ëÇÑ °ü½ÉÀ» °®°Ô µÆ°í HTML5°¡ ÁÖ¸ñ¹Þ±â ½ÃÀÛÇß½À´Ï´Ù. HTML5´Â Ç÷¯±×ÀÎ ÇÁ·Î±×·¥¾øÀ̵µ °¢Á¾ ±â´ÉÀ» ¼öÇàÇÒ ¼ö Àֱ⠶§¹®ÀÔ´Ï´Ù. ÀÌ¹Ì ±¹³»¿¡¼­µµ ³×À̹ö¿Í ´ÙÀ½ µî ´ëÇ¥ÀûÀÎ ÀÎÅÍ³Ý Æ÷ÅеéÀÌ HTML5¸¦ ÀÌ¿ëÇØ ¸ð¹ÙÀÏ »çÀÌÆ®¸¦ ±¸ÃàÇØ ¼­ºñ½ºÇÏ°í ÀÖ½À´Ï´Ù.
¡ÞHTML5ÀÇ ÁÖ¿ä Ư¡=HTML5°¡ ÀÎÅÍ³Ý ¾÷°è¿¡ ¾Ë·ÁÁö±â ½ÃÀÛÇÑ °ÍÀº 2009³â ±¸±ÛÀÌ À¥ °³¹ßÀÚ ÄÁÆÛ·±½ºÀÎ `±¸±Û I/O'¿¡¼­ ÀÚ»çÀÇ ¼­ºñ½º°¡ ¾Æ´Ñ HTML5¸¦ ½Ã¿¬ÇÏ°í Â÷¼¼´ë À¥ ±â¼ú·Î HTML5¸¦ Áö¿øÇÏ°Ú´Ù°í õ¸íÇϸ鼭ºÎÅÍÀÔ´Ï´Ù. ÀÌÈÄ ½ºÆ¼ºêÀ⽺´Â ¾ÖÇà ¾ÆÀÌÆù¿¡ Ç÷¡½Ã žÀ縦 °ÅºÎ, HTML5¸¦ ´ëÀÀ ±â¼ú·Î ³»¼¼¿ì¸é¼­ HTML5¿¡ ´ëÇÑ °ü½ÉÀÌ ³ô¾ÆÁ³½À´Ï´Ù.

HTML5°¡ óÀ½ µîÀåÇÑ °ÍÀº 2004³âÀ¸·Î °Å½½·¯ ¿Ã¶ó°©´Ï´Ù. ´ç½Ã À¥ºê¶ó¿ìÀú º¥´õµé°ú °³¹ßÀÚ Ä¿¹Â´ÏƼ°¡ ÁÖÃàÀÌ µÈ À¥ ÇÏÀÌÆÛÅؽºÆ® ¾ÖÇø®ÄÉÀÌ¼Ç ¿öÅ·±×·ì(WHATWG)Àº À¥ºê¶ó¿ìÀúÀÇ È£È¯¼º, ±¸Á¶ÀûÀÌ°í ÀÇ¹Ì ÀÖ´Â ¸¶Å©¾÷ ¹× Æí¸®ÇÑ À¥ Æû ±â´ÉÀ» Á¦°øÇØ À¥ °³¹ßÀÚµéÀÇ »ý»ê¼ºÀ» ³ôÀÌ°í À¥ ¾ÖÇø®ÄÉÀ̼ÇÀ» °³¹ßÇÒ ¼ö ÀÖ´Â »õ·Î¿î Ç¥ÁؾÈÀ» Á¦¾ÈÇß½À´Ï´Ù. ±×¸®°í 2007³â W3C°¡ WHATWGÀÇ Á¦¾ÈÀ» ¼ö¿ëÇϸ鼭 HTML5ÀÇ Ç¥ÁØÈ­ È°µ¿ÀÌ ½ÃÀ۵ƽÀ´Ï´Ù. HTML5´Â 2012³â Ç¥ÁؾÈÀÌ ¿Ï·áµÇÁö¸¸ ÀÌ¹Ì ¿ÃÇØ ÃÊ ±Ç°í¾ÈÀÌ ¹ßÇ¥µÈ »óÅ¿©¼­ ´ëºÎºÐÀÇ ±â´ÉÀ» ÀÌ¿ëÇÒ ¼ö ÀÖ½À´Ï´Ù.

HTML5´Â ±âÁ¸ HTML4¿Í ȣȯµÇ¸é¼­µµ ±×µ¿¾È ºñÇ¥ÁØÀ¸·Î Åë¿ëµÇ´ø ´Ù¾çÇÑ ±â´ÉÀ» Áö¿øÇÏ°í ÀÖ´Â °ÍÀÌ Æ¯Â¡ÀÔ´Ï´Ù. ƯÈ÷ ÀÌ¹Ì À¥ ÄÜÅÙÃ÷ÀÇ ÀϺΰ¡ µÇ¾î ¹ö¸° ºñµð¿À¿Í ¿Àµð¿À ÄÜÅÙÃ÷ Àç»ýÀ» À¥ ºê¶ó¿ìÀú¿¡¼­ ³»ºÎÀûÀ¸·Î ±¸ÇöÇß½À´Ï´Ù. ¶Ç ĵ¹ö½º(Canvas)¿Í º¤ÅÍ ±×·¡ÇÈ(SVG)À» ÅëÇØ 2Â÷¿ø µµÇ¥¿Í °°Àº ÄÜÅÙÃ÷µµ ¸¶Å©¾÷À¸·Î Ç¥ÇöÇÒ ¼ö ÀÖµµ·Ï ±¸ÇöÇß½À´Ï´Ù.

¶ÇÇÑ HTML5´Â ¼­¹ö¿Í µ¶¸³ÀûÀÎ À¥ ¾ÖÇø®ÄÉÀ̼ÇÀÇ °³¹ßÀÌ °¡´ÉÇÏ´Ù´Â ÀåÁ¡ÀÌ ÀÖ½À´Ï´Ù. HTML5´Â ·ÎÄà ½ºÅ丮Áö, À¥ µ¥ÀÌÅͺ£À̽º, ¾Û ij½Ã µîÀÇ ±â´ÉÀ» Áö¿øÇØ ÀÎÅÍ³Ý Á¢¼ÓÀÌ ²÷±ä »óÅ¿¡¼­µµ À¥ ¾ÖÇø®ÄÉÀ̼ÇÀ» ÀÛµ¿½Ãų ¼ö ÀÖ½À´Ï´Ù. ÀÌ°°Àº HTML5ÀÇ ¿ÀÇÁ¶óÀÎ Áö¿ø ±â´ÉÀº ´Ù¾çÇÑ ¸ÖƼ¹Ìµð¾î ±â´É°ú ´õºÒ¾î À¥ ¾ÖÇø®ÄÉÀ̼ÇÀ̶ó´Â »õ·Î¿î ½ÃÀåÀ» ¿­¾î°¡°í ÀÖÀ¸¸ç ƯÈ÷ ¸ð¹ÙÀÏ È¯°æ¿¡¼­ ±× Áø°¡¸¦ ¹ßÈÖÇÒ °ÍÀ¸·Î Àü¸ÁµË´Ï´Ù.

¡Þ¸ð¹ÙÀÏ°ú HTML5=±¸±Û, ¾ÖÇÃÀÌ ÀÕµû¶ó HTML5ÀÇ Áö¿ø °èȹÀ» ¹àÈ÷¸é¼­ ¾ÕÀ¸·Î HTML5·Î Á¦ÀÛµÈ À¥ ¾ÖÇø®ÄÉÀ̼ÇÀÇ ºñÁßÀÌ Å©°Ô ´Ã °ÍÀ¸·Î Àü¸ÁµË´Ï´Ù. HTML5´Â ¾Õ¼­ ¾ð±ÞÇßµíÀÌ ¸ÖƼ¹Ìµð¾î ±â´É°ú ¿ÀÇÁ¶óÀÎ ½ÇÇà, ±×¸®°í ÃøÀ§(Geo Location) ±â´ÉÀ» Æ÷ÇÔÇÏ°í ÀÖ¾î ´Ù¾çÇÑ À¥ ¾ÖÇø®ÄÉÀ̼ÇÀ» °³¹ßÇÒ ¼ö Àֱ⠶§¹®ÀÔ´Ï´Ù. ¶Ç, À¥ ¾ÖÇø®ÄÉÀ̼ÇÀº ¾ÆÀÌÆù ¿î¿µÃ¼Á¦(iOS)³ª ¾Èµå·ÎÀ̵å OS µî Ç÷§Æû¿¡ ±¸¾Ö¸¦ ¹ÞÁö ¾Ê±â ¶§¹®¿¡ °³¹ßÀÚ³ª ÀÌ¿ëÀÚ Ãø¸é¿¡¼­ ¸Å¿ì È¿À²ÀûÀ̶ó°í º¼ ¼ö ÀÖ½À´Ï´Ù. Àü¹®°¡µéÀº ÇâÈÄ ¸ð¹ÙÀÏ ½ÃÀå¿¡¼­ À¥ ¾ÖÇø®ÄÉÀ̼ÇÀÌ ³×ÀÌƼºê ¾ÖÇø®ÄÉÀ̼Ç(Native application)À» ºü¸£°Ô ´ëüÇÒ °ÍÀ¸·Î ¿¹»óÇÏ°í ÀÖ½À´Ï´Ù.

°­ÈñÁ¾±âÀÚ mindle@

[ÀúÀÛ±ÇÀÚ ¨ÏµðÁöÅПÀÓ½º ¹«´Ü ÀüÀç-Àç¹èÆ÷ ±ÝÁö]