프로젝트 개요

반응형 웹 개발 시 다양한 디바이스 화면을 한 화면에서 동시에 확인하고, 팀원과 실시간으로 공유할 수 있는 협업 도구입니다. 하나의 URL을 입력하면 여러 뷰포트에서 동시에 렌더링되며, 스크롤 동기화와 실시간 커서 공유를 지원합니다.

Claude Code(AI)와의 페어 프로그래밍으로 기획부터 배포까지 전 과정을 진행했습니다.

링크

• 서비스: https://syngrid.k1my3ch4n.xyz
• GitHub: https://github.com/k1my3ch4n/Synchronized-Grid

만들게 된 배경

반응형 웹을 개발할 때 브라우저 크기를 일일이 바꿰가며 확인하는 것이 비효율적이었습니다. iPhone, iPad, Desktop 등 여러 디바이스를 한 화면에서 동시에 보고, 팀원과 같은 화면을 실시간으로 공유하며 피드백할 수 있는 도구가 필요했습니다.

기술 스택

• Frontend: Next.js 16, React 19, TypeScript, Tailwind CSS 4, Zustand
• Backend: Custom Node.js Server, Socket.IO, Prisma ORM, PostgreSQL
• Infra: GCP Cloud Run, Docker, GitHub Actions CI/CD
• AI: Claude Code (페어 프로그래밍)

주요 구현 사항

1. 멀티 뷰포트 캔버스