😀 자신과 팀소개를 부탁드립니다.

안녕하세요 스쿨메이트 팀 입니다!

풀스택 (프론트 전체 개발) : 김도현 (kim@dohyun.kr)

백엔드 : 김택준 (gdsygrt557422@gmail.com), 조용찬 (h3236516@gmail.com)

디자인 1명으로 구성된 스쿨메이트 팀은 가천대학교 게임·영상학과에서 프로젝트 수업으로 만들어진 팀 입니다.

🤗 프로덕트 소개좀 해주세요~

스쿨메이트는 중, 고등학생들만 이용할 수 있는 커뮤니티 앱 이에요.

■ 커뮤니티 기능으로 학교, 지역, 전체로 나누어저 다양한 학생들과 소통할 수 있어요.

■ 에스크를 이용해서 모르는 친구들과 공유하여 질문을 받고 답장할 수 있어요.

■ 대결 기능으로 인스타그램 팔로워 수, 리그오브레전드 티어 등을 이용하여 학교별로 순위를 확인할 수 있어요.

기술 스택은 Nodejs, Expressjs, Nextjs, Expo, React Native, PostgreSQL, Docker, NPM, Github Actions, Jenkins를 이용하여 만들어졌어요!

⁉ 프로덕트를 만들게 된 계기는 무엇인가요?

"중, 고등학생들이 본인의 학교를 인증하고 사용할 수 있는 플랫폼은 없을까?" 라는 생각으로 시작하게 된 커뮤니티 앱 프로젝트 입니다.

🤝 팀원분들은 어떻게 만나셨나요?

저희 팀원은 가천대학교 게임·영상학과 안에서 만들어진 팀으로 다른 학생들은 게임 엔진을 주로 다루는 친구들이라 웹/앱 개발하는 인원을 찾기 힘들었습니다.

하지만 몇몇 친구들이 게임 서버 개발자를 희망하고 있었기에 저희 팀이 만들어질 수 있었습니다.

😱 개발은 어떻게 진행이 됬나요?

기획

우선 저희는 중, 고등학생들이 같은 학교 학생이라는 확실한 인증 절차를 거치고 이용할 수 있는 커뮤니티가 있는지 찾아보았지만

저희가 구상하고 있는 서비스와 동일한 서비스는 찾지 못했습니다.

이를 통해서 저희는 중, 고등학생들이 인증 절차를 완료한 후 사용할 수 있는 커뮤니티를 기획했습니다.

1차 개발

저희의 주요 기능은 커뮤니티에 집중되어 있었기 때문에 커뮤니티 기능에 중점을 두고 데이터베이스 설계, 백엔드 설계, 프론트엔드 디자인을 했습니다.
하지만 "커뮤니티 기능으로는 충분히 다른 플랫폼이 많지 않은가?" 라는 생각에 커뮤니티 기능 말고

학생들의 참여를 유도할 기능이 뭐가 있을까라는 생각에 새로운 기능들을 생각해냈습니다.

여기에서 저희가 추가한 기능이 "에스크" 기능이었습니다.

에스크 기능은 학생들과 1 대 1로 서로 질문을 주고받으며 대화를 할 수 있는 기능입니다.
실제로 에스크는 중, 고등학생들이 많이 이용하였던 시절이 있어서 이 기능을 넣는다면 학생들의 이탈률을 줄이고 참여도를 높일 수 있을 거라고 생각했습니다

1차 출시 (2024년 1월 초)

처음 유저 확보를 위해 마케팅 방법을 생각했지만 "단순 커뮤니티 기능으로는 학생들이 과연 가입을 할까?",

"그리고 어떤 기능을 소개해서 마케팅을 하지?" 라는 생각이 들었습니다.

우선 앱스토어와, 플레이스토어를 출시를 하고 바로 2차 기획과 미케팅을 생각해 보았습니다.

2차 기획

여기에서 생각한 기능이 바로 "대결" 기능이었습니다.
학생들이 가장 좋아하는 경쟁심 요소를 넣어 참여도를 늘리는 생각이었습니다.

대결 기능은 인스타그램 OAuth를 이용하여 인스타그램 팔로워를 불러와 점수를 주고 학교별 학생들의 합산 점수를 이용하는 대결과
Riot OAuth에서 리그오브레전드 계정을 불러와 티어 별로 점수를 주는 대결 두 가지 방식을 추가하는 기획을 하였습니다.

2차 개발

가장 중요한 유저 인증 기능을 위해서 인스타그램, 라이엇 Oauth 연동을 하는 것이 첫 목표였습니다.

라이엇 Oauth를 사용하기 위해서는 우선 1차 승인을 받고 라이엇 RSO를 사용한다는 목적을 제출하고 Oauth 키를 받을 수 있었습니다.

인스타그램의 경우 개발을 완료한 후 심사를 받는 절차를 가지고 있어서 굉장히 까다로운 작업이었습니다.

2차 출시 및 마케팅

2차 개발에서 진행한 대결 부분을 강조해서 마케팅을 시작하기로 했습니다.

아래 사진처럼 학교별로 인스타그램 계정을 만들고 같은 학교 학생들을 팔로우를 해서 가입을 유도했습니다.

2차 마케팅 결과

