Ã¥¼Ò°³
UX/UI µðÀÚÀο¡ ÃÖÀûÈµÈ Sketch!
Sketch¸¦ ´õ¿í °·ÂÇÏ°Ô º¸¿ÏÇØ ÁÖ´Â °¢Á¾ PluginÀ» ÇÑ ±Ç¿¡ ´ã¾Ò´Ù.
ÀÌ¹Ì ¸¹Àº ȸ»ç¿¡¼ ½ºÄÉÄ¡ÀÇ ÀåÁ¡À» ¾Ë°í ½ºÄÉÄ¡ È°¿ëÀ» Àû±ØÀûÀ¸·Î °í·ÁÇÏ°í ÀÖ´Ù. ÇÏÁö¸¸ ÀÌ·¸´Ù ÇÑ È°¿ë¼°¡ ¾ø¾î ÀÎÅÍ³Ý µ¿¿µ»óÀ̳ª ºí·Î±× ÀڷḦ ã¾Æº¸´Â °ÍÀÌ ´ëºÎºÐÀ̸ç, À̸¶Àúµµ ÇØ¿Ü ÀÚ·á°¡ ¸¹¾Æ ÇнÀ¿¡ ¾î·Á¿òÀ» °Þ°í ÀÖ´Ù. ÀÌ Ã¥Àº ÇØ¿Ü ÆÄ°ß ±Ù¹« ÀÌÈÄ ½ºÄÉÄ¡¸¦ Á¢ÇÏ°í ±× ¸Å·Â¿¡ ºüÁø ÀúÀÚ°¡ »ç³» °ÀǸ¦ ÁøÇàÇÏ°Ô µÇ¸é¼ ½×Àº ½Ç¹« °æÇèÀ» ÇÔ²² ³ª´©°íÀÚ ½ÃÀ۵Ǿú´Ù. ÇØ¿Ü »ç·Ê°¡ ¾Æ´Ñ ±¹³» ½ÇÁ¤¿¡ ½ÇÁúÀûÀÎ µµ¿òÀ» µÉ ¼ö ÀÖµµ·Ï Çö¾÷ ÇÁ·Î¼¼½º¿¡ µû¶ó µðÀÚÀκÎÅÍ ÇÁ·ÎÅäŸÀÌÇÎ, ¿ÍÀ̾îÇÁ·¹ÀÓ±îÁö Á÷Á¢ ½Ç½ÀÇØ º¼ ¼ö ÀÖÀ¸¸ç, Ã¥ °÷°÷¿¡¼ ÀúÀÚÀÇ ´Ù³â°£ÀÇ ³ëÇϿ츦 ¿³º¼ ¼ö ÀÖ´Ù.
ÀÌ Ã¥Àº ÇϳªÀÇ ÀúÀÛ µµ±¸¸¦ ¼³¸íÇÏ´Â ¸Å´º¾óÀÌ ¾Æ´Ñ UX/UI ½Ç¹«ÀÚµéÀÇ ¾÷¹« È¿À² °³¼±À» À§ÇÑ °¡À̵å¶ó°í ÇÒ ¼ö ÀÖ´Ù. ´Ü¼øÈ÷ ½ºÄÉÄ¡¸¦ ¼Ò°³ÇÏ´Â °ÍÀÌ ¾Æ´Ï¶ó ½ºÄÉÄ¡¸¦ ¼¼°èÀûÀÎ UX/UI µµ±¸ÀÇ ÃÖ°ÀÚ ¹Ý¿¿¡ ¿Ã¶ó¿Ã ¼ö ÀÖ°Ô ÇÑ ¿øµ¿·ÂÀÎ °¢Á¾ Ç÷¯±×ÀÎÀ» È°¿ëÇÏ¿© ¾÷¹« È¿À²¼ºÀ» ³ôÀÌ´Â ¹æ¹ýÀ» ¼Ò°³ÇÏ°í Àֱ⠶§¹®ÀÌ´Ù. ½ºÄÉÄ¡ ±âº» È°¿ëºÎÅÍ Á¦Çø°, ÀκñÀü µî È¿À²¼ºÀ» ±Ø´ëÈÇÒ ¼ö ÀÖ´Â ´Ù¾çÇÑ Ç÷¯±×ÀÎ È°¿ë ¹æ¹ýÀ» ÀÌ Ã¥ ÇÑ ±ÇÀ¸·Î ³¡³¾ ¼ö ÀÖ´Ù.
¸ñÂ÷
[Chapter 01 ½ºÄÉÄ¡, ½ÃÀÛ Àü ¸öÇ®±â]
Lesson 1 ½ºÄÉÄ¡, ¿Ö ¿±¤ÇÒ±î¿ä?
Lesson 2 ½ºÄÉÄ¡ ±¸ÀÔ ¹× ¼³Ä¡Çϱâ
Lesson 3 ½ºÄÉÄ¡ È¸é ±¸¼º°ú ÀÎÅÍÆäÀ̽º
Lesson 4 ½ºÄÉÄ¡ ±âº» ±â´É ÀÍÈ÷±â
ÆÄÀÏ »ý¼º, ¿±â ¹× ÀúÀåÇϱâ
[°£´Ü ½Ç½À] »õ·Î¿î ÆÄÀÏÀ» ¸¸µé°í ÀúÀåÇϱâ
Auto Save¿Í ¹öÀü ÄÁÆ®·Ñ
Lesson 5 Page, Artboard, Laye
Page
Canvas¿Í Artboard
Layer
Lesson 6 ¼±°ú ´Ù°¢Çü ±×¸®±â
Ruler, Guide, Grid
Á÷¼± ±×¸®±â
È»ìÇ¥ ±×¸®±â
±âº» µµÇü ±×¸®±â
[°£´Ü ½Ç½À] Á¤»ï°¢Çü ±×¸®±â
´Ù¾çÇÑ ÇüÅ ±×¸®±â
Lesson 7 ¿ÀºêÁ§Æ® ÆíÁýÇϱâ
Lesson 8 ȸÀü°ú º¯Çü ¹× Á¤·ÄÇϱâ
ȸÀüÇϱâ - Rotate
º¯ÇüÇϱâ - Transform
[°£´Ü ½Ç½À] ÀÔü Ç¥ÇöÀ» À§ÇÑ °¢ ºÎÀ§ ¸¸µé±â
Á¤·ÄÇϱâ - Arrange
Lesson 9 ´Ù¾çÇÑ È¸é Çػ󵵿¡ ºü¸£°Ô ´ëÀÀÇϱâ _ 89
[Chapter 02 ½ºÅ¸ÀÏ ÀÔÈ÷±âÀÇ ±âº»]
Lesson 1 ½ºÅ¸ÀÏ Àû¿ëÇϱâ
ÀνºÆåÅÍ ¿µ¿ª ±æµéÀ̱â
½ºÅ¸ÀÏÀ» Ãß°¡ÇÏ°í »èÁ¦Çϱâ
»ö»ó °ª Á¶Á¤Çϱâ
Blending
Lesson 2 ¿ÀºêÁ§Æ® ä¿ì±â, Fill ¿É¼ÇÀÇ Æ˾÷ â ÆÄÇìÄ¡±â
ä¿ì±â ¿É¼Ç ¼±ÅÃÇϱâ
±×·¯µ¥ÀÌ¼Ç Ã¤¿ì±â »ç¿ëÇϱâ
ÆÐÅÏ ¹× À̹ÌÁö ä¿ì±â »ç¿ëÇϱâ
ÅؽºÃ³ ä¿ì±â »ç¿ëÇϱâ
Lesson 3 ¿ÀºêÁ§Æ® Å׵θ®, Borders Ç׸ñ ÆÄÇìÄ¡±â
Å׵θ® ±âº» ¿É¼Ç »ìÆ캸±â
Å׵θ® °í±Þ ¿É¼Ç »ìÆ캸±â
Lesson 4 ±×¸²ÀÚ È¿°ú·Î ÀÔü°¨ »ì¸®±â
±×¸²ÀÚ Ãß°¡Çϱâ
Lesson 5 ¿ÀºêÁ§Æ® È帲 È¿°ú Àû¿ëÇϱâ
Lesson 6 ÅؽºÆ® ÀԷºÎÅÍ ½ºÅ¸ÀÏ Àû¿ë±îÁö
ÅؽºÆ® ¿ÀºêÁ§Æ®¸¦ Ãß°¡ÇÏ°í ³»¿ë ÀÔ·ÂÇϱâ
ÅؽºÆ® ¿ÀºêÁ§Æ®ÀÇ ÀνºÆåÅÍ ¿µ¿ª »ìÆ캸±â
Lesson 7 ½ºÅ¸ÀÏÀ» ÀúÀåÇÏ°í È°¿ëÇϱâ
Shared Style À» ÀúÀåÇÏ°í Àû¿ëÇϱâ
Text Style À» ÀúÀåÇÏ°í Àû¿ëÇϱâ
Lesson 8 ºñÆ®¸Ê À̹ÌÁö ´Ù·ç±â
[Chapter 03 ¾Û È¸é µðÀÚÀÎÀ¸·Î º»°Ý ½ÃÀÛÇϱâ]
Lesson 1 ÀÛ¾÷¿¡ ÇÊ¿äÇÑ Àç·á °®Ãß±â
[°£´Ü ½Ç½À] µðÀÚÀÎ ÅÛÇø´ ÁغñÇϱâ
[°£´Ü ½Ç½À] ÆùÆ® ¼³Ä¡Çϱâ
Lesson 2 ¾Û È¸é ±âº» ÇÁ·¹ÀÓ ¸¸µé±â
Google Material Design Guide ¹× ¸¸µé È¸é »ìÆ캸±â
¾Èµå·ÎÀ̵å ȸé ÇÁ·¹ÀÓ ¸¸µé±â
»óÅ ǥ½ÃÁÙ Ãß°¡Çϱâ
Lesson 3 Map È¸é ¸¸µé±â
Floating Search bar ¸¸µé±â
Bottom bar ¸¸µé±â
Áöµµ ¹è°æ ¹× ¾×¼Ç ¹öÆ° ¸¸µé±â
Lesson 4 Store Detail È¸é ¸¸µé±â
Guide Line ¹× »ó´Ü À̹ÌÁö ¿µ¿ª ¸¸µé±â
¸ÅÀå À̸§°ú °£´ÜÇÑ Á¤º¸ ¿µ¿ª ¸¸µé±â
CALL / SAVED / SHARE / WEBSITE ¹öÆ° ¿µ¿ª ¸¸µé±â
¸ÅÀå ¼Ò°³ ¿µ¿ª ¸¸µé±â
¸ÅÀå »ó¼¼ Á¤º¸ ¿µ¿ª ¹× ¸¶¹«¸®
Lesson 5 Store DetailÀÇ ½ºÅ©·Ñ È¸é ¸¸µé±â
±âº» ·¹À̾ƿô ¿Ï¼ºÇϱâ
Ä«µå ÄÄÆ÷³ÍÆ® ¸¸µé±â
Ä«µå ÄÄÆ÷³ÍÆ® ä¿ì±â
Ä«µå ÄÄÆ÷³ÍÆ®ÀÇ º°Á¡ °³¼ö º¯°æÇϱâ
[Chapter 04 ¾Û ȸ鿡 ½ºÅ¸ÀÏ Ãß°¡Çϱâ]
Lesson 1 ½ºÅ¸ÀÏ Àû¿ëÇϱâ
Map ȸ鿡 »ö»ó Àû¿ëÇϱâ
Store Detail, Store Detail_ Scroll ȸ鿡 »ö»ó Àû¿ëÇϱâ
Lesson 2 À̹ÌÁö Ãß°¡Çϱâ
Pattern Fill·Î ä¿ì±â
Symbol À̹ÌÁö ä¿ì±â
[Chapter 05 µðÀÚÀÎ °øÀ¯Çϱâ:Design Guide&Asset]
Lesson 1 µðÀÚÀÎ °øÀ¯¸¦ À§ÇÑ Deliverable ÆľÇÇϱâ
Lesson 2 µðÀÚÀÎ Asset »ý¼ºÀÇ ±âº»
·ÎÄà Æú´õ·Î ExportÇϱâ
Export »ó¼¼ ¼³Á¤ º¯°æÇϱâ
Slice ·Î ExportÇÒ ¿µ¿ª ÁöÁ¤Çϱâ
ÄÚµå·Î ExportÇϱâ
Lesson 3 ZeplinÀ¸·Î Design Guide ÀÚµ¿ »ý¼ºÇϱâ
¼ºñ½º °¡ÀÔ ¹× ¼³Ä¡Çϱâ
Export ¹× Design Guide »ý¼ºÇϱâ
Export ÈÄ Zeplin È¸é ±¸¼º »ìÆ캸±â
ȸ麰 °¡ÀÌµå »ìÆ캸±â
ÄÄÆ÷³ÍÆ®º° µðÀÚÀÎ °¡À̵å È®ÀÎÇϱâ
Lesson 4 ZeplinÀ» ÀÌ¿ëÇÑ ¹öÀü °ü¸® ¹× Ä¿¹Â´ÏÄÉÀ̼Ç
Version Control È®ÀÎÇϱâ
Note·Î Ä¿¹Â´ÏÄÉÀ̼ÇÇϱâ
[Chapter 06 Prototype & Wireframe]
Lesson 1 InVision »ç¿ë ÁغñÇϱâ
¼ºñ½º¿¡ °¡ÀÔÇÏ°í InVision Sync ¼³Ä¡Çϱâ
½ºÄÉÄ¡ ÆÄÀÏÀ» ÀúÀåÇÏ°í Asset ÃßÃâÇϱâ
InVision À¥ »çÀÌÆ®¿¡¼ Sync ³»¿ë È®ÀÎÇϱâ
Lesson 2 InVision À¥ »çÀÌÆ®¿¡¼ PrototypingÇϱâ
Prototyping ÀÛ¾÷È¸é ±¸¼º »ìÆ캸±â
°¢ ȸé Prototyping ¼³Á¤Çϱâ
ÀÎÅÍ·¢¼Ç °á°ú È®ÀÎÇϱâ
Lesson 3 InVision Craft·Î ¸ðµç °úÁ¤À» ´õ¿í °£´ÜÇÏ°Ô!
InVision Craft ¼³Ä¡ ¹× µðÀÚÀÎ ÆÄÀÏ ¿¬µ¿Çϱâ
InVision Craft ·Î ºü¸£°Ô Prototyping Çϱâ
Lesson 4 InVision¿¡¼ Design Guide È®ÀÎ ¹× Ä¿¹Â´ÏÄÉÀ̼ÇÇϱâ
Design Guide »ý¼º ¹× ¹öÀü ÄÁÆ®·Ñ
Ä¿¹Â´ÏÄÉÀÌ¼Ç ¹× ÇÁ·ÎÁ§Æ® ¸Å´ÏÁö¸ÕÆ®
Comment ·Î ÀÇ°ß ±³·ùÇϱâ
Work Flow·Î ÇÁ·ÎÁ§Æ® ¸Å´ÏÁö¸ÕÆ®Çϱâ
LIVESHARE ·Î ½Ç½Ã°£ Ä¿¹Â´ÏÄÉÀ̼ÇÇϱâ
Lesson 5 ½ºÄÉÄ¡ ÇÁ·Î±×·¥¿¡¼ Wireframe ÀÛ¼ºÇϱâ
¾ÆÆ®º¸µå À籸¼ºÇϱâ
Symbol È¸é ¹èÄ¡Çϱâ
Flow & Description Ç¥ÇöÇϱâ
¹®¼ ¼½ÄÀ» ¸¸µé°í ExportÇϱâ
Lesson 6 µð¹ÙÀ̽º ¹Ì¸®º¸±â ¹× ½Ç½Ã°£ °øÀ¯
Mirror ±â´ÉÀ¸·Î iOS ±â±â¿¡¼ ¹Ì¸®º¸±â
Local Sharing À¸·Î À¥¿¡¼ ¹Ì¸®º¸±â
[Chapter 07 ½ºÄÉÄ¡ ´õ¿í °í±Þ½º·´°Ô È°¿ëÇϱâ]
Lesson 1 ¹«±Ã¹«ÁøÇÑ È®Àå Ç÷¯±×ÀÎ »ç¿ëÇϱâ
½ºÄÉÄ¡ °ø½Ä Ç÷¯±×ÀÎ ÆäÀÌÁö
[°£´Ü ½Ç½À] Sketch Plugin Manager ¼³Ä¡Çϱâ
Plugins ¸Þ´º »ìÆ캸±â
Sketch Plugin Manager Ç÷¯±×ÀÎ
Runner Ç÷¯±×ÀÎ
Sketch Measure Ç÷¯±×ÀÎ
BaseAlign Ç÷¯±×ÀÎ
Lesson 2 Craft by InVision ±â´É ÆľÇÇϱâ
Library ±â´É
Data & Duplicate ±â´É
Freehand ±â´É
Stock ±â´É
Lesson 3 Preferences â¿¡¼ ÀÛ¾÷ ȯ°æ ¼³Á¤Çϱâ
General ÅÇ
Canvas ÅÇ
Layers ÅÇ
Presets ÅÇ
Clouds ÅÇ
Lesson 4 Pixel Perfect Design
Lesson 5 ½ºÄÉÄ¡ »ç¿ë¼ºÀ» ³ô¿© ÁÖ´Â ´Ù¾çÇÑ °í±Þ ±â´É
File/Edit ¸Þ´º »ìÆ캸±â
Layer ¸Þ´º »ìÆ캸±â
View ¸Þ´º »ìÆ캸±â
Lesson 6 ÀÛ¾÷ È¿À²À» ³ô¿© ÁÖ´Â ´ÜÃàÅ°