[GitHub] GitCard: GitHub README 프로필을 카드로 자동 생성하는 방법

이창렬·2025년 12월 25일

GitHub README 프로필을 더 깔끔하게 꾸미고 싶어서 찾아봤는데, HTML/CSS로 레이아웃을 잡는 과정이 생각보다 번거로웠습니다.
배너/스택/통계/레포 카드까지 각각 따로 맞추다 보니 “한 곳에서 만들고 그대로 붙여넣는 방식”이 필요했고, 그래서 GitCard를 직접 만들었습니다.

핵심: 웹에서 설정 → 자동 생성 → README에 붙여넣기
키워드: GitHub README 프로필 꾸미기 / 카드 생성 / 배너 / 기술스택 / 통계 / 레포 카드

🤔 GitCard란?

GitCard는 GitHub README 프로필을 카드 형태로 생성해주는 웹 서비스입니다.
복잡한 코드 없이 웹 UI에서 클릭 몇 번으로 프로필 배너/기술 스택/연락처/통계/레포 카드를 구성하고, 생성된 결과를 README에 그대로 붙여넣을 수 있습니다.

✨ 주요 기능

🎨 1) 커스터마이징 가능한 디자인

  • 컬러/그라데이션 배너 생성
  • 기술 스택을 카테고리별(언어/프론트/백/모바일 등)로 정리

📊 2) GitHub 통계 연동

GitHub API로 저장소 수, 스타 수, 팔로워/팔로잉 정보를 자동으로 가져와서 표시합니다.
별도 업데이트 없이 최신 정보가 반영됩니다.

🏷️ 3) 기술 스택 배지 (Shields + Simple Icons)

100개 이상의 언어/프레임워크를 지원하고, 아이콘도 자동으로 표시됩니다.

예시:

Language

JavaScript Python Java

Frontend

React TypeScript Vite

Backend

FastAPI Node.js

Velog에서는 div + style 기반 레이아웃이 테마/모바일 환경에서 깨질 수 있어, 배지 정렬은 p 태그 수준으로 최소화했습니다.

📂 4) 레포지토리 표시 (카드/배너)

선택한 레포지토리를 카드 형태로 표시할 수 있습니다.

  • 레포 이름/설명/언어/스타/포크를 한눈에 표시
  • README에 넣기 좋은 배너 이미지 형태도 지원

📬 5) 연락처 정보

이메일/블로그/SNS 등 연락처를 추가하면, 타입에 맞는 아이콘이 자동으로 표시됩니다.

🎯 6) 백준(Solved.ac) 연동

Solved.ac 통계 배지도 함께 표시할 수 있습니다.

Solved.ac Profile

📱 7) 다양한 형식 지원

HTML, Markdown, SVG, PNG/WebP 등 원하는 형식으로 내보낼 수 있습니다.

🚀 사용해보기 (3단계)

1) 로그인

GitCard 접속 후 GitHub 계정으로 로그인합니다.

2) 프로필 카드 만들기

대시보드에서 “새 프로필 카드 만들기”를 클릭하고 아래 정보를 입력합니다.

  • 이름 / 제목 / 태그라인
  • 기술 스택 선택
  • 연락처 정보
  • 색상(그라데이션) 선택

3) README에 붙여넣기

생성된 HTML/Markdown 코드를 복사해서 GitHub README에 그대로 붙여넣으면 끝입니다.

📸 실제 사용 예시

프로필 배너

GitCard Banner

레포 배너 (클릭 시 GitHub 이동)

GitCard Repository Banner

위 배너처럼 레포 정보가 카드 형태로 표시되고, 클릭하면 GitHub로 이동합니다.

GitHub 통계 (옵션)

fufckddl stats Top Languages

🛠️ 기술 스택

Frontend

  • React + TypeScript
  • Vite
  • CSS Modules

Backend

  • FastAPI
  • SQLAlchemy
  • Pydantic
  • JWT 인증

기타

  • GitHub OAuth
  • Playwright (이미지 생성)
  • SVG 렌더링
  • MySQL

💭 사용 후기

1) 시간 절약: HTML/CSS를 직접 작성하지 않고 UI에서 클릭으로 구성
2) 자동 업데이트: GitHub 통계/정보가 최신 상태로 반영
3) 출력 다양성: HTML/Markdown/SVG/이미지로 상황에 맞게 활용 가능
4) 레포 카드: README에서 프로젝트 섹션을 깔끔하게 구성 가능

활용 예시:

  • GitHub README 프로필 꾸미기
  • 포트폴리오 웹사이트에 프로필 카드 삽입
  • 블로그/이력서에 프로필 정보 표시

❓ FAQ (자주 묻는 질문)

Q1) GitCard는 README에 어떻게 넣나요?

생성된 HTML/Markdown 코드를 복사해서 GitHub README에 붙여넣으면 됩니다.

Q2) GitHub 통계는 자동으로 갱신되나요?

GitHub API 기반으로 정보를 가져와 표시하므로, 별도 업데이트 없이 최신 정보가 반영됩니다.

Q3) 레포 배너는 클릭 가능한가요?

네. 예시처럼 <a href="...">로 감싸면 배너 클릭 시 GitHub 레포로 이동합니다.

🎉 마무리

GitHub README를 꾸미는 과정에서 가장 시간이 많이 드는 건, 요소(배너/배지/통계/레포 카드)를 각각 따로 만들고 정렬을 맞추는 작업이었습니다.
GitCard는 이 과정을 “한 곳에서 설정 → 자동 생성 → 붙여넣기”로 줄이기 위해 만든 프로젝트입니다.
피드백/제안은 언제든 환영합니다.

🔗 링크

profile
이창렬

0개의 댓글