내가 쓰려고 만든 궁극의 클립보드 매니저, 'Clip Stack' 개발기

매일 수많은 텍스트와 이미지를 복사(Ctrl+C)하고 붙여넣기(Ctrl+V)하는 우리.

 

하지만 방금 전에 복사했던 내용이 기억나지 않거나, 덮어씌워져서 다시 원래 페이지를 찾아가 다시 복사해야 했던 킹받는 경험, 다들 한 번쯤 있으시죠?

 

이런 일상적인 불편함을 해결하기 위해 수많은 클립보드 관리 앱들이 존재하지만, 무언가 하나씩 나사가 빠져있거나 유료 결제를 유도하는 경우가 많았습니다.

 

그래서 결심했습니다. "직접 내 입맛에 맞는, 가장 빠르고 편한 클립보드 매니저를 만들자!" 그리고 기본적인것은 무료로 잘 쓸 수 있게 만들어보자!

 

그렇게 탄생한 크롬 확장 프로그램 [Clip Stack]의 밀도 높은 개발기를 공유합니다.

 

 

1. 왜 만들었는가? (Problem & Goal)

기존 확장 프로그램이나 별도 앱들의 단점은 명확했습니다.

1. 접근성이 떨어진다. (단축키가 안 먹히거나 앱을 따로 켜야 함)
2. 이미지 저장이 안 된다. (텍스트만 됨)
3. UI가 촌스럽거나 너무 복잡하다.
4. 웹페이지의 보안 스크립트와 충돌해서 수집이 누락된다.

나의 목표 (Goal)

• 복사(Copy)와 잘라내기(Cut)를 하는 순간 0.1초의 지연 없이 100% 무조건 등록할 것!
• 텍스트는 물론이고 이미지(화면 캡처)도 완벽하게 수집할 것!
• 투박한 디자인은 가라, 프리미엄 골드톤의 글래스모피즘(Glassmorphism) UI를 입힐 것!

2. 핵심 기능 탑재 (Core Features)

설계에 들어간 Clip Stack의 MVP 버전은 가볍고 단단하게 만들어졌습니다.

텍스트와 이미지의 완벽한 분리 탭

가장 많이 쓰는 두 가지 자료, 텍스트와 이미지를 탭으로 분리하여 각 최대 6개씩 저장할 수 있도록 했습니다. 사용자가 팝업을 열자마자 바로 확인할 수 있고, 1 클릭으로 즉시 다시 복사하여 사용할 수 있습니다.

실시간 '선제적 텍스트 추적' (Proactive Tracking)

단순히 copy 이벤트만 잡는 것이 아닙니다. 사용자가 마우스로 텍스트를 드래그하고 마우스를 떼는 순간(mouseup & selectionchange), 확장 프로그램은 미리 그 텍스트를 메모리에 올려두고 복사 명령이 내려오기만을 기다립니다. 이렇게 함으로써 웬만한 사이트들의 어설픈 복사 방지 로직이나 간섭 스크립트를 전부 무력화하고 텍스트를 낚아챕니다.

골드빛 알림 피드백

다시 복사하기 위해 항목을 클릭하면 딱딱하고 촌스러운 팝업 대신, 해당 타일이 반짝거리는 '골드라이트 시각 효과'를 넣어 직관적인 경험을 더했습니다.

3. 위기와 트러블 슈팅 (NotFocused 에러 완파기)

개발 과정이 순탄치만은 않았습니다. 가장 골치를 썩였던 치명적인 버그가 있었으니...

"분명 복사를 했는데, 팝업을 열면 내용이 안 나와요!"

 

[원인 분석]
확장 프로그램의 팝업 창이 열리는 그 찰나의 0.1초 동안, 최신 크롬 브라우저는 *"아직 이 팝업 창이 활성화(Focus)되지 않았다"* 며 보안을 이유로 navigator.clipboard.readText() API의 접근을 무참히 튕겨내버리고 있었습니다. (DOMException: NotAllowedError) 이 때문에 동기화 스크립트 자체가 죽어버리는 현상이었죠.

 

[해결책 (v1.4.2)]

1. 독립 스레드 파이프라인: 텍스트 동기화가 에러가 나도 이미지 동기화는 멈추지 않도록 둘의 실행 로직을 철저히 분리했습니다.
2. 강제 추출 폴백 (execCommand Fallback): 브라우저가 최신 클립보드 API를 막는다면, 구관이 명관! 무식하지만 절대 실패하지 않는 구형 방식인 숨겨진 textarea를 만들고 document.execCommand('paste')를 실행하여 텍스트를 강제로 끄집어내는 초강력 폴백을 심어두었습니다.

이제 팝업을 언제 어떤 방식으로 열든 클립보드 내용은 단 1건의 누락도 없이 동기화됩니다.

4. 디자인 폴리싱: "디테일이 명품을 만든다"

아무리 기능이 좋아도 눈이 아프면 쓰지 않게 됩니다.

• 프리미엄 골드 아이콘: AI로 대충 만든 뭉개진 이미지는 치워버리고, OS 네이티브 렌더링(System.Drawing) 스크립트를 직접 짜서 오차 하나 없는 픽셀 퍼펙트의 거대하고 쨍한 '핫핑크' 였다가, 최종적으로 '외곽선이 들어간 고급스러운 골드 번개 마크' 로 커스텀 벡터 아이콘을 깎아 넣었습니다.
• 가독성 1.6배 향상: 개인정보처리방침이나 버전 히스토리 페이지의 줄 간격을 넓히고 여백을 조정해 눈이 편안해지도록 구성했습니다. 덤으로, 앱 내 우측 하단에 [사용 설명서] 모달을 넣어 초심자도 숨겨진 기능(단축키 시너지 등)을 바로 파악할 수 있게 배려했습니다.

5. 마치며

나의 사소한 빡침(?)에서 시작한 토이 프로젝트가 이렇게 단단한 구조의 '프리미엄 클립보드 툴'로 진화하게 될 줄은 몰랐습니다.

• 브라우저의 깊은 보안 정책 우회 기술
• 비동기 에러의 철저한 Fallback 처리 로직
• 가독성과 심미성을 챙기는 UI/UX 감각

이번 Clip Stack V1.4.6 Ultimate Build 개발은 위 세 가지를 정말 뼈저리게 배울 수 있었던 훌륭한 생존 게임이었습니다.

이제 저는 수시로 복사/붙여넣기를 안심하고 남발(?)하며 더욱 편하게 작업할 수 있게 되었습니다! 여러분도 기회가 된다면 일상의 아주 사소한 불편함을 코드로 직접 부숴버리는 쾌감을 느껴보시길 바랍니다. 😎👍