담당 역할
기술 스택
주요 기능
모집글 작성 및 조회
- 프로젝트/스터디 팀원 모집글 작성
- 작성자에게 모집글에 적합한 유저를 AI로 추천
- 추천받은 유저에게 제안 발송 가능
- 지원자는 원하는 포지션으로 지원
내가 작성한 모집글
- 보낸 제안, 받은 지원, 매칭 내역 확인
- 지원 수락 기능
- 매칭된 유저의 매칭 취소 기능
지원자와 모집자 간 프로필 확인 및 소통
- 지원자는 모집글 작성자에게 채팅 신청 가능
- 모집글 작성자는 지원자의 프로필 확인 가능
내가 참여한 모집글
- 보낸 지원, 받은 제안, 매칭 내역 확인
- 지원 취소 기능
- 매칭된 팀의 매칭 취소 기능
트러블슈팅
개발/운영 환경 분리를 통한 팀 협업 개선
문제 상황
개발자 의존적인 확인 프로세스
비개발자 팀원(PM, 디자이너)이 개발 진행 상황을 실시간으로 확인하고자 할 때 로컬에서 직접 프론트엔드 서버를 실행하기 어려움
프론트엔드 개발자가 운영 서버에 배포하면 팀원들에게 알리는 방식으로 협업
느린 피드백 주기
운영 서버는 신중한 배포를 위해 1~2주에 한 번만 배포하기 때문에, 피드백이 늦게 반영되어 수정 사항이 누적되고 이후 구현된 기능들까지 함께 수정해야 하는 문제 발생
해결 및 결과
환경 분리
- dev.dodream.site: 개발 환경 (하루 1회 이상 배포)
- dodream.site: 운영 환경 (1~2주 1회 배포)
서브도메인 구성
- Nginx 리버스 프록시로 도메인별 라우팅
- 포트 3000(운영), 3001(개발)로 분리
개발 서버 접근 제어
- Basic Authentication으로 개발 환경 접근 제한
- 개발 서버에는 인증된 사용자(팀)만 접근하도록 허용
자동 배포
- GitHub Actions로 브랜치별 자동 배포 설정
- develop → dev / main → prod
개발 속도와 안정성 확보
인증 방식 개선을 통한 사용자/개발자 경험 개선
문제 상황
로그인 완료 후 리다이렉트 시 깜빡임
소셜 로그인 완료 후 콜백 페이지로 리다이렉트 시 클라이언트 컴포넌트의 로딩 스피너가 일시적으로 노출될 수밖에 없는 문제
미들웨어에서 인증 처리 불가
인증이 요구되는 페이지의 경우 각 페이지 레이아웃에서 개별적으로 인증 확인
원인
인증 토큰이 서버에서 읽을 수 없는 저장소인 로컬 스토리지에 있어 SSR/서버 컴포넌트/미들웨어에서 접근 불가능
해결 및 결과
인증 방식 개선
- Next.js 환경에서의 한계를 문서로 정리해 백엔드에 쿠키 기반 인증 전환 제안 및 합의
- 콜백 페이지를 서버 컴포넌트로 전환해 인증 확인 후 서버에서 즉시 리다이렉트
- 미들웨어(프록시)에서 프라이빗 라우트 일괄 관리
사용자/개발자 경험 향상
미들웨어 기반 라우트 보호로 일관된 접근 제어 가능
Lighthouse 성능 점수 개선
문제 상황
전반적인 Lighthouse 점수 저하
Performance 80, Best Practices 77, Accessibility 87로 SEO를 제외한 나머지 지표 전반적인 개선 필요
이미지 최적화로 LCP 개선 실패
LCP 병목이 메인 배너 이미지라 판단하여 이미지 속성을 반복 수정했으나 개선되지 않아 재분석
실제 원인은 한글 폰트 전체 로딩임을 발견
해결 및 결과
성능 및 접근성 개선
- 한글 폰트를 전체 → 사용 중인 4가지 weight의 subset으로 교체 (LCP 2.9s → 1.4s, 약 50% 감소)
- 불필요한 라이브러리 및 Provider 제거 (Best Practices 77 → 100)
- 스켈레톤 UI 적용으로 레이아웃 이동 방지 (CLS 0.159 → 0)
- aria-label 누락 항목 수정 등 접근성 개선 (Accessibility 87 → 92)
Lighthouse After (PC, 홈 화면 기준)
