[개발일지] R3F를 활용한 3D 포트폴리오 사이트 만들기 4

⚙️ 스크롤 스냅 구현

스크롤 스냅(scroll snap) ? 웹페이지에서 스크롤을 할 때, 요소가 스크롤되는 위치에 자동으로 스냅되도록 하는 CSS 속성

 

우선 스크롤 스냅을 적용할 컨테이너와, 그 안에 스냅될 컴포넌트들을 배치한다.

<S.ScrollSnapWrap>
  <S.SnapDiv>
    <Title /> // 첫 번째 화면 : 타이틀
  </S.SnapDiv>
  <S.SnapDiv>
    <Profile /> // 두 번째 화면 : 프로필
  </S.SnapDiv>
  <S.SnapDiv>
    <Skill /> // 세 번째 화면 : 스킬
  </S.SnapDiv>
  <S.SnapDiv>
    <Project /> // 네 번째 화면 : 프로젝트
  </S.SnapDiv>
</S.ScrollSnapWrap>

부모 컴포넌트에는 scroll-snap-type, 자식 컴포넌트에는 scroll-snap-align 속성을 적용해주면 된다.

 

Scroll snap 속성

1. scroll-snap-type : 스크롤 스냅이 동작하는 방식
   • 적용 방식 : scroll-snap-type : {스냅이 적용될 축} {스냅 적용 방식}
     • 스냅이 적용될 축
       • x : 가로축으로 지정
       • y : 세로축으로 지정
       • both : 모든 축을 다 사용함
     • 스냅 적용 방식
       • proximity : 스크롤 위치가 스냅 위치에 가까워지면 자연스럽게 스냅
       • mandatory : 스크롤 위치가 스냅 위치와 정확히 일치해야만 스냅
   • 세로 스크롤을 위해 스냅 축은 y로 정하고
     mandatory가 살짝만 스냅해도 바로 다음 콘텐츠로 넘어가는 게 깔끔해서, mandatory를 사용하였다.
2. scroll-snap-align : 스크롤 스냅이 적용되는 요소가 스냅 위치에 정렬되는 방식
   • 적용 방식 : scroll-snap-align : {정렬 방식}
     • none: snap position을 지정하지 않음
     • start: 스크롤 스냅 위치를 snap area 시작 부분에 맞추도록 지정
     • end: 스크롤 스냅 위치를 snap area의 끝 부분에 맞추도록 지정
     • center: 스크롤 스냅 위치를 snap area의 가운데 부분에 맞추도록 지정
   • 자식 컴포넌트의 height를 애초에 100vh으로 지정했기 때문에, start, end, center가 다 똑같은 방식으로 진행된다.

적용한 코드

export const ScrollSnapWrap = styled.div`
  scroll-snap-type: y mandatory;

  height: 100vh;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
`;
export const SnapDiv = styled.div`
  scroll-snap-align: center;
`;

 

 

적용 화면

⚙️ 그 외 구현한 것들

• prettier 코드 포맷팅 적용
• 프로필 데이터 수정

• 스킬 컴포넌트 생성 및 아이콘 렌더링

🔗 참고

https://inpa.tistory.com/entry/CSS-📚-최신-CSS-기능-🎨-CSS-Scroll-snap