Show GN: PIP Tools - PIP로 떠다니는 도구들! 브라우저를 멀티태스킹의 천국으로!
(pip-tools.com)소개합니다!
브라우저의 Picture-in-Picture 기능을 활용해서 만든 도구 모음을 소개합니다.
왜 만들었나요?
색상 선택기를 가끔 사용하는데, 굳이 별도 앱을 설치하고 싶지는 않았습니다. 웹에서 제공하는 색상 선택기들의 경우에는 브라우저 창(혹은 탭)을 이동시켜야 하는 경우가 있어서 불편했습니다.
어떤 기능들이 있나요?
시계: 현재 시간 표시
타이머: 카운트다운 타이머
색상 선택기: 색상 코드 추출 및 복사
이미지 리사이즈: 이미지 크기 조절
번역기: 다국어 번역 ( 크롬 번역 API 활용 )
메모: 간단한 텍스트 메모
룰렛: 랜덤 선택 게임
앞으로 어떤 기능을 추가할 생각인가요?
계산기, 단위 변환기, 스크립터, 이미지 워터마크 등을 계획중에 있습니다.
그 외에도 필요한 도구가 있다면 좌측 하단의 contact 를 통해 의견 주세요. 적극 반영하도록 하겠습니다.
기술 스택
Next.js
React
TypeScript
react-document-pip
이미지, 영상 PIP와는 다른 Document Picture in picture라는 브라우저 API를 사용합니다.
아직 실험적 기능이라 일부 브라우저에서는 작동하지 않아요 ㅠㅠ
https://caniuse.com/mdn-api_documentpictureinpicture 에서 지원 브라우저 확인해 보실 수 있습니다!
브라우저로 일단 접속해야 하는 군요. 상시적으로 띄워놓을 수 있으면 좋겠다는 생각도 드네요. 지금도 너무 좋습니다. 전 타이머랑 색상추출기 넘 마음에 듭니다.^^