교내 축제 가이드 애플리케이션을 만들기

유소정·2024년 5월 13일
1

0. 📝 바쁘신 분들을 위한 요약

  • 인천대학교 축제에 관련된 모든 것을 확인할 수 있는 애플리케이션을 만들었습니다.
  • Vercel 측정 기준으로 축제 기간 3일 동안 1.4만명의 방문자가 있었습니다.
  • 팀 프로젝트로 5명이서 진행했습니다. 프론트 3명, 백엔드 2명입니다.
  • ReactJs, TypeScript, NodeJs, MySQL, Vercel, AWS를 사용했습니다.
  • 총학생회에게 미리 축제 데이터를 받아, 백엔드에서 JSON 데이터를 넘겨주도록 했습니다.
  • 가비아에서 도메인을 구매했습니다.

1. 🧺 필요할 것 같다

저희 학교는 축제가 매년 봄과 가을에 열립니다. 하지만 몇 가지 문제가 있었습니다.

  • 축제 공지사항은 인스타그램에만 올라옵니다.
  • 축제 공지사항은 거짓 정보일 수도 있습니다. (변경 사항을 스토리로만 알려주기 때문에)
  • 각 부스에 대한 정보는 에브리타임에 해당 부스 운영자들이 올립니다. 그리고 하루 정도면 글이 묻힙니다.

결론적으로 학생들은 축제에 대한 공지사항을 확인하려면 인스타그램이 필요했고, 부스에 대한 정보는 얻기 쉽지 않았습니다.

그래서 저는 졸업하기 전에, 학생들에게 도움이 되는 축제 서비스를 만들어야겠다고 생각했습니다.

2. 📜 학생들의 니즈를 파악하기

제가 필요한 축제의 정보는 학생들의 생각과 다를 수 있습니다. 저는 술을 안 먹기 때문에 주점이나 알콜존은 관심이 없었거든요.

그래서 학생들에게 설문조사를 통해 2가지 정보를 얻었습니다.

  1. 축제를 즐기며 불편했던 것

  1. 축제에서 가장 관심이 가는 것

총 60명이 참여했고, 이를 기반으로 애플리케이션에 넣을 데이터를 추출했습니다.
그리고 3개의 카데고리로 추릴 수 있었어요.

  1. 부스에 대한 정보 (주점, 비주점, 푸드트럭, 플리마켓, 존)
  2. 공연에 대한 정보 (외부 가수, 전체 공연 일정)
  3. 공지사항에 대한 정보 (총학생회가 인스타그램에 올리는 것)

이 데이터가 메인이 되도록 애플리케이션의 디자인 스케치를 시작했습니다.

3. 🎨 기획 및 스케치

설문조사를 통해 보여주고 싶은 데이터의 우선순위를 정했었습니다.
이를 바탕으로 기획을 들어갔는데,'테오의 스프린트'에서 아이디어를 뽑을 때 이용하는 양식을 참고했습니다.

이후에 생각의 혼란이 없도록 생각을 통일하고, 서비스의 특징과 목적을 명확히 하는 단계였습니다.

특징이 어느 정도 잡혔을 때, 스케치를 시작했습니다.

팀원 모두 피그마를 처음 써봤고, 디자인을 잘하는 편도 아니었습니다.
그래서 플로우를 먼저 그렸고 위에 상상하는 느낌과 가장 가까운 레퍼런스를 얹어서 의견을 나눴습니다.

플로우가 어느 정도 완성이 되면 마지막으로 서비스의 색감을 정해서 특징을 명확히 했습니다.
저희는 학교의 대표 색감이 '파랑'과 '노랑'이었기 때문에 이를 선택했습니다.

4. 👯 협업

협업을 위해서 2가지를 신경 썼습니다. 첫 번째는 기술적 협업, 두 번째는 심리적 협업입니다.

  • 기술적 협업
    • 키오스크 만들기 온보딩 - FE
    • 프로젝트 초반에 진전이 안되는 느낌을 받아서 온보딩 과정을 제작했습니다.
    • 온보딩은 HTML/CSS, JavaScript, React 기초를 연습하고, 코드 컨벤션과 파일 구조을 맞추고, 프로젝트 세팅하는 방법을 공유하기 위한 목적이었습니다.
  • 심리적 협업

5. 👌 일정 관리

장기 프로젝트라 체계적인 일정 관리가 필요했습니다. 팀원 한 명을 꼬셔 함께 읽자며 애자일 개발이 처음인 내가 출근했더니 스크럼 마스터가 된 건에 관하여 책을 사줬고, 함께 스크럼 마스터 역할을 맡아 팀의 일정을 관리했습니다.

