UX빼면 시체, 프런트엔드

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

Transcript

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

   View Slide

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

   View Slide

3. ࣗѐ!
   

   View Slide

4. য়ט੉ঠӝ
   
   1BSU*8FC
   1BSU**69
   য়ט ઁо ೞҊ र਷ ੉ঠӝח ઁݾীࢲࠗఠ UXۄҊ ݈ॹ
   ٘۷णפ׮. User Experience. ৵ ೐ۿ౟ূ٘о UXܳ
   ࡐݶ द୓ੋ૑ ৈ۞࠙ਸ ݢ੷ ࢸٙ೧ࠁ۰ ೤פ׮. ਢ੉ ૑
   աৡ ߊ੗ஂ৬ അ੤ ࢚ട੄ ೐ۿ౟ূ٘ܳ ࠁݶࢲਃ. Ӓ۠
   ׮਺ী UXী ؀ೠ ੉ঠӝೡ ৘੿ੑפ׮.
   

   View Slide

5. 8FC
   Part I.
   

   View Slide

6. 8FC
   World Wide Web 30th anniversary
   

   View Slide

7. 
   %PDVNFOU
   ޙࢲ
   )ZQFS-JOL
   
   
   
   
   
   ਢ਷ Document. Ӓ੷ ޙࢲী ૑ա૑ ঋওणפ׮. ਕ٘
   ۽ औѱ ੘ࢿೡ ࣻ ੓ח Ӓ ޙࢲ৬ ׮ܳѱ হ঻যਃ. ਢ਷
   Ӓ੷ ਢ ࠳ۄ਋੷ীࢲ ࠁח ޙࢲੑפ׮. ই ೞա ׮ܲѱ ੓
   যਃ. ަөਃ. ੌ߈ ޙࢲ৬ ೞաо ࢓૟ ׮ؘܲ... ೞ੉ಌ݂
   ௼ۄח Ѫਸ ా೧ ׮ܲ ޙࢲ۽ ੉زਸ ೡ ࣻ ੓णפ׮. ਢ
   ী ৈ۞ ޙࢲо ١੢ೞӝ द੘ೞҊ ੉Ѫٜ਷ ೞ੉ಌ݂௼
   ܳ ా೧ োѾ੉ ؾפ׮.
   
   

   View Slide

8. HTML
   Hyper Text Markup Language
   

   View Slide

9. (request)
   HTML
   
   8FC
   ਋ܻח ੉ ਢ ޙࢲܳ ࠳ۄ਋੷ܳ ా೧ ࠅ ࣻ ੓णפ׮. ੉
   ޙࢲח য٥оী ੓ח ࢲߡ۽ࠗఠ ੹׳߉णפ׮. ӒܻҊ
   ੉ ޙࢲח ইө ݈೮؍ Ѫ୊ۢ HTML ౵ੌੑפ׮. ੉ѱ
   ਢੑפ׮. Ӓ୴? ੉ۧѱ ױࣽ೮؍ ਢ੉
   

   View Slide

10. ੉ۧѱ ߸ೞӝө૑ যڃ ੌ੉ ੓঻ਸөਃ?
    

    View Slide

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

    View Slide

12. ۄ੉࠳۞ܻ
    ೐ۨ੐ਕ௼
    

    View Slide

13. View Slide

14. View Slide

15. +".4UBDL
    

    View Slide

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

    View Slide

17. 8IZ
    ਢ ӝࣿ੄ ߊ੹ਸ ই ೐ۿ౟ূ٘ ࠙ঠ੄ ߊ੹ਸ ଘ ࢓ಝࠌ
    חؘਃ, ഑द ৵ ੉ۧѱ ߊ੹೮ਸө. ࢤп೧ࠁन ࠙ ҅नо
    ਃ?
    

    View Slide

18. 
    ѐߊೞחؘ ೙ਃೞפө?
    ҳӖ੉ बब೧ࢲ?
    ѐߊ੗ח ࢜۽਍ Ѫਸ જই೧ࢲ?
    ӝઓ੄ Ѫ੉ ࠛಞ೧ࢲ?
    ࣗ࠺੗о ਃҳ೧ࢲ?
    

    View Slide

19. : ׼ো൤ ѐߊਸ ೞחؘ بҳо ೙ਃೞפө ٜ݅঻ѷભ.
    : ੉Ѫ਷ ࢎਊೞח ӝࣿਸ ࠅ ٸ ղܾ ࣻ ੓ח Ѿۿ.
    ੉ بҳח ޖट ੉ਬ۽, ৵ ೙ਃ೮ਸө
    

    View Slide

