청년교사 모집 시즌비시즌
👤 Youngrong Oh
교회 고등부에서 20살이 된 청년들을 대상으로 교사를 모집하기 위해 제작한 설문 앱
2020.12.14 - 2021.1.7
- 2020년 코로나 바이러스로 인한 비대면 상황에서 구글 폼과 같은 딱딱한 설문으로 흥미를 끌기 어렵다고 판단했음
- 비(정지훈)의 유튜브 채널 및 신곡 발표로 인기를 끌던 시기였으며, 일명 '미연시' 게임 형식에서 아이디어를 얻어 20살의 흥미를 끌만한 폼을 제작하기로 결정함
- 이틀이라는 짧은 기한 내에 기본적인 기능 구현부터 배포까지 완료
- 리액트가 익숙하지 않아 애니메이션, 트랜지션을 계획 만큼 구현하지 못했음
- 평소 관계가 있는 10명 남짓한 소규모 집단을 대상으로 하여 문제는 없었으나 개인정보 활용 동의를 명시하지 못함
- 재치 있는 대사를 생각하지 못해 아쉬움
- 인트로 동영상이 localhost에서는 잘 나왔으나 배포 후에 로딩 시간이 너무 길어지는 문제 발생하였음
- netlify에 기본제공 서버의 속도가 localhost 만큼 나오지 않아 생기는 문제
- 영상 사이즈와 색상을 줄여 용량을 줄여서 해결
- 단번의 통신만을 필요로 하는 폼 제출에는 구글 시트를 데이터 베이스로 손쉽게 활용할 수 있음
- 배포 서버
- React: UI 표시 및 인터렉션
- JS 비즈니스 로직: React로부터 작성된 폼 데이터를 전달 받아 데이터 베이스에 http 요청을 보냄
- json 정적 데이터: React에 전달될 scene, script 데이터
- 데이터베이스
- Google Sheets: 데이터 저장
- AppsScript: POST 요청을 리스닝, 배포 서버로부터 받은 데이터를 처리하여 지정된 Google Sheets 문서에 저장하는 작업을 자동화
-
동일한 입력 컴포넌트를 재사용
-
컴포넌트가 언마운트 되어도 입력 받은 데이터 소실되지 않음
-
입력 타입별로 유효성 검사
- 이름: 한글 자음만 입력하면 제출 버튼 표시 안 함, 영문 및 숫자 입력 불가
- 생일: 2002년 1월 - 2003년 2월까지만 입력 가능
- 연락처: 숫자 외에 입력 불가
- 빈 값을 제출하면 경고 메시지 표시
- 이름: 한글 자음만 입력하면 제출 버튼 표시 안 함, 영문 및 숫자 입력 불가
-
이름 입력
-
생일 입력
-
연락처 입력
- json으로 저장해놓은 대사 데이터와 사용자로부터 입력받은 이름을 합쳐 동적으로 데이터 만들어 표시
- FormData 오브젝트에 입력 데이터를 모아뒀다가 마지막 scene이 끝나면 구글 시트에 POST 요청
-
타이틀 화면에서 아무곳이나 터치 or 클릭하면 인트로 영상이 전체화면으로 표시
-
인트로 영상이 끝나거나, 전체화면이 해제되면 첫 scene으로 자동 전환
-
타이틀 화면
-
인트로 영상
- pc
- 태블릿
- 모바일
 |
 |
|---|---|
| Latest | Latest |