[반응형 디자인 / 개발] Pointer / Hover / Virtual Keyboards / Autocomplete / User Interfaces

Pointer

three possible values with the pointer

1. none
   keyboard
2. coarse
   touch screen
3. fine
   mouse or stylus

Do

button {
  padding: 0.5em 1em;
}
@media (pointer: coarse) {
  button {
    padding: 1em 2em;
  }
}

Don't

@media (pointer: fine) {
  button {
    padding: 0.25em 0.5em;
  }
}

아무리 마우스나 스타일러스를 사용한다 하더라도, 무작정 크기를 줄이는 것은 좋지 않다.
Fitts's law에 따르면 그렇다고 한다.

Any pointer

여러 pointer를 지니는 기기가 얼마든지 존재할 수 있다.
ex) 트랙패드와 터치스크린 모두 탑재한 랩탑
다음 중, 하나의 pointer라도 해당된다면 css block 내용이 적용될 것이다.
물론 여러 경우 모두에 해당한다면, 마지막에 작성한 내용이 적용되는 기본 규칙은 동일하다.

@media (any-pointer: fine) {
  button {
    padding: 0.5em 1em;
  }
}
@media (any-pointer: coarse) {
  button {
    padding: 1em 2em;
  }
}

Hover

hover media 특성은 primary input 메커니즘이 어떤 요소 위에 hover를 할 수 있는지를 보고한다.
마우스나 트랙패드를 통하여 커서가 스크린에 존재하는 경우를 보통 의미한다.
hover media 특성은 두 가지로 존재한다. hover or none으로.
primary input device가 hovering이 가능하다면 hover, 아니라면 none으로 나타난다.

button .extra {
  visibility: visible;
}
@media (hover: hover) {
  button .extra {
    visibility: hidden;
  }
  button:hover .extra {
    visibility: visible;
  }
}

위와 같은 경우라면 .extra 클래스 요소가 hover에서는 표시되겠지만, 키보드를 통해서 focusing이 된 경우에는 표시되지 않을 것이다. 이런 문제를 해결하기 위해선 두 가지 interaction을 조합하도록 한다.

button .extra {
  visibility: visible;
}
@media (hover: hover) {
  button .extra {
    visibility: hidden;
  }
  button:is(:hover, :focus) .extra {
    visibility: visible;
  }
}

Any hover

hover media query는 오직 primary input mechanism에 대해서만 보고한다. 어떤 기기들은 다수의 입력 메커니즘을 가진다: 터치스크린, 마우스, 키보드, 트랙패드.

any-pointer와 마찬가지로 any-hover는 어떤 입력 메커니즘이라도 hovering이 가능하다면 true가 된다. 이런 특성을 역으로 이용하면, 어떤 입력 메커니즘도 hover가 불가능한 경우에 대해서 스타일링이 가능하다. 아래의 예시는, 만약 어떤 입력 메커니즘도 hover가 불가능하다면, 기본적으로 extra 클래스에 대해서 visible하게 만드는 것이다.

button .extra {
  visibility: hidden;
}
button:hover .extra,
button:focus .extra {
  visibility: visible;
}
@media (any-hover: none) {
  button .extra {
    visibility: visible;
  }
}

Virtual Keyboards

가상키보드는 기본적으로 input 타입에 반응적이다.

<label for="email">Email</label>
<input type="email" id="email">

<label for="number">Number</label>
<input type="number" id="number">

<label for="tel">Tel</label>
<input type="tel" id="tel">

<label for="url">URL</label>
<input type="url" id="url">

Input modes

Autocomplete

autocomplete 속성은 사용자에게 form을 채움에 있어 옵션을 제공함으로써 사용성을 높인다.
자동완성을 제공하기 위해서는 다음 조건을 만족해야한다.

1. name 또는 id 특성 존재
2. <form> 요소의 자손일 것
3. form에 submit 버튼이 있을 것

<label for="name">Name</label>
<input type="text" id="name" autocomplete="name">

<label for="country">Country</label>
<input type="text" id="country" autocomplete="country">

<label for="email">Email</label>
<input type="email" id="email" autocomplete="email">

해당 조건들을 만족했던 경우에 사용자가 입력한 값들은, 후에 비슷한 입력이 있을 경우 브라우저에서 자동완성 옵션으로 제공해준다. 주로 name을 사전에 규정한 것들 중 하나로 사용하는 것이 좋을 것 같다.

User interface patterns

Carousels

carousel은 작은 화면에서 여러 아이템들을 숨긴 상태로 표시하도록 하는 방법이다.

@media (max-width: 50em) {
    .cards {
        display: flex;
        flex-direction: row;
        overflow-x: auto;
        scroll-snap-type: inline mandatory;
        scroll-behavior: smooth;
      }
      .cards .card {
          flex-shrink: 0;
        flex-basis: 15em;
        scroll-snap-align: start; 
    }    
}

scroll-snap 속성과 함께 사용하여, 스크롤 시 조금 더 부드럽고 편리하게 사용할 수 있도록 제공한다.

또한, loading=lazy 속성을 지닌 image 요소들을 함께 사용하는 것도 좋은 예시이다.
다음은 아주 좋은 예시이다.

Data tables

데이터 테이블의 경우도 아주 좋은 인터페이스이다. 하지만 스크린이 작은 경우에 테이블이 온전히 보여지지 않을 경우가 많다.
overflow pattern으로 이를 보완할 수 있는데, 여기도 마찬가지로 scroll-snap 속성을 적용할 수 있다.
여기서 예시를 확인할 수 있다.