모바일 웹 앱을 개발하다 보면, 모바일 브라우저에서 console.log() 출력값을 확인하는 것이 매우 불편합니다.
특히 Android나 iOS 환경에서는 USB 디버깅 없이 로그를 보는 것이 어려운데요, 오늘은 React에서 콘솔 로그를 화면에 직접 출력해주는 오버레이 컴포넌트를 만드는 방법을 소개합니다.
이 방법은 Next.js, React SPA 모두에 적용 가능하며, Chrome 개발자 도구 없이도 콘솔 로그를 쉽게 확인할 수 있습니다.
✅ 콘솔 로그가 모바일에서 보이지 않는 이유
console.log()는 기본적으로 브라우저 개발자 도구(DevTools) 콘솔에서만 확인할 수 있습니다.- 모바일 크롬에서는 콘솔을 볼 수 있는 DevTools UI가 없기 때문에 디버깅이 어렵습니다.
chrome://inspect는 USB 연결이 필요하며, 번거롭습니다.
따라서 우리는 React 앱 안에서 직접 console.log()를 가로채고, 화면에 실시간으로 출력하는 오버레이 뷰어를 만들어 사용할 수 있습니다.
🧩 React에서 콘솔 로그를 화면에 출력하는 오버레이 컴포넌트 만들기
다음은 콘솔 로그를 가로채서 화면 하단에 출력하는 React 컴포넌트입니다. useEffect를 이용해 console.log를 오버라이딩하고, 최근 30개의 로그를 출력합니다.
'use client';
import { useEffect, useState } from 'react';
export default function ConsoleOverlay() {
const [logs, setLogs] = useState<string[]>([]);
useEffect(() => {
const originalLog = console.log;
console.log = (...args: any[]) => {
originalLog(...args); // 원래 로그는 유지
const logString = args.map(a => typeof a === 'object' ? JSON.stringify(a) : String(a)).join(' ');
setLogs(prev => [...prev.slice(-30), logString]); // 최근 30개 로그 유지
};
return () => {
console.log = originalLog; // cleanup
};
}, []);
return (
<div style={{
position: 'fixed',
bottom: 0,
left: 0,
right: 0,
maxHeight: '200px',
backgroundColor: 'rgba(0,0,0,0.85)',
color: 'lime',
fontSize: '12px',
overflowY: 'auto',
padding: '8px',
zIndex: 9999
}}>
{logs.map((log, idx) => (
<div key={idx}>{log}</div>
))}
</div>
);
}✅ 적용 방법 (Next.js / React 앱 어디서든)
- 위
ConsoleOverlay컴포넌트를components/ConsoleOverlay.tsx에 저장 app/layout.tsx또는pages/_app.tsx에<ConsoleOverlay />를 추가- 이제 모바일에서도
console.log()가 화면 하단에 표시됩니다
예:
export default function App() {
return (
<>
<ConsoleOverlay />
<YourMainApp />
</>
);
}🔥 사용 시 주의사항
- 이 컴포넌트는 개발 전용으로만 사용하는 것이 좋습니다.
- 프로덕션에서는 조건부로 렌더링하거나, 로그 레벨에 따라 제한하는 것이 좋습니다.
- 터치가 필요한 UI 요소들과 겹치지 않도록 위치를 조정할 수도 있습니다.
🚀 확장 아이디어
- 로그를 레벨별로 색상 구분 (
info,error,warn) - 로그 필터 입력창 추가
console.error,console.warn등도 가로채서 시각화- 로그를 서버에 전송해 저장 (간단한 Logger 만들기)
🧠 결론
모바일에서의 디버깅은 제한적이지만, React에서는 이처럼 콘솔을 UI로 표시하여 실시간 로그 확인이 가능합니다.
특히 QA나 기획자 테스트 시 유용하며, 디버깅 비용을 획기적으로 줄여줄 수 있는 방법입니다.
개발 중 로그를 보고 싶다면, 이제 더 이상 USB 연결 없이도 화면에서 직접 확인하세요!
