다음회사의 Pick은 당신입니다

넥스트픽은 개발자 취업난 시대에서 취업을 희망하는 취준생을 위한 기술 면접 도우미 서비스입니다 현직자와 함께하는 실전같은 비대면 면접코칭 서비스, 정확한 CS지식 체크를 위한 Ai면접서비스, 면접에 대한 질문들과 면접 후기 공유가 가능한 게시판 기능 등을 제공합니다.

• 프로젝트 명 : 넥스트픽
• 진행 기간 : 24.09.23 ~ 24.10.18
• 서비스 URL : [▶️넥스트픽]https://client.nextpick.site/

신민준	남채연	최서연	서진형
@신민준	@chaeneeee	@seoyeon1221	@JinhyeongSeo
BE(팀장)/FE	BE/FE	FE	BE/FE

페이지 (기능)	이미지
메인
회원가입-이메일
로그인-로그아웃
마이페이지-정답/오답노트
Ai면접-선택화면/음성녹음
Ai면접-결과확인
화상면접-방만들기(멘토)
화상면접-입장하기(멘티)
화상면접-피드백 작성(멘티)
화상면접-피드백 작성(멘토), 결과창
면접/질문게시판-게시글 작성/좋아요
면접/질문게시판-댓글작성/수정
면접/질문게시판-게시글 삭제
관리자페이지-서비스 이용비율
관리자페이지-면접질문 관리
관리자페이지-면접질문 추가

간트차트 작성

• 팀원들의 일정 조율과 프로젝트 전반의 방향성&목표 설정
  
• 백업 방안 설계 및 주기적 작업량 확인을 통한 유동적 일정 조율
  

요구사항 분석서 작성

• 사용자의 요구와 의도에 맞춰서 맞춤형 기능사항 작성
  
• 기능에 따른 사용자의 요구 사항과 제한 사항을 분류
  
• 각 기능에 대한 우선 순위 정렬
  
• 각 요구에 따른 테이블 내 Status 관리
  

API 명세서 작성

• RESTful API 원칙에 따른 엔드포인트 정의로 일관성 있는 API 문서 작성
  

UserFlow 작성

• 사용자의 이용 흐름에 맞춰 UserFlow를 작성
  
• 예외 사항을 고려하여 사용자의 이용 흐름 제어
  

SSL

• AWS Certification을 통한 AWS SSL 인증서 발급 및 적용
  

AWS Load Balance

• HTTP/HTTPS 트래픽을 대상으로 하며, URL 경로 기반, HTTP 헤더, 쿠키 등을 사용해 요청을 NextPick Project 그룹으로 라우팅
  
• HTTP으로 접속 시도시 HTTPS 접속으로 리다이렉트
  

AWS Route 53

• 구매한 도메인 주소를 등록 및 적용
  

AWS CloudFront

• SSL 인증서를 설정 및 적용하고 관리
  
• Global 인프라를 통한 지연 시간 단축, 전송 속도 향상
  

Exception

• Custom 가능한 사용자 요구 예외처리 및 반환 코드 작성 환경 구성
  

PageNation 환경 구성

• 제네릭을 통한 PageNation관련 ResponseDto 클래스 설계
  
• FE 페이지네이션 적용을 위한 PageInfo 클래스 설계
  

JWT 토큰 검증 메서드 환경 구성

• ExtractMemberAndVerify 추상 클래스를 구현하여 토큰 유효성 검증 및 Member 정보 추출 기능 설계
  

AuditingEntityListener

• Auditable 추상 클래스를 구현하여 튜플의 생성 및 수정 시간 기록 기능 설계
  

EventListener

• EventListener클래스를 구현하여 비즈니스 로직 모듈화
  

사용자 이용 정보 통계

• AI문제 풀이 이용 통계 종합
  

면접 질문 CRUD

• 면접 질문 카테고리/정렬/검색어 기준 검색 기능 구현 및 소스 간략화를 위한 메서드 통합
  
