🐰 올인원 스터디 관리 플랫폼 Wibby

🎉 배포 주소

🔗 Wibby 바로가기

💡 프로젝트 소개

🐰 Wibby – 스터디 모임 모집 및 관리 플랫폼

Wibby는 단순한 스터디 매칭을 넘어 스터디의 모집 → 참여 → 운영 → 종료 전 과정을 통합적으로 지원하는 올인원 스터디 관리 플랫폼입니다.

기존 스터디 서비스들이 모임 개설과 매칭 기능에만 국한된 것과 달리, 우리 플랫폼은 스터디 생성 이후의 지속적인 운영과 협업에 중점을 두었습니다.

또한 팀원 간 실시간 소통, 캘린더 기반 일정 관리, 자기 PR 기반의 팀 매칭 등을 통해 자율적이고 효율적인 스터디 문화를 지향합니다.

🖥️ 개발 환경

구분	사용 기술
프론트엔드
백엔드
서비스 배포 환경
협업 툴
디자인

🍀 프론트엔드 팀원 구성

한유빈	박서영	유강민	조소정
@yubin121	@sduddla	@dkawoindsa	@chosojeong97

백엔드 Repository

🔗 바로가기

🌟 역할 분담

[팀장] 한유빈

모임 일정 조율

• 스터디원들의 일정을 직관적으로 관리 가능
• 많이 선택된 시간일수록 진한 색상으로 표현함으로써 시각적인 정보 제공
• 데이터 맵의 키 값과 연결하여 각 셀을 요일과 시간 단위로 관리
• 클릭 및 드래그로 다중 선택 가능
• 사용자 상태에 따라 화면 및 버튼 인터랙션을 유동적으로 제어
• 도움말 툴팁을 통한 기능 설명으로 UX 향상
• 연도 변경 및 디바운스 적용을 통한 예외 처리
• 토스트 메시지를 통해 사용자 인터랙션에 대한 결과를 알려줌으로써 UX 향상

스터디 커뮤니티

• 상단에 최신 공지글 2개를 고정적으로 보여줌으로써 중요 게시글 접근 향상
• 카테고리 및 정렬, 검색을 통해 필터링
• 페이지네이션을 통한 게시글 관리

스터디 My 정보 페이지 - 연장 및 탈퇴

• 해당 스터디의 연장 상태에 따른 분기 처리
• 스터디 탈퇴 시 확인 메시지를 띄움으로써 사용자 실수 방지
• 본인이 작성한 스터디 게시글만 따로 확인 가능
• 카테고리 및 정렬, 검색을 통해 필터링
• 페이지네이션을 통한 게시글 관리

마이 페이지 내 정보 리스트

• 본인이 참여 중이거나 참여했던 전체 스터디 리스트 확인 가능
• 본인이 신청한 스터디 리스트 확인 가능
• 본인이 작성한 모집글 리스트 확인 가능
• 카테고리 및 진행 방식, 검색을 통해 필터링
• 페이지네이션을 통한 리스트 관리

스터디원 매너 평가

• 참여 후 종료된 스터디의 스터디원들에게 피드백 전달 가능
• 해당 매너 평가 결과는 버디 에너지에 반영
• 도움말 툴팁을 통한 기능 설명으로 UX 향상
• 사용자 인터랙션에 따른 평가 분기 처리
• 디바운스 적용을 통한 예외 처리
• 완료 애니메이션 적용

Etc

• 사용자 인증 상태에 따른 경로 보호 설정
• 담당 페이지 퍼블리싱 및 반응형 구현
• 로딩 스켈레톤 적용으로 UX 향상
• 디바이스에 따른 아이콘 최적화

[팀원] 박서영

사용자 인증

• 로그인/회원가입(이메일/비밀번호 기반)

  • localStorage를 활용한 login_status 로그인 상태 관리
  • 유효성 검사 실패/오류 메시지는 입력창 하단에 표시, 성공 시 토스트로 안내하여 UX 향상
  • 회원가입 시 이메일 인증 기능 구현
  • 비밀번호 입력 시, 전체 삭제와 입력한 비밀번호 표시 기능 제공

