OTP 자동 입력 확장으로 살펴보는 AI 코딩 이후의 개발자 판단

About this offer

OTP 자동 입력 확장의 제작 경험은 AI 코딩에 관해 무엇을 보여 줄까요? GeekNews에 소개된 제작자는 반복 로그인의 불편을 줄이려고 Claude Code와 기능 구현부터 심사 준비까지 진행했다고 설명합니다. 다만 구현 시간 비교나 결함 발생률 측정값이 없어, 모든 확장 개발의 생산성 향상으로 일반화하기는 어렵다는 점에 주의해야 합니다. 인증 앱에서 숫자를 가져오는 일은 잠깐이면 끝납니다. 하지만 로그인할 때마다 같은 일을 반복하면 하던 작업의 흐름도 자꾸 끊깁니다. 이 불편을 이해하려면 클릭 횟수뿐 아니라, 인증을 위해 작업을 멈추는 순간에도 주목해야 합니다. GeekNews 제작기에서는 인증 앱을 열고 숫자를 복사해 붙여넣는 반복 동작이 출발점입니다. 사용자가 매번 직접 처리하던 과정을 살펴보면, 작은 자동화 도구가 필요한 이유를 구체적으로 이해할 수 있습니다. 제작기 주소는 https://news.hada.io/topic?id=32350 입니다. 사이트 등록부터 인증값 입력과 버튼 클릭까지 사용자가 무엇을 등록하면 확장이 어떤 순서로 로그인을 자동화할까요? 사용자는 사이트별 URL 패턴과 Secret Key, OTP 입력창과 로그인 버튼의 CSS 선택자를 등록합니다. 해당 페이지에 들어가면 확장이 TOTP를 계산하고 입력한 뒤 로그인 버튼을 클릭합니다. 자동 입력을 설정하려면 어느 사이트에서 동작할지와 화면의 어느 요소를 사용할지를 함께 정해야 합니다. URL 패턴은 대상 페이지를 정하는 데 쓰입니다. CSS 선택자는 OTP를 넣을 입력창과 누를 로그인 버튼을 지정하는 데 쓰입니다. 사이트와 대상 등록 — URL 패턴, Secret Key, 입력창과 버튼의 CSS 선택자를 등록합니다. 대상 페이지 진입 — 등록한 사이트의 페이지에 들어갑니다. 인증값 계산과 입력 — 확장이 TOTP를 계산해 지정한 입력창에 넣습니다. 로그인 버튼 클릭 — 입력을 마치면 지정한 로그인 버튼을 누릅니다. 화면에서 고르게 하려면 작성 상태도 지켜야 합니다 화면에서 입력창을 직접 고르게 하면 사용자는 CSS 선택자를 몰라도 대상을 지정합니다. 페이지를 누르는 순간 팝업이 닫히므로, 요소 선택과 작성 중인 폼을 이어 주는 처리가 함께 필요합니다. 제작자는 storage.session에 상태를 남겼다가 복원하도록 처리했습니다. 화면을 클릭하는 기능을 완성하려면, 클릭한 대상을 고르는 일뿐 아니라 팝업이 닫힌 뒤에도 작성 내용을 이어 가는 일까지 다뤄야 했습니다. QR 코드를 등록하는 경로도 마련했습니다. 현재 탭을 스캔하거나 이미지를 업로드하는 방식입니다. 이 처리를 위해 jsQR을 확장에 함께 넣었으며, 두 경로 모두 오프라인에서 처리하도록 구성했습니다. 계산 위치와 실제 동작 조건을 따로 정합니다 자동화할 사이트가 정해져 있다면 접근 권한을 검토할 기준도 구체적입니다. 실제 기능에 필요한 접근 범위를 그 사이트의 사용 맥락에 맞춰 정하는 것입니다. 여기서 권한을 받는 범위와 자동 입력을 시작하는 주소 조건을 각각 살펴볼 이유가 생깁니다. 제작자가 설명한 크롬 match pattern에는 포트를 표현하는 제약이 있었습니다. 그래서 호스트 단위로 권한을 받는 처리와 정확한 URL을 대조하는 처리를 나눴습니다. 페이지 쪽에서 실행되는 content script가 주소 대조를 맡습니다. 제작기에 따르면 사내망 HTTP 페이지의 content script에서는 crypto.subtle을 사용할 수 없었습니다. RFC 6238에 따른 TOTP 계산을 background 서비스 워커로 옮긴 이유입니다. 인증값 계산을 구현하는 일에는 그 계산에 필요한 기능을 어디서 사용할 수 있는지 살피는 일도 포함됐습니다. 이 구조에서 도출한 검증 제안은 구체적입니다. 등록한 URL과 포트가 다른 페이지에서 자동 입력이 시작되는지 살펴봅니다. 화면이 개편된 뒤에는 CSS 선택자가 의도한 요소를 계속 가리키는지도 점검합니다. 오프라인 계산과 인증 수단의 분리는 다른 질문입니다 외부 서버 없이 OTP를 계산한다면 인증 구조에 관한 검토도 끝날까요? 제작자는 서버 호출·트래킹·계정 없이 OTP를 계산하지만, 로그인하는 브라우저에 시크릿을 두면 별도 기기를 쓰는 2차 인증의 의미가 약해진다고 설명합니다. 상정한 사용처도 보안 요구가 낮고 반복 로그인이 많은 사내 시스템이므로, 도입 시 조직의 인증 수단 분리 요구를 함께 검토해야 합니다. 도입을 검토할 때는 조직이 인증 수단을 별도 기기에 두려는 이유부터 살펴봅니다. 별도 기기를 사용하는 방식은 로그인하는 브라우저와 인증 수단을 나누는 구성입니다. 제작자는 서버 호출·트래킹·계정 없이 계산하더라도, 브라우저에 TOTP 시크릿을 두면 이런 분리의 의미가 약해진다고 밝혔습니다. 따라서 제작자가 상정한 보안 요구가 낮고 반복 로그인이 많은 사내 시스템이라는 사용 조건도 도입 판단에 함께 넣어야 합니다. 추가 작업이 평소의 기대치가 될 수 있습니다 여러 작업을 동시에 진행하는 모습에도 주목할 필요가 있습니다. ITWorld가 소개한 연구에서는 직원들이 맡는 업무의 범위를 넓혔습니다. 쉬던 시간에도 프롬프트를 작성했습니다. 관찰 대상은 직원 200명 규모의 기술 기업이었습니다. 연구는 8개월간의 관찰과 40건 이상의 인터뷰를 포함합니다. 이 연구를 소개한 ITWorld 기사 주소는 https://www.itworld.co.kr/article/4228563/ai-%ec%bd%94%eb%94%a9%ec%9d%98-%ec%86%8d%eb%8f%84-%ed%96%a5%ec%83%81%ec%9d%b4-%eb%b6%80%eb%a5%b8-%ec%97%94%ec%a7%80%eb%8b%88%ec%96%b4%eb%a7%81-%eb%b6%80%eb%8b%b4.html 입니다. 한 기업을 관찰한 질적 연구라는 한계 안에서 살펴볼 대목은 추가 작업에 대한 기대의 변화입니다. 자발적으로 더 하던 일이 평소에도 해야 하는 일로 받아들여질 수 있습니다. 개발자에게는 새 작업을 시작할 여력이 생겼다는 사실과, 그 작업이 일상적인 업무로 자리 잡는 과정을 함께 살펴보라는 의미입니다. 절약한 시간의 일부를 검증과 유지보수에 배분합니다 클릭으로 요소를 고르는 기능에는 팝업이 닫힌 뒤 작성 내용을 복원하는 처리가 따라왔습니다. 사내망 HTTP 페이지에서 인증값을 계산하려면 계산 위치도 조정해야 했습니다. 사용자의 짧은 조작 뒤에 화면 상태와 실행 환경에 관한 결정이 놓여 있었습니다. 외부 서버 없이 계산한다는 특성과 인증 수단을 분리한다는 요구도 따로 살펴봤습니다. 또한 한 기업의 연구에서는 직원들이 업무를 넓히고 쉬던 시간에도 작업했습니다. 추가 작업이 평소의 기대치로 이어질 가능성은 확보한 시간을 어떻게 쓸지 생각하게 합니다. 다음에 해 볼 것 — 팀에 적용할 다음 행동으로, 완성한 기능 목록 옆에 남은 일을 적어 보는 방식을 제안합니다. 권한 검토의 완료 여부, 페이지 변경에 대응할 담당자, 자동 입력 실패를 사용자가 이해할 수 있는지를 기록합니다. 절약한 시간 중 일부는 이 기록을 바탕으로 동작 범위를 점검하고 유지보수 조건을 정하는 데 배분합니다. 원문: webi 기술 블로그 참고한 자료: Show GN: OTP 복사-붙여넣기가 귀찮아서 자동 입력 크롬 확장을 만들었습니다 아이폰 듀오의 진짜 경쟁자, 갤럭시 폴드 아닌 아이폰+아이패드 조합 AI 코딩의 속도 향상이 부른 엔지니어링 부담