Claude Code로 GitHub Trending 보드 5분 만에 만들기
저장해둔 링크가 다시 안 열리는 이유
괜찮아 보이는 오픈소스를 발견하면 북마크부터 하게 됩니다. 그런데 주말에 다시 보면 왜 눌렀는지 기억이 흐려질 때가 많아요. 제목만 남아 있으면 그때 끌렸던 이유가 사라지기 때문입니다. 그래서 오늘은 Claude Code로 GitHub Trending 보드를 하나 만드는 흐름을 정리해보려 합니다. 이번 주에 눈에 들어온 오픈소스 4개를 한 화면에 모아두고, 카드 한 줄만 읽어도 다음 행동이 떠오르게 만드는 방식입니다.
이 글은 개발 경력이 길지 않은 사람을 기준으로 잡았습니다. 폴더 하나 만들고 첫 화면부터 띄운 다음, CLAUDE.md로 카드 말투를 정리하고, 마지막에 /schedule로 금요일 밤 갱신까지 붙입니다. 숫자는 두 가지만 기억하면 됩니다. 첫 화면은 5분 안에 보고, 카드는 4개만 유지하는 것. 범위를 이렇게 잘라두면 중간에 힘이 빠지지 않고, 다음 주에 다시 손대기도 수월합니다.
오늘 만드는 건 개인용 추천판
이 화면은 큰 서비스가 아니라 개인 메모판에 가깝습니다. 이번 주에 저장할 만한 오픈소스를 모아두고, 왜 남겨뒀는지 바로 떠올리게 만드는 판이죠. 한 장짜리 HTML로 시작하면 수정할 곳이 눈에 잘 들어오고, 나중에는 카드 데이터만 바꿔도 새 목록으로 갈아탈 수 있습니다. Claude Code를 쓰는 이유도 여기에 있습니다. 긴 설계 문서를 먼저 읽는 방식보다, 화면을 빨리 세운 뒤 필요한 부분만 계속 다듬는 흐름에 잘 맞습니다.
처음부터 수집과 정리까지 한 번에 시키면 화면보다 설명이 먼저 길어집니다. 그래서 빈 카드 4개가 보이는 상태까지 먼저 끊는 편이 낫습니다. 카드 수를 고정해두면 레이아웃이 덜 퍼지고, 모바일에서 줄바꿈이 어떻게 보이는지도 바로 확인할 수 있습니다. 이 단계에서는 화려한 디자인보다 카드 틀이 편하게 읽히는지가 더 중요합니다.
첫 화면이 조금 비어 보여도 괜찮습니다. 이름 자리, 별 수 자리, 메모 자리가 보이면 다음 수정이 훨씬 쉬워집니다. 초반에 이 틀을 잡아두면 나중에 문장을 바꾸거나 순서를 조정할 때도 어디를 손대야 하는지 바로 찾을 수 있습니다.
여기서는 카드 문장을 짧게 잡는 쪽이 좋습니다. 이름과 별 수만 있으면 너무 메마르고, 설명이 길어지면 카드가 아니라 요약문처럼 보입니다. 한 줄 설명과 저장 이유를 따로 두면 읽는 속도가 살아납니다. 비슷한 도구 둘이 들어와도 하나는 자동화 흐름에 붙이기 좋다, 다른 하나는 문서 정리에 써볼 만하다는 식으로 쓰임새가 다르게 보이게 적어두면 나중에 다시 열 이유가 남습니다.
이 단계가 끝나면 단순 링크 모음이 개인 기준이 담긴 보드로 바뀝니다. 주말에 살펴볼 후보인지, 지금 당장 적용할 건 아닌지, 이런 판단이 카드 한 장 안에서 보여야 계속 열게 됩니다. 오픈소스 4개를 고르는 일보다 왜 남겼는지 짧게 적는 일이 더 중요하게 느껴지는 구간이기도 합니다.
카드 문구는 이 단계에서 가장 많이 정리됩니다. 규칙 없이 두면 갑자기 제품 소개문처럼 길어지거나, 개발자끼리만 통하는 단어가 튀어나오기 쉽습니다. CLAUDE.md에 네 줄만 적어두면 보드 전체 말투가 금방 맞춰집니다. 두 문장 이하, 어려운 단어는 괄호로 바로 풀기, 과장 금지, 저장 이유는 실제 사용 장면으로 쓰기. 이 정도만 있어도 카드 문장이 훨씬 단정해집니다.
예를 들어 agent workflow라는 말이 나오면 자동화 흐름처럼 바로 풀어주는 식입니다. 짧은 카드라도 사용 장면이 들어가면 기억 방식이 달라집니다. 주말에 작은 자동화를 붙여볼 때 보기 좋다, 문서 정리 흐름에 얹어볼 만하다는 식의 문장이 남아야 다시 눌러보게 됩니다.
이제부터는 유지 편의성이 중요합니다. HTML, CSS, 카드 데이터가 한 덩어리로 섞여 있으면 다음 번 수정이 귀찮아집니다. 반대로 cards 블록이 따로 있으면 손댈 곳이 선명합니다. 디자인을 건드리지 않고 카드 데이터만 바꾸는 흐름이 잡히면, 다음 주에는 오픈소스 4개만 교체해도 화면이 바로 새로워집니다.
처음 코드를 만지는 사람일수록 수정 포인트가 눈에 보여야 덜 부담스럽습니다. 어디를 복사하고 어디를 바꾸면 되는지 한 번만 파악되면, 그 다음부터는 파일 전체를 다시 읽지 않아도 됩니다. 이 보드는 멋진 프론트엔드를 만드는 작업이라기보다, 다시 열 수 있는 개인 도구를 만드는 작업에 가깝습니다.
여기까지 오면 반복 작업의 모양이 잡힙니다. 금요일 밤마다 카드 4개를 다시 채우게 해두면 주말에 새 목록을 바로 볼 수 있습니다. 거대한 자동화가 붙는 게 아니라 cards 블록만 바뀌는 루틴이기 때문에 관리도 단순합니다. 매번 처음부터 골라 적지 않아도 된다는 점이 꽤 큽니다.
/schedule을 아직 붙이지 못해도 오늘 만든 흐름은 그대로 쓸 수 있습니다. 첫 화면을 띄우고, 카드 문구를 다듬고, 데이터 분리까지 끝냈다면 다음 수정은 이미 쉬워진 상태입니다. 반복 갱신은 그 위에 올리는 마지막 편의 기능이라고 보면 됩니다.
문장이 갑자기 딱딱해질 때
대화를 길게 이어가다 보면 카드 설명이 리뷰 문장처럼 굳을 때가 있습니다. 이럴 때는 새 지시를 계속 덧붙이기보다 CLAUDE.md 네 줄로 다시 돌아가는 편이 빠릅니다. 특히 두 문장 이하 규칙과 실제 사용 장면으로 쓰기 규칙을 다시 적용하면 말투가 정리됩니다. 카드 문장이 길어질수록 저장 이유보다 설명 욕심이 앞에 나오기 쉬워서, 짧게 끊는 편이 보드 목적에 더 맞습니다.
별 수가 비거나 샘플 카드가 남을 때
첫 화면을 빨리 띄우려고 더미 값을 넣어두면 나중에 그 카드가 그대로 남는 경우가 있습니다. 이때는 화면 코드 전체를 손볼 필요 없이 cards 블록만 보면 됩니다. sample 같은 값이 남아 있으면 새 목록 4개로 바꾸고, 별 수가 비어 있으면 카드가 참조하는 키 이름이 맞는지만 확인하면 됩니다. 한 장짜리 HTML로 시작한 장점이 이런 순간에 드러납니다. 고칠 자리를 찾는 시간이 짧습니다.
/schedule이 바로 연결되지 않을 때
멈추는 지점은 화면보다 연결 설정인 경우가 많습니다. 그럴 때는 보드 설계가 틀린 게 아니라 반복 실행 조건이 아직 안 맞은 상황으로 보면 됩니다. 오늘 결과가 먼저 필요하면 cards 데이터를 한 번 더 갱신해서 쓰고, 자동 갱신은 나중에 붙여도 됩니다. 데이터 구조를 먼저 분리해둔 상태라면 실행 방식이 달라져도 화면은 그대로 유지됩니다.
마지막으로 하나만 더 붙인다면
여기까지 만들었다면 다음 확장은 어렵지 않습니다. 카드 4개 제목만 따로 모은 한 줄 요약 정도면 충분합니다. 폰에서 짧게 보고, 밤에 다시 열어서 자세히 읽는 흐름이 자연스럽게 이어지기 때문입니다. 오늘 단계에서는 GitHub Trending 보드를 가볍게 굴러가게 만드는 데 집중하고, 알림이나 공유는 그 다음 순서로 두는 편이 관리하기 편합니다.
이런 글도 있어요
관련 검색어
- 🔍 Claude Code 사용법
- 🔍 Claude Code 비교
- 🔍 GitHub Trending 보드 사용법
- 🔍 GitHub Trending 보드 비교
- 🔍 오픈소스 추천
- 🔍 AI 파이프라인 사용법