• 소셜 로그인(구글)

  • 구글 OAuth 로그인 플로우 설계
  • 콜백 페이지에서 login_status 설정 후 로그인 상태 관리
  • 콜백 페이지에서 메인 페이지로 이동 시 로딩 UI 표시

프로필 정보 수정 및 회원 탈퇴

• 닉네임 변경: 유효성 검사 및 응답 헤더 기반 중복 닉네임 확인과 UI 표시
• 프로필 이미지 변경: 이미지 미리보기 제공 및 업로드 처리
• 비밀번호 변경: 기존/새/확인 비밀번호 입력 및 유효성 검사로 UX 개선
• 회원 탈퇴
  • 본인 이메일 표시 + 비밀번호 2회 입력 UI 제공
  • 탈퇴 경고 모달 표시 후 탈퇴 처리 -> 로그인 페이지로 이동

PR 페이지

• 로딩 스켈레톤 UI 적용으로 부드러운 화면 전환
• 로그인한 사용자/다른 사용자 화면 분기
• 정보
  • 지역: 17개의 카테고리 제공, 미선택 시 해당 문구 UI 표시
  • URL: 7종의 매칭 아이콘(미 매칭 시 기본 아이콘) 제공, 입력 시 해당 아이콘 노출 및 클릭 시 해당 URL로 이동
  • 소개 글: Toast Editor 기반 작성 UI, 글자 수 500자 제한(초과 시 경고 표시)
• 버디 에너지
  • 서비스 캐릭터로 활동 퍼센트를 시각적으로 표시
  • energy 값에 따라 캐릭터 위치를 동적으로 계산해 게이지 위에 배치하며 98% 이상일 경우 위치 고정하여 UI 깨짐 방지
• 매너 평가 및 피드백(주관 평가)
  • 평가/피드백 유무에 따른 UI 분기 처리
  • reviewTypes 데이터에서 reviewType 값 매칭 후 개수 카운트되도록 처리
  • 피드백이 5개 초과 시 페이지네이션으로 다음/이전 전환 처리

실시간 스터디 그룹 채팅 (WebSocket)

• WebSocket을 통해 서버-클라이언트 간 실시간 메시지 송수신
• 채팅방 입장 시 해당 방을 구독하고, 서버로부터 수신한 메시지를 즉시 UI에 반영
• 채팅방 진입 시, 최신 메시지 20개 우선 로드
• 스크롤 최상단 도달 시 이전 페이지 메시지 추가 로드 (중복 제거, 무한 스크롤 페이징)
• 로그인 후, 본인이 보낸 메시지에는 닉네임 옆에 '(나)' 표시를 추가하여 발신자를 명확하게 구분 및 UX 향상

알림

• 로딩 스켈레톤 UI 적용으로 부드러운 화면 전환 구현
• 전체 읽기 시, 스터디 초대 수락/거절 알림 제외 처리
• 개별 알림 클릭 시 해당 페이지로 이동되도록 처리
• 스터디 초대 수락/거절 알림 클릭 시와 스터디 개수 제한(10개) 초과 시, 응답 메시지를 토스트로 표시

Etc

• 서비스 캐릭터 및 배너 제작
• 주요 페이지 퍼블리싱
  • 로그인/회원가입, 메인, 프로필 수정, 회원 탈퇴, PR 페이지
• 모달
  • 오픈 시 뒷배경 스크롤 방지(overflow: hidden)
  • 모달 닫힐 때 원래 상태로 복원

[팀원] 유강민

스터디 모집

• 생성된 스터디 정보를 불러와 모집글 작성
• 게시물의 모집 상태 변경
• 모집글에 스터디 참여 신청
• 모집글 신청 확인 및 수락/거절 응답

스터디 생성

• 스터디 초기 정보 입력 후 새로운 스터디 생성

게시글 및 댓글

• 모집글 및 스터디 커뮤니티 게시글 작성/수정/삭제
• 해당 게시글의 댓글 작성/수정/삭제

AI Quiz

• 스터디 커뮤니티의 게시물 내용을 기반으로 AI가 자동으로 퀴즈 생성

[팀원] 조소정

