UI 설치에 주의해야 할 사항

이 글은 READYFOR Advent Calendar 2020 9일째 되는 글이다.
READYFOR 전단의 업무 위탁으로 참가한다.
현재 나는 설계 시스템을 이용하여 SPA 구성 요소의 설치 작업을 하고 있다.
웹 UI 구성 요소(이하 UI)를 설치하는 과정에서 개인적으로 중요하게 생각하는 사항을 LT 회의에서 발표했다.이번에는 내용과 덧붙인 내용을 기사로 소개하겠습니다.

예: 버튼 UI 설치 시 고려할 사항

다양한 상하문이 있어야 한다고 생각합니다. 우선'링크로서의 버튼'인지,'이동을 위한 버튼'인지,'발송하는 버튼'인지 고려해야 합니다.

<button> 버튼의 상황입니다.

지정type

지정하지 않으면 기본적으로 확정submit(발송)되므로 설정

disabled의 고려 사항

링크 버튼과 달리 작동, 작동이 가능하지만 설정 가능

작동이 불가능할 때의 스타일은 어떠한가

onClick의 행위

keydownFirefox에서 공간을 두 번 조작하는 오류를 고려하면 주의해야 한다

기본 스타일에 대한 고려 사항 제거

apperance: none; 외에 필요에 따라 리셋border,background-color,margin 등padding 필요

<a> 단추로 고려할 때

하이퍼링크로 시각적으로 인식되는지 여부

아니다<button>로 판별할 수 있는

따로 사용한 곳이 있는지(유용의 위험성이 있는지)

Storybook 등 구성 요소 목록을 통해 관찰할 수 있는지 여부

사용 사례가 있으면 더욱 좋습니다

존재 여부href

마이그레이션 대상 URL이 있는지 여부

존재하지 않으면 링크에 초점을 맞출 수 없음

단추로서의 공동 고려

링크 또는 동작, 버튼 전송 시 공통 고려 사항

제어 초점 대강

제거 여부outline

호바 상태와 분리할지 여부

눌렸을 때(active)의 외관과 상태는 어떻습니까

버튼에 텍스트 정보가 포함되어 있는지 여부

아이콘만 포함된 경우aria-label

<span class="icon-search" aria-label="Search"></span>

대개 하나의 예이다.수요를 더 늘리면 더 많은 고려가 있을 것이다.

왜 굳이 고려하지 않으면 안 되는가

화면에 단일 UI 디자인을 적용할 때 경우에 따라 다릅니다.
이것은 나의 경험이다. ~Link 라고 명명된 UI 디자인이 있기 때문에 당초에 <a> 실시되었다.
하지만 이게 실제 화면에 적용되면'클릭해서 켜거나 끄기 모드'로 사용된다.
상호작용으로 하는 것이 가장 좋다<button>.
만약 이것이router로 URL로 전환되는 경우<a>도 가능하다.
또 대응조치<a>로도 수정role 등이 가능하다.하지만 이보다 <button>로 실시하면role 변경할 필요가 없기 때문에 설치 원가로 비교적 싸다.
그래서 나는 이 UI를 도대체 어떻게 하는지 공통적으로 해석하는 것이 좋다고 생각한다.
이렇게 되면 쌍방의 교류 원가도 사라지고 순조롭게 개발할 수 있으며 더욱 광범위한 사용자를 커버할 수 있다.
물론 업무상 일이니 일정이나 비용 문제도 생길 수 있으니 혼자 뛰는 것보다 어느 정도의 물건이 필요한지 함께 의논하는 게 좋을 것 같다.

의미로서'필요없다'는 고려를 줄일 수 있다

참고로 위에서 언급한 단추 UI는 a 라벨과 button 라벨이 아니라div

<div>Button</div>

물론 이 하나만으로는 버튼으로서의 기능을 확보할 수 없습니다.

<div
  class="button"
  role="button"
  tabindex="0"
  onClick="ClickHandle"
  onKeyUp="KeyUpHandle"
  onKeyDown="KeyDownHandle">
  Button
</div>

최소한 이런 정보가 필요하다.

<button
  type="button"
  onClick="ClickHandle">
  Button
</button>

하지만 의미로 표현하면 그것만으로도 된다.
정확한 HTML을 선택하면 설치 비용을 줄이거나 사용하는 사용자에게 최소한의 정확한 기능을 제공할 수 있습니다.
생각할 필요가 없는 기회가 줄어들기 때문에 긍정적으로 정확한 HTML을 써야 한다는 것이다.

설치할 때 참고하는 것

UI를 설치할 때 참조하는 사항을 설명합니다.

HTML Living Standard

HTML의 규격서.포함할 수 있는 것들과 사용법을 되돌아볼 때 유용하다.

Web Accessibility Tutorials

보조성을 고려한 부품 제작 예.모든 사람이 사용할 수 있는 관점을 참고할 수 있다.

소시오 미디어 | Interface Guide

소시오 매체가 공개한 인터페이스 디자인 안내.굿과 배드라는 예도 있어 그런 실천을 따랐는지 확인할 수 있다.

UI 를 통해 배운 것

"이 UI는 도대체 무엇을 하는 것입니까?"자신의 생각을 거쳐 결론을 믿을 수 있게 하는 습관을 길렀다.
예를 들어 내용을 포함하는 것(container, wrapper)의 최대폭을 고려할 때 여러분은 어떤 기준과 판단에 따라 그 수치를 결정합니까?
웹사이트와 앱에 따른 디자인이라 절대적인 정답은 없지만내 웹 사이트 최대 글자수를 위해 고려했다.따라서 최대 너비의 수치는 ch로 설정된다.

최대 폭 정보

주요 내용의 최대 폭을 80ch로 설정하다.ch는 체인이라고 불리며 문자의 크기에 따라 변할 수 있는 단위이다.
이 설정의 장점은 장문을 읽을 수 없는 읽기 장애를 지원하는 사용자나 텍스트 크기가 커지면서 텍스트의 일부분이 부족해져 읽을 수 없는 경우를 지원할 수 있다는 것이다.
https://github.com/yamanoku/yamanoku.github.io/blob/nuxt/EXPLAINING_PORTFOLIO_SITE_ja.md#최대 폭 정보
이렇게 웹에 표현된 것의 뜻을 깊이 생각하면 그게 하나의 프레임으로 어디에서도 사용될 수 있어 쉽게 현혹되지 않는 의사 결정을 내리기 쉽다고 생각한다.

끝말

브라우저를 통해 사용자에게 더 좋은 체험을 제공하기 위해 고려하는 일과 생각하는 일이 갈수록 많아질 것이다.이런 상황에서 항상 정확한 것을 제공하는 것은 매우 어렵다.
내가 이번에 기사로 쓴 것도 잘못된 고려가 있을 수 있다.그럴 때 잘못된 부분이 있다면 바로 깨닫고 고치는 체제도 필요하다.
그리고 좋은 UI는 무엇이라고 생각하세요?생각하면서 만들었으면 좋겠어요.
내일은 토포의 보도입니다.기대 많이 해주세요.🎉🎉🎉