삽질방지 - focus 발생시 input text와 radio 버튼 차이

치맨·2025년 5월 18일

목록 보기

6/7

오늘은 어이없이 삽질했던 경험을 적어보려고 합니다.
우선 요구사항은 여러 타입의 값을 입력받아서, 제출하도록 하는것입니다.
1. input을 통한 짧은 text
2. text area를 통한 긴글
3. input의 radio 타입 버튼
4. select의 선택한 값
위와같이 여러개의 값을 입력받고, *를 통해 필수 여부를 받는 아주 일반적인 기능입니다.

문제 발생

input text에 focus 될 경우

위 사진처럼 text 타입의 input box를 focus할 경우 제가 원했던 방식으로 문제없이 잘 작동합니다.
마찬가지로 input의 radio 타입의 Input box를 focus할 경우 아래의 사진과 같이 동작합니다.

input radio에 focus 될 경우

마치 focus가 동작하지 않는 것 처럼 보입니다

위 사진과 달리 범위를 넓혀보면 페이지가 이동하여 focus가 동작하는구나 알 수 있지만, 위 사진처럼 같은 화면 내부에 존재한다면, 페이지의 이동이 발생하지 않고, 테두리에 특정 UI 변화가 보이지 않아 동작하지 않는 것 처럼 보입니다.
GPT에게 물어보니 라디오 버튼은 브라우저에 따라 기본 스타일이 적용되어 있으며, focus 시 기본적으로 outline이 적용되긴 하지만 시각적으로 거의 보이지 않거나, 표시되지 않도록 설정되어 있는 경우가 많기 때문입니다. 라고 말합니다.
저는 Crome을 썼지만 safari, Brave Browser 모두 확인해본 결과 아무런 UI 변화가 보이지 않습니다.

문제 해결

따라서 focus가 될 경우 outline이라는 Css 속성을 직접 추가해주고, blur가 될 경우 css를 해제하는 방법으로 문제를 해결할 수 있습니다.

focus이벤트는 요소가 포커스를 받으면 발생합니다.
blur 이벤트는 요소가 포커스를 잃었을 때 실행되는 이벤트입니다.
여러 방법이 존재합니다.
1. CSS에 focus 스타일 추가
2. onfocus, onblur 이벤트를 추가하여, style을 변경

css에 Focus 스타일 추가

input[type="radio"]:focus {
  outline: 2px solid blue;
  outline-offset: 2px;
}

onfocus, onblur 이벤트를 추가하여, style을 변경

  <script>
      const radio = document.getElementById('radio');

      radio.addEventListener('focus', () => {
        radio.style.outline = '2px solid blue';
      });

      radio.addEventListener('blur', () => {
        radio.style.outline = 'none';
      });

      const button = document.querySelector('button');

      button.addEventListener('click', (e) => {
        const inputs = e.target.parentElement.parentElement
          .querySelector('div')
          .querySelectorAll('input');

        const input1 = inputs[0];
        input1.focus();
      });
    </script>

느낀점

사실 이번 삽질은 기술적으로 어려운 문제라기보다는, focus가 잘 동작하고 있었음에도 불구하고 화면 변화가 없어서, 동작하지 않는다고 착각했던 제 실수를 돌아보게 만든 경험이었습니다.
특히 일반 텍스트 타입의 input과는 달리, 라디오 버튼은 focus 되었을 때 UI에 뚜렷한 변화가 보이지 않는다는 점을 이번에 처음 알게 되었는데요. 저처럼 같은 실수를 반복하지 않으시길 바라는 마음으로 이 글을 남깁니다.
물론 focus가 동작하기 때문에 그냥 넘어가도 되지만, 확실히 outline을 나타내줌으로서 여기 체크 하셔야됩니다! 라고 직접적으로 표시해주는게 필수적이라는 사용자 경험에 대한 강박(?)이 있어서 한번 확인해봤습니다.