FEconf 2025 핵심만 정리

2025 FEconf는 프론트엔드 개발 트렌드와 현업의 고민을 엿볼 수 있는 자리였어요. 올해는 4개의 부스밖에 없어 채용 시장의 변화를 실감할 수 있었지만 ㅠㅠ,

제가 주로 있던 A홀의 세션들은 현업의 치열한 고민을 담고 있어 매우 유익했습니다.

React Native 성능 최적화부터 비용 효율적인 OTA 시스템 구축, 차세대 CSS-in-JS, SEO 전략, 그리고 대용량 데이터 처리와 모노레포 해체까지 다양한 주제를 다루었는데요,

길고 긴 세션을 들으면서 끄적인 내용들을 정리해 봤어요, 혹시 제가 잘못 이해한 부분이나 의문이 드는 내용이 있다면 댓글 피드백은 언제든 환영입니다 :)

FEConf에 참여한 부스들

강남언니	오늘의집, moyo	aws

60FPS in React Native 성능 최적화를 위한 모험

React Native 게임 앱을 예시로, 끊김없고 부드러운 UI(60FPS)를 달성하기 위한 다양한 방법을 소개했어요.

성능 측정과 분석
React Native의 자체 성능 모니터를 활용하여 RAM, Views, 그리고 UI/JS Thread FPS 지표를 확인 할 수 있는데요,

특히, 1프레임을 16.67ms 안에 처리하여 두 스레드 모두 60FPS에 가깝게 유지하는 것이 목표입니다.

• RAM 앱의 메모리 사용량
• Views 렌더링된 뷰의 개수. 불필요한 뷰를 줄이는 것이 중요합니다.
• UI/JS Thread FPS: 각 스레드의 초당 프레임 수. 두 스레드 모두 60에 가까울수록 부드러운 화면을 제공합니다.

리렌더링 최적화
불필요한 리렌더링은 JS 스레드에 부하를 주어 성능을 저하시키는 주범이에요.

• 리렌더링 범위 축소 하기
  • 컴포넌트의 상태 변화가 미치는 범위를 최소화해야 합니다.
• 전역 상태 관리 하기
  • props를 깊게 전달하는 'Prop Drilling' 대신, Jotai와 같은 '원자 단위(atomic)' 상태 관리 라이브러리를 사용해 보세요.
  • 컴포넌트가 필요한 데이터 조각만 구독하게 하여, 관련 없는 리렌더링을 방지할 수 있습니다.
• 특수 컴포넌트 활용
  • 대규모 리스트는 화면에 보이는 부분만 렌더링하는 가상화 리스트 컴포넌트인 FlatList나 SectionList를 사용하는 것이 필수입니다.

고급 애니메이션과 JSI
애니메이션은 UI 스레드에서 직접 실행하여 JS 스레드의 부담을 덜어주는 것이 핵심이에요.

• JSI (JavaScript Interface)
  • React Native의 새로운 아키텍처는 JSI를 통해 JS와 네이티브 간의 통신을 동기적으로 만들어 성능을 개선합니다.
• Reanimated & Skia
  • react-native-reanimated는 복잡한 애니메이션과 제스처를 UI 스레드에서 처리할 수 있게 해줍니다.그래픽 라이브러리인 react-native-skia를 더하면 한층 더 다채롭고 부드러운 그래픽 구현이 가능합니다.
• 애니메이션 리소스 최적화
  • Lottie 애니메이션은 Lottie optimizer를 통해 파일 크기를 줄이고, 디자이너가 직접 인터랙티브 애니메이션을 제작할 수 있는 Rive를 활용하는 것도 좋은 대안입니다.

키즈노트에서 Lottie로 인해 렌더링 및 CPU 발열 이슈가 발생했던 경험이 있는데, Lottie Optimizer를 미리 알았더라면 더 나은 해결책을 제시할 수 있었을 것 같아 아쉬웠어요.

코드 푸시의 종말과 새로운 대안 OTA 시스템 구축하기

이미 리액트네이티브를 다루신 분들이라면 오픈소스로 제공되는 hot-updater 이라는 OTA 솔루션을 아실 것 같은데요,

MS가 App Center 서비스를 종료하면서 React Native 생태계에서 CodePush를 통한 OTA(Over-the-Air) 업데이트가 불가능해졌습니다. 이에 따라 새로운 대안을 모색해야 하는 상황이 발생했어요.

기존 CodePush의 문제점과 대안의 필요성
CodePush는 몇 가지 구조적인 문제점을 안고 있었어요.

• 인프라 종속성
  • MS 앱센터 인프라에 전적으로 의존하여, 앱센터 장애 시 모든 서비스가 중단되는 위험이 있었습니다.
