Çѱ¹¾îµµºñ½Ã½ºÅÛÁî´Â Áö³11¿ù 16ÀÏ. Create the Web Korea¸¦ °³ÃÖ, µðÀÚÀÌ³Ê¿Í °³¹ßÀÚµéÀÌ HTML5, CSS3 ¹× JavaScript µî°ú °°Àº ÃֽŠÀ¥ ±â¼úÀ» ÀÌ¿ëÇØ º¸´Ù ¼Õ½±°Ô °·ÂÇÑ À¥ »çÀÌÆ®, µðÁöÅÐ ÄÜÅÙÃ÷ ¹× ¸ð¹ÙÀÏ ¾ÛÀ» °³¹ßÇÒ ¼ö ÀÖµµ·Ï µ½´Â Çõ½ÅÀûÀÎ Åø ¹× ±â¹ýÀ» °ø°³Çß´Ù.
¾îµµºñÀÇ Å©¸®¿¡ÀÌƼºê ¼Ö·ç¼Ç ºÎ¹® ¾Æ½Ã¾Æ ÅÂÆò¾ç Áö¿ª ¿¡¹ÝÁ©¸®½ºÆ®ÀÎ Æú ¹ö³Ý(Paul Burnett)ÀÌ ¹ßÇ¥ÇÑ ±âÁ¶¿¬¼³¿¡¼ ¿¡Áö Åø ¹× ±â¹ý(Edge Tools & Services)À» ¼Ò°³ÇßÀ¸¸ç, ¾îµµºñ ¿¡Áö ¾Ö´Ï¸ÞÀÌÆ® 1.0(Adobe Edge Animate 1.0), ¾îµµºñ ¿¡Áö ÀνºÆåÆ® 1.0(Adobe Edge Inspect 1.0, ÀÌÀü ÄÚµå¸í "¼¨µµ¿ì(Shadow)"), ¾îµµºñ Æù°¸ ºôµå 1.0(Adobe PhoneGap Build 1.0), ¾îµµºñ ¿¡Áö À¥ ÆùÆ®(Adobe Edge Web Fonts), ±×¸®°í ¾îµµºñ ¿¡Áö ÄÚµå(Adobe Edge Code) ÇÁ¸®ºä µîÀÌ ¹ßÇ¥µÆ´Ù. ¾îµµºñ´Â ¶ÇÇÑ, ¿ÃÇØ ¸»·Î ¿¹»óµÇ´Â ¾îµµºñ ¿¡Áö ¸®Ç÷οì(Adobe Edge Reflow)ÀÇ ÇÁ¸®ºä ¸±¸®½º¿¡ ¾Õ¼ ±× µ¥¸ð ¿µ»óÀ» ½Ã¿¬Çß´Ù.
¿¡Áö ¾Ö´Ï¸ÞÀÌÆ®´Â À¥ µðÀÚÀ̳ʵéÀÌ ÃֽŠÀ¥ÀÇ ÀÎÅÍ·¢Æ¼ºê ±â´ÉÀ» ÀÌ¿ëÇØ °³¹ßÇϵµ·Ï Àå·ÁÇϱâ Çϱâ À§ÇØ ¹«·á·Î ÀÌ¿ëÇÒ ¼ö ÀÖÀ¸¸ç, ÀÌ¹Ì 50¸¸ ȸ ÀÌ»óÀÇ ÇÁ¸®ºä ´Ù¿î·Îµå¸¦ ±â·ÏÇÏ°í ÀÖ´Ù.
±×¸®°í ¿¡Áö ¾Ö´Ï¸ÞÀÌÆ®¿Í ´Ù¸¥ ¿¡Áö Åø ¹× ¼ºñ½º´Â ÇöÀç ¾îµµºñ Å©¸®¿¡ÀÌƼºê Ŭ¶ó¿ìµå(Adobe Creative Cloud)¿¡¼ ¹«·á ¸â¹ö½ÊÀ¸·Î Á¦°øµÈ´Ù. ¾îµµºñ Å©¸®¿¡ÀÌƼºê Ŭ¶ó¿ìµå´Â Å©¸®¿¡ÀÌƼºê ÀÛ¾÷À» »ý¼º, °øÀ¯ ¹× Á¦°øÇϱâ À§ÇÑ Çãºê ¿ªÇÒÀ» ¼öÇàÇÑ´Ù. À¯·á ¸â¹ö½ÊÀº ¸ðµç Å©¸®¿¡ÀÌƼºê ½ºÀ§Æ® 6(Creative Suite 6) µ¥½ºÅ©Åé ¾ÖÇø®ÄÉÀ̼ÇÀº ¹°·Ð, ¾îµµºñ Æ÷Åä¼¥ ¶óÀÌÆ®·ë(Adobe Photoshop Lightroom) ¹× ¾îµµºñ ¹ÂÁî(Adobe Muse) µîÀ» ºñ·ÔÇÑ ´Ù¸¥ ¾ÖÇø®ÄÉÀ̼ÇÀ» ´Ù¿î·ÎµåÇÏ¿© ¼³Ä¡ÇÒ ¼ö ÀÖ´Ù. ¸â¹ö½Ê¿¡´Â À¥ ¹× ¸ð¹ÙÀÏ ±â±â¿¡ ´ëÇÑ ÆÄÀÏ ÀúÀå, °øÀ¯, Çù¾÷, ±×¸®°í °Ô½Ã¸¦ À§ÇÑ ¿Â¶óÀÎ ¼ºñ½ºµµ Æ÷ÇԵŠÀÖ´Ù. Å©¸®¿¡ÀÌƼºê Ŭ¶ó¿ìµå(Creative Cloud)¿¡ ´ëÇÑ º¸´Ù ÀÚ¼¼ÇÑ ³»¿ëÀº www.adobe.com/go/creativecloud¿¡¼ È®ÀÎÇÒ ¼ö ÀÖ´Ù.
¾îµµºñÀÇ Å©¸®¿¡ÀÌƼºê ¼Ö·ç¼Ç ºÎ¹® ¾ÆÅÂÁö¿ª ¿¡¹ÝÁ©¸®½ºÆ®ÀÎ Æú ¹ö³Ý(Paul Burnett)Àº "°·ÂÇÑ »õ·Î¿î HTML5 Åø ¼¼Æ®¸¦ À¥ µðÀÚÀÌ³Ê¿Í °³¹ßÀڵ鿡°Ô Á¦°øÇÏ°Ô µÆ´Ù´Â °ÍÀ» ¸Å¿ì ±â»Ú°Ô »ý°¢ÇÏ¸ç ºü¸¥ ½ÃÀÏ ³»¿¡ À̵éÀÌ °³¹ßÇÑ ¸ÚÁø À¥ »çÀÌÆ®, µðÁöÅÐ ÄÜÅÙÃ÷ ¹× ¸ð¹ÙÀÏ ¾ÛÀ» °æÇèÇÒ ¼ö Àֱ⸦ ±â´ëÇÏ°í ÀÖ´Ù. ¾îµµºñ´Â âÀÇÀûÀÎ »ç¶÷µéÀÌ À¥ ±â¼úÀ» ÀÌ¿ëÇØ ÀÚ½ÅÀÌ »ó»óÇÏ´Â ¸ðµç °ÍÀ» ¼öÇàÇÒ ¼ö ÀÖµµ·Ï Çϱâ À§ÇØ Àû±Ø ³ë·ÂÇÏ°í ÀÖÀ¸¸ç, ¾îµµºñ°¡ À¥ Ç÷§Æû¿¡ ±â¿©ÇÏ°í ¿¡Áö ¾Ö´Ï¸ÞÀÌÆ®ÀÇ Ã¹ ¹ø° ¸±¸®½º¸¦ Æ÷ÇÔÇÑ ¿¡Áö Åø ¹× ¼ºñ½º¸¦ ¹«·á·Î ÀÌ¿ëÇÒ ¼ö ÀÖµµ·Ï ÇÏ´Â °Íµµ ¹Ù·Î ÀÌ·¯ÇÑ ÀÌÀ¯ ¶§¹®"À̶ó°í ¹àÇû´Ù.
¾îµµºñ´Â Ç¥ÁØ ¹× ¿ÀÇ ¼Ò½º Ä¿¹Â´ÏƼ¿Í Çù·ÂÇØ À¥ Ç÷§ÆûÀÇ ¹ßÀü¿¡ ±â¿©ÇÑ ÃÖ±ÙÀÇ ¸¹Àº ³ë·Âµé¿¡ ´ëÇØ ±âÁ¶¿¬¼³¿¡¼ °³·«ÀûÀ¸·Î ¼³¸íÇß´Ù. ÀÌ¿Í °°Àº ³ë·ÂÀº ´ÙÀ½°ú °°Àº ÁÖ¿ä ¿µ¿ª¿¡¼ º¸´Ù Ç¥Çö·Â ÀÖ´Â Ç÷§ÆûÀ» ¿Ï¼ºÇϴµ¥ ±â¿©ÇÔÀ¸·Î½á À¥À» ¹ßÀü½ÃÅ°°í ÀÖ´Ù.
-·¹À̾ƿô: CSS ¸®Àü(CSS Regions)°ú CSS ÀͽºÅ¬·çÀü(CSS Exclusions)À¸·Î À¥ µðÀÚÀÌ³Ê¿Í °³¹ßÀÚµéÀº À¥ »ó¿¡¼ ÀÀ´ä ¼Óµµ°¡ ºü¸¥ ¸Å°ÅÁø ÇüÅÂÀÇ ·¹À̾ƿôÀ» »ý¼ºÇÒ ¼ö ÀÖ´Ù.
-±âÃÊ ±×·¡ÇÈ: Á¦¾ÈµÈ CSS Æ®·£½ºÆû(CSS Transforms) ½ºÆåÀ¸·Î ÀúÀÛ±ÇÀÚµéÀº º¸´Ù ¼Õ½±°Ô ±âÇÏ º¯È¯À» HTML ¹× SVG ÄÜÅÙÃ÷¿¡ Áö¼ÓÀûÀ¸·Î Àû¿ëÇÒ ¼ö ÀÖ°Ô µÆ´Ù. Á¦¾ÈµÈ CSS ÄÄÆ÷ÁöÆà ¹× ºí·£µù(CSS Compositing and Blending) ½ºÆåÀº À¥ µðÀÚÀ̳ʵ鿡°Ô Æ÷Åä¼¥¿¡¼ ÀÌ¹Ì Ä£¼÷ÇÑ ºí·»µå ¸ðµå(Blend Mode)¸¦ »ç¿ëÇÒ ¼ö ÀÖ´Â ¿É¼ÇÀ» Á¦°øÇÑ´Ù.
-±ØÀå ¼öÁØÀÇ ½Ã°¢Àû È¿°ú: CSS Ä¿½ºÅÒ ÇÊÅÍ(CSS Custom Filters)´Â ÇöÀç Å©·Ò Ä«³ª¸®¾Æ(Chrome Canary)¿¡¼ Áö¿øµÇ¸ç Á¤±³ÇÑ ½Ã°¢Àû È¿°ú¸¦ ¸¸µé¾î, º¸´Ù ´Ù¾çÇÏ°í Àû±ØÀûÀÎ Âü¿©¸¦ À̲ô´Â À¥ °æÇèÀ» ½ÇÇöÇÒ ¼ö ÀÖ´Ù. ¾îµµºñ´Â ¶ÇÇÑ À¥ µðÀÚÀÌ³Ê¿Í °³¹ßÀÚµéÀÌ ÀڽŸ¸ÀÇ °íÀ¯ÇÑ ¸ÂÃãÇü ÇÊÅ͸¦ ¸¸µé ¼ö ÀÖµµ·Ï ÇÏ´Â »õ·Î¿î ½ÇÇèÀû ÅøÀÎ CSS ÇÊÅÍ·¦(CSS FilterLab)À» ¹ßÇ¥ÇßÀ¸¸ç, ÀÌ´Â ÇöÀç http://html.adobe.com/webstandards/csscustomfilters/cssfilterlab/¿¡¼ ÀÌ¿ëÇÒ ¼ö ÀÖ´Ù.
-ÆùÆ®: ¾îµµºñ´Â ¿ÀǼҽº¸¦ ±â¹ÝÀ¸·Î °³¹ßÇßÀ¸¸ç ¿¡Áö ÄÚµå¿Í ¿¡Áö ¸®Ç÷ο쿡¼ ÀÌ¿ëµÇ´Â Source Sans Pro¿Í Source Code Pro µî 2°³ÀÇ »õ·Î¿î ÆùÆ®¸¦ º¸À¯ÇÏ°í ÀÖ´Ù.
¾îµµºñ ¿¡Áö, ÃֽŠÀ¥À» À§ÇÑ Åø ¹× ¼ºñ½ºÀÇ »õ·Î¿î ½Ã´ë ¿¾î
ÄÚµù ÀÛ¾÷À» ¼öÇàÇÏ´Â À¥ µðÀÚÀÌ³Ê¿Í µðÀÚÀο¡ °¡Ä¡¸¦ ´õÇÏ´Â À¥ °³¹ßÀÚ¸¦ ÀÇÇØ °³¹ßµÈ ¾îµµºñ ¿¡Áö´Â ÃֽŠºê¶ó¿ìÀú¿Í ¸ð¹ÙÀÏ ±â±â¸¦ À§ÇØ HTML, CSS ¹× JavaScript¸¦ ÀÌ¿ëÇÏ¿© ¿ì¼öÇÑ Ç°ÁúÀÇ ¸ð¹ÙÀÏ Áö¿ø ÄÜÅÙÃ÷¿Í ¾ÛÀ» °³¹ßÇϱâ À§ÇÑ ¾îµµºñÀÇ »õ·Î¿î ÁÖ·Â Åø ¹× ¼ºñ½º ºê·£µå·Î ÀÚ¸®¸Å±èÇÏ°í ÀÖ´Ù. ¾îµµºñ ¿¡Áö ºê·£µå´Â °³º°ÀûÀ¸·Î´Â ¹°·Ð, ÇÔ²² ¿¬µ¿ÇØ È¿°úÀûÀ¸·Î ½ÇÇàµÇ´Â Á÷°üÀûÀÎ ÀÛ¾÷ Áß½ÉÀÇ Åø°ú ±â¹ýÀ» Æ÷ÇÔÇÏ°í ÀÖ´Ù. ±â¹Ý À¥ ±â¼ú¿¡ ´ëÇØ Á÷Á¢ Á¢±ÙÇÏ°í ÇÁ·¹ÀÓ¿öÅ©¸¦ ¼±ÅÃÇÒ ¼ö ÀÖ´Â ÀÚÀ¯¸¦ ºÎ¿©ÇÏ´Â »ý»êÀûÀÎ ÅøÀ» ÀÌ¿ëÇØ ½Ã°¢ÀûÀ¸·Î ¿ì¼öÇÑ ÄÜÅÙÃ÷¸¦ °³¹ßÇϱ⸦ ¿øÇÏ´Â Àü¹®°¡¸¦ À§ÇØ °³¹ßµÆ´Ù. ¿¡Áö Åø ¹× ¼ºñ½º´Â ¿ÃÀοø À¥ »çÀÌÆ® Á¦ÀÛÀ» À§ÇÑ ¾÷°è ¼±µµÀûÀÎ ÅøÀÎ ¾îµµºñ µå¸²À§¹ö CS6(Adobe Dreamweaver CS6)¸¦ º¸¿ÏÇÑ´Ù. ¿À´Ã Á¦°øµÈ ¼ºê½ºÅ©¸³¼Ç ¾÷µ¥ÀÌÆ®¿¡¼´Â ¿¡Áö ¿¡´Ï¸ÞÀÌÆ®, »õ·Î¿î HTML5 ÅÂ±× ¹× ±âŸ »õ·Î¿î ±â´ÉÀÌ Ãß°¡µÆ´Ù. ¿¡Áö Åø ¹× ¼ºñ½º¿¡´Â ´ÙÀ½ÀÌ Æ÷ÇԵŠÀÖ´Ù. ÇöÀç´Â ¿µ¹®À¸·Î¸¸ Ãâ½ÃµÇ¾î ÀÖÀ¸¸ç, ÇÑ±Û Áö¿ø ½Ã±â´Â ¾ÆÁ÷ ¹ÌÁ¤ÀÌ´Ù.
¿¡Áö ¾Ö´Ï¸ÞÀÌÆ®(Edge Animate) – »ç¿ëÀÚµéÀÌ HTML, JavaScript ¹× CSS¸¦ ÀÌ¿ëÇØ À¥ »ó¿¡ ÄÜÅÙÃ÷¸¦ ¾Ö´Ï¸ÞÀ̼ÇÀ¸·Î ³ªÅ¸³¾ ¼ö ÀÖµµ·Ï ÇÏ´Â µ¿ÀÛ ¹× ÀÎÅÍ·¢¼Ç µðÀÚÀÎ Åø
¿¡Áö ÀνºÆåÆ®(Edge Inspect) – ÇÁ·ÐÆ® ¿£µå À¥ °³¹ßÀÚ¿Í µðÀÚÀ̳ʰ¡ ¸ð¹ÙÀÏ ±â±â»ó¿¡¼ È¿°úÀûÀ¸·Î HTML ÄÜÅÙÃ÷¸¦ ¹Ì¸®º¸°í µð¹ö±ëÇÒ ¼ö ÀÖµµ·Ï ÇÏ´Â ¹Ì¸®º¸±â Åø
¿¡Áö ÄÚµå(Edge Code) – ºê·¡Å¶(Brackets) ¿ÀÇ ¼Ò½º ÇÁ·ÎÁ§Æ®¸¦ ÅëÇØ °³¹ßµÈ ÄÚµå ¿¡µðÅÍ, HTML, CSS ¹× JavaScript¸¦ ÀÌ¿ëÇØ ÀÛ¾÷ÇÏ´Â À¥ µðÀÚÀÌ³Ê¿Í °³¹ßÀÚ¸¦ À§ÇØ ÃÖÀûȵÊ
¿¡Áö ¸®Ç÷οì(Edge Reflow) – »ç¿ëÀÚµéÀÌ HTML ÄÜÅÙÃ÷ ½ºÅ¸ÀϸµÀ» À§ÇÑ Ç¥ÁØÀÎ CSS¸¦ ÀÌ¿ëÇØ ·¹À̾ƿô°ú ½Ã°¢Àû µðÀÚÀÎÀ» ÀÛ¼ºÇÒ ¼ö ÀÖµµ·Ï µ½´Â ÀÀ´ä ¼Óµµ°¡ ºü¸¥ À¥ ¼³°è Åø. ÇÁ¸®ºä ¸±¸®½º´Â ¿ÃÇØ ¿¬¸»±îÁö Ãâ½ÃµÉ ¿¹Á¤ÀÓ
¿¡Áö À¥ ÆùÆ®(Edge Web Fonts) – À¥ »çÀÌÆ® ¹× ¾Û¿¡¼ Áö¼ÓÀûÀ¸·Î Áõ°¡ÇÏ°í ÀÖ´Â ¿ÀÇ ¼Ò½º ÆùÆ® ¶óÀ̺귯¸®¸¦ »ç¿ëÇϱâ À§ÇÑ ¹«·á À¥ ÆùÆ® ¼ºñ½º
ŸÀÔŶ(Typekit) – µðÀÚÀÌ³Ê ¹× °³¹ßÀÚµéÀÌ À¥ »çÀÌÆ®¿¡¼ »ç¿ëÇϱâ À§ÇØ È£½ºÆÃµÈ °íÇ°Áú ÆùÆ® ¶óÀ̺귯¸®¿¡ Á¢±ÙÇÒ ¼ö ÀÖµµ·Ï ÇÏ´Â ¼ºñ½º
Æù°¸ ºôµå(PhoneGap Build) – ³Î¸® »ç¿ëµÇ´Â ¸ð¹ÙÀÏ Ç÷§ÆûÀ» À§ÇØ HTML, CSS ¹× JavaScriptÀ¸·Î °³¹ßµÈ ¸ð¹ÙÀÏ ¾ÛÀ» ÆÐŰ¡ÇÏ´Â ¼ºñ½º