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

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

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

Transcript

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

   View Slide

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

   ೐ۿ౟ূ٘ ѐߊ
   
   • ܻঘ౟݅ ׮ܘ૑ ݻ ֙ ؽ
   
   • য়೑ࣗझ ௏٘ ੍যࠁӝ જইೣ
   
   • زܐ ݽ૘ ઺
   

   View Slide

3. ProtoPie
   

   View Slide

4. ProtoPie Cloud
   

   View Slide

5. য়ט੄ ߊ಴ ղਊ
   1. VisBug ࣗѐ ߂ ഝਊ ߑߨ ҕਬ
   
   2. য়೑ࣗझ ࢤక҅ী ӝৈ೧ࠁҊ೑ ٜ࠙ਸ ਤ೧

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

   View Slide

6. VisBugо ޤભ?
   Firebug for designers
   
   ݽٚ ਢ ಕ੉૑ܳ ׼न੄ ই౟ࠁ٘୊ۢ ٜ݅যࠁࣁਃ
   

   View Slide

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

   2018֙ Chrome Dev Summitীࢲ ߊ಴
   
   • ੉੹ ਢ ࣁ؀੄ ੹ࢸ੸ੋ ѐߊ੗ بҳ

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

   View Slide

8. View Slide

9. VisBugо ޤભ?
   • അ੤ ௼܁ ഛ੢ਵ۽݅ ҕѐغয ੓ਵݴ
   
   • Firefox ഛ੢ ߂ npm ಁః૑۽ য٣ٚ૑ оઉ׮ ॶ ࣻ ੓ח
   ӝמ੉ ୶о ৘੿(੉૑݅ য়ې Ѧܻח ઺)
   
   • ઱ػ ࢎਊ ؀࢚਷ ਢ ٣੗੉ց৬ ਢ ѐߊ੗
   

   View Slide

10. VisBug੄ ӝࣿ੸ ҳࢿ
    

    View Slide

11. ਢ ஹನք౟
    

    View Slide

12. View Slide

13. Custom Element
    • HTMLਸ ഛ੢ೞৈ Ҋਬ੄ కӒܳ
    ٜ݅ ࣻ ੓਺
    
    • ۄ੉೐ࢎ੉௿ب ੓਺
    
    • ࣘࢿ ߸ച х૑ ١
    Shadow DOM
    
    • ৃܻݢ౟੄ झఋੌҗ ݃௼সਸ

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

    View Slide

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

    View Slide

15. View Slide

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

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

    View Slide

17. Constructable Stylesheet
    

    View Slide

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

    View Slide

19. Puppeteer ࢎਊ ৘
    

    View Slide

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

    View Slide

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

    View Slide

22. VisBug੄ ӝמ ࣗѐ
    • Guide
    
    • Inspect
    
    • Accessibility
    
    • Move
    
    • Margin / Padding
    
    • Flexbox align
    
    • Hue shift
    
    • Shadow
    
    • ...
    

    View Slide

23. View Slide

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

    View Slide

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

    = ఃࠁ٘ ઺ঔীࢲ ࣚ੉ ߹۽ ځա૑ ঋח׮.
    
    • ઁ੘ द زܐ ٣੗੉ցٜҗ ࣗాೞݴ

    ੗઱ ࢎਊغח ױ୷ః ࢎਊ ൒ܴਸ ౵ঈೞৈ ੸ਊ
    
    • Enter / Shift + Enter,

    Tab / Shift + Tab ١
    

    View Slide

26. Guides
    

    View Slide

27. View Slide

28. Inspect
    

    View Slide

29. View Slide

30. Accessibility
    

    View Slide

31. View Slide

32. Move
    

    View Slide

33. View Slide

34. Margin / Padding
    

    View Slide

35. View Slide

36. যڌѱ ഝਊೞҊ ੓חо?
    • ѐߊ੗۽ࢲ য૑рೠ ӝמ਷ DevToolਸ ৌয ೧Ѿೡ ࣻ ੓
    ח Ѫٜ੉૑݅, ചݶ ևѱ ॳҊ रਸ ٸب ਬਊ
    
    • ౠ൤ о੉٘ ӝמ ৮ࣗ
    
    • ٣੗੉ց, QA ূ૑פযীѱ ঌ۰઱Ҋ ഈসೡ ٸ

    ׮নೠ ߑधਵ۽ ഝਊ
    
    • ٣੗੉ց ٜ࠙੉ۄݶ

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

    View Slide

37. VisBugী ӝৈೞӝ
    

    View Slide

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

    ৃܻݢ౟ী ૒੽ style ࣘࢿਸ

    ߸҃ೠ ҃਋ ߹ب۽ ಴द
    
    • ੽Ӕࢿ بҳо

    ࠛ೙ਃೞѱ SVG ਃࣗ੄

    ੽Ӕࢿ ਃࣗܳ Ѩࢎೞ૑ ঋب
    ۾ ೣ
    
    • ׮ܲ ੉ग ૓೯ ઺
    

    View Slide

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

    View Slide

40. Why?
    

    View Slide

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

    View Slide