• 복잡한 SQL문을 JPQL방식을 이용하여 최적화
  

멘티 회원 CRUD 구현

• 회원 가입 및 정보 조회, 정보 수정 기능 구현
  
• 회원 삭제 시 회원 상태 변경
  

멘토 회원 CRUD 구현

• 회원 가입 및 정보 조회, 정보 수정, 회원 삭제 기능 구현
  
• 회원 가입 과정에서 검증 절차에 앞서 padding 상태를 설정하여 멘토의 신뢰성을 제공
  

회원 가입 예외 처리

• 정규표현식을 통하여 PostDto의 Entity 별 값 유효성 검증
  
• 이메일 중복 및 닉네임 중복 검증
  

AI면접 문제 선별 기능 구현

• 사용자 선택 카테고리 별 질문 랜덤 추출 기능 구현
  
• 복잡한 SQL문을 JPQL방식을 이용하여 최적화
  

AI면접 문제 풀이 기능 구현

• Google Cloud Speech API를 적용해 음성 파일을 분석하여 String으로 변환
  
• OpenAi API를 적용하여 정답 비교를 통해 오답 및 정답 판단
  
• 사용자 이용패턴에 맞춰 이어풀기 및 중단 기능 제공
  
• 사용자 오답노트 및 정답노트 기능 제공
  

AI면접 페이지 디자인

AI면접 문제 선별 기능 구현

• 사용자가 질문 받고 싶은 질문 카테고리 선택 페이지 구현
  

AI면접 문제 풀이 기능 구현

• 문제 풀이 페이지 구현
  
• 문제 해석 및 채점 페이지 구현
  
• react-media-recorder를 통한 사용자 음성 녹음
  
• 음성 녹음의 정확도 이슈를 고려하여 사용자가 정답을 수정 및 입력할 수 있는 기능 구현
  
• 사용자 이용패턴에 맞춰 이어풀기 및 중단 기능 제공
  
• AI면접 문제 풀이 기능 및 문제 해석 채점점을 Axios로 백엔드와 연동

멘토 / 멘티 피드백 CRD 기능 구현

• 멘토/멘티 피드백 내용 CRD 을 Axios로 백엔드와 연동

ERD 설계

• 비정규화로 검색 성능 최적화 및 싱글 테이블 전략 구성
  
• 주요 엔티티 간 참조 무결성을 고려한 연관 관계 설계
  

요구사항 분석서 작성

• 사용자의 요구와 의도에 맞춰서 맞춤형 기능사항 작성
  
• 기능에 따른 사용자의 요구 사항과 제한 사항을 분류
  
• 각 기능에 대한 우선 순위 정렬
  
• 각 요구에 따른 테이블 내 Status 관리
  

API 명세서 작성

• RESTful API 원칙에 따른 엔드포인트 정의로 일관성 있는 API 문서 작성
  

CI/CD 파이프라인 구축

• GitHub Actions를 통해 자동 빌드, 배포를 구성하여 안정적인 배포와 개발 주기 가속화
  

민감 정보 관리

• 인증서와 키 파일을 동적으로 주입해 소스 코드에서 민감한 정보 노출 방지
  

Docker 및 RDS 기반 배포

• Docker 컨테이너화를 통해 Spring , MySQL, Redis를 독립 실행 환경에서 관리, 배포의 일관성과 운영 효율성을 향상
  
• AWS EC2 와 RDS 배포를 통해 효율적인 데이터 관리 구축
  

AWS S3 연동

• 이미지 데이터를 S3에 저장
  

JWT 발급 및 검증

• JwtTokenizer를 이용해 환경 변수로 관리되는 비밀키와 만료 시간으로 서명된 JWT 발급.
  

역할 기반 접근 제어

• 사용자 권한을 Spring Security 표준 권한으로 변환하여 역할별 접근 제어
  

예외 처리

• MemberAuthenticationEntryPoint와 AccessDeniedHandler를 결합해 401과 403 오류를 구분하여 보안성 강화
  

