UX빼면 시체, 프런트엔드

5b634f6d9c85d19817ec43f349565687?s=47 Jbee
June 22, 2019

UX빼면 시체, 프런트엔드

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

5b634f6d9c85d19817ec43f349565687?s=128

Jbee

June 22, 2019
Tweet

Transcript

  1. 69ࡐݶद୓ ೐۠౟ূ٘ ೠ੤৐ +CFF c'&%( ೐ۿ౟ূ٘ѐߊӒܛ @frontendgame

  2. ࣗѐ! ࠶ۑਤب਋...

  3. ࣗѐ!

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

    ݈ॹ ٘۷णפ׮. User Experience. ৵ ೐ۿ౟ূ٘о UXܳ ࡐݶ द୓ੋ૑ ৈ۞࠙ਸ ݢ੷ ࢸٙ೧ࠁ۰ ೤פ׮. ਢ੉ ૑ աৡ ߊ੗ஂ৬ അ੤ ࢚ട੄ ೐ۿ౟ূ٘ܳ ࠁݶࢲਃ. Ӓ۠ ׮਺ী UXী ؀ೠ ੉ঠӝೡ ৘੿ੑפ׮.
  5. 8FC Part I.

  6. 8FC World Wide Web 30th anniversary

  7. %PDVNFOU ޙࢲ )ZQFS-JOL ਢ਷ Document. Ӓ੷ ޙࢲী ૑ա૑ ঋওणפ׮. ਕ٘

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

  9. (request) HTML 8FC ਋ܻח ੉ ਢ ޙࢲܳ ࠳ۄ਋੷ܳ ా೧ ࠅ

    ࣻ ੓णפ׮. ੉ ޙࢲח য٥оী ੓ח ࢲߡ۽ࠗఠ ੹׳߉णפ׮. ӒܻҊ ੉ ޙࢲח ইө ݈೮؍ Ѫ୊ۢ HTML ౵ੌੑפ׮. ੉ѱ ਢੑפ׮. Ӓ୴? ੉ۧѱ ױࣽ೮؍ ਢ੉
  10. ੉ۧѱ ߸ೞӝө૑ যڃ ੌ੉ ੓঻ਸөਃ?

  11. 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о ١੢ೞѱ ؾפ׮. ӒܻҊ धझ ై ౵੉࠳. ૑Ә਷ ߄߰੉ۄח ੉ܴਸ ׳Ҋ ੓ח ౟ے झ౵ੌ۞о ա২פ׮. ੉ۧѱ ߊ੹೧৳׮ח Ѥ য٣ࢲ ೠߣତ਷? ٜযࠁ࣑ਸ ࣻ ੓ਸ Ѫ эইਃ. ޛۿ ૑Ә੉ ୊਺ ٛח Ѣۄب ੹ഃ ޙઁؼѱ হणפ׮. ੉ۧѱ ߸ച೧ৡ ਢ੉ അ੤ীח যڃ ঴ҷਸ ೞҊ ੓ਸөਃ
  12. ۄ੉࠳۞ܻ ೐ۨ੐ਕ௼

  13. None
  14. None
  15. +".4UBDL

  16. https://zeit.co/blog/streaming-server-rendering-at-spectrum Rendering Pattern

  17. 8IZ  ਢ ӝࣿ੄ ߊ੹ਸ ই ೐ۿ౟ূ٘ ࠙ঠ੄ ߊ੹ਸ ଘ

    ࢓ಝࠌ חؘਃ, ഑द ৵ ੉ۧѱ ߊ੹೮ਸө. ࢤп೧ࠁन ࠙ ҅नо ਃ?
  18. ѐߊೞחؘ ೙ਃೞפө? ҳӖ੉ बब೧ࢲ? ѐߊ੗ח ࢜۽਍ Ѫਸ જই೧ࢲ? ӝઓ੄ Ѫ੉

    ࠛಞ೧ࢲ? ࣗ࠺੗о ਃҳ೧ࢲ?
  19. : ׼ো൤ ѐߊਸ ೞחؘ بҳо ೙ਃೞפө ٜ݅঻ѷભ. : ੉Ѫ਷ ࢎਊೞח

    ӝࣿਸ ࠅ ٸ ղܾ ࣻ ੓ח Ѿۿ. ੉ بҳח ޖट ੉ਬ۽, ৵ ೙ਃ೮ਸө
  20. ജ҃ਸ߄ۄࠄ׮ݶ  ੿ࠁ۝ җ׮ ੘਷ ݽ߄ੌ ചݶ ࠂ੟೧૓ ചݶ ޙࢲ

    Ӓ ੉࢚੄ ݒ୓ 3JDI$MJFOU
  21. 1$ചݶਸݽ߄ੌীࢲࠄ׮ݶ | ੉۠ ҃਋ח যڄө

  22. ಕ੉झ࠘ীࢲજইਃܳ־ܳٸ݃׮ ੹୓ചݶ੉ӯࡆѢܽ׮ݶ | ੉۠ ҃਋ח যڄө

  23. ౟ਤఠܳೞחؘ ѐࣗध݃׮ ಕ੉૑ܳ߄Լঠೠ׮ݶ | ੉۠ ҃਋ח যڄө

  24. ࢎਊ੗о ਢਸ ੉ਊೞ۰ ೡٸ ೂࠗೠ ੿ࠁܳ ખ ؊ ࡅܰѱ ࠁ׮

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

  26. /PUPOMZ 69%FTJHO #VUBMTP 69&OHJOFFSJOH

  27. 69&OHJOFFSJOH 

  28. https://uxplanet.org/ux-engineers-what-we-are-2b0c4d10b3a6

  29. ࢿמ୭੸ച ৘࢚оמೠز੘ 4&04.0 ஏ੿җѐࢶ

  30. ࢿמ୭੸ച ✅ ୡӝ ۽٬ ୭੸ച ✅ ࡅܰ׮ח ו՝ਸ ੹׳ ✅

    ࠗ٘۞਍ গפݫ੉࣌ ☑ Code minification ☑ Code splitting ☑ Tree shaking ☑ CSS sprite ☑ Gzip code (or Brotli) ☑ Check lighthouse ☑ Critical path ☑ IntersectionObserver ☑ requestAnimationFrame ☑ CSS Animation ☑ Hardware acceleration (GPU) ୡӝ۽٬୭੸ച☀ ࠗ٘۞਍গפݫ੉࣌
  31. https://slides.com/jbee/devfest_seoul_2018_performance_optimization_with_chrome_devtools

  32. ৘࢚оמೠز੘ ✅ झ௼܀ ࠂਗ (ࠌ؍ Ѣ ࠁৈ઱ӝ) ✅ ٨٘ ৔৉

    ײ൨ ✅ ࣚী औѱ ٜযয়ח ੋఠۑ࣌ ৔৉ ✅ ৘࢚ оמೠ ੋఠۑ࣌ ☑ With session storage ☑ Restore state झ௼܀ࠂਗ♻ 5IVNC[POF ݽ߄ੌ ࢎਊ੗ܳ ਤೠ ٣੗ੋ
  33. 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
  34. ஏ੿җѐࢶ ✅ ࢎਊ੗ח যڌѱ ਋ܻ ࢲ࠺झܳ ࢎਊೞחо? (౟ېఊ) ✅ ࢚ടী

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

    ࠁৈ઱ӝ JBEE.io - ٍ۽оӝ द झ௼܀ ࠂਗ ֎੉ߡ ৔ച Ѩ࢝ - ചݶ੄ োࣘࢿ JBEE.io - ੉޷૑ ഛ؀ (medium-zoom)
  36. ݃ޖܻ; ೐ۿ౟ূ٘ ࠄ૕਷ UXо ইקө (և਷ ੄޷ীࢲ੄ UX)

  37. ݃ޖܻ; ѾҴ UX Designer৬੄ ӟ޻ೠ ഈস trailing commaܳ ନջ উ

    ନջо ઺ਃೠ݅ఀ ٣੗੉ց੄ 1px, 100msܳ ઺ਃೞѱ ৈӝ੗
  38. ݃ޖܻ; ۄ੉࠳۞ܻ/೒ۖಬ ѐߊ੗ ਃ્ ٘ח ࢤп Performance / Documentation ೐۽؋౟

    ѐߊ੗ UX / Maintenance
  39. ݃ޖܻ; ഘࠁ https://www.facebook.com/feconf.kr/ https://github.com/JaeYeopHan/gatsby-starter-bee

  40. хࢎ೤פ׮ ೠ੤৐ +CFF  IUUQTKCFFJP