지피터스 웨비나 신청서 작성을 자동화 했습니다

Chrome 북마크 하나로 지피터스 웨비나 신청서 자동화하기

📝 한줄 요약

지피터스 웨비나를 신청할 때마다 반복해서 입력하던 개인정보를 Chrome 북마크릿(JavaScript가 실행되는 북마크)으로 자동 입력하게 만들어 보았습니다. item 선택과 최종 제출은 직접 하도록 남겨 실수를 줄였습니다.

🎯 이런 분들께 도움돼요

• 비슷한 신청서를 자주 작성하는 사람

• JavaScript를 조금 배워서 브라우저 작업을 줄이고 싶은 사람

• 개발자 도구 없이 간단한 자동화를 써보고 싶은 사람

😫 문제 상황 (Before)

지피터스 웨비나 신청서를 작성하는 것은 절대 귀찮은 일은 아니지만, 자동화에 중독이 된 저는 누가 해줬으면 하는 생각이 들었습니다. 신청서 URL은 달라져도 양식은 비슷하니..가능하지 않을까? ?

🛠️ 사용한 도구

• Chrome 북마크릿: 북마크를 클릭해 JavaScript를 실행하는 방식

• JavaScript: 웹페이지의 입력칸과 버튼을 찾고 조작하는 언어

• Airtable 공개 신청서

• Codex: 코드 작성, 오류 원인 분석, 실제 Airtable 화면 확인

🔧 작업 과정

반복 입력을 북마크 하나로 줄이기

Chrome에서 Airtable 신청서의 이름, 이메일, 전화번호, 소속을 자동 입력되도록 하고 싶어. 방법 제안해줘.

JavaScript에서는

DOM(웹페이지 안의 입력칸, 버튼, 글자 등을 컴퓨터가 정리해 둔 구조)에서 필요한 입력칸을 찾습니다.

selector(원하는 요소를 찾아내는 규칙)를 이용해 이메일·전화번호 칸을 찾고, 입력칸 옆의 안내 문구를 보고 이름과 소속 칸도 구분합니다.

값을 넣은 뒤에는 event(값이 바뀌었다고 웹페이지에 알려주는 신호)를 보내야합니다. 사람이 직접 타이핑하면 브라우저가 자동으로 알려주지만, JavaScript가 대신 입력할 때는 직접 알려줘야 합니다.

💻 실제로 사용한 코드

1. 자동입력을 위한 코드

javascript:(()=>{const V={name:"홍길동",email:"[email protected]",phone:"01012345678",org:""};const N=s=>(s||"").toLowerCase().replace(/[^\p{L}\p{N}]/gu,"");const L=e=>{const r=e.closest('[data-testid="stackedLabel"]')||e.closest("label")||e.parentElement;return N([e.getAttribute("aria-label"),e.getAttribute("placeholder"),e.getAttribute("name"),e.getAttribute("autocomplete"),r?.innerText].filter(Boolean).join(" "))};const F=[...document.querySelectorAll("textarea,input")].filter(e=>!["checkbox","radio","hidden","file","submit","button"].includes(e.type)&&e.getAttribute("role")!=="combobox");const find=k=>F.find(e=>k.some(x=>L(e).includes(N(x))));const set=(e,v)=>{if(!e)return;const P=e.tagName==="TEXTAREA"?HTMLTextAreaElement:HTMLInputElement,d=Object.getOwnPropertyDescriptor(P.prototype,"value")?.set;d?d.call(e,v):e.value=v;e.dispatchEvent(new Event("input",{bubbles:true}));e.dispatchEvent(new Event("change",{bubbles:true}))};const E=find(["이메일","email"])||F.find(e=>e.type==="email"),P=find(["전화","연락","휴대","phone","mobile"])||F.find(e=>e.type==="tel"),A=find(["이름","닉네임","성명","name"])||F.find(e=>(e.tagName==="TEXTAREA"||e.type==="text")&&e!==E&&e!==P),O=find(["소속","회사","기관","직장","organization","company","affiliation"]);set(A,V.name);set(E,V.email);set(P,V.phone);set(O,V.org);[...document.querySelectorAll('input[type="checkbox"],[role="checkbox"]')].filter(e=>{const r=e.closest("label")||e.closest('[data-testid="stackedLabel"]')||e.parentElement;return e.required||e.getAttribute("aria-required")==="true"||/\[\s*필수\s*\]|필수|required/i.test((r?.innerText||"")+" "+(e.getAttribute("aria-label")||""))}).forEach(e=>{const c=e.type==="checkbox"?e.checked:e.getAttribute("aria-checked")==="true";if(!c)e.click()});const B=[...document.querySelectorAll('button,[role="button"]')].find(b=>/add\s*record/i.test((b.getAttribute("aria-label")||"")+" "+(b.innerText||"")));if(!B)return alert("Add record 버튼을 찾지 못했습니다.");B.click()})()

