SnapContext 0.2.0 — 디자인을 새로 하고, 로그인 없는 공유를 넣었다
화면을 캡처하면 AI에 바로 넘길 수 있게 정보를 함께 묶어 주는 크롬·웨일 확장 SnapContext. 0.2.0에서 작업 창을 새로 디자인하고, 로그인 없이 링크로 공유하는 기능을 넣었다. 왜 만들었고 무엇을 바꿨는지 정리했다.
한눈에 요약 화면을 캡처하면 AI에 바로 붙여넣을 수 있게 정보를 함께 묶어 주는 크롬·웨일 확장 프로그램 SnapContext를 0.2.0으로 올렸다. 이번에 바꾼 건 두 가지다. 작업 창 디자인을 처음부터 다시 했고, 로그인 없이 링크 하나로 캡처를 공유하는 기능을 넣었다.
나는 비전공자다. AI와 대화하며 코드를 만드는 바이브코딩으로 개발을 시작했고, 지금 소개할 SnapContext도 그렇게 만들었다.
특강에서 들은 말 중에 계속 남는 게 있다. "무엇을 만들었는지보다, 왜 만들었는지를 설명할 수 있어야 한다." 그래서 이 글도 왜 만들었는지부터 쓴다.
이걸 왜 만들었나
웹에서 버그 화면이나 참고할 페이지를 발견하면, 나는 늘 같은 일을 반복했다. 화면을 캡처하고, 주소를 복사하고, 화면 크기를 확인하고, 어떤 브라우저인지 확인하고, AI에게 "이거 봐줘" 하면서 그 정보를 하나씩 붙여넣는 일이다. AI에게 화면 하나를 제대로 설명하려면 이미지 말고도 챙길 게 많았다. 그런데 캡처 도구는 이미지 한 장만 줬고, 나머지는 전부 내가 직접 모아야 했다. 하루에도 몇 번씩.
그래서 생각했다. 캡처하는 그 순간에 주변 정보까지 한 번에 묶이면 안 되나. SnapContext는 그 생각에서 시작했다. 화면을 캡처하면 주소와 화면 크기, 브라우저 정보까지 자동으로 함께 묶어서, AI에게 바로 붙여넣을 수 있는 형태로 정리해 준다. 클릭 한 번이면 된다. 첫 버전(v0.1.3)을 크롬과 웨일 스토어에 올린 게 내 인생 첫 제품이었다.
0.2.0에서 바꾼 것 하나 — 디자인
첫 버전은 기능을 넣는 데 집중하느라 화면이 정돈이 덜 돼 있었다. 버튼과 글자, 간격이 제각각이라 처음 여는 사람은 무엇부터 눌러야 할지 헷갈렸을 것이다.
0.2.0에서는 화면 오른쪽에 뜨는 작업 창을 처음부터 다시 만들었다. 원칙은 하나, 덜어내는 것이었다. 잘 안 쓰는 요소는 빼고, 글자 크기와 간격을 통일하고, 자주 쓰는 캡처 버튼을 맨 위로 올렸다. 혼자 쓰는 도구라도 남에게 권하려면, 창을 처음 열었을 때 "아 이렇게 쓰면 되는구나"가 몇 초 안에 와야 한다고 봤다.
디자인은 바로 확장 프로그램에 넣지 않았다. 먼저 Lazyweb으로 잘 만든 앱들의 화면을 레퍼런스로 모아 보면서, 어떤 배치가 눈에 잘 들어오는지 감을 잡았다. 그다음 두 가지 안을 HTML로 만들어 화면에 나란히 띄워 놓고 비교했다. 하나로 정한 뒤에도 바로 넣지 않고, 다섯 번에 걸쳐 다시 보고 고쳤다. 버튼 위치와 글자 크기, 간격을 바꿔 가며 제일 덜 헷갈리는 쪽으로 좁혀 갔고, 그렇게 흰색·빨강·검정으로 정리한 지금 디자인이 나왔다.
0.2.0에서 바꾼 것 둘 — 로그인 없는 공유
첫 버전은 나 혼자 캡처해서 AI에 붙여넣는 데까지였다. 0.2.0의 목표는 그걸 남에게도 보내는 것이었다. 캡처한 내용을 링크로 공유하는 기능을 넣었다.
계정을 만들거나 로그인할 필요가 없다. 링크 하나만 복사해서 보내면 되고, 받는 사람도 로그인 없이 열어본다. 대신 이 링크는 7일이 지나면 자동으로 사라지고, 서버에서도 지워진다. 남의 화면이 담긴 링크를 기한 없이 남겨 두는 게 부담스러워서 정한 기본값이다.
지금 SnapContext로 할 수 있는 것
정리하면 이렇다. 화면을 네 가지 방식으로 캡처할 수 있다. 원하는 영역만, 특정 요소 하나(버튼이나 이미지 같은), 문서, 페이지 전체. 캡처한 화면 위에는 핀을 꽂고 메모를 달 수 있다. "여기 이 버튼이 안 눌려요"처럼 위치와 설명을 같이 남기는 식이다.
그리고 캡처한 화면과 주소·화면 크기 정보를 하나로 묶어서, AI에게 바로 붙여넣을 수 있는 형태로 내보낸다. 개발용으로 쓰는 형식(JSON·마크다운)으로도 내보낼 수 있다. 매번 상황을 다시 설명할 필요가 없다.
안전은 나중이 아니라 처음부터
캡처한 내용은 기본적으로 내 컴퓨터 안에서만 처리된다. 밖으로 올라가는 건 내가 공유 링크를 만들 때뿐이고, 그때도 정보를 함께 올릴지는 처음 한 번 직접 켜야 켜진다. 기본은 꺼져 있다. 로그인 정보나 쿠키 같은 건 올리지 않고, 민감한 정보가 새어 나가는지 자동 검사로 확인한다.
이 부분을 처음부터 챙긴 건, 특강에서 "보안은 다 만든 뒤에 점검하는 게 아니라 만들면서 넣는 것"이라는 말을 들었기 때문이다. 공유 기능을 붙이는 첫 순간부터 무엇이 나가고 무엇이 안 나가는지를 먼저 정했다.
만들면서 부딪힌 것
작은 문제도 있었다. 다 만들어 스토어에 올리는데, 확장 프로그램을 압축한 파일이 스토어에서 제대로 안 풀렸다. 코드는 멀쩡한데, 압축 과정에서 파일 경로가 윈도우식으로 저장되면서 생긴 문제였다. 압축을 만드는 방식을 바꿔서 해결했다. 직접 만드는 것과, 그게 남의 환경에서 제대로 열리는 것은 별개의 문제라는 걸 여기서 배웠다.
앞으로
0.2.0은 아직 시작이다. 다음으로는 로그인하면 캡처를 계속 저장하고 여러 기기에서 같이 보는 기능, 그리고 AI 도구와 바로 연결하는 기능을 계획하고 있다. 지금 된 게 아니라 계획이다.
설치
SnapContext는 무료다. 크롬과 웨일 스토어에서 "SnapContext"로 검색하면 바로 설치된다.
- 크롬 웹스토어: https://chromewebstore.google.com/detail/snapcontext/heapkelhdpkadmnnieahcgikhhnfapen
- 네이버 웨일 스토어: https://store.whale.naver.com/detail/mafpmcipgocpohdmealfiohagmjfmnkc
- 코드와 의견: github.com/byh3071-cpu/SnapContext
써 보고 불편한 점이 있으면 편하게 알려주면 좋겠다.