Lighthouse란?

Lighthouse란? 웹사이트 품질을 자동으로 측정해주는 도구 Google이 만든 오픈소스 웹사이트 품질 측정 도구. 무료로 사용할 수 있으며 웹 성능, 접근성, SEO 등을 자동으로 분석해준다.

1️⃣ Lighthouse란?

Google이 만든 웹사이트 품질 자동 측정 도구다.

쉽게 말하면, 내가 만든 웹사이트를 "채점"해주는 도구다. 선생님이 과제를 채점하듯이, Lighthouse가 웹사이트를 여러 기준으로 분석해서 점수(0~100)를 매겨준다.

무료 오픈소스라서 추가 비용 없이 누구나 사용할 수 있다.

2️⃣ 어떤 항목을 측정하나?

항목	설명
Performance (성능)	페이지가 얼마나 빠르게 로드되는지
Accessibility (접근성)	장애인도 사용할 수 있는지 (스크린리더 등)
Best Practices (모범 사례)	웹 개발 표준을 잘 따르고 있는지
SEO	구글 검색에 잘 노출되는지
PWA	모바일 앱처럼 동작 가능한지

3️⃣ 언제 사용하나?

웹사이트가 느리다는 피드백을 받았을 때 → 뭐가 문제인지 진단
배포 전 최종 품질 체크할 때
검색 노출을 높이려고 SEO 개선할 때
포트폴리오 사이트 만들고 점수 높이고 싶을 때 (취업용으로도 활용)

4️⃣ 어떻게 사용하나?

방법 1 Chrome DevTools

1. 크롬에서 분석할 웹사이트 접속
2. F12 (개발자 도구 열기)
3. 상단 탭에서 "Lighthouse" 클릭
4. "Analyze page load" 버튼 클릭
5. 잠시 기다리면 점수 + 개선 사항 리포트 나옴

방법 2 CLI

터미널에서 직접 실행

# 설치
npm install -g lighthouse

# 실행 (리포트를 HTML 파일로 저장)
lighthouse https://your-website.com --output html --output-path ./report.html

방법 3 Node.js 코드에서 자동화

const lighthouse = require('lighthouse');
const chromeLauncher = require('chrome-launcher');

async function runLighthouse(url) {
  const chrome = await chromeLauncher.launch({ chromeFlags: ['--headless'] });

  const result = await lighthouse(url, {
    port: chrome.port,
    output: 'json',
  });

  console.log('Performance 점수:', result.lhr.categories.performance.score * 100);

  await chrome.kill();
}

runLighthouse('https://your-website.com');

5️⃣ 리포트 결과 읽는 법

점수를 받으면 아래처럼 색깔로 구분된다.

🔴 0~49 : 심각한 문제 있음, 즉시 수정 필요
🟠 50~89 : 개선 필요
🟢 90~100 : 양호

점수 아래에 구체적인 개선 방법까지 알려줘서 뭘 고쳐야 할지 바로 알 수 있다.

(예: "이미지 크기를 줄이세요", "사용하지 않는 JS를 제거하세요")

6️⃣ 왜 Vercel에 배포 못 하고 로컬에서 띄우나?

Lighthouse 도구를 직접 서비스로 만들어 팀원들과 공유하려 할 때 생기는 구조적인 문제가 있다.

Lighthouse가 동작하는 원리

Lighthouse는 단순한 코드가 아니라, 실제로 Chrome 브라우저를 실행해서 웹사이트를 직접 열어보고 측정한다.

Lighthouse → Chrome 브라우저 실행 → 웹사이트 접속 → 분석 → 점수 반환

이때 Chrome이 서버에 설치되어 있어야 한다. (Headless Chrome = 화면 없이 백그라운드에서 실행되는 Chrome)

역할을 분리해서 봐야 한다

헷갈리지 말아야 할 것은, 측정 대상과 측정 도구는 다르다는 점이다.

[측정 도구 서버] → URL 입력 → [측정 대상 웹사이트]
   ↑ 이게 문제          ↑ 이건 상관없음
 Vercel에 못 올림      배포된 주소 넣으면 됨

측정 대상 (예: https://my-website.com) → 배포된 URL이면 됨 ✅
측정 도구 자체 (Lighthouse를 실행하는 서버) → Vercel에 못 올라감 ❌

왜 Vercel에서 안 되나?

Vercel 환경
├── Node.js 코드 실행 ✅
├── API Routes 실행 ✅
├── Chrome 설치 ❌  ← OS 레벨 프로그램 설치 불가
└── Headless Chrome 실행 ❌  ← Lighthouse 실행 불가

Vercel은 격리된 서버리스 환경이라 OS 레벨에서 프로그램을 설치하거나 실행하는 게 불가능하다. Chrome은 Node.js 패키지가 아니라 운영체제에 설치되는 프로그램이기 때문이다.

그래서 로컬에서 띄우고 IP를 공유하는 것

[내 로컬 컴퓨터]
├── Chrome 설치되어 있음 ✅
├── Lighthouse 실행 가능 ✅
├── 4500번 포트로 서버 실행
└── 내 IP:4500 → 동료가 브라우저로 접속해서 사용

Vercel 배포가 불가능하니까, 내 컴퓨터 자체를 서버처럼 쓰는 방식을 채택한 것이다.

대안 비교

방법	설명	단점
로컬 IP 공유	내 컴퓨터에서 실행 후 IP 공유	내 컴퓨터 꺼지면 접속 불가
GCE 등 클라우드 VM	진짜 서버에 Chrome까지 직접 설치	설정 복잡하고 비용 발생

GCE(Google Compute Engine) 같은 VM은 OS 레벨 프로그램 설치가 자유로워서 Chrome도 설치할 수 있다. 하지만 설정이 번거롭고 돈이 드니까, 팀 내부 도구 수준에서는 로컬 IP 공유가 가장 현실적인 방법이다.

핵심 요약: 측정 대상 URL은 어디든 상관없고, Lighthouse를 실행하는 도구 서버 자체가 Chrome이 필요해서 Vercel에 못 올라가는 것이다.

마치며: Lighthouse는 웹사이트 건강검진 도구다. 프로젝트 만들고 배포 전에 한 번씩 돌려보는 습관을 들이면 실력 향상에 도움이 된다.