비개발자의 AI 개발 도전기 1: 코딩을 몰라도 첫 할 일 앱 만들기

AI로 첫 앱 만들기 · 1화

“AI로 앱을 만든다는데, 코딩을 한 번도 안 해본 나도 할 수 있을까?”

이 연재는 그 질문에서 시작합니다. 개발 용어를 이미 안다고 가정하지 않고, 작은 결과물을 직접 띄워 보면서 필요한 개념을 하나씩 익힙니다. 코딩히어로가 개발자의 관점에서 길을 안내하되, 설명의 기준은 처음 파일을 저장하고 버튼을 눌러 보는 비개발자에게 맞추겠습니다.

첫 도전은 내 컴퓨터의 브라우저에서 쓰는 할 일 앱입니다. 오늘은 AI에게 기능을 설명하고, 받은 코드를 파일로 저장하고, 세 가지 기능을 직접 확인하는 데까지 갑니다. AI의 답변에 따라 화면 모양이나 코드가 달라질 수 있으므로, 아래 확인표를 통과하는 것을 완료 기준으로 삼습니다.

오늘의 목표
할 일 추가 → 완료 표시 → 원하는 항목 삭제
준비물: PC 또는 Mac, 웹 브라우저, 기본 텍스트 편집기, 평소 사용하는 AI 대화 도구
이번 단계: 내 컴퓨터에서 실행하는 연습용 웹 앱. 새로고침하면 목록이 사라지는 버전입니다.

1. 첫 앱은 기능 세 개면 충분합니다

처음부터 로그인, 알림, 달력, 친구 공유까지 넣으면 어떤 부분이 잘못됐는지 찾기 어려워집니다. 오늘 만들 앱은 “할 일을 적고, 끝났다고 표시하고, 지운다”에 집중합니다. 스마트폰 앱스토어에 설치하는 앱이 아니라 브라우저에서 열리는 작은 웹 앱입니다.

내가 하는 행동	화면에 나타나야 할 결과
‘물 한 잔 마시기’를 입력하고 추가	목록에 해당 문장이 한 줄 생김
그 항목의 완료 버튼 누르기	완료한 항목임을 알아볼 수 있게 표시됨
그 항목의 삭제 버튼 누르기	선택한 항목만 목록에서 없어짐

이 표가 첫 번째 설계서입니다. 어려운 용어 없이도 “무엇을 하면, 무엇이 바뀌어야 하는지”를 적으면 AI에게 원하는 결과를 전달할 수 있습니다.

2. 오늘 필요한 용어는 네 개입니다

• HTML: 제목, 입력칸, 버튼처럼 화면의 구성 요소를 적는 형식입니다.
• CSS: 글자 크기, 색상, 간격 등 화면의 모양을 정합니다.
• JavaScript: 버튼을 눌렀을 때 항목을 추가하거나 지우는 동작을 맡습니다.
• 프롬프트: AI에게 원하는 작업과 조건을 설명하는 요청문입니다.

오늘은 세 종류의 코드를 index.html 파일 하나에 넣도록 요청합니다. 파일을 여러 개 관리하거나 개발 프로그램을 설치하는 과정부터 시작하지 않아도 됩니다. HTML의 역할은 MDN의 HTML 기본 설명에서도 확인할 수 있습니다. 지금 전부 외울 필요는 없습니다.

3. 아래 요청문을 AI에 보내세요

평소 사용하는 AI 대화 도구에서 새 대화를 열고, 아래 내용을 복사해 넣으세요. 유료 도구를 새로 결제하는 것이 이 실습의 전제는 아닙니다. 이용 중인 도구의 응답 길이나 사용 한도에 따라 나누어 요청해야 할 수 있습니다.

나는 코딩을 처음 배우는 비개발자야.
내 컴퓨터의 브라우저에서 실행할 간단한 할 일 앱을 만들어 줘.

필요한 기능:
1. 할 일을 입력하고 '추가' 버튼 또는 Enter 키로 목록에 넣는다.
2. 입력 앞뒤 공백은 제거하고, 빈 내용이나 공백만 있는 내용은 추가하지 않는다.
3. 각 항목을 완료 또는 미완료 상태로 바꿀 수 있다.
4. 각 항목에 삭제 버튼이 있고, 누른 항목만 삭제된다.
5. 같은 내용의 항목이 두 개 있어도 각각 따로 완료·삭제할 수 있다.
6. 입력한 내용은 HTML로 해석하지 말고 글자 그대로 표시한다.

