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

Transcript

1. 1.

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

2. 2.

   ߊ಴੗ ࣗѐ • ೐۽ష౵੉ ௿ۄ਋٘ ࢲ࠺झ
 ೐ۿ౟ূ٘ ѐߊ • ܻঘ౟݅

   ׮ܘ૑ ݻ ֙ ؽ • য়೑ࣗझ ௏٘ ੍যࠁӝ જইೣ • زܐ ݽ૘ ઺
3. 3.

   ProtoPie

4. 4.

   ProtoPie Cloud

5. 5.

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

   2. য়೑ࣗझ ࢤక҅ী ӝৈ೧ࠁҊ೑ ٜ࠙ਸ ਤ೧
 VisBug ೐۽ં౟ী ӝৈೞݴ ঳঻؍ ҃೷ ҕਬ
6. 6.

   VisBugо ޤભ? Firebug for designers ݽٚ ਢ ಕ੉૑ܳ ׼न੄ ই౟ࠁ٘୊ۢ

   ٜ݅যࠁࣁਃ
7. 7.

   VisBugо ޤભ? • Google੄ Adam Argyle੉ ݅ٚ ೐۽ં౟۽ࢲ
 2018֙ Chrome

   Dev Summitীࢲ ߊ಴ • ੉੹ ਢ ࣁ؀੄ ੹ࢸ੸ੋ ѐߊ੗ بҳ
 FireBug੄ ৔ೱਸ ߉ইࢲ ٜ݅য૓ ೐۽ં౟
8. 8.

   None
9. 9.

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

   ഛ੢ ߂ npm ಁః૑۽ য٣ٚ૑ оઉ׮ ॶ ࣻ ੓ח ӝמ੉ ୶о ৘੿(੉૑݅ য়ې Ѧܻח ઺) • ઱ػ ࢎਊ ؀࢚਷ ਢ ٣੗੉ց৬ ਢ ѐߊ੗
10. 10.

    VisBug੄ ӝࣿ੸ ҳࢿ

11. 11.

    ਢ ஹನք౟

12. 12.

    None
13. 13.

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

    • ۄ੉೐ࢎ੉௿ب ੓਺ • ࣘࢿ ߸ച х૑ ١ Shadow DOM • ৃܻݢ౟੄ झఋੌҗ ݃௼সਸ
 ஭ङച • ࠳ۄ਋੷੄ ݽٚ ৃܻݢ౟ী ؀ೠ CSS৬ झ௼݀౟ח '੹৉ਵ۽ ੸ਊ ػ׮' ח ޙઁܳ ೧Ѿ
14. 14.

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

15. 15.

    None
16. 16.

    • ਢ ஹನք౟৬ ӝמ ೣࣻ੄ ઑ೤ਵ۽ ੉ܖয૗ • ஹನք౟੄ झఋੌ݂਷


    PostCSS + Constructable Stylesheet ഝਊ • Ava + Puppeteer ۽ E2E Testing
17. 17.

    Constructable Stylesheet

18. 18.

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

19. 19.

    Puppeteer ࢎਊ ৘

20. 20.

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

21. 21.

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

22. 22.

    VisBug੄ ӝמ ࣗѐ • Guide • Inspect • Accessibility •

    Move • Margin / Padding • Flexbox align • Hue shift • Shadow • ...
23. 23.

    None
24. 24.

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

25. 25.

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


    = ఃࠁ٘ ઺ঔীࢲ ࣚ੉ ߹۽ ځա૑ ঋח׮. • ઁ੘ द زܐ ٣੗੉ցٜҗ ࣗాೞݴ
 ੗઱ ࢎਊغח ױ୷ః ࢎਊ ൒ܴਸ ౵ঈೞৈ ੸ਊ • Enter / Shift + Enter,
 Tab / Shift + Tab ١
26. 26.

    Guides

27. 27.

    None
28. 28.

    Inspect

29. 29.

    None
30. 30.

    Accessibility

31. 31.

    None
32. 32.

    Move

33. 33.

    None
34. 34.

    Margin / Padding

35. 35.

    None
36. 36.

    যڌѱ ഝਊೞҊ ੓חо? • ѐߊ੗۽ࢲ য૑рೠ ӝמ਷ DevToolਸ ৌয ೧Ѿೡ

    ࣻ ੓ ח Ѫٜ੉૑݅, ചݶ ևѱ ॳҊ रਸ ٸب ਬਊ • ౠ൤ о੉٘ ӝמ ৮ࣗ • ٣੗੉ց, QA ূ૑פযীѱ ঌ۰઱Ҋ ഈসೡ ٸ
 ׮নೠ ߑधਵ۽ ഝਊ • ٣੗੉ց ٜ࠙੉ۄݶ
 ؊ ਬਊೞҊ ੸੺ೠ ഝਊ ߑߨਸ ଺ਸ ࣻ ੓ਵदܻۄ ࢤп
