[CSS] transform: translate 활용 예제(1) :: 마이구미

이 글은 CSS 속성 중 transform: translate 를 활용한 예제를 살펴본다.
translate 사용 사례의 하나를 설명한다.
속성의 설명보다는 이 속성을 활용하여 어떻게 적용할 수 있는지에 대한 아이디어라고 생각하면된다.
MDN - https://developer.mozilla.org/en-US/docs/Web/CSS/transform-function/translateX
활용 예제 - https://codesandbox.io/s/horizontal-scroll-list-wddzp4

 

사실 어떻게 보면 translate 를 활용한 예시는 크게 도움이 되지 않을 수 있다.

하지만 이 글을 남기게 된 이유는 UX 적으로도 남기고 싶은 내용이 있어서다.

끝까지 읽어보길 바란다.

 

CSS transform 속성은 2D, 3D 변형을 엘리먼트에 적용할 수 있게 도와준다.

많이 사용하는 transform 속성의 함수 중 하나로써, translate() 는 유용한 함수이다.

이 함수는 x, y 축을 기준으로 이동할 수 있는 기능이다.

 

x, y 축을 기준으로 이동하는 것은 position: absolute 와 함께 top, left 속성을 떠올릴 수도 있다.

같은 결과를 낼 수 있으나 목적은 다르다. (https://mygumi.tistory.com/238)

어쨌든 x, y 축을 기준으로 엘리먼트를 이동시킬 수 있다.

 

또 하나 떠올릴 수 있는 것은 스크롤바(ScrollBar) 를 생각할 수 있다.

스크롤바를 활용한 하나의 예제를 보자.

 

 

리스트 컨테이너 영역에 스크롤바를 이용하여 좌우로 이동할 수 있게 된다.

컨테이너의 스크롤바 좌표에 의해 보여지는 리스트 아이템의 위치가 정해진다.

 

<div class="container" style="overflow-x: scroll"}> // scrollLeft = 113
  <div class="item">1</div>
  <div class="item">2</div>
  <div class="item">3</div>
  <div class="item">4</div>
</div>

 

 

기본적으로 컨테이너의 scrollLeft 값은 0 일것이고, 오른쪽으로 이동할때마다 값은 증가한다.

컨테이너의 스크롤 좌표에 의해 리스트 아이템들의 노출이 결정되는 것을 확인할 수 있다.

 

스크롤바를 사용하지 않고, translate() 를 활용해서 같은 결과물을 만들어낼 수 있다.

컨테이너에서 사용한 좌표(scrollLeft) 를 translateX 를 이용한 좌표로 변경하면 된다. 

컨테이너의 scrollLeft 가 아닌, 컨테이너의 translateX 가 되는 것이다.

 

<div class="container" style="overflow-x: scroll"}> // scrollLeft = 113
  <div class="item">1</div>
  <div class="item">2</div>
  <div class="item">3</div>
  <div class="item">4</div>
</div>

<div class="container" style="transform: translateX(-113px);">
  <div class="item">1</div>
  <div class="item">2</div>
  <div class="item">3</div>
  <div class="item">4</div>
</div>

 

 

translateX 와 scrollLeft 의 절대값은 같겠지만, translateX 는 마이너스를 통해 오른쪽에 배치한 아이템들을 노출할 수 있다.

 

 

결과적으로 두 방식 모두 원하는 결과물을 만들 수 있다.

하지만 두 방식은 서로 다른 차이점이 존재한다.

 

차이점을 알기 위해 직접 예제를 확인해보자.

예제는 터치 이벤트를 기준으로 작성되어서 모바일 모드에서 테스트하면 된다.

(두 방식의 차이점에 대해 더 명확한 이해를 위해 터치 이벤트(모바일)를 기준으로 구현되었다.)

 

 

 

translateX 는 드래그와 드랍 사이의 거리(터치 시작과 끝)를 기반으로 이동거리를 결정된다.

scrollLeft 는 위와 같다.

하지만 추가로 터치 강도 or 제스처에 의해서도 이동거리가 달라질 수 있다.

 

이것이 의미하는 것은 UX 적으로 엄청난 차이를 가지게 된다.

흔히 x 축으로 나열된 상품 리스트를 예를 들어보자.

우리는 스와이프와 같은 제스쳐로 상품들을 빠르게 넘기는 기능을 많이 사용한다.

스크롤바의 예제의 경우에는 스스륵 빠르게 여러개의 아이템이 넘어간다.

반대로 translateX 의 예제는 스와이프 제스처는 드래그와 드랍 사이의 거리가 짧기 때문에 빠르게 넘어갈 수 없다.

이것은 UX 와 밀접한 관계가 있기에, 간과해서는 안되는 사항으로 이어지게 된다.

목적과 의도에 맞게 구현 방식을 검토해야한다.

 

물론 translateX 를 활용하더라도 스크롤바와 같은 행위를 이끌어 낼 수 있다.

의도와 상황에 맡게 UX 적으로 고민하지 않았다면, 위 예제처럼 단순하게 구현하게 될 것이라는 의미라고 이해하면 된다.

 

활용 예제 코드 2

https://codesandbox.io/s/imageviewer-dggfpp?file=/src/App.tsx