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

이번 글에서는 앞선 글의 4가지 버프 방법인 이미지 최적화, 비디오 썸네일, 폴리필, 스켈레톤 마법을 포함한 다양한 기술을 소개합니다. 먼저 애셋 마법에 대해 알아보겠습니다.

애셋 마법

토스 앱은 사용자별로 다양한 UI를 제공합니다. 이를 위해 기기별 정보가 필요한데, 네이티브 앱을 통해 정보를 수신해야 합니다.

네이티브 앱 정보

네이티브 앱에서 제공하는 기기별 정보를 활용해 웹페이지에서 대응할 수 있습니다.

HTML, CSS, JS를 로드한 후 네이티브 앱에서 정보를 동적으로 불러와 CSS를 적용하여 화면을 렌더링합니다. 이를 빠르게 처리하기 위해 동적 CSS 변수를 사용할 수 있습니다.

동적 CSS Variables

유저 에이전트를 기반으로 애셋 서버에서 CSS Variables를 동적으로 제공합니다.

예를 들어, 네이티브 앱에서 커스텀 유저 에이전트를 통해 기기별 정보를 전달하고 이를 바탕으로 CSS 변수를 설정합니다.

애셋 서버는 미리 작성한 CSS Variables를 통해 HTML 로드 직후 CSS를 적용하여 빠른 화면 전환을 이룹니다.

오픈 그래프 마법

오픈 그래프 마법은 URL 공유 시 미리 보기 이미지를 생성하는 방법입니다.

URL의 미리 보기가 바뀐다면?

제목 변경 시 이미지 및 설정을 업데이트해야하는 번거로움이 있습니다.

제목과 배경 이미지를 조합하여 해결하기

타이틀 변수를 통해 동적으로 이미지를 생성하여 효율성을 높일 수 있습니다.

이러한 방식으로 썸네일을 수정할 수 있는 방법을 제안합니다.

웹 모듈 마법

웹 모듈은 디자인 시스템에 영향력을 주며, Framer와의 통합이 중요합니다.

Framer Code Component

Framer는 React 컴포넌트를 가져와 UI를 시각적으로 확인할 수 있는 강력한 도구입니다.

Framer Code Component의 제약 사항

외부 디자인 시스템의 코드 사용 시 제한이 발생할 수 있습니다. 이를 해결하기 위해 TDS 웹 모듈을 도입했습니다.

URL을 기반으로 간편하게 컴포넌트를 불러오는 방법이 필요합니다.

자체 웹 모듈 서버를 통해 해결하여 서비스 코드에 영향을 주지 않고 생산성을 확보합니다.

구현을 위한 Cheat Sheet

이제까지 설명한 7가지 마법을 구현하기 위한 라이브러리를 정리한 목록입니다.

시행착오 (7가지 마법 절망편)

프론트엔드 기술 도입 시 여러 시행착오를 겪은 사례를 정리했습니다.

클라우드 인프라 이중화의 어려움

여러 클라우드 제공업체에 이중화 시 운영 복잡도가 증가했습니다.

Serverless Node.js 버전 따라가기

Node.js 버전 관리에서의 어려움과 주도권을 유지하기 위한 방법을 설명합니다.

API 호출 비용

급격한 트래픽 증가에 대비하여 자체 서버 운영이 필요합니다.

QueryString 기반의 API 인터페이스

QueryString을 Path 기반으로 전환하여 캐시 문제를 해결했습니다.

람다 최대 응답 페이로드 제한

6MB 이상 요청 응답 문제 해결을 반드시 고려해야 합니다.

CDN Vary Header

Vary 헤더를 사용하여 캐시 정책 정확성을 유지합니다.

절망편 정리

이중화, 버전 관리, API 호출 비용, QueryString, 응답 크기 제한 및 헤더 관리를 종합적으로 고려해야 합니다.

마치며

프론트엔드에 버프를 걸기 위한 7가지 마법을 통해 안정적이고 개발하기 쉬운 인프라를 구현하시길 바랍니다. 시행착오를 통해 알려진 문제점들을 유의하길 바랍니다.