만드는 조건:
- HTML, CSS, JavaScript를 index.html 파일 하나에 모두 넣어 줘.
- 별도 프로그램 설치, 외부 라이브러리, 서버, 네트워크 요청 없이 동작하게 해 줘.
- 한국어 버튼과 입력칸 설명을 사용하고, 글자와 버튼을 읽기 쉽게 만들어 줘.
- 로그인, 결제, 알림, 데이터 저장 기능은 이번에는 넣지 마.
- 새로고침하면 목록이 사라진다는 안내를 화면에 표시해 줘.
- 생략 표시 없이 파일 전체 코드를 하나의 코드 블록으로 출력해 줘.
- 코드 다음에는 파일 저장·실행 방법과 확인할 동작을 쉬운 말로 설명해 줘.

응답에서 코드를 감싼 상자의 ‘복사’ 버튼을 사용하면 편합니다. 직접 선택해 복사한다면 코드 앞뒤의 설명 문장이나 코드 블록을 표시하는 백틱 기호까지 넣지 않도록 주의하세요. 응답이 중간에서 끊겼거나 “나머지는 동일”처럼 생략됐다면, “생략 없이 index.html 전체 코드를 다시 줘”라고 요청합니다.

4. 코드를 파일로 저장하고 열어 봅니다

바탕화면에 첫할일앱 폴더를 하나 만들고, 앞으로 수정하는 파일은 이 안에 모아 두세요. 문서 작성용 워드프로세서 대신 일반 텍스트를 저장할 수 있는 편집기를 사용합니다.

Windows: 메모장으로 저장

1. 메모장을 열고 AI가 준 전체 코드를 붙여 넣습니다.
2. ‘다른 이름으로 저장’을 선택합니다.
3. 저장 위치를 첫할일앱 폴더로 정하고, 파일 이름을 index.html로 입력합니다.
4. 파일 형식을 모든 파일, 인코딩을 UTF-8로 선택해 저장합니다.
5. 파일을 마우스 오른쪽 버튼으로 누르고 ‘연결 프로그램’에서 웹 브라우저를 선택합니다.

파일 이름이 index.html.txt이면 메모 문서로 남은 상태입니다. 탐색기에서 파일 확장명을 표시해 끝이 .html인지 확인하세요. 확장명은 파일의 종류를 구분하는 이름 끝부분입니다. Microsoft의 파일 확장명 안내를 참고할 수 있습니다.

Mac: 텍스트 편집기로 저장

1. 텍스트 편집기에서 새 문서를 엽니다.
2. 상단 포맷 → 일반 텍스트 만들기를 선택한 뒤 코드를 붙여 넣습니다.
3. 첫할일앱 폴더에 index.html이라는 이름으로 저장합니다.
4. 확장자를 묻는 창이 나오면 .html 사용을 선택합니다.
5. Finder에서 파일을 오른쪽 클릭하고 ‘다음으로 열기’에서 웹 브라우저를 선택합니다.

Mac의 저장 절차는 Apple의 HTML 문서 작성 안내를 기준으로 했습니다. 나중에 파일을 다시 편집할 때 코드 대신 꾸며진 글이 보이면, 텍스트 편집기의 설정 → 열기 및 저장하기에서 ‘HTML 파일을 서식있는 텍스트가 아닌 HTML 코드로 표시’를 선택하세요.

브라우저 주소가 file:///…/index.html처럼 보이고 입력칸과 버튼이 나타나면 실행 단계에 도착한 것입니다. 이 파일을 내 컴퓨터에서 여는 것만으로 인터넷에 공개되지는 않습니다.

5. 화면이 뜨면 아래 여섯 가지를 확인하세요

AI가 “완성했습니다”라고 답해도 실제 버튼은 직접 눌러 봐야 합니다. 다음 순서대로 확인하면 어디에서 문제가 생겼는지 설명하기 쉬워집니다.