스터디 공간 팀 캘린더 및 마이페이지 캘린더

• 캘린더 일정 조회, 등록, 수정, 삭제

스터디 공간 대시보드

• 출석
• 스터디 정보 조회
• 그 달의 일정
• 스터디 커뮤니티 게시글 조회

스터디 공간 스터디 관리

• 스터디 정보 수정
• 스터디장 위임
• 스터디 초대
• 스터디 연장
• 스터디 삭제

메인 페이지

• 내 스터디 목록 조회
• 모집글 필터링 및 검색
• 헤더 스터디 목록 조회 및 애니메이션

관리자 페이지

• 유저, 스터디, 모집글 필터링 및 조회, 삭제

🔍 시스템 아키텍처

✨ 주요 기능

1. 사용자 인증

• 로그인/회원가입(이메일/비밀번호 기반)
  • 비밀번호 입력 시 전체 삭제 및 아이콘을 통한 비밀번호 표시 기능을 제공합니다.
  • 이메일/비밀번호 미입력 또는 기존 정보와 불일치 시 경고 문구를 표시합니다.
  • 회원가입 시 이메일, 닉네임, 비밀번호, 비밀번호 확인을 입력받으며 각 항목에 대한 유효성 검사를 진행합니다.
  • 이메일 입력 시, 이메일 인증 절차를 거쳐 인증 번호를 입력해야 합니다.

signup-login.mov

• 소셜 로그인(구글)
  • 구글 로그인 버튼 클릭을 통해 소셜 로그인이 가능합니다.

google.mov

2. 메인 페이지

• 비로그인 회원은 배너와 모집글을 확인 할 수 있는 페이지입니다.
• 로그인 회원은 배너와 내가 진행중인 스터디목록과 모집글을 확인 할 수 있는 페이지입니다.
• 모집글은 페이지네이션이며 필터링 및 검색이 가능합니다.
• url 쿼리를 사용하여 새로고침이나 url 공유를 하더라도 같은 화면을 볼 수 있습니다.
• 메인에 있는 스터디 목록은 헤더에 있는 스터디 목록과 같은 api를 공유하기 때문에 동일한 전역 상태 관리를 사용하였습니다.
• 헤더에 있는 스터디 목록
  • 스터디생성, 탈퇴, 삭제에 있어 바로 반영이 되어야 한다고 생각했고 Zustand를 사용하여 스터디 목록을 전역 상태 관리 하였습니다.
  • 스터디 목록이 5개가 넘어가면 폴더 형식으로 단순하게 표현 했다가 mouseenter 이벤트 시 스터디 목록이 옆으로 나열되도록 구현했습니다.

2.mp4

• 스터디 생성
  • 사용자는 스터디 대표 이미지, 스터디 명, 카테고리, 인원 수, 진행 방식, 지역, 시작일 및 종료일, 스터디 한 줄 소개 등을 입력하여 새로운 스터디를 생성할 수 있습니다.

default.mp4

3. 스터디 모집

• 모집글 생성
  • 생성된 스터디 정보를 불러와 모집글을 작성할 수 있습니다.
  • 모집 마감일, 제목, 내용 등을 입력하여 스터디원을 모집할 수 있습니다.

default.mp4

• 모집글 수정 및 삭제
  • 본인이 작성한 모집글만 수정 및 삭제가 가능합니다.
  • 수정 가능한 항목: 모집 인원 수, 모집 마감일, 제목, 내용

default.mp4

• 모집 상태 변경
  • 본인이 작성한 모집글의 모집 상태(진행 / 모집 완료) 를 변경할 수 있습니다.
  • 모집 완료 상태에서는 더 이상 새로운 신청을 받을 수 없습니다.

default.mp4

• 모집 신청
  • 다른 사용자가 작성한 모집글에 스터디 참여 신청을 보낼 수 있습니다.

default.mp4

• 모집 신청 수락 및 거절
  • 모집글 작성자는 다른 사용자가 보낸 신청을 확인하고, 아래와 같이 처리할 수 있습니다.
    • 수락 → 스터디에 참여 가능
    • 거절 → 참여 불가

default.mp4

