Upgrade to Pro — share decks privately, control downloads, hide ads and more …

접근성/SEO를 고려한 프론트엔드 프레임워크 개발

Avatar for yamoo9 yamoo9
November 23, 2018
0
120

접근성/SEO를 고려한 프론트엔드 프레임워크 개발

접근성/SEO를 고려한 프론트엔드 프레임워크 개발 - 2018 IAT 컨퍼런스 발표 자료

Avatar for yamoo9

yamoo9

November 23, 2018
Tweet

More Decks by yamoo9

See All by yamoo9
Green Academy Seminar 2019
Avatar for yamoo9 yamoo9
1
63
WCAG
Avatar for yamoo9 yamoo9
0
320
패러다임 전환 - FrontEnd Dev.
Avatar for yamoo9 yamoo9
0
260
2018 웹 테크 콘서트 - JavaScript 천천히 시작하기
Avatar for yamoo9 yamoo9
0
310
모바일 UI 레이아웃 디자인 (CSS Grid + Frameworks) 2018
Avatar for yamoo9 yamoo9
0
1.2k

Featured

See All Featured
Balancing Empowerment & Direction
Avatar for Lara Hogan lara
5
690
10 Git Anti Patterns You Should be Aware of
Avatar for Lemi Orhan Ergin lemiorhan
PRO
657
61k
Building Flexible Design Systems
Avatar for Yesenia Perez-Cruz yeseniaperezcruz
329
39k
Embracing the Ebb and Flow
Avatar for Simon Collison colly
88
4.9k
Automating Front-end Workflow
Avatar for Addy Osmani addyosmani
1371
200k
Mobile First: as difficult as doing things right
Avatar for Swwweet swwweet
225
10k
Large-scale JavaScript Application Architecture
Avatar for Addy Osmani addyosmani
514
110k
Writing Fast Ruby
Avatar for Erik Berlin sferik
629
62k
CSS Pre-Processors: Stylus, Less & Sass
Avatar for Bermon Painter bermonpainter
359
30k
It's Worth the Effort
Avatar for 3n 3n
187
28k
Fashionably flexible responsive web design (full day workshop)
Avatar for Andy Clarke malarkey
407
66k
Easily Structure & Communicate Ideas using Wireframe
Avatar for Afnizar Nur Ghifari afnizarnur
194
16k

