Beacons, 바이브 코딩으로 대체 가능?

Beacons를 대체할 링크 모음 페이지와 클릭 통계 앱을 만든다. 버튼 목록과 프로필 꾸미기, 버튼별 클릭 수까지가 목표다.
스택은 Node.js 22, Hono, SQLite, 서버 렌더링 HTML과 CSS로 고정하고 다른 프레임워크나 유료 링크 서비스는 제안하지 않는다.
로컬에서는 `npm install && npm run dev` 한 번으로 공개 페이지(/)와 편집 화면(/edit)이 같이 뜨게 한다.
링크와 클릭 기록은 ./data/links.db 한 파일에 두고 링크 목록과 주간 클릭 수를 CSV로 내보낸다.
EDIT_TOKEN, ADMIN_PASSWORD, PAGE_TIMEZONE=Asia/Seoul, BASE_URL 을 .env 에서 읽고 .env.example 만 커밋한다.
편집 화면에서 링크 제목, 주소, 아이콘 이름, 강조 표시를 넣고 끌어서 순서를 바꾼다.
프로필 사진, 한 줄 소개, 배경색과 글자색 테마를 정하고 같은 화면에서 미리보기를 확인한다.
방문자가 버튼을 누르면 /go/<링크ID> 로 한 번 넘겨 준 뒤 클릭 시각과 유입 경로를 남긴다.
주간·월간 클릭 수와 버튼별 순위를 표로 보여 주고 같은 사람이 하루에 여러 번 누른 경우를 구분해 센다.
유입 경로는 referer 헤더와 utm_source 값만 저장하고 방문자 IP 주소는 남기지 않는다.
링크가 하나도 없을 때 보여 줄 빈 상태 화면, 통계를 불러오는 동안의 로딩 표시, 주소 형식이 틀렸을 때의 오류 안내를 만든다.
공개 페이지는 읽기만 열고 편집 화면은 비밀번호와 HttpOnly 세션 쿠키로 보호하며 클릭 API는 IP당 분당 60회로 제한한다.
링크 주소는 http·https 만 허용하고 javascript: 같은 스킴과 내부 관리 주소는 저장 단계에서 거부한다.
주간 요약이 필요하면 카카오 알림톡이나 문자 대신 Resend 이메일로 보낸다.
후원 버튼을 넣는다면 금액은 원화(₩)로 표시하고, 국내 결제 PG 연동은 가맹 심사가 필요하므로 범위에서 빼고 외부 링크로만 연결한다.
화면 문구와 요일·시각 표기는 한국어(Asia/Seoul)로 하고 방문 시각은 2026년 10월 17일 (토) 오후 9:05 형식으로 적는다.
1년이 지난 클릭 기록은 매월 1일 자동으로 지우고 남기는 항목과 보관 기간을 개인정보 안내 문구와 README 에 적는다.
링크 주소 검증과 클릭 집계(중복 제거, 자정 기준 주간 경계) 단위 테스트, 링크 추가부터 클릭·통계 확인까지 한 바퀴 도는 통합 테스트를 Vitest 로 작성한다.
README 에는 실행 명령, .env 항목, DB 파일 위치, 백업 방법, 클릭 기록 보관 기간을 적는다.
회원가입과 요금 청구 화면, 외부 광고·추적 스크립트는 넣지 않는다.
상품·멤버십 판매, 이메일 캠페인 발송, 미디어 키트, 인스타그램 DM 자동 응답은 일부러 뺀다.
마지막으로 npm test 로 링크 검증과 클릭 집계 테스트를 돌려 통과를 확인하고 실행한 명령을 순서대로 적는다.