37. 37.

    VisBugী ӝৈೞӝ

38. 38.

    ަ ೧ࠌջݶਃ • Inspect بҳ ࢶఖ द
 ৃܻݢ౟ী ૒੽ style

    ࣘࢿਸ
 ߸҃ೠ ҃਋ ߹ب۽ ಴द • ੽Ӕࢿ بҳо
 ࠛ೙ਃೞѱ SVG ਃࣗ੄
 ੽Ӕࢿ ਃࣗܳ Ѩࢎೞ૑ ঋب ۾ ೣ • ׮ܲ ੉ग ૓೯ ઺
39. 39.

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

40. 40.

    Why?

41. 41.

    • ݽفо ౵੉ܳ ݡणפ׮ (ࢎਊ) • ౵੉о ൤౟ܳ ଢ଼णפ׮! Ӓٜ਷

    ׼नীѱ ౵੉ ઁઑߨਸ ޚणפ׮ (ࠁӝ) • ೠ ஘ҳੋ, ઁҗ੼ ઱ߑ੢ Alexח ࢸఔਸ ઴੉ח Ѫ੉ જ ׮Ҋ ઑ঱೤פ׮ (ࣻ੿) • ׮ܲ ஘ҳੋ, Lisaח ׮਺ ઱ ੷֘ धࢎী ӒѪਸ ࢎਊೡ Ѫਸ ਃ୒೤פ׮ (ߓನ) ౵੉ ۨदೖ੄ ৘
42. 42.

    ة੼ ࣗझۄݶ? • ౵੉ܳ ࣗ࠺ೡ ࣻ ߆ী হ׮ • ڪযդ

    ޷пਵ۽ ౵੉੄ ۨदೖܳ ૒੽ ঌইմ׮ ೧ب
 (ܻߡझ ূ૑פয݂) • ౵੉ܳ ݅ٚ ࢎۈҗ ߨ੸ ࠙੬੉ ൃ݈ܻѱ ؼ ࣻ ੓׮
 (ۄ੉ࣃझী ٮۄ)
43. 43.

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

44. 44.

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

45. 45.

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

    ܖ࠺۽ ٜ݅য૓ য়೑ ࣗझ ਢ ೐ۨ੐ਕ௼ੋ
 Ruby On Rails ܳ ࢎਊೞৈ ਢ ѐߊ੗ ழܻযܳ द੘
46. 46.

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

47. 47.

    যڌѱ ӝৈೞחо? • ೐۽ં౟ ഘࠁ • ޙࢲചী ӝৈ • ղо

    ೐۽ં౟ ࢎਊߨਸ ؊ ੜ ঌҊ ੓׮ݶ, ঌ۰઱ӝ • ૒੽ ௏٘۽ ӝৈ
48. 48.

    ೐۽ં౟ ഘࠁ • ࠶۽Ӓ ನझ౴ • ߊ಴ • ৔࢚ ݒ୓(Youtube,

    Vimeo, Twitch ١)
49. 49.

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

    ੉ग, README ١) • ӝઓ੄ ޙࢲܳ ೠӖ۽ ߣ৉ • ޖઑѤ ࡐযդ ࣻળ੄ ߣ৉ਸ ೡ ೙ਃо হणפ׮
50. 50.

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

    • ଻౴ߑীࢲ ؀׹೧ ઱ӝ • Github Issue ١ীࢲ ޙઁ ೧Ѿਸ ذӝ • (٘ޛ૑݅) ૟ ೐۽Ӓې߁ ೧ ࠁӝ
51. 51.

    GatsbyJS ੄ ৘

52. 52.

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

53. 53.

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

    োҙ੉ ੓ח ೐۽ં౟ • ղо ҙबਸ о૑Ҋ ੓ח ࠙ঠ੄ ೐۽ં౟ • ղо ੤޷੓׮Ҋ וՙח ೐۽ં౟
54. 54.

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

55. 55.

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

    ࣻ ੓਺ • ੗न੉ ࢸ੿ೠ ழܻয ҃۽ী ب਑੉ ؼ ࣻ ੓਺ • োҙ੉ হ׮ݶ য۵Ѣա ൜޷ܳ ੏ӝ ए਑
