Files

byeongcheolryu 2307b1f2c0 [docs]: 프로젝트 문서 추가

세부 항목:
- 인증 및 미들웨어 구현 가이드
- 품목 관리 마이그레이션 가이드
- API 분석 및 요구사항 문서
- 대시보드 통합 완료 문서
- 브라우저 호환성 및 쿠키 처리 가이드
- Next.js 15 마이그레이션 참고 문서

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>

2025-11-13 21:17:43 +09:00

13 KiB

Raw Blame History

브라우저 지원 정책

📋 목차

지원 브라우저
지원하지 않는 브라우저
기술적 배경
구현 내용
테스트 가이드
사용자 안내 프로세스
향후 정책

지원 브라우저

✅ 공식 지원 브라우저

브라우저	최소 버전	권장 버전	플랫폼	우선순위
Google Chrome	90+	최신 버전	Windows, macOS, Linux	🔴 High
Microsoft Edge	90+	최신 버전	Windows, macOS	🔴 High
Safari	14+	최신 버전	macOS, iOS	🔴 High

브라우저별 권장 사유

Chrome (권장)

✅ 가장 안정적인 성능
✅ 개발 도구 우수
✅ 자동 업데이트
✅ 크로스 플랫폼 지원

Edge (Windows 권장)

✅ Windows 기본 브라우저
✅ Chrome 엔진 기반 (Chromium)
✅ Microsoft 공식 지원
✅ 엔터프라이즈 환경 최적화

Safari (macOS/iOS 권장)

✅ Apple 기기 최적화
✅ 배터리 효율 우수
✅ 개인정보 보호 강화
✅ iOS 필수 브라우저

지원하지 않는 브라우저

❌ Internet Explorer (모든 버전)

지원 중단 사유:

Microsoft 공식 지원 종료
- 2022년 6월 15일부로 IE 지원 완전 종료
- 보안 업데이트 중단
- Edge로 마이그레이션 권장
기술적 한계
- 현대 웹 표준 미지원
- JavaScript ES6+ 미지원
- CSS3 고급 기능 미지원
- 성능 문제
보안 취약점
- 패치되지 않는 보안 결함
- XSS, CSRF 등 공격에 취약
- 개인정보 유출 위험
프로젝트 기술 스택 비호환
- Next.js 15: IE 지원 중단 (v12부터)
- React 19: IE 지원 중단 (v18부터)
- Tailwind CSS 4: IE 미지원
- Modern JavaScript (ES6+): 네이티브 미지원

기술적 배경

현재 기술 스택과 IE 비호환성

{
  "next": "15.5.6",        // IE 지원 중단: v12 (2021)
  "react": "19.2.0",       // IE 지원 중단: v18 (2022)
  "tailwindcss": "4",      // IE 미지원
  "typescript": "5"        // ES6+ 트랜스파일 필요
}

IE 지원을 위한 대안과 비용

방안	가능 여부	비용	문제점
다운그레이드	⚠️ 가능	2-3주 개발	보안 취약점, 최신 기능 사용 불가
폴리필 추가	❌ 불가능	-	Next.js 15/React 19는 폴리필로 해결 불가
별도 레거시 버전	⚠️ 가능	1-2개월 개발	유지보수 부담 증가
Edge 마이그레이션	✅ 권장	0원	사용자 교육 필요

결론: IE 지원 비용 대비 효과가 낮아 지원하지 않기로 결정

구현 내용

1. IE 감지 및 차단 로직

파일: src/middleware.ts

/**
 * Check if user-agent is Internet Explorer
 * IE 11: Contains "Trident" in user-agent
 * IE 10 and below: Contains "MSIE" in user-agent
 */
function isInternetExplorer(userAgent: string): boolean {
  if (!userAgent) return false;

  return /MSIE|Trident/.test(userAgent);
}

export function middleware(request: NextRequest) {
  const { pathname } = request.nextUrl;
  const userAgent = request.headers.get('user-agent') || '';

  // 🚨 Internet Explorer Detection (최우선 처리)
  if (isInternetExplorer(userAgent)) {
    // unsupported-browser.html 페이지는 제외 (무한 리다이렉트 방지)
    if (!pathname.includes('unsupported-browser')) {
      console.log(`[IE Blocked] ${userAgent} attempted to access ${pathname}`);
      return NextResponse.redirect(new URL('/unsupported-browser.html', request.url));
    }
  }

  // ... 나머지 로직
}

동작 방식:

모든 요청에서 User-Agent 확인
IE 패턴 감지 시 /unsupported-browser.html로 리다이렉트
안내 페이지는 무한 리다이렉트 방지 처리

