vroomfan

온라인 강의 플랫폼인 inflearn에 자체 제작한 Next.js 강의를 올리고 지식공유자로 활동했습니다.

URL: https://www.inflearn.com/course/nextjs-시작-지도서비스

제작 기간: 6주(강의 준비 3주, 촬영 2주, 편집 1주)

기여도: 100%

기술 스택

Next.js, OBS, Premiere Pro

기획 과정

• 당시 인프런을 비롯한 온라인 강의 플랫폼에 Next.js 강의가 거의 없다는 것을 파악했습니다.
• 2022년까지 쌓인 Next.js와 naver maps API 사용 경험을 바탕으로, 주니어 개발자분들께 지도 서비스를 어떻게 만드는지 알려드리고 싶었습니다.
• 다른 프론트엔드 강의들의 Q&A과 수강평을 살펴보며 강의의 수준과 흐름을 구성했습니다.
• 쉽고 명료하게 설명하기 위해 Next.js 공식 문서와 소스 코드를 기준으로 강의를 기획했고, 불필요한 라이브러리의 사용은 지양했습니다.

작업 내용

• 강의 구성

  • Next.js 기본 API

    • Next.js의 기본 API를 설명하고, 각 API의 사용법을 실습을 통해 익히도록 했습니다.
    • 공식 문서 및 Next.js 소스 코드를 읽어보면서 작동 방식이 이해되도록 설명했습니다.
    • next/link, next/script, next/image 등의 API를 설명했습니다.
    • getStaticProps, getServerSideProps의 작동 방식을 설명했습니다.

  • naver maps API

    • naver maps api를 사용해 지도 서비스를 만드는 방법을 설명했습니다.
    • 지정된 좌표에 원하는 모양의 마커를 그리고 이벤트를 추가하는 방법을 설명했습니다.

  • Vercel 배포

    • 배포 전 웹 성능과 웹 접근성을 검사하고 문제를 개선하는 방법을 설명했습니다.
    • Vercel을 통해 사이트를 배포하는 방법을 설명했습니다.

• 강의 촬영

  • 강의를 촬영하기 위해 OBS를 배우고 사용했습니다.
  • 강의를 촬영하면서 흐름이 어색한 부분은 내용을 수정하고, 흐름을 재구성했습니다.

• 강의 편집

  • Premiere Pro로 컷 편집을 했습니다.
  • 수강생분들의 편의를 위해 직접 자막을 넣었습니다.

평가

• 내용이 알차다는 평가와 질문에 대한 답변이 상세하다는 평가를 받았습니다. 강의를 수강하기 위해 결제를 해주신 분들이기 때문에, 더욱 책임감을 가지고 모든 질문에 성심성의껏 답변드리기 위해 노력했습니다.
• 강의 내용에 비해 오디오가 어색하다는 평가를 받았습니다. 또다시 촬영을 하게 된다면 어떻게 개선할 수 있을지 고민해보는 계기가 되었습니다.