​갑자기 크롬 확장 프로그램을 만든 이야기....노트북을 펴고 할 일을 하던 중 갑자기대외활동 사이트를 모은 확장 프로그램을 만들고 싶다는 생각이 들었다.​​나는 평소 우리 학교의 필수 사이트들을 모아둔 확장 프로그램을잘 사용하는 중이었기에 자연스럽게 아이디어를 얻게 된 것 같다.​​나는 대학생답게 (ㅋㅋ) 링커리어, 캠퍼스픽 같은 대외활동·공모전 사이트들을 자주 접속하는 편인데, 북마크바의 폴더에 사이트들을 전부 넣어두니 왠지 복잡하고 누르고 싶지 않게 생겨서...나의 편의를 위해 만들고 싶다는 생각도 있었다.​지금까지 개발 경험은 한 번도 없었고, 확장 프로그램을 만들기 위해 무슨 언어를 써야하는 지도 몰랐지만...바이브 코딩 느낌으로 하면 왠지 만들 수 있겠다는 확신이 들어서일단 무작정 유튜브 영상을 찾아봤다.​​​전반적인 이해를 돕는데에 위 영상이 많은 도움이 되었다.​영상 속에서는 설명 없이 지나가시는데, VS Code Extensions 2개를 추가로 설치해야 영상과 똑같이 따라할 수 있다.​​​[Extensions] → 검색창에 'live server'(제작자가 Ritwick Dey) → [install] → 코드창에서 마우스 우클릭 후 옵션 선택으로 사용[Extensions] → 검색창에 'emojisense'→ [install] → 코드창에서 [Ctrl] + i 로 사용​



