Tweet
Tweet

Slide 1

Slide 1 text

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

Slide 2

Slide 2 text

ࣗѐ! ࠶ۑਤب਋...

Slide 3

Slide 3 text

ࣗѐ!

Slide 4

Slide 4 text

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

Slide 5

Slide 5 text

8FC Part I.

Slide 6

Slide 6 text

8FC World Wide Web 30th anniversary

Slide 7

Slide 7 text

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

Slide 8

Slide 8 text

HTML Hyper Text Markup Language

Slide 9

Slide 9 text

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

Slide 10

Slide 10 text

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

Slide 11

Slide 11 text

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

Slide 12

Slide 12 text

ۄ੉࠳۞ܻ ೐ۨ੐ਕ௼

Slide 13

Slide 13 text

No content

Slide 14

Slide 14 text

No content

Slide 15

Slide 15 text

+".4UBDL

Slide 16

Slide 16 text

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

Slide 17

Slide 17 text

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

Slide 18

Slide 18 text

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

Slide 19

Slide 19 text

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

Slide 20

Slide 20 text

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

Slide 21

Slide 21 text

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

Slide 22

Slide 22 text

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

Slide 23

Slide 23 text

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

Slide 24

Slide 24 text

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

Slide 25

Slide 25 text

69 User Experience c Part II.

Slide 26

Slide 26 text

/PUPOMZ 69%FTJHO #VUBMTP 69&OHJOFFSJOH

Slide 27

Slide 27 text

69&OHJOFFSJOH 

Slide 28

Slide 28 text

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

Slide 29

Slide 29 text

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

Slide 30

Slide 30 text

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

Slide 31

Slide 31 text

https://slides.com/jbee/devfest_seoul_2018_performance_optimization_with_chrome_devtools

Slide 32

Slide 32 text

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

Slide 33

Slide 33 text

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

Slide 34

Slide 34 text

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

Slide 35

Slide 35 text

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

Slide 36

Slide 36 text

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

Slide 37

Slide 37 text

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

Slide 38

Slide 38 text

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

Slide 39

Slide 39 text

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

Slide 40

Slide 40 text

хࢎ೤פ׮ ೠ੤৐ +CFF  IUUQTKCFFJP