<aside> 🔍

Figma 디자인 파일과 실제 구현된 웹사이트를 픽셀 단위로 비교하는 서비스입니다. URL과 Figma 파일 경로를 입력하면 자동으로 스크린샷을 캡처하고, 오버레이/분할 화면 모드로 차이를 시각화합니다.

</aside>

👉 바로가기

프로젝트 개요

디자이너와 협업하면서 "디자인 파일과 완전히 동일하게 구현했는데 왜 피드백이 오지?"라는 상황을 자주 겪었습니다. Figma를 보면서 실제 웹사이트를 눈으로 비교하는 것은 한계가 명확하고, 스크린샷을 찍어서 Figma에 붙여넣고 비교하는 것도 번거롭습니다.

PixelDiff는 이 과정을 자동화합니다. URL과 Figma 파일 경로를 입력하면 두 이미지를 즉시 비교할 수 있습니다.

기술 선택과 이유

SSE (Server-Sent Events) 선택

문제:

Figma API 렌더링이 평균 20-30초, 최대 55초까지 소요됩니다. 이 시간 동안 로딩만 돌면 유저는 작업이 멈췄다고 오해하고 이탈합니다.

고려한 옵션:

• Polling: 클라이언트가 주기적으로 API 호출, 불필요한 요청 증가
• WebSocket: 양방향 통신, 별도 프로토콜 필요, 복잡한 설정
• SSE: 단방향 스트림, HTTP 기반, 브라우저 내장 지원

선택 이유:

서버가 클라이언트에게 진행률을 전송하기만 하면 되므로 단방향 통신으로 충분합니다. SSE는 HTTP 인프라를 그대로 사용하고, EventSource API가 재연결을 자동으로 처리합니다. WebSocket은 채팅처럼 양방향이 필요한 경우에 적합하지만 여기서는 오버스펙입니다.

const eventSource = new EventSource('/api/render/progress');
eventSource.onmessage = (event) => {
  const { stage, progress } = JSON.parse(event.data);
  setProgressState({ stage, progress });
};

렌더링 중에도 다른 작업이나 히스토리 확인이 가능한 논블로킹 워크플로우를 제공합니다.

Chrome Extension 선택

문제:

1. iframe 내부 콘텐츠 높이를 알 수 없음 (Same-Origin Policy)