Upgrade to PRO for Only $50/Year—Limited-Time Offer! 🔥

UX빼면 시체, 프런트엔드

Jbee
June 22, 2019

UX빼면 시체, 프런트엔드

기존에는 없던 프론트엔드라는 분야가 생기기까지 그 과정을 돌아보면서 프론트엔드 분야의 존재 이유인 UX를 이야기합니다. UX가 디자이너만의 영역이 아니라 엔지니어가 관여할 수 있는 부분이 존재하고 컨트롤 할 수 있어야 함을 이야기합니다. 추상적인 이야기가 되지 않도록 UX를 고려한 여러 사례를 이야기합니다.

Jbee

June 22, 2019
Tweet

More Decks by Jbee

Other Decks in Technology

Transcript

  1. য়ט੉ঠӝ 1BSU*8FC 1BSU**69 য়ט ઁо ೞҊ र਷ ੉ঠӝח ઁݾীࢲࠗఠ UXۄҊ

    ݈ॹ ٘۷णפ׮. User Experience. ৵ ೐ۿ౟ূ٘о UXܳ ࡐݶ द୓ੋ૑ ৈ۞࠙ਸ ݢ੷ ࢸٙ೧ࠁ۰ ೤פ׮. ਢ੉ ૑ աৡ ߊ੗ஂ৬ അ੤ ࢚ട੄ ೐ۿ౟ূ٘ܳ ࠁݶࢲਃ. Ӓ۠ ׮਺ী UXী ؀ೠ ੉ঠӝೡ ৘੿ੑפ׮.
  2. %PDVNFOU ޙࢲ )ZQFS-JOL ਢ਷ Document. Ӓ੷ ޙࢲী ૑ա૑ ঋওणפ׮. ਕ٘

    ۽ औѱ ੘ࢿೡ ࣻ ੓ח Ӓ ޙࢲ৬ ׮ܳѱ হ঻যਃ. ਢ਷ Ӓ੷ ਢ ࠳ۄ਋੷ীࢲ ࠁח ޙࢲੑפ׮. ই ೞա ׮ܲѱ ੓ যਃ. ަөਃ. ੌ߈ ޙࢲ৬ ೞաо ࢓૟ ׮ؘܲ... ೞ੉ಌ݂ ௼ۄח Ѫਸ ా೧ ׮ܲ ޙࢲ۽ ੉زਸ ೡ ࣻ ੓णפ׮. ਢ ী ৈ۞ ޙࢲо ١੢ೞӝ द੘ೞҊ ੉Ѫٜ਷ ೞ੉ಌ݂௼ ܳ ా೧ োѾ੉ ؾפ׮.
  3. (request) HTML 8FC ਋ܻח ੉ ਢ ޙࢲܳ ࠳ۄ਋੷ܳ ా೧ ࠅ

    ࣻ ੓णפ׮. ੉ ޙࢲח য٥оী ੓ח ࢲߡ۽ࠗఠ ੹׳߉णפ׮. ӒܻҊ ੉ ޙࢲח ইө ݈೮؍ Ѫ୊ۢ HTML ౵ੌੑפ׮. ੉ѱ ਢੑפ׮. Ӓ୴? ੉ۧѱ ױࣽ೮؍ ਢ੉
  4. Server Rendering ECMAScript 3 / Ajax (1999) Gmail (2004) jQuery

    (2006) Angular JS (2010) React (2013) ECMAScript 2015 6TO5 a.ka. Babel PM ࣽр ݻݻ ࠙੄ ಴੿ਸ ࠌחؘ ֢੨ ৉ࢎ੉ঠӝо աৢөࠊ ف۰ਕ ೞद֎ਃ. ੤߀ਸࣻب ੓૑݅ ੷ ݈Ҋب ݆਷ ੗ ܐٜ੉ ੓যࢲ рۚೞѱ ೨ब݅ р୶۰ࢲ ਃড೧ࠌणפ׮. ױࣽ൤ ࢲߡীࢲ ઱ח HTMLਸ ࠳ۄ਋੷о ۪؊݂ਸ ೞ ׮о JavaScript ੄ Ajaxо ա২פ׮. ӒܻҊ ҳӖ਷ ӒѦ ࢎਊ೧ ݧ૓ Gmail ਸ ٟ݅פ׮! ৈӝࢲࠗఠ ޥо ׳ۄ ૑ӝ द੘೤פ׮. jQueryо աয়ݶࢲ ੋఠۑ࣌੉ औѱ ୶оغӝ द੘ೞҳਃ, Ӓ۞׮ AngularJS, React ӒܻҊ ؀ݎ੄ ECMAScript 2015о ١੢ೞѱ ؾפ׮. ӒܻҊ धझ ై ౵੉࠳. ૑Ә਷ ߄߰੉ۄח ੉ܴਸ ׳Ҋ ੓ח ౟ے झ౵ੌ۞о ա২פ׮. ੉ۧѱ ߊ੹೧৳׮ח Ѥ য٣ࢲ ೠߣତ਷? ٜযࠁ࣑ਸ ࣻ ੓ਸ Ѫ эইਃ. ޛۿ ૑Ә੉ ୊਺ ٛח Ѣۄب ੹ഃ ޙઁؼѱ হणפ׮. ੉ۧѱ ߸ച೧ৡ ਢ੉ അ੤ীח যڃ ঴ҷਸ ೞҊ ੓ਸөਃ
  5. 8IZ  ਢ ӝࣿ੄ ߊ੹ਸ ই ೐ۿ౟ূ٘ ࠙ঠ੄ ߊ੹ਸ ଘ

    ࢓ಝࠌ חؘਃ, ഑द ৵ ੉ۧѱ ߊ੹೮ਸө. ࢤп೧ࠁन ࠙ ҅नо ਃ?
  6. : ׼ো൤ ѐߊਸ ೞחؘ بҳо ೙ਃೞפө ٜ݅঻ѷભ. : ੉Ѫ਷ ࢎਊೞח

    ӝࣿਸ ࠅ ٸ ղܾ ࣻ ੓ח Ѿۿ. ੉ بҳח ޖट ੉ਬ۽, ৵ ೙ਃ೮ਸө
  7. ࢎਊ੗о ਢਸ ੉ਊೞ۰ ೡٸ ೂࠗೠ ੿ࠁܳ ખ ؊ ࡅܰѱ ࠁ׮

    ਋ইೞѱ ઁҕೞӝ ਤ೧ ਢ + ࡅܲ + ೂࠗೠ + ਋ই + ઁҕ ѾҴ ਢ ӝࣿ਷ ࢎਊ੗о ਢਸ ੉ਊೞ۰Ҋ ೡ ٸ, ೂࠗೠ ੿ࠁܳ ࡅܰѱ ӒܻҊ ਋ইೞѱ ઁҕೞӝ ਤ೧ࢲ ߊ੹غ঻׮Ҋ ࠅ ࣻ ੓णפ׮. ݃஖ ࢗਵ۽ب ౹ ࣻ ੓ח ٶਸ ખ ؊ ࡅܰ Ҋ औѱ ౵ӝ ਤ೧ ನ௼ۨੋ੉ ߊݺػ Ѫ୊ۢ ݈੉ભ. ࢎਊ੗ ҃೷੉ ֫਷ ਢਸ ѐߊ೧ঠ ೮Ҋ ӝઓ੄ ӝࣿ۽ח ೠ҅о ੓যࢲ ࢜۽਍ بҳٜਸ ѐߊೠ Ѫੑפ׮. ٜ݅ ࣻঠ ੓૑݅ Ӓ ࢤ࢑ࢿ੉ աয়૑ ঋও؍ Ѫੑפ׮.
  8. ࢿמ୭੸ച ✅ ୡӝ ۽٬ ୭੸ച ✅ ࡅܰ׮ח ו՝ਸ ੹׳ ✅

    ࠗ٘۞਍ গפݫ੉࣌ ☑ Code minification ☑ Code splitting ☑ Tree shaking ☑ CSS sprite ☑ Gzip code (or Brotli) ☑ Check lighthouse ☑ Critical path ☑ IntersectionObserver ☑ requestAnimationFrame ☑ CSS Animation ☑ Hardware acceleration (GPU) ୡӝ۽٬୭੸ച☀ ࠗ٘۞਍গפݫ੉࣌
  9. ৘࢚оמೠز੘ ✅ झ௼܀ ࠂਗ (ࠌ؍ Ѣ ࠁৈ઱ӝ) ✅ ٨٘ ৔৉

    ײ൨ ✅ ࣚী औѱ ٜযয়ח ੋఠۑ࣌ ৔৉ ✅ ৘࢚ оמೠ ੋఠۑ࣌ ☑ With session storage ☑ Restore state झ௼܀ࠂਗ♻ 5IVNC[POF ݽ߄ੌ ࢎਊ੗ܳ ਤೠ ٣੗ੋ
  10. 4&04.0 ✅ Ѩ࢝ ূ૓ ୭੸ച ✅ ࣗ࣍ ޷٣য ҕਬ ୭੸ച

    ✅ য٣ө૑ ҕਬо оמ೧ঠ ೞחо? ☑ Pre-render, Server-side render ☑ Social Media (Facebook, Twitter ...) ☑ <meta> tag ☑ URL query parameter / hash tag 0QFO(SBQI1SPUPDPM https://github.com/JaeYeopHan/sns-share
  11. ஏ੿җѐࢶ ✅ ࢎਊ੗ח যڌѱ ਋ܻ ࢲ࠺झܳ ࢎਊೞחо? (౟ېఊ) ✅ ࢚ടী

    ٮۄ Ӓ ࠺ਯ਷ যڌѱ غחо? (A/B TEST) ✅ ੉ఎܫ਷ যڌѱ ઴ੌ ࣻ ੓חо? (GA) ☑ Click rate per page view ☑ Google Tag Manager (PPHMF"OBMZUJDT "#5FTU ☑ With cookie ☑ Random display
  12. -FUT%FNP ֎੉ߡ झ݃౟যۄ਍٘ ࢲ࠺झ - URL ҕਬܳ ాೠ ࠁ؍ ചݶ

    ࠁৈ઱ӝ JBEE.io - ٍ۽оӝ द झ௼܀ ࠂਗ ֎੉ߡ ৔ച Ѩ࢝ - ചݶ੄ োࣘࢿ JBEE.io - ੉޷૑ ഛ؀ (medium-zoom)
  13. ݃ޖܻ; ѾҴ UX Designer৬੄ ӟ޻ೠ ഈস trailing commaܳ ନջ উ

    ନջо ઺ਃೠ݅ఀ ٣੗੉ց੄ 1px, 100msܳ ઺ਃೞѱ ৈӝ੗