• 유연성 부족
  • Expo와 같은 최신 프레임워크와의 통합이 어렵고, CDN 부재로 OTA 다운로드 속도가 느린 단점이 있었습니다.

떠오르는 대안 Hot Updater & Expo EAS

Hot Updater: 오픈소스로 개발된 OTA 솔루션입니다.

• 자유로운 인프라
  • Supabase, Firebase 등 원하는 클라우드 인프라를 자유롭게 선택하여 구성할 수 있습니다.
• 유연한 아키텍처
  • 플러그인 시스템을 기반으로 설계되어 다양한 프레임워크와 번들러에 유연하게 대응할 수 있습니다.
• UUIDv7 기반 업데이트 체크
  • 타임스탬프 정보가 내장된 UUIDv7을 번들 ID로 사용하여, 최신 번들을 안정적으로 확인하고 롤백 시나리오에도 효과적으로 대응합니다. (GUI 제공)

EAS (Expo Application Services) Updates Expo에서 제공하는 공식 OTA 서비스입니다.

• 높은 안정성
  • expo-router와의 완벽한 호환성을 보장하며, 네이티브 빌드 버전과 번들의 호환성을 체크하여 크래시 가능성을 사전에 방지합니다.
• 셀프 호스팅
  • expo-updates 프로토콜을 활용하면, AWS S3나 자체 서버(Vercel + Next.js 등)에 번들을 호스팅하여 저렴하게 OTA 환경을 구축할 수 있습니다.

키즈노트에서 React Native가 도입될 때 이 내용을 바로 적용해보면 좋을 것 같아요! 앞으로 하게 될 내용을 미리 볼 수 있어서 매우 유익한 시간이었습니다.

제로 런타임의 차세대 CSS-in-JS, DevUp-UI

React 서버 컴포넌트의 등장으로 기존 CSS-in-JS 라이브러리들은 큰 도전에 직면했습니다.
런타임에 스타일을 동적으로 생성하는 방식이 서버 환경과 맞지 않았기 때문인데요,
이 문제를 해결하기 위한 '제로 런타임(Zero-Runtime)' CSS-in-JS가 새로운 트렌드로 떠올랐고, DevUp-UI가 공개되었어요.

DevUp-UI의 핵심 내용

• 정적 추출
  • 빌드 시점에 코드를 정적으로 분석하여 모든 스타일을 순수 CSS 파일로 미리 추출합니다. 런타임에 자바스크립트가 할 일이 없어 성능 저하가 발생하지 않습니다.
• 성능과 개발 경험(DX)
  • Rust와 웹어셈블리(WASM) 기반의 빠른 파서를 사용하여 막힘없는 개발 경험을 제공합니다.
• 최적화
  • 동적 스타일링(responsive, conditional)은 CSS 변수(Variable)를 활용해 해결합니다.
  • 중복 스타일을 제거하고 모든 스타일을 단 하나의 CSS 파일로 번들링하며
  • 색상 코드(rgba -> hex), 단위(0px -> 0) 등을 극한으로 최적화하여 용량을 줄입니다.
• 지속 가능성
  • css 모듈과 연동하여 새로운 CSS 표준이 나올 때마다 라이브러리가 자동으로 업데이트되는 지속 가능한 시스템을 구축했습니다.

회사 대표님이 직접 프레젠테이션해서 그런지 발표의 정석을 보여주셨어요! ㅎㅎ
발표를 들으면서 우리 프로젝트에도 적용해보고 싶다는 생각이 들었어요.
한가지 드는 의문점은 css파일이 한개의 파일로 번들링 되었고 줄번호가 뜨지 않는 점을 강조한 것인데요, 개행과 중복된 내용이 없어 한개의 파일로 번들링 되어도 용량이 작아 청크분리가 필요 없다는 점을 강조한 것이겠죠?

10억을 세이브한 강남언니의 Technical SEO 전략

개발자가 SEO의 기본 원리를 이해하고 적용할 때, 비즈니스의 가치를 폭발적으로 성장시킬 수 있습니다.

웹 퍼널과 SEO의 연결

웹의 가치는 검색 노출 → 유입(클릭) → 전환이라는 퍼널로 이어져요.
SEO는 이 각 단계를 기술적으로 개선하여 효율을 극대화하는 활동이에요.

검색 노출 늘리기

• 크롤링 버짓 확보
  • 크롤링 봇이 사이트를 수집하는 데 사용하는 시간은 한정적입니다. LCP(Largest Contentful Paint) 개선을 통해 페이지 로딩 속도를 높이면, 같은 시간 동안 더 많은 페이지를 수집해갈 수 있습니다.
• 명확한 링크 구조
  • 크롤러가 사이트의 모든 페이지를 발견할 수 있도록 <a> 태그를 사용한 내부 링크 구조를 잘 설계해야 합니다. robots.txt와 표준 태그를 적절히 활용하는 것도 중요합니다.

