작성일	2024-04-20
버전	1.0
작성자	suzy.kang (강수지)
검토자	kevin
상태	초안

버전	날짜	작성자	검토자	변경내용
1.1	2025-04-21	suzy.kang (강수지)	kevin	1. Typescript 버전 변경 (5.8.3 → 5.4.5) 2. use() + TanStack Query 혼합해서 사용하도록 변경

본 문서는 프로젝트의 프론트엔드 기술 스택 선정 기준과 아키텍처 설계 방향을 정의합니다.

• 핵심 기술 스택 선정
• 개발 환경 구성
• 품질 관리 방안
• 개발 프로세스 정의

• 프로젝트 규모 적합성: 프로젝트 규모와 복잡도에 적합한 기술
• 팀 숙련도: 팀 구성원의 기술 이해도와 학습 곡선
• 커뮤니티 활성도: 지속적인 업데이트와 문제 해결 용이성
• 성능과 번들 크기: 초기 로딩 시간과 실행 성능
• 유지보수성: 코드 품질과 문서화 수준
• 라이선스: 상업적 사용 가능 여부

• 해당 프로젝트는, 프론트엔드가 혼자서 개발함. 복잡한 로직을 작성할 때 의도한 대로 동작 하는지 즉시 확인 가능하고 실수를 예방 할 수 있음
• 프론트엔드 개발자의 기존 경험으로 러닝커브 없이 진행 가능, 생산성이 향상
• 특별하게 5.4 버전을 선정한 이유
  • nextjs가 요구하는 버전에 적합 (5+)
  • 5.5+ 버전은 일부 ESLint/Prettier 호환성 이유가 있는 상태, 릴리즈 버전의 안전성과는 별개
  • 5.4 버전은 아래 사용하는 라이브러리와 호환성 문제 없음.
  • 새로운 TS 기능을 적극적으로 쓰지 않는 이상, 검증된 안정성과 호환성이 더 중요하다고 판단.
  • 5.4 버전은 주요 툴이 다 대응된 안정된 버전에서 5.3보다 속도 + 타입 추론 정확도가 증가.

• tsconfig.json 설정
• strict 사용 여부
• 타입 정의 위치
• 네이밍 컨벤션
• any 사용 정책

평가 기준	TypeScript	JavaScript
주요 특징	• 정적 타입 시스템 • 인터페이스/제네릭 • 타입 추론 • 컴파일 시점 오류 감지 • IDE 지원 우수	• 동적 타입 • 유연한 문법 • 빠른 프로토타이핑 • 즉시 실행 • 낮은 진입 장벽
프로젝트 규모 적합성	⭐⭐⭐⭐⭐ • 팀 협업에 적합	⭐⭐⭐ • 빠른 개발 필요 시 적합
팀 숙련도	⭐⭐⭐⭐ • TS 개발 경험 있음	⭐⭐⭐⭐ • JS 개발 경험 있음
개발 생산성	⭐⭐⭐⭐ • 초기 설정 필요 • 타입 정의 시간 필요 • 장기적으로 생산성 향상	⭐⭐⭐⭐⭐ • 빠른 시작 • 적은 보일러플레이트 • 단기 생산성 높음
유지보수성	⭐⭐⭐⭐⭐ • 타입 안정성 • 리팩토링 용이 • 자동완성 지원 • 문서화 효과	⭐⭐ • 런타임 오류 위험 • 리팩토링 어려움 • 문서화 추가 필요
디버깅 용이성	⭐⭐⭐⭐⭐ • 컴파일 시점 오류 감지 • IDE 지원 우수	⭐⭐⭐ • 런타임 시점 오류 발견 • 디버깅 시간 증가

• 러닝 커브 거의 없음

  → 프론트엔드 개발자의 기존 경험 존재

  → 생산성 향상 가능

• SSR/SSG 지원으로 SEO 최적화 가능

  → 돌핀 서비스에서 장소에 대해 검색 했을 때, 검색엔진에 노출이 되면 유저 확보에 도움을 받을 수 있음.

  → 다른 프레임워크에서도 SSR/SSG를 사용하지 못하는 것은 아니지만 추가 툴이 필요하고 설정이 복잡해서 러닝커브 발생

