휴대폰으로 만드는 나만의 웹앱

말로 설명하고, 열어 보고, 세 번 고칩니다. 오늘 가져갈 것은 한 화면 도구 하나와 고친 기록입니다.

준비

AI 화면을 하나 열어 둡니다

지난번에 쓰던 무료 AI 를 그대로 쓰시면 됩니다. 둘 중 하나만 열면 충분합니다.

오늘의 순서

  1. 불편 한 문장 쓰기
  2. 첫 요청 보내고 열어 보기
  3. 세 번 고치기
  4. 바뀐 점 적기
메모 앱도 하나 열어 두세요. 고친 요청과 바뀐 점을 적을 곳입니다.
1단계

내가 만들 것을 한 줄로 정합니다

내 생활에서 이번 주에 실제로 겪은 불편 하나를 고릅니다. 예시를 누르면 칸이 채워집니다. 내 상황에 맞게 바꿔 주세요.

적은 내용은 이 휴대폰에만 남고 어디에도 보내지 않습니다. 실명, 연락처, 학번은 적지 마세요. 버스 시각 같은 숫자는 AI 가 지어낼 수 있으니 직접 확인한 값을 쓰세요.
2단계

첫 요청을 보냅니다

1단계에서 적은 내용이 아래 요청문에 들어가 있습니다. 「복사」를 누르고 AI 에 붙여 넣어 보내세요.

프롬프트 ① 만들기

  

결과가 나오면 미리보기로 열어 봅니다. 미리보기가 없으면 4단계를 보세요.

요청하는 법: 「더 예쁘게」보다 「이 부분을 이렇게」

누가, 무엇을 넣고, 무엇이 보이는지를 적으면 첫 결과가 훨씬 가까워집니다.

나쁜 요청
과제 관리 앱 만들어 줘.
좋은 요청 누가 · 무엇을 넣고 · 무엇이 보이는지 · 하지 말 것을 적었습니다.
좋은 요청 1 · 과제 마감 알림판
대학생 한 명이 쓰는 과제 마감 목록을 HTML 파일 하나로 만들어 주세요. 과목 이름 · 과제 이름 · 마감 날짜를 넣으면 마감이 가까운 순서로 보이고, 3일 안에 끝나는 것은 빨간색으로 보여 주세요. 휴대폰 화면에서도 보이게 하고, 로그인과 서버는 쓰지 마세요.
나쁜 요청
조별 과제 도와주는 거 만들어. 멋있게.
좋은 요청 「멋있게」 대신 확인할 수 있는 조건과 개인정보 규칙, 설명 요청을 넣었습니다.
좋은 요청 2 · 조별 과제 역할 나누기
조원 4명의 이름과 할 일 5개를 넣으면 할 일을 고르게 나눠 표로 보여 주는 웹 페이지를 만들어 주세요. 다시 나누기 단추를 누르면 새로 섞이게 해 주세요. 이름은 화면에만 보이고 어디에도 저장하지 마세요. 다 만든 뒤 코드에서 중요한 부분 세 곳을 한 줄씩 설명해 주세요.

수업용으로 만든 예시입니다.

3단계

세 번 고칩니다

한 번에 한 곳만 고칩니다. 고칠 때마다 다시 열어 눌러 보고, 바뀐 점을 메모 앱에 한 줄 적으세요. [ ] 안은 내 화면에 맞게 바꿔 주세요.

② 보이는 것 고치기
방금 만든 화면에서 [제목]을 [더 크게, 맨 위 가운데로] 바꿔 주세요. 다른 곳은 그대로 두고, 고친 전체 코드를 다시 보여 주세요.
③ 기능 하나 더하기
[버튼 이름] 버튼을 하나 더해서, 누르면 [무엇이 되도록] 해 주세요. 다른 기능은 그대로 두고, 고친 전체 코드를 다시 보여 주세요.
④ 써 보고 고치기 (가장 중요합니다)
직접 써 보니 [멈칫한 곳]이 불편했습니다. [이렇게] 바뀌면 좋겠습니다. 고친 전체 코드를 다시 보여 주세요.