1. 추가: ‘물 한 잔 마시기’를 입력하고 추가 버튼을 누릅니다. 한 줄만 생기나요?
2. Enter: ‘책 5쪽 읽기’를 입력하고 Enter를 누릅니다. 두 번째 항목이 생기나요?
3. 빈 입력: 입력칸을 비우거나 공백만 넣고 추가합니다. 빈 항목이 생기지 않나요?
4. 완료 전환: 첫 항목을 완료로 바꿨다가 다시 미완료로 돌려 봅니다. 다른 항목은 그대로인가요?
5. 개별 삭제: ‘책 5쪽 읽기’를 한 번 더 추가한 뒤, 같은 이름의 두 항목 중 하나만 삭제합니다. 나머지 하나가 남나요?
6. 새로고침: 마지막으로 화면을 새로고침합니다. 이번 버전은 저장 기능이 없으므로 목록이 비어 있는 것이 의도한 동작입니다.

하나라도 예상과 다르면 실패한 상태를 짧게 기록해 두세요. 이 기록이 다음 수정 요청의 재료가 됩니다. 오늘의 앱은 저장 연습 전 단계이므로, 잃어버리면 곤란한 실제 업무 목록 대신 연습용 문장으로 확인합니다.

6. 막혔을 때는 “안 돼요” 대신 이렇게 말합니다

예를 들어 추가 버튼을 눌러도 목록이 바뀌지 않는다면, 같은 AI 대화에 아래처럼 보내세요. 기대한 결과와 실제 결과를 나누면 AI가 엉뚱한 디자인 수정부터 하는 일을 줄일 수 있습니다.

현재 상황: 네가 준 코드를 index.html로 저장해 브라우저에서 열었어.
실행한 순서: 입력칸에 '물 한 잔 마시기' 입력 → 추가 버튼 클릭.
기대한 결과: 목록에 항목 한 개가 생기는 것.
실제 결과: 입력칸은 보이지만 버튼을 눌러도 목록이 바뀌지 않아.

기존의 추가·완료·삭제 기능은 유지하면서 원인을 점검해 줘.
내가 확인해야 할 것이 있다면 한 번에 한 단계씩 알려 줘.
수정이 필요하면 일부 조각 대신 index.html 전체 코드를 다시 줘.

수정 전 파일은 index-before.html처럼 다른 이름으로 한 부 복사해 두세요. 새 코드를 원래 index.html에 저장한 다음, 브라우저에서 그 파일을 다시 열거나 새로고침합니다. 여러 파일을 열어 놓았다면 주소 끝의 파일 이름도 확인하세요.

보이는 증상	먼저 확인할 것
브라우저 대신 메모장이 열림	‘연결 프로그램’에서 브라우저를 선택했는지 확인
화면 대신 코드 글자가 보임	.html.txt로 저장했는지, 일반 텍스트로 저장했는지 확인
수정했는데 화면이 그대로임	파일 저장 여부, 브라우저가 연 파일의 위치, 새로고침 여부 확인
화면은 나오지만 버튼이 작동하지 않음	코드가 끝까지 복사됐는지 확인하고, 실행 순서와 실제 결과를 AI에게 전달

7. 오늘의 도전 기록을 남겨 보세요

코드를 모두 설명할 수 있어야 첫 도전이 끝나는 것은 아닙니다. 오늘은 내가 원하는 동작을 말로 정하고, 실행하고, 결과를 확인하는 과정을 한 번 거치는 것이 목표입니다.

• 내가 직접 확인한 기능: ________
• 예상과 달랐던 동작과 다시 요청한 내용: ________
• 다음에 딱 하나 추가하고 싶은 기능: ________

다음 편에서는 “새로고침하면 왜 할 일이 사라질까?”를 출발점으로 브라우저에 목록을 저장하는 방법을 다룰 예정입니다. 그다음에는 화면 개선, 오류 수정, 다른 사람에게 보여 주는 과정으로 범위를 넓혀 가겠습니다.

처음부터 큰 서비스를 만들 필요는 없습니다. 오늘 입력한 한 줄이 목록에 나타나고, 내가 누른 항목만 지워진다면 첫 번째 결과물을 만든 것입니다. 어느 단계에서 막혔는지 댓글로 남겨 주세요. 운영체제와 실행 순서, 보이는 현상을 함께 적어 주시면 다음 설명을 더 구체적으로 만드는 데 도움이 됩니다.

연재 모아보기: AI로 첫 앱 만들기