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

VisBug와 함께 하는 오픈소스 기여 이야기

Dohyung Ahn
November 23, 2019

VisBug와 함께 하는 오픈소스 기여 이야기

외부 링크가 Speakerdeck에 추가되지 않아 여기에 별도로 첨부합니다.

* 질문하는 법: https://kjwon15.net/wordpress/articles/free/517
* VisBug 사용법 영상: https://youtu.be/gCDEiM_u1LE
* 프로젝트 저장소: https://github.com/GoogleChromeLabs/ProjectVisBug

Dohyung Ahn

November 23, 2019
Tweet

Other Decks in Programming

Transcript

  1. VisBug৬ ೣԋ ೞח
    য়೑ ࣗझ ӝৈ ੉ঠӝ

    View full-size slide

  2. ߊ಴੗ ࣗѐ
    • ೐۽ష౵੉ ௿ۄ਋٘ ࢲ࠺झ

    ೐ۿ౟ূ٘ ѐߊ

    • ܻঘ౟݅ ׮ܘ૑ ݻ ֙ ؽ

    • য়೑ࣗझ ௏٘ ੍যࠁӝ જইೣ

    • زܐ ݽ૘ ઺

    View full-size slide

  3. ProtoPie Cloud

    View full-size slide

  4. য়ט੄ ߊ಴ ղਊ
    1. VisBug ࣗѐ ߂ ഝਊ ߑߨ ҕਬ

    2. য়೑ࣗझ ࢤక҅ী ӝৈ೧ࠁҊ೑ ٜ࠙ਸ ਤ೧

    VisBug ೐۽ં౟ী ӝৈೞݴ ঳঻؍ ҃೷ ҕਬ

    View full-size slide

  5. VisBugо ޤભ?
    Firebug for designers

    ݽٚ ਢ ಕ੉૑ܳ ׼न੄ ই౟ࠁ٘୊ۢ ٜ݅যࠁࣁਃ

    View full-size slide

  6. VisBugо ޤભ?
    • Google੄ Adam Argyle੉ ݅ٚ ೐۽ં౟۽ࢲ

    2018֙ Chrome Dev Summitীࢲ ߊ಴

    • ੉੹ ਢ ࣁ؀੄ ੹ࢸ੸ੋ ѐߊ੗ بҳ

    FireBug੄ ৔ೱਸ ߉ইࢲ ٜ݅য૓ ೐۽ં౟

    View full-size slide

  7. VisBugо ޤભ?
    • അ੤ ௼܁ ഛ੢ਵ۽݅ ҕѐغয ੓ਵݴ

    • Firefox ഛ੢ ߂ npm ಁః૑۽ য٣ٚ૑ оઉ׮ ॶ ࣻ ੓ח
    ӝמ੉ ୶о ৘੿(੉૑݅ য়ې Ѧܻח ઺)

    • ઱ػ ࢎਊ ؀࢚਷ ਢ ٣੗੉ց৬ ਢ ѐߊ੗

    View full-size slide

  8. VisBug੄ ӝࣿ੸ ҳࢿ

    View full-size slide

  9. ਢ ஹನք౟

    View full-size slide

  10. Custom Element
    • HTMLਸ ഛ੢ೞৈ Ҋਬ੄ కӒܳ
    ٜ݅ ࣻ ੓਺

    • ۄ੉೐ࢎ੉௿ب ੓਺

    • ࣘࢿ ߸ച х૑ ١
    Shadow DOM

    • ৃܻݢ౟੄ झఋੌҗ ݃௼সਸ

    ஭ङച

    • ࠳ۄ਋੷੄ ݽٚ ৃܻݢ౟ী ؀ೠ
    CSS৬ झ௼݀౟ח '੹৉ਵ۽ ੸ਊ
    ػ׮' ח ޙઁܳ ೧Ѿ

    View full-size slide

  11. ਢ ಴ળ ӝࣿ۽ ஹನք౟ܳ ٜ݅ ࣻ ੓׮

    View full-size slide

  12. • ਢ ஹನք౟৬ ӝמ ೣࣻ੄ ઑ೤ਵ۽ ੉ܖয૗

    • ஹನք౟੄ झఋੌ݂਷

    PostCSS + Constructable Stylesheet ഝਊ

    • Ava + Puppeteer ۽ E2E Testing

    View full-size slide

  13. Constructable Stylesheet

    View full-size slide

  14. э਷ झఋੌद౟ܳ ׮নೠ ஹನք౟ী ഝਊೡ ࣻ ੓ب۾ ݅ٝ

    View full-size slide

  15. Puppeteer ࢎਊ ৘

    View full-size slide

  16. Github Repository
    https://github.com/
    GoogleChromeLabs/ProjectVisBug

    View full-size slide

  17. Ӓېࢲ ੉Ѣ۽ ަ ೡ ࣻ ੓աਃ?

    View full-size slide

  18. VisBug੄ ӝמ ࣗѐ
    • Guide

    • Inspect

    • Accessibility

    • Move

    • Margin / Padding

    • Flexbox align

    • Hue shift

    • Shadow

    • ...

    View full-size slide

  19. ݽ٘ ӝ߈ ز੘
    &
    ױ୷ః ഝਊ

    View full-size slide

  20. ৵ ױ୷ః ਤ઱੄ ࢎਊਸ?
    • ࣼ۲ػ ѐߊ੗৬ ࣼ۲ػ ٣੗੉ց੄ ҕా੼

    = ఃࠁ٘ ઺ঔীࢲ ࣚ੉ ߹۽ ځա૑ ঋח׮.

    • ઁ੘ द زܐ ٣੗੉ցٜҗ ࣗాೞݴ

    ੗઱ ࢎਊغח ױ୷ః ࢎਊ ൒ܴਸ ౵ঈೞৈ ੸ਊ

    • Enter / Shift + Enter,

    Tab / Shift + Tab ١

    View full-size slide

  21. Accessibility

    View full-size slide

  22. Margin / Padding

    View full-size slide

  23. যڌѱ ഝਊೞҊ ੓חо?
    • ѐߊ੗۽ࢲ য૑рೠ ӝמ਷ DevToolਸ ৌয ೧Ѿೡ ࣻ ੓
    ח Ѫٜ੉૑݅, ചݶ ևѱ ॳҊ रਸ ٸب ਬਊ

    • ౠ൤ о੉٘ ӝמ ৮ࣗ

    • ٣੗੉ց, QA ূ૑פযীѱ ঌ۰઱Ҋ ഈসೡ ٸ

    ׮নೠ ߑधਵ۽ ഝਊ

    • ٣੗੉ց ٜ࠙੉ۄݶ

    ؊ ਬਊೞҊ ੸੺ೠ ഝਊ ߑߨਸ ଺ਸ ࣻ ੓ਵदܻۄ ࢤп

    View full-size slide

  24. VisBugী ӝৈೞӝ

    View full-size slide

  25. ަ ೧ࠌջݶਃ
    • Inspect بҳ ࢶఖ द

    ৃܻݢ౟ী ૒੽ style ࣘࢿਸ

    ߸҃ೠ ҃਋ ߹ب۽ ಴द

    • ੽Ӕࢿ بҳо

    ࠛ೙ਃೞѱ SVG ਃࣗ੄

    ੽Ӕࢿ ਃࣗܳ Ѩࢎೞ૑ ঋب
    ۾ ೣ

    • ׮ܲ ੉ग ૓೯ ઺

    View full-size slide

  26. VisBugࡺ ইפۄ
    ࣁ࢚ী ҕѐغয ੓ח
    ࣻ ݆਷ য়೑ ࣗझ ೐۽ં౟ٜ

    View full-size slide

  27. • ݽفо ౵੉ܳ ݡणפ׮ (ࢎਊ)

    • ౵੉о ൤౟ܳ ଢ଼णפ׮! Ӓٜ਷ ׼नীѱ ౵੉ ઁઑߨਸ
    ޚणפ׮ (ࠁӝ)

    • ೠ ஘ҳੋ, ઁҗ੼ ઱ߑ੢ Alexח ࢸఔਸ ઴੉ח Ѫ੉ જ
    ׮Ҋ ઑ঱೤פ׮ (ࣻ੿)

    • ׮ܲ ஘ҳੋ, Lisaח ׮਺ ઱ ੷֘ धࢎী ӒѪਸ ࢎਊೡ
    Ѫਸ ਃ୒೤פ׮ (ߓನ)
    ౵੉ ۨदೖ੄ ৘

    View full-size slide

  28. ة੼ ࣗझۄݶ?
    • ౵੉ܳ ࣗ࠺ೡ ࣻ ߆ী হ׮

    • ڪযդ ޷пਵ۽ ౵੉੄ ۨदೖܳ ૒੽ ঌইմ׮ ೧ب

    (ܻߡझ ূ૑פয݂)

    • ౵੉ܳ ݅ٚ ࢎۈҗ ߨ੸ ࠙੬੉ ൃ݈ܻѱ ؼ ࣻ ੓׮

    (ۄ੉ࣃझী ٮۄ)

    View full-size slide

  29. ૓ੑ ੢߷ਸ ծ୶য ࡅܲ ഛ࢑җ ߊ੹

    View full-size slide

  30. ׮ܲ ѐߊ੗ ߂ ழޭפ౭ܳ ذח ࢶࣽജ

    View full-size slide

  31. ੷੄ ৘ܳ ٜ੗ݶ
    • য়೑ ࣗझ۽ ҕѐػ ঱যੋ ܖ࠺৬

    • ܖ࠺۽ ٜ݅য૓ য়೑ ࣗझ ਢ ೐ۨ੐ਕ௼ੋ

    Ruby On Rails ܳ ࢎਊೞৈ ਢ ѐߊ੗ ழܻযܳ द੘

    View full-size slide

  32. ب਑ ߉਷ ݅ఀ ج۰઱Ҋ र׮ח ৌݎ

    View full-size slide

  33. যڌѱ ӝৈೞחо?
    • ೐۽ં౟ ഘࠁ

    • ޙࢲചী ӝৈ

    • ղо ೐۽ં౟ ࢎਊߨਸ ؊ ੜ ঌҊ ੓׮ݶ, ঌ۰઱ӝ

    • ૒੽ ௏٘۽ ӝৈ

    View full-size slide

  34. ೐۽ં౟ ഘࠁ
    • ࠶۽Ӓ ನझ౴

    • ߊ಴

    • ৔࢚ ݒ୓(Youtube, Vimeo, Twitch ١)

    View full-size slide

  35. ޙࢲചী ӝৈ
    • ೐۽ં౟੄ ࠗ઒ೠ ࠗ࠙ਸ ଻਋ח ղਊਸ ੘ࢿ

    (ਤః, ੉ग, README ١)

    • ӝઓ੄ ޙࢲܳ ೠӖ۽ ߣ৉

    • ޖઑѤ ࡐযդ ࣻળ੄ ߣ৉ਸ ೡ ೙ਃо হणפ׮

    View full-size slide

  36. ೐۽ં౟ܳ ؊ ੜ ঌҊ ੓׮ݶ
    • Stack Overflow ׹߸ ׳ӝ

    • ଻౴ߑীࢲ ؀׹೧ ઱ӝ

    • Github Issue ١ীࢲ ޙઁ ೧Ѿਸ ذӝ

    • (٘ޛ૑݅) ૟ ೐۽Ӓې߁ ೧ ࠁӝ

    View full-size slide

  37. GatsbyJS ੄ ৘

    View full-size slide

  38. Ә੹੸ਵ۽ ӝৈೞח ߑߨب ੓णפ׮

    View full-size slide

  39. যڃ ೐۽ં౟ী ӝৈܳ ೧ ࠅө?
    • ղо ೞҊ ੓ח ੌҗ োҙ੉ ੓ח ೐۽ં౟

    • ղо ҙबਸ о૑Ҋ ੓ח ࠙ঠ੄ ೐۽ં౟

    • ղо ੤޷੓׮Ҋ וՙח ೐۽ં౟

    View full-size slide

  40. ݾ۾ীࢲ ୭ࣗ 2ѐח ݅઒ೡ ࣻ ੓ب۾

    View full-size slide

  41. ղо ೞҊ ੓ח ੌҗ োҙ੉ ੓׮ݶ
    • पޖী ߄۽ ॄݡਸ ࣻ ੓਺

    • ੗न੉ ࢸ੿ೠ ழܻয ҃۽ী ب਑੉ ؼ ࣻ ੓਺

    • োҙ੉ হ׮ݶ য۵Ѣա ൜޷ܳ ੏ӝ ए਑

    View full-size slide

  42. ղо ҙब ੓ח ࠙ঠۄݶ
    • ൜޷ܳ Ҋஂदఃӝ ই઱ જ਷ ਬഋ

    • ஂೱী ݏח ਺ঈਸ ٛѢա ଼ਸ ੍٠੉ ੽Ӕ

    • ҙब੉ হחؘ ೧ঠ ೞח ҃਋ۄݶ

    ੗ߊ੸ੋ ଵৈо ইצ ҃਋ੌ ࣻب...(ഥࢎ ١)

    View full-size slide

  43. ղо ੤޷ܳ ו՛׮ݶ
    • ೣԋ ೞח Ѫ੉ ૌѢ਍ ழޭפ౭

    • ௏٘ ೠ ઴, ௏ݭ౟ ೞա݃׮ ߓ਋Ҋ ੓׮ח ו՝੉ ٚ׮

    • ࢚࢚ೡ ࣻ ੓ח ୭Ҋ ࣻળ੄ ઑ߹җઁۄ ࢤп೧ ࠁࣁਃ

    View full-size slide

  44. 1. যڌѱ द੘೮ա?

    View full-size slide

  45. • README.md

    • CONTRIBUTE.md

    • Wiki

    • Chatrooms (Spectrum, Gitter, IRC)

    View full-size slide

  46. ੉गܳ ৌযࠇद׮

    View full-size slide

  47. 'good first issue' ݅ ୶ܽ ৘

    View full-size slide

  48. Ӓېب ݄࢚ ೧ ࠁ۰פ...
    • Vanila JS ೐۽ં౟ী׮ (աח ఋੑ হਵݶ ࠛউೠؘ)

    • ESLint ࢸ੿ب হҊ (যו ౣী ݏ୾ ௏٘ܳ ૞ঠೞա)

    • Prettier ࢸ੿ب হҊ

    (ਃ࢜ח ੉ 3о૑ হਵݶ ೐۽ં౟ द੘ উೞחؘ)

    View full-size slide

  49. ૒੽ ݫੌਸ ॄ ࠌणפ׮

    View full-size slide

  50. "੉ઁ ࠄѺ੸ਵ۽ द੘೧ঠ૑!"
    Ӓ ੹ী ೠ о૑ ୽Ҋ

    View full-size slide

  51. “ੌױ ۽ஸ ѐߊ ജ҃੉ ੜ جইр׮ݶ,
    ௏٘ ࠙ࢳਸ ೞח о੢ ࡅܲ ߑߨ਷
    ੉Ѫ੷Ѫ ۽ஸীࢲ Ѥ٘۰ࠁח Ѫ੉׮.”

    View full-size slide

  52. ݄ ੉ۧѱ ࠙ࢳਸ ೮חؘ

    View full-size slide

  53. ݄ ੉ۧѱ ࠙ࢳਸ ೮חؘ (2)

    View full-size slide

  54. ׮ܲ ࠙੉ ੉गܳ Ԩ ೧Ѿ೧ ߡܿ

    View full-size slide

  55. 2. పझ౟ܳ ੘ࢿೞݴ ߓ਋ӝ

    View full-size slide

  56. UI పझ౟ܳ ੘ࢿೞח Ѫ਷ য۵׮
    (ਬ׫ పझ౟ח ೡ݅ೠؘ...)

    View full-size slide

  57. ௏٘ ܻ࠭ ٸ పझ౟ܳ ੘ࢿ೧ࠁۄח ӂਬܳ ߉਺

    View full-size slide

  58. ঌҊ݅ ੓؍ Ѣ ੉ߣ ӝഥী ೧ ࠁ੗

    View full-size slide

  59. पઁ۽ ߡӒܳ ੟ইࢲ ӝࢄ ف ߓ

    View full-size slide

  60. पઁ Puppeteer ۽ ੘ࢿ೮؍ పझ౟

    View full-size slide

  61. ௏٘۽ ࢎਊ੗ ز੘ਸ ಴അೠ׮ח ૌѢ਑

    View full-size slide

  62. ੉ٸ੄ ҃೷ਵ۽
    ૌѩѱ(?) पޖীࢲ పझ౟ ੘ࢿ ઺

    View full-size slide

  63. 3. ੸ӓ੸ਵ۽ ࣗాೞ੗

    View full-size slide

  64. ஘Ӕೞѱ, ೞ૑݅ ݒց੓ѱ

    View full-size slide

  65. ૕ޙ ੜ ೞח ߨ
    1. غחؘө૑ दب೧ ࠄ׮

    2. Ѩ࢝೧ࠅ ࣻ ੓חؘө૑ Ѩ࢝೧ࠄ׮

    3. दب, Ѩ࢝੄ җ੿ ݽف ӝ۾ೠ׮

    4. Ӓ ݽٚ ղਊਸ ઙ೤ೞৈ ૕ޙೠ׮ (ଵҊ ݂௼)

    View full-size slide

  66. "XXܳ ೞ۰חؘ YYө૑ ೧ ࠌ૑݅
    ZZө૑߆ী ౵ঈೞ૑ ޅ೮णפ׮.
    ৈӝө૑ ઁо दب೧ ࠌחؘ যڌѱ ೞݶ જਸөਃ?"

    View full-size slide

  67. ੉ۧѱ ݈Ҋਃ (׮ܲ ೐۽ં౟ ੉गੑפ׮)


    View full-size slide

  68. "૕ޙ ੜ ೞח ߨ" ਸ ੸ਊೞৈ ޙ੄ೠ ৘

    View full-size slide

  69. VisBug ࣗѐ
    • ਢ ஹನք౟ ӝ߈ਵ۽ ੉ܖয૓ ೐۽ં౟

    • ਢಕ੉૑ী ׮নೠ ઑ੘ਸ оೞҊ प೷೧ ࠅ ࣻ ੓਺

    • (৔য) ઁ੘੗৬ ೣԋೞח ࢎਊߨ ৔࢚

    View full-size slide

  70. VisBugী ӝৈೞݴ (؊) ߓ਍ Ѫ
    • աח ৵ য়೑ࣗझী ӝৈೞחо / যڌѱ ӝৈೡ ࣻ ੓חо

    • যڃ ೐۽ં౟ܳ ࠁݶ ੤޷੓ѱ ӝৈೡ ࣻ ੓ਸө?

    • ੍ח ௏٘ ࠙ࢳী दрਸ ॔૑ ݈Ҋ, ૒੽ Ѥ٘۰ࠁ੗

    • పझ౟ܳ ੘ࢿ೧ࠁ੗

    • ੜ ੿ܻೞৈ ݒց੓ѱ ࣗాೞ੗

    View full-size slide

  71. хࢎ೤פ׮

    View full-size slide