아직 한 발 남았다..
2025년 Toss Frontend Assistant (Platform)에 지원하여 1차 과제, 2차 과제, 최종 면접까지 보았지만 아쉬운 결과를 받게 되었다.
하지만 다른 포지션의 면접을 제안 받았으며 그 포지션은 Homepage와 Deus 두 팀이었다.
사실 나의 경험으로는 Platform보다 Homepage가 더 어울리는 포지션이라 합격할 수만 있다면 더 좋은 기회라 생각했다.
Deus는 Figma와 같은 디자인 툴이다. Deus는 다른 글에서 좀 더 자세히 다뤄보겠다.
실패를 기회로
이번 면접은 나에게 나름 메리트가 있다. 토스의 면접을 경험해봤다는 것.
그렇기에 Platform 면접과는 다르게 더 열심히 준비하고 있다.
- 가장 먼저 Platform 면접 때 나온 내용을 다시 공부하기.
- 이 내용은 토스의 보안서약서로 인해 공개할 수 없습니다.
- Homepage 공고를 보며 어떤 것을 공부할지 정리하기
- 토스 모닥불 유튜브 및 아티클을 보며 면접관분들이 중요하게 생각하는 요소 정리하기
- 지금까지 내가 했던 프로젝트 코드를 다시 리뷰하기
공고 파헤치기
Deus 팀은 따로 공고가 올라와있지 않다고 한다.
Deus 팀은 공고보다는 관련 영상이나 아티클을 참고해보자.
아래 글에서 데우스 팀에 대해 간단하게 정리해보았다.
이번 글에서는 Homepage 공고를 집중적으로 파헤쳐보겠다.
Homepage 공고
이 세션에서는 Homepage 팀의 업무를 조사하고, 어떤 릴리즈 페이지가 있었는지 확인하자. 그리고 그 페이지에서 어떤 것이 좋고 무엇을 개선할 수 있을지 고려해보자.
합류하면 함께 할 업무예요
- 토스 커뮤니티에서 브랜딩을 위해 공개하는 인터랙티브 웹 페이지를 만들어요.
- 토스의 다양한 컨텐츠를 볼 수 있는 토스피드 웹 서비스를 개발하고 유지보수해요.
- 최근에 릴리즈한 브랜딩 페이지는 다음과 같아요. 토스 10주년, 10to100 토스 10주년 데이터 리포트
인터랙티브?
먼저 Homepage 팀에서 하는 업무를 알아보자. ‘인터랙티브 웹 페이지’? 내게 좀 생소하다.
어색한 단어에 대해서 GPT가 아니라 토스의 글을 직접 읽어보았다.
물론 토스 홈페이지와, 채용 페이지와 같이 일반적인 웹 페이지도 만든다.
즉, 인터랙티브 웹이란 3D, 애니메이션을 활용하여 좀 더 재밌고 화려한 웹이다.
사람은 화려한 것에 더 눈이 가기에 이것을 코딩으로 표현하는 것도 앞으로 정말 중요해보인다.
최근엔 스크롤 애니메이션, 전면 영상을 넘어서 새로운 기믹들을 추가해 화려함을 더하고 있다.
특히 머니북 소개 페이지에선 물리 엔진, 3D 렌더링을 활용해서 임팩트를 더했다고 한다.
토스에서 만드는 인터랙티브 웹 페이지는 복잡하고 유려한 인터랙션을 제공하기 때문에, 60fps를 보장하고 완벽한 반응형 화면을 제공하는게 중요한 미션이다.
릴리즈 페이지(1) - 토스 피드
저 위에 첨부된 링크들을 직접 들어가서 확인해보았다.
토스피드에서는 원하는 글 위에 마우스를 올려두었을 때 해당 이미지가 확대가 되는 모션이 있었다.
이 방식 덕분에 지금 내가 어느 게시글을 보려고 하는지 확 체감되었다.
이것은 내 jblog에도 구현이 되어 있어서 반갑기도 하였다. 나는 아래와 같이 tailwind로 구현을 하였다.
group-hover:scale-105
릴리즈 페이지(2) - 토스 10주년
토스 10주년 페이지를 들어가면 다음과 같은 화면을 볼 수 있다.
저 많은 사진들이 y축을 기준으로 360도로 돌면서 이미지 위에 마우스 올리면 사진이 확대된다.
나도 이런 3d 애니메이션에 관심이 많았어서 예전에 그래픽스 연구실에서도 학부연구생을 해보았다.
물론 js가 아니라 C++를 사용하였다. 나는 이걸 보며 다음과 같은 생각이 들었다.
이것을 어떻게 만들었을까?
- 내 jblog에 저런 방법으로 명함을 제작한 경험이 있다. AI와 함께 구현하였지만 방법이 유사할 수 있기에 어떻게 구현하였는지 다시 한 번 명함 코드를 리뷰해보자.
- 그리고 스크롤을 내리면서 어떻게 순서대로 애니메이션이 일어나는지 알아보자.
- 토스에서는 어떤 물리 엔진을 사용할까?
- 이런 인터랙션의 최적화는 어떻게 하는 것일까?
- 아쉬운 점을 하나 발견하였다.
- 스크롤을 내리면서 토스의 아이콘 애니메이션이 한 번 실행되었으면, 스크롤을 다시 올렸다가 내리면 그 애니메이션이 다시 일어나지 않았다.
- 어떻게 개선할 수 있을까?
이 질문들에 대한 답은 다른 글에서 자세히 작성해야겠다.
이런 분과 함께하고 싶어요
- React에 대한 충분한 이해와 사용 경험이 있으신 분을 찾아요.
- TypeScript를 활용하여 검증 가능하고 안정적인 어플리케이션을 개발하는 역량이 있으신 분을 찾아요.
- CSS와 CSS-in-JS 라이브러리를 활용하여 디자인과 일치하는 UI를 구현하는 역량이 있으신 분을 찾아요.
위 글을 읽고 다음과 같은 궁금증이 생겼다.
- React에 대한 충분한 이해가 무엇일까?
- Typescript를 활용하여 검증 가능하고 안정적인 어플리케이션을 어떻게 개발하는 것일까?
- CSS-in-JS는 무엇일까?
마찬가지로 이 질문들에 대한 답도 다른 글로 자세히 작성해야겠다.
이런 경험이 있다면 더 좋아요
- Framer Motion, GSAP 등 애니메이션을 위한 라이브러리를 사용해보신 경험이 있다면 좋아요.
- 디자인 시안과 개발한 페이지 간 1px의 오차도 불편한 디자인 감각을 가지신 분이면 좋아요.
- 브라우저에서 reflow가 일어나는 상황을 알고, 이를 최적화할 수 있는 분이면 좋아요.
여기서 중요한 것은 Framer Motion, GSAP 같은 애니메이션 라이브러리를 어떻게보다는 왜 사용했냐일 것이다.
또한 브라우저에서의 reflow는 무엇인까? 또 어떻게 최적화할 수 있을까?
정리
이렇게 토스의 채용 공고를 정리해보았다.
처음부터 끝까지 읽어보면 나는 주어진 공고에서 질문을 만들어냈다.
이 질문을 만들어내는 것이 채용 공고를 파헤치는 방법이라 생각한다.
그리고 이 질문에 꼬리에 꼬리를 물며 답을 찾는 과정이 면접 준비이자 개발자로서의 공부일 것이다.
글이 너무 길어질 것 같아서 답변들은 다른 게시물로 작성해야겠다.
질문들은 노란색 하이라이트로 칠해놨고, 게시물을 완성하는대로 링크와 함께 초록색 하이라이트로 바꾸어야겠다.
다음 게시물 요약
과연 Typescript를 할 줄 안다 할 수 있을까?
Toss Deus 해부하기
명함으로 바이킹 태우기
애니메이션 라이브러리 분석 및 비교 그리고 최적화
React 라이브 코딩 대표 질문
CSS-in-JS 라이브러리
브라우저의 reflow
마지막으로 내가 받은 토스 면접 질문들을 정확히 오픈할 수는 없지만,
위와 같은 나의 사고의 흐름이 앞으로의 면접 질문들에 큰 도움이 될 것이라 생각한다.
