2025.08.25

안녕하세요. 토스 인터랙션 팀의 Frontend UX Engineer (Interaction) 포지션에 관심 가져주셔서 정말 감사드려요. ☺️

인터랙션 라이브러리 구현에 흥미를 느끼는 개발자분들을 꼭 만나뵙고 싶어 이번 과제를 준비했어요.

이런 구현을 처음 해보시는 분들도 괜찮아요. 과제를 보고 ‘재밌어 보이는데?’ 싶으시다면, 부담 갖지 말고 편하게 도전해 주세요!

<aside> ⚠️

이 과제의 저작권은 주식회사 비바리퍼블리카에 있으며, 지원자는 오로지 채용을 위한 목적으로만 이 문제를 활용할 수 있습니다. 이 과제의 전부 또는 일부를 공개, 게재, 배포, 제3자에게 제공하는 등의 일체의 “누설 행위”에 대해서는 저작권법에 의해 민・형사상의 책임을 질 수 있습니다. 이 “누설 행위"에는 과제의 문구를 변형하여 그 취지를 알 수 있도록 하는 경우도 포함됩니다.

</aside>

텍스트 애니메이션 구현체 만들기

initial.gif

어떤 텍스트에도 미리 정의된 모션을 쉽게 적용할 수 있는 재사용성 높은 구현체를 만드는 과제예요.

아래 모든 요구 사항을 충족하며 제공된 영상과 똑같이 동작하도록 완성해주세요.

<aside> ⏱️

예상 소요 시간은 6시간이고, 제한 시간은 24시간을 드려요.

</aside>

요구 사항

  1. TypeScript와 React Native를 사용해서 재사용 가능한 구현체를 만들어주세요.
  2. 텍스트가 들어가는 모든 요소에 쉽게 적용할 수 있어야 해요.
  3. 기본 모션 프리셋으로 Fade와 Slide 2가지를 제공하고, 추후 새로운 프리셋 추가가 용이한 구조여야 해요.
  4. 모션 프리셋별로 character, word, line 단위 적용을 모두 지원해야 해요.
  5. 이 외 요구사항은 서류 전형 합격 후, 과제 전형 시작 시 더 자세히 안내드릴 예정이에요.

제공 파일

image.png

시작하시기 쉽도록, 과제 전형 시작 시 기본 화면이 구현되어있는 파일을 제공해드려요.