긱블 에듀

요약

"긱블"의 교육 사업을 위해 자체 사이트를 론칭 하였으며, MVP 버전 개발 후 재개발이 이루어졌습니다.

주요 기능

• 클래스 / 캠프 조회
• 클래스 / 캠프 예약
• 결제
• 알림톡 발송
• 신청폼 등록 및 작성

MVP 버전

긱블 에듀는 긱블의 클래스와 캠프 그리고 자체 제작 키트를 판매하는 채널로 만들어졌습니다.

빠르게 MVP를 만들어서 빠른 시일 내에 배포하는 것을 목표로 하였고, 6월 개발 7월 중 런칭을 목표로 개발하였습니다.

캠프와 원데이클래스, 키트를 소개하고 판매하는 페이지들이 있었으며, 기능들은 매우 단순하였습니다.

MVP 버전으로 중요하지 않은 페이지들은 Notion Client를 사용하여 일부 구현하였습니다.

PG 사는 KG 이니시스를 사용하여 결제를 연동 하였고, Nice의 본인인증 SDK를 사용하였습니다.

컴포넌트 관리를 위해 storybook을 도입 하였고, GCP를 사용하여 배포하였습니다.

리뉴얼

이후 이를 디벨롭하는 스프린트 과정을 거쳤으며, MVP 버전을 벗어난 1.0 버전으로 리뉴얼되었습니다.

리뉴얼 과정에서는 GA를 통해 사용자의 90% 이상이 모바일 기기로 접속하는 것을 확인하여 기존 PC 친화적인 UI가 아닌 모바일 위주의 디자인을 적용하기로 했습니다.

기존 프로젝트와 디자인이 매우 많이 바뀌었기 때문에 프론트엔드 코드는 API 부분을 제외하고 완전히 새로 개발하였습니다.

기존 storybook 컴포넌트를 재사용하지는 않고 새로운 컴포넌트들을 만들어냈습니다.

회사 차원에서 키트를 더이상 적극적으로 판매하지 않는 방향으로 결정되면서 데이터의 구조가 많이 바뀌게 되었습니다.

이에 테이블을 별도로 생성하여 마이그레이션을 진행했고, 결제 내역또한 마이그레이션을 해야 했습니다. 이는 별도의 스크립트를 작성하여 SQL 업데이트 형식을 취했습니다.

캠프는 내부 선발, 선착순의 2가지 방법으로 이뤄지는데, 이를 방법 별로 구성하여 다른 결제 로직을 구현해야 했습니다.

예약 내역의 payment 관련 테이블은 nullable하게 구성하였고, 상품은 도메인 형태로 예약의 형식을 지정했습니다.

프론트엔드에서는 해당 타입에 따라 다른 페이지 이동을 구현했습니다.

캠프를 신청하게 되면 지원서를 작성해야 합니다.

지원서는 백오피스에서 각 캠프마다 다르게 지정하여 삽입할 수 있습니다.

이를 구현하기 위해 질문의 형태는 DB에는 Json array 형태로 지정하는 것이 추가 하기 편리하다고 생각 되었습니다.

이메일, 소유인증 가능한 휴대폰 입력, n지 선다 등의 타입을 Typescript interface 형태로 지정하고 새로운 타입이 추가 되더라도 DB의 수정은 하지 않고 인터페이스에서만 변경하면 되게 하였습니다.

휴대폰 인증은 Redis 서버를 사용하여 인증번호를 저장하여 인증하는 방식을 사용하였습니다.

지원서를 마감 기간까지 입력하지 않으면 캠프를 진행할 수 없는 문제가 있었습니다.

200명의 지원자를 매일 작성 여부를 확인하여 일일이 작성해달라고는 할 수 없었습니다.

그에 대한 대책으로 예약 완료 후 1시간 후, 하루 후 그리고 마감일 1, 3, 5일 전에 사용자에게 알림톡을 발송하는 것을 구상하였습니다.

이를 수행하기 위해 지원서를 작성하지 않은 사용자의 휴대폰에 알림을 발송하는 별도의 express 서버를 구성하여 배포하였습니다.

이는 GCP Cloud Scheduler를 사용하여 특정 시간에 작동하게 설정했습니다.

지원서 이외에 캠프에 참여하기 위한 몇 가지 동의서도 필요했는데, 동의서를 압축해서 다운받은 로직을 작성하여 기존 nest.js 에 통합하려고 했습니다. 그러나 GCP App engine은 하나의 인스턴스에서 사용할 수 있는 메모리에 제한이 있었고, 메모리가 일정 기준 초과하면 재시작되는 모습을 보였습니다.

관리형 서비스에서 제한을 걸어둔 것이었습니다. 따라서 이를 수행할 수 있는 마이크로 서비스를 하나 더 만들어 비관리형 서비스인 Compute Engine에 배포하는 방법을 사용하였습니다.

기술 스택:

• Next.js
• Typescript
• React query
• Scss
• Storybook
• Nest.js
• Typeorm
• Postgresql
• GCP App Engine
• GCP Cloud Storage

팀 구성

• 기획: 3명
• 디자인: 1명
• 프론트 / 백엔드: 1명