📝 한줄 요약
gpters 수업마다 쌓이는 링크들을 Claude Code로 하루 만에 카드형 관리 사이트로 만들었습니다. 카카오톡 단톡방 대화 파일 하나를 올렸더니 링크 22개를 자동으로 뽑아 사이트에 넣어줬어요.
바쁘시면 이것만 읽어도 돼요:
Claude Code로 gpters 수업 자료 관리 웹사이트 구축, 크롬 탭 수십 개 → 사이트 1개
URL만 붙여넣으면 유튜브/깃헙/웹사이트를 자동으로 구분하고 미리보기 이미지까지 붙음
카카오톡 단톡방 내보내기 파일을 AI에게 주면 링크를 알아서 추출해서 정리해줌
"왼쪽에 트리 있으면 좋겠다" 한 마디에 사이드바가 만들어짐
Claude Code 스킬(명령어 확장 기능)도 함께 실습
막혔을 때: 사이트가 안 뜨면 개발 서버를 켜야 한다는 것 (AI가 바로 알려줌)
🎯 이런 분들께 도움돼요
gpters 수업 들으면서 링크 관리가 힘드신 분
Claude Code 써보고 싶은데 뭘 만들면 좋을지 모르는 분
코딩 없이 나만의 관리 툴을 만들어보고 싶은 분
다양한 유형의 정보를 보여주는 웹페이지의 스크린샷
😫 문제 상황 (Before)
gpters 강의자동화 수업을 들으면서 매주 쌓이는 게 있었습니다. 강사님이 공유해주시는 사이트, 유튜브 강의, GitHub 리포 등등의 자료들이요.
처음엔 크롬 탭에 열어뒀습니다. 그러다 탭이 20개, 30개를 넘어서면서 어디에 뭐가 있는지 모르게 됐어요. 즐겨찾기로 옮겨도 마찬가지였습니다. 목록이 너무 길어서 결국 찾는 게 더 오래 걸렸어요.
수업 중에 "아까 그 사이트 주소가 뭐였지?" 하면서 탭을 뒤지거나, 카카오톡 단톡방을 올려다 보는 일이 반복됐습니다.
마침 Claude Code 실습을 해볼 기회가 있었고, "그냥 내가 원하는 사이트를 직접 만들어보자"고 결심했습니다. 개발자가 아니어도 되는지는 해보면서 알아보기로 했어요.
🛠️ 사용한 도구
도구: Claude Code (Claude Sonnet 4.6)
특이사항: 코딩 지식 없이 대화만으로 진행
🔧 작업 과정
원하는 게 뭔지 말했더니 계획을 짜줬다
처음엔 막연하게 물어봤습니다.
나는 지금 gpters22기에서 강의자동화 수업을 듣고 있어. 매번 공유해주는 자료가 많은데
그걸 하나의 웹사이트에서 관리하고 싶어. 웹사이트, 강의안 링크, 유튜브 등등이 많은데
한 곳에서 관리하려면 어떻게 하면 좋을까?
Claude Code가 몇 가지를 물어봤습니다. 어떤 방식으로 만들고 싶은지, 어떤 종류의 자료를 관리할지. 대답하고 나니 카테고리 구조와 카드 형태의 UI 계획을 바로 제안해줬어요.
URL 붙여넣으면 알아서 구분한다
실제 사이트 주소들을 주면서 데이터를 구성해달라고 했습니다.
우선 내가 사이트를 주면 그걸 보고 니가 다시 계획을 하는 게 좋을 것 같아.
20여 개의 URL을 공유했더니 유튜브 링크는 유튜브로, GitHub 주소는 GitHub으로, 일반 웹사이트는 웹사이트로 자동으로 분류했습니다. 심지 어 각 링크에 맞는 미리보기 이미지까지 자동으로 붙여줬어요.
유튜브는 영상 썸네일이, GitHub은 저장소 대표 이미지가, 일반 사이트는 실제 사이트 화면 캡처가 카드에 표시됐습니다. URL 하나 붙여넣으면 끝이었어요.
"왼쪽에 트리 있으면 좋겠다" — 그게 다였다
카드들이 쭉 나열되니까 카테고리 간 이동이 불편했습니다.
왼쪽에 tree가 있으면 더 구분하기 쉬울 것 같은데?
이 한 마디로 왼쪽에 트리 형태의 사이드바가 생겼습니다. 스크롤 위치를 감지해서 현재 어느 카테고리를 보고 있는지 자동으로 표시되고, 클릭하면 해당 카테고리로 바로 이동하는 기능까지요.
카카오톡 내보내기 파일 하나로 링크 22개 자동 추가
이게 가장 인상적인 순간이었습니다.
단톡방에서 공유된 링크들을 하나씩 복사해서 넣으려다가, 카카오톡 대화 내보내기 기능이 생각났어요.
카카오톡 대화 내용 확인해서 빠진 사이트 링크주소 넣어줘.
내보내기 파일을 Claude Code에 주고 이 한 마디를 했더니, 대화 내용에서 링크들을 전부 찾아내서 카테고리까지 분류해 사이트에 추가해줬습니다. 한 번에 22개가 추가됐어요.
단톡방 한 달 치 자료를 손으로 정리하려면 꽤 걸렸을 텐데, 파일 하나 올리고 한 문장 쓰는 것으로 끝났습니다.
스킬도 만들어봤다
Claude Code에는 자주 쓰는 작업 을 명령어로 등록하는 스킬 기능이 있습니다. 이번에 웹사이트를 만들면서 그 실습도 함께 해봤어요.
매번 강의 때마다 사이트를 공유해줘야 하는데, 이 사이트로 쉽게 공유할 수 있겠더군요.
복잡한 작업을 짧은 명령 하나로 실행할 수 있게 되는 기능인데, 직접 만들어보니 Claude Code를 더 깊이 이해할 수 있었습니다.
이번에 만든 스킬 이름은 /new-class-site입니다. 강의명과 링크 목록만 입력하면 카테고리별 카드 뷰, 사이드바, 검색 기능을 갖춘 강의 자료 사이트가 자동으로 만들어지는 명령어예요. gpters22기 사이트를 직접 만들어본 경험이 그대로 스킬로 남은 셈입니다. 다음 기수가 시작되거나 비슷한 사이트가 필요할 때 /new-class-site라고 한 번만 치면, 늘 하루 걸려 만든 것과 같은 사이트를 훨씬 빠르게 뚝딱 만들 수 있어요.
한 번 만들어두면 계속 쓸 수 있다는 게 스킬의 핵심입니다. 반복되는 작업일수록 스킬로 등록해두는 게 효율적이라는 걸 이번에 배웠어요.
막혔던 순간: 사이트가 왜 안 뜨지?
왜 http://localhost:3000/ 로 연결이 안돼?
만들어놓고 사이트에 접속하려는데 화면이 안 떴습니다. 한참을 봤는데 알고 보니 개발 서버를 켜지 않은 것이었어요. Claude Code가 원인을 바로 짚어줬고, 서버를 켜는 방법도 알려줬습니다.
개발 경험이 없으면 이런 기본적인 것도 모를 수 있는데, 막히는 대로 물어보면 된다는 걸 알게 됐어요.
✅ 결과 (After)
Before vs After
항목
Before
After
자료 관리 방식
크롬 탭 30개 + 즐겨찾기
사이트 하나
링크 추가 방법
카카오톡 뒤져서 하나씩 복사
내보내기 파일 → 자동 추출
자료 찾는 속도
탭·즐겨찾기 뒤지며 수분
사이드바 클릭 한 번
개발 경험 필요 여부
—
없어도 됨
결과물
카테고리 7개로 구분된 카드형 강의 자료 관리 사이트. 유튜브, GitHub, 웹사이트, 파일 링크를 타입별로 자동 분류하고 미리보기 이미지를 자동으로 붙여줍니다.
💬 이 과정에서 배운 AI 활용 팁
효과적이었던 것
카카오톡 내보내기 파일 활용 — 단톡방에서 공유된 링크를 하나씩 복사하는 대신, 대화 내보내기 파일을 AI에게 주면 링 크를 전부 자동으로 뽑아줍니다. 수업 단톡방이 있는 gpters 수강생이라면 바로 써먹을 수 있어요
원하는 결과를 일상 언어로 — "왼쪽에 트리 있으면 좋겠다"처럼 평소 말하듯 요청해도 알아듣습니다. 개발 용어 몰라도 됩니다
막히면 그냥 물어보기 — "왜 안 돼?"라고 물으면 원인을 찾아서 해결책을 알려줍니다
이렇게 하면 안 돼요
혼자 해결하려고 너무 오래 보기 — 이해가 안 되면 그냥 물어보는 게 훨씬 빠릅니다
완벽한 계획 세우고 시작하려 하기 — 일단 원하는 걸 말하면 AI가 계획을 제안해줍니다. 먼저 대화해보세요
🌍 다른 업무에 적용한다면?
업무 참고 자료 모음 — 회사에서 자주 참고하는 사이트, 문서, 유튜브를 카테고리별로 정리한 개인 사이트
팀 북마크 관리 — 팀원끼리 공유하는 링크를 단체 카카오톡에서 자동 추출해 팀 공유 페이지로
수강 후기 아카이브 — 들은 강의, 읽은 아티클을 카드 형태로 모아두는 학습 기록 사이트
🚀 앞으로의 계획
사이트를 더 보기 쉽게 개선할 예정입니다. 카드 레이아웃이나 검색 기능을 다듬어서 수업 중에도 빠르게 찾을 수 있게 만들고 싶어요.
📋 재사용 가능한 프롬프트
프롬프트 1: 카카오톡 링크 자동 추출
카카오톡 대화 내용 확인해서 빠진 사이트 링크 주소 넣어줘.
[카카오톡 내보내기 파일(.txt)을 함께 첨부하세요]
프롬프트 2: 자료 관리 사이트 기획 시작
나는 [수업/업무/프로젝트명]에서 매번 공유받는 자료가 많은데 그걸 하나의 웹사이트에서 관리하고 싶어. [유튜브 링크, 웹사이트, 파일 등 관리할 자료 종류]가 많은데 한 곳에서 관리하려면 어떻게 하면 좋을까?
프롬프트 3: 원하는 UI 추가 요청
[원하는 기능]이 있으면 더 구분하기 쉬울 것 같은데?
예: "왼쪽에 카테고리 목록이 있으면", "카드에 미리보기 이미지가 있으면", "검색창이 있으면"
