▲

Polypane - 야심찬 웹 개발자를 위한 브라우저

 (polypane.app)
12P by GN⁺ 6일전 | ★ favorite | 댓글 4개
  • 반응형 디자인, 접근성, 성능 테스트 등 웹사이트 개발과 디버깅, 테스트를 위한 기능이 통합된 데스크탑 브라우저(크로미움 기반)
  • 모든 작업이 실시간으로 동기화되며, 다양한 사이즈의 뷰포트를 동시에 확인하고 조작 가능
    • 클릭, 입력, 스크롤, hover 등 모든 동작이 모든 뷰포트에 즉시 반영됨
  • Mac, Windows, Linux에서 사용 가능하며, 14일 무료 체험 가능

핵심 기능 요약

  • 반응형 디자인

    • 모바일부터 5K 모니터까지 모든 뷰포트를 한눈에 확인 가능
    • 브라우저 크기를 수동으로 조절하지 않고도 CSS 브레이크포인트 테스트 가능

  • 실시간 분석 및 동기화

    • 스크롤, 클릭, 입력, hover까지 모든 동작이 모든 뷰포트에 실시간으로 동기화됨
    • 콘솔 및 요소 검사기까지 통합되어 반복 작업을 줄일 수 있음

  • 접근성과 성능 검사

    • 구조, 메타데이터, 접근성(A11y)을 실시간으로 점검하고 개선 사항 제시
    • 40개 이상의 디버그 도구 탑재로 다양한 방식의 테스트 가능

  • 다크 모드 및 다양한 미디어 테스트

    • 운영 체제 설정을 바꾸지 않고 다크/라이트 모드를 동시에 테스트 가능
    • 모션 축소, 데이터 절약 모드, 프린트 스타일 등 다양한 미디어 조건 시뮬레이션

  • 소셜 미디어 카드 미리보기

    • Twitter(X), Facebook, Slack, LinkedIn, Discord 등 주요 플랫폼의 메타 카드 미리보기 지원
    • 라이트/다크 모드 및 로컬호스트 상태에서도 픽셀 단위로 정확한 프리뷰 제공

  • 개발자 도구 확장 지원

    • React, Vue, Angular, Svelte, Redux 등 다양한 DevTools 확장 프로그램 사용 가능
    • Chromium 기반 브라우저이므로 친숙한 개발 환경 제공

Polypane만의 장점

  • 단일 브라우저로 다양한 디바이스와 환경 테스트 가능
  • 개발 및 디자인 워크플로우 속도 최대 5배 향상
  • 다기능 디버깅 도구, 접근성 검사, 뷰포트 동기화, 스크린샷, 실시간 리로딩 등 올인원 구성
  • 사용자 피드백 기반으로 발전하며, 100% 사용자 중심 자가 펀딩 프로젝트임

기타 주요 기능 목록

  • 무제한 뷰포트 생성
  • 키보드, hover, 스크롤 동기화
  • 그리드 오버레이
  • JSON 뷰어 및 다양한 디바이스 프리셋
  • 수평 오버플로우 탐지
  • 시각적 디자인 비교(diff)
  • 색약 시뮬레이션
  • 메타데이터 개요
  • 웹 바이탈 검사기
  • 터치 에뮬레이션
  • 깨진 링크 탐지
  • 커스텀 헤더 설정
  • 워크스페이스 저장 및 공유 기능

제작자의 한마디

  • 개발자인 Kilian Valkhof이 수많은 웹사이트를 만들며 겪은 불편을 해결하고자 시작한 프로젝트임
  • Chrome만 사용했을 때보다 작업 속도가 약 60% 향상되었으며, 사용자들 또한 2~5배 향상된 생산성을 체감함
  • 투자 없이 사용자들의 피드백과 구독으로 운영되는 프로젝트로, 개발자 중심의 도구 개발에 집중함

사용자 리뷰 요약

  • Vivian Guillen: “엄청 빠르고 스크롤 동기화가 환상적임”
  • Scott Tolinski: “브레이크포인트 간의 여백 문제를 쉽게 발견함”
  • Sara Soueidan: “디버깅 도구들이 너무 훌륭해서 감탄함”
  • Kevin Powell: “접근성 검사와 디버깅 기능이 탁월함”
  • Segun Adebayo (Chakra UI 개발자): “모던 앱과 사이트 개발에 꼭 필요한 도구임”
