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

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

yamoo9
November 23, 2018
0
110

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

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

yamoo9

November 23, 2018
Tweet

More Decks by yamoo9

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

Featured

See All Featured
The Cult of Friendly URLs
andyhume
74
5.7k
The Cost Of JavaScript in 2023
addyosmani
14
3.8k
Code Review Best Practice
trishagee
54
15k
Docker and Python
trallard
33
2.7k
Designing Dashboards & Data Visualisations in Web Apps
destraynor
226
51k
Creating an realtime collaboration tool: Agile Flush - .NET Oxford
marcduiker
13
1.5k
Web development in the modern age
philhawksworth
202
10k
Building Flexible Design Systems
yeseniaperezcruz
318
37k
Six Lessons from altMBA
skipperchong
20
3k
Documentation Writing (for coders)
carmenintech
59
3.9k
Happy Clients
brianwarren
91
6.4k
Creatively Recalculating Your Daily Design Routine
revolveconf
209
11k

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