• 댓글 작성 및 수정, 삭제
  • 자유롭게 댓글을 등록하여 의견을 공유할 수 있습니다.
  • 본인이 작성한 댓글은 수정 및 삭제가 가능합니다.

default.mp4

4. PR 페이지

• 로그인한 사용자와 다른 사용자를 구분하여 섹션의 표시 내용이 다르게 구성됩니다.
• 정보
  • 미선택/미입력 시 안내 문구가 표시됩니다.
  • 지역은 17개 카테고리 중 선택할 수 있습니다.
  • URL은 7종의 매칭 아이콘(미 매칭 시 기본 아이콘)으로 표시되며, 클릭 시 해당 URL로 이동합니다.
• 소개 글
  • Toast Editor를 사용하여 작성하며, 최대 500자까지 입력할 수 있습니다.
  • 글자 수를 초과하면 경고 문구가 표시됩니다.
• 버디 에너지
  • 스터디 활동을 통해 누적된 활동량을 퍼센트로 확인할 수 있습니다.
• 매너 평가 및 피드백
  • 스터디 팀원들이 남긴 매너 평가나 피드백을 한 눈에 확인할 수 있습니다.
  • 피드백이 5개를 초과하면 페이지네이션으로 다음 페이지에서 확인할 수 있습니다.

pr.mov

5. 프로필 정보 수정

• 닉네임과 프로필 이미지, 비밀번호를 변경할 수 있습니다.
• 중복된 닉네임일 경우 경고 문구를 UI에 표시합니다.
• 프로필 이미지는 파일 업로드 방식이며, 업로드 시 미리 보기를 제공합니다.
• 비밀번호 변경 시 기존 비밀번호와 새 비밀번호를 2회 입력한 후 변경할 수 있습니다.

profile-edit.mov

6. 회원 탈퇴

• 로그인한 이메일이 UI에 표시되며, 비밀번호를 2회 입력해야 합니다.
• 탈퇴하기 버튼 클릭 시, 한 번 더 확인 모달이 표시되어 탈퇴 여부를 재확인합니다.
• 탈퇴가 완료되면 로그인 페이지로 이동합니다.

withdraw.mov

7. 마이 페이지

• 전체 캘린더
  • 스터디와 무관하게 개인 일정을 관리 할 수도 있으며 내가 가입된 스터디들의 목록을 통해 해당 스터디의 일정을 마이페이지에서 함께 관리 할 수 있는 페이지입니다.
  • 지정된 카테고리에 해당하는 일정을 등록할 수 있습니다.
  • 제목과 시간 상세내용을 입력 받고 일정은 날짜와 시간을 지정할 수 있고 종일을 누른다면 날짜만 지정 할 수도 있습니다.
  • 날짜를 클릭한다면 해당 날짜에 해당하는 일정 목록을 팝업으로 볼 수 있습니다.
  • 팝업에서 내가 작성한 게시글은 우측 상단의 메뉴버튼을 통해 수정, 삭제 할 수 있으며 수정을 누른다면 등록 팝업과 동일한 포맷으로 수정 가능합니다.

2.mp4

• 내 정보 리스트
  • 본인의 전체 스터디, 신청한 스터디, 작성한 모집글 리스트를 각각 확인할 수 있습니다.
  • 스터디의 카테고리 및 진행 방식, 검색을 통해 필터링할 수 있습니다.
  • 페이지네이션을 통해 각각의 리스트가 관리되고 있습니다.

default.mov

• 스터디원 매너 평가
  • 스터디가 종료되면 자신을 제외한 스터디원들을 종합적으로 평가하고 피드백을 전달할 수 있습니다.
  • 해당 매너 평가의 결과는 버디 에너지에 반영됩니다.
  • 현재 평가 가능한 스터디 목록과 해당 스터디의 스터디원 목록을 가로 스크롤로 확인 후 선택할 수 있습니다.
  • 평가가 완료되면 즉시 목록에서 사라집니다.
  • 스터디 종료 후 7일까지 평가 가능합니다.
  • 해당 기능이 익숙하지 않다면 우측상단의 도움말 툴팁을 통해 설명을 확인할 수 있습니다.

default.mov

8. 스터디 공간