위 내용을 바탕으로 인스타그램 계정을 만들어 팔로우 거는 식의 마케팅을 해본 결과 아래와 같이 마케팅을 할 때만 높은 유입이 있고 그 시간 이외에는 유입이 없었습니다.

마케팅 비용에 투자할 돈이 없어서 지속적으로 마케팅은 힘든 상황이긴합니다.

3차 개발

마케팅을 진행했지만 첫 가입 시에 학교 인증이라는 절차 때문에 높은 유저 이탈이 발생했습니다.
저희는 여기에서 인증 없이 커뮤니티 열람, 대결 순위 열람만 가능한 "인증 없이 시작하기" 기능을 추가하여 유저의 이탈을 막는 개발을 진행했습니다.
이를 통해서 저희는 지금까지 162명이라는 적지만 많은 숫자의 유저가 가입을 할 수 있었습니다.

👍 재미있었던 것은 무엇이었나요?

첫번째, 웹뷰 기반 앱으로 초기 로딩 속도 개선 작업

Nextjs에서 게시글 페이지 SSR 로딩을 ISR로 변경하고, 댓글 기능과 같이 자주 변동되는 컴포넌트를 CSR로 변경하여 초기 로딩 속도를 3초 -> 1.9초로 36% 개선을 하였습니다

두번째, 웹뷰에서의 키보드 입력으로 인한 Header 밀림 현상

키보드 입력이 필요한 페이지는 앱에서 따로 Scene을 만들어 "window.ReactNativeWebView.postMessage"를 이용하여 해당 Scene을 열고

"document.addEventListener("message", ()=>{})"로 입력된 데이터를 받는 방식으로 처리하였습니다.

세번째, Typescript의 타입 공유

프론트엔드, 벡엔드 둘 다 타입 스크립트를 사용했기 때문에 타입을 공유하는 것이 필수적이었는데요.
백엔드에서 Prisma를 사용하여 데이터베이스를 구성했기에 Github Action을 통하여 타입만 분리하여 npm에 타입 패키지를 배포하는 식으로 작업을 진행했습니다.

네번째, 업로드 이미지 최적화

커뮤니티 기능의 필수적인 기능인 이미지 업로드의 처리는 서버 비용을 아끼는데 중요한 역할을 하기에 최적화를 진행했습니다.
이미지 처리 로직은

이미지 업로드 → 저장한 이미지 S3 경로를 Lambda에 요청 → 이미지 리사이징 → 리사이징 이미지 S3 저장

→ 저장된 이미지 경로 서버로 리턴 → 이미지 데이터베이스 이미지 경로 수정
위와 같은 방식으로 이미지를 4MB → 900kb까지 줄여서 저장하였습니다.

👎 아쉽거나 어려웠던 점은 무엇이었나요?

첫번째, 저희 앱은 웹뷰 기반 앱이라 전체적인 페이지가 웹뷰 위에서 돌아가는 형식으로 작동을 합니다.

하지만 Header가 스크롤 시 따라 올라가는 현상이 발생했는데 RN에서 제공하는 Header를 사용하지 않고 화면 전체를 웹 뷰로 띄워 작동을 했더니 일어난 현상이었습니다.

이 때문에 몇몇 페이지들이 아직도 따라 올라가는 현상이 발생하는데 RN에서 제공하는 Header를 이용하는 방식으로 리팩토링 해야 하는 상황인데,

너무 많은 작업이 필요해서 아직까지 시도를 못 하고 있습니다.

아마 이번 계기를 통하여 다른 프로젝트에서는 무조건!! Header를 RN에서 자체 제공하는 방식으로 프로젝트를 진행할 거 같습니다.

두번째, 첫 커뮤니티 앱 프로젝트이다 보니 앱 심사에서 많은 어려움이 있었습니다.

애플의 심사 규정이 굉장히 까다로웠는데요. 제가 받았던 리젝들을 한번 적어보았습니다.

아래 상황들로 추가 개발이 필요해 1차 출시가 굉장히 많이 미루어졌습니다.

- 커뮤니티 앱이므로 17세 이상이 필수이다.

- 댓글, 게시글 신고기능이 필수이다.

- 댓글, 게시글 신고 시 신고한 유저가 해당 게시글을 보지 않도록 설정할 수 있어야 한다

- 글을 작성한 유저를 차단할 수 있어야 한다.

💯 앞으로의 계획을 알려주세요

우선 글솜씨가 없어서 이상한 소리만 한 거 같지만 끝까지 읽어주셔서 감사합니다.

저희 서비스는 커뮤니티에만 초점이 있어 따로 비즈니스 모델을 찾기가 힘들어서 비즈니스 모델에 대한 추가 기획이 필요할 거 같아서 이 부분을 생각하고 있습니다.

커뮤니티 기능의 주된 목적은 유저들의 소통인데 아직 가입 유저 수가 너무나도 부족해서 이탈률이 너무 높습니다 ㅠㅠ...

현재 사비와 개인적인 시간을 투자하여 마케팅하고 있지만 서버비 지출만 생기고... 눈에 띄는 성과가 보이지 않아 슬프지만

한번 프로젝트를 끝까지 해보겠다는 욕심이 생겨 지속해서 개발해 나갈 생각입니다!

이 글을 읽는 분들도 졸업생도 상관없이 가입이 가능하니까 시간 괜찮으시면 가입하셔서 글 작성 해주시면 감사하겠습니다!!