참고로 [Extensions] 버튼은 VS Code 좌측바의 맨 아래에 있다. (사진과 같은 아이콘) 사진 참고 영상을 따라하며 전반적인 사항들을 익힌 후, 본격적으로 Chat GPT와 대화하며 프로그램을 만들어가기 시작했다.(참고로 나의 GPT는 무료 플랜이다.)​​1. 확장 프로그램의 기본 기능 만들기​제일 처음에 GPT가 하라고 지시한 건 아래와 같았다.​​Step 1. 프로젝트 폴더 만들기Step 2. VS Code로 열기Step 3. manifest.json, popup.html 파일 만들기Step 4. 크롬에 등록하기​​크롬 확장 프로그램으로 보여지기 위한 최소한의 파일들만 생성한 다음, 버튼을 눌렀을 때 팝업창이 뜨며 시중의 프로그램들처럼 실행되는 걸 확인하고 나니 매우 신났다. +_+​​다음 단계로 뭘 해야하냐고 물어보니​popup.csspopup.jssites.jsicons/​이렇게 파일 3개와,icons라는 이름의 폴더 1개를 추가적으로 만들라고 말해줬다.GPT가 하라는 대로 코드들을 채워넣으니 어느정도 틀이 갖추어지고 있다는 것을 확인할 수 있었다.​초기의 모습. 정렬은 난리나있지만 어쨌든 작동은 한다. ㅎㅎ​​2. 확장 프로그램에 넣을 사이트 정하기이제는 대외활동 사이트들의 링크를 수집 할 차례!인지도가 높은 대외활동 사이트들을 포함하여 총 9~12개 정도를 모아보고자 했다.기존에 내가 알고있던 사이트들 + 검색해서 발견한 몇 가지 사이트들을 리스트에 추가하고 나니 딱 12개가 되었다.​​​GPT에게 고민되는 것들을 이것저것 물어봤고,최종적으로는 기존의 리스트에 있던 사이트 2개를 제외하고새로운 2개를 영입하여 총 12개의 사이트를 확정했다.(GPT는 꼭 12개일 필요가 있냐고 했지만 나는 왠지 행과 열을 딱딱 맞추는 게 예뻐보일 것 같았다...ㅎ)​​참고로 캠퍼즈라는 사이트를 제외할지 말지 고민했던 이유는...① 내가 처음 들어보는 사이트이기도 했고​​⬇️ 공모전 사이트 대외활동사이트 대학생 공모전 대외활동 사이트 홍보 모음 최종적으로 결정한 사이트 목록! (12개)링커리어캠퍼스픽위비티씽굿올콘씽유슥삭콘테스트코리아요즘것들슈퍼루키스펙업 (네이버 카페)잡코리아​​3. CSS 파일에서 디자인 하기​이제 디자인 들어갈 차례...디자인하는 단계에서 GPT의 도움이 정말 컸다. 아무래도 얘가 나보다 훨씬 전문가고, 나는 디자인 해 본 적이 없으니까...^^정말 모~든 걸 물어봤고, GPT가 제시해주는 디자인이 나의 의견과 일치했기 때문에 대화는 길었지만 수월하게 진행되었다.​​근데 이 친구가 코드를 순순히 알려주지 않고... 부분부분만 알려주면서 내가 알아서 빈칸을 채워넣기를 바랐다.난 이번에 프로그램을 만들면서 파이썬을 벗어난 다른 코딩도 공부해보고 싶었기에 오히려 좋았다.​​만드는 과정...​내가 작성한 것들 중 잘못된 부분과 그 이유를 알려줬는데, 솔직히 GPT의 말을 100% 이해하진 못했다... ^.^​수정을 거듭하던 중에 지금까지 만들어진 팝업 창의 실제 사진을 캡쳐해서 보내주니까, 사진을 토대로 여백과 아이콘의 크기 조정을 더 예쁘게 할 수 있도록 도와줬다.​​gap과 margin, site card의 크기 조정 과정에서 가장 우여곡절이 많았던 것 같다. 카드들의 간격을 줄이다가 가장자리 여백이 넓어지는 바람에, 다시 여백을 건드리다보니 갑자기 열과 행이 무너지기도 했다는 사연이 ​어쨌든 해결 완료!​​다크모드​라이트모드 뿐만 아니라 다크모드도 구현하고 싶어서 css에 이 부분을 추가했다.Windows (OS)의 테마설정이 아닌, 크롬의 테마설정을 따라가도록 하고 싶어서 그 부분을 GPT에게 명확하게 얘기했다.​​다크모드에서의 글씨 색을 #fff로 지정했는데도, 자꾸 라이트모드의 글씨색(진회색)이 적용되길래!important를 붙여서 우선순위를 줬다. (근데 이게 잘 작동하는 건지는 모르겠다. 어쨌든 이젠 글씨색이 제대로 보이긴 한다...)​​여기까지 만들고나니 전반적인 디자인과 기능 구현은 끝났다.이와 동시에 나의 작은 GPT는 떠나갔다... (크레딧 소진 이슈)​​그래서 학교에서 크레딧을 지원해주는 Claude Sonnet 5로 넘어가서 다음 단계를 밟기로 했다.​​4. 아이콘 수정하기'올콘'과 '스펙업'의 아이콘을 보세요...​popup.js 파일에서 구글 파비콘을 통해 아이콘을 가져오도록 연결해뒀기 때문에, 대부분의 사이트들이 자동적으로 예쁜 아이콘을 갖추고 있었다.BUT... '올콘'과 '스펙업'의 아이콘에 문제가 있었다.​​사진에서 보이는 것처럼, '올콘'의 아이콘은 눈에 띄게 저화질이었고 '스펙업'은 아이콘 자체를 불러오질 못했다.​일단 뭐라도 달고있는 '올콘'은 잠시 뒤로 미루고, '스펙업'에 아이콘을 달아주는 작업부터 하기로 했다.​(1) 스펙업 아이콘 수정하기우선 '스펙업'혼자만 파비콘이 없었던 이유는,'스펙업'은 웹사이트가 아니라 네이버 카페이기 때문이다.​파비콘처럼 서버에 저장되어 있는 아이콘을 URL로 불러올 수 있는 방법을 찾아봤지만 해결하기 어려워보였다.그래서 그냥 카페의 로고 사진을 저장해서 개별적으로 지정해주기로 했다.​popup.jssites.js​popup.js 파일의 아이콘 지정 부분을 if-else를 이용해서 수정했고,인터넷에서 저장한 카페의 아이콘을 개발 폴더에 넣었다. 공모전 사이트 대외활동사이트 대학생 공모전 대외활동 사이트 홍보 모음 그리고 사이트들의 URL을 관리하고 있는 sites.js 파일에 '스펙업'만 아이콘을 따로 연결했다.​이렇게 하고 나니까 바로 예쁘게 뿅! 하고 아이콘이 나타나주었다.​



