Form) Select요소 - 모바일기기에서 Select요소를 사용해야 할까?

안녕하세요 찐망고입니다

포스팅 순서가 지금 두서없긴 한데 양해를...

 

HTML에서 FORM은 사용자로부터 입력을 받기 위해 사용되는 요소이고

웹페이지에서 데이터를 전송하거나 처리하기 위한 컨테이너 역할을 하는데요

일반적으로 폼은 텍스트입력, 체크박스, 라디오버튼, 드롭다운 목록등과 같은 다양한 입력요소를 포함할 수 있죠.

 

Select요소는 FORM요소에서 드롭다운 목록역할을 하는 요소인데

사용자에게 선택할 수 있는 옵션 목록을 제공합니다.

 

제자들이 많이 하는 질문 중 하나는 

모바일에서 꼭 Select요소를 사용해야하는지에 대한 질문이었어요

이 질문이 왜 나왔냐면

현재 드롭다운 목록형태의 구조를 가지는 디자인요소들이 생각보다 꽤 많이

Select요소 대신 다른 구조로 작업 되고 있거든요

 

이런 디자인들 많이 보실거에요 ㅎㅎ

select요소가 필요한 메뉴 구성

 

 

아래그림을 보면

오른쪽 상단에 Family Site가 있어요

푸터

클릭을 하면

패밀리사이트

이렇게 드롭다운 메뉴가 나오는 형태인데요. 이런 디자인들이 정말정말정말정말 많단 말이죠.

그런데 저런 드롭다운 메뉴를  사용하고자 Select요소를 쓰려고 보니 제약이 많아요

CSS를 쓰는게 한계가 있어요

 

그러다보니 저런 요소들은 거의 대부분 버튼과 ul요소로 만들어서 커스텀 해버려요

버튼을 클릭하면 목록리스트가 나오게 되는거죠.

CSS적용시키기도 좋고 그러다보니 자주 쓰긴하는데

문제는 반응형일때..

반응형지란지교

pc와 같은형태의 구조로 나온다는거죠 ㅎㅎ 

 

 

그럼 Select요소를 사용하면 모바일기기에선 어떻게 보일까요?

ios도 그렇고 안드로이드도 그렇고 형태의 디자인이 다를 뿐이지

사용자가 쉽고 편리하게 선택할 수 있도록 편리한 UI를 제공해 줍니다.

쿠쿠 모바일 사이트 좌 : 기본, 우 : 모바일 

쿠쿠 모바일 사이트인데요

Select요소를 사용하니 기본적인 디자인이

모바일기기(현재는 ios)로 접속하면 오른쪽처럼 바뀌어 보입니다.

 

 

 

Select요소를 사용하는 이유에 대해 정리해보자면

1.  기본UI컨트롤과 사용자경험향상기능
   모바일 기기는 사용자가 목록에서 직접 항목을 선택할 수 있는 편리한 방법의 인터페이스를 제공하고
   사용자는 익숙한 드롭다운 목록 UI를 인식하고 사용할 수 있다
2. 터치 제스처 호환성
   터치 스크린을 사용하는 장치에서 터치 제스처를 지원하여, 사용자들은 목록을 스크롤하거나 항목을 터치로 선택할 수 있다.
3. 시멘틱요소
   시멘틱요소인 Select요소는 선택옵션들을 목록형태로 내용과 목적을 명확히 전달하므로 웹사이트에 구조와 의미를 향상시킨다. 사용자가 드롭다운 목록을 보면 해당 옵션 중 하나를 선택해야 한다는 것을 직관적으로 이해할 수 있다
4. 웹접근성
   스크린 리더기 등의 보조 기술을 사용하는 사용자들도 쉽게 목록을 탐색하고 선택할 수 있다.

 

물론, 디자인 요구에 따라 button과 ul을 사용하여 커스텀 드롭다운 목록을 고려해볼수도 있습니다.

이런 경우엔 브라우저간의 호환성문제와 접근성문제도 고려하고,

반드시 모바일 장치에서도 터치기반제스처와 접근성을 고려하여 구현하는게 좋겠죠?

 

 

 

 

 

 

 

 

 

이미지 출처 사이트

https://www.jirandata.co.kr/

데이터 보호 전문기업 지란지교데이터

https://www.shinhands.co.kr/

신한DS

https://shop.descentekorea.co.kr/LECOQSPORTIF

르꼬끄 온라인스토어

https://www.cuckoo.co.kr/#

CUCKOO