Intro.

DEVOCEAN 영, 오픈랩의 프로젝트 아카이브

왜 애니메이션이 필요했을까?

“DEVOCEAN 영, 오픈랩은 어떤 분위기의 조직이고,

어떤 프로젝트들이 있었는지를 감각적으로 느끼게 해야 한다.”

왜 Framer Motion을 선택했을까?

• React 친화적: 컴포넌트 내부에서 상태 기반으로 선언적으로 애니메이션을 구성할 수 있음
• 직관적인 API: initial, animate, whileInView 등 이해하기 쉬운 키워드
• 유연한 동작 제어: viewport 옵션으로 스크롤 진입 시 애니메이션 조절 가능
• 협업 친화성: 선언형 구조로 디자이너/기획자와의 커뮤니케이션이 쉬움

1. SectionOne: 이미지가 스크롤에 반응하며 등장하는 시작점

정적인 페이지에 첫 인상을 심다

Devocean 로고 이후 등장하는 키 비주얼 3종

• devocean_developers.png
• devocean_devotion.png
• devocean_tech.png

<motion.img
  src="..."
  initial={{ opacity: 0, x: ±400 }}
  whileInView={{ opacity: 1, x: 0 }}
  transition={{ duration: 1.1~1.4, ease: 'easeOut' }}
  viewport={{ once: false, amount: 0.1 }}
/>

스크롤 기반 트리거 + 자연스러운 트윈

• whileInView를 사용해 스크롤 진입 시마다 반복적으로 트리거되도록 설정
• x: 400 → 0 또는 x: -400 → 0으로 부드러운 슬라이딩
• ease: "easeOut"으로 출현 시 속도가 자연스럽게 느려짐
• viewport.amount: 0.1로 10%만 보여도 애니메이션 시작

디자인/UX 협업 포인트

• 디자이너와 함께 등장 방향과 타이밍을 맞추는 것이 중요했습니다.
  → x 방향 값과 duration, delay 등을 미세 조정하며 시안과 일치시킴

2. SectionTwo: 가치관을 이미지와 함께 살아 움직이게 만들기

DEVOCEAN이 믿는 ‘문화·기술·사람’의 가치, 어떻게 시각화할까?

세 개의 카드가 한 줄로 움직이며 등장

• 문화, 기술, 사람

<motion.div
  initial={{ opacity: 0, y: 100, scale: 0.8 }}
  whileInView={{ opacity: 1, y: 0, scale: 1 }}
  transition={{
    duration: 0.8,
    ease: [0.68, -0.55, 0.265, 1.55],
    delay: 0.1 ~ 0.5,
  }}
  viewport={{ once: false, amount: 0.3 }}
>

핵심 포인트

• y 위치를 조정하며 아래에서 등장하는 자연스러운 흐름 구현
• scale 속성을 활용해 크기 변화가 있는 등장 방식으로 몰입감 강화
• 각 요소마다 delay를 다르게 설정해 순차적으로 등장
• 특정 스크롤 비율(30%) 진입 시 시작되도록 설정

협업 및 연출 포인트

• 디자이너와 함께 카드별 등장 순서와 타이밍을 구체적으로 설정
• 세 개가 한꺼번에 등장하면 부담스러울 수 있어 delay를 분산 배치
• 개발자에게 친숙한 ease 값을 직접 설정하며 튀지 않고 부드럽게 조정

3. SectionThree: 입체적으로 배치된 파트너 카드에 생동감을 더하다

정적 그리드 대신 관계와 네트워크가 느껴지는 파트너 소개

구성: 교차 배치 + 상하 이동 애니메이션

• 왼쪽 상단, 왼쪽 하단, 오른쪽 상단, 오른쪽 하단

<motion.div
  className="absolute left-0 top-0"
  initial={{ opacity: 0, y: 50 }}
  whileInView={{ opacity: 1, y: 0 }}
  transition={{ duration: 0.8, ease: "easeOut" }}
  viewport={{ once: false, amount: 0.2 }}
>

핵심 포인트

• 절대 위치 배치 + 애니메이션 조합으로 정적 그리드의 한계 극복
• 정방향과 역방향 y 이동 조합으로 위아래 리듬감 형성
• delay를 카드마다 다르게 설정해 순차적 등장 효과 구현

연출 의도

• 사용자가 한 번에 보지 않고 각 파트너에 주목할 수 있도록 유도
• 등장 타이밍을 분산시켜 시선 흐름을 카드 간 이동하게끔 설계

4. ReviewSwiper: 부드러운 자동 스크롤에 사용자 리뷰 녹이기

"저희와 함께한 사람들"의 생생한 이야기를 수면 위로

구성: react-slick + 무한 루프 + linear 속도

const settings = {
  infinite: true,
  slidesToShow: 4,
  slidesToScroll: 1,
  autoplay: true,
  speed: 10000,
  autoplaySpeed: 0,
  cssEase: 'linear',
  arrows: false,
};

핵심 포인트

• linear easing으로 부드러운 흐름 유지
• autoplaySpeed를 0으로 설정하여 무정지 슬라이드 구현
• .custom-gradient-overlay를 사용해 양 끝 페이드 효과도 추가

.custom-gradient-overlay {
  position: absolute;
  left: 0;
  right: 0;
  height: 100%;
  background: linear-gradient(
    to right,
    rgba(13, 24, 43, 1) 0%,
    rgba(13, 24, 43, 0) 20%,
    rgba(13, 24, 43, 0) 80%,
    rgba(13, 24, 43, 1) 100%
  );
  z-index: 10;
}

연출 의도

• 마치 사용자들의 목소리가 물결처럼 흘러가는 듯한 인상 전달
• 한 명 한 명의 리뷰에 자연스럽게 눈이 머무르도록 유도
• 시선을 양 끝으로 흘려보내며 리듬감 있는 마무리 형성

적용 결과

• 사용자는 클릭 없이도 다양한 리뷰를 수동적으로 경험 가능
• 인터랙션 없이도 사용자 존재감과 신뢰도를 자연스럽게 전달

마무리: 작지만 유의미한 전환의 힘

전환이 주는 감각적 설득력

• 페이지를 스크롤할수록 요소들이 자연스럽게 등장하며
  사용자는 지금 뭔가가 펼쳐지고 있다는 몰입을 경험합니다.
• 리뷰가 스르륵 지나가고, 파트너 로고가 차례로 나타나는 흐름 속에서
  저희는 텍스트만으론 담기 힘든 감정을 함께 전달할 수 있었습니다.

기술보다 중요한 건 의도를 연결하는 감각

다음 프로젝트에 참고할 수 있는 포인트

• 단순한 등장/퇴장도, 위치 변화 + 투명도 조합으로 몰입감 상승
• 반복되는 구조일수록 지연 시간 차등 적용 으로 생동감 부여
• 콘텐츠 흐름이 빠를수록 linear easing으로 시선 안정화
• 애니메이션은 항상 스크롤 위치와 연동 해서 자연스럽게 제어

마무리하며