[코테이토 10기] T-Link 프로젝트 회고

2024.11 - 2025.02

환경 공모전 프로젝트 였다가... 과외 플랫폼이 된 프로젝트

드디어 대망의 프로젝트 회고이다..!

---

2024.09-2024.10 동안 진행한 첫 프로젝트는 ICT에서 진행한 환경 공모전 프로젝트였다.

공모전 참여 인원이 5명 제한이 있어서 우리팀은 디자인 1명, 프론트엔드 2명, 백엔드 2명으로 이루어져있었다.

기획이 없다보니 우리끼리 아이디어를 내고 기획 제안서를 제출했지만 서류 탈락...ㅎㅎ

 

이후 디자인 분도 바빠져서 우리팀은 개발자밖에 남지 않게 되었다.

이미 다들 프로젝트에 많이 참여하고 있어서 기획과 디자인을 구하기 쉽지 않았지만 우리팀 팀장 분께서 열심히 구해서 기획 1명과 디자인 1명을 구할 수 있게 되었다.

 

프로젝트를 다른 팀보다 늦게 시작하게 된 것 같아 데모데이 전까지 완성할 수 있을지 걱정이 많았지만 여유롭게 완성할 수 있었다 !

우리팀은 매주 정규세션이 끝나고 회의를 했다. 정말 많은 회의를 하였고 다들 열심히 참여해서 빨리 완성할 수 있었던 것 같다.

 

진행 과정

프로젝트 주제를 정하는데만 약 3주가 걸린 것 같다.

처음 정한 주제가 다른 코테이토 플젝 팀과 겹쳐서 회의를 하며 서로 아이디어를 주고 받고 그 중 정해진 주제가 '과외생 관리 플랫폼'이었다. 내가 낸 주제가 선택돼서 쪼꼼 신났었다...ㅎㅎ

 

아이디어가 확정되고 MVP를 정하면서 기획 팀원이 기능명세서를 작성하였고, figma에 와이어프레임을 만들었다.

기능 명세서와 와이어프레임을 다같이 보며 수정하고 기능을 확정짓는 데 꽤 오랜시간이 걸렸다.

심지어 개발을 하면서도 기능이 계속 수정되기도 하였다...

 

늦게 시작하다 보니 시간이 부족해서 디자인이 완성 될 때마다 계속 UI를 구현하였고 백도 거의 동시에 했다.

디자인과 백과 프론트가 거의 동시에 진행되었다.

 

초반에는 프론트엔드가 좀 여유로워서 풀리퀘도 열심히 쓰고 서로 코드 리뷰도 해주었지만 데모데이가 가까워질수록 점점 대충 쓰게 되었다. 이후에도 계속 refactoring을 진행하고 싶은데 아마 다른 팀원들과 이야기를 해보아야 할 것 같다.

---

프로젝트 소개

사이트 링크 https://t-link.site/

 

1️⃣ 기획 의도 (문제 인식)

과외는 단순한 학습 지원을 넘어, 학생의 성장과 학부모의 신뢰 속에서 형성되는 하나의 작은 교육 시스템이다.

현재 과외를 진행하는 선생님과 학생, 학부모는 체계적인 관리 시스템이 없다.

 

과외 선생님 - 숙제 관리, 강의 자료 전달, 성적 기록, 과외비 조정 등 수업 외 업무 부담

학생 - 숙제 마감일을 놓치기 쉽고, 학습 자료와 성적 변화 관리 어려움

학부모 - 자녀의 학습 진행 상황을 알기 어렵고, 과외비 입금 일정 관리 어려움

 

2️⃣해결책: 1:1 과외 관리를 위한 올인원 서비스, T-LINK

"티치(Teach) + 링크(Link)", 즉 "가르침을 연결하다"라는 의미를 담은 T-LINK를 기획하였다.

T-LINK는 과외 선생님과 학생, 학부모가 한 플랫폼에서 연결되어, 더 효율적인 과외 관리를 가능하게 하는 웹앱이다.

 

3️⃣ 주요 기능 및 상세 설명

주요 기능) 회원가입 및 로그인, 과외방, 캘린더, 마이페이지

 

- 로그인 및 회원가입

T-LINK는 카카오톡 간편 로그인을 지원 → 별도의 가입 절차 없이 빠르게 로그인 가능

회원가입 시 선생님, 학생, 학부모 중 역할을 선택해야 하며, 각 역할에 맞춘 맞춤형 인터페이스와 기능 제공.

 

- 과외방 개설 및 관리

선생님이 과외방을 개설하고, 학생과 학부모를 초대 링크로 초대할 수 있다.

 

- 과외방 주요 기능 1. 강의 자료함

선생님이 학습 자료를 업로드하면, 학생은 언제든 다운로드할 수 있다.

 

- 과외방 주요 기능 2. 숙제 관리 기능

숙제 마감일을 설정하고 D-Day를 표시하여, 학생이 과제를 놓치지 않도록 도와준다.

학생이 숙제를 완료하면, 완료 여부를 체크할 수 있다.

 

