ì ì UX/UIêž°íì륌 ìí 10ê°ì§ ì€ì TIP
RightBrain lab
ð ëí ìŒì ê°ê²© ì늬ìŠ! [ðì ì UX/UIêž°íì륌 ìí 10ê°ì§ ì€ì TIP] (ðê°ëš ììœ) ðUX/UIêž°íìì ì€ì ì 묎 - ì¡°ì§ì ë°ëŒ ë¬ëŒì§ ì ìì 1) íë¡ì íž ì ì 2) 늬ìì¹ & ìží°ë·° & 컚ì ì€ì & 죌ìí멎 UI êž°í (ëì ë°ëŒì ìží°ë·° ìëµ) 3) IA(Information Architecture) ìì± 4) UI í멎ì ìì ìì± 5) ëììž ê²ì (ëììžì ì°ëЬ íì¬ìì í 겜ì°) 6) íŒëžëŠ¬ì± ê²ì (íŒëžëЬì±ì ì°ëЬ íì¬ìì í 겜ì°) 7) ì¬ì©ì± í ì€íž (íë¡ì ížìì ìì² ì) ðê°ì¥ ë§ìŽ ì¬ì©íë íŽê³Œ ì°ì¶ë¬Œ UI êž°íìê° ê°ì¥ ë§ìŽ ì¬ì©íë íŽì íìí¬ìžížì ìì ì ëë€. íìí¬ìžížë¥Œ íµíŽì UIê°ìŽë 묞ì륌 ë§ìŽ ìì±íë©°, íŽë¹ êžììë UI ê°ìŽë 묞ì륌 ìì±í ëì 죌ìì ìŽë TIPì ê³µì íê³ ì í©ëë€. ðíì€í 늬ì ë²ì êŽëЬ UI 묞ììì íì§ ë€ììŒë¡ ììíë íìŽì§ë 묞ì ìì íì€í 늬륌 ìì±í íìŽì§ì ëë€. 묞ì륌 ë°°í¬í ë²ì , ìì ë° ì¶ê°í ëŽì©, ìì±ì, ìì ëŽì©ì ë°ìí ì¬ë ë±ì ëŽì©ìŒë¡ 구ì±ë©ëë€. 볎íµì ìììŒë¡ íìí ë€ëªš ë°ì€ ìì ìì ë ëŽì©ê³Œ ë²ì , ë ì§ë¥Œ êž°ì íì¬ ìì ë ëŽì©ì ì°Ÿêž° ìœëë¡ í©ëë€. ëí, í멎ìì ìì ë ëŽì©ë ëìŒí ìììŒë¡ íìí©ëë€. ì¬ìíë€ê³ ë껎ì 늬ë¹ì íì€í 늬ì ìì±íì§ ìì ê²œì° ëììŽëë ê°ë°ìê° íìžíì§ ëª»íê³ ìŽì ë²ì ìŒë¡ ê³ì 결곌묌ì ê³µì í ìë ììµëë€. ðê³µíµ(Common)ì ì€ìì± íì€í 늬 ë€ììŒë¡ ì€ë íìŽì§ê° ëê° âê³µíµâ í목ìŽëŒê³ ì ìëë ê²ë€ì ëë€. ë€ë¥ž ì¬ëë€ìŽ ëë ì ìì íëëŒë ê³µíµì ìž ë£°ê³Œ 컎í¬ëíž(ìì)ë€ë¡ ìì í ì ìëë¡ íêž° ìíšì ëë€. ì¬ë¬ íìŽì§ì ë€ìŽê° ëŽì©ë€ì ê³µíµìŒë¡ ì ìí멎 몚ë íìŽì§ì ëŽì©ì ìì íì§ ììë ëë ìŽì ìŽ ììµëë€. (íëì 묞ì륌 ì¬ë¬ëª ìì ìì ì 몚ë íìŽì§ë¥Œ ê³ ë €, ì¬ì ê³µíµ ë£°ì íšê» ì ìíê³ ì§ííŽìŒ íš) ðê³µíµì ììë€ âGNB (Global Navigation Bar) / Footer / Menu (ë³ëë¡ ì ìí ìë ìì) âì²ì ì§ì ì (ë³ëë¡ ì ìí ìë ìì)- ì€íëì¬, ì ë°ìŽíž ì ì± , íí 늬ìŒ(ì¶ê° ì), ê¶í ì€ì íì (칎ë©ëŒ, ì íë²íž ë±) âë°ìŽí° ë¡ë© ì- íìŽì§ ë¡ë©, ìŽë¯žì§ ëë í ì€íž ë¡ë©, ìë¡ê³ 칚(íŽë€ìŽ ëŠ¬íëì ì), ë°ìŽí° ì ë°ìŽíž ì âë°ìŽí°ê° ìì ê²œì° case- ëŽì©ìŽ ìì ëìê±°ë, ë°ìŽí°ê° ìë ê²œì° (ex. ë§ìŽíìŽì§ì ì° í멎/ê²ì 결곌 ìì) âì€ë¥ê° ë°ìíì ë case- ìì ë íìŽì§, ë€ížìí¬ ì€ë¥, ì ê·Œê¶íìŽ ìì ì, ìì€í ì ê² ì ë± âíì ì í ë° ìží°ëì ì ì- ìì€í íì (ìë¿íì )/컀ì€í íì (ë ìŽìŽ íì , ì늌 íì , í ì€íž íì ë±) âì ë ¥ë ìží°ëì ì ì- text ì ë ¥ ì /ì ë ¥ ì/ìì ì/ì 못 ì ë ¥ ì (Validation Check í¬íš) ë± âí ì€íž íêž°ë²- ë ì§, ìê°, êžì¡, ì íë²íž, ëìŽ ë± âíìŽì§ ë€ë¹ê²ìŽì /ë 볎Ʞ ë²íŒ ìží°ëì âì í ë¶ê°, ì í ê°ë¥, ì íë ìí ë±ì ëí ì ì- ì í ë¶ê° ì Dimmed ë ë²íŒ ë žì¶, ì í ê°ë¥í ìíìž ê²œì° ìì ë³ê²œ ë± âëêž ìì êŽë š ì ì(ëêžìŽ ìë ìë¹ì€ì ê²œì° ì ê³µ ì íš)- ìží°ëì , ëµêž, ì ê³ , 늬ì€íž ë žì¶ ê°ì, êžì ë žì¶ ì, ê³µì , ì¢ìì/ì«ìŽì, ëêž ìì ì, ê·ž ìž êŽë š ì ì± ë± âê·ž ìž ìë¹ì€ì ë°ë¥ž ê³µíµì ìž ì ì± â íìŽì§ ê° ìŽë, íë¡í ë° ë°°ì§ ë žì¶ ì ì± ë± ðë¹ ëšëŠ¬êž° ì¬ìŽ ê²ë€ ì ê° ì§êžë ì¢ ì¢ ë¹ ížëЬë caseë âì묎ê²ë ìì ëâì ìŒìŽì€ ì ìì ëë€. ë§ìŽ íìŽì§ìì ëŽê° ì° í ìíìŽ ìê±°ë, ë¹ ë°ìŽí°ë¥Œ íµíŽ íììê² ìœí ìž ë¥Œ ì¶ì²íŽì£Œë caseìì ìì¬ ìë ë°ìŽí°ê° ìì 겜ì°, ê²ì ì ê²ì ê²°ê³Œê° ìë ê²œì° ë± ì¬ì©ììê² ë³Žì¬ì€ ê²°êŽê°ìŽ ìì ë ìŽë»ê² ë³Žì¬ ì€ì§ì ëí ì ìì ëë€. ðë²íŒìŽë íí°ë¥Œ ë ëì ìê³ì§ì ì륌 ë€ë©Ž ëšìí 늬ì€ížììë íí°êž°ë¥ì íìŽí ìì ë ê²ìžì§, ìëì ë ê²ìžì§ ì€ì íê² ë©ëë€. ê°ì êž°ë¥ ë²íŒìŽëŒë, ìŽë ê³³ì ë°°ì¹íëì ë°ëŒ êž°ë¥ìŽ ë¬ëŒì§êž° ë묞ì ê³µíµë ë£°ë¡ ë°°ì¹íì¬ ì¬ì©ìë¡ íì¬êž íŒëìŽ ìëë¡ íŽìŒ í©ëë€. ðíŽëŠìì곌 ì ë ¥ììì ìµì/ìµëê° í멎 ìì ì ë ¥ ìììŽë íìŽí, ë²íŒì ë£ì ì 묞ììŽêž° ë묞ì íŽë¹ ììì ìŒë§íŒì í ì€ížê° ìµëë¡ ì ë ¥ë ì§, íŽëŠììì ì ë¹íì§ ììíë©° êž°íì íŽìŒ í©ëë€. ëììŽëë€ìŽ í멎ì 귞늬멎ì ê°ìŽë륌 죌Ʞë íì§ë§, ìŽë ì ë êž°íìê° ê³ ë €íê³ ìì íì§ ììŒë©Ž ì¡°ì ìì ì ì¬ë¬ ë² ê±°ì¹ê² ëê±°ë ëììŽëë€ìŽ êž°ë¥ ë²íŒì ìì¹ë¥Œ êž°í곌 ë€ë¥Žê² ë°°ì¹íŽìŒ íë ìŽìê° ìêžž ì ììµëë€. ðìë¹ì€ íë¡ì° í멎ì êž°ííšì ììŽì ëëœëë ê²ì ìëì§ ì ê²í ì ìë ìí ì í©ëë€. ìŽë¯ž ê·žë €ì§ ê²ë€ì ë€ì ë°°ì¹íë©° âìŽ ë²íŒì ë륎멎 ë¹ì°í ë¡ê·žìž íì ì ëììŒì§âíê³ ìê°í ì ìë ê²ë€ë âìŽ ë²íŒì ë륎멎 ëŽì©ì ì ë ¥íŽ ë¬ëŒë ìë¿ì 뚌ì ëììŒì§âëŒê³ ìê°í ì ìëë¡ ë§ëë í목ì ëë€. ðë§ë¬ŽëЬ ëê° íŽë¹ 묞ì륌 ìœë ë° ìŽë €ììŽ ìëë¡ âê°ìŽëâ륌 ì§í€ë©° êŽë šë ììë€ì ì€ëª íê³ ê·žë €ëŽìŒ í©ëë€. ììì ê³µíµì ìŒë¡ ë§íê³ ì¶ì ì ì "êž°íìì ë§ê³Œ 묞ìë ë€ë¥ž ì¬ëì ìŽíŽìí€êž° ìí ê²"ìŽëŒë ê²ì ëë€. (ðì€ìí ìŽì ê° ëê°ì?) ììŠì PPTë¡ ììŽìŽíë ì ë±ì ì ìíì§ ìê³ , Figma / Overflow ë±ì íŽì íµí©ìŒë¡ ì°ë 겜ì°ë ë§ìŽ ë³Žì¬ì. 묞ì륌 ì ìíëë° ê±žëŠ¬ë ìê°ì ë Œì íë ìê°ì ë í¬ìíêž° ìí ë°©ë²ìŒë¡ ë§ìŽì£ . ì ìì ì§ë íì¬ìì 2ë ê° êž°íìë¡ ìŒíë©° PPT ë³Žë€ XDë Overflow ë±ì íŽì ë ë§ìŽ íì©íìµëë€. ë¹ ë¥Žê² ê°ë° 늬뷰륌 íê³ íŒëë°±ì ë°ìí ì ìë€ë ì¥ì ë ìì§ë§ Ʞ볞 ê°ìŽëê° ëëœ ë ì ìë€ë ëšì ë ìëë°ì. ìë¹ì€ ê°ë°ì ìµì íë, í ë§ì ë žíì°ë¥Œ ì ê°ì¶ê³ ìë íì ìíŽ ìë€ë©Ž í¬ê² 묞ì ê° ëì§ ìì ì ìì§ë§, ë°ëì 겜ì°ëŒë©Ž ììì ìžêžë ëŽì©ì ë°ëŒ 묞ì륌 ì ìíë ê²ì ì¶ì²í©ëë€. êž°íì ê°ìžì ìë ê°í륌 ìíŽìëŒë! ì¬ìŽë íë¡ì íž ì§íì ìíŽ ì€ëë§ì PPTë¡ ë¬žì륌 ì ìíëë° ë§ìŽ ë¯ì€ììŽì. ëì¹ë ë¶ë¶ë€ìŽ ë§ì ì§ë€ë ìê°ë. ì¥ì ì êŽì ììë§ ìê°í멎 ë²ì êŽëЬë¶í° ììíŽ ìë¹ì€ì ëí ìŒ í 곌ì 곌ì ì ë룚ë룚 ìŽí ì ììµëë€. ì ë ê°ìžì ìŒë¡ 'ì?' ì ëí ëµìŽ ê·žëë¡ ë ¹ì¬ ììŽìŒ íë€ê³ ìê°íŽì. ì°ì ììì ë°ëŒ 묎ìì ê°ë° í ì§ ê²°ì ëì§ë§, ì€ì§ì ìž ì¶ë°ì ì êž°íìê° ë§ëë 묞ìê° ëë 겜ì°ê° ë§êž° ë묞ìŽìì. ê·žëì ê°ë¥í ì ì ë 귌거ìë£ë¥Œ ë§ìŽ íì©íë ížì ëë€. ê·žë° ëŽì©ìŽ ìë€ë©Ž êž°íìì 죌êŽì ìž ìê°ìŒë¡ ë§ë 묞ìì ë¶ê³Œíêž° ë묞ìŽìì. ì¬ëŒìŽëì ë§ê³ ì ìì ê³µì ì ë€ì í ë² ìŽíŽë³Žë ê² ì¢ê³ , ê·ž ì ìë ìŽ ë¬žìê° ëììŽë, ê°ë°ì ë±ìê² ì¶©ë¶í ìŽíŽ ë ì ìê³ ìêží ì ìë ëŽì©ìžì§ì ìŽì ì ë§ì¶° ë€ì¬ë€ 볎ë ê²ìŽ ì¢ìµëë€ :)
2020ë 8ì 10ìŒ ì€ì 9:57