입력 필드에 이름 붙이기, 리뷰에서 함께 확인할 질문

플레이스홀더만 있는 입력창은 값을 입력한 뒤 어떤 항목이었는지 알기 어렵다.

작성자에게 당연한 전제도 리뷰어에게는 보이지 않을 수 있다. 파일의 차이만 보여 주면 변경 이유와 확인 범위를 추측하게 된다. 이번 기록에서는 결과를 판단하는 데 필요한 맥락을 짧게 전달하고, 질문이 실제 개선으로 이어지도록 확인 순서를 정리한다.

코드 밖의 맥락 전달하기

label을 입력의 id와 연결하고, 보충 설명은 aria-describedby로 연결한다. 필수 여부와 오류 메시지는 색뿐 아니라 텍스트로도 전달해야 한다.

이번에 확인할 질문: 리뷰어가 변경 이유와 남아 있는 제약을 코드만 추측하지 않고 이해할 수 있는가?

작게 확인하는 예제

다음 예제는 핵심 조건을 드러내기 위한 출발점이다. 서비스의 전체 구현을 대신하지 않으므로 실제 입력 범위와 실패 처리 규칙을 함께 읽어야 한다.

<label for="email">이메일</label>
<input id="email" name="email" type="email"
       aria-describedby="email-help" required>
<p id="email-help">답변을 받을 주소를 입력하세요.</p>

라벨을 클릭했을 때 해당 입력에 포커스가 가는지, 값을 입력한 뒤에도 필드의 이름이 남아 있는지 확인한다.

놓치기 쉬운 조건

placeholder는 라벨의 대체물이 아니다. 같은 화면에서 id가 중복되면 라벨을 눌렀을 때 엉뚱한 입력으로 포커스가 이동할 수 있다.

확인할 부분	살펴볼 내용
기준 동작	라벨을 클릭했을 때 해당 입력에 포커스가 가는지, 값을 입력한 뒤에도 필드의 이름이 남아 있는지 확인한다.
비교 조건	입력과 실행 순서를 고정하고 한 번에 한 조건만 바꾼다.
적용 범위	예제가 생략한 의존성과 실제 서비스의 제약을 구분한다.

다음 변경에 적용할 순서

1. 이번 변경이 해결하는 구체적인 상황을 먼저 설명한다.
2. 재현 예제와 확인한 결과를 한곳에서 볼 수 있게 남긴다.
3. 취향에 대한 제안과 지켜야 할 계약의 위반을 구분한다.

리뷰는 작성자의 지식을 시험하는 자리가 아니라 변경을 함께 책임지는 과정이다. 답변이 반복되는 질문은 설명이 부족한 신호일 수 있다. 대화가 끝난 뒤 가장 중요한 전제를 코드 가까이 남기면 다음 리뷰의 질문도 더 구체적이 된다.