20. ജ҃ਸ߄ۄࠄ׮ݶ
    ੿ࠁ۝ җ׮
    ੘਷ ݽ߄ੌ ചݶ
    ࠂ੟೧૓ ചݶ
    ޙࢲ Ӓ ੉࢚੄ ݒ୓
    3JDI$MJFOU
    

    View Slide

21. 1$ചݶਸݽ߄ੌীࢲࠄ׮ݶ
    | ੉۠ ҃਋ח যڄө
    

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

25. 69
    User Experience
    c
    Part II.
    

    View Slide

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

    View Slide

27. 69&OHJOFFSJOH
    

    View Slide

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

    View Slide

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

    View Slide

30. ࢿמ୭੸ച
    ✅ ୡӝ ۽٬ ୭੸ച
    ✅ ࡅܰ׮ח ו՝ਸ ੹׳
    ✅ ࠗ٘۞਍ গפݫ੉࣌
    ☑ Code minification
    ☑ Code splitting
    ☑ Tree shaking
    ☑ CSS sprite
    ☑ Gzip code (or Brotli)
    ☑ Check lighthouse
    ☑ Critical path
    ☑ IntersectionObserver
    ☑ requestAnimationFrame
    ☑ CSS Animation
    ☑ Hardware acceleration (GPU)
    ୡӝ۽٬୭੸ച☀ ࠗ٘۞਍গפݫ੉࣌
    

    View Slide

31. https://slides.com/jbee/devfest_seoul_2018_performance_optimization_with_chrome_devtools
    

    View Slide

32. ৘࢚оמೠز੘
    ✅ झ௼܀ ࠂਗ (ࠌ؍ Ѣ ࠁৈ઱ӝ)
    ✅ ٨٘ ৔৉ ײ൨
    ✅ ࣚী औѱ ٜযয়ח ੋఠۑ࣌ ৔৉
    ✅ ৘࢚ оמೠ ੋఠۑ࣌
    ☑ With session storage
    ☑ Restore state
    झ௼܀ࠂਗ♻ 5IVNC[POF
    ݽ߄ੌ ࢎਊ੗ܳ ਤೠ ٣੗ੋ
    

    View Slide

33. 4&04.0
    ✅ Ѩ࢝ ূ૓ ୭੸ച
    ✅ ࣗ࣍ ޷٣য ҕਬ ୭੸ച
    ✅ য٣ө૑ ҕਬо оמ೧ঠ ೞחо?
    ☑ Pre-render, Server-side render
    ☑ Social Media (Facebook, Twitter ...)
    ☑ tag
    ☑ URL query parameter / hash tag
    0QFO(SBQI1SPUPDPM
    https://github.com/JaeYeopHan/sns-share
    

    View Slide

34. ஏ੿җѐࢶ
    ✅ ࢎਊ੗ח যڌѱ ਋ܻ ࢲ࠺झܳ ࢎਊೞחо? (౟ېఊ)
    ✅ ࢚ടী ٮۄ Ӓ ࠺ਯ਷ যڌѱ غחо? (A/B TEST)
    ✅ ੉ఎܫ਷ যڌѱ ઴ੌ ࣻ ੓חо? (GA)
    ☑ Click rate per page view
    ☑ Google Tag Manager
    (PPHMF"OBMZUJDT "#5FTU
    ☑ With cookie
    ☑ Random display
    

    View Slide

35. -FUT%FNP
    ֎੉ߡ झ݃౟যۄ਍٘ ࢲ࠺झ - URL ҕਬܳ ాೠ ࠁ؍ ചݶ ࠁৈ઱ӝ
    JBEE.io - ٍ۽оӝ द झ௼܀ ࠂਗ
    ֎੉ߡ ৔ച Ѩ࢝ - ചݶ੄ োࣘࢿ
    JBEE.io - ੉޷૑ ഛ؀ (medium-zoom)
    

    View Slide

36. ݃ޖܻ;
    
    ೐ۿ౟ূ٘ ࠄ૕਷ UXо ইקө
    (և਷ ੄޷ীࢲ੄ UX)
    

    View Slide

37. ݃ޖܻ;
    ѾҴ UX Designer৬੄ ӟ޻ೠ ഈস
    trailing commaܳ ନջ উ ନջо ઺ਃೠ݅ఀ
    ٣੗੉ց੄ 1px, 100msܳ ઺ਃೞѱ ৈӝ੗
    

    View Slide

38. ݃ޖܻ;
    ۄ੉࠳۞ܻ/೒ۖಬ ѐߊ੗
    ਃ્ ٘ח ࢤп
    Performance / Documentation
    ೐۽؋౟ ѐߊ੗ UX / Maintenance
    

    View Slide

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

    View Slide

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

    View Slide