TRIPLE 웹 일정판 트러블 슈팅 회고록

 

 

 

작년에 웹 일정판 서비스를 구현하면서 반응형 UI와 스크롤 UX와 관련된 몇 가지 이슈들이 있었는데,
그때 당시를 회고해보면서 각각의 문제 상황과 이를 해결한 방법들을 정리해보려고 합니다.

 

📌 웹 일정판 기능과 지원 범위

트리플 웹 일정판은 PC와 모바일(태블릿 포함) 환경을 타깃으로 한 웹 서비스입니다.

트리플 앱에서 생성한 일정을 트리플 유저가 아닌 사람들도 접근할 수 있는 링크를 생성해 줍니다.

 

모바일과 데스크탑 환경에서의 웹 일정판

 

트리플 앱에서 일정판 링크는 총 3가지 방법으로 공유가 가능합니다.

• 일정 링크 복사하기
• 카카오톡으로 공유하기
• 그 외 메신저 등의 방법으로 공유하기

링크를 보통 카카오톡으로 공유하기 때문에 카카오톡 인앱 브라우저를 비롯하여 전달받은 링크를 실행할 수 있는 주요 브라우저(safari, chrome, whale, firefox)까지 호환이 되어야 합니다.

또한 모바일 및 태블릿의 경우 데스크톱과는 다르게 가로, 세로모드전환이 가능하다는 것을 고려해야 합니다.

 

📌 viewport height 올바르게 계산하기

👿 문제 상황 1 - webkit 브라우저

메인 페이지의 레이아웃은 다음과 같습니다.

const PageLayout = styled.div`
  height: 100vh;
  overflow: hidden;
`

 

 

디바이스 높이값에 따라서 서로 다른 height 값을 가지기 위해 vh 를 사용했는데, webkit기반 모바일 브라우저(iOS chrome & safari)에서 하단 주소표시줄 높이만큼 스크롤이 발생하는 이슈가 발생했습니다.

주소표시줄의 높이까지 vh에 포함되어서 계산되는 현상입니다.

 

 

 

👿 문제 상황 2 - 카카오톡 인앱 브라우저

카카오톡은 채팅방으로 외부 URL 공유 시 외부 브라우저가 아니라 자사 인앱 브라우저로 페이지를 로딩합니다.

카카오톡 인앱 브라우저에서 가장 큰 문제는 내장 브라우저의 하단 상태바가 스크롤 방향에 따라 노출 여부가 결정되며 이 과정에서 viewport를 resize 한다는 것입니다. 이로 인해 viewport unit 계산이 까다로워집니다.

 

잘 알려진 이슈라서 그런지 카카오톡 개발자 센터에 이미 비슷한 이슈가 여럿 존재하는데,

카카오 내부 서비스에서도 resize 이벤트를 감지하는 방식으로 대응한다고 합니다.

 

devtalk.kakao - 인앱브라우저 하단바 사라짐

인앱브라우저 하단바 사라짐

 

💡 문제 해결 - vh unit 직접 계산하기

위 문제를 해결하는 한 가지 방법은 vh 유닛을 직접 계산하는 것입니다.

윈도 resize 이벤트가 발생할 때마다 브라우저 내부 높이값을 계산하고 이를 이용해서 vh 를 계산합니다.

모든 resize 이벤트마다 콜백이 실행되는 것이 성능 이슈가 우려되어 디바운스를 함께 적용했습니다.

 

import { useEffect, useLayoutEffect } from 'react'
import { debounce } from './utils'

export const VH = (unit: number) => `calc(var(--vh, 1vh) * ${unit})`

const useIsomorphicLayoutEffect =
  typeof window !== 'undefined' ? useLayoutEffect : useEffect

export function useAdjustVhUnit() {
  useIsomorphicLayoutEffect(() => {
    const setVhUnit = debounce(() => {
      const vh = window.innerHeight * 0.01
      document.documentElement.style.setProperty('--vh', `${vh}px`)
    }, 100)

    setVhUnit()
    window.addEventListener('resize', setVhUnit)
    return () => window.removeEventListener('resize', setVhUnit)
  }, [])
}

 

이제 사용하는 쪽에서 vh 단위를 계산된 결과를 사용할 수 있도록 변경합니다.

 

const PageLayout = styled.div`
  height: ${VH(100)};
  overflow: hidden;
`

 

 

이제 vh 가 올바르게 계산되는 것을 확인할 수 있습니다.

스크롤을 페이지 최상단까지 올렸을 때 페이지 새로고침이 가능해졌습니다.

 

