📊 선정한 기술 스택 요약
구분 |
기술 스택 |
버전 |
선택 이유 |
프레임워크 |
Next.js |
15.3.0 |
- App Router, 서버 컴포넌트 등 최신 기능이 안정화됨 |
- React 19 대응 및 SEO 최적화, SSR / SSG / ISR 등 복합 렌더링 전략을 유연하게 적용 가능 |
| 언어 | TypeScript | 5.8.3 | - 자바스크립트 기반의 정적 타입 언어로 오류를 사전에 방지
- GitHub Octoverse 2024 기준 JS 프로젝트 중 80% 이상이 TS 사용 |
| 스타일링 | Tailwind CSS | 4.0 | - 유틸리티 클래스 기반으로 빠른 UI 구현 가능
- 모바일 반응형 디자인에 적합
- CSS 2024 기준 가장 많이 사용되는 css 프레임워크 1위 (75% 점유) |
| 상태관리 | Zustand | 5.0.3 | - Redux보다 가볍고 설정이 간단함
- 전역 상태가 복잡하지 않은 모바일 웹에 적합
- 공식 React 문서에서도 소개됨 |
| 서버 상태관리 | TanStack Query | 5 | - API 호출, 로딩/에러 상태, 캐싱을 자동으로 처리
- 클라이언트와 서버 상태를 분리해 로직 단순화 가능 |
| API 통신 | Axios | 1.8.4 | - fetch보다 사용이 간편하고 설정 유연성 높음
- baseURL, 헤더, 인터셉터 설정 등으로 중복 제거 가능
- 응답 구조 통일화, 에러 처리 관리에 유리 |
| UI 컴포넌트 | shadcn/ui | - | - Tailwind 기반으로 디자인 일관성 유지
- 번들되지 않은 컴포넌트 사용으로 의존성에 추가하지 않고, 필요한 컴포넌트 코드를 온전히 사용할 수 있음 (**shadcn/ui (vs MUI) / shadcn/ui)**
- 빠른 UI 개발과 커스터마이징에 유리
- 접근성(A11y) 고려가 잘 되어 있음 |
| 빌드 도구 | Turbopack / Webpack | - | - 개발 환경에서는 **
Turbopack
**을 사용하여 HMR 속도와 빌드 속도를 극대화
- 프로덕션 환경에서는 **
Webpack
**을 fallback으로 사용해 안정적인 빌드 및 이미지 최적화, 플러그인 호환성 확보
- Next.js 15.3.0 기준 Turbopack은 dev에 기본 적용되며, Webpack은 production에서 안정적으로 사용됨 |
| 라우팅 | Next.js App Router | - | - SPA 라우팅 처리에 필수 기능 제공
- 선언적 구성으로 직관적이고 유지보수 쉬움 |
0. 서비스 소개
<aside>
💌
**Tuning(튜닝)**은 조직 기반의 소셜 매칭 커뮤니티 플랫폼으로, 동일한 소속(학교, 회사, 부트캠프 등)을 기반으로 AI가 관심사가 비슷한 사람과 자연스럽고 신뢰할 수 있는 인연을 만들어주는 서비스입니다.
동일한 소속을 바탕으로 신뢰를 기반으로 한 자연스러운 만남을 유도하며, 단순한 매칭을 넘어서 뉴스 리포트 형태의 피드 콘텐츠로 매칭 결과를 콘텐츠화합니다. 기존 매칭 서비스의 진입장벽과 신뢰성 부족 문제를 해결하고, 소속 기반의 진정성 있는 관계 형성을 목표로 합니다.
</aside>
1. Next.js 15.3.0
1-1. 서비스 주요 기능별 기술 설계
기능명 |
렌더링 방식 |
카카오 로그인 |
CSR + API |
온보딩 (키워드 선택) |
CSR |
메인 페이지 |
CSR |
1:1 매칭 |
CSR |
1:N 매칭 |
CSR |
1:1 채팅방 |
CSR (실시간) |
1:N 채팅방 |
CSR (실시간) |
기사 리포트 (피드) |
SSR |
채팅방 목록 |
CSR |
프로필 수정 |
CSR |
마이페이지 |
CSR |
알림창 (기기 알림 포함) |
CSR + Service Worker |
취향 선택 수정 |
CSR |
<aside>
👩🏻💻
사용하는 기술 설명
- SSR 적용 대상: 검색이 필요한 콘텐츠 (기사 리포트 피드) → SEO 최적화가 필요하기 때문에
- CSR 적용 대상: 사용자 상호작용 / 실시간성 / 입력 처리 중심 기능 (채팅, 매칭, 온보딩 등)
- 실시간 처리: WebSocket 기반의 이벤트 처리
- 알림: FCM + Service Worker로 브라우저 푸시 알림 연동
</aside>
1-2. 선정 이유
- Tuning 서비스는 조직 기반 소셜 매칭 커뮤니티 플랫폼으로, 매칭된 사람들의 정보를 기사 형태로 보여주는 ‘매칭 리포트’를 중심으로 동적 피드 콘텐츠를 제공하는 서비스이다. 기사는 사용자 반응과 키워드를 기반으로 생성되며, 검색 노출이 중요하기 때문에 더 많은 사용자 유입을 확보하려면? → SSR 기반의 SEO 최적화가 필수적이다
- CSR 방식의 **
React
**는 초기 HTML이 비어있어 SEO에 매우 불리하지만, **react-helmet
**을 사용해 페이지별 메타태그를 설정하거나, **react-snap
**을 통해서 정적 프리렌더링을 구현함으로써 어느 정도 보완이 가능하다. (react-helmet으로 페이지별 SEO 메타태그 설정하기 / react-snap으로 pre-rendered 리액트 앱 만들기)
- 하지만 이러한 방식은 모든 페이지에 일관된 SEO 최적화를 적용하기 어렵고, 빌드 시간이 늘어나며 복잡한 라우팅 구조나 사용자 인증 흐름과 호환이 떨어진다는 문제가 있다. 반면 **
Next.js
**는 SSR을 기본적으로 지원하며, 초기 HTML에 콘텐츠가 포함되어 검색엔진에 자연스럽게 노출된다. 특히 동적 피드 기반 콘텐츠에서는 훨씬 효율적인 SEO 대응이 가능해 유입 트래픽 확보에 아주 큰 장점이 된다.