서버 없이 브라우저에서 동작하는 앱 만들기
로컬 HTML/JS로 즉시 실행 가능한 도구 제작 실습
💡 "서버 설정 없이, 파일 하나로 완성되는 실용적 도구"
🎯 학습 목표
- ✓Cursor와 대화하며 실제 동작하는 앱 만들기
- ✓HTML/CSS/JavaScript의 역할 이해하기 (코딩 없이)
- ✓브라우저에서 바로 실행되는 앱의 장점 체험하기
- ✓AI에게 효과적으로 요청하는 방법 실습하기
🤔 왜 브라우저 앱부터 시작하나요?
✨ 장점
- • 서버 설정 불필요
- • 파일 더블클릭으로 바로 실행
- • USB에 담아 어디서든 사용
- • AI와 대화에만 집중 가능
📁 결과물
- • index.html 파일 하나
- • 브라우저에서 바로 실행
- • 인터넷 없이도 동작
- • 동료에게 파일만 전달하면 끝
🔢 실습 1: 계산기 앱 (15분)
STEP 1프로젝트 시작 (2분)
- 1. 바탕화면에
calculator폴더 생성 - 2. Cursor에서 폴더 열기 (File → Open Folder)
- 3.
index.html파일 생성
STEP 2Plan 모드로 계산기 만들기 (10분)
🤖 프롬프트 예시
계산기를 만들어줘. 0-9 숫자 버튼, +, -, ×, ÷ 연산자 버튼, = 버튼, AC 버튼이 필요해. 숫자를 누르면 화면에 표시되고, = 을 누르면 계산 결과가 나와야 해. 디자인은 깔끔하게 해줘.
STEP 3실행 및 개선 (3분)
실행: index.html 파일을 더블클릭하여 브라우저에서 열기
개선 요청: "버튼 색상을 숫자는 파란색, 연산자는 주황색으로 바꿔줘"
⌨️ 실습 2: 타자 연습기 (15분)
STEP 1새 프로젝트 시작
typing-practice 폴더 생성 →index.html 파일 생성
STEP 2Plan 모드로 타자 연습기 만들기
🤖 프롬프트 예시
타자 연습기를 만들어줘. 화면에 연습할 문장이 보이고, 아래 입력창에 타이핑하면 맞으면 초록색, 틀리면 빨간색으로 표시돼야 해. 완료하면 걸린 시간과 정확도를 보여줘.
🎯 완성 시 기능
- ✓ 연습 문장 표시
- ✓ 실시간 맞춤/틀림 표시
- ✓ 타이핑 속도 측정
- ✓ 정확도 계산
📇 실습 3: 부서 연락처 검색기 (15분)
Plan연락처 검색기 만들기
🤖 프롬프트 예시
부서 연락처 검색 앱을 만들어줘. 가상의 직원 데이터 20명 정도를 넣어줘. 이름, 부서, 전화번호, 이메일 정보가 있어야 해. 검색창에 이름이나 부서를 입력하면 실시간으로 필터링되게 해줘.
💡 실무 활용 아이디어
실제 부서 연락처 데이터를 넣으면 바로 업무에 활용할 수 있습니다. (단, 오늘은 가상 데이터로 실습합니다)
📝 핵심 정리
⏭️ 다음 세션 예고
📝 오전 정리 및 Q&A
오전에 배운 내용을 정리하고, 오후 프로젝트를 위한 아이디어를 생각해봅니다.
👨🏫 강사 노트
⏰ 시간 배분: 계산기 15분, 타자연습기 15분, 연락처 15분. 빠른 분은 추가 기능 도전
🎯 핵심 메시지: "여러분이 한국어로 말한 게 그대로 앱이 되었어요!"
💬 참여 유도: 완성한 분들끼리 서로 결과물 공유
🔄 에러 대응: 에러 발생 시 에러 메시지를 AI에게 보여주고 수정 요청