웹 기본
프론트엔드(Frontend)
프론트엔드는 사용자가 앱에서 보고 조작하는 화면과 그 화면의 동작을 만드는 부분입니다.
쉬운 설명
신청 폼의 입력칸과 버튼, 빈칸일 때 나오는 안내 문구는 프론트엔드에서 만나게 돼요. 웹에서는 브라우저에 내용을 표시하고 클릭이나 입력에 반응하는 코드를 포함해요. 필요한 데이터는 서버에 요청해 가져올 수도 있어요. 화면이 잘 보이는 것과 서버에 신청이 실제 저장되는 것은 따로 확인해야 해요.
이런 상황에서 만나요
스터디 신청 버튼을 눌렀는데 아무 반응이 없다고 해 볼게요. 클릭이 처리되는지, 잘못된 입력 안내가 보이는지, 처리 중 상태가 표시되는지 순서대로 확인할 수 있어요.
같은 신청 폼의 상태가 달라져요
이메일을 입력해 주세요.
신청은 아직 보내지 않음
신청을 처리하고 있어요.
중복 제출 방지
신청이 완료됐어요.
결과에 맞는 안내 표시
- 1사용자가 무엇을 고쳐야 하는지 화면에서 알려 줘요.
- 2작업이 진행 중임을 보여 줘요. 이 문구가 저장 완료를 뜻하지는 않아요.
- 3응답에 맞게 화면을 바꿔요. 실제 저장 결과도 별도로 검증해요.
AI에게 “이메일이 비어 있으면 입력 안내를 보여 주고, 요청 중에는 중복 제출을 막아 줘”처럼 사용자의 행동과 보일 상태를 함께 말해 보세요. 컴퓨터 화면에서 고친 뒤 휴대폰에서도 입력과 버튼 조작을 확인해요.
헷갈리기 쉬운 점
화면에서 필수 입력을 검사하면 서버 검사는 없어도 되나요?
화면의 검사는 사용자가 실수를 알아차리게 돕지만 우회될 수 있어요. 저장이나 권한처럼 중요한 조건은 서버에서도 검사해야 해요. 프론트엔드의 성공 문구만으로 실제 저장이 끝났다고 판단하지 않아요.
사용자 화면으로 전달한 코드는 사용자가 확인할 수 있어요. 비밀 API 키를 숨겨 두는 장소로 사용하면 안 돼요. 색이나 마우스 동작만으로 상태를 전달하지 않고 읽을 수 있는 안내와 키보드 조작도 확인해요.
왜 알아야 할까요?
보이는 모양의 문제와 입력·요청 처리의 문제를 나눠 설명할 수 있어요. AI에게 구체적인 화면 상태를 요청하고 결과를 확인하기 쉬워져요.
관계 지도
