CardProfile
링크 하나로 나를 소개하는 반응형 프로필 카드 빌더
블록을 끌어다 놓고, 색을 고르고, 저장하면 바로 내주소/아이디 공개 페이지가 생겨요.
cardprofile-xi.vercel.app 에서 바로 써보세요
기능
블록으로 만드는 카드
- 블록 6종: 프로필(사진·이름·소개), 텍스트, 링크 버튼, 소셜 아이콘, 이미지, 구분선
- 드래그로 순서 바꾸기: 손잡이를 잡고 끌어서 놓으면 끝. 키보드로도 옮길 수 있어요
- 실시간 미리보기: 고치는 즉시 휴대폰 / 데스크톱 화면으로 확인
- 소셜 아이콘 12종: 인스타그램, 유튜브, 카카오톡 채널, 네이버 블로그, 스레드, 틱톡, X, 페이스북, GitHub, LinkedIn, 이메일, 웹사이트. 주소 대신 아이디만 적으면 링크가 만들어져요
꾸미기
- 프리셋 6종: 종이, 노을, 밤, 민트, 벚꽃, 모노. 고른 뒤에도 값을 하나씩 바꿀 수 있어요
- 카드 전체: 배경(단색·그라디언트·방향), 카드 색·불투명도·모서리·테두리·그림자·뒤 배경 흐리게
- 블록마다 따로: 글꼴, 크기, 색, 굵게·기울임·밑줄, 정렬 / 버튼 모서리(알약·둥근 네모·네모)·스타일(채우기·테두리·연하게)·색 / 아이콘 모양·크기·색 / 프로필 사진 모양·크기
- 글꼴 60개: 한국어 20(눈누 10 + Google Fonts 10), 영어 20, 일본어 20. 카드에 쓴 글꼴만 불러와요
계정과 공개
- 이메일 가입·로그인 (Supabase Auth, Google 로그인 연결 가능)
- 카드 저장, 공개 / 비공개 전환, 프로필 사진 업로드 (Supabase Storage)
사이트주소/아이디 공개 페이지, 휴대폰에 맞춘 반응형 화면- Supabase 설정이 없으면 체험 모드: 계정과 카드가 그 브라우저에만 저장돼요
사용한 오픈소스
앱
데모 영상 (video/, 앱 배포에는 포함되지 않음)
| 라이브러리 | 버전 | 쓰는 곳 | 라이선스 |
|---|
Remotion (remotion, @remotion/cli, @remotion/google-fonts) | 4.0.535 | README 시연 영상 | Remotion License: 개인·3인 이하 회사는 무료, 그 이상 영리 회사는 회사 라이선스 필요 |
| Playwright | 1.63 | 앱 화면 캡처 | Apache-2.0 |
| FFmpeg | | MP4 → GIF 변환 (설치형 도구) | LGPL 2.1+ / GPL |
서비스
- Supabase (데이터베이스·인증·스토리지, 무료 플랜)와 Vercel (호스팅, Hobby 플랜)을 써요. 라이브러리가 아닌 외부 서비스라 각 서비스 약관을 따라요.
글꼴과 라이선스
글꼴 파일은 저장소에 들어 있지 않아요. 카드를 볼 때 Google Fonts와 jsDelivr(눈누 프로젝트)에서 바로 불러와요. 목록은 src/lib/fonts.ts에 있어요.
| 글꼴 | 만든 곳 | 라이선스 |
|---|
| Inter | Rasmus Andersson | OFL 1.1 |
| Poppins | Indian Type Foundry, Jonny Pinhorn, Ninad Kale | OFL 1.1 |
| Montserrat | Julieta Ulanovsky, Sol Matas, Juan Pablo del Peral, Jacques Le Bailly | OFL 1.1 |
| DM Sans | Colophon Foundry | OFL 1.1 |
| Space Grotesk | Florian Karsten | OFL 1.1 |
| Outfit | Smartsheet Inc, Rodrigo Fuenzalida | OFL 1.1 |
| Josefin Sans | Santiago Orozco | OFL 1.1 |
| Syne | Bonjour Monde, Lucas Descroix, George Triantafyllakos | OFL 1.1 |
| Playfair Display | Claus Eggers Sørensen | OFL 1.1 |
| Lora | Cyreal | OFL 1.1 |
| Fraunces | Undercase Type, Phaedra Charles, Flavia Zimbardi | OFL 1.1 |
| DM Serif Display |
눈누 한국어 글꼴 10개
| 글꼴 | 만든 곳 | 라이선스 | 상업적 사용 | 확인한 곳 |
|---|
| 프리텐다드 (Pretendard) | 길형진 | SIL OFL 1.1 | 가능 | LICENSE |
| 수트 (SUIT) | SUNN | SIL OFL 1.1 | 가능 | LICENSE |
| 페이퍼로지 | 이주임 X 김도균 | SIL OFL | 가능 | 눈누 |
| 프리젠테이션 | 이주임 | SIL OFL | 가능 | 눈누 |
| G마켓 산스 | Gmarket | SIL OFL | 가능 | Gmarket 공식 |
| 마루 부리 | 네이버 | 네이버 나눔글꼴 라이선스 (수정·재배포 가능, 글꼴 판매 금지) | 가능 | 눈누 |
| 여기어때 잘난체 | 여기어때컴퍼니 | 자체 라이선스 (글꼴 판매·수정 재배포 금지) | 가능 | 눈누, 공식 |
| 카페24 써라운드 | Cafe24 | 카페24 글꼴 약관 (글꼴 판매 금지, 수정본은 OFL) | 가능 | 눈누, 공식 |
| 어그로체 | (주)샌드박스네트워크 | 자체 라이선스 (지식재산권은 샌드박스) | 가능 | 눈누 |
| 온글잎 박다현체 | 온글잎 / (주)보이저엑스 |
이 앱은 글꼴 파일을 고치거나 따로 배포하지 않고, 눈누가 jsDelivr에 올려 둔 웹폰트를 그대로 불러와 화면에 보여줘요. 자체 라이선스 글꼴은 조건이 바뀔 수 있으니 상업적으로 쓰기 전에 배포처 안내를 다시 확인해 주세요.