반응형 UI 가 적용된 airbnb는 어떻게 처리하고 있을까 궁금해서 개발자 도구로 뜯어보니 이미 이 방법을 사용하고 있더라고요.

 

airbnb 도 custom vh unit 을 사용중이다.

 

 

💡 참고 - 신규 css 스펙 사용하기

webkit 브라우저 내에서 vh 이슈는 이미 꽤나 널리 알려진 이슈인데,
최근에 크로스 브라우징을 지원하게 된 dynamic viewport 옵션을 사용하면 쉽게 해결할 수 있을 것 같습니다.

구버전 safari 가 얼른 fade-out 되길 빌어봅니다. 🙏

 

The large, small, and dynamic viewport units

크고 작은 동적 표시 영역 단위  |  Blog  |  web.dev

 

📌 intersection observer 사용 시 sticky 영역 함께 고려하기

🔥 기대 동작

웹 일정판은 모바일 디바이스 (혹은 모바일 사이즈 브라우저)에서는 지도뷰를 sticky 영역으로 함께 노출합니다.

또한 사용자가 현재 보고 있는 일정을 시각적으로 판단할 수 있도록 하기 위해서 리스트 상단 영역과 교차되는 리스트 아이템에는 배경색 강조 처리를 하고 있습니다.

 

 

👿 문제 상황

기기의 너비 및 높이가 줄어드는 상황 (landscape & portrait 모드 변경 포함) 혹은 모바일 환경에서 지도를 열고 닫는 여부에 따라서 intersection observer의 root margin 변경이 필요했습니다.

 

💡 문제 해결 - scroll observer & detector 구현하기

root 요소를 지정하고 sticky 영역을 고려한 root margin 설정을 도와주는 컴포넌트를 구현하겠습니다.

스크롤 루트를 지정하는 observer와 스크롤링을 감지할 detector 컴포넌트로 구분합니다.

이후부터는 가독성을 위해 의사코드 형식으로 정리하겠습니다.

먼저 observer 는 scroll spy 엘리먼트를 가지고 있는 컴포넌트입니다.

 

export function ScrollObserver() {
    return (
    <ScrollObserverProvider>
      <ScrollDetectorProvider>
                <SpyContainer>{children}</SpyContainer>
             </ScrollDetectorProvider>
    </ScrollObserverProvider>
    )
}

function SpyContainer({ children }) {
  const { observer, setObserver } = useScrollObserverContext()

  return (
    <Container
      id={SCROLL_ROOT_ID}
      ref={($el) => {
        if (!observer && $el) {
          setObserver($el)
        }
      }}
      css={{ overflow: 'scroll', height: '100%' }}
    >
      {children}
    </Container>
  )
}

 

scroll root로 지정할 엘리먼트에 SCROLL_ROOT_ID 에 해당하는 ID 값을 할당해 주는 것입니다.

이 ID 값을 이용해 다음 파트에서 진행될 useScrollIntoView 훅을 구현합니다.

우리는 일정 리스트 영역을 스크롤 대상으로 감지할 것이기 때문에 해당 컴포넌트를 ScrollObserver 로 감싸게 됩니다.

 

function View() {
  return (
            <ListLayout>
        <ScrollObserver>
          <PlanListView />
        </ScrollObserver>
      </ListLayout>
  )
}

 

이제 detector 를 구현해 보겠습니다.

detector는 지도의 노출여부와 scroll root의 높이 변경을 감지해서 root margin 재산정이 가능해야 합니다.

 

scroll root는 브라우저 크기 변경에 따라 높이가 변경될 수 있습니다.

이는 곧 사용자에 의해 임의로 브라우저 크기가 조절되거나 landscape, portrait 모드 변경에 의해 발생합니다.

이를 위해 ResizeObserver 혹은 resize event handler 중 하나를 선택해야 했고, 좀 더 적용이 편리했던 resize 이벤트 핸들러를 디바운스를 함께 사용했습니다.

 

