802 ／ 837
40분 만에 만드는 교사 대시보드, 근쌤의 바이브코딩 실습 따라가기
근쌤이 공개한 실습 페이지는 주간 시간표, 바로가기, 급식 세 카드가 들어간 개인 대시보드를 40분 안에 만들도록 안내한다. 연수에서 가장 많이 받는 요청이 바이브코딩으로 대시보드 만드는 법이어서 강의로 묶었다고 한다. 페이지는 준비, PART 1~5, 과제 일곱 탭으로 나뉘고, 탭마다 2~3분짜리 영상과 복사 단추가 달린 프롬프트가 있다. 할 일은 영상 보기, 프롬프트 복사, AI 입력창에 붙여넣기 세 가지다.
전체 흐름
| 탭 | 하는 일 | 영상 길이 | 미리 챙길 것 |
|---|---|---|---|
| 준비 | 도구 설치, 폴더 만들기 | 12분 38초(전체 흐름) | Claude 데스크톱 앱, Netlify 계정 |
| PART 1 | 가짜 데이터로 첫 화면 띄우기 | 2분 21초 | 학교급, 앱 이름, 포인트 색 |
| PART 2 | 구글 시트 시간표 연결 | 2분 52초 | 시간표 시트 주소 |
| PART 3 | 바로가기 버튼 연결 | 1분 52초 | 자주 가는 사이트 주소 |
| PART 4 | NEIS 급식 연결 | 2분 52초 | 인증키, 교육청 코드, 학교 코드 |
| PART 5 | Netlify 배포, 휴대폰 화면 맞추기 | 2분 42초 | 완성된 폴더 |
| 과제 | 카드 늘리기 | 없음 | 기본 실습 완료 |
화면을 반으로 나눠 한쪽에 실습 페이지, 다른 쪽에 Claude 앱을 두면 편하다. 윈도우는 Win + ←/→, 맥은 창의 초록 단추에 마우스를 올려 좌우 배치를 고른다.
준비
Claude 데스크톱 앱을 설치하고, Netlify에 구글 계정으로 가입한다. 그다음 바탕화면에 my-dashboard 폴더를 만들고 Claude 앱의 Code 탭에서 그 폴더를 선택한다. 준비 탭에는 완성본을 미리 볼 수 있는 링크도 있다.
PART 1, 첫 화면 만들기
페이지의 입력 칸에 학교급, 앱 이름, 포인트 색을 적으면 프롬프트의 빈칸이 자동으로 채워진다. 입력값은 그 기기의 브라우저에만 저장되고 다른 곳으로 전송되지 않는다고 페이지는 밝힌다. 첫 프롬프트는 다음과 같다.
나는 코딩 초보 [초등] 교사야. 매일 아침 여는 개인 대시보드를 만들고 싶어.
HTML, CSS, Vanilla JavaScript만 써서 가장 단순하게 만들어줘.
- 상단: 앱 이름 [○○쌤 대시보드], 현재 날짜와 시각
- 카드 3개: 주간 시간표, 바로가기, 오늘/내일 급식 (우선 가짜 데이터)
- 디자인: 차분하고 여백 넉넉하게, 포인트 색은 [파랑]
- 학교마다 바뀔 값(시트 주소, 링크, 학교 코드)은 config.js에 모아줘.
- 파일은 index.html, css, js/app.js, 카드별 js/cards/*.js로 나눠줘.
끝나면 내 컴퓨터에서 화면을 열어줘.
이 프롬프트에는 뒤 단계를 쉽게 만드는 장치가 두 개 들어 있다. 학교마다 달라지는 값을 config.js 한 파일에 모으고, 카드마다 파일을 따로 둔다. 그래서 이후 프롬프트는 카드 하나씩만 고쳐 달라고 요청하면 된다.
막혔을 때의 안내는 세 가지다.
- 화면이 열리지 않으면 “로컬 서버로 열어줘”라고 입력한다.
- 같은 프롬프트라도 결과 화면은 사람마다 조금씩 다르다. 내 화면 기준으로 고쳐 나가면 된다.
- 첫 화면은 컴퓨터 기준이다. 휴대폰 화면은 PART 5에서 배포한 뒤 맞춘다.
PART 2, 시간표 연결
시간표는 구글 시트에서 읽어 온다. 시트의 1행이 교시, 시간, 월~금 순서이고 칸 내용이 “3-2 체육” 같은 모양이면 가장 잘 맞는다. 모양이 다르면 프롬프트의 “시트 모양” 줄을 내 시트에 맞게 고친다.
- 내 시간표 시트가 있으면 그대로 쓴다. 없으면 페이지의 “예시 시트 사본 바로 만들기”로 사본을 만들어 1행 제목은 두고 칸만 내 수업으로 바꾼다. 시간이 없으면 “예시 주소 그대로 쓰기”를 누른다.
- 시트 오른쪽 위 공유에서 일반 액세스를 “링크가 있는 모든 사용자”(뷰어)로 바꾸고 링크를 복사한다.
- 복사한 주소를 페이지의 “내 시간표 시트 주소” 칸에 붙여넣는다. 프롬프트가 완성된다.
프롬프트가 AI에게 요구하는 내용은 세 가지다. 시트 주소를 config.js에 넣고 브라우저가 바로 읽는 CSV 주소로 바꿔 불러올 것, 오늘 요일 열과 지금 교시를 강조할 것, 시트를 불러오지 못하면 “시간표를 불러올 수 없어요”를 보여 줄 것.
링크를 아는 사람은 누구나 시트를 볼 수 있다. 학생 이름이나 연락처 같은 개인정보는 시트에 넣지 않는다. 권한이 뷰어여서 다른 사람이 내용을 고칠 수는 없다.
PART 3, 바로가기 연결
자주 가는 사이트를 버튼으로 만든다. 예시 목록은 나이스, 학교 홈페이지, 근쌤 브런치, 에듀넷이다. 프롬프트를 붙여넣은 뒤 이름과 주소만 내 것으로 바꾸면 된다. 링크 목록은 config.js에 이름과 주소로 적고, 버튼을 누르면 새 탭으로 열리며, 버튼은 크고 누르기 쉽게 만들라는 조건이 붙어 있다.
PART 4, 급식 연결
급식은 나이스 교육정보 개방 포털의 급식 API에서 가져온다. 개방 포털에서 인증키를 신청하고, 학교기본정보 서비스에서 시도교육청코드와 행정표준코드(학교 코드 7자리)를 찾아 둔다. 페이지에 세 링크가 모두 걸려 있다. 학교명과 코드, 인증키를 입력 칸에 적으면 프롬프트가 완성된다.
프롬프트의 조건은 다음과 같다.
- 인증키와 학교 코드는
config.js에 둔다. - 브라우저에서 NEIS를 직접 호출한다.
- 오늘과 내일 급식을 보여 주고, 주말이면 다음 주 월요일과 화요일을 보여 준다.
- 메뉴에 붙은 알레르기 번호는 지운다.
- 급식이 없는 날은 “급식 정보가 없어요”를 보여 준다.
인증키는 각자 발급받는다. 옆 사람 키를 빌려 쓰지 말라고 페이지는 당부한다. 배포하면 키가 공개되지만 급식 정보를 읽기만 하는 키라 큰 문제는 없다는 설명이 함께 있다.
PART 5, 배포와 휴대폰 화면
배포 전에 프롬프트 하나로 점검을 받는다. 배포할 폴더가 어디이고 그 안에 무엇이 있어야 하는지, 코드에 개인정보가 들어 있지 않은지, config.js의 시트 주소와 인증키가 공개돼도 괜찮은지, 배포 후 휴대폰에서 확인할 것 세 줄을 AI에게 묻는다.
- Netlify에서 Add new project를 누르고, 맨 아래 “Upload your project files” 상자에
my-dashboard폴더를 통째로 끌어다 놓는다. - 고쳐서 다시 올릴 때는 같은 프로젝트의 Deploys 탭에 다시 끌어다 놓는다. 새 프로젝트로 올리면 주소가 바뀐다.
- 휴대폰으로 열면 컴퓨터 화면과 다르게 보인다. 이때 반응형 프롬프트를 넣고, Deploys 탭에 다시 올린 뒤 휴대폰에서 새로고침한다.
반응형은 화면 폭에 따라 배치가 바뀌는 설정이다. 반응형 프롬프트의 조건은 네 가지다. 폭 767px 이하에서는 하단 탭(시간표, 바로가기, 급식)으로 카드를 한 장씩 보여 줄 것, 컴퓨터 화면은 그대로 두고 마지막에 고른 탭을 기억할 것, 시간표 글자는 끊기지 않게 하고 넓으면 표만 옆으로 밀어서 보게 할 것, 화면 전체가 옆으로 밀리지 않게 폭 390px에서 확인할 것.
보기 전용 시트 주소와 읽기 전용 급식 인증키는 공개돼도 큰 문제가 없다. 결제와 연결된 중요한 키를 다룰 때는 과제 탭의 심화 과제를 따라 숨긴다.
과제, 카드 늘리기
연수 뒤에 하나만 골라 해 보라는 과제가 네 개 있다. 앞 탭에서 입력한 앱 이름, 색, 시트 주소가 과제 프롬프트에도 그대로 들어간다.
| 과제 | 만드는 것 | 유의점 |
|---|---|---|
| PWA | 휴대폰 홈 화면에 앱처럼 설치. 화면 파일은 저장하고 급식·시간표 데이터는 항상 새로 불러온다 | 아이콘 192px, 512px, 아이폰용 180px 필요 |
| 학교 일정 달력 | 시트의 “학교일정” 탭으로 이번 달 달력과 이번 주 일정 목록, 휴대폰 하단에 일정 탭 추가 | 시트 열은 날짜(2026-10-20 형식), 행사명 |
| 날씨와 수업 메모 | 상단에 지역 날씨와 “야외수업 가능 / 주의” 표시, 시간표 칸을 누르면 메모 | 인증키가 필요 없는 날씨 서비스 사용, 메모는 브라우저(localStorage)에 저장 |
| 심화, 인증키와 시트 주소 숨기기 | Netlify Functions로 중간 서버를 두고 값은 .env와 Netlify 환경변수에 보관 |
폴더 끌어다 놓기로는 동작하지 않아 Netlify CLI로 배포 |
심화 과제는 배포 방식이 바뀌므로 기본 실습을 끝낸 뒤에 도전하라고 페이지는 권한다. 실습은 메뉴를 고르고, 프롬프트를 넣고, 결과를 확인하는 순서를 반복한다. 이 순서만 지키면 카드는 계속 늘릴 수 있다는 말로 페이지가 끝난다.
프롬프트 전문과 영상은 실습 페이지에 있다. 빈칸이 자동으로 채워지므로 거기서 복사하는 편이 빠르다.
출처
- 근쌤, 「40분 만에 만드는 나만의 교사 대시보드」 바이브코딩 실습 페이지. https://joo.is/근쌤대시보드실습