2. 브라우저 업그레이드 안내 페이지

파일: public/unsupported-browser.html

주요 기능:

✅ IE 사용 불가 안내
✅ 권장 브라우저 다운로드 링크 제공
✅ IE 지원 중단 사유 설명
✅ 반응형 디자인 (모바일 대응)
✅ 접근성 고려 (고대비, 큰 폰트)

안내 브라우저:

Microsoft Edge (권장) - Windows 사용자용
Google Chrome - 범용
Safari - macOS/iOS 사용자용

3. User-Agent 감지 패턴

IE 버전	User-Agent 패턴	감지 정규식
IE 11	`Trident/7.0`	`/Trident/`
IE 10	`MSIE 10.0`	`/MSIE/`
IE 9 이하	`MSIE 9.0`, `MSIE 8.0`	`/MSIE/`

감지 코드:

/MSIE|Trident/.test(userAgent)

테스트 가이드

1. Chrome DevTools를 사용한 IE 시뮬레이션

// Chrome DevTools Console에서 실행
// 1. F12 → Console 탭
// 2. 다음 코드 붙여넣기

// IE 11 시뮬레이션
Object.defineProperty(navigator, 'userAgent', {
  get: function() {
    return 'Mozilla/5.0 (Windows NT 10.0; Trident/7.0; rv:11.0) like Gecko';
  }
});

// 페이지 새로고침
location.reload();

예상 결과: /unsupported-browser.html로 리다이렉트

2. 실제 IE에서 테스트 (Windows 전용)

Windows 10 IE 11 테스트

# 1. Windows 검색 → "Internet Explorer"
# 2. http://localhost:3000 접속
# 3. 안내 페이지 표시 확인

가상 머신 테스트

Microsoft Edge Developer 가상 머신 사용
Windows 7/8/10 + IE 버전별 테스트 가능

3. 지원 브라우저 테스트

브라우저	테스트 항목	예상 결과
Chrome	로그인 → 대시보드 이동	✅ 정상 작동
Edge	로그인 → 대시보드 이동	✅ 정상 작동
Safari	로그인 → 대시보드 이동	✅ 정상 작동
IE 11	모든 페이지 접근	⚠️ 안내 페이지로 리다이렉트

사용자 안내 프로세스

1. 사전 공지 (배포 1개월 전)

공지 채널:

📧 이메일: 전체 사용자 대상
📢 시스템 공지: 로그인 시 팝업
📄 홈페이지: 공지사항 게시

공지 내용 예시:

[중요] 브라우저 업그레이드 안내

안녕하세요. SAM ERP 시스템 운영팀입니다.

보안 및 성능 향상을 위해 2024년 XX월 XX일부터
Internet Explorer 지원을 중단합니다.

▶ 권장 브라우저
  - Microsoft Edge (Windows 권장)
  - Google Chrome
  - Safari (macOS/iOS)

▶ 다운로드 링크
  - Edge: https://www.microsoft.com/edge
  - Chrome: https://www.google.com/chrome

문의사항은 고객센터(02-XXXX-XXXX)로 연락주세요.

감사합니다.

2. 배포 시점

IE 사용자 안내:

IE로 접속 시 자동으로 안내 페이지 표시
권장 브라우저 다운로드 링크 제공
지원 중단 사유 명확히 안내

고객 지원:

📞 전화 지원: 브라우저 설치 안내
💬 채팅 상담: 실시간 도움
📋 가이드: 브라우저별 설치 매뉴얼

3. 배포 후 모니터링

수집 지표:

metrics:
  - ie_access_attempts: IE 접근 시도 횟수
  - browser_distribution: 브라우저별 사용 비율
  - support_tickets: 브라우저 관련 문의 건수
  - migration_rate: Edge/Chrome 전환율

모니터링 코드 (선택사항):

// middleware.ts에 추가
if (isInternetExplorer(userAgent)) {
  // 통계 수집
  await fetch('/api/analytics/browser', {
    method: 'POST',
    body: JSON.stringify({
      event: 'ie_blocked',
      timestamp: new Date(),
      path: pathname,
      userAgent: userAgent
    })
  });

  return NextResponse.redirect(new URL('/unsupported-browser.html', request.url));
}

향후 정책

1. 브라우저 버전 관리

업데이트 정책:

✅ 최신 브라우저 버전 권장
✅ 최소 지원 버전: 현재 버전 -2 (약 6개월)
⚠️ 구버전 사용 시 업데이트 권장 안내

예시:

