*본 글은 카카오모빌리티 인재성장팀 슬기님의 생생한 AI활용 크롬 익스텐션 만들기 여정의 기록입니다. 소위 요즘 말하는 #바이브코딩 의 사례로 볼 수 있겠네요! :) 비슷하게 반복되는 업무를 조금이나마 줄이고 싶으셨던 HRer 분들이라면 슬기님의 여정이 인사이트를 드릴 수 있을거라고 생각해 공유 드립니다!
01. AI로, 채팅 말고 개발!
요즘은 AI를 안쓰면, 어딘가 뒤쳐지는 기분이 든다.
우리 엄마조차도 타로카드 공부할 때 ChatGPT를 쓴다.
카드 조합을 사진으로 찍어서 해석을 물어보고, 그걸로 복습까지 하신다.
얼마 전엔, gpt-4o의 이미지 생성 모델이 크게 개선되면서
지브리 풍으로 본인 사진을 바꾸는 게 한동안 화제가 되기도 했다. (지금도 화제려나)
복잡한 프롬프트 없이 사진만 띡- 올리면, 마치 애니메이션 한 장면처럼 그림을 그려준다.
이쯤 되면, AI랑 대화하는 건 이제 특별한 활용이 아니라 그냥 기본값이다.
문득 이런 생각이 들었다.
”이렇게 똑똑한 친구랑, 그냥 말만 하고 끝내기엔 좀 아깝지 않나?”
그래서 한 번 시도해봤다.
개발 경험이라고는 전혀 없는 필자가 AI의 도움을 받아,
처음으로 크롬 익스텐션을 만들어본 이야기다.
이 글을 읽다 보면, 이렇게 생각할지도 모른다.
”어라? 이 사람도 하는데,, 나도 한 번 만들어볼까?”
여러분 모두 할 수 있어요. 정말.
02. 시작은 내가 겪는 아주 사소한 문제에서부터
회사에서 여러 조직문화나 성장지원 프로그램을 운영하다 보면
예상보다 자주, 구성원들을 랜덤으로 추첨해야하는 상황이 생긴다.
이벤트 당첨자 선정, 교육 참여자 선정까지—
‘공정한 무작위’가 필요한 순간이 은근히 많다.
그럴 때마다 추첨 사이트를 찾아서 쓰곤 했는데, 이게 생각보다 번거롭다.
온라인 추첨 도구야 많지만 대부분 제공되는 포맷이 정해져 있어서,
원하는 형태로 결과값을 받기 어렵다.
게다가 즐겨찾기를 해놔도 워낙 즐찾을 해둔 사이트가 많다보니,
추첨 사이트 하나를 다시 찾는 것도 매번 은근한 귀찮음으로 다가왔다.
그래서 이 사소하지만 번거로운 문제부터 AI로 해결해보고자 했다.
보통 추첨 리스트는 구글 스프레드시트에 정리해두니까,
크롬 익스텐션 형태로 추첨기를 만들면 접근성과 활용도 모두 좋겠다는 판단이 들었다.
무엇보다 내가 가장 자주 쓰고 늘 띄워두는 게 크롬 브라우저니까.
추첨 자체는 길어봐야 3~5분이면 끝나는 일이지만,
그걸 10초로 확 줄일 수 있다면 충분히 의미 있는 개선이라고 생각했다.
마침 요즘은 AI가 코딩도 잘 짠다니, 한 번 시도해볼 만한 타이밍이었다.
03. AI에게 원하는 조건을 명확하게 전달하자
필요한 준비물은 간단하다.
- AI를 부려먹을 수 있는 손가락
- Claude 혹은 ChatGPT와 같은 LLM 툴
- vs code (무료로 다운로드 가능한 코드 에디터)
기본적인 코드는 LLM이 짜주고,
그 코드를 vs code로 옮기는 것이 대부분의 작업이다.
생각보다 단순한 복붙 작업이니 지레 겁먹지 말자 (복붙의 향연)
프롬프트를 잘 쓰는 방법은 여러가지가 있겠지만,
딱 2가지만 기억하면 원하는 결과물을 꽤 쉽게 뽑아낼 수 있다.
내가 원하는 결과물의 조건을 구체적으로 설명하기
이 두가지 사항을 기반으로, 나는 Claude에게 아래와 같이 프롬프트를 입력했다.
너는 10년차 풀스택 개발자이고, 크롬 익스텐션을 만드는 걸 굉장히 잘해. 랜덤 추첨기 크롬 익스텐션을 만들고 싶은데, 갖춰야할 조건은 아래와 같아. 만들어줘! [조건] * 대상자란을 입력할 수 있는 input창이 있어야 하고, 이름이 수직으로 나열될 예정이야 (구글 스프레드시트에서 긁어서 붙일거거든) * 추첨 인원을 설정할 수 있는 input창이 필요해 * 추첨 돌리기 버튼을 클릭하면, 대상자 란에서 추첨 인원만큼 인원을 추첨해 결과값을 보여줘야해. * 결과값 앞에는 @가 붙어야 하고, 수평되게 나열해주면 좋겠어.
이 프롬프트를 바탕으로 Claude는 크롬 익스텐션을 만들기 위한 전체 구조와 파일 목록을 설명해주고,
각 파일의 코드를 자동으로 생성해준다.
보통은 manifest.json, popup.html, popup.js 세 개의 파일이 포함된다.
STEP 2. VS code에 코드 옮기기
이제 AI가 만들어준 코드를 VS code에 옮겨야 한다.
VS code는 개발자들이 가장 많이 쓰는 에디터 중 하나로,
쉽게 말해 코딩용 워드 프로세서라고 생각하면 된다.
작업은 아래와 같이 하면 된다.
(*꿀팁: 만일 이 설명에서 막히는 부분이 있다면,
챗GPT나 클로드에게 물어보길.
그들이 더 자세히, 잘 설명해줄 수도 있다)
바탕화면에 ramdom picker라는 폴더를 만든다.
해당 폴더에는 LLM이 만들어준 코드 파일이 들어갈 예정이다.
vs code를 열고, 폴더 아이콘의 열기 버튼을 클릭해 ramdom picker 폴더를 선택해준다. (작성자 신뢰 관련 팝업이 뜨면, “예”를 누르면 된다)
3. 왼쪽 사이드바에서 파일 아이콘을 클릭해, AI가 만들라고 한 이름 그대로 각 파일을 생성해준다.
파일명은 반드시 LLM에서 설정한 이름과 동일하게 작성해줘야 한다.
4. 각 파일에 AI가 준 코드를 그대로 붙여넣고 저장한다. (복붙할 때마다 ctrl+s를 눌러줘야한다)
이렇게 반복된 복붙 작업을 하면, 프로그램이 완성되었다..! 🎉
STEP 3. 결과물 실행시키기
이제 크롬 익스텐션이 실제로 작동하는 모습을 확인해보자.
- 크롬 주소창에 chrome://extensions/ 입력
- 우측 상단의 ‘개발자 모드’를 ON
- ‘압축해제된 확장 프로그램을 로드’ 버튼 클릭 → 아까 만든 random-picker 폴더 선택
이 과정을 거치면, 이제 내 브라우저에 직접 만든 확장 프로그램이 등록된다.
버튼을 눌러 추첨해보고, 결과가 잘 출력되면...
이게 바로 진짜 내가 만든 도구라는 실감이 온다.
이 글을 읽는 분들이라면,
한번 쯤은 이 과정을 직접 경험해보면 좋을 것 같다.
04. 대AI시대, 정말 중요한 건
AI가 끊임없이 발전하고 있지만 결국 중요한 건,
뭔가 대단한 걸 만드는 게 아니라
나에게 의미 있는 문제를 직접 해결해보는 경험 그 자체인 것 같다.
그게 아무리 작고 사소하더라도 말이다.
이번에 만든 크롬 익스텐션도 대단한 기술이 들어간 건 아니지만,
‘필요한 걸 내가 만들었다’는 감각은 생각보다 꽤 강렬했다.
요즘처럼 AI가 코딩까지 도와주는 시대엔
어려운 지식이 없어도 작은 문제 하나쯤은 직접 해결해볼 수 있는 도구들이 손에 닿아 있다.
궁금한 게 있다면, 그냥 한 번 시도해보면 된다.
그 시작이 생각보다 더 많은 걸 바꿔줄지도 모른다.
🚩 슬기님과 함께 AI를 활용해 나만의 서비스를 제작해 보고 싶으신 분들은?
서강대학교 미래교육원 전문교육과정 AI Agent 활용 및 나만의 AI 서비스 제작 (보러가기 >>
*본 글은 카카오모빌리티 인재성장팀 슬기님의 생생한 AI활용 크롬 익스텐션 만들기 여정의 기록입니다. 소위 요즘 말하는 #바이브코딩 의 사례로 볼 수 있겠네요! :) 비슷하게 반복되는 업무를 조금이나마 줄이고 싶으셨던 HRer 분들이라면 슬기님의 여정이 인사이트를 드릴 수 있을거라고 생각해 공유 드립니다!
01. AI로, 채팅 말고 개발!
요즘은 AI를 안쓰면, 어딘가 뒤쳐지는 기분이 든다.
우리 엄마조차도 타로카드 공부할 때 ChatGPT를 쓴다.
카드 조합을 사진으로 찍어서 해석을 물어보고, 그걸로 복습까지 하신다.
얼마 전엔, gpt-4o의 이미지 생성 모델이 크게 개선되면서
지브리 풍으로 본인 사진을 바꾸는 게 한동안 화제가 되기도 했다. (지금도 화제려나)
복잡한 프롬프트 없이 사진만 띡- 올리면, 마치 애니메이션 한 장면처럼 그림을 그려준다.
이쯤 되면, AI랑 대화하는 건 이제 특별한 활용이 아니라 그냥 기본값이다.
문득 이런 생각이 들었다.
”이렇게 똑똑한 친구랑, 그냥 말만 하고 끝내기엔 좀 아깝지 않나?”
그래서 한 번 시도해봤다.
개발 경험이라고는 전혀 없는 필자가 AI의 도움을 받아,
처음으로 크롬 익스텐션을 만들어본 이야기다.
이 글을 읽다 보면, 이렇게 생각할지도 모른다.
”어라? 이 사람도 하는데,, 나도 한 번 만들어볼까?”
여러분 모두 할 수 있어요. 정말.
02. 시작은 내가 겪는 아주 사소한 문제에서부터
회사에서 여러 조직문화나 성장지원 프로그램을 운영하다 보면
예상보다 자주, 구성원들을 랜덤으로 추첨해야하는 상황이 생긴다.
이벤트 당첨자 선정, 교육 참여자 선정까지—
‘공정한 무작위’가 필요한 순간이 은근히 많다.
그럴 때마다 추첨 사이트를 찾아서 쓰곤 했는데, 이게 생각보다 번거롭다.
온라인 추첨 도구야 많지만 대부분 제공되는 포맷이 정해져 있어서,
원하는 형태로 결과값을 받기 어렵다.
게다가 즐겨찾기를 해놔도 워낙 즐찾을 해둔 사이트가 많다보니,
추첨 사이트 하나를 다시 찾는 것도 매번 은근한 귀찮음으로 다가왔다.
그래서 이 사소하지만 번거로운 문제부터 AI로 해결해보고자 했다.
보통 추첨 리스트는 구글 스프레드시트에 정리해두니까,
크롬 익스텐션 형태로 추첨기를 만들면 접근성과 활용도 모두 좋겠다는 판단이 들었다.
무엇보다 내가 가장 자주 쓰고 늘 띄워두는 게 크롬 브라우저니까.
추첨 자체는 길어봐야 3~5분이면 끝나는 일이지만,
그걸 10초로 확 줄일 수 있다면 충분히 의미 있는 개선이라고 생각했다.
마침 요즘은 AI가 코딩도 잘 짠다니, 한 번 시도해볼 만한 타이밍이었다.
03. AI에게 원하는 조건을 명확하게 전달하자
필요한 준비물은 간단하다.
STEP 1. LLM에게 코드 요청하기
이 프롬프트를 바탕으로 Claude는 크롬 익스텐션을 만들기 위한 전체 구조와 파일 목록을 설명해주고,
각 파일의 코드를 자동으로 생성해준다.
보통은 manifest.json, popup.html, popup.js 세 개의 파일이 포함된다.
STEP 2. VS code에 코드 옮기기
이제 AI가 만들어준 코드를 VS code에 옮겨야 한다.
VS code는 개발자들이 가장 많이 쓰는 에디터 중 하나로,
쉽게 말해 코딩용 워드 프로세서라고 생각하면 된다.
작업은 아래와 같이 하면 된다.
(*꿀팁: 만일 이 설명에서 막히는 부분이 있다면,
챗GPT나 클로드에게 물어보길. 그들이 더 자세히, 잘 설명해줄 수도 있다)
바탕화면에 ramdom picker라는 폴더를 만든다. 해당 폴더에는 LLM이 만들어준 코드 파일이 들어갈 예정이다.
vs code를 열고, 폴더 아이콘의 열기 버튼을 클릭해 ramdom picker 폴더를 선택해준다. (작성자 신뢰 관련 팝업이 뜨면, “예”를 누르면 된다)
3. 왼쪽 사이드바에서 파일 아이콘을 클릭해, AI가 만들라고 한 이름 그대로 각 파일을 생성해준다. 파일명은 반드시 LLM에서 설정한 이름과 동일하게 작성해줘야 한다.
4. 각 파일에 AI가 준 코드를 그대로 붙여넣고 저장한다. (복붙할 때마다 ctrl+s를 눌러줘야한다)
이렇게 반복된 복붙 작업을 하면, 프로그램이 완성되었다..! 🎉
STEP 3. 결과물 실행시키기
이제 크롬 익스텐션이 실제로 작동하는 모습을 확인해보자.
이 과정을 거치면, 이제 내 브라우저에 직접 만든 확장 프로그램이 등록된다.
버튼을 눌러 추첨해보고, 결과가 잘 출력되면...
이게 바로 진짜 내가 만든 도구라는 실감이 온다.
이 글을 읽는 분들이라면,
한번 쯤은 이 과정을 직접 경험해보면 좋을 것 같다.
04. 대AI시대, 정말 중요한 건
AI가 끊임없이 발전하고 있지만 결국 중요한 건,
뭔가 대단한 걸 만드는 게 아니라
나에게 의미 있는 문제를 직접 해결해보는 경험 그 자체인 것 같다.
그게 아무리 작고 사소하더라도 말이다.
이번에 만든 크롬 익스텐션도 대단한 기술이 들어간 건 아니지만,
‘필요한 걸 내가 만들었다’는 감각은 생각보다 꽤 강렬했다.
요즘처럼 AI가 코딩까지 도와주는 시대엔
어려운 지식이 없어도 작은 문제 하나쯤은 직접 해결해볼 수 있는 도구들이 손에 닿아 있다.
궁금한 게 있다면, 그냥 한 번 시도해보면 된다.
그 시작이 생각보다 더 많은 걸 바꿔줄지도 모른다.
🚩 슬기님과 함께 AI를 활용해 나만의 서비스를 제작해 보고 싶으신 분들은?
서강대학교 미래교육원 전문교육과정 AI Agent 활용 및 나만의 AI 서비스 제작 (보러가기 >>