복사해서 만드는 첫 앱 — 오늘 할 일 3개 완성형 프롬프트

처음 만드는 앱은 기능을 적게 잡을수록 끝까지 확인하기 쉽습니다. 이 실습에서는 오늘 할 일을 세 개까지만 입력하고, 완료하고, 지우고, 다시 열어 보는 것을 목표로 합니다. 알림·회원가입·서버·여러 기기 동기화는 넣지 않았습니다.

위 이미지는 아래 완성본에 테스트용 할 일을 직접 입력한 실제 브라우저 화면입니다. 기존에 출시한 앱의 홍보 화면이나 디자인 시안이 아닙니다. HTML 파일 하나로 동작하는 웹 실습이며, Android 스토어용 앱 패키지는 아닙니다.

실행본과 소스부터 확인하세요

오늘의 세 가지 앱 실행하기 · 완성본 ZIP 내려받기 · 전체 프롬프트 TXT 받기

ZIP 안의 index.html을 브라우저로 열면 됩니다. 소스 수정은 텍스트 편집기로 할 수 있으며, 따로 패키지를 설치하거나 서버를 실행할 필요가 없습니다. 네트워크 연결이 없어도 앱 자체는 동작합니다. 단, '만드는 방법 보기' 링크는 온라인 가이드로 이동합니다.

새로 열면 빈 목록이 나오는 것이 정상입니다. 캡처에 보이는 세 항목은 시험 중 입력한 예시이며, 다운로드 파일에 사용자 기록처럼 심어 놓은 데이터가 아닙니다. 원하는 할 일을 입력해 자신의 상태를 만들어 보세요.

완성본은 아래 프롬프트의 요구사항대로 만들어 돌려 본 참고 코드입니다. 같은 프롬프트를 넣어도 어느 AI에 넣느냐에 따라 화면도 코드도 달라집니다. 어떤 모델이 한 번에 이 소스를 뱉었다는 기록이 아니니, 결과는 직접 돌려서 확인하십시오.

복사해서 사용할 완성형 프롬프트

기능 목록만 쓰지 않고 빈 목록·잘못된 입력·저장 실패까지 요구합니다. 실제 이용에서는 정상 입력보다 이런 경계 조건에서 작은 앱의 차이가 드러납니다.

당신은 초보자가 이해할 수 있는 작은 웹 앱을 만드는 개발자입니다.
"오늘의 세 가지"라는 할 일 앱의 완성본을 만들어 주세요.

[출력 형식]
- HTML, CSS, JavaScript를 모두 담은 index.html 파일 하나를 완성해서 출력하세요.
- 외부 설치·라이브러리·CDN·서버·로그인·광고·API 키 없이 동작해야 합니다.
- 코드 생략, TODO, 의사 코드를 쓰지 마세요. 저장·실행 방법과 테스트 순서를 코드 뒤에 설명하세요.

[기능]
1. 처음에는 빈 목록, 새 할 일 입력란, 추가 버튼과 빈 상태 안내를 보여 주세요. 샘플 할 일을 사용자 데이터인 것처럼 미리 넣지 마세요.
2. 등록된 항목은 완료 여부를 포함해 최대 3개입니다. 항목 하나는 최대 60자로 제한하세요.
3. 입력 앞뒤 공백을 제거하고, 빈 내용과 정확히 같은 중복 항목은 추가하지 마세요. 이유를 한국어로 안내하세요.
4. 추가 버튼과 Enter 제출이 동일하게 작동해야 합니다. 제출하면 입력란을 비우고 초점을 유지하세요.
5. 항목마다 체크박스와 삭제 버튼을 제공하세요. 완료 항목에는 취소선을 표시하고 체크 해제도 가능하게 하세요.
6. "완료 항목 지우기" 버튼은 완료한 항목만 지우며 미완료 항목은 유지해야 합니다. 완료 항목이 없으면 비활성화하세요.
7. 세 개가 차면 추가 버튼을 비활성화하고, 제출 처리에서도 한도를 검사하세요. 항목을 지우면 다시 추가할 수 있어야 합니다.
8. 완료 개수 / 등록 개수를 표시하고 진행 막대를 제공하세요. 빈 목록에서는 0으로, 모두 완료하면 완료 안내를 표시하세요.
9. 목록과 완료 상태를 localStorage에 저장하고 새로고침 후 복원하세요. 복원할 때 배열인지, 각 항목의 text가 유효한 문자열이고 done이 불리언인지 검사하며 최대 3개만 읽으세요.
10. 저장값이 손상되면 빈 목록으로 복구하고 안내하세요. 저장이 차단되어도 현재 화면에서는 계속 쓸 수 있으며 새로고침하면 유지되지 않는다고 알리세요.
11. 사용자가 입력한 문자는 textContent로 표시하고 innerHTML에 넣지 마세요.
12. 날짜가 바뀌어도 목록을 자동으로 삭제하지 마세요. 여러 기기나 탭 사이의 자동 동기화는 이번 범위에서 제외하고 안내하세요.

