# Show GN: PIP Tools - PIP로 떠다니는 도구들! 브라우저를 멀티태스킹의 천국으로!

> Clean Markdown view of GeekNews topic #23071. Use the original source for factual precision when an external source URL is present.

## Metadata

- GeekNews HTML: [https://news.hada.io/topic?id=23071](https://news.hada.io/topic?id=23071)
- GeekNews Markdown: [https://news.hada.io/topic/23071.md](https://news.hada.io/topic/23071.md)
- Type: show
- Author: [kangbit](https://news.hada.io/@kangbit)
- Published: 2025-09-14T18:36:12+09:00
- Updated: 2025-09-14T18:36:12+09:00
- Original source: [pip-tools.com](https://pip-tools.com/)
- Points: 27
- Comments: 13

## Summary

브라우저의 **Picture-in-Picture(PIP)** 기능을 활용해 별도의 앱 설치 없이 색상 선택기, 시계, 타이머, 이미지 리사이즈, 번역기 등 다양한 **실용 도구**를 부동 창으로 제공하여 **멀티태스킹**에 효율성을 높입니다. 사용자는 크롬 번역 API 활용 번역기 등 주요 기능을 언제든 화면 위에 띄워둘 수 있어 작업 흐름이 자유로워집니다. 앞으로 **계산기**, 단위 변환기 등 새로운 도구도 추가될 예정이며, **Next.js**와 **React** 등 최신 웹 기술로 구현되어 개발자와 생산성 도구에 관심 많은 사용자 모두에게 흥미로운 접근을 선보입니다.

## Topic Body

#### 소개합니다!  
브라우저의 Picture-in-Picture 기능을 활용해서 만든 도구 모음을 소개합니다.  
  
#### 왜 만들었나요?  
색상 선택기를 가끔 사용하는데, 굳이 별도 앱을 설치하고 싶지는 않았습니다. 웹에서 제공하는 색상 선택기들의 경우에는 브라우저 창(혹은 탭)을 이동시켜야 하는 경우가 있어서 불편했습니다.   
  
#### 어떤 기능들이 있나요?  
시계: 현재 시간 표시  
타이머: 카운트다운 타이머  
색상 선택기: 색상 코드 추출 및 복사  
이미지 리사이즈: 이미지 크기 조절  
번역기: 다국어 번역 ( 크롬 번역 API 활용 )  
메모: 간단한 텍스트 메모  
룰렛: 랜덤 선택 게임  
  
#### 앞으로 어떤 기능을 추가할 생각인가요?  
계산기, 단위 변환기, 스크립터, 이미지 워터마크 등을 계획중에 있습니다.  
그 외에도 필요한 도구가 있다면 좌측 하단의 contact 를 통해 의견 주세요. 적극 반영하도록 하겠습니다.  
  
#### 기술 스택  
Next.js  
React  
TypeScript  
[react-document-pip](https://www.npmjs.com/package/react-document-pip)

## Comments



### Comment 43924

- Author: kaistj
- Created: 2025-09-16T18:13:37+09:00
- Points: 1

오호~! 좋은 아이디어입니다.

### Comment 43855

- Author: rainystar
- Created: 2025-09-15T11:21:19+09:00
- Points: 1

브라우저로 일단 접속해야 하는 군요. 상시적으로 띄워놓을 수 있으면 좋겠다는 생각도 드네요. 지금도 너무 좋습니다. 전 타이머랑 색상추출기 넘 마음에 듭니다.^^

### Comment 43857

- Author: kangbit
- Created: 2025-09-15T12:28:36+09:00
- Points: 1
- Parent comment: 43855
- Depth: 1

감사합니다. 저도 제일 애정이 가는 도구가 색상추출기에요!

### Comment 43824

- Author: tribela
- Created: 2025-09-15T09:34:56+09:00
- Points: 2

파이어폭스 쓰는데 PIP 지원이 안 된다는 메시지가 뜨는군요. 유튜브 볼 때 PIP 기능을 잘 썼는데 말이에요

### Comment 43839

- Author: kangbit
- Created: 2025-09-15T10:18:39+09:00
- Points: 1
- Parent comment: 43824
- Depth: 1

이미지, 영상 PIP와는 다른 Document Picture in picture라는 브라우저 API를 사용합니다.  
아직 실험적 기능이라 일부 브라우저에서는 작동하지 않아요 ㅠㅠ  
https://caniuse.com/mdn-api_documentpictureinpicture 에서 지원 브라우저 확인해 보실 수 있습니다!

### Comment 43823

- Author: huiya
- Created: 2025-09-15T09:30:28+09:00
- Points: 1

와 이거 멋있네요

### Comment 43840

- Author: kangbit
- Created: 2025-09-15T10:18:58+09:00
- Points: 1
- Parent comment: 43823
- Depth: 1

감사합니다!

### Comment 43822

- Author: skageektp
- Created: 2025-09-15T09:20:31+09:00
- Points: 1

오 대박;;; pip가 영상만 볼 수 있는게 아니라 다양한 인터렉션이 가능한지 처음알았어요!

### Comment 43842

- Author: kangbit
- Created: 2025-09-15T10:19:56+09:00
- Points: 1
- Parent comment: 43822
- Depth: 1

아직 실험적 기능이라서 아직 많이 모르시더라구요!  
https://developer.mozilla.org/en-US/docs/Web/API/Document_Picture-in-Picture_API

### Comment 43809

- Author: gjen6s
- Created: 2025-09-14T22:18:47+09:00
- Points: 1

메모도 좋네요! 감사합니다

### Comment 43844

- Author: kangbit
- Created: 2025-09-15T10:20:24+09:00
- Points: 1
- Parent comment: 43809
- Depth: 1

감사합니다!  
더 필요하신 도구 있으시면 의견 주세요!

### Comment 43806

- Author: eajrezz
- Created: 2025-09-14T19:48:27+09:00
- Points: 1

와 아이디어 좋은데요!

### Comment 43843

- Author: kangbit
- Created: 2025-09-15T10:20:09+09:00
- Points: 1
- Parent comment: 43806
- Depth: 1

감사해요~!