• nextjs typescript 지원

  → 돌핀 서비스는 타입스크립트 사용, 호환성이 좋음.

• 이미지 최적화

  → 돌핀 서비스는 장소 이미지도 보여주고, 기록을 권고하는 서비스이기 때문에 이미지를 많이 사용할 것 임.

  → fetch 로 받은 이미지 url을 바로 사용하면 최적화가 안되지만, 이미지 프록시를 사용해서 최적화 예정.

  → nextjs 에서는 수동으로 이미지 최적화를 해야하는 다른 프레임워크와 다르게 자동으로 이미지 최적화를 해주기 때문에 생산성 향상

• 특별하게 15.3.0 버전을 선정한 이유

  • 향후 마이그레이션 비용 절감을 위해 최신 버전 사용
  • 13+ 버전부터 사용되는 App Router 방식 사용 경험 있어서 러닝커브 없이 진행
  • 리액트 19 버전을 완벽하게 지원함. 돌핀 서비스에선 19 버전에 새로 생긴 리액트 내장 훅 use() 을 이용해서 supense, 에러 경계, 데이터 패칭을 편리하게 사용 할 것임.
  • 돌핀 서비스에서 사용하는 LLM은 응답 시간이 일반 서버 응답보다 긴 편이기 때문에 supense 를 이용해서 lazy loading 을 구현
  • 외부 라이브러리에서도 lazy loading 을 구현할 수 있지만, 외부 의존성이 커지고 번들의 크기가 내장 라이브러리보다 커질 수 있음. 돌핀 서비스에서 원하는 기능은 suspense 로 충분하기 때문에 외부라이브러리를 사용하지 않음.
  • react hook form 같은 외부라이브러리를 사용하지 않고, 서버에서 직접 formData를 처리.

• 렌더링 전략 선택
• 라우팅 구조
• 메타데이터 설정

• Node.js : 23.7.0
• React: 19.1.0
• React DOM : 19.1.0

평가 기준	Next.js	Vite + React	Angular	Vue.js
주요 특징	• SSR/SSG 지원 • 파일 기반 라우팅 • TypeScript 지원 • API 라우트 • 이미지 최적화	• 빠른 개발 환경 • 간단한 설정 • HMR 지원 • 유연한 구조	• 완전한 프레임워크 • CLI 도구 • 의존성 주입 • RxJS 통합	• 점진적 프레임워크 • 반응형 시스템 • 컴포지션 API • SFC 지원
프로젝트 규모	⭐⭐⭐⭐⭐ 대규모 프로젝트 SEO 중요 서비스	⭐⭐⭐⭐ 중소규모 프로젝트 빠른 프로토타입	⭐⭐⭐⭐⭐ 대규모 프로젝트	⭐⭐⭐⭐ 중소규모 프로젝트
팀 숙련도	⭐⭐⭐⭐ 경험 있음	⭐⭐⭐⭐ 경험 있음	⭐ 러닝커브 존재	⭐⭐ 직관적 API
커뮤니티 활성도	⭐⭐⭐⭐⭐ 생태계 활성화 레퍼런스 풍부	⭐⭐⭐⭐⭐ React 생태계 Vite 성장 중	⭐⭐⭐⭐ 안정적 생태계 기업 지원	⭐⭐⭐⭐ Vue 생태계 레퍼런스 다수
성능/번들 크기	⭐⭐⭐⭐ 자동 최적화 중간 번들 크기	⭐⭐⭐⭐⭐ 매우 빠른 빌드 효율적 번들링	⭐⭐⭐ 최적화 도구 제공 초기 번들 큼	⭐⭐⭐⭐ 빠른 런타임 작은 번들 크기
유지보수성	⭐⭐⭐⭐⭐ 타입 안정성 명확한 구조	⭐⭐⭐⭐ 설정 필요 자유로운 구조	⭐⭐⭐⭐⭐ 엄격한 구조 높은 일관성	⭐⭐⭐⭐ 쉬운 유지보수 유연한 구조
라이선스	MIT	MIT	MIT	MIT

