브라우저/UI 관련 문의 대응
고객이 브라우저 또는 UI 관련 문제를 신고할 때의 대응 가이드다. UI 화면 기준 증상 → 기술 원인 → 해결 경로 순으로 진행한다.
1. 증상 목록
| # | 고객이 말하는 증상 (UI 기준) | 섹션 |
|---|---|---|
| S-1 | "Firefox에서 접속/기능이 안 됩니다" | 2.1 |
| S-2 | "화면 레이아웃이 깨집니다" | 2.2 |
| S-3 | "화면 캡처(PDF/이미지 저장)가 안 됩니다" | 2.3 |
2. 증상별 대응 가이드
2.1 S-1: Firefox에서 오류가 발생한다
증상: Firefox 브라우저로 FlowKat 접속 시 특정 기능이 동작하지 않거나, 화면 캡처 시도 시 브라우저 캡처 미지원 알림이 나타난다.
고객에게 확인
- 어떤 기능이 동작하지 않는가?
- 캡처 기능 문제인가, 일반 화면 접속/사용 문제인가?
- Chrome 또는 Edge에서는 정상 동작하는가?
확인 경로: FlowKat > 우측 상단 캡처 버튼 클릭
확인 항목: "이 브라우저는 화면 캡처를 지원하지 않습니다" 알림 여부
기술지원 확인
- 캡처 기능의 경우: Firefox는 설계상 차단된 정상 동작이다.
// 브라우저 콘솔에서 User-Agent 확인
console.log(navigator.userAgent);
// "Firefox" 포함 시 캡처 차단 → Chrome/Edge 사용 권고
- 일반 기능 오류인 경우: 브라우저 콘솔 에러 확인
// F12 > Console 탭에서 에러 메시지 확인
// "cross-origin", "CORS", "SyntaxError" 여부 확인
- WebSocket 연결 확인 (Firefox 구버전 호환성 이슈):
브라우저 DevTools > Network 탭 > WS (WebSocket) 필터를 선택한다.
WebSocket 연결이 없는 경우 Firefox의 WebSocket 제한 가능성이 있다.
확인 포인트:
| 확인 항목 | 정상 상태 | 비정상 상태 |
|---|---|---|
| 캡처 차단 알림 | 정상 동작 (Firefox 차단은 의도된 동작) | - |
| 콘솔 CORS 에러 | 없음 | cross-origin 에러 |
| WebSocket 연결 | connected = true | connected = false |
벤더 에스컬레이션 시 전달 정보
- Firefox 버전 (
도움말 > Firefox 정보) - 브라우저 콘솔 에러 캡처 (F12 > Console)
- 어떤 기능에서 어떤 동작 시 오류가 발생하는지 상세 설명
- Chrome/Edge에서의 동일 기능 동작 여부
2.2 S-2: 화면 레이아웃이 깨진다
증상: 대시보드 위젯, 사이드바 메뉴, 모달 창 등이 예상 위치에 표시되지 않거나 겹쳐 보인다. 특정 해상도 또는 브라우저 줌 레벨에서만 발생하기도 한다.
고객에게 확인
- 어떤 화면에서 발생하는가? (대시보드, 역할 관리, 트랜잭션 익스플로러 등)
- 브라우저 줌 레벨은 얼마인가? (Ctrl+0으로 100%로 초기화 후 재확인)
- 어떤 해상도/브라우저 창 크기인가?
- 브라우저 캐시 삭제 후에도 동일한가?
빠른 확인: Ctrl+0 (브라우저 줌 100% 초기화) 후 새로고침 시 해결되는지 확인
기술지원 확인
- 브라우저 콘솔 CSS/JS 에러 확인:
// F12 > Console에서 에러 확인
// "CSS" 또는 "ResizeObserver" 에러 여부
- 화면 크기 확인:
console.log('Width:', window.innerWidth, 'Height:', window.innerHeight);
console.log('DPR:', window.devicePixelRatio);
- 캐시 강제 초기화 후 재확인:
Ctrl+Shift+R (Hard Reload) 또는
F12 > Network 탭 > Disable cache 체크 후 F5
확인 포인트:
| 확인 항목 | 정상 상태 | 비정상 상태 |
|---|---|---|
| 브라우저 줌 | 100% | 125%, 150% 등 |
| 화면 너비 | >= 1280px | < 768px (모바일 해상도) |
| CSS 에러 | 없음 | 스타일 로딩 실패 |
벤더 에스컬레이션 시 전달 정보
- 화면 캡처 (레이아웃 깨진 상태 전체)
- 브라우저 종류, 버전, 줌 레벨
- 화면 해상도 (
window.innerWidthxwindow.innerHeight) - F12 > Console 에러 캡처
- 어떤 동작 후 발생했는지 (페이지 이동, 창 크기 조절 등)
2.3 S-3: 화면 캡처가 안 된다
증상: Chrome 또는 Edge 브라우저에서 화면 캡처 버튼 클릭 시 PDF/이미지 생성 실패 오류가 나타난다. 또는 캡처 버튼 클릭 후 아무 반응이 없다.
고객에게 확인
- 어떤 브라우저를 사용하는가? (Chrome/Edge만 지원, Firefox 지원 안 함)
- 어떤 화면에서 캡처하려고 했는가?
- 브라우저 확장 프로그램(광고 차단기, User-Agent Switcher 등)이 설치되어 있는가?
- 캡처 진행 상태 표시가 됐다가 실패하는가, 아예 반응이 없는가?
브라우저 캡처 지원: Chrome/Edge (지원), Firefox (미지원)
기술지원 확인
- User-Agent 확인 (Chrome임에도 캡처 실패 시):
// F12 > Console
console.log(navigator.userAgent);
// "Chrome" 문자열이 없으면 User-Agent 스푸핑 의심
- 캡처 대상 요소 확인:
// 캡처 영역 요소 존재 여부
console.log('Capture element:', document.querySelector('#capture_body'));
// null이면 해당 페이지가 캡처 미지원 페이지
- 브라우저 메모리 확인:
브라우저 우측 상단 > ... > 작업 관리자 (Shift+Esc)
해당 탭 메모리 사용량 확인 (500MB 초과 시 재시작 권고)
확인 포인트:
| 확인 항목 | 정상 상태 | 비정상 상태 |
|---|---|---|
| User-Agent | Chrome 포함 | 없거나 Firefox/Safari |
#capture_body | DOM 요소 존재 | null |
| 탭 메모리 | < 500MB | 500MB 이상 |
| 확장 프로그램 | 광고 차단기 비활성 | 활성 상태에서 실패 |
벤더 에스컬레이션 시 전달 정보
- 브라우저 종류 및 버전 (예: Chrome 124.0.6367.82)
- OS 정보 (Windows 11, macOS 14 등)
- 에러 메시지 전문 캡처 (화면 + F12 콘솔)
- 재현 단계 (어떤 화면에서 어떤 버튼 클릭)
-
navigator.userAgent값 - 설치된 브라우저 확장 프로그램 목록
3. 관련 문서
| 모듈 | 관련 trouble-shooting | 핵심 이슈 |
|---|---|---|
| Firefox 캡처 제한 | 027-firefox-capture-browser-support-restriction | Firefox 캡처 차단, Chrome 권고 |
| xlog 다이얼로그 | 074-xlog-dialog-observer-store-isolation | Store 격리, 다이얼로그 상태 |
| 에러 바운더리 | 143-frontend-workgroup-error-boundary | 프론트엔드 에러 복구 |
| 트래킹 진단 PDF | 145-tracking-diagnostic-pdf-download | PDF 다운로드 문제 |