01 · 랜딩페이지
나를 소개하는 페이지,
블록으로 쌓아요
템플릿에서 출발해 블록의 순서·정렬·폭·여백·배경을 바꿉니다. 되돌리기도 됩니다.
- 대표 영역
- 특징 카드
- 이미지 + 글
- 단계 안내
교육용 실습 플랫폼 · 랜딩페이지부터 배포·DB까지
나만의
데이타 관리 사이트를
직접 개발합니다
기본 템플릿으로 랜딩페이지를 만들고, 테이블·차트·대시보드로 데이터를 담고 분석합니다. 완성한 사이트는 코드로 내려받아 GitHub에 올리고, Vercel로 배포하고, Supabase에 데이터를 저장해 인터넷 어디서나 쓰는 나만의 데이터 저장·분석 솔루션으로 완성합니다.
PART 1 · 플랫폼에서 클릭으로만들고 분석하기
- 01랜딩페이지기본 템플릿으로
- 02테이블직접 정의·엑셀
- 03차트숫자를 그림으로
- 04대시보드한 화면에 모아
PART 2 · 내 코드로 직접배포하고 저장하기
- 05코드 받기내 사이트 다운로드
- 06GitHub코드 올려 보관
- 07Vercel인터넷에 배포
- 08Supabase데이터 클라우드 저장
최종 결과물
나만의 웹 기반 데이터 저장·분석 솔루션
WHAT YOU BUILD
과정을 마치면,
이 네 가지가 내 것이 됩니다
실습용 연습 화면이 아니라, 내 주소로 누구나 접속해 데이터를 넣고 분석하는 실제 웹 서비스입니다.
- 01
나만의 웹 사이트
vercel.app 주소를 갖는 내 웹 기반 데이타 관리 사이트가 생깁니다.
- 02
클라우드에 저장되는 데이터
Supabase 데이터베이스에 표 데이터가 저장되어, 어디서 접속해도 입력·수정할 수 있습니다.
- 03
한눈에 보는 분석 화면
차트와 대시보드가 데이터를 따라 바뀌어, 회의·보고에 바로 쓸 수 있습니다.
- 04
직접 고칠 수 있는 내 코드
GitHub에 보관된 코드를 VS Code와 Claude Code로 계속 키워 갈 수 있습니다.
PART 1 · 플랫폼에서 클릭으로
먼저 화면에서 클릭으로
만들고 분석합니다
나를 소개하는 페이지,
02 · 테이블
엑셀을 올리면
표가 됩니다
.xlsx 파일을 올리면 숫자·날짜·예/아니오 같은 열 타입을 알아서 추정합니다. 열을 직접 정의해도 됩니다.
한 번에 최대 2,000행 · 첫 줄은 머리글
03 · 차트
표를 고르면 차트가 그려져요
내 표에서 열을 고르고 모양·색·집계 방법을 정합니다. 표 숫자가 바뀌면 차트도 따라 바뀝니다.
- 세로 막대
- 가로 막대
- 꺾은선
- 영역
- 도넛
04 · 대시보드
회의·보고를
한 화면으로
칸을 자유롭게 나눠 차트·숫자 카드·표를 배치하고, 필터나 막대 클릭으로 걸러 봅니다.
PART 2 · 내 코드로 직접
코드를 받아 올리고,
배포하고, 데이터를
클라우드에 저장합니다
‘내 사이트 코드 받기’로 디자인·표·차트·대시보드가 담긴 폴더를 내려받습니다. 화면의 단계별 안내를 따라 Supabase에 데이터베이스를 만들고, GitHub에 코드를 올리고, Vercel로 배포하면 나만의 데이터 저장·분석 솔루션이 완성됩니다.
my-site — VS Code 터미널
$ npm install
$ npm run dev
✓ Ready — http://localhost:3000
> claude
“표 아래에 숫자 열의 합계와 평균을 보여 줘”
- STEP 1개발환경 준비VS Code · Node.js · Git 설치
- STEP 2실행 + DB 준비Supabase 테이블 만들고 localhost:3000 실행
- STEP 3GitHub에 올리기내 코드를 저장소에 보관
- STEP 4Vercel로 배포내이름.vercel.app
- STEP 5AI로 키우기Claude Code로 기능 추가
완성한 뒤에는, 이런 기능부터 직접 더해 보세요
- 입문첫 화면 문구와 색을 내 스타일로
- 초급랜딩페이지 템플릿 하나 추가하기
- 중급새 블록 “동영상(YouTube)” 만들기
- 도전표 편집기에 “엑셀로 내려받기” 버튼
mysite.vercel.app/u/내주소
오늘, 나만의 데이터 솔루션을
시작해 볼까요?
템플릿 하나로 시작해, 인터넷에 배포된 웹 서비스로 끝납니다.