작업중
이 과제의 저작권은 주식회사 비바리퍼블리카에 있으며, 지원자는 오로지 채용을 위한 목적으로만 이 문제를 활용할 수 있습니다. 이 과제의 전부 또는 일부를 공개, 게재, 배포, 제3자에게 제공하는 등의 일체의 “누설 행위”에 대해서는 저작권법에 의해 민・형사상의 책임을 질 수 있습니다. 이 “누설 행위"에는 과제의 문구를 변형하여 그 취지를 알 수 있도록 하는 경우도 포함됩니다.
과제에는 정해진 정답이 없으며, 주어진 요구 사항을 얼마나 정확히 파악하고 완성도 있게 구현할 수 있는지를 평가하려고 해요. 익숙한 개발 환경과 스타일 그대로 진행해 주시면 돼요.
아래 내용을 확인하신 후, 24시간 이내에 안내된 방식으로 과제를 제출해 주세요.
예상 소요 시간은 6시간이에요.
1. 과제 시작 코드
1.
아래 첨부파일을 다운로드 후 압축을 해제해주세요.
2.
아래 명령어로 프로젝트 개발 서버를 실행해주세요.
# 압축이 해제된 프로젝트 디렉토리로 이동
cd uxe-ix-assignment-2025/
# 의존성 패키지 설치. npm 또는 pnpm를 사용해도 괜찮습니다.
yarn install
# 개발 서버 실행
yarn dev
Bash
복사
3.
브라우저에서 콘솔에 표시된 주소를 열어 개발 서버에 접속해 주세요.
4.
아래 스크린샷과 같은 화면이 보인다면, 과제 시작 준비가 완료된 거예요.
2. 요구 사항 및 평가 기준
어떤 텍스트에도 미리 정의된 모션을 쉽게 적용할 수 있는 재사용성 높은 구현체를 만들어 주세요.
아래 모든 요구 사항을 충족하며, 제공된 영상과 똑같이 동작하도록 완성해 주시면 돼요.
안내되지 않은 스펙은 영상을 보고 최대한 비슷하게 구현해주세요.
주어진 요구 사항을 영상과 함께 종합적으로 파악하고, 가이드에 빠진 스펙이 있더라도 적절히 대응할 수 있는지도 평가 기준에 포함돼요.
평가 기준
•
다양한 상황에서 재사용 가능한 구조로 설계되었는지
•
모션 프리셋 구조가 확장 가능하게 설계되었는지
•
성능을 고려해서 구현했는지
•
그 외 코드 구조, 구현 완성도, 시멘틱 마크업 등 전반적인 구현 역량
공통 요구 사항
1.
TypeScript와 React를 사용해서 재사용 가능한 구현체를 만들어주세요.
2.
<div>, <span>, <p> 등 텍스트가 들어가는 모든 HTML 요소에 쉽게 적용할 수 있어야 해요.
3.
기본 모션 프리셋으로 Fade와 Slide 2가지를 제공하고, 추후 새로운 프리셋 추가가 용이한 구조여야 해요.
4.
모션 프리셋별로 character, word, line 단위 적용을 모두 지원해야 해요.
5.
모든 모션 프리셋에 in(등장)과 out(퇴장) 동작이 한 쌍으로 포함돼야 해요.
6.
재생 시점을 제어할 수 있어야 해요.
•
렌더 시 자동 재생하거나,
•
사용자 액션(버튼 클릭 등)으로 재생될 수 있어야 해요.
7.
화면 전환 시 이전 텍스트와 다음 텍스트가 자연스럽게 이어지는 모션 연출이 가능해야 해요.
첫 화면 진입 시
Top의 텍스트에 line 단위로 Slide In 모션이 적용되어야 해요.
List의 Subtitle에 line 단위로 Fade In 모션이 적용되어야 해요.
List의 Title에 character 단위로 Slide In 모션이 적용되어야 해요.
1번째 List의 모든 텍스트 모션은 0.2초 delay 후 재생되어야 해요.
2번째 List의 모든 텍스트 모션은 0.3초 delay 후 재생되어야 해요.
3번째 List의 모든 텍스트 모션은 0.4초 delay 후 재생되어야 해요.
•
Slide In, Fade In 모션 프리셋은 아래와 같이 구현해주세요.
*** Slide In ***
- opacity: 0 -> 1
- translateY: 30% -> 0%
- easing: cubic-bezier(0.16, 1, 0.3, 1)
- duration: 1.97s
- 단위별 시작 delay: index * {line별인 경우 0.1s, character별인 경우 0.04s}
YAML
복사
*** Fade In ***
- opacity: 0 -> 1
- easing: cubic-bezier(0.16, 1, 0.3, 1)
- duration: 1.97s
- 단위별 시작 delay: index * 0.1s
YAML
복사
CTA 클릭 시
Top에서 이전 문장엔 Slide Out, 새로운 문장엔 Slide In 모션이 적용되어야 해요.
CTA에서 이전 텍스트엔 Slide Out, 새로운 텍스트엔 Slide In 모션이 적용되어야 해요.
•
Slide Out 프리셋은 아래와 같이 구현해주세요.
*** Slide Out ***
- opacity: to 0
- opacity의 easing: cubic-bezier(0.25, 0.1, 0.25, 1)
- opacity의 duration: 0.3s
- translateY: to -30%
- translateY의 easing: cubic-bezier(0.16, 1, 0.3, 1)
- translateY의 duration: 0.62s
- 단위별 시작 delay: 0s
YAML
복사
3. 기술 요구 사항
•
개발 환경
◦
Node v20 이상
◦
Yarn v4 이상 또는 pnpm v8
•
기술 스택
◦
React와 TypeScript를 사용해주세요.
◦
그밖에 필요한 라이브러리가 있다면 자유롭게 활용해주세요.
•
브라우저 지원 범위
◦
크롬 환경에서 잘 작동하도록 개발해주세요.
4. 제출 방법
아래 두가지를 비공개 GitHub 저장소에 푸시한 뒤, toss-fe-interview 계정을 collaborator로 초대해주세요.
1.
결과물 코드 전체
2.
첫 화면 진입 모션, CTA 누른 후 모션이 모두 포함된 동작 영상
a.
README 파일에서 영상이나 영상의 링크를 확인할 수 있도록 제출해주세요.
b.
맥에선 cmd+shift+5를 누르고 ‘선택 부분 기록’을 눌러서 화면을 녹화할 수 있어요.
자주 묻는 질문
AI를 사용해도 되나요?
모든 AI툴을 사용하셔도 무방해요. 오히려 AI를 적절히 활용해서 최고의 결과물을 만들어낼 수 있는 분이라면 더욱 긍정적으로 평가하고 있어요. 다만 면접 때 어떤 부분에서 어떤 프롬프트를 통해 결과물을 만들어냈는지 과정을 자세히 설명해주실 수 있어야 해요. AI가 짠 코드를 본인이 짰다고 거짓말 하는건 감점 요소에요.
React가 아닌 다른 프레임워크나 Vanilla JS로 구현해도 되나요?
과제는 반드시 React 컴포넌트 형식으로 구현해주셔야 해요. 일부 구현이 Web API와 Vanilla JS로 작성되더라도, React 컴포넌트로 바인딩 해주세요. 토스 인터랙션팀의 Frontend UX Engineer는 React 기반으로 일하기 때문에, 채용 전형에서도 React 기반의 컴포넌트 설계 역량을 확인하고자 합니다.
상태 관리 라이브러리를 써도 되나요?
네, 사용해도 괜찮아요. 별도의 상태 관리 라이브러리를 사용하는 경우, 어떤 필요성이 있었고 왜 해당 라이브러리를 선택했는지 설명할 수 있어야 해요.
CSS-in-JS, Emotion, SCSS 등을 써도 되나요?
어떤 스타일링 방식이든 무방해요. 요구사항을 만족하는 정확한 스타일링이 가능하기만 하다면, 자신 있는 기술을 사용해서 일관성 있게 구현해주세요.
제출하는 코드에 주석이나 문서를 포함해도 되나요?
물론이에요. 코드가 어떤 의도로 작성되었는지, 컴포넌트 간의 관계나 중요한 로직 등을 설명하는 주석은 오히려 가독성과 의사소통 역량을 보여주는 좋은 포인트가 될 수 있어요.
제 과제물이 공개될 수도 있나요?
아니요. 과제물은 지원자 평가를 위해서만 활용되며, 그 외 목적으로는 활용되지 않아요.