Claude Code로 내 할 일 대시보드를 웹사이트로 배포하기

Claude Code로 내 할 일 대시보드를 웹사이트로 배포하기 본문으로 이동 Claude Code로 내 할 일 대시보드를 웹사이트로 배포해보세요. 코드를 배우는 것이 아니라, 내 도구를 웹사이트로 배포합니다. 코딩 문법 대신 AI에게 자연어로 지시하며 실습합니다. Claude에서 만든 도구를 웹사이트로 이어가고 싶다면. 회의 후 내 할 일을 챙길 때, 이런 불편이 있나요? 01 Claude 안에서만 쓰지 않고, 웹사이트로 열고 싶습니다. 02 PC에서 정리한 할 일을 휴대폰에서도 이어서 보고 싶습니다. 03 동료에게 인터넷 주소 하나로 내 도구를 보여주고 싶습니다. 04 웹사이트로 옮기는 일이 개발자만 할 수 있는 일처럼 느껴집니다. 05 도구를 고친 뒤 웹사이트에 반영하는 방법이 막막합니다. 만들기만이 아니라, 수정·재배포까지 경험합니다. 자연어 지시 시작 프로젝트 데이터 저장 코드 보관 웹 배포 수정·재배포 샘플 데이터 낯선 도구의 나열이 아니라, 역할이 연결되는 하나의 흐름. 01 · 시작하고 수정하기 준비된 프로젝트를 열고, AI에게 지시합니다. VS Code 안에서 Claude Code에게 지시해 프로젝트를 수정합니다. VS Code 안에서 Claude Code 02 · 코드 보관 내 프로젝트를 GitHub에 올립니다. 수정한 프로젝트 코드를 보관합니다. → 03 · 웹사이트 배포 Vercel로 인터넷 주소를 만듭니다. 연결된 GitHub에 수정 내용을 올리면 웹사이트도 다시 배포됩니다. 할 일 데이터는 어디에? 코드와 별도로, Supabase에 저장합니다. 내 할 일 웹사이트 PC·휴대폰에서 접속 불러오기 ↔ 저장하기 Supabase 할 일 데이터를 저장하는 표 실습 순서: 프로젝트 열기 → Supabase 연결·저장 → GitHub 코드 보관 → Vercel 배포 → 수정·재배포 추상적인 활용법이 아니라, 인터넷 주소를 가진 대시보드 하나. “회의록 → 내 할 일 대시보드” 웹사이트 1개. 인터넷 주소로 접속해 PC·휴대폰에서 같은 할 일을 확인합니다. 회의록 정리 결과 가져오기 내 할 일 고르기 상태 관리 (할 일 · 진행 · 완료) 회의별 · 프로젝트별로 모아보기 한눈에 보는 대시보드 화면 교육에서는 제공되는 샘플 회의록과 샘플 데이터로 실습합니다. 실제 업무자료 준비는 필요 없습니다. 실제 회사 업무 데이터 사용 시에는 조직의 보안 정책을 확인해 주세요. 혼자 헤매는 대신, 강사 화면을 보며. 강사의 실시간 시연을 보며 같은 순서로 따라갑니다. 빈 화면에서 시작하는 대신, 시작 프로젝트와 요청문으로. 시작 프로젝트를 열고 키트의 프롬프트·터미널 명령어를 복사합니다. 코드를 직접 타이핑하지 않습니다. 놓친 단계에 멈추는 대신, 완성본으로 다음 단계에. 중간에 막혀도 단계별 완성본 저장소로 다음 단계에 다시 합류합니다. 개발자가 되는 것이 아니라, 내 업무 도구를 직접 배포하고 싶다면. 01 여러 프로젝트 회의 후 내 할 일을 직접 정리·추적하는 실무자라면 02 기획 · 운영 · 영업지원 · 총무 · 인사 등 비개발 사무직이라면 03 Claude는 써봤지만, 코드를 직접 작성해 본 적은 없다면 04 Claude로 만든 도구를 웹사이트로 배포하고 싶다면 중소기업 비개발 사무직 대상 · Claude 활용 경험 필요 · 코딩 경험이 없는 초급자도 참여 가능 개념만 듣는 것이 아니라, 여섯 단계로 직접 경험합니다. 01 Claude Code로 프로젝트 열기 시작 프로젝트에서 첫 작업을 지시합니다. 02 Supabase 연결하기 할 일을 저장할 데이터베이스를 연결합니다. 03 할 일 데이터를 온라인에 저장하기 샘플 데이터를 저장하고 다시 불러옵니다. 04 GitHub에 프로젝트 코드 올리기 수정한 프로젝트를 올립니다. 05 Vercel로 웹사이트 배포하기 배포한 주소로 접속을 확인합니다. 06 수정하고 다시 배포하기 수정 내용을 올리고 자동 업데이트를 확인합니다. 실시간 온라인 · 휴식 포함 총 120분 막연히 시작하는 대신, 설치와 로그인을 미리 준비합니다. 사전 준비 (약 30분 소요) VS Code · Node.js · Git 설치 Claude Code 확장 프로그램 설치 및 Claude Pro 로그인 GitHub · Vercel · Supabase 무료 계정 가입 설치 가이드 마지막의 “설치 확인” 단계 통과 GitHub·Vercel·Supabase 가입 후 로그인까지 확인해 주세요. 준비물 및 난이도 노트북 (개인 노트북 권장 — 회사 PC는 설치가 차단되어 있을 수 있음) 난이도: 초급 · 코딩 사전지식 불필요 단, 위 사전 준비(설치·계정 가입)는 필수입니다 업무 자료 준비는 불필요 (샘플 회의록으로 실습) Windows·Mac 설치 가이드를 사전에 제공합니다. 카카오톡 채널 친구 추가 시 교육비 무료 실습용 개인 Claude Pro 구독 비용은 별도입니다. Supabase·Vercel·GitHub는 무료 플랜으로 진행합니다. Notion은 프롬프트 키트 열람용이며 수강생 계정은 필요하지 않습니다. 모든 운영 기능이 아니라, 저장·배포·수정의 흐름에 집중합니다. 이만큼 다룹니다 데이터베이스 표(테이블)를 만들고 읽고 쓰기 Vercel 기본 주소로 배포하기 제공된 프롬프트 · 명령어를 복사해 실행하기 사전 설치 가이드 제공 (Windows · Mac) 강사 제공 샘플 회의록으로 실습하기 이 부분은 다루지 않습니다 데이터베이스 설계 · SQL 문법 · 백업 개인 도메인 연결 · 유료 플랜 설정 코드 문법 · 원리 · Git 개념 설명 교육 중 개별 PC 설치 문제 해결 본인 업무에 맞춘 별도 도구 제작 (교육 후 키트로 스스로 진행) 만든 사이트의 장기 유지보수 · 보안 · 비용 관리 사용자 로그인 · 회원가입 · 사용자별 권한 설정 인증 및 보안 설계 · 실제 회사 서비스 운영 처음부터 끝까지, 같은 화면을 보며. 조평훈 강사 웹·백엔드·클라우드 개발과 LLM 기반 AI 서비스 구축 경험을 바탕으로, 생성형 AI를 활용해 아이디어를 빠르게 서비스로 구현하는 바이브 코딩 실무 전문가 주요 약력 現 주식회사 헬로월드랩스 과장 · LMS 개발 및 사용자 데이터 기반 학습 추적·추천 시스템 개발 前 에이치소프트 대리 · 대학 산학협력 연구과제 SW 개발 및 유지보수 前 Hamada A.I. · 데이터 라벨링, AI 모델 및 데이터 바우처 프로젝트 SW 개발 교육 이력 (7건) 원티드랩 · Java·Spring Boot 기반 백엔드 및 LLM·Prompt Engineering·RAG 기반 AI 서비스 개발 교육 (주)그렙 · 웹 서비스 프로젝트 기획·설계·구현 멘토링 및 코드 리뷰 삼육대학교 · React·Spring 기반 웹 서비스 프로젝트 개발 및 실무 멘토링 현대캐피탈 · 생성형 AI·LLM 원리 및 AI 활용 교육 주식회사 구름 · AWS·Docker·Terraform·ArgoCD 기반 클라우드·CI/CD 및 MSA 교육 하이미디어아카데미 · Spring·React 기반 웹 애플리케이션 및 AI 추천 시스템·데이터 분석 교육 헬로월드랩스 · 머신러닝·추천 시스템 및 데이터 분석 실무 교육 교육 이력 (7건) 원티드랩 · Java·Spring Boot 기반 백엔드 및 LLM·Prompt Engineering·RAG 기반 AI 서비스 개발 교육 (주)그렙 · 웹 서비스 프로젝트 기획·설계·구현 멘토링 및 코드 리뷰 삼육대학교 · React·Spring 기반 웹 서비스 프로젝트 개발 및 실무 멘토링 현대캐피탈 · 생성형 AI·LLM 원리 및 AI 활용 교육 주식회사 구름 · AWS·Docker·Terraform·ArgoCD 기반 클라우드·CI/CD 및 MSA 교육 하이미디어아카데미 · Spring·React 기반 웹 애플리케이션 및 AI 추천 시스템·데이터 분석 교육 헬로월드랩스 · 머신러닝·추천 시스템 및 데이터 분석 실무 교육 막연히 신청하는 대신, 참여 조건을 확인해 주세요. 이전 과정을 듣지 않아도 되나요? 네. 이전 과정 미수강자도 참여 가능합니다. 코딩 경험이 없어도 참여할 수 있나요? 네. Claude 활용 경험은 필요하며, 사전 설치·가입·로그인을 완료해 주세요. 유료로 결제해야 하는 도구가 있나요? 실습용 개인 Claude Pro 계정이 필요하며 구독료는 별도입니다. Supabase·GitHub·Vercel은 무료 플랜을 사용합니다. 실습을 따라가다 막히면 어떻게 되나요? 제공되는 단계별 완성본으로 다음 단계에 합류할 수 있습니다. 실습 없이 강의만 들어도 되나요? 네. 시청만 해도 됩니다. 직접 실습하려면 사전 설치·계정 가입이 필요합니다. 회사 PC로 참여해도 되나요? 회사 PC는 프로그램 설치가 제한될 수 있어 개인 노트북을 권장합니다. 완성한 웹사이트를 실제 업무에 바로 쓸 수 있나요? 실습은 제공된 샘플 회의록·데이터만 사용합니다. 실제 업무 데이터는 조직 보안 정책 확인이 필요하며, 사용자 인증·권한·보안 설계와 실제 회사 서비스 운영은 교육 범위 밖입니다. 만든 사이트는 계속 무료로, 별도 관리 없이 운영되나요? 무료 플랜 배포까지 다룹니다. 장기 유지보수·보안·비용 관리는 제외됩니다. 듣는 데서 끝나는 것이 아니라, 직접 배포해보는 120분. 언젠가 만들어보는 대신, 이번에는 직접 배포해보세요. Claude Code로 내 할 일 대시보드를 웹사이트로 배포하기