===&gt



​ (전) (후)​(2) 올콘 아이콘 수정하기자 이제 올콘의 차례...​Claude가 말해준 저화질 파비콘 해결 방법은 아래와 같았다.​​1) 도메인과 apple-touch-icon을 결합시켜 찾기-&gt대부분의 사이트들이 모바일 홈 화면용으로 고화질 아이콘을 가지고 있기 때문​2) 사이트의 HTML 소스에서 + F 로 'icon'을 찾고, 그 중에서 고화질인 png를 가져오기​​이 방법들 외에도 사소한 몇 번의 시도들이 있었지만...올콘은 애초에 고화질 아이콘 자체가 존재하지 않는 사이트로 보였다. (오래 전에 개설된 사이트처럼 보였다)​​그러므로 고화질 아이콘을 얻고 싶다면 만드는 수밖에 없었다.​​



사실 올콘의 파비콘은 네모 2개와 알파벳 A가 함께 있는 매우 간단한 모양이었기에AI 업스케일링을 돌리면 금세 고화질 아이콘를 얻을 수 있을 것이라 생각했는데....​​내가 얻은 건 밤티 아이콘 뿐이었다. (도대체 왜 ㅠㅠ)​​그래서 파워포인트를 켜고 가내수공업으로 만들었다.배경이 흰색이면 헷갈려서... 색 있는 배경 아무거나 넣었다.​이렇게 만든 아이콘을 바로 쓸 수 있었다면 좋았겠지만...​A를 쓰면서 만들어진 텍스트상자 때문에아이콘 범위를 넘어서 여백까지 같이 저장이 되는 문제가 발생했다.(이 상태로 아이콘을 설정하면 아래 여백이 엄청 긴 것처럼 보인다.)​​그래서 Photopea 사이트의 trim 기능을 이용한 끝에,투명한 부분만 깔끔하게 걷어낸 new 아이콘을 얻었다!적용 방식은 '스펙업'아이콘을 적용할 때와 동일해서 빠르게 진행했다. ​​5. git 사용하기깃허브 계정은 만든지 꽤 되었지만, 정확히 어떻게 쓰는 지는 몰랐고... 올릴만한 것도 없었기에코딩 문제를 몇 번 풀고 commit 하는 게 전부였다.그런데 GPT와 대화하던 초반에 git을 사용하는 걸 추천한다는 말을 들었고, 이제 그의 말대로 git을 사용해보기로 했다...​​다른 분들이 블로그에 올려주신 글들과 Claude의 도움을 받으며,약간의 시행착오 끝에 나의 Github 계정 속 Repository를 개발 폴더에 연결하는 데에 성공했다.그리고 지금까지 만든 것을 초기 버전이라는 이름으로 Github에 업로드하는 데에도 성공했다!​​터미널 창에 뜨는 모든 것들을 이해할 자신이 없어서 그냥 잘 연결되고 있기만을 바라면서 명령어를 쳤다(...)한 번 폴더를 연결한 후에는, 버전 업데이트가 있을 때마다 터미널에서 아래의 명령어를 쳐주면 된다는 걸 알게 되었다.​​git add .git commit -m (수정 사항)git push​​명령어가 잘 먹히면 터미널 창이 잠시 멈춰있다가, 업로드 과정이 주루룩 나오는데 그게 진짜 쾌감있다!!!!git push를 또 하고 싶어서 버전 업데이트를 하고 싶을 지경이다. (ㅋㅋ)​참고로 개발 폴더의 이름을 변경하고 싶다면 Repository의 연결을 새롭게 해줘야 한다.블로그에 이걸 친절하게 설명해주신 공모전 사이트 대외활동사이트 대학생 공모전 대외활동 사이트 홍보 모음 분이 계셔서 그대로 따라했더니 잘 되었다. (감사합니다)​git push 할 때 매번 터미널을 켜지 않고, 그냥 VS Code 자체에서 git 하는 방법도 있는 것으로 보였는데, (확실하진 않다)나는 이번 개발을 슬슬 마무리하는 단계였기에 필요성을 느끼지 못해서 연결하진 않았다. 나중에 기회가 된다면 해보는 것으로...​이 과정이 가장 간지나는 것 같아서 좋다 (ㅋㅋ)​​6. 프로그램 이름 정하기 &amp아이콘 만들기git을 이용하여 중간 저장도 했으니...이제 내가 만든 확장 프로그램의 최종 이름을 정하고, 아이콘을 만들어야 하는 단계이다.​개발 과정에서 프로그램의 이름은 계속 Campus Hub&quot였다. 왜냐면 GPT가 처음에 그렇게 하라고 했기 때문에직관적인 이 이름이 별로인 건 아니었지만 좀 더 친근한 이름을 짓고 싶었다.​​그래서 Chat GPT, Gemini, Claude를 붙잡고 이름 짓기 대회를 개최했다...무료 플랜 쓰는 주제에 정말 까다롭게 굴었다. (^^;;)​자기가 생각해도 별로면서? 왜 입 밖으로 꺼내는건지 진짜 모를 일​프로그램의 아이콘과 이름의 유기성이 있길 바라면서 너무 긴 건 싫고 한글 이름으로 짓고 싶고 직관적이었으면 좋겠고 촌스럽지 않으면 좋겠고 기존에 있는 이름이랑 겹치지 않으면 좋겠고 (......그 외 다수의 조건.......)​​까다롭게 굴면서 이름을 고민한 끝에 어느정도 타협을 하기로 했고,대학서랍으로 이름을 정했다. 영문명은 uni-drawer!​​​GPT가 제시해준 폴더 + 학사모 컨셉을 토대로, AI를 이용해서 아이콘을 만들었다.나는 디자인 플랫폼 '미리 캔버스'에서 제공해주는 크레딧을 이용했다. (매일 200 크레딧씩 제공된다.).​​1) [AI 도구] - [아이콘 만들기] -[2D 아이콘 - 파스텔 라인]으로 아이콘 생성하기2) [AI 사진 편집 - 배경 제거]3) 슬라이드 배경을 검정색으로 바꿔서, 배경 제거가 잘 되었는지 확인하기4) 슬라이드 배경을 다시 흰색으로 바꾸고, 아이콘을 확대해서 슬라이드 전체를 채우기5) [다운로드] - [투명한 배경, png] 로 저장하기​​위 과정만 거치면 아이콘 만들기는 끝!('파스텔 라인'옵션을 선택한 건 개인취향이므로... 이건 원하는 대로 선택하셔도 됩니다)​​참고로 [아이콘 만들기]에서는 GPT Image 2 모델을 이용해서 만들어주는데,[바로 시작하기]를 클릭하면나노바나나2 lite / GPT Image 2 / 나노바나나 Pro / 나노바나나이렇게 4개의 모델 중 원하는 것을 선택해서 사용할 수 있다. (※ 크레딧 소진 개수는 각자 다르다.)​​7. 최종 점검의 시간이제 이름도 짓고 아이콘도 만들고... 정말 마지막 단계에 도착했다.미리캔버스로 만든 아이콘 png 파일은,16x16, 32x32, 48x48, 128x128이렇게 4가지의 사이즈로 조절해서 icons/ 폴더에 넣었다.​​1) 크롬 확장 프로그램 상의 오류는 없는지 수시로 새로고침하기2) 코드에서 중복되거나 필요없는 부분 있는지 GPT에게 물어보기 ⭐3) 'Campus Hub'에서 '대학서랍'으로 이름을 바꿈에 따라 수정해야하는 부분 체크​​크게는 이렇게 3가지의 부분들을 최종적으로 점검했다.​사실 마지막까지 hover와 음영을 두고 많이 고민했는데,이런 간단한 프로그램에서 음영을 주는 게 조잡하다고 느껴서 과감하게 빼기로 결정했다. 공모전 사이트 대외활동사이트 대학생 공모전 대외활동 사이트 홍보 모음 더 이상 손 댈 곳이 없다고 느껴서 마지막으로 git push를 하니, 이제 진짜 끝!​​8. 저의 첫 확장 프로그램을 소개합니다... ‍↕️​라이트모드 / 다크모드​이름 : 대학서랍제작 기간 : 26.07.17. - 26.07.18.​대학서랍은 대학생들이 자주 이용하는 대외활동, 공모전, 취업 정보 사이트를 한곳에서 빠르게 이용할 수 있도록 제작한 크롬 확장 프로그램입니다. 여러 사이트를 직접 검색하거나 즐겨찾기를 관리하는 번거로움을 줄이고, 필요한 정보를 쉽고 직관적으로 찾아갈 수 있도록 하는 것을 목표로 개발했습니다.아이콘 또는 텍스트 클릭 시 새 창에서 사이트를 열 수 있습니다.아이콘 호버 애니메이션이 적용되어 있습니다.현재 크롬 웹스토어 미출시 상태입니다.​​9. AI의 제안에서 알게된 것 &amp기각한 것바이브 코딩을 처음 해봤지만, 짧은 시간 내에서도 장점을 확실하게 알 수 있었다.그건 바로, A 기능을 구현하는 코드를 짜줘&quot라고 했을 때, 내가 원하는 코드 + 제안사항을 같이 준다는 점이다.물어보지도 않았는데 먼저 제안해주어서 새롭게 배운 것들을 정리해보면 아래와 같다.​​1) Git 사용하기→ 프로젝트를 만들면서 커밋하는 습관을 들이면 나중에 포트폴리오로 보여주기에도 좋고, 실수했을 때 이전 상태로 되돌리기도 정말 편하기 때문에 Git 사용을 추천한다고 해주었다. (실제로 이번에 개발 폴더를 혼동하여 구버전의 코드가 섞일 뻔했는데, Git을 사용한 덕분에 백업해둔 코드를 다시 다운받아서 개발을 이어나갈 수 있었다.)→ 나는 Git과 Github에 대한 이해가 부족한 사람이었는데, AI의 제안대로 직접 해보고 나니 개념이 어느정도 이해되었고 이 과정의 필요성도 잘 알게 되었다.​​2) chrome.tabs.create()를 사용하기→ window.open(site.url)도 동작은 하지만, 확장 프로그램 권한으로 안정적으로 동작하기 위해서는 chrome.tabs.create()를 사용하는 걸 더 권장한다고 알려주었다.​​3) 사이트의 파비콘(Favicon)을 자동으로 가져오기→ 아이콘 파일을 하나하나 관리할 필요도 없고, 사이트가 아이콘을 바꾸면 자동으로 반영되는 장점이 있다. 특정 사이트만 원하는 디자인의 아이콘을 쓰고 싶다면 그때는 이미지 파일로 교체하면 된다고 AI가 설명해주었다.→ '파비콘'이라는 개념을 이번에 처음 알게 되었는데, 정말 편리한 시스템이라는 생각이 들었다. AI가 파비콘을 가져오는 방식을 알려주지 않았다면 사이트마다 마우스 우클릭으로 이미지를 하나씩 저장(...)하고 있었을 것을 생각하니 새삼 감사하게 느껴졌다.→ 나는 이번에 구글 파비콘을 이용했는데, 중간에 구글 파비콘이 아닌 다른 파비콘 사이트의 URL을 불러와서 보니 아이콘이 조금 다른 경우가 있었다. 만약 나중에 비슷한 프로그램을 또 만들게 된다면, 더 예쁜 파비콘을 불러오는 URL을 사용할 것 같다.​