56. 56.

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

    • ஂೱী ݏח ਺ঈਸ ٛѢա ଼ਸ ੍٠੉ ੽Ӕ • ҙब੉ হחؘ ೧ঠ ೞח ҃਋ۄݶ
 ੗ߊ੸ੋ ଵৈо ইצ ҃਋ੌ ࣻب...(ഥࢎ ١)
57. 57.

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

    ௏٘ ೠ ઴, ௏ݭ౟ ೞա݃׮ ߓ਋Ҋ ੓׮ח ו՝੉ ٚ׮ • ࢚࢚ೡ ࣻ ੓ח ୭Ҋ ࣻળ੄ ઑ߹җઁۄ ࢤп೧ ࠁࣁਃ
58. 58.

    1. যڌѱ द੘೮ա?

59. 59.

    • README.md • CONTRIBUTE.md • Wiki • Chatrooms (Spectrum, Gitter,

    IRC)
60. 60.

    ੉गܳ ৌযࠇद׮

61. 61.

    'good first issue' ݅ ୶ܽ ৘

62. 62.

    Ӓېب ݄࢚ ೧ ࠁ۰פ... • Vanila JS ೐۽ં౟ী׮ (աח ఋੑ

    হਵݶ ࠛউೠؘ) • ESLint ࢸ੿ب হҊ (যו ౣী ݏ୾ ௏٘ܳ ૞ঠೞա) • Prettier ࢸ੿ب হҊ
 (ਃ࢜ח ੉ 3о૑ হਵݶ ೐۽ં౟ द੘ উೞחؘ)
63. 63.

    ૒੽ ݫੌਸ ॄ ࠌणפ׮

64. 64.

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

65. 65.

    “ੌױ ۽ஸ ѐߊ ജ҃੉ ੜ جইр׮ݶ, ௏٘ ࠙ࢳਸ ೞח о੢

    ࡅܲ ߑߨ਷ ੉Ѫ੷Ѫ ۽ஸীࢲ Ѥ٘۰ࠁח Ѫ੉׮.”
66. 66.

    ݄ ੉ۧѱ ࠙ࢳਸ ೮חؘ

67. 67.

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

68. 68.

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

69. 69.

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

70. 70.

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

71. 71.

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

72. 72.

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

73. 73.

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

74. 74.

    पઁ Puppeteer ۽ ੘ࢿ೮؍ పझ౟

75. 75.

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

76. 76.

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

77. 77.

    3. ੸ӓ੸ਵ۽ ࣗాೞ੗

78. 78.

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

79. 79.

    ૕ޙ ੜ ೞח ߨ 1. غחؘө૑ दب೧ ࠄ׮ 2. Ѩ࢝೧ࠅ

    ࣻ ੓חؘө૑ Ѩ࢝೧ࠄ׮ 3. दب, Ѩ࢝੄ җ੿ ݽف ӝ۾ೠ׮ 4. Ӓ ݽٚ ղਊਸ ઙ೤ೞৈ ૕ޙೠ׮ (ଵҊ ݂௼)
80. 80.

    "XXܳ ೞ۰חؘ YYө૑ ೧ ࠌ૑݅ ZZө૑߆ী ౵ঈೞ૑ ޅ೮णפ׮. ৈӝө૑ ઁо

    दب೧ ࠌחؘ যڌѱ ೞݶ જਸөਃ?"
81. 81.

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

82. 82.

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

83. 83.

    ߊ಴ ੿ܻ

84. 84.

    VisBug ࣗѐ • ਢ ஹನք౟ ӝ߈ਵ۽ ੉ܖয૓ ೐۽ં౟ • ਢಕ੉૑ী

    ׮নೠ ઑ੘ਸ оೞҊ प೷೧ ࠅ ࣻ ੓਺ • (৔য) ઁ੘੗৬ ೣԋೞח ࢎਊߨ ৔࢚
85. 85.

    VisBugী ӝৈೞݴ (؊) ߓ਍ Ѫ • աח ৵ য়೑ࣗझী ӝৈೞחо

    / যڌѱ ӝৈೡ ࣻ ੓חо • যڃ ೐۽ં౟ܳ ࠁݶ ੤޷੓ѱ ӝৈೡ ࣻ ੓ਸө? • ੍ח ௏٘ ࠙ࢳী दрਸ ॔૑ ݈Ҋ, ૒੽ Ѥ٘۰ࠁ੗ • పझ౟ܳ ੘ࢿ೧ࠁ੗ • ੜ ੿ܻೞৈ ݒց੓ѱ ࣗాೞ੗
86. 86.

    хࢎ೤פ׮