• 러닝 커브가 거의 없음

  → 프론트엔드 개발자는 context 사용 경험만 존재

  → 학습 곡선이 적은 라이브러리가 필요함

  → zustand 는 공식문서를 보았을 때, 직관적으로 사용방법이 와닿았음.

• 번들 사이즈가 작음

  → 돌핀 서비스는 주로 모바일 웹 환경에서 사용 되는 서비스이기 때문에 작은 번들 사이즈가 중요함

  → zustand 는 다른 상태 관리 라이브러리들과 비교했을 때, 번들 사이즈가 가장 작음.

• 서버 컴포넌트 호환성 좋음

  → React 19, App Router 기반에서도 클라이언트 컴포넌트에서 자연스럽게 사용 가능

  → 서버 컴포넌트에선 상태 접근은 제한되지만 구조 설계로 분리 가능하고 가이드도 제공해주고 있음.

• 특별하게 5.0.3 버전을 선정한 이유

  → named export 만 지원되도록 변경 되었는데, named export 는 돌핀의 프론트엔드 팀 export 컨벤션과 적합함.

  → React 18 이상, Typescript 4.5 버전에서만 동작하는데, 돌핀 서비스에서 사용하는 React, Typescirpt 와 요구사항에 적합함

  → replace 기능을 쓸 때, v4 때는 타입 검사를 하지 않아서 데이터가 유실 가능성이 있었는데 v5 에서는 타입을 정확희 정의해줘야 오류가 안나도록 업데이트. 돌핀 서비스에선 프론트엔드 개발자 혼자 개발해서 누군가 실수를 찾아주기 어려울 수도 있는데, 해당 기능으로 데이터가 유실되는 실수를 방지할 수 있다.

• 서버 컴포넌트와 분리
• 직접적인 상태 공유 주의
• 상태 초기화 관리 필요
• 파일 구조 분리 ( useMapStore, useUserStort 등 역할 쪼개기)
• persist 사용 시, 민감 정보 저장하지 않도록 주의

평가 기준	Zustand	Redux	Recoil	Jotai	MobX
주요 특징	• 간단한 API • 작은 번들 • TypeScript 친화적	• 중앙 저장소 • 불변성 강조 • 미들웨어/DevTools	• 원자 단위 관리 • 비동기 처리 • React 전용	• 원자 기반 설계 • Suspense 지원 • 매우 작음	• 자동 상태 추적 • 반응형 • 객체지향적
학습 곡선	⭐⭐⭐⭐⭐ 매우 쉬움	⭐⭐ 복잡한 보일러플레이트	⭐⭐⭐⭐ 직관적	⭐⭐⭐⭐ 단순함	⭐⭐⭐ 관찰자 패턴 이해 필요
성능	⭐⭐⭐⭐⭐ 매우 효율적	⭐⭐⭐ 리렌더링 최적화 필요	⭐⭐⭐⭐ 자동 최적화	⭐⭐⭐⭐⭐ 원자 단위 업데이트	⭐⭐⭐⭐ 자동 최적화
번들 크기	⭐⭐⭐⭐⭐ ~1KB 작음	⭐⭐ ~22KB 큼	⭐⭐⭐ ~20KB 중간	⭐⭐⭐⭐⭐ ~2KB 매우 작음	⭐⭐⭐ ~16KB 중간
개발자 도구	⭐⭐⭐⭐ DevTools 호환	⭐⭐⭐⭐⭐ 강력한 Redux DevTools	⭐⭐⭐ 기본 제공	⭐⭐⭐ 기본 제공	⭐⭐⭐⭐ MobX DevTools
TypeScript 지원	⭐⭐⭐⭐⭐ 완벽 지원	⭐⭐⭐⭐ 매우 잘 지원	⭐⭐⭐⭐⭐ 기본 TS 지원	⭐⭐⭐⭐⭐ 기본 TS 지원	⭐⭐⭐⭐ 데코레이터 기반
커뮤니티/생태계	⭐⭐⭐⭐ 활발한 커뮤니티	⭐⭐⭐⭐⭐ 매우 큰 커뮤니티	⭐⭐⭐⭐ Meta 기반 커뮤니티	⭐⭐⭐ 성장 중	⭐⭐⭐⭐ 안정적 커뮤니티
적합한 프로젝트	간단한 상태 관리 빠른 개발 필요	대규모 복잡한 상태 관리	비동기 처리 많은 React 앱	작은 규모 React 앱	반응형 복잡한 도메인