현재 Chrome 120 사용 중
→ Chrome 118 이상 지원
→ Chrome 117 이하는 업데이트 권장

2. 신규 브라우저 지원 검토

평가 기준:

시장 점유율: 5% 이상
웹 표준 준수: ECMAScript 2020+, CSS3
보안 업데이트: 정기적인 패치 제공
개발자 도구: 디버깅 환경 제공

현재 지원 검토 대상:

✅ Firefox: 지원 검토 중 (시장 점유율 고려)
⚠️ Opera, Vivaldi: 시장 점유율 낮음 (Chrome 기반이므로 호환 가능)

3. 모바일 브라우저 정책

모바일 지원:

플랫폼	브라우저	지원 여부
iOS	Safari	✅ 지원
iOS	Chrome	✅ 지원 (Safari 엔진 사용)
Android	Chrome	✅ 지원
Android	Samsung Internet	⚠️ 호환 가능 (Chrome 기반)

참고: iOS는 WebKit 엔진 강제 정책으로 모든 브라우저가 Safari 엔진 사용

크로스 브라우저 개발 원칙

개발 시 준수 사항

1. 브라우저 테스트 필수

feature_development:
  - step_1: Chrome에서 개발 및 테스트
  - step_2: Safari에서 호환성 테스트
  - step_3: Edge에서 최종 확인
  - step_4: 모바일 Safari (iOS) 테스트

2. Safari 우선 개발

// Safari를 기준으로 개발하면 다른 브라우저에서도 작동
// Safari가 가장 엄격한 정책을 가지고 있기 때문

// ✅ Safari 호환 코드 (모든 브라우저 작동)
const cookie = [
  'token=xxx',
  'HttpOnly',
  ...(isProduction ? ['Secure'] : []),  // 환경별 조건부
  'SameSite=Lax',                       // Safari 호환
].join('; ');

// ❌ Chrome만 작동 (Safari 실패)
const cookie = 'token=xxx; Secure; SameSite=Strict';  // HTTP에서 Safari 거부

3. 기능 감지 (Feature Detection)

// ✅ 올바른 방법: 기능 감지
if ('IntersectionObserver' in window) {
  // IntersectionObserver 사용
}

// ❌ 잘못된 방법: 브라우저 감지
if (userAgent.includes('Chrome')) {
  // Chrome 전용 기능 사용
}

4. 폴백 제공

// localStorage 지원 여부 확인 (Safari Private Mode 대응)
try {
  localStorage.setItem('test', 'test');
  localStorage.removeItem('test');
} catch (error) {
  // Safari Private Mode: localStorage 제한
  // 대안: sessionStorage 또는 메모리 저장소 사용
}

문제 해결 가이드

Q1. IE 사용자가 계속 접속을 시도하는 경우

해결 방법:

고객센터 연락 유도
Edge 설치 원격 지원
브라우저 설치 가이드 제공

Edge 설치 가이드:

1. https://www.microsoft.com/edge 접속
2. "다운로드" 버튼 클릭
3. 설치 파일 실행
4. 설치 완료 후 SAM ERP 재접속

Q2. 안내 페이지가 표시되지 않는 경우

체크 포인트:

# 1. middleware.ts 적용 확인
npm run build

# 2. 로그 확인
# 개발 환경: 터미널에서 "[IE Blocked]" 메시지 확인
# 프로덕션: 로그 모니터링 시스템 확인

# 3. User-Agent 확인
# Chrome DevTools → Network → 요청 헤더에서 User-Agent 확인

Q3. 특정 브라우저에서 기능이 작동하지 않는 경우

디버깅 절차:

// 1. 브라우저 콘솔에서 에러 확인
// Chrome: F12 → Console
// Safari: 개발자 메뉴 활성화 → 웹 검사기 → 콘솔

// 2. 브라우저 호환성 확인
// https://caniuse.com 에서 기능 검색

// 3. 폴백 코드 추가
if (typeof feature === 'undefined') {
  // 대체 구현
}

업데이트 히스토리

날짜	내용	작성자
2024-XX-XX	브라우저 지원 정책 문서 작성 및 IE 차단 구현	Claude

요약

✅ 지원 브라우저

Chrome (90+)
Edge (90+)
Safari (14+)

❌ 지원하지 않는 브라우저

Internet Explorer (모든 버전)

🎯 핵심 원칙

Safari 우선 개발: 가장 엄격한 정책 기준
크로스 브라우저 테스트 필수: Chrome, Safari, Edge
사용자 친화적 안내: IE 사용자에게 명확한 업그레이드 안내

문의: 고객센터 또는 개발팀

13 KiB Raw Blame History