상세 설명
1만 구독자 이벤트를 어떻게 운영할지, 직접 웹앱으로 설계하고 구현하는 과정을 담았습니다. Pencil로 디자인 가이드를 잡고, Next.js와 Firebase로 참가 신청, 이미지 업로드, 추첨 구조까지 연결해봅니다. 이벤트 안내와 실전 빌드 과정을 한 번에 보고 싶은 분들께 추천드립니다. 이벤트 신청 페이지 : https://gdrb-book-event.web.app 타임라인 0:00 1만 구독자 이벤트 소개 0:36 도서 구매자 한정 이벤트 진행 방식 설명 1:28 구매 이력 캡처 제출과 랜덤 추첨 안내 2:53 리뷰 캡처도 함께 제출해야 하는 이유 5:08 구매 인증/리뷰 인증을 받는 웹앱 제작 방향 설명 6:12 Pencil로 디자인 가이드 문서 작업 시작 8:00 디자인 시스템 구조와 변수 활용 방향 정리 10:19 레퍼런스를 참고해 디자인 컨셉 수정 12:00 입력 폼, 상태 메시지, 추첨 화면 등 화면 요소 보강 14:52 Next.js 기반으로 이벤트 페이지 개발 시작 15:25 로그인, 스크린샷 업로드, 주소 입력 등 핵심 기능 정리 17:44 Firebase 기반 인증/저장 구조 결정 19:39 로컬 실행 후 동작 점검 20:27 Firebase 콘솔 설정과 Google 로그인 테스트 46:59 오류 수정 후 참가 완료 플로우 확인 48:33 마무리 및 이벤트 참여 안내 오늘 다룬 내용 - 1만 구독자 기념 도서 이벤트 운영 방식 - 구매 인증과 리뷰 인증을 받는 제출 프로세스 - Pencil로 디자인 시스템과 UI 초안 잡는 방법 - Next.js로 이벤트 페이지 구조를 빠르게 만드는 흐름 - Firebase Auth, Storage, Firestore를 활용한 구현 방향 - Google 로그인과 이미지 업로드 테스트 과정 - 실제 배포와 테스트에서 겪는 시행착오와 수정 포인트 - 참가 완료 후 관리자 측에서 추첨까지 이어지는 구조 #유튜브설명란 #1만구독자이벤트 #도서이벤트 #웹앱제작 #Pencil #Nextjs #Firebase #GoogleLogin #Firestore #FirebaseStorage #UI디자인 #디자인시스템 #개발브이로그 #AI활용 [고정댓글] 1만 구독자 이벤트를 어떻게 운영할지, 직접 웹앱으로 설계하고 구현하는 과정을 담았습니다. Pencil로 디자인 가이드를 잡고, Next.js와 Firebase로 참가 신청, 이미지 업로드, 추첨 구조까지 연결해봅니다. 이벤트 안내와 실전 빌드 과정을 한 번에 보고 싶은 분들께 추천드립니다. 이벤트 신청 페이지 : https://gdrb-book-event.web.app 타임라인 0:00 1만 구독자 이벤트 소개 0:36 도서 구매자 한정 이벤트 진행 방식 설명 1:28 구매 이력 캡처 제출과 랜덤 추첨 안내 2:53 리뷰 캡처도 함께 제출해야 하는 이유 5:08 구매 인증/리뷰 인증을 받는 웹앱 제작 방향 설명 6:12 Pencil로 디자인 가이드 문서 작업 시작 8:00 디자인 시스템 구조와 변수 활용 방향 정리 10:19 레퍼런스를 참고해 디자인 컨셉 수정 12:00 입력 폼, 상태 메시지, 추첨 화면 등 화면 요소 보강 14:52 Next.js 기반으로 이벤트 페이지 개발 시작 15:25 로그인, 스크린샷 업로드, 주소 입력 등 핵심 기능 정리 17:44 Firebase 기반 인증/저장 구조 결정 19:39 로컬 실행 후 동작 점검 20:27 Firebase 콘솔 설정과 Google 로그인 테스트 46:59 오류 수정 후 참가 완료 플로우 확인 48:33 마무리 및 이벤트 참여 안내
* 본 이벤트는 원본 채널에서 직접 주관하며, 유벤트는 정보 제공만을 목적으로 합니다.
![[이벤트] 1만 구독자 달성(예정) 이벤트!인척 하는 이벤트 페이지 만들기 강의 영상](https://i.ytimg.com/vi/vlO7eJ3xvhs/hq720.jpg?sqp=-oaymwEcCNAFEJQDSFXyq4qpAw4IARUAAIhCGAFwAcABBg==&rs=AOn4CLAI-a418jpCyfA6kZAoiVpCN7CMlA)