• 스터디 대시보드
  • 출석체크 기능으로 해당 스터디에 얼마나 자주 출석하고 참여하는지 알 수 있습니다.
  • 해당 스터디의 간략한 정보를 볼 수 있습니다.
  • 해당 스터디의 그달의 일정을 간략한 달력과 함께 확인할 수 있습니다. 오늘이 Default이며 날짜를 클릭시 그 날의 우측에서 볼 수 있습니다.
  • 해당 스터디의 공지글, 자유게시글의 최신글을 볼 수 있습니다.

default.mp4

• 팀 캘린더
  • 해당 스터디의 일정을 조회 할 수 있습니다.
  • 해당 스터디의 일정을 등록할 수 있습니다.
  • 제목과 시간 상세내용을 입력 받고 일정은 날짜와 시간을 지정할 수 있고 종일을 누른다면 날짜만 지정 할 수도 있습니다.
  • 날짜를 클릭한다면 해당 날짜에 해당하는 일정 목록을 팝업으로 볼 수 있습니다.
  • 팝업에서 내가 작성한 게시글은 우측 상단의 메뉴버튼을 통해 수정, 삭제 할 수 있으며 수정을 누른다면 등록 팝업과 동일한 포맷으로 수정 가능합니다.

default.mp4

• 모임 일정 조율
  • 스터디원들 각각의 일정을 시각적으로 표현함으로써 언제 회의하거나 모이면 될지 직관적으로 파악 가능합니다.
  • 많은 스터디원들이 선택한 시간이라면 진한 색상으로 나타납니다.
  • 스터디장이 최대 7일까지의 기간을 설정하면 스터디원들에게 일정 제출이 가능하다는 알림이 전송됩니다.
  • 시간은 클릭 및 드래그를 통해 다중 선택이 가능합니다.
  • 일정을 제출한 스터디원 리스트를 확인할 수 있습니다.
  • 본인의 일정을 한 번에 지울 수 있습니다.
  • 해당 기능이 익숙하지 않다면 우측상단의 도움말 툴팁을 통해 설명을 확인할 수 있습니다.

2.mp4

• 스터디 커뮤니티
  • 게시글 카테고리, 제목, 내용 등을 입력하여 스터디 커뮤니티에 글을 작성할 수 있습니다.
  • 모집글과 마찬가지로 게시글 수정 및 삭제, 댓글 기능도 가능합니다.
  • 상단에 최신 공지글 2개를 고정적으로 보여줍니다.
  • 게시글의 카테고리 및 정렬, 검색을 통해 필터링할 수 있습니다.
  • 페이지네이션을 통해 게시글이 관리되고 있습니다.
  • AI Quiz
    • 스터디 커뮤니티의 게시물 내용을 기반으로 AI가 자동으로 퀴즈를 생성합니다.
    • 사용자는 퀴즈를 풀어보며 스터디 주제에 대한 이해도를 확인할 수 있고, 정답 및 오답을 즉시 확인할 수 있습니다.

2.mp4

• 스터디 My 정보 페이지
  • 본인이 작성한 스터디 게시글 리스트를 확인할 수 있습니다.
  • 게시글의 카테고리 및 정렬, 검색을 통해 필터링할 수 있습니다.
  • 페이지네이션을 통해 게시글이 관리되고 있습니다.
  • 스터디 연장 상태에 따라 연장에 참여할 수 있습니다.
  • 스터디를 탈퇴할 수 있습니다.

My.mov

• 스터디 관리 페이지
  • 스터디 정보를 모두 볼 수 있는 곳입니다.
  • 스터디의 상세 정보, 스터디 멤버들 목록, 스터디 삭제, 스터디 연장을 할 수 있는 곳입니다.
  • 스터디 정보는 아직 스터디가 시작 날짜를 지나지 않았으면 시작 날짜도 포함하여 수정 할 수 있으며 기본적으로 프로필사진, 이름, 카테고리, 최대인원수, 진행방식, 지역, 스터디 소개글을 수정 할 수 있습니다.
  • 스터디원 목록에서는 스터디장의 위임이 가능하고 닉네임 검색을 통해 해당 스터디로 초대 할 수도 있습니다.
  • 스터디 연장은 스터디 종료일자 - 7일이 되면 스터디 연장을 할 수 있는 버튼이 활성화 됩니다.
  • 스터디 삭제는 스터디원이 팀장 한명이고 아직 시작하지 않은 스터디라면 삭제 가능합니다.

