브라우저 앱 만들기

서버 없이 즉시 실행 가능한 도구 제작 실습

"서버 설정 없이, 파일 하나로 완성되는 실용적 도구"

성운대학교 AI 혁신 세미나 · 바이브 코딩편

🎯

왜 브라우저 앱부터?

✅ 서버 불필요

복잡한 서버 설정 없이 바로 실행

✅ 즉시 확인

파일 더블클릭으로 바로 실행

✅ 어디서든

USB에 담아 어디서든 사용 가능

✅ 배우기 쉬움

AI와 대화하며 만드는 경험에 집중

🧮

실습 1

계산기 앱

Cursor에게 이렇게 말해보세요:

"계산기 앱 만들어줘.
기본 사칙연산이 되고,
깔끔한 디자인으로 해줘"

AI가 HTML, CSS, JavaScript를 자동으로 생성합니다

⌨️

실습 2

타자 연습기

Cursor에게 이렇게 말해보세요:

"타자 연습 프로그램 만들어줘.
속도와 정확도를 측정하고,
한글 문장으로 연습하게 해줘"

타이머, 오타 체크, 결과 표시까지 자동 생성

📞

실습 3

부서 연락처 검색기

Cursor에게 이렇게 말해보세요:

"부서별 연락처 검색 도구 만들어줘.
이름, 부서, 전화번호를 검색할 수 있고,
샘플 데이터 10개 넣어줘"

JSON 데이터와 검색 기능 자동 생성

실습 진행 방법

1

Cursor에서 Plan 모드 선택

2

원하는 것을 자연어로 설명

3

AI의 계획을 검토 후 승인

4

생성된 파일을 브라우저에서 실행

💡

실습 팁

👍

마음에 안 들면 "다시 해줘"

AI는 다른 방식으로 다시 만들어줍니다

🎨

디자인 수정도 대화로 "색상 바꿔줘"

구체적인 CSS 지식 없어도 됩니다

➕

기능 추가도 간단히 "~기능 추가해줘"

점진적으로 발전시킬 수 있습니다

🚀

직접 만들어볼까요?

45분 동안 3가지 앱을 만들어봅니다
막히면 언제든 손 들어주세요!

실습 시작! 🎉