Transcript

  1. 6"-BC!ZBNPPZBNPP!OBWFSDPN ੿ࠁ੽Ӕࢿӝࣿஶಌ۠झ TFTTJPO *"5$POGFSFODF ੽Ӕࢿ4&0ܳҊ۰ೠ
 ೐ۿ౟ূ٘೐ۨ੐ਕ௼ѐߊ

  2. 6"-BC!ZBNPPZBNPP!OBWFSDPN −ѐߊജ҃੄߸ച  −੽Ӕࢿ੉गѨష  ঠޖ ZBNPP ٣੗ੋআఊ %FTJHO5IJOLJOH ѐߊআఊ

    ੽Ӕࢿ4&0আఊ %FWFMPQ5IJOLJOH
 "Z4&05IJOLJOH

  3. 6"-BC!ZBNPPZBNPP!OBWFSDPN −ѐߊജ҃੄߸ച  −੽Ӕࢿ੉गѨష  ੽Ӕࢿ4&0ܳҊ۰ೠ ೐ۿ౟ূ٘೐ۨ੐ਕ௼ѐߊ

  4. 6"-BC!ZBNPPZBNPP!OBWFSDPN −ѐߊജ҃੄߸ച  −੽Ӕࢿ੉गѨష  HPPHMDL.TW8 ѐߊಁ۞׮੐੹ജ 1BSBEJHN4IJGU

  5. 6"-BC!ZBNPPZBNPP!OBWFSDPN −ѐߊജ҃੄߸ച  −੽Ӕࢿ੉गѨష  HPPHM9JTB ೐ۿ౟ূ٘ѐߊझఖ੄߸ച FWPMVUJPOPG'SPOU&OE%FWFMPQ

  6. 6"-BC!ZBNPPZBNPP!OBWFSDPN −ѐߊജ҃੄߸ച  −੽Ӕࢿ੉गѨష 

  7. 6"-BC!ZBNPPZBNPP!OBWFSDPN −ѐߊജ҃੄߸ച  −੽Ӕࢿ੉गѨష 

  8. 6"-BC!ZBNPPZBNPP!OBWFSDPN −ѐߊജ҃੄߸ച  −੽Ӕࢿ੉गѨష 

  9. 6"-BC!ZBNPPZBNPP!OBWFSDPN −ѐߊജ҃੄߸ച  −੽Ӕࢿ੉गѨష 

  10. 6"-BC!ZBNPPZBNPP!OBWFSDPN −ѐߊജ҃੄߸ച  −੽Ӕࢿ੉गѨష 

  11. 6"-BC!ZBNPPZBNPP!OBWFSDPN −ѐߊജ҃੄߸ച  −੽Ӕࢿ੉गѨష 

  12. 6"-BC!ZBNPPZBNPP!OBWFSDPN −ѐߊജ҃੄߸ച  −੽Ӕࢿ੉गѨష 

  13. 6"-BC!ZBNPPZBNPP!OBWFSDPN −ѐߊജ҃੄߸ച  −੽Ӕࢿ੉गѨష  DPEFTBOECPYJP

  14. 6"-BC!ZBNPPZBNPP!OBWFSDPN −ѐߊജ҃੄߸ച  −੽Ӕࢿ੉गѨష  TUBUFPGKTDPN +BWB4DSJQU౟ے٘ 5IF4UBUFPG+BWB4DSJQU

  15. 6"-BC!ZBNPPZBNPP!OBWFSDPN −ѐߊജ҃੄߸ച  −੽Ӕࢿ੉गѨష 

  16. 6"-BC!ZBNPPZBNPP!OBWFSDPN −ѐߊജ҃੄߸ച  −੽Ӕࢿ੉गѨష 

  17. 6"-BC!ZBNPPZBNPP!OBWFSDPN −ѐߊജ҃੄߸ച  −੽Ӕࢿ੉गѨష  NPNFOUDPLS ೐ۨ੐ਕ௼ܳഝਊೠਢࢲ࠺झ 8FC4FSWJDFVTJOH'SBNFXPSLT

  18. 6"-BC!ZBNPPZBNPP!OBWFSDPN −ѐߊജ҃੄߸ച  −੽Ӕࢿ੉गѨష  HPPHM[E7&N1 ೐ۨ੐ਕ௼بੑӝ 5IF*OUSPEVDUJPOPG'SBNFXPSL

  19. 6"-BC!ZBNPPZBNPP!OBWFSDPN −ѐߊജ҃੄߸ച  −੽Ӕࢿ੉गѨష  HPPHM[E7&N1 ழझథஹನք౟ഝਊ 6TJOH$VTUPN$PNQPOFOUT

  20. 6"-BC!ZBNPPZBNPP!OBWFSDPN −ѐߊജ҃੄߸ച  −੽Ӕࢿ੉गѨష  HJUIVCDPNZBNPP8FC$PNQPOFOU 8$ਢ಴ળ)5.-ਢஹನք౟ 8$8FC4UBOEBSE8FC$PNQPOFOU

  21. 6"-BC!ZBNPPZBNPP!OBWFSDPN −ѐߊജ҃੄߸ച  −੽Ӕࢿ੉गѨష  HPPHM6GX4B ೐ۨ੐ਕ௼द੘ೞӝ (FUUJOH4UBUFE'SBNFXPSL

  22. 6"-BC!ZBNPPZBNPP!OBWFSDPN −ѐߊജ҃੄߸ച  −੽Ӕࢿ੉गѨష  HPPHM6GX4B ೐۽ં౟ݒפ੷(6* 7VF1SPKFDU.BOBHFS

  23. 6"-BC!ZBNPPZBNPP!OBWFSDPN −ѐߊജ҃੄߸ച  −੽Ӕࢿ੉गѨష  ੽Ӕࢿ4&0ܳҊ۰ೠ ಁ۞׮੐੹ജ੉੹द؀੄ ೐ۿ౟ূ٘ѐߊ

  24. 6"-BC!ZBNPPZBNPP!OBWFSDPN −ѐߊജ҃੄߸ച  −੽Ӕࢿ੉गѨష  ੽Ӕࢿ4&0ܳҊ۰ೞ૑ঋח ಁ۞׮੐੹ജ೐ۨ੐ਕ௼द؀੄ ೐ۿ౟ূ٘ѐߊ

  25. 6"-BC!ZBNPPZBNPP!OBWFSDPN −ѐߊജ҃੄߸ച  −੽Ӕࢿ੉गѨష  :".00/*/&!ZBNPPZBNPP!OBWFSDPN ࢚׼൤ࠂ੟ೞѱ߸҃ػ ೐ۿ౟ূ٘ѐߊജ҃ ೐ۨ੐ਕ௼ࢎਊद 


    ߔূ٘ѐߊജ҃җ
 ਬࢎೞѱ߸҃ؽ HJUIVCDPNZBNPPOVYU#MPH I'm a Fullstack 
 Developer

  26. 6"-BC!ZBNPPZBNPP!OBWFSDPN −ѐߊജ҃੄߸ച  −੽Ӕࢿ੉गѨష  ݆਷੽Ӕࢿޙઁܳղನೠ
 ೐ۨ੐ਕ௼ഝਊࢲ࠺झѨష 3FWJFXGSBNFXPSLVUJMJ[BUJPOTFSWJDFT XJUINBOZBDDFTTJCJMJUZJTTVFT

  27. 6"-BC!ZBNPPZBNPP!OBWFSDPN −ѐߊജ҃੄߸ച  −੽Ӕࢿ੉गѨష  ా੉޷૑۽ٜ݅য૓Ӓې೗੿ࠁ ؀୓ఫझ౟ࠗ੤  ఃࠁ٘۽੽Ӕࠛоמೠ୓௼߅झ ߡౡݽন੄ਃٜࣗ

    It's ridiculous

  28. 6"-BC!ZBNPPZBNPP!OBWFSDPN −ѐߊജ҃੄߸ച  −੽Ӕࢿ੉गѨష  It's ridiculous ా੉޷૑۽ٜ݅য૓Ӓې೗੿ࠁ ؀୓ఫझ౟ࠗ੤ 

    ఃࠁ٘۽੽Ӕࠛоמೠ୓௼߅झ ߡౡݽন੄ਃٜࣗ

  29. 6"-BC!ZBNPPZBNPP!OBWFSDPN −ѐߊജ҃੄߸ച  −੽Ӕࢿ੉गѨష  HPPHM)): BMUࣘࢿഝਊ VTJOH"MUFSOBUF5FYU The drinks

    are on me!

  30. 6"-BC!ZBNPPZBNPP!OBWFSDPN −ѐߊജ҃੄߸ച  −੽Ӕࢿ੉गѨష  HPPHM2#7/.+ ನழझਃࣗഝਊ VTJOH'PDVTBCMF&MFNFOUT The drinks

    are on me!

  31. 6"-BC!ZBNPPZBNPP!OBWFSDPN −ѐߊജ҃੄߸ച  −੽Ӕࢿ੉गѨష  DPEFTBOECPYJPT[XWKLR ੽Ӕࢿѐࢶ *NQSPWFBDDFTTJCJMJUZ

  32. 6"-BC!ZBNPPZBNPP!OBWFSDPN −ѐߊജ҃੄߸ച  −੽Ӕࢿ੉गѨష  ോ؀ಪߣഐੑ۱द ൦౟੿ࠁܳ ٍןѱঌѱغחޙઁ I'm so

    pissed off 
 right now!

  33. 6"-BC!ZBNPPZBNPP!OBWFSDPN −ѐߊജ҃੄߸ച  −੽Ӕࢿ੉गѨష  HPPHM&5'/ BSJBEFTDSJCFECZࣘࢿഝਊ VTJOH8"*"3*" The drinks

    are on me!

  34. 6"-BC!ZBNPPZBNPP!OBWFSDPN −ѐߊജ҃੄߸ച  −੽Ӕࢿ੉गѨష  DPEFTBOECPYJPTOW ੽Ӕࢿѐࢶ *NQSPWFBDDFTTJCJMJUZ

  35. 6"-BC!ZBNPPZBNPP!OBWFSDPN −ѐߊജ҃੄߸ച  −੽Ӕࢿ੉गѨష  ੋૐઁೠदр੿ࠁܳपदрਵ۽ ࢎਊ੗ীѱঌ۰઱૑ޅೞחޙઁ It's ridiculous

  36. 6"-BC!ZBNPPZBNPP!OBWFSDPN −ѐߊജ҃੄߸ച  −੽Ӕࢿ੉गѨష  HPPHMP1E+" BSJBMJWFࣘࢿഝਊ VTJOH8"*"3*" The drinks

    are on me!

  37. 6"-BC!ZBNPPZBNPP!OBWFSDPN −ѐߊജ҃੄߸ച  −੽Ӕࢿ੉गѨష  DPEFTBOECPYJPT[RPOSZP[ ੽Ӕࢿѐࢶ *NQSPWFBDDFTTJCJMJUZ

  38. 6"-BC!ZBNPPZBNPP!OBWFSDPN −ѐߊജ҃੄߸ച  −੽Ӕࢿ੉गѨష  Ӓ৻ীب݆ࣻ਷੽Ӕࢿ ޙઁоৈӝ੷ӝࢲࠁৈ Shaking My Damn

    Head . . .

  39. 6"-BC!ZBNPPZBNPP!OBWFSDPN −ѐߊജ҃੄߸ച  −੽Ӕࢿ੉गѨష  ޙઁоޥ૑חঌѷחؘ Ӓ۠੉ঠӝחѐߊೞӝ੹ী
 ೧઱ݶજਗ਼ই ѐߊೠറী
 ੉ঠӝೞݶ൨ٜਗ਼ই

    수정할 게 한 두개가 
 아니잖아?

  40. 6"-BC!ZBNPPZBNPP!OBWFSDPN −ѐߊജ҃੄߸ച  −੽Ӕࢿ੉गѨష  HJUIVCDPNWVFBZWVFBYF ೐ۨ੐ਕ௼੽Ӕࢿೱ࢚ਸਤೠ೒۞Ӓੋ 1MVHJOUPJNQSPWFGSBNFXPSLBDDFTTJCJMJUZ

  41. 6"-BC!ZBNPPZBNPP!OBWFSDPN −ѐߊജ҃੄߸ച  −੽Ӕࢿ੉गѨష  DPEFTBOECPYJPTWMPQS ѐߊ઺੽ӔࢿѨࣻ "DDFTTJCJMJUZBVEJUJOHEVSJOHEFWFMPQNFOU

  42. 6"-BC!ZBNPPZBNPP!OBWFSDPN −ѐߊജ҃੄߸ച  −੽Ӕࢿ੉गѨష  Ѩ࢝ূ૓୭੸ച 4&0 ޙઁܳо૓
 41"೐ۨ੐ਕ௼ܳഝਊೠࢲ࠺झ 4FBSDIFOHJOFPQUJNJ[BUJPO

    4&0 JTTVFT4FSWJDFT VTJOHUIF41"GSBNFXPSL What . . . 
 should I read?

  43. 6"-BC!ZBNPPZBNPP!OBWFSDPN −ѐߊജ҃੄߸ച  −੽Ӕࢿ੉गѨష  HPPHMU,OU) ಕ੉૑ஹನք౟߹ݫఋ੿ࠁҙܻ೒۞Ӓੋ .BOBHFQBHFNFUBJOGPJO7VFDPNQPOFOUT

  44. 6"-BC!ZBNPPZBNPP!OBWFSDPN −ѐߊജ҃੄߸ച  −੽Ӕࢿ੉गѨష  DPEFTBOECPYJPTZKSLZ 4&0ѐࢶ *NQSPWF4FBSDI&OHJOF0QUJNJ[BUJPO

  45. 6"-BC!ZBNPPZBNPP!OBWFSDPN −ѐߊജ҃੄߸ച  −੽Ӕࢿ੉गѨష  TTSWVFKTPSH ࢲߡࢎ੉۪٘؊݂ 443 ೒۞Ӓੋ 7VFKT4FSWFS4JEF3FOEFSJOH

  46. 6"-BC!ZBNPPZBNPP!OBWFSDPN −ѐߊജ҃੄߸ച  −੽Ӕࢿ੉गѨష  OVYUKTPSH /VYUKT೐ۨ੐ਕ௼ 7VF .FUB 443

     6OJWFSTBM7VFKT"QQMJDBUJPO

  47. 6"-BC!ZBNPPZBNPP!OBWFSDPN −ѐߊജ҃੄߸ച  −੽Ӕࢿ੉गѨష  DPEFTBOECPYJPTROZMLOM 4&0ѐࢶ *NQSPWF4FBSDI&OHJOF0QUJNJ[BUJPO

  48. 6"-BC!ZBNPPZBNPP!OBWFSDPN −ѐߊജ҃੄߸ച  −੽Ӕࢿ੉गѨష  ROZMLOMTTFDPEFTBOECPYJP ࢲߡࢎ੉۪٘؊݂Ѿҗ 4FSWFSTJEFSFOEFSJOHSFTVMUT

  49. 6"-BC!ZBNPPZBNPP!OBWFSDPN −ѐߊജ҃੄߸ച  −੽Ӕࢿ੉गѨష  ROZMLOMTTFDPEFTBOECPYJP 4&0 ":ѐࢶ *NQSPWF4FBSDI&OHJOF0QUJNJ[BUJPO"DDFTTJCJMJUZ

  50. 6"-BC!ZBNPPZBNPP!OBWFSDPN −ѐߊജ҃੄߸ച  −੽Ӕࢿ੉गѨష  WVFTFSWFSSFOEFSFSա/VYUKT೐ۨ੐ਕ௼
 ೡѪহ੉/PEFKTѐߊജ҃ਵ۽ݽف
 ߄Լঠೞਗ਼ই ӒѤખ൨ٜয
 ਋ܽ੉޷׮ܲѐߊജ҃ਸы୶Ҋ੓׮Ҋ

    우리는 Node.js 
 개발 환경이 아니라고!

  51. 6"-BC!ZBNPPZBNPP!OBWFSDPN −ѐߊജ҃੄߸ച  −੽Ӕࢿ੉गѨష  HPPHMDQ/K: /PEFKTоইצѐߊജ҃ীࢲ੄؀਽ 8IBUUPEPJOBOPO/PEFKTEFWFMPQNFOUFOWJSPONFOU

  52. 6"-BC!ZBNPPZBNPP!OBWFSDPN −ѐߊജ҃੄߸ച  −੽Ӕࢿ੉गѨష  QSFSFOEFSJP 1SFSFOEFS޷ٜਝয +BWB4DSJQUXFCTJUFUPCFDSBXMFEQFSGFDUMZCZTFBSDIFOHJOFT

  53. 6"-BC!ZBNPPZBNPP!OBWFSDPN −ѐߊജ҃੄߸ച  −੽Ӕࢿ੉गѨష  Q A 

  54. 6"-BC!ZBNPPZBNPP!OBWFSDPN −ѐߊജ҃੄߸ച  −੽Ӕࢿ੉गѨష  ZBNPPHJUCPPLJPWVFBZTFP ੽Ӕࢿ4&0ܳҊ۰ೠ
 গ೒ܻா੉࣌ઁ੘о੉٘࠘ "DDFTTJCJMJUZ4&0CBTFEBQQMJDBUJPO
 DSFBUJPOHVJEFCPPL

  55. 6"-BC!ZBNPPZBNPP!OBWFSDPN −ѐߊജ҃੄߸ച  −੽Ӕࢿ੉गѨష  BZHJUCPPLJPXDBH ਢ௑బஎ੽Ӕࢿо੉٘ۄੋ 8FC$POUFOUT"DDFTTJCJMJUZ(VJEFMJOF

  56. 6"-BC!ZBNPPZBNPP!OBWFSDPN −ѐߊജ҃੄߸ച  −੽Ӕࢿ੉गѨష  BZHJUCPPLJPHSBQIJDTBSJB ࢎۈਸਤೠ੿ࠁӒې೗٣੗ੋ 8"*"3*"(SBQIJDT.PEVMF

  57. 6"-BC!ZBNPPZBNPP!OBWFSDPN −ѐߊജ҃੄߸ച  −੽Ӕࢿ੉गѨష  HPPHMOT$;R *"5ஶಌ۠झߊ಴੗ܐ *"5$POGFSFODF1SFTFOUBUJPOT