Figma는 브랜드 정체성을 더욱 강력하게 표현하고 웹사이트의 성능과 확장성을 근본적으로 개선하기 위해 기존의 웹 시스템을 전면적으로 개편했습니다. 단순히 시각적 디자인을 바꾸는 것을 넘어, React Server Components와 Tailwind CSS 같은 최신 기술 스택으로 전환하여 개발 효율성과 사용자 경험을 동시에 강화했습니다. 결과적으로 디자인 시스템과 엔지니어링 간의 간극을 줄이고, 변화하는 브랜드 요구사항에 유연하게 대응할 수 있는 지속 가능한 웹 인프라를 구축하는 데 성공했습니다.

새로운 브랜드 표현을 위한 'Web UI' 시스템 구축

제품 UI와는 별개로 마케팅 웹사이트의 고유한 요구사항을 충족하기 위한 전용 컴포넌트 라이브러리인 'Web UI'를 구축했습니다.
웹사이트만의 풍부한 표현력(대담한 타이포그래피, 복잡한 애니메이션 등)을 지원하기 위해 디자인 토큰 체계를 고도화하고 유연성을 확보했습니다.
Figma 디자인 파일의 변경 사항이 코드로 즉각 반영될 수 있도록 디자인과 개발 간의 워크플로우를 동기화하여 일관성을 유지했습니다.

성능 최적화를 위한 Next.js와 RSC 도입

런타임 성능을 극대화하고 개발자 경험을 개선하기 위해 Next.js의 App Router와 React Server Components(RSC)를 전면 도입했습니다.
가능한 많은 로직을 서버 측에서 처리함으로써 클라이언트가 다운로드해야 하는 자바스크립트 번들 크기를 획기적으로 줄였습니다.
이를 통해 초기 로딩 속도를 높이고 LCP(Largest Contentful Paint)를 비롯한 핵심 웹 지표(Core Web Vitals)를 크게 개선했습니다.

스타일링 효율성을 위한 Tailwind CSS로의 전환

기존 Styled Components 방식에서 발생하던 런타임 오버헤드와 복잡성을 제거하기 위해 Tailwind CSS로 전환했습니다.
유틸리티 우선(Utility-first) 접근 방식을 통해 CSS 파일 크기를 최소화하고, 전역 스타일 충돌 문제를 방지하여 유지보수성을 높였습니다.
디자인 시스템의 토큰을 Tailwind 설정에 직접 매핑하여 디자이너의 의도가 코드에 정확하고 빠르게 반영될 수 있는 구조를 마련했습니다.

유연한 콘텐츠 관리를 위한 아키텍처 개선

정적인 하드코딩 방식에서 벗어나 콘텐츠 관리 시스템(CMS)과의 연동을 강화하여 마케팅 팀이 엔지니어링의 도움 없이도 페이지를 구성할 수 있도록 했습니다.
모듈형 컴포넌트 설계를 통해 새로운 페이지를 구축할 때 기존 요소를 재사용함으로써 제작 시간을 단축했습니다.

Figma의 이번 개편 사례는 고성능 웹사이트가 단순히 빠른 로딩을 넘어 브랜드의 가치를 어떻게 효과적으로 전달할 수 있는지를 잘 보여줍니다. 성능을 타협하지 않으면서도 풍부한 시각적 경험을 제공하고자 한다면, 서버 중심의 렌더링 전략과 유틸리티 기반의 스타일링 시스템을 결합하여 디자인과 개발의 경계를 허무는 기술적 선택이 필수적입니다.