스크롤과 탭의 동작

개발을 할 때 스크롤과 탭을 구현해야하는데 문제가 있었다.
이전 포스트에서도 sdk를 불러오는 로딩 시간과 영역을 확보하는 과정에 관련된 글을 올렸는데 오늘은 스크롤과 탭을 구현할 때 선택한 방식과 용기를 내어 뒤엎고 다시 개발하게 된 과정에 대해 글을 써보려 한다.

두 가지의 조건을 충족하라.

1. 스크롤 할 때 해당 영역의 정보를 가진 탭이 상단에 노출되어 스크롤이 동작해야하며 스크롤된 영역에 해당하는 탭이 선택 되어야한다.
2. 탭을 클릭하면 해당 영역으로 이동해야한다.

지난번 포스트의 예시를 네이버탭에 비유하여 글을 썼으니 오늘도 이어 네이버탭에 비유하여 코드의 예시를 들어 보겠다.

처음 시도한 방법

스크롤과 탭을 개발할 때 이것 저것 찾고 그 안에서 고민을 했던 것은

• 탭 : scrollIntoView()
• 스크롤 : Observer (web api)

먼저 탭의 기능을 개발했는데 id값을 찾아 쉽게 영역을 찾는 scrollIntoViwe()를 찾아 적용하게 되었다.
스크롤은 observer를 사용하였는데, 특정 영역에 닿았을 때를 인지하기 좋은 방법이라 생각해 선택하게 되었다.
Observer를 사용한 동작 방식은 스크롤을 내릴 땐 viewport의 하단으로 읽히고 스크롤을 올릴땐 viewport의 상단 부분으로 영역을 읽어 탭이 완벽하게 동작하니 스크롤에 문제 없이 동작할 수 있을거라 생각하여 개발을 하기 시작했다.

첫 번째 실수

원인

1. 앞서 언급한 것 처럼 스크롤과 탭의 기능적인 부분을 밀접하게 고려하여 개발하지 못하고 탭을 먼저 개발한 후 스크롤을 개발한 게 문제의 원인 중 하나였다.

   탭을 먼저 개발 → 스크롤을 개발할 때 개발 완료된 탭이랑 엮기

2. 처음 구현하는 기능에 대한 충분한 테스트 없이 적용하여 예상치 못한 동작들이 발생하였다.

실수의 결과

실수의 결과는 이러했다.

1. 탭을 눌렀을 때 탭에 해당하는 영역으로 이동하지만 그 영역이 충분치 않고 상단 혹은 하단의 영역이 viewport에 들어와 노출될 때 observer의 교차점에 걸린 영역이 읽혀 스크롤 이동이 되는 문제 발생.
2. 스크롤 이동 시 상단 방향으로 스크롤하다 하단 방향으로 스크롤 할 때 observer의 특성에 따라 intersection의 위치에(상단으로 스크롤할 땐 상단의 교차지점에 닿아야하고 하단으로 스크롤할 땐 하단의 교차점에 닿아야 영역을 인지함) 닿지 않으면 탭의 ui가 선택된 형태로 변하지 않아 영역을 인지하지 않는 것 처럼 보임.

이러한 크리티컬한 문제를 흐린눈 할 수 없었다. 당장에야 큰 문제가 없어 보이고 테스트에도 해당 문제가 제기되진 않았지만 사용자가 실제로 서비스를 사용할 때 분명히 어색하다고 느낄 수 있는 부분이라고 생각했다.
그래서 주말에 따로 갈아엎는 작업을 하기로 마음 먹게 되었다.

다시 만들어보기

리서치

네이버 쇼핑은 어떤식으로 동작을 할까?

관찰하기
1. 네이버에서는 어떠한 방식으로 탭과 스크롤을 작동시키고 어느 intersection에 닿을 때 탭이 움직이는지
2. 개발자 도구를 열어 어떤 식으로 이동하는지 힌트 찾기

• 하나의 교차 지점
  동작을 확인했을 때 observer를 통해 개발했을 때와 다르게 상단 탭을 intersection으로 잡아 동작하는 방식으로 개발이 되어있는 것을 확인할 수 있었다.
  하나의 intersetion을 잡아 개발했을 때 앞선 오류를 방지할 수 있었는데 스크롤의 방향에 따라 intersection이 상단 혹은 하단으로 정해지는 observer와는 다르게 스크롤 방향에 상관 없이 하나의 intersection에 닿는 위치에 따라 탭이 변경되어 보다 동작이 정리되어 보이고 어색함이 느껴지지 않았다.
• 링크를 통한 이동
  네이버에서는 탭에 a태그를 사용해 위치를 이동시켰다. a태그를 사용하지만 href에 #을 주어 현재 페이지의 특정 위치 (id가 지정된 영역)를 가리킨다. 이것은 주로 페이지 내의 내비게이션에 사용되며 해당 위치로 스크롤 되게 한다고 한다.
  

리서치를 바탕으로 방법 고안

네이버에서는 a 링크를 사용하였는데 찾아보니 장점으로는 간단한 구현과 뒤로가기 클릭시 이전 위치로 이동 등이 있었다. 내가 구성해야하는 기능의 기획에는 필요하지 않은 기능이었기에 ref를 사용해 해당 돔에 접근하는 방식을 선택하게 되었다.
sdk를 사용하여 불러오는 영역의 관리를 보다 쉽게 하기 위해서도 더 적합하다는 판단이 들었기 때문이다.

두번째 시도한 방법

• 탭 : scrollIntoView()
• 스크롤 : ref로 해당 영역을 잡아 scrollTop와 offsetTop등의 값으로 영역의 위치를 잡아 비교하여 처리

상단의 intersection에서 감지되어 탭과 스크롤이 자연스럽게 잘 동작하는 것을 확인할 수 있다!