7가지 플랫폼 서버로 프론트엔드 버프 마법 걸기 (1)

FEConf2024 발표: ‘7가지 플랫폼 서버로 프론트엔드 버프 마법 걸기’/정석호 토스 코어 Frontend Infra Ops Unit Lead

안녕하세요, 정석호입니다. 프론트엔드와 인프라 관련 업무를 주도하고 있으며, 최근에는 안정성 향상에 집중하고 있습니다.

이번 글에서 다룰 내용은 다음과 같습니다:

1. 문제 해결 과정
2. 아이디어와 임팩트
3. 시행착오와 운영 이슈

토스 코어의 프론트엔드

토스 코어 팀은 86명의 FE 개발자와 250개의 서비스를 운영 중이며, 모노리포와 자동화된 IaC를 통해 효율적으로 인프라를 관리하고 있습니다.

목적은 토스의 프론트엔드 UX/DX를 세계 최강으로 만드는 것입니다.

프론트엔드 서비스 라이프 사이클

토스 코어의 UX 팀이 디자인 시스템을 구축하고, FE 개발자들은 이를 기반으로 소스 코드를 작성하여 웹 서비스로 배포합니다.

이미지 최적화 마법

Next.js 이미지 컴포넌트

Next.js의 이미지 컴포넌트는 자동 사이즈 조정, Layout Shift 방지 등의 기능을 제공합니다. 그러나 SSG 환경에서는 사용할 수 없어 이를 해결하기 위해 독립된 이미지 최적화 API를 구축했습니다.

비디오 썸네일 마법

Video 태그의 poster 속성을 비효율적으로 설정하는 문제를 해결하기 위해, 서버에서 동적으로 썸네일 이미지를 생성하는 방안을 도입했습니다.

폴리필 마법

다양한 브라우저 지원을 위해 폴리필로 부족한 기능을 제공하고, 사용자 에이전트에 맞춰 필요한 폴리필만 전송하는 서버를 구현하여 효율성을 높였습니다.

스켈레톤 마법

페이지 로딩 시 사용자 경험을 개선하기 위해, 각 페이지에 맞는 스켈레톤 UI를 표시하여 불필요한 로딩 화면을 제거했습니다.

이번 글에서는 7가지 플랫폼 서버 마법 중 4가지를 다뤘으며, 다음 글에서는 나머지 3가지 마법과 시행착오에 대해 논의할 예정입니다.