TECH 으로 돌아가기
TECH HACKER NEWS 5분 읽기 40 READS

방치한 브라우저 탭에 식물이 자란다, 크롬 확장 'Overgrown'

방치한 브라우저 탭에 식물이 자란다, 크롬 확장 'Overgrown'
SOURCE IMAGE · HACKER NEWS

열어만 두고 끝내 읽지 않는 탭은 누구에게나 쌓인다. 개발자 샬리 제라드(Charlie Gerard)는 이 익숙한 디지털 방치 습관을 눈에 보이는 풍경으로 바꾸는 작은 크롬 확장 프로그램 'Overgrown'을 공개했다. 탭을 오래 읽지 않고 놔둘수록 그 위로 식물이 조금씩 뒤덮여 자라고, 다시 보려면 덩굴을 직접 베어내야 한다는 설정이다. 거창한 생산성 도구라기보다, 하나의 단어에서 출발한 창작 실험의 결과물이다.

하나의 단어에서 출발한 발상

이 프로젝트는 'Overgrowth(과잉 성장)'라는 단어를 두고 벌인 창작 연습에서 시작됐다. 제라드는 이 단어에서 가장 먼저 "워킹 데드"나 "라스트 오브 어스"처럼 식물이 버려진 건물을 뒤덮는 종말 이후의 풍경을 떠올렸다고 한다. 그다음 이 이미지를 디지털 세계로 옮겼고, '버려진'이라는 말이 자연스럽게 자신의 브라우저 탭으로 연결됐다. 읽지 않은 채 방치된 탭이 식물에 점령당하고, 다시 접근하려면 과하게 자란 덩굴을 치워야 한다는 아이디어다. 덩굴로 막힌 문을 억지로 여는 장면에 가깝다.

설정은 단순하지만 실행 방식에는 절제가 들어갔다. 제라드는 처음에 식물을 전부 베어내기 전까지는 탭을 닫지 못하도록 막는 방식을 고민했지만, 너무 성가실 것 같아 접었다고 밝혔다. 강제로 행동을 막는 대신 보고 즐기는 쪽을 택한 것이다. 본인도 "이걸로 탭을 더 많이 읽게 되지는 않겠지만 그래도 괜찮다"고 적을 만큼, 실용성보다 재미에 무게를 둔 결정이다.

세 조각으로 나뉜 확장 구조

기술적으로 보면 이 확장은 크롬 확장 개발의 전형적인 세 축을 그대로 따른다. 코드는 백그라운드 로직, 탭 위에 식물과 애니메이션을 그리는 콘텐츠 스크립트, 그리고 확장 자체의 UI를 담당하는 팝업 폴더로 나뉜다. background.js는 열려 있는 각 탭마다 '정글'을 시작시키고, 탭이 닫히면 그 상태를 잊는다. 즉 탭의 생명주기에 맞춰 식물의 생성과 소멸을 관리하는 조정자 역할을 한다.

팝업 폴더는 사용자가 보는 설정 화면을 담당하며, 식물이 자라기까지의 시간 설정, 덩굴을 벨 무기 선택, 현재 탭 목록과 각 탭의 상태를 보여주는 작은 컴포넌트들로 구성된다. 콘텐츠 폴더에는 식물과 무기의 SVG, 군집을 배치하고 키우는 로직, 방치 시간을 재는 '방치 시계', 그리고 효과음이 들어 있다. 상태 추적은 백그라운드가, 실제 그래픽과 상호작용은 콘텐츠 스크립트가, 설정 조작은 팝업이 맡는 분담이 명확하다.

실무자가 가져갈 지점

크롬 확장을 처음 만들어 보려는 개발자에게 이 프로젝트는 꽤 좋은 학습 참고가 된다. 백그라운드와 콘텐츠 스크립트, 팝업이 어떤 역할을 나눠 맡는지가 눈에 보이는 결과물로 드러나기 때문이다. 탭이 열리고 닫히는 이벤트에 상태를 붙였다 떼는 구조, 페이지 위에 SVG 오버레이를 그려 넣는 방식, 시간 경과를 기준으로 시각적 변화를 주는 패턴은 실제 업무용 확장에서도 그대로 쓰이는 기본기다. 정보성 UI 대신 게임적 상호작용을 얹었다는 점만 다를 뿐이다.

동시에 한계도 분명하다. 제작자 스스로 인정했듯 이 도구는 탭을 더 읽게 만들지 못한다. 방치된 탭을 정리하라는 행동 유도 장치라기보다, 방치 자체를 유쾌하게 받아들이게 하는 장식에 가깝다. 새 컴퓨터에서 글을 쓰는 지금도 탭 22개 중 14개가 이미 완전히 뒤덮였다는 그의 고백은 이 점을 솔직하게 보여준다. 강제 차단 기능을 뺀 선택 역시 효용보다 사용 경험을 우선한 결과다.

결국 'Overgrown'의 가치는 생산성 지표가 아니라 만드는 행위 자체에 있다. 제라드는 한동안 멀어졌던 '무언가를 직접 만드는 일'로 돌아오는 가볍고 재미있는 출발점으로 이 작업을 골랐다고 말한다. 단어 하나에서 떠올린 이미지를 작동하는 코드로 옮기는 과정, 그리고 익숙한 기술 스택을 비실용적이지만 즐거운 방향으로 비틀어 보는 시도는, 반복되는 실무에 지친 개발자에게도 의미 있는 환기가 된다.

SOURCE · HACKER NEWS
원문 전체 보기 → https://charliegerard.dev/blog/overgrown-extension/
SHARE
NEXT · CHOOSE

변화를 읽었다면,
내가 만들 수익 구조를 고릅니다.

정보를 더 모으는 데서 멈추지 않고, 광고·외주·판매·중개·구독 중 내 상황에 맞는 출발점을 정해보세요.

21가지 수익 구조 살펴보기 →
처리 중...