Multiple Window Connection

Multiple Window Connection은 여러 웹 브라우저 창이 실시간으로 연결된 선을 지속적으로 이어지게 보여주는 서비스입니다.

복잡한 기술을 통해 해당 서비스를 만든게 아니라 로컬 스토리지를 통해 각 창의 중앙점 위치를 저장하고, 각 중앙점들을 연결하도록 Canvas를 통해 구현하였습니다.

해당 게시글에서 영감을 받아 구현해보았습니다.

기능

• 실시간 창 간 데이터 동기화
• 드래그를 통해 창 이동 시 지속적인 연결된 것처럼 보이도록 구현

기술 스택

• Flutter Web: 웹 애플리케이션 개발
• JavaScript: 브라우저 창 간 통신
• Method Channel: Flutter와 JavaScript 간 통신
• Local Storage: 창 위치 데이터 저장