AI로 첫 앱 만들기: 입력 폼에 필요한 안내와 확인 규칙 정하기

독서 기록 앱에 책 제목과 읽은 날짜를 입력한다고 해봅시다. 사용자가 어떤 값을 적어야 하는지, 입력을 마쳤을 때 무엇이 저장되는지 알려주는 것도 앱의 기능입니다. 코드를 요청하기 전에 입력 규칙부터 짧게 정리해 보세요.

필드마다 네 가지를 결정합니다

필드	필수 여부	허용 범위 예시	안내 문구
책 제목	필수	1~100자	책 제목을 입력해 주세요
읽은 날짜	필수	오늘까지의 날짜	읽은 날짜를 선택해 주세요
한 줄 메모	선택	200자 이내	기억할 문장을 남겨 보세요

이 숫자는 연습용 설계 예시입니다. 실제 서비스에 맞게 정하면 됩니다. 독서 예정일까지 기록할 앱이라면 날짜 규칙도 달라집니다. 허용 범위는 사용 목적에서 출발합니다.

브라우저 확인과 서버 확인을 함께 이해하기

HTML은 필수 입력, 길이, 입력 형식 등을 확인하는 기능을 제공합니다. 서버로 자료를 보내는 앱에서는 서버에서도 값을 확인해야 합니다. 브라우저의 확인은 입력을 돕는 단계이고, 서버는 전달받은 값이 저장 규칙을 충족하는지 다시 판단합니다. MDN 입력 폼 검증 안내

AI에게 건넬 요청문

독서 기록 입력 화면을 만들어 주세요. 책 제목은 공백을 정리한 뒤 1~100자, 읽은 날짜는 필수이며 오늘까지 선택, 메모는 선택이며 200자 이내로 정합니다. 각 입력칸에 항상 보이는 이름을 붙여 주세요. 조건을 충족하지 않은 칸 바로 아래에 수정 방법을 안내하고, 입력한 다른 값은 유지해 주세요. 서버 저장을 연결한다면 서버에서도 같은 규칙을 확인해 주세요.

안내 문구는 “제목을 입력해 주세요”, “200자 이내로 적어 주세요”처럼 다음 행동이 보이게 씁니다. 색 표시와 문장을 함께 사용하면 사용자가 내용을 읽고 수정할 수 있습니다.

경계값을 직접 넣어 봅니다

제목을 비운 경우, 공백만 넣은 경우, 제목을 정확히 100자로 넣은 경우, 101자로 넣은 경우를 각각 확인해 보세요. 날짜는 오늘과 내일, 메모는 빈 값과 최대 길이를 살펴봅니다. 저장 후 목록에 표시된 값도 비교합니다.

확인표에는 기대한 결과와 실제 결과를 나란히 적습니다. “입력 폼 완성”을 “어떤 값은 저장되고 어떤 값은 안내되는지 확인했다”로 바꾸면 다음 수정 요청이 구체적이 됩니다. 이 글은 연습 설계이며 실제 앱 검증 결과는 아닙니다.

영문판: Read in English.