42. ة੼ ࣗझۄݶ?
    • ౵੉ܳ ࣗ࠺ೡ ࣻ ߆ী হ׮
    
    • ڪযդ ޷пਵ۽ ౵੉੄ ۨदೖܳ ૒੽ ঌইմ׮ ೧ب

    (ܻߡझ ূ૑פয݂)
    
    • ౵੉ܳ ݅ٚ ࢎۈҗ ߨ੸ ࠙੬੉ ൃ݈ܻѱ ؼ ࣻ ੓׮

    (ۄ੉ࣃझী ٮۄ)
    

    View Slide

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

    View Slide

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

    View Slide

45. ੷੄ ৘ܳ ٜ੗ݶ
    • য়೑ ࣗझ۽ ҕѐػ ঱যੋ ܖ࠺৬
    
    • ܖ࠺۽ ٜ݅য૓ য়೑ ࣗझ ਢ ೐ۨ੐ਕ௼ੋ

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

    View Slide

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

    View Slide

47. যڌѱ ӝৈೞחо?
    • ೐۽ં౟ ഘࠁ
    
    • ޙࢲചী ӝৈ
    
    • ղо ೐۽ં౟ ࢎਊߨਸ ؊ ੜ ঌҊ ੓׮ݶ, ঌ۰઱ӝ
    
    • ૒੽ ௏٘۽ ӝৈ
    

    View Slide

48. ೐۽ં౟ ഘࠁ
    • ࠶۽Ӓ ನझ౴
    
    • ߊ಴
    
    • ৔࢚ ݒ୓(Youtube, Vimeo, Twitch ١)
    

    View Slide

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

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

    View Slide

50. ೐۽ં౟ܳ ؊ ੜ ঌҊ ੓׮ݶ
    • Stack Overflow ׹߸ ׳ӝ
    
    • ଻౴ߑীࢲ ؀׹೧ ઱ӝ
    
    • Github Issue ١ীࢲ ޙઁ ೧Ѿਸ ذӝ
    
    • (٘ޛ૑݅) ૟ ೐۽Ӓې߁ ೧ ࠁӝ
    

    View Slide

51. GatsbyJS ੄ ৘
    

    View Slide

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

    View Slide

53. যڃ ೐۽ં౟ী ӝৈܳ ೧ ࠅө?
    • ղо ೞҊ ੓ח ੌҗ োҙ੉ ੓ח ೐۽ં౟
    
    • ղо ҙबਸ о૑Ҋ ੓ח ࠙ঠ੄ ೐۽ં౟
    
    • ղо ੤޷੓׮Ҋ וՙח ೐۽ં౟
    

    View Slide

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

    View Slide

55. ղо ೞҊ ੓ח ੌҗ োҙ੉ ੓׮ݶ
    • पޖী ߄۽ ॄݡਸ ࣻ ੓਺
    
    • ੗न੉ ࢸ੿ೠ ழܻয ҃۽ী ب਑੉ ؼ ࣻ ੓਺
    
    • োҙ੉ হ׮ݶ য۵Ѣա ൜޷ܳ ੏ӝ ए਑
    

    View Slide

56. ղо ҙब ੓ח ࠙ঠۄݶ
    • ൜޷ܳ Ҋஂदఃӝ ই઱ જ਷ ਬഋ
    
    • ஂೱী ݏח ਺ঈਸ ٛѢա ଼ਸ ੍٠੉ ੽Ӕ
    
    • ҙब੉ হחؘ ೧ঠ ೞח ҃਋ۄݶ

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

    View Slide

57. ղо ੤޷ܳ ו՛׮ݶ
    • ೣԋ ೞח Ѫ੉ ૌѢ਍ ழޭפ౭
    
    • ௏٘ ೠ ઴, ௏ݭ౟ ೞա݃׮ ߓ਋Ҋ ੓׮ח ו՝੉ ٚ׮
    
    • ࢚࢚ೡ ࣻ ੓ח ୭Ҋ ࣻળ੄ ઑ߹җઁۄ ࢤп೧ ࠁࣁਃ
    

    View Slide

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

    View Slide

59. • README.md
    
    • CONTRIBUTE.md
    
    • Wiki
    
    • Chatrooms (Spectrum, Gitter, IRC)
    

    View Slide

60. ੉गܳ ৌযࠇद׮
    

    View Slide

61. 'good first issue' ݅ ୶ܽ ৘
    

    View Slide

62. Ӓېب ݄࢚ ೧ ࠁ۰פ...
    • Vanila JS ೐۽ં౟ী׮ (աח ఋੑ হਵݶ ࠛউೠؘ)
    
    • ESLint ࢸ੿ب হҊ (যו ౣী ݏ୾ ௏٘ܳ ૞ঠೞա)
    
    • Prettier ࢸ੿ب হҊ

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

83. ߊ಴ ੿ܻ
    

    View Slide

84. VisBug ࣗѐ
    • ਢ ஹನք౟ ӝ߈ਵ۽ ੉ܖয૓ ೐۽ં౟
    
    • ਢಕ੉૑ী ׮নೠ ઑ੘ਸ оೞҊ प೷೧ ࠅ ࣻ ੓਺
    
    • (৔য) ઁ੘੗৬ ೣԋೞח ࢎਊߨ ৔࢚
    

    View Slide

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

    View Slide

86. хࢎ೤פ׮
    

    View Slide