[디자인과 접근성]
- 한국어 UI, 따뜻한 크림색 배경, 밝은 카드, 올리브색 버튼과 충분한 여백을 사용하세요.
- 제목은 "오늘은 세 가지만."으로 하고, 작은 일부터 끝내도록 돕는 짧은 설명을 넣으세요.
- 입력란에는 연결된 label을 제공하고 버튼·체크박스는 키보드로 조작 가능해야 합니다.
- 버튼과 체크 행은 휴대폰에서 누르기 편하게 만들고 초점 표시를 제공하세요.
- 긴 한글이나 공백 없는 문자열이 있어도 320px부터 1280px까지 페이지가 가로로 넘치지 않게 하세요.
- 등록·오류·삭제 결과를 role="status" 영역으로 알려 주세요.
- 입력한 내용은 현재 브라우저에만 남으며 사이트 데이터를 지우면 삭제된다고 안내하세요.

[완료 전 확인]
- 빈 내용, 중복, 3개 한도, 체크·체크 해제, 개별 삭제, 완료 항목만 삭제를 검사하세요.
- 새로고침 복원, 손상된 저장값, 저장 차단, 320px 화면, HTML처럼 생긴 입력이 문자로 표시되는지 검사하세요.
- 실제로 실행하지 않았다면 테스트 완료라고 쓰지 말고 사용자가 확인할 항목을 적어 주세요.

이 앱에서 배울 세 가지

첫째는 화면과 데이터를 가르는 일입니다. 목록의 원본은 tasks 배열이고 화면은 그걸 비춰 주는 것뿐입니다. 체크박스를 눌렀을 때 화면만 바뀌고 done 값이 안 바뀌면, 다음에 켤 때 전부 풀려 있습니다. 화면에서 본 것과 저장된 것이 다른 상태가 이 종류 앱에서 제일 흔한 버그입니다.

둘째는 사용자 입력을 믿지 않는 것입니다. 공백만 입력했는지, 같은 항목이 있는지, 개수와 길이 제한을 넘었는지 확인합니다. HTML처럼 보이는 글자를 입력해도 태그가 실행되지 않도록 textContent로 표시합니다. 실제 서비스에서는 클라이언트 검사만으로 서버의 검증을 대신할 수 없지만, 이 예제는 서버가 없습니다.

셋째는 저장 실패가 앱 전체의 실패가 되지 않도록 하는 것입니다. 저장이 차단되어도 지금 화면에서 항목을 추가하고 지울 수 있어야 합니다. 대신 페이지를 나가면 유지되지 않는다는 사실을 사용자에게 알려야 합니다.

실제 모바일 크기로 본 화면

이 이미지는 실제 브라우저의 화면 너비를 390px로 설정해 촬영했습니다. 실제 Android 휴대폰에서 촬영한 사진은 아닙니다. PC와 모바일 크기에서 같은 소스를 사용하며, 넓이가 줄어도 입력칸·삭제 버튼이 밖으로 밀리지 않게 만들었습니다.