막혔을 때

⑤ 막혔을 때
화면이 [하얗게 나옵니다 / 버튼을 눌러도 아무 일이 없습니다]. 원인을 쉬운 말로 한 줄 설명하고, 고친 전체 코드를 다시 보여 주세요.
나쁜 고치기 요청
안 돼. 고쳐.
좋은 고치기 요청 지금 일어난 일 · 기대한 일 · 오류 문장 · 고칠 범위를 나눠 적었습니다.
좋은 요청 3 · 고치기
저장 단추를 누르면 화면에 아무 변화가 없습니다. 기대한 것은 목록에 한 줄이 늘어나는 것입니다. 브라우저 콘솔에 나온 오류 문장을 붙여 넣습니다: (오류 문장). 다른 기능은 건드리지 말고 이 문제만 고쳐 주고, 무엇을 바꿨는지 알려 주세요.
휴대폰에서는 오류 문장을 보기 어렵습니다. 그때는 「화면에 무엇이 보이는지」와 「무엇을 기대했는지」만 적어도 됩니다.
4단계

휴대폰에서 열어 보고 나눕니다

열어 보는 방법

확인할 것

친구에게 보여 주기

함께 볼 때 나눌 질문

  1. 어떤 불편에서 시작했나요?
  2. 가장 크게 바뀐 고치기는 무엇이었나요? 어떤 요청을 했고 무엇이 달라졌나요?
  3. 아직 남은 불편 하나는 무엇인가요?

완성도보다 고친 과정이 분명한 화면이 좋은 예입니다. 막힌 곳도 다른 분께 도움이 됩니다.

5단계

기록을 남기고 마무리합니다

아래 틀을 복사해 메모 앱에 붙이고 채웁니다. 1단계에서 적은 내용은 미리 들어가 있습니다.

바뀐 점 기록

  

세 번을 다 못 했어도 괜찮습니다. 한 번 고친 기록만 있어도 오늘 목표의 절반입니다.

마무리 체크

조심할 점 넷

1 · 보안과 개인정보

기본 설정만 믿고 공개하면 위험합니다. 한 보고서(베라코드 2025)는 80개 코딩 과제에서 AI 가 쓴 코드의 45% 에 보안 취약점이 있었다고 했습니다. 시험용 과제 기준입니다.

남의 이름 · 연락처 · 학번을 넣는 도구는 만들지 않습니다. API 키나 암호를 요청문이나 코드에 붙여 넣지 않습니다.

2 · 이해 못 한 코드

고장 나면 고칠 사람이 없습니다. 「이 줄은 무슨 일을 하나요?」를 AI 에게 한 번은 묻고, 한 줄로 설명할 수 있을 때 제출합니다.

3 · 저작권과 라이선스

사람의 창작적 개입이 없는 순수 AI 결과물은 저작권 보호 대상이 아니라는 안내가 있습니다. AI 가 쓴 큰 덩어리를 내 작업처럼 내면 오해를 살 수 있습니다.

4 · 과제 기준

AI 사용 여부와 방식을 밝힙니다. 결과물의 최종 책임은 쓰는 사람에게 있습니다.

제출물 맨 아래에 「쓴 AI 도구 · 내가 고친 것 한 줄」을 적어 주세요.

생각해 볼 질문

  1. 한 줄도 직접 쓰지 않은 코드로 만든 도구를 「내가 만들었다」고 말해도 될까요? 과제로 낸다면 어디까지 밝혀야 공정할까요?
  2. 친구가 바이브코딩으로 만든 출석 앱에 학번과 전화번호를 넣으라고 한다면, 넣기 전에 무엇을 확인하시겠습니까?
오늘 만든 도구를 이번 주에 한 번 더 써 보세요. 쓰다가 불편하면 그것이 다음 요청입니다. 오늘 기록은 지우지 말고 남겨 두세요.