책의 모든 내용을 그대로 따르진 않았지만, 우리 팀에 맞는 원칙은 적극적으로 반영하고 맞지 않는 부분은 회의를 통해 덜어내며 운영했습니다. 확실히 후반으로 갈수록 일정 관리가 편하고 체계적이다는 생각을 했어요.

대표적으로 다음과 같은 사항을 반영했어요.

  1. 프로덕트 백로그를 만들어 개략적인 계획을 세운다.
  2. 주간 회의한다.
    • 공통의 목표를 리마인드한다.
    • 백로그에서 이번 주에 다룰 범위를 정한다.
    • 작업량을 어림짐작이라도 함께 맞춰본다.
  3. 주간 회고(KPT)로 "이번 주에 문제는 없었나?"를 되돌아본다.
  4. 완료의 기준을 명확히 한다.
    • "대충 다 된 것 같아요"는 금지,
    • 완료를 판단할 수 있는 명확한 기준을 세운다.
  5. 사용자 관점에서 의도를 점검한다.
    • "이 의도가 사용자에게 제대로 전달되고 있을까?"를 함께 고민한다.
  6. 서로 돕는 문화를 유지한다.
    • "이 작업은 제게 너무 어려워요"라고 말할 수 있는 환경,
    • 함께 협력하며 목표로 나아간다.
  7. 매일 할 일을 정리한다.
    • "하루만 더 있었으면 ㅠㅠ" 후회하지 않도록, 꾸준히 앞으로 나아간다.

6. 🤡 홍보

서비스가 완성된 다음에 에브리타임에 홍보했습니다.

축제는 오프라인으로 진행되기 때문에 교내 곳곳에 붙일 포스터도 제작했습니다. 망고보드를 이용했습니다.
디자이너님이 보노보노가 아주 맘에 드신다고 했다

그리고 총학생회와 4번이 넘는 미팅에서 서비스의 안정성와 필요성을 어필한 덕분에, 축제 주간에 인스타그램 및 교내 홍보에 적극적으로 참여해주셨습니다.

7. 🎡 결과물

Vercel에 측정된 기록으로 1.4만명 Visitors가 있었습니다.

8. 아쉬운 점: 🔐 보안 문제

DOS 공격으로 인한 백엔드 서버 터졌습니다.

원인은 프로그램을 이용해서 좋아요를 비정상적으로 많이 눌렸기 때문입니다.

당시 대처 방법으로는 프론트에서는 PC로 좋아요를 연속적으로 누르지 못하게 했습니다. 그러니까 다행히 잠잠해졌습니다. 이후 보수 작업으로 좋아요를 몇 개 누르더라도 상태를 관리하고 있다가 특정 개수 이하만 백엔드로 전송되는 로직을 짜려고 합니다.

9. 🍞 후기

기획부터 디자인, 개발, 배포까지 전 과정을 해볼 수 있는 기회였습니다.

혼자서 5인분을 하는 것보다, 5명이 1인분을 하는 게 더 가치있는 서비스를 만든다고 느꼈습니다.
누가 빠지더라도 팀이 유지되며, 결국엔 시너지로 인해 1인분이 2인분이 되는 순간이 오기 때문입니다.

배포하기 전까지는 많은 날이 막막했고, 책임감과 부담감에 주말도 거의 쉬는 날이 없었지만
누구 하나 포기하지 않고 끝까지 와줘서 감사했습니다.

팀원들에게 일을 지시하는 악당같은 역할을 해보며,
조금 더 부드럽게, 친절하게, 마음을 헤아리며 전달하고 싶었던 순간이 많았습니다.

미숙하고 잘하지 못했던 순간이 많이 생각나는데,
팀원들에게 미안하네요.

다음에 다시 팀장을 한다면, 역할을 명확히 하여 일을 잘 분배하려 합니다.
하지만 다음에는 팀장이 아닌 팀원으로 끌어져지는 경험이 해보고 싶네요.

저의 첫 팀프로젝트 과정을 읽어주셔서 감사합니다.
저의 첫 서비스를 사용해주신 1.4만명 학우분들께도 감사합니다.

자세한 내용은 시리즈로 제작하겠습니다.

profile
기술을 위한 기술이 되지 않도록!

3개의 댓글

comment-user-thumbnail
2025년 2월 2일

안녕하세요 저는 고등학교를 다니고 있는 학생입니다. 저희 학교에서 커뮤니티 맵(https://spatial.tistory.com/2)을 제작하려고 하는데 출처를 표기하고 해당 프로젝트의 소스코드를 활용해도 될까요?

1개의 답글