검증한 범위와 직접 확인할 항목

2026년 9월 15일 Windows의 Chrome 152에서 추가, 중복 차단, 세 개 제한, 체크 상태의 새로고침 복원, 개별 삭제, 완료 항목만 삭제를 확인했습니다. 320·390·768·1280px 너비에서 문서의 가로 넘침도 검사했습니다.

테스트에서는 저장값을 일부러 손상시키거나 저장 기능을 차단한 상태도 만들었습니다. 손상된 기록은 빈 목록으로 복구되었고, 저장이 차단된 경우에는 임시 사용과 안내가 가능했습니다. <img src=x onerror=alert(1)>처럼 생긴 입력도 실제 이미지 요소가 아닌 글자로 표시되었습니다.

저장 쪽은 한계를 정확히 알고 쓰셔야 합니다.

파일을 브라우저로 직접 열었을 때의 저장 동작은 브라우저마다 다릅니다. 온라인 실행본은 같은 주소로 들어가야 기록이 보입니다 — 주소가 달라지면 저장 자리도 달라져서 빈 목록이 뜹니다.

기록은 그 브라우저 안에만 남습니다. 날짜가 바뀌어도 알아서 지워지지 않고, 다른 기기나 다른 탭과 맞춰지지도 않습니다. 그 동기화는 안 만들었습니다. 업무 기록을 맡기는 서비스로 쓰지 마시고, 동작을 익히는 예제로만 쓰십시오.

결과가 다를 때 쓰는 수정 요청

새로고침 뒤 내용이 사라지는 경우에는 브라우저 저장 문제 진단에서 주소·저장 차단·손상된 데이터의 차이를 먼저 확인하세요.

현재 할 일 앱에서 완료한 항목을 지우면 미완료 항목까지 사라집니다.
재현: A와 B 추가 → A만 체크 → 완료 항목 지우기.
기대: B는 남고 A만 지워져야 합니다.
삭제 처리에서 done이 false인 항목을 보존하도록 수정해 주세요.
개별 삭제, 최대 세 개 제한, 새로고침 복원 기능은 유지하고,
수정한 전체 index.html과 위 순서의 확인 결과를 알려 주세요.
직접 실행하지 않았다면 확인 완료라고 쓰지 마세요.

같은 증상이 났을 때 그대로 넣는 요청입니다. "화면이 비었어요"보다 무엇을 넣고 어떤 버튼을 눌렀는지를 적으면 고칠 자리가 훨씬 빨리 좁혀집니다. 사람에게 넘길 때도 마찬가지입니다.

다음 실습은 기능 하나만 추가합니다

짧은 요구사항에서 실제 첫 코드가 어떻게 나왔고 무엇을 추가로 요청했는지 궁금하다면 GPT-5.5 제작·수정 기록을 읽어 보세요. 그 글은 이 완성본을 그대로 재사용한 설명이 아니라, 별도로 요청한 두 응답을 원본 그대로 비교한 사례입니다.

예를 들어 "완료 안 한 것을 위로" 정렬을 하나 붙여 보십시오. 붙이는 것 자체는 금방입니다.

진짜 확인할 것은 정렬한 뒤에 체크와 삭제가 엉뚱한 항목에 가지 않는가입니다. 화면에 보이는 순서와 원본 배열의 자리가 어긋나는 순간, 셋째 줄을 지우라고 눌렀는데 다른 게 지워집니다. 오류는 안 납니다.

완성본 코드와 프롬프트는 ZIP 안의 MIT License를 따릅니다. 고쳐 쓰셔도 되고 가져다 쓰셔도 됩니다.

이어서 읽을 것

입력 대신 시간과 입력을 다루는 쪽은 30초 표적 게임이고, 내 앱의 첫 버전 범위를 정하는 쪽은 앱 개발 전체 순서입니다. 저장이 사라졌을 때 원인을 가르는 순서는 브라우저 저장 문제에 적어 두었습니다.