function ObserveDetector({
  children,
  threshold = 0.4,
  observer,
  onIntersect,
}: PropsWithChildren<ObserveDetectorProps>) {
  const { showMiniMap, disabled } = useScrollDetectorContext()

  const [rootMargin, setRootMargin] = useState<string>()

  useEffect(() => {
    const setObserverRootMargin = debounce(() => {
      if (observer) {
        const OBSERVER_ROOT_HEIGHT = observer.getBoundingClientRect().height
        const STICKY_HEIGHT = getStickyElementHeight()

        const topMargin = STICKY_HEIGHT
        const bottomMargin =
          OBSERVER_ROOT_HEIGHT - STICKY_HEIGHT - OBSERVER_HEIGHT

        setRootMargin(`${-topMargin}px 0px ${-bottomMargin}px`)
      }
    }, 300)

    setObserverRootMargin()

    window.addEventListener('resize', setObserverRootMargin)
    return () => window.removeEventListener('resize', setObserverRootMargin)
  }, [observer, showMiniMap])

  const handleChange: ChangeHandler = useCallback(
    ({ isIntersecting }) => {
      if (isIntersecting) {
        onIntersect?.()
      }
    },
    [onIntersect],
  )

  return (
    <IntersectionObserver
      root={observer}
      rootMargin={rootMargin}
      threshold={threshold}
      disabled={disabled}
      onChange={handleChange}
    >
      <div>{children}</div>
    </IntersectionObserver>
  )
}

 

detector 의 사용 예시입니다.

일정 아이템 중 항공권 에 detector 를 적용한 예시입니다.

ObservedFlightItem 의 상위 컴포넌트에서는 일정 데이터를 순회하며 아이템을 리스트 UI로 구성합니다.

 

function ObservedFlightItem({
  onIntersect,
  ...rest
}) {
  const { observer } = useScrollObserverContext()

  return (
    <ObserveDetector observer={observer} onIntersect={onIntersect}>
      <FlightItem {...rest} />
    </ObserveDetector>
  )
}

 

📌 특정 엘리먼트 위치로 스크롤링하기

🔥 기대 동작

날짜가 변경되거나 지도뷰에서 특정 POI를 선택한 경우 해당 POI로 리스트 뷰의 스크롤 위치를 변경해야 합니다.

 

 

👿 문제 상황

표준 웹 스펙에는 scrollIntoView 라는 인터페이스가 있습니다.

부모 컨테이너 내에서 특정 자식요소가 사용자에게 노출될 수 있는 위치까지 스크롤해주는데,
문제는 sticky 영역은 스크롤을 위한 offset 계산에서 제외된다는 것입니다.

이 때문에 스크롤이 덜 된 위치로 이동하게 되는 상황이었습니다.

 

💡 문제 해결 - use-scroll-into-view hook 구현하기

특정한 부모를 기준으로 자식 요소가 화면에 노출되도록 스크롤해주는 함수를 구현해 봅시다.

이를 위해 스크롤 부모 요소를 scroll root, 자식 요소를 child 로 부르겠습니다.

 

import { SCROLL_ROOT_ID, STICKY_ID } from './constants'

export function scrollIntoView({ childId, offset = 0 }) {
        const $scrollRoot = document.getElementById(SCROLL_ROOT_ID)
    const $targetChild = document.getElementById(childId)

    if (!$scrollRoot || !$targetChild) {
      return
    }

    const currentScrollOffset = $scrollRoot.scrollTop
    const targetScrollOffset = $targetChild.getBoundingClientRect().top
    const stickyHeight = getStickyElementHeight()
    const scrollOffset =
      currentScrollOffset + targetScrollOffset + offset - stickyHeight

    $scrollRoot.scrollTo({
      top: scrollOffset,
      left: 0,
    })
}

export function getStickyElementHeight() {
  return document.getElementById(STICKY_ID)?.getBoundingClientRect().height || 0
}

import { useCallback } from 'react'

import { LAYOUT } from '@/plan/constants'

import { useScrollIntoView, useIsMobileMedia } from '.'

export function useScrollIntoPlan() {
  const scrollIntoView = useScrollIntoView()
  const { isMobileMedia } = useIsMobileMedia()

  const scrollIntoPlan = useCallback(
    (planId: string) => {
      const offset = isMobileMedia
        ? LAYOUT.CONTROL_HEADER.HEIGHT + LAYOUT.MOBILE_MAP_EXPANDER
        : LAYOUT.CONTROL_HEADER.HEIGHT

      scrollIntoView({
        childId: planId,
        offset: -offset,
      })
    },
    [scrollIntoView, isMobileMedia],
  )

  return scrollIntoPlan
}

 

이제 특정 위치 선택 시 핸들러 내부에서 scrollIntoPlan 을 호출해 주면 됩니다.

이외에도 날짜 탭 선택 시 특정 날짜로 리스트를 이동하는 use-scoll-into-day 훅도 구현해서 사용했습니다.

 

웹 좌표 시스템을 이해하며 특정 Element로 스크롤하는 방법

웹 좌표 시스템을 이해하며 특정 Element로 스크롤 하는 방법