회원 비밀번호 관리

• 사용자 비밀번호를 Encrypted를 하여 보안성 강화
  

싱글 테이블 상속 구조

• 'dtype' 필드에 따라 게시글 타입을 구분. 데이터 일관성 유지및 높은 조회 성능 제공
  

조회수 및 좋아요 기능 구현

댓글 및 대댓글 구조

• 자기참조 관계로 @ManyToOne과 @OneToMany를 사용해 계층형 댓글 구조를 구성하며, cascade와 orphanRemoval로 삭제 일관성 보장
  

이미지 관리 및 S3 연동

• AWS S3와의 연동으로 게시글 이미지 파일을 효율적으로 관리
  
• 이미지 등록, 수정, 삭제 시 S3와 데이터베이스의 URL을 동기화하여 서버 메모리 부담을 줄이고 데이터 일관성 유지
  

키워드 검색
- @Query와 JPQL을 사용하여 제목과 내용에 대한 키워드 검색 기능 구현

동적 정렬
- Pageable을 사용해 작성일, 조회수, 좋아요 수를 기준으로 동적 정렬

이메일 발송 및 인증 코드 관리

• Thymeleaf 템플릿과 JavaMailSender를 통해 인증 코드 포함 이메일 전송
  
• Redis에 인증 코드를 단기 저장하여 자동 만료로 보안성과 효율성 강화
  

확장 가능한 저장소 설계

• Redis와 VerificationCodeRepository를 활용해 동시성 처리 및 확장성을 고려한 인증 코드 저장
  

실시간 처리

• Redis의 빠른 데이터 처리로 대규모 사용자 환경에서 실시간 로그아웃 지원
  

회원가입 UI 및 이메일 인증 연동

• 회원가입 페이지 디자인 및 이메일 인증 연동

게시판 설계

• 게시판 UI 설계 및 게시글 및 댓글, 좋아요 CRUD 을 Axios로 백엔드와 연동

MockUp

• 직관적인 UI 설계를 통한 UX 강화
  

Layout

Page 개발

• 전반적인 페이지 디자인 담당
  
• MockUp & Layout 기반 페이지 디자인
  
• Axios를 사용하여 백엔드와 연동
  
• 폰트와 메인 색상을 일관되게 적용하여 디자인 심미성 강화
  

Custom Hooks

• Header 및 Member의 정보 연결을 위한 HeaderManager, MemberManager Custom Hooks 개발
  
• Custom Hooks를 통한 Header 정보 및 Member 정보 상태관리 중앙화하여 client 전반에 걸친 일관성 있는 인증과 성능 최적화
  

로그인 & 회원가입

• 회원가입 및 로그인 기능 개발
  
• 회원 상태 관리
  

멘토 & 멘티 피드백

• 피드백 마이페이지 기능 개발 및 상태 연결
  

오답 & 정답 노트

• 마이페이지 오답&정답노트에 기능 개발 및 상태 연결
  

회원정보

• 마이페이지 프로필 기능 개발 및 상태 연결
  

시각적 요소 컴포넌트화

• Header,Footer,SideBar 등의 시각적 요소 컴포넌트화 통한 전반적인 디자인 통일성 유지
  
• Props를 통한 컴포넌트 속성 변경기능 구현을 통한 재사용성 증대
  

ERD 설계

• 비정규화로 검색 성능 최적화 및 싱글 테이블 전략 구성
  
• 주요 엔티티 간 참조 무결성을 고려한 연관 관계 설계
  

요구사항 분석서 작성

• 사용자의 요구와 의도에 맞춰서 맞춤형 기능사항 작성
  
• 기능에 따른 사용자의 요구 사항과 제한 사항을 분류
  
• 각 기능에 대한 우선 순위 정렬
  
• 각 요구에 따른 테이블 내 Status 관리
  

API 명세서 작성

• RESTful API 원칙에 따른 엔드포인트 정의로 일관성 있는 API 문서 작성
  