2.mp4

• 실시간 스터디 그룹 채팅 (WebSocket)
  • 스터디 방에 있는 팀원들과 실시간으로 메시지를 주고받을 수 있습니다.
  • 재접속 시에도 이전 채팅 내역을 확인할 수 있습니다.
  • 스크롤 최상단 도달 시 이전 메시지를 자동으로 불러오는 무한 스크롤 기능을 제공합니다.
  • 닉네임 옆에 '(나)' 표시를 통해 본인이 보낸 메시지를 한눈에 확인할 수 있습니다.

chat.mov

9. 관리자 페이지

• 유저 목록 조회, 검색이 가능하며 비활성화도 가능합니다.
• 스터디 목록 조회, 필터링 및 검색이 가능하며 비활성화도 가능합니다.
• 모집글 목록 조회, 검색이 가능하며 비활성화도 가능합니다.

2.mp4

10. 알림

• 전체 읽기 버튼 클릭 시, 스터디 초대 수락/거절 알림은 제외하고 나머지 알림만 읽음 처리됩니다.
• 스터디 초대 수락/거절 알림 클릭 시, 토스트 메시지와 함께 읽음 처리됩니다.
• 개별 알림 클릭 시, 해당 모집 글 또는 스터디 대시보드 페이지로 이동합니다.
• 스터디 개수 제한(10개) 초과 시, 안내 메시지를 토스트로 표시합니다.

notification.mov

🔥 트러블 슈팅

1. 구글 로그인

구글 로그인 구현 시, 로그인 성공 후 백엔드에서 메인 페이지로 리다이렉트되면서 프론트엔드에 서 로그인 상태를 인지하지 못하는 문제가 발생했습니다. 이로 인해, 유저 정보를 불러올 수 없었 고, 이를 해결하기 위해 메인 페이지에서 로컬 스토리지를 활용해 상태를 지정해 보았지만, 로그 아웃 이후에는 유저 정보를 불러오지 못하는 문제가 있었습니다.

또한, 구글 로그인 버튼 클릭 시점에 로컬 스토리지를 설정하는 방식도 시도했으나, 이 경우 사용 자가 '뒤로 가기'를 눌렀을 때 역시 유저 정보를 불러오지 못하는 문제가 발생했습니다.

결국, 콜백 페이지를 별도로 생성하고, 백엔드에서 구글 로그인 성공 후 해당 경로로 리다이렉트 하도록 수정했습니다. 콜백 페이지에서 login_status(로컬)를 설정한 뒤 메인 페이지로 이동시키는 구조로 변경하자, 구글 로그인도 자체 로그인과 동일하게 login_tatus(로컬)를 기준으로 유저 정보를 가져올 수 있게 되어 오류를 해결했습니다.

2. URL 쿼리 및 상태 관리

처음으로 URL 쿼리를 활용해 검색과 페이지네이션 기능을 구현에 있어서 기능을 구현할 당시에는 첫 화면에서 검색과 페이지 이동이 정상적으로 작동하는 것처럼 보였습니다. 하지만 나중에 다시 확인한 결과, 화면 상태가 한 번 변한 이후, 다시 검색하거나 페이지를 이동했을 때는 의도한 대로 작동하지 않았습니다.

저는 검색과 페이지 이동 시 단순히 URL의 쿼리 값만 변경하면 기능이 제대로 동작할 것이라 예상했지만 아니었습니다. 쿼리 값이 변경되더라도, 해당 값을 상태로 관리하지 않으면 API 요청 시 필요한 값이 정확히 반영되지 않았기 때문이었습니다.