• 생산성 향상

  → 클래스 단위로 스타일을 바로 적용할 수 있어 구현 속도가 빠르고, 별도 css 파일 없이 컴포넌트 안에서 스타일링 가능

  → 돌핀 서비스의 MVP 개발은 1~2주 내에 빠르게 개발이 되어야 함.

• 유틸리티 퍼스트 접근

  → 유틸리티 클래스로 바로 적용 가능하기 때문에 빠르게 UI 구성이 가능

• 커스터마이징 용이

  → 돌핀 서비스는 브랜드 색상이 정해져 있고, 폰트가 정해져있기 때문에 테마처럼 사용 예정

• 성능 최적화

  → 실제 사용된 클래스만 최종 CSS 에 포함되므로 장소 리스트가 길어진다 하더라도 css 에 크게 부하를 주지 않으 것임.

• 특별하게 4.1 버전을 선정한 이유

  → v3 에서 v4 로 넘어오면서 빌드가 3.7배 빨라져서 더 효율적으로 개발 가능

• 클래스가 길어지면 JSX가 지저분해져서 가독성이 저하될 수 있음
  • Headwind 확장 프로그램 설치하기
  • 공통 스타일 @apply 사용하여 분리

평가 기준	Tailwind CSS	CSS-in-JS	CSS Modules	SCSS/SASS	Vanilla CSS
주요 특징	• 유틸리티 기반 • 높은 생산성 • 빠른 커스터마이징	• JS 통합 • 동적 스타일링 • 컴포넌트 기반	• 지역 스코프 • CSS 문법 유지	• 변수/믹스인 • 중첩 문법 • 전처리기	• 순수 CSS • 브라우저 기본 지원
학습 곡선	⭐⭐⭐⭐ 클래스 이름 익숙해져야 함	⭐⭐⭐ JS/React 지식 필요	⭐⭐⭐⭐⭐ 익숙한 CSS 문법	⭐⭐⭐ 전처리기 문법 필요	⭐⭐⭐⭐⭐ 매우 쉬움
성능	⭐⭐⭐⭐⭐ 사용한 클래스만 포함	⭐⭐⭐ 런타임 오버헤드 있음	⭐⭐⭐⭐ 빌드타임 최적화	⭐⭐⭐⭐ 컴파일 후 성능 좋음	⭐⭐⭐⭐⭐ 최적화 없음
개발 경험	⭐⭐⭐⭐ 빠른 UI 작업 가능	⭐⭐⭐⭐⭐ 컴포넌트 중심	⭐⭐⭐⭐ 간단함	⭐⭐⭐⭐ 구조화 용이	⭐⭐⭐ 매우 기본적
유지보수	⭐⭐⭐ 클래스 관리 필요	⭐⭐⭐⭐ 컴포넌트 단위로 깔끔함	⭐⭐⭐⭐ 모듈화 쉬움	⭐⭐⭐⭐ 명확한 구조화	⭐ 전역 스코프로 충돌 위험
번들 크기	⭐⭐⭐⭐⭐ 매우 작음	⭐⭐⭐ 비교적 큼	⭐⭐⭐⭐⭐ 최소한의 CSS	⭐⭐⭐⭐ 컴파일 후 중간	⭐⭐⭐⭐⭐ 가장 작음
적합한 프로젝트	빠른 프로토타입 디자인 시스템 적용	React 기반 동적 스타일링	간단한 컴포넌트	복잡한 디자인 중규모 이상	간단한 웹사이트