화상 연결 구현

• WebRTC P2P 기술을 이용하여 화상 연결 구현
• WebSocket 기반의 시그널링 서버를 구축하여 통신을 원하는 두 클라이언트가 서로의 네트워크 정보를 교환할 수 있도록 중개
• P2P 연결이 성공적으로 수립되면, 각 클라이언트의 미디어 스트림이 서버를 거치지 않고 브라우저 간에 직접 전송되어 지연 시간을 최소화 하고 안정적인 통신 품질 확보

면접룸 CRUD 구현

• 면접룸 생성,삭제,조회 기능
• 최대 4인이 들어오도록 제한

멘토 피드백 CRUD 구현

• 화상 면접이 종료 후 멘토에게 피드백 기능

멘티 피드백 CRUD 구현

• 화상 면접 중 멘티에게 피드백 기능
• 화상 면접 종료 후 피드백 확인 가능

면접룸 디자인 구현

• 멘토와 멘티를 구분하여 다른 디자인
• 멘토 화면 질문 리스트 기능

프로젝트에서 팀장 역할을 맡아 팀원들과 원활히 소통하며 팀원들의 역량을 파악하여 적절히 역할을 분배했습니다. 프로젝트 기간을 고려해 구현에 많은 시간이 필요한 기능에 대해서는 백업 방안을 설계하여, 주요 기능을 기한 내에 완성하는 것을 목표로 스케쥴링했습니다. 초기 문서화 단계에서 명확한 요구 분석과 API 설계를 통해 개발 과정에서의 시간 낭비를 줄일 수 있었으며, 주기적으로 수행 가능 여부를 검토하여 주요 기능을 성공적으로 구현할 수 있었습니다. 주요 기능 개발을 위하여 기존에 사용하지 않던 API, HTTPS, WebRTC 등의 기술을 도입하게 되면서 팀원들의 스케쥴 관리와 컨디션 조절에 어려움을 겪기도 했지만, 책임감을 가지고 모두 노력한 끝에 성공적으로 프로젝트를 마무리할 수 있었던 점이 뿌듯합니다. 마지막 프로젝트인 만큼 기술구현에 많은 고생을 하였는데, 이 경험을 토대로 모두들 더 성장한 개발자로 한 발자국을 딛게 된 것 같아 기쁩니다.

마지막 프로젝트인 만큼, 팀원들과 함께 초기 설계 단계에서 다양한 의견을 나누며 아이디어를 구체화했습니다. 개발 과정에서는 효율적인 코드 작성과 일정 준수를 최우선으로 삼아 프로젝트를 진행하여 협업의 성과를 직접 느낄 수 있었고, 평소 도전해보고 싶었던 기능들을 배우고 적용해볼 수 있어 뜻깊은 시간이었습니다. 모든 기능을 완성하지 못해 아쉬운 부분도 있지만, 이는 향후 팀원들과 함께 더 발전시킬 계획입니다.

마지막 프로젝트라 욕심내서 낯선 기술을 사용하여 개발기간이 점점 딜레이되어 실서버에 올렸을 때 오류를 제대로 잡지 못한 것이 너무 아쉬웠습니다. 그래서 해당 프로젝트 계기로 일정관리의 중요성을 깨달았고、욕심부린만큼 https도 적용하고 도커도 사용하고 webRTC 등 시도해서 프로젝트에 적용할 수 있어서 좋았습니다.

websocket을 처음 접할 시기에는 node를 활용하여 진행하여서 3차 프로젝트에는 spring boot을 통하여 만들고 싶었습니다. 처음 생각했던 것보다 개발시간이 오래걸려서 스케줄 관리가 힘들었던 것 같습니다. 그러다보니 많은 부분을 하지 못해서 아쉽다고 느꼈습니다. 차후에는 시간을 효율적으로 써야겠다는 생각이 들었고, 컨디션 관리를 잘해야겠다고 다짐했습니다.