코드 설명

• V: 입력할 이름, 이메일, 전화번호, 소속을 저장합니다.

• DOM: 웹페이지 안의 입력칸과 버튼을 컴퓨터가 정리해 둔 구조입니다.

• selector: DOM 안에서 원하는 입력칸을 찾는 규칙입니다.

• find: 이메일, 전화번호 같은 입력칸을 찾습니다.

• set: 입력칸에 값을 넣습니다.

• event: Airtable에 “값이 입력되었어요”라고 알려줍니다.

• [필수] 부분은 자동으로 체크합니다.

• 마지막에는 Add record 버튼만 누릅니다.

item 선택과 최종 제출은 자동화하지 않았습니다. 신청서마다 item이 달라질 수 있고, 제출은 사람이 확인하고 진행하는 것이 안전하기 때문입니다.

2. 초기화를 위한 코드

javascript:(async()=>{const w=t=>new Promise(r=>setTimeout(r,t)),T=e=>(e.getAttribute("aria-label")||e.innerText||"").trim(),B=[...document.querySelectorAll('button,[role="button"]')].find(e=>/^(clear form|초기화|양식 지우기)$/i.test(T(e)));if(!B)return alert("Clear form 버튼을 찾지 못했습니다.");B.click();await w(400);const D=[...document.querySelectorAll('[role="dialog"]')].find(e=>/clear form|초기화/i.test(e.innerText||""))||document,C=[...D.querySelectorAll('button,[role="button"]')].find(e=>/^(confirm|확인)$/i.test(T(e)));if(!C)return alert("Confirm 버튼을 찾지 못했습니다.");C.click()})()

이 코드는 Airtable의 Clear form 버튼을 눌러 이름, 연락처, 체크박스, 선택된 item을 모두 초기화합니다. 현재의 지피터스 웨비나 Airtable 신청서는 Clear form 버튼을 이용해 입력값과 선택된 item을 초기화할 수 있었습니다.

📌 실행하는 방법

두 개의 북마크를 각각 한 번씩 만들면 된다.

1. Chrome에서 Ctrl+D를 눌러 새 북마크를 만듭니다.

2. 첫 번째 코드는 이름을 Airtable 자동입력으로 저장합니다.

3. 두 번째 코드는 이름을 Airtable 초기화로 저장합니다.

4. 혹시? Chrome이 javascript:를 지우면 그 부분만 직접 입력해야합니다(거의 발생하지 않음).

5. Airtable 신청서 페이지에서 북마크를 클릭하면 js코드가 작동되어 자동 입력됩니다.

현재 코드의 홍길동, 이메일, 전화번호는 예시이므로 공유하기 전 자신의 정보로 바꿔서 재사용 가능합니다.

사용 순서는 다음과 같습니다.

이전 내용이 남아 있으면 Airtable 초기화 클릭

→ Airtable 자동입력 클릭

→ item 선택

→ 최종 제출

✅ 결과 (After)