- 과외방 주요 기능 3. 성적 통계 기능

성적 변화를 그래프로 시각화하여 학습 진행 상황을 쉽게 확인

 

- 과외방 주요 기능 4. 상담 일지

과외 중 상담 내용을 기록하고, 학부모와 공유할 수 있다.

 

- 과외방 주요 기능 5. 입금 관리 기능

선생님이 과외비 계좌 정보를 입력하면, 학부모는 입금 일정을 쉽게 확인할 수 있다.

 

- 캘린더 기능

캘린더에서는 과외 일정과 입금 일정을 한눈에 확인할 수 있다.

아이콘을 구분하여 가독성을 높였으며, 과목명과 이름을 지정해 여러 학생을 관리할 때도 편리하도록 구성했다.

 

- 마이페이지

기본 정보 관리, 로그아웃 및 회원탈퇴 기능

 

4️⃣개발 과정 및 기술 스택

 

5️⃣ 기대 효과

과외를 진행하는 선생님, 학생, 학부모 모두가 보다 체계적이고 효율적인 환경에서 학습을 이어갈 수 있도록

✅ 선생님은 수업 준비에만 집중하고,

✅ 학생은 스스로 학습을 체계적으로 관리하며,

✅ 학부모는 자녀의 학습 과정을 더욱 신뢰할 수 있도록

---

프론트엔드 

1️⃣ 프론트엔드 기술 스택

• 의존성 관리 - npm
• 라이브러리 - Vite, 리액트, tailwind css
• IDE - VSCode
• 버전 관리 시스템 - Git, GitHub
• 배포 - AWS S3, Cloud Front
• CI/CD 자동화 - GitHub Actions

 

2️⃣ 프론트엔드 역할 분담

• 나 → 회원가입/로그인 + 과외방 목록 + 프로필 + 초대링크 + 캘린더 + 헤더 + 배포
• 다른 FE → 과외방 상세 기능(숙제, 과외자료, 성적 통계, 상담 일지) + 마이페이지 + 네비게이션 바

나는 카카오 로그인 파트와 과외방 목록, 캘린더, 헤더 구현 및 배포를 맡았다.

사용자는 학생, 선생님, 학부모로 각각 회원가입이 가능하고 각 역할마다 보이는 화면이나 기능을 다르게 구현하였다.

자세한 구현과 기록은 아래 깃허브 링크에 있다.

 

배포는 AWS의 S3와 Cloud Front를 이용하여 진행했다.

이후 수정된 부분은 자동으로 업로드 되도록 깃허브 actions를 사용하여 ci/cd 자동화를 구현하였다.

 

블로그를 참고하여 진행하였는데 배포를 하면서 예전 수업시간에 배운 개념들이 조금씩 기억나서 신기했다.

배포 후에 문제가 많이 발생했는데 어떤 사람은 잘 들어가지고 어떤 사람은 오류가 나는 문제였다.

또한 데이터로 들어갈 때와 와이파이로 들어갈 때도 오류가 다르게 발생했다.

자세히는 모르지만 네트워크가 프론트 네임서버와 백 네임서버 중 어디로 갈 지 달라지게 되서 문제가 발생하는 거라고 들었다.

나는 백엔드 팀원분에게 IAM 계정만 생성해서 넘겨줬더니 다 해결해줬다. (진짜 짱이야👍)

이 부분 다시 공부해야겠다...

새벽까지 열심히 하는 우리 팀...

 

다행히 데모데이까지 무사히 오류도 해결하고 배포까지 완료할 수 있었다.

 

이번 프로젝트를 통해 AWS 배포도 처음 경험해보았는데 여러 오류가 발생하여 당황하기도 했지만 잘 해결되어 좋은 경험이 된 것 같다. S3와 Cloud Front의 개념 뿐만 아니라 직접 배포해보면서 어떻게 작동하는 지 더 잘 이해하게 된 것 같다.

 

또한 오랜 기간동안 프로젝트를 하면서 리액트 코드를 어떻게 하면 더 잘 짜는지, 다른 프론트엔드 부원과 함께 회의도 많이 하면서 공부도 많이 하게 된 것 같다. 초대링크나 카카오 로그인을 구현하면서 모르는 부분이 많았는데 다른 프론트엔드 부원에게 도움을 많이 받았다 ! 이 프로젝트를 진행하면서 단일 책임 원칙을 잊고 있었는데 내가 구현한 초대링크 모달창 부분이 그 원칙을 위반했었다. 다른 프론트엔드 부원이 이를 알려주고 고쳐주었던 것이 기억에 남는다. 프론트엔드끼리 회의도 따로 하고 새벽까지 플젝하면서 많이 성장한 것 같다.

 

우리 팀 정말 고생했다...

티링크 데모데이 PDF.pdf

8.75MB

 

https://github.com/IT-Cotato/10th-T-LINK-FE

GitHub - IT-Cotato/10th-T-LINK-FE: 10기 과외 플랫폼 프로젝트 FE 레포지토리입니다