• Tailwind 친화적

  →이미 돌핀 서비스에서 Tailwind 를 쓰기로 한 상태라 자연스럽게 통합됨

• 빠른 MVP 개발

  → 돌핀 서비스에 필요한 버튼, 입력창, 드롭다운, 토글 등 다 갖춰져 있음.

• 필요한 것만 가져옴

  → 전체 라이브러리를 설치하지 않고 필요한 컴포넌트만 복사해서 쓰는 구조

  → 주로 모바일 웹 환경에서 사용되는 돌핀 서비스는 번들 크기가 중요한데 번들 크기 최소화 할 수 있음

• 일부 동작은 Radix 문서를 참고해야할 수 있다.
• 커스터마이징이 자유로워 스타일 일관되도록 신경 써야 한다.

평가 기준	shadcn/ui	MUI (Material UI)	Chakra UI	Radix UI
스타일링 방식	Tailwind 기반	Emotion 기반	Emotion 기반	Headless (스타일 없음)
디자인 철학	⭐⭐⭐⭐ 유연하고 미니멀한 구성	⭐⭐⭐⭐ 구글 Material Design 준수	⭐⭐⭐ 쉬운 접근성과 일관성 강조	⭐⭐⭐⭐ 기능 위주 구성 요소
접근성(a11y)	⭐⭐⭐⭐ Radix 기반으로 우수	⭐⭐⭐⭐ 기본적으로 접근성 준수	⭐⭐⭐⭐ WAI-ARIA 준수	⭐⭐⭐⭐⭐ WCAG 기준에 맞춘 설계
컴포넌트 수	⭐⭐⭐ 필요한 것만 제공	⭐⭐⭐⭐⭐ 매우 다양한 컴포넌트	⭐⭐⭐⭐ 일반적인 구성 요소 포함	⭐⭐ 기본적인 요소 위주
사용 난이도	⭐⭐⭐⭐ Tailwind에 익숙하면 쉬움	⭐⭐⭐ 빠른 적용 가능	⭐⭐⭐⭐ 직관적인 사용	⭐⭐ 직접 스타일링 필요
커스터마이징 자유도	⭐⭐⭐⭐⭐ 완전 자유로운 구성	⭐⭐⭐ 테마 기반 제어	⭐⭐⭐⭐ 손쉬운 테마 커스터마이징	⭐⭐⭐⭐⭐ 완전 Headless로 유연함
프로젝트 적합도	디자인 시스템 커스터마이징 필요한 경우	대규모 프로젝트 표준화된 디자인 필요	빠른 MVP 또는 디자인 간편한 앱	기능별 UI 구성 디자인 자유롭게 설정 가능
설치 용량	⭐⭐⭐⭐ 경량 구성 가능	⭐⭐ 상대적으로 무거움	⭐⭐⭐ 적당한 설치 용량	⭐⭐⭐⭐ Headless라 가벼움

use()

→ 최신 React 19의 use() 훅을 지원하여 간편한 데이터 패칭 가능

→ 돌핀 서비스는 React 19 사용하므로, use() 훅 활용

→ suspense와 함께 사용해 로딩 처리를 사용자 친화적으로 처리 할 수 있음

→ error 객체를 throw하면 자동으로 에러 경계 처리 가능

→ 서버 컴포넌트 환경에서 완벽하게 작동 → 돌핀 서비스에서 필요한 SEO와 성능 개선

→ React 팀 공식 지원 → 장기적으로 유지보수 및 발전 기대

→ 돌핀 서비스의 메인 지도 로딩과 장소 리스트에서 사용, 빠른 초기 렌더 SEO 대응 가능.

→ TanStack Query 도 SEO 대응은 가능하지만, prefetch, dehydrate, hydrate 처리로 인해 코드 복잡도가 높아지고 Suspense 연동도 수정처리가 필요로 해서 비용 발생하므로 React 내장 훅 활용

TanStack Query (v5)

→ 클라이언트 쿼리에 강력함 (mutation, revalidate, background update 처리 등)

