나는 Browser Extension 코스를 만드는 데 주말이면 충분할 거라 생각했다. 그런데 4개월이 걸렸다.

I’m happy to translate the article for you, but I don’t have access to the full text of the post from the link you provided. Could you please paste the content you’d like translated (excluding any code blocks or URLs you want to keep unchanged)? Once I have the text, I’ll translate it into Korean while preserving the original formatting and markdown.

소개

나는 “짧은 비디오 코스”를 만드는 데 주말만 걸릴 거라고 생각했다.
무슨 일이 일어났는지, 무엇을 배웠는지, 그리고 왜 내가 실제로 상황이 통제 불능으로 번진 것이 기쁜지 알려드리겠다.

지난 11월, 나는 React Summit US에서 React로 브라우저 확장 프로그램을 만드는 것에 대해 발표했다 (여기서 시청). 발표를 준비하면서 교육 자료가 거의 없다는 것을 알게 되었고, 완전 초보자를 위한 전체 코스는 말할 것도 없었다. 나는 사이드 프로젝트로 하나를 만들기로 결심했고, *“주말 동안 몇 개의 짧은 비디오를 녹화하고, 기본을 다루고, 공개하면 끝”*이라고 생각했다.

그 주말 프로젝트는 14개의 포괄적인 레슨과 4개월 간의 작업으로 변했다.

기대했던 것 vs. 실제로 어려웠던 것

어려울 것이라고 생각했던 것

• 비디오 촬영, 카메라 앞에서 말하기
• 기술 개념 설명

실제로 어려웠던 것

• 처음에는 촬영이 힘들었지만, 좋은 배경과 기본 조명이 도움이 됐음 (이웃이 중간에 청소기를 돌리기 전까지).
• 14개의 레슨을 논리적으로 서로 연결되게 구성하기.
• 비디오용 스크립트 작성 (컨퍼런스에서 발표하는 것 ≠ 카메라 앞에서 가르치는 것).
• 편집 (내 DaVinci Resolve 실력이 확실히 향상됨 😅).
• 포함할 내용과 제외할 내용 결정하기.
• 모든 것을 테스트하여 따라 하는 사람이 문제 없이 진행할 수 있게 하기.

Course Overview

이 코스는 TabNotes라는 실제 메모 확장 프로그램을 만들면서 브라우저 확장 개발을 가르칩니다. 이는 다음과 같은 특징을 갖춘 프로덕션 수준의 확장 프로그램입니다:

• 기기 간 데이터 동기화
• Chrome과 Firefox 모두에서 작동
• WXT 프레임워크를 활용한 최신 아키텍처 적용
• 두 확장 스토어에 모두 배포

Topics Covered

• Manifest V3 설정
• 팝업 인터페이스와 백그라운드 스크립트
• 스토리지 API 및 기기 간 동기화
• 콘텐츠 스크립트와 메시징
• 크로스 브라우저 호환성
• 두 스토어에 대한 배포

자료는 기술적인 내용이지만 가능한 한 명확하게 개념을 설명하려고 노력했습니다. 첫 번째 브라우저 확장 프로그램을 만들고 다양한 함정들을 이해하고자 하는 모든 사람을 대상으로 합니다.

Process & Lessons Learned

Planning

• Outline first – I mapped out all 14 lessons before recording anything. This kept the course coherent and ensured each lesson built logically on the previous one.
• No pre‑written script – My outline was super detailed, so I could speak naturally.

Development

• Build the extension first – I completed the TabNotes extension before recording, so I knew exactly what I was teaching and could walk through each step without surprises.

Production

• Batch tasks – I grouped similar work together: wrote all scripts, then recorded all videos, then edited everything. This flow saved weeks of context‑switching.
• Mirror trick – Recorded with my iPhone while a mirror in front of me gave visual feedback, helping me catch awkward moments and maintain better energy.
• Accept “good enough” – Perfectionism cost time. Shipping early, getting feedback, and iterating is more effective.
• Invest in audio – My iPhone’s built‑in mic works, but external mics make a huge difference.
• Shorter recording sessions – Breaking recordings into smaller chunks kept my energy consistent and made editing easier.

Teaching Insights

• Teaching forces deep understanding – Explaining concepts exposed gaps in my own knowledge, prompting deeper dives into Chrome and Firefox docs.
• Provide context, not just code – Early lessons focused on “how,” but later ones added “why” and “when not to.” Context matters.
• Embrace mistakes – Showing debugging and errors turned out to be valuable lessons for students.
• Video editing is time‑consuming – Removing “ums,” cutting, adjusting audio levels, and adding captions gave me new respect for YouTubers.

교육 콘텐츠 제작을 위한 조언

• 긴 일정 예상 – 시간 추정치를 3배로 곱한 뒤 다시 50 %를 추가하세요.
• 가르치면서 배우기 – 가르치는 것은 명확성을 요구합니다; 완전히 이해하지 못한 개념을 대충 넘길 수 없습니다.
• 준비가 되었다고 느끼기 전에 시작하기 – 완벽함은 완성을 방해합니다.
• 먼저 무료로 만들기 – 무료 강좌는 가격을 정당화하려는 압박을 없애고 진정한 가치 제공에 집중하게 합니다.

코스 링크

4개월 후, 코스가 공개되었습니다: webextensiontutorial.com

• 14개의 강의, 모두 무료, 모두 YouTube에 있습니다
• 처음부터 완전한 확장 프로그램을 만들고 두 스토어에 모두 배포하세요

결론

그럴 가치가 있었나요? 물론입니다. 시간 투자는 많이 들었지만, 저는 그 과정을 즐겼습니다. 이전에 해보지 않았던 무언가를 만들기 위해 스스로를 밀어붙인 것이 바로 그 점이죠, 맞나요?

브라우저 확장 프로그램에 관심이 있다면 확인해 보세요. 그리고 직접 교육 콘텐츠를 만든 경험이 있다면, 과정에서 가장 놀라웠던 점을 알려주시면 좋겠습니다.