Semantics class
위젯의 의미에 대한 설명으로 위젯 트리에 주석을 달은 위젯입니다.
보조 기술, 검색 엔진 및 기타 의미 분석 소프트웨어에서 응용 프로그램의 의미를 확인하는 데 사용됩니다.
예제 코드
시각장애인들이 우리가 플러터로 만든 앱에 들어오는 일이 생긴다면 어떻게 될까? 시각장애를 갖고 있다면 스크린 리더기를 사용한다는 선택지가 주어진다. 이 스크린 리더기라는 것은 말 그대로 스크린의 항목들을 읽어주는 역할을 가지고 있는데 예를 들어 내가 구글 앱을 켜고 싶다. 그러면 화면 아무 곳을 터치하면 스크린 리더기가 소리로 여기에는 어떠한 앱이 있습니다. 하고 소리를 내준다. 시각장애인들은 이 정보를 바탕으로 스마트폰의 화면을 보게 되는데 여기서 문제가 발생한다.
플러터로 만든 앱에 들어왔을 때 앱에 우리가 만든 것중에 어떠한 것은 스크린 리더기는 알려주지 못한다는 것이다. 그렇기에 있는 것이 이 Semantics 위젯이다.
이 Semantics 위젯은 접근성(Accessibility) 을 위해 사용되는 중요한 기능이다. 스크린 리더 같은 보조 기술이 앱의 내용을 더 잘 이해할 수 있도록 돕는 것이다. 플러터에 있는 기본 위젯들은 다 기본적으로 스크린 리더기에 읽히지만 우리가 직접 만든 커스텀 위젯에는 그 기능이 빠지게 된다. 이럴 때에 Semantics 를 넣어 설명을 추가해주면 되는 것이다. 부가적으론 기능 설명을 위해 (ex: 버튼 클릭 시 특별한 동작) 세부사항을 적어 놓는 용도로도 사용될 수 있다. 그럼 한번 사용은 엄청 간단하니 빠르게 알아보자.
Semantics(
label: 'Container',
hint: 'This is just Box!',
button: true,
child: Container(width: 100, height: 100, color: Colors.blue,
),
),
자 보는 것 처럼 엄청 쉬운데 우리가 설명해주고 싶은 위젯을 Semantics 로 감싼다. 그 후 label 로 그 위젯의 이름을 말하게 해 줄 수 있고 hint 로 그 위젯의 동작과 관련된 정보를 적어 놓을 수 있다. 이게 끝이다.
부가적으로 이제 button: ture 이렇게 해서 이 위젯이 button 속성을 가지고 있다가 말해줄 수 도 있다.
그리고 이제 당연하겠지만 플러터에는 기본 동작들이 엄청나게 많기에 Semantics 의 하위 속성도 겁나게 많은데 무려 70개다...
그 속성들은 대부분 bool 값을 가지고 있는데 그 이유로는
button: true,
이렇게 적어 놓으면 스크린 리더기에서 버튼이라고 설명을 해주기 때문이다.
다른 것도 마찬가지다. onTap, container, image 등등 저기다가 true 라고 넣어주면 스크린 리더기가 알아서 다 말해준다.
여담으로 나도 이 위젯이 잘 동작이 되는가 테스트를 위해 AVD 에서 TallBack 속성을 켜고 사용해 봤는데 잘 읽어준다.
안드로이드에서는 이렇게 Use TalkBack 키면 동작이 되는지 확인 가능하다.
위의 다트패드에 있는 코드를 그대로 실행시켜 보니 맨처음에는 그 앱의 이름을 읊어준다. 나 같은 경우는 프로젝트 이름에 맞게 그냥 untitled 라고 TTS 가 읽어준다.
그런 후 이렇게 읽어주는데
"Container"
"This is just Box"
"button"
이렇게 내가 적어놓은 것을 TTS 가 다 읽어준다. 그리고 밑의 사진에서 보이는 것처럼 스크린 리더기가 정상적으로 내 위젯을 선택하고 있는 모습이다.
확대해보면..
이렇게 초록색 박스로 표시가 되어 잘 인식하고 있는 것을 알 수 있다.
이렇게 Semantics 위젯에 대해서 알아보았다. 처음에도 설명했지만 사용하는 때는 커스텀 위젯이나 애니메이션, 제스처 감지를 사용하는 위젯에서 기본 Semantics 정보가 사라졌을 때, 이미지, 아이콘, 버튼 등 의미 있는 요소에 스크린 리더용 설명을 추가하고 싶을 때, 마지막으로 자동 Semantics 처리가 되지 않는 경우에 사용해 주면 되겠다. 도움이 되었길 바라며 마치겠다.
