게시일: 2024년 12월 16일
9월에 맞춤설정 가능한 선택 기능에 대한 의견을 요청드렸습니다. 공유해 주신 의견에는 사용 사례 (예: 디자인 시스템, 콤보 상자), API의 입력 모드에 대한 생각, 기본 스타일에 대한 의견이 포함되었습니다. 접근성, 브라우저 호환성, 검색 기능의 필요성, 다중 선택 지원에 대한 요구사항 등이 우려사항으로 제기되었습니다. 프로덕션에서 API를 사용하고 싶지만 몇 가지 우려사항과 특정 기능 요청이 있는 것으로 보입니다.
Chrome 엔지니어와 관리자는 이러한 모든 정보를 바탕으로 기능에 관한 정보를 바탕으로 결정을 내렸습니다. 이 게시물에서는 맞춤설정 가능한 선택 설문조사의 각 질문에서 얻은 주요 정보를 공유합니다.
이 새로운 API로 무엇을 빌드할 수 있나요?
다양한 사용 사례가 공유되었으며 일반적으로 다음 사항이 포함되었습니다.
- 디자인 시스템 구성요소 빌드: 디자인 시스템에 선택된 구성요소를 만들어 프로젝트 전반에서 일관성과 맞춤설정 가능성을 보장합니다.
- 다양한 유형의 선택기 만들기: 언어 선택기, 국가 선택기, 사용자 권한 선택기 등
- 기존 선택 요소 개선: 이미지, SVG, 더 풍부한 스타일 지정 등의 기능으로 기존 선택 요소를 개선합니다.
- 맞춤 선택 구현 교체: 맞춤 빌드된 선택 구성요소를 표준화된 네이티브 솔루션으로 대체합니다.
- 콤보 상자 및 맞춤 선택 도구 빌드: 콤보 상자, 전화번호, 시간대, 통화, 기타 데이터 유형의 맞춤 선택 도구와 같은 더 복잡한 기능
- 양식 UI 개선: 시각적으로 매력적이고 기능적인 선택 요소를 만들어 양식을 개선하세요.
이러한 응답은 새로운 API의 다목적성과 다양한 웹 애플리케이션의 사용자 환경과 개발 효율성을 개선할 수 있는 잠재력을 보여줍니다.
이 API가 광범위한 사용 가능 기준에 도달하면 프로덕션에서 이 API를 사용할 계획인가요?
새 API를 사용해 보셨나요? 그렇다면 원하는 대로 빌드할 수 있었나요?
맞춤설정 가능한 선택의 입력 모드 (<select> 요소 및 ::picker(select)의 appearance: base-select)에 대한 의견
이 입력 모드에 대한 의견은 다음과 같이 다양합니다.
- 일부는 이 접근 방식이 현재 상황보다 수용 가능하거나 합리적이라고 생각하기도 합니다.
<select>요소를 점진적으로 개선하는 '논리적' 또는 '괜찮은' 방법으로 간주합니다. - 혼란스러워하거나 구문이 어색하다고 말하는 사용자도 있습니다. 두 속성 (
appearance: base-select및::picker(select))을 사용하는 것은 중복되거나 불필요한 것으로 간주됩니다. 이름 지정 (base-select가 혼동을 줄 수 있음)과 기본 개념에 익숙하지 않은 신규 사용자가 혼동할 수 있다는 우려가 제기되었습니다. - 단일 속성 또는 선택기를 사용하거나
appearance속성을 아예 사용하지 않는 등의 대안 접근 방식을 제안하는 응답자도 일부 있었습니다.
전반적으로 일부 응답자는 현재 입력 모드를 편안하게 생각하는 반면, 다른 응답자는 혼란스럽다고 생각하거나 명확성과 단순성을 위해 개선을 제안합니다. 이 의견은 개발자가 새 API를 효과적으로 사용할 수 있도록 안내하는 명확한 문서와 예시의 중요성을 강조합니다.
맞춤설정 가능한 선택을 위한 기존 기본 (사용자 에이전트) 스타일에 관한 의견이 있으신가요?
일부 응답자는 스타일이 수용 가능하거나 좋다고 생각하는 반면, 다른 응답자는 구체적인 비판이나 제안을 합니다. 의견 중 일부는 다음과 같습니다.
- 체크표시 아이콘이 예쁘지 않거나 더 간단할 수 있습니다.
- 항목 옆에 체크표시를 할 공간이 충분하지 않습니다.
- 포커스 링이 잘리고 선택된 아이콘과 텍스트 사이에 간격이 없어 기본 스타일이 좁아 보입니다.
- 스타일이 OS 플랫폼 스타일 또는
<dialog>요소에 더 가까울 수 있습니다. - 기본 화살표는 아래를 향하고 열려 있을 때는 위로 젖혀야 합니다.
- 기본 사용자 에이전트 스타일을 삭제하려면 재설정이 필요할 수 있습니다.
이 기능에 관해 질문, 의견 또는 우려사항이 있으신가요?
맞춤설정이 가능한 새로운 select API에 관한 다양한 의견, 질문, 우려사항이 있었습니다. 주요 주제는 다음과 같습니다.
- 접근성: 스크린 리더 및 키보드 탐색과 관련된 접근성 문제를 제기한 응답자가 여러 명 있었습니다.
- 다중 선택 및 콤보 상자: 다중 선택 기능과 콤보 상자 지원에 대한 요구가 많습니다.
- 검색 기능: 선택 옵션 내에서 검색할 수 있는 기능이 요청된 기능입니다.
- 스타일 지정 및 브라우저 호환성: 스타일 지정 옵션, 브라우저 호환성, CSS 재설정 필요성에 대한 우려가 제기되었습니다.
- 구현 세부정보: 포커스 잠금, 렌더링 동작, 맞춤 하위 요소와 같은 구체적인 구현 세부정보에 관한 질문이 있었습니다.
- 일반 의견: 더 간단한 API 진입 모드와 브라우저 크롬 외부에서 렌더링하는 기능에 대한 요구 등 일반적인 의견을 공유한 응답자도 있었습니다.
전반적으로 접근성 개선, 다중 선택 및 검색과 같은 추가 기능, 스타일 지정 및 브라우저 호환성에 관한 명확한 안내가 필요하다는 의견이 많았습니다.
추가로 의견이 있으신가요?
응답자의 의견과 제안에서 주요 주제는 다음과 같습니다.
- 복수 선택 및 콤보 상자 기능에 대한 요구: 복수 선택 및 콤보 상자 기능 추가를 구체적으로 요청하는 응답자가 여러 명 있었습니다.
- 접근성의 중요성: 일부 응답자는 접근성 기능에 지속적으로 집중해야 한다고 강조했습니다.
- 긍정적인 의견 및 기능 요청: API에 대한 기대감을 표현하고 검색 옵션이나
@supports를 사용하여 지원을 감지하는 기능과 같은 제안을 하는 사용자도 있습니다. - 특정 사용 사례: 브라우저 크롬 외부에서 렌더링하거나
<select>요소 내에 맞춤 값을 허용하는 등 지원을 원하는 특정 사용 사례를 언급한 응답자가 몇 명 있었습니다. - 일반적인 의견: 일반적인 칭찬을 하거나 브라우저 간에 일관된 모양을 원한다고 표현하는 의견이 있습니다.
전반적으로 이 의견은 다중 선택 및 콤보 상자 기능에 대한 수요를 강화하고 접근성의 중요성을 강조하며 잠재적인 사용 사례와 개선사항에 관한 추가적인 통계를 제공합니다.
다시 한번 모든 사용자에게 감사드리며, 이 커뮤니티 의견 요약이 구현자와 개발자에게 도움이 되어 사용자와 개발자 모두에게 더 나은 맞춤 선택 환경을 제공할 수 있기를 바랍니다.