→ 돌핀 서비스에서 기록 작성/수정, 북마크, 장소 필터링 기능에서 사용 예정.

→ 돌핀 서비스는 zod 라이브러리를 활용해 유효성 검사를 진행하는데, TanStack Query v5 와 통합이 우수함

→ React 18 이상 요구하고, 각 라이브러리 간 의존성 문제 없음.

• 클라이언트 컴포넌트에서는 use() 사용 불가

  → TanStack Query 라이브러리로 한계 극복

• Suspense와 Error Boundary가 전제되어야 함 → 구조적 설계 필요

• streaming 방식 사용 시 주의 필요 (데이터 흐름에 따른 컴포넌트 위치 고려

• 서버 컴포넌트에서는 fetch에 내장된 캐싱 정책 활용
  • 기본값: force-cache
  • 필요 시 옵션으로 no-store, force-cache, revalidate 설정 가능
• 정적 캐싱: build-time에 데이터 생성 → SSG
• 동적 캐싱: runtime에 fetch, TTL 설정으로 stale 데이터 처리
• revalidate 태그로 ISR(Incremental Static Regeneration) 구현 가능
• 해당 부분은 프론트엔드 개발자 경험 없음, 학습 필요

• 서버 컴포넌트에서 발생한 에러는 자동으로 Error Boundary에 전달
• Suspense에 함께 포함되는 구조에서 오류 경계와 로딩 상태를 명확히 나눌 수 있음
• 비동기 함수에서 throw로 에러 발생 → 전역 에러 처리 가능

평가 기준	React use()	SWR	React Query
주요 사용 위치	⭐⭐⭐⭐ 서버 컴포넌트 전용	⭐⭐⭐⭐ 클라이언트 컴포넌트	⭐⭐⭐⭐ 클라이언트 컴포넌트
설치 필요 여부	⭐⭐⭐⭐⭐ 내장 API	⭐⭐⭐ 별도 설치 필요	⭐⭐⭐ 별도 설치 필요
Suspense 연동	⭐⭐⭐⭐⭐ 완벽 연동	⭐⭐⭐ 일부 지원	⭐ 지원 불완전
캐싱 전략	⭐⭐⭐⭐⭐ 자동 캐싱	⭐⭐⭐⭐⭐ Stale-While-Revalidate	⭐⭐⭐⭐⭐ 캐싱 전략 유연
타입 안정성	⭐⭐⭐⭐ TypeScript 지원	⭐⭐⭐⭐ TypeScript 지원	⭐⭐⭐⭐⭐ TS + Zod 통합 우수
에러 핸들링	⭐⭐⭐⭐⭐ Error Boundary 자동 연동	⭐⭐⭐⭐ 수동 에러 핸들링 필요	⭐⭐⭐⭐ 수동 설정 필요
데이터 리페치	⭐ 기본 없음 (수동 구현 필요)	⭐⭐⭐⭐⭐ focus/revalidate 자동	⭐⭐⭐⭐⭐ 다양한 리페치 옵션 지원
클라이언트 적합성	⭐ 서버 전용	⭐⭐⭐⭐⭐ 클라이언트 전용	⭐⭐⭐⭐⭐ 클라이언트 전용

• 러닝 커브 거의 없음

  → 프론트엔드 개발자가 Zod 사용 경험 있음

  → 빠르게 도입 가능하고 생산성 향상

• 타입스크립트와 높은 호환성

  → Zod는 런타임과 타입 레벨에서 모두 타입 검증 가능

  → z.infer를 통해 API 응답, 폼 데이터 등에 타입 안전성 확보 가능

• 일관된 유효성 검사 구조

  → 서버와 클라이언트에서 동일한 스키마로 검증 가능

  → 중복 로직 없이 유지보수에 유리

• 다양한 범용성

  → form validation, API 응답 스키마 검증, query param validation 등

  → 전반적인 데이터 흐름에서 사용 가능

• Next.js App Router와의 높은 호환성

  → 돌핀 서비스에서 선택한 서버 액션 / Route Handler에서 동일한 스키마 재사용 가능

• 특별하게 3.24.3 버전을 선정한 이유

  → 가장 최신의 안정 버전

  → 2 버전에는 없었던 z.custom() 생기면서 기본적으로 제공해주지 않는 유효성 검사도 커스텀 가능.

  → 돌핀 서비스에는 특별히 커스텀 해야 할 유효성 처리가 없을 것으로 예상하나, 타입 안정성도 개선 되었기 때문에 v2 를 사용 할 논리가 더 부족하다고 판단.

• 서버와 클라이언트 스키마 공유 여부

  → 입력값 스키마를 공통으로 재사용하기 위해, zodSchemas 폴더 등으로 분리

• 에러 메시지 커스터마이징

  → 기본 메시지 외에 사용자 친화적인 에러 메시지 커스터마이징 고려 필요

• 성과

  → 런타임 검증이기 때문에 번들 크기 고려 필요 (하지만 Zod는 매우 경량)

평가 기준	Zod	React Hook Form (RHF)	Yup
타입스크립트 호환성	⭐⭐⭐⭐⭐ 최고 수준	⭐⭐⭐⭐ 타 라이브러리와 조합	⭐⭐⭐ 타입 보완 필요
러닝 커브	⭐⭐⭐⭐⭐ 직관적 API	⭐⭐⭐⭐ 초기 학습 필요	⭐⭐⭐ 약간 더 복잡
클라이언트 검증	⭐⭐⭐⭐	⭐⭐⭐⭐⭐	⭐⭐⭐⭐
서버/클라이언트 스키마 공유	⭐⭐⭐⭐⭐	⭐️ 불가	⭐️ 불가
커스터마이징 유연성	⭐⭐⭐⭐	⭐⭐⭐⭐⭐	⭐⭐⭐⭐
에러 메시지 커스터마이징	⭐⭐⭐⭐	⭐⭐⭐⭐	⭐⭐⭐⭐
번들 크기 영향	⭐ 조금 있음	⭐️ 거의 없음	⭐️ 결합성 (React Query 등)
결합성 (React Query 등)	⭐⭐⭐⭐⭐	⭐️	⭐

• 카카오부트캠프와의 연관성

  → 돌핀 서비스는 카카오 부트캠프 기반으로 개발되는 프로젝트이며, 카카오와 연관성을 고려해 카카오맵을 우선적으로 선택

• 사용자 친화적 인터페이스

  → 국내 사용자에게 익숙한 지도 UI 제공

  → 실시간 길찾기, 장소 검색, 마커 커스터마이징 등 다양한 기능 제공

• JavaScript SDK 기반의 프론트엔드 친화성

  → React 환경에서 쉽게 연동 가능 (e.g., useEffect 기반 지도 초기화)

  → 마커, 클러스터, 인포윈도우 등의 요소를 코드 레벨에서 직접 제어 가능

• 비용 측면 유리

  → 기본 할당량이 높고, 과금 정책이 비교적 유연함

  → 무료로도 충분히 MVP 개발 가능

• 특별하게 2.7.5 버전을 선정한 이유

  → 에러 수정이나 내부 코드 개선 된 이력 확인 후 최신 버전 선택

  → 기능에 대한 특별점을 찾을 순 없었음.

• 지도 로딩 방식
  • 초기 페이지 로딩 성능에 영향을 줄 수 있으므로 비동기 로딩 및 로딩 상태 처리 필요
  • Suspense 또는 Lazy load를 통한 지연 로딩 고려
• 지도 SDK 버전
  • 카카오맵은 2D/3D 버전이 있으며, 대부분의 서비스는 2D SDK를 사용
• 마커, 오버레이, 클러스터링 구현
  • 커스텀 마커, 다중 장소 렌더링 시 성능 최적화 고려
  • LLM 응답에 따른 마커 동적 갱신 기능 구현 예정
• API 제한 및 사용량
  • 하루 호출 제한(기본 30만 건) 초과 시 대비책 필요
  • 키 보안 (도메인 제한, 서버사이드 프록시) 적용

평가 기준	Kakao Map	Naver Map	Google Map
로컬화	⭐⭐⭐⭐⭐ 한국에 최적화	⭐⭐⭐⭐ 한국에 최적화	⭐⭐⭐ 글로벌 위주
커뮤니티/지원	⭐⭐⭐⭐ 부트캠프/국내 커뮤니티	⭐⭐⭐ 국내 커뮤니티	⭐⭐⭐⭐⭐ 글로벌 문서, 레퍼런스 풍부
기능 다양성	⭐⭐⭐⭐ 마커, 클러스터, 장소 검색 등 풍부	⭐⭐⭐⭐ 비슷한 수준	⭐⭐⭐⭐⭐ 풍부하나 유료
프론트엔드 연동 편의성	⭐⭐⭐⭐ JS SDK, 직접 컨트롤 가능	⭐⭐⭐ JS SDK 제공	⭐⭐ SDK 구조 복잡
비용	⭐⭐⭐⭐ 기본 무료, 과금 유연	⭐⭐⭐ 기본 무료, 사용량 제한	⭐ 유료 기반, 과금 큼
사용자 경험	⭐⭐⭐⭐⭐ 친숙한 UI, 국내 최적화	⭐⭐⭐⭐⭐ 친숙한 UI, 국내 최적화	⭐ UI 상이, 낯설 수 있음
지도 커스터마이징	⭐⭐⭐⭐ 마커, 오버레이 자유도 높음	⭐⭐⭐ 제약 있음	⭐⭐⭐⭐⭐ 다양한 옵션 제공

• Next.js에 종속적이지만, 돌핀 서비스는 Next.js 사용하고 있어서 새로운 빌드 도구를 설정해야 할 논리 부족.

• Webpack fallback 기능도 그대로 유지되기 때문에, Turbopack이 지원하지 않는 기능은 Webpack으로 처리 가능

  → 실용적인 유연성 확보

• Next.js 팀에서 직접 관리하는 빌드 툴이기 때문에, 최신 버전의 기능과 API들과도 가장 높은 호환성을 가짐.

• 기본적으로 사용 가능한 상태로 번들링 속도, 빠른 HMR, 병렬 처리 등 Rust 기반 성능 향상이 적용됨.

• 자동 트리쉐이킹, 이미지 최적화, 코드 스플리팅, 미들웨어 기반 SSR까지 모두 기본 제공되어 별도 설정이 거의 필요 없음.

• 특별하게 1.5.3 버전을 선정한 이유

  → Next.js 15.3.0에 통합되어 함께 제공되는 내부 Turbopack 버전

  → 1.5.x대는 실제로 많은 사용자들이 실서비스에 도입 중인 안정성 높은 릴리즈이며, 베타나 알파 태그가 붙은 실험 버전이 아님.

  → Next.js 팀에서 직접 관리하는 빌드 툴이기 때문에, 최신 버전의 기능과 API들과도 가장 높은 호환성을 가짐.

• Turbopack은 아직 완전한 Webpack 대체는 아님. 일부 커스텀 설정이나 플러그인에 제한이 있을 수 있음.

평가 기준	Next.js 15.3.0 (Turbopack)	Webpack	Vite
속도	⭐⭐⭐⭐ Rust 기반 병렬 처리	⭐ 설정에 따라 다름	⭐⭐⭐⭐ ESM + 캐시 활용
최적화 기능	⭐⭐⭐⭐ 기본 제공	⭐ 직접 설정 필요	⭐⭐⭐ 플러그인 활용 필요
커스터마이징	⭐ 제한적	⭐⭐⭐⭐ 자유도 높음	⭐⭐⭐⭐ 간단한 설정으로 가능
생태계	⭐⭐⭐ Next.js 중심	⭐⭐⭐⭐ 범용	⭐⭐⭐⭐ 범용 + React 친화적
프로젝트와의 호환성	⭐⭐⭐⭐⭐⭐⭐ Next.js 기본 제공	⭐ 추가 설정 필요	⭐ Next.js와 통합 복잡도 있음