신청서마다 item이 달라질 수 있고, 제출은 외부로 데이터가 전송되는 행동이기 때문에 자동화 하지 않았습니다.

💬 이 과정에서 배운 AI 활용 팁

1. “전부 자동화해줘”보다 “여기까지만 자동화하고 나머지는 직접 하게 해줘”라고 범위를 정하면 안전하다.

2. 신청서가 바뀔 수 있다면 item 이름을 코드에 고정하지 말고, 입력 형식과 label을 이용해 요소를 찾게 할 수 있다.

3. 안 될 때는 “안 돼”에서 포기하지 말고, “어떤 값은 되고 어떤 값은 안 되는지”를 알려준다.

4. 외부 제출, 결제, 메시지 전송처럼 되돌리기 어려운 행동은 사람이 마지막에 확인하도록 남기는 것이 좋다.

🌍 앞으로 다른 업무에 적용한다면?

• 반복되는 Google Forms, Typeform, 행사 신청서 자동 입력

• 주소·연락처를 자주 입력하는 예약·문의 페이지

• 메크로 처럼 입력하고 싶은 입력폼

• 여러 신청서 양식을 자동으로 구분하는 브라우저 도구

• 개인정보를 코드에 저장하지 않고 실행할 때 입력받는 방식

🚀 앞으로의 계획

앞으로는 반복해서 작성하는 다른 입력폼도 자동화해보고 싶습니다.

아이디와 비밀번호를 자동으로 입력하는 것은 기술적으로 가능하지만, 비밀번호를 코드에 저장하면 유출될 위험이 있습니다. 따라서 로그인 자동화는 사용하지 않기로 했습니다. 로그인은 Chrome 비밀번호 관리자에 맡기고, 사용자가 직접 로그인한 뒤 로그인 후의 입력폼만 자동화하는 것이 안전합니다.

추후에, Airtable뿐 아니라 네이버 블로그, 설문조사, 예약 페이지처럼 반복해서 내용을 작성하는 웹페이지를 도와주는 웹 입력폼 자동화 Skill로 해보고 싶습니다. chrome:control-chrome 같은 브라우저 도구와 연결해야 실제 DOM을 확인하고 입력할 수 있습니다. 브라우저 도구를 활용해 어떤 순서로 어떻게 사용할지 알려주는 Skill(해줘~)을 만들 계획입니다.

• DOM(웹페이지의 입력칸과 버튼 구조)을 확인한다.

• selector(원하는 입력칸을 찾는 규칙)로 제목, 본문, 이메일 등을 찾는다.

• 반복되는 내용을 자동으로 입력한다.

• 입력이 끝나면 사용자가 확인하도록 멈춘다.

• 게시, 제출, 결제 같은 중요한 버튼은 자동으로 누르지 않는다.

• 사이트의 화면 구조가 바뀌면 selector를 다시 확인한다.

📋 재사용 가능한 프롬프트

나는 Airtable 공개 신청서의 반복 입력을 Chrome 북마크릿으로 자동화하고 싶어.

신청서 URL과 item 목록은 매번 바뀔 수 있지만 이름, 이메일, 전화번호, 소속 입력은 비슷해. 다음 조건으로 만들어줘.

1. 입력 형식과 label, aria-label 같은 화면 정보를 이용해 입력칸을 찾을 것

2. 이름·이메일·전화번호·소속을 임의의 값으로 입력할 것

3. [필수] 체크박스를 자동으로 체크할 것

4. 별도의 초기화 북마크는 Airtable의 Clear form과 Confirm을 눌러 item까지 초기화할 것

5. 자동입력 북마크는 Add record 버튼만 누르고 item 선택과 최종 제출은 절대 자동화하지 말 것

6. 신청서 구조가 달라져 필드를 못 찾으면 잘못된 칸에 입력하지 말고 알려줄 것

7. 외부 서버로 개인정보를 보내지 말고, Chrome 북마크에 저장할 수 있는 한 줄 javascript: 코드와 쉬운 사용법을 함께 줄 것