▲
qyurila 6일전  [-]

묘하게 언급을 찾기 어렵게 되어 있는데, GitHub 학생 계정을 연동하면 무료 이용 가능합니다. 덕분에 지난 개인프로젝트에 잘 썼어요.

답변달기
▲
nemorize 5일전  [-]

https://responsiveviewer.org/
크롬 확장으로 배포되는 친구도 있습니다. 일부 기능을 포기한다면 확장 없이 바로 사용도 가능해요.

답변달기
▲
luiseok 6일전  [-]

기능은 조금 부족하지만 유사한 브라우저가 있습니다.
https://responsively.app/
혹시나 polypane이 유료라서 망설이시는 분은 한번 사용해보시는걸 추천합니다.

답변달기
▲
GN⁺ 6일전  [-]
Hacker News 의견
  • 안녕하세요, 저는 Polypane의 창시자이자 단독 개발자인 Kilian입니다. 다시 홈페이지에 올라온 것을 보니 흥미로움
  • 최근에 현대 CSS 반응형 웹 디자인을 처음 구현하면서 flexbox와 grid를 배우고 여러 브라우저와 디바이스 에뮬레이터를 사용했음. 이 앱을 알았더라면 많은 수고를 덜었을 것 같음
  • Polypane을 많이 사용했음. 훌륭한 제품이며, Chrome의 디바이스 뷰가 잘 처리하지 못하는 미묘한 디바이스 문제를 잘 에뮬레이트함
  • Polypane을 1년 넘게 사용 중이며, 모든 사람에게 맞지는 않을 수 있지만 내 필요에는 잘 맞음
    • 세션 관리로 워크플로우가 잘 정리됨
    • 데스크톱과 모바일 뷰를 위한 패널을 갖춘 반응형 우선 디자인
    • 주석을 포함한 포괄적인 스크린샷 기능
    • 다른 브라우저나 플러그인으로 이러한 기능을 복제할 수 있지만, 모든 것이 기본적으로 설정되어 있어 추가 설정이 필요 없음을 선호함
    • 지원이 뛰어남. IDE가 Polypane을 제대로 실행하지 못하는 문제를 겪었을 때 Slack에서 도움을 받아 빠르게 해결함
    • Slack 대화를 읽어보면, 사용자를 위한 최고의 제품을 만들기 위해 헌신하고 있음이 분명함
  • 모바일 디바이스의 브라우저를 정확히 에뮬레이트할 수 있는 브라우저가 있었으면 좋겠음. 화면 크기만 변경하는 것이 아니라, Apple의 iOS 시뮬레이터조차도 이 부분에서 실패함
  • 많은 것을 에뮬레이트하는 것 같지만, 잘 에뮬레이트하지 못하는 것은 무엇인지 궁금함
    • Chromium 기반으로 만들어진 것 같아 Safari나 Mozilla에서만 나타나는 문제를 보여주지 못할 것 같음
    • 아마도 문서에 있을 것임
    • 수정: FAQ 하단에 있음. 실제 브라우저 엔진 외에 다른 알려진 제한 사항이 있는지 궁금함
  • 거의 모든 기능이 이미 Firefox 개발자 도구에 내장되어 있음. 새로운 브라우저가 필요한 이유가 무엇인지 궁금함. 확장 프로그램으로도 가능할 것 같음
  • Browserstack보다 제공하는 몇 가지 기능은 무엇인지 궁금함 (크로스 브라우저 테스트 관련)
  • GenAI 통합을 제공하는지 궁금함 (Copilot, Claude 등)
    • 매니저에게 이 제품을 판매하는 데 도움을 주고 싶음
  • 가격 모델이 일회성 구매를 제공했으면 좋겠음. 훌륭해 보이지만 월간/연간 비용을 정당화하기 어려울 것 같음
  • 정말 멋짐! 학생 할인을 받을 수 있는 가능성이 있는지 궁금함. 일단 무료 체험을 시도해 볼 예정임
답변달기