이를 해결하기 위해, 쿼리 값이 변경된 후 useEffect에서 해당 쿼리 값을 다시 읽고 이를 API 요청에 반영했고 또한 가져온 쿼리 값을 다시 상태로 설정하여 상태와 URL 간의 싱크를 맞췄더니 정상적으로 동작했습니다. 이 경험을 통해 URL 쿼리와 상태 관리 흐름의 중요성을 체감할 수 있었고, 상태 관리를 명확하게 해주는 것이 기능 안정성에 매우 중요하다는 것을 다시 한번 깨달았습니다.

🎁 프로젝트 회고

한유빈

협업 프로젝트를 진행하면서 소통과 기록의 중요성을 다시 한 번 느낄 수 있었고, 본격적으로 개발을 시작하기 전에 기능 및 화면 흐름을 정확히 정리하고 가는 게 상당히 중요한 부분이라는 것을 배웠습니다.

상태를 관리할 때 관련된 상태들을 하나씩 따로 관리하지 않고 공통 객체로 묶어서 관리하면 코드의 가독성도 좋아지고 관리도 더 수월해진다는 것을 경험했습니다. 그리고 사용자의 인터랙션에 따라 같은 컴포넌트에서 다르게 동작하는 걸 분기 처리하고 예외 처리하는 과정에서 문제 해결 능력을 키울 수 있었습니다.

기능 구현에만 초점을 두지 않고 어떻게 해야 사용자가 보다 더 편리한 UX를 경험할 수 있을지 내내 고민했고, 이 고민은 지금까지 계속되고 있습니다. 더 나은 성능과 UX를 위해 팀원들과 함께 지속적으로 유지보수하며 최적화를 하고 싶습니다.

박서영

이번 프로젝트를 진행하며 백엔드와의 다양한 기능 연결을 고민하고 이야기 나누는 과정에서, 프론트엔드에서 할 수 있는 역할과 로직에 대해 더 깊이 있게 생각해볼 수 있었고, 그만큼 시야도 넓어진 것 같습니다.

특히 처음 경험해본 웹소켓 기반 채팅 기능이나 다양한 API 활용을 통해, API 통신에도 한층 더 익숙해졌다고 느꼈습니다.

다음 프로젝트에서는 Next.js의 장점을 보다 더 적극적으로 활용하고, 프론트엔드 로직을 명확한 구조로 설계하고 정리해보는 데 집중해보고 싶습니다.

유강민

하나의 컴포넌트에서 여러 API의 응답을 처리하는 과정에서, 같은 의미의 데이터를 API마다 다른 필드명으로 전달받는 상황이 있었습니다. 이를 공통 형태로 정규화하고 컴포넌트 로직을 유연하게 구성하는 방법을 배웠습니다.

또한 백엔드와 소통하는 것에 익숙해지고, 리액트에 대한 이해도 더 깊어져야겠다고 느꼈습니다.

많은 어려움이 있었지만, 이런 경험들이 다음 프로젝트에서는 더 나은 결과로 이어질 수 있는 자양분이 될 거라 생각합니다.

조소정

백엔드와 협업하는 첫 프로젝트였던 만큼, 무엇을 알아야 하고, 무엇을 어떻게 전달해야 하는지에 대한 기준이나 지식이 부족해 초반에는 소통이 다소 매끄럽지 못했던 부분이 있었습니다.

하지만 팀원 모두가 끊임없이 소통하고 함께 고민하며 협력한 덕분에, 프로젝트를 무사히 마칠 수 있었습니다.

이번 경험을 통해 프론트엔드 개발자로서 백엔드와 협업할 때 어떤 내용을 명확하게 전달해야 하는지, 그리고 역할 간 경계를 어떻게 이해하고 조율해야 하는지에 대해 깊이 있게 배울 수 있었습니다.

또한 이번 프로젝트는 기능이 많은 만큼, 이전 프로젝트에서는 경험하지 못했던 관리자 페이지, 캘린더 UI, 대시보드 등 다양한 화면과 기능을 직접 구현해볼 수 있었습니다.

겉보기에는 단순해 보이는 디자인이나 기능이라도, 실제로는 복잡한 상태 관리와 사용자 흐름을 어떻게 구성할지 고민해야 했기 때문에, 프론트엔드 개발자로서 더 깊은 사고와 성장을 경험할 수 있던 소중한 프로젝트였습니다.