클릭률 높이기

• 매력적인 미리보기
  • 메타데이터와 시맨틱 마크업(<h1>, <h2> 등)을 충실히 작성하여 검색 결과 페이지에서 사용자의 눈길을 사로잡아야 합니다.
• 구조화된 데이터 (Structured Data)
  • JSON-LD 형식으로 페이지의 정보를 명확하게 제공하면, 구글이 해당 정보를 활용해 별점, 가격 등 정보를 검색 결과에 노출시켜 클릭률을 높일 수 있습니다.
  • JSON-LD는 Json 형태로 구글봇에게 바로 주는 데이터에요.

권위와 신뢰 향상

• 코어 웹 바이탈 (Core Web Vitals)
  • LCP, FID, CLS 등 사용자 경험 지표를 개선하여 구글로부터 좋은 평가를 받아야 합니다.
• 링크 관리
  • 권위 있는 외부 사이트에 우리 사이트 링크가 많이 언급될수록 사이트의 신뢰도가 높아집니다. 그래서 강남언니는 X(구 트위터), 관련 SNS에 링크를 많이 언급하면서 권위를 높입니다.

키즈노트 특정상 폐쇄적인 사이트로 인해 아직 SEO를 위한 깊이있는 프로젝트를 진행 해본 적이 없어 인사이트가 많이 없었는데, 이번 세션에서 정말 중요한 핵심만 콕콕 집어주어서 앞으로 관련 작업을 진행하게 될 때 참고할 만한 요소가 많이 있었어요.

특히 특별한 변경 지점이 없지만 지표가 크게 튀는 상황이 있다면 바로 구글 코어 업데이트에 따른 영향일 수 있다고 해요, 잘못 개발한 것인가 자책하고 삽질하는 과정을 피할 수 있는 요런 실무 꿀팁들 너무 감사했어요!!

1,000만 데이터를 브라우저에서? "GPGPU"를 활용한 프론트엔드 연산

GPGPU는 General-Purpose GPU의 약자로, 기존의 GPU를 그래픽 처리뿐만 아니라 인공지능, 머신러닝, 데이터 분석과 같은 범용 계산을 수행하는 데 사용하는 개념이에요.

대용량 데이터를 프론트엔드에서 실시간으로 처리해야 할 때, CPU만으로는 한계에 부딪힙니다. 이 세션에서는 GPU의 병렬 처리 능력을 일반 계산에 활용하는 GPGPU 기술과 브라우저에서 이를 가능하게 하는 WebGL/WebGPU API를 소개했어요.

만여 개의 코어를 가진 GPU를 활용하면, 복잡한 데이터 변환 및 연산 작업을 백엔드 없이 브라우저에서 직접 처리하여 놀라운 성능 향상을 경험할 수 있습니다. DuckDB-Wasm과 같은 웹어셈블리 기반 기술과 함께 GPGPU는 프론트엔드 데이터 시각화 및 분석의 새로운 가능성을 열어주고 있어요.

실제로 로컬에서 CPU와 GPU로 개발된 사이트에서 실시간으로 수많은 데이터를 필터링 하는 과정에서의 속도 차이를 보여주어 대규모 데이터를 처리하는 성능에 대한 차이를 직관적으로 비교하여 볼 수 있어서 좋았어요.

프론트엔드 개발자에게는 낯선 코드이기에 LLM의 도움을 많이 받았다고 해요. 특히 질문할 때 WebGL2를 꼭 언급해야 정확한 결과를 얻을 수 있다는 꿀팁도 전수해 주셨습니다.

플랙스 팀은 왜 모노레포를 해체했을까?

빠르게 성장하는 조직에서 코드베이스를 어떻게 관리할 것인가는 중요한 문제입니다. 플랙스 팀은 초기에 코드 공유가 자유로운 yarn workspace와 Turborepo 기반의 모노레포를 운영했어요.

하지만 도메인이 복잡해지고 패키지 간 의존성이 깊어지면서, 작은 변경에도 전체 앱을 배포해야 하는 등 변경 추적이 어려워지는 문제가 발생했어요.

결국 이팀은 모노레포를 여러 개의 폴리레포(Polyrepo)로 분리하는 방식을 택하였고 1년이 넘는 시간동안 패키지 간의 명확한 경계를 설정하고, 팀의 자율성과 배포 안정성을 높이기 위한 작업을 진행하기로 결정 했는데요,

사용되지 않는 공용 모듈과 복잡해진 모듈을 정리하면서 겪었던 '사이버 노동' 일화를 재미있게 들려주어 시간 가는 줄 모르고 들었습니다.

REFERENCE

2025 FEConf