한 줄 요약 - 페이지 맨 아래에 흔히 들어가는 "연락처" 영역을, 정보(왼쪽)와 문의 폼(오른쪽)으로 나눠 만든 섹션이에요. 폼은 빈칸/이메일 형식을 즉석에서 확인하고, 보내면 "보냈습니다" 화면으로 바뀝니다.
이럴 때 필요해요
랜딩 페이지나 포트폴리오 마지막에 "여기로 연락하세요"를 넣고 싶을 때가 많아요. 그런데 연락처 텍스트만 덜렁 두면 휑하고, 폼만 두면 어디로/얼마나 빨리 답이 오는지 알 수가 없죠. 정보와 폼을 좌우로 같이 보여 주면 방문자가 편한 쪽을 스스로 고를 수 있습니다. 모바일에선 두 영역이 자동으로 위아래로 쌓여서 좁은 화면에서도 안 깨져요.
어떻게 동작하나
- 입력값(이름/이메일/제목/메시지)을 하나의 상태 객체로 모아 둡니다. 어떤 칸을 고치든 같은 곳에 기록돼요.
- "보내기"를 누르면 먼저 검사 함수가 돌아요. 공백만 있는 칸은 빈 것으로 치고, 이메일은 정규식(정해진 글자 패턴과 맞는지 보는 규칙)으로 형식을 확인합니다.
- 문제가 하나라도 있으면 그 칸 아래에 빨간 안내가 뜨고 제출은 멈춰요. 모두 통과하면 잠깐 보내는 척(시뮬)한 뒤 성공 화면으로 바꿉니다.
핵심은 이거예요
검증은 "제출할 때 한 번에 전부" 확인하고, 사용자가 틀린 칸을 다시 고치기 시작하면 그 칸의 에러만 바로 지워 줍니다. 이 한 가지만 지켜도 "빨간불이 계속 남아 짜증나는" 폼이 안 돼요.
놓치기 쉬운 것
- 빈 값 검사는
trim()으로 - 스페이스만 잔뜩 친 입력을 통과시키면 의미 없는 문의가 들어와요. - 입력칸은 직접 만들지 말고 공통 컴포넌트(Input/Textarea)를 쓰세요. label/error 표시/접근성(aria) 처리가 이미 들어 있어 일관성이 유지됩니다.
- 폼 태그에
noValidate를 줘서 브라우저 기본 경고 대신 우리가 만든 한국어 안내가 뜨게 했어요.
이런 곳에 써요
- 포트폴리오/회사 소개 페이지의 맨 아래 "Contact" 섹션
- 서비스 랜딩의 "문의/상담 신청" 블록