​(같은 사이트인데도 파비콘이 다르다.)​​기능 구현이나 디자인에 있어서 AI가 제안해줬지만 내가 기각한 사항들은 아래와 같다.​​1) 아이콘을 클릭했을 때, 대외활동 목록으로 바로 이동시키기 (기각)→ 아이콘 클릭 시, 해당 사이트의 메인 페이지가 아니라 '대외활동 목록'이 있는 카테고리 속으로 데려다주라는 제안사항이었다.그러나 나는① 메인 페이지를 보고 싶은 공모전 사이트 대외활동사이트 대학생 공모전 대외활동 사이트 홍보 모음 사용자들도 있지 않을까?② 대부분의 사용자들이 '아이콘을 클릭했을 때 메인페이지로 이동할 것'을 예상하지 않을까?라는 생각에 고민이 있었다.​→ AI에게 이러한 나의 의견을 전달하니,① 사용자의 기대와 일치 (Expectation)② 사이트 구조가 바뀌어도 안전 + 유지보수 용이 (Consistency)를 근거로 나의 의견에 동조해주었다. 굳이 사용자에게 인지적 부담을 줄 필요가 없다는 이유도 있었다.​→ 나중에 버전을 업데이트 하면서,☑ 메인 페이지로 열기☐ 대외활동 페이지로 바로 열기이런 옵션 설정을 넣는 것도 재밌겠다고 제안해주었으나, 크게 필요성을 느끼지 못해서 이 기능은 구현하지 않기로 결정했다.​​2) 비슷한 색의 로고가 한 줄에 몰리지 않도록 하기→ 확장 프로그램에 포함시킬 사이트 12개를 이제 막 확정하던 때에 받은 제안이었다.나는 로고의 색은 고려해본 적 없었고, 사이트의 인지도 순으로 배열하고자 했다고 하니 AI가 동조하면서 인지도 &gt색감이라고 말해주었다. 작은 걱정을 품고 개발을 진행했지만, 최종적으로 만들고 나니 비슷한 색의 로고가 몰리는 현상은 일어나지 않았다. (lucky!)​​3) 드래그 앤 드롭으로 사용자가 아이콘 정렬을 바꿀 수 있도록 하기 (기각)→ 내가 2.0 버전에 가장 추가하고 싶었던 기능이 이거였는데,들뜬 마음을 품고 막상 구현하고 나니... 조잡하고 불필요하다는 느낌을 받아서 원래의 상태로 되돌아갔다.아무래도 드래그 앤 드롭 기능은 내가 이번에 만든 프로그램보다 좀 더 고차원적이고(?), 각 사이트들의 역할이 다양한 경우에 어울리는 것 같다고 느꼈다. 이게 무슨 말이냐면...​네이버 바로가기​예를 들어, 드래그 앤 드롭 기능이 구현되어 있는 네이버 바로가기 메뉴의 구성을 보면메일 / 카페 / 쇼핑 / 블로그 / 증권 등 아이콘을 눌렀을 때 접속되는 사이트들이 각각 특색있는 역할을 하고 있다.​반면 내가 만든 확장 프로그램에 포함된 사이트들은 모두 대외활동과 공모전 정보를 제공하는 사이트로,기능과 제공하는 콘텐츠가 대부분 비슷하다. 따라서 사이트의 순서를 변경할 필요성은 크지 않았던 것 같다.​​10. 끝으로...어쩌면 너무 간단한 프로그램이었고, 개발 경험이 없는 나도 하루 정도면 완성할 수 있었던 프로젝트였다.어떤 공부든 이론부터 차근차근 익혀야 한다는 강박이 늘 있었는데, 이번에는 코드가 이해되든 안되든 일단 만들어 보자는 마음으로 무작정 부딪혀 봤다. 나에게는 그런 방식 자체가 기존의 틀을 깨는 경험이라 더욱 재미있게 느껴졌다.​다음에는 또 어떤 프로그램을 만들어 볼지 기대된다.지금 생각으로는 pygame 라이브러리를 이용해서 게임을 만들어보고 싶다.​크롬 확장 프로그램을 정식으로 출시하려면 개발자 등록 비용으로 5달러를 지불해야 하는데...아직 이 프로그램를 어디에, 어떻게 홍보해야 할지도 모르겠고 과연 이 프로그램을 원하는 사용자가 있을지 확신이 없어서...당분간은 나만 사용하는 프로그램으로 남아 있을 것 같다...^^​바이브 코딩을 통해 배운 점이 굉장히 많았고, 블로그에 이걸 정리하는 과정에서도 많은 걸 생각해볼 수 있었다.몇 년 뒤의 나는 지금 이 설렘을 잊고 있을지도 모르지만...그래도 지금 나는 이 순간에 세상이 조금 넓어졌으니까이 감정을 잊지 않기 위해 이렇게 기록으로 남겨 둔다. ​​여기까지 읽어주셨다면 대단히 감사합니다.재미있는 대화들을 많이 하고 더 배워가고 싶어요!​​​