UX빼면 시체, 프런트엔드

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

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. ۄ੉࠳۞ܻ ೐ۨ੐ਕ௼
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. /PU
    POMZ 69
    %FTJHO #VU
    BMTP 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
    (SBQI
    1SPUPDPM 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