![FEConf 2025 [A4] 완전한 ZERO COST CSS-IN-JS, Devup-UI](https://i.ytimg.com/vi/MVuyYlFEwro/maxresdefault.jpg)
FEConf 2025 [A4] 완전한 ZERO COST CSS-IN-JS, Devup-UI
FEConf 2025 A트랙 · YouTube
AI 핵심 요약
Next.js 서버 컴포넌트 환경에서 런타임 CSS-in-JS의 제약을 해결하기 위해, 오정민은 박스 컴포넌트 기반의 개발 경험을 유지하면서 빌드 시점에 스타일을 CSS로 변환하는 Devup-UI를 만들었다. 번들러 플러그인으로 코드를 OXC AST로 분석하고 Rust와 WebAssembly로 작성한 코어에서 스타일을 추출하며, 동적 값은 CSS 변수로 처리해 런타임 스타일 생성 없이 반응형·선택자·테마 기능을 지원한다. 스타일 중복 제거와 CSS 압축, 컴포넌트 단위 트리셰이킹으로 빌드 결과를 줄였고, 발표자는 여러 내부·외부 프로젝트에서 사용하며 Devup-UI로 인한 이슈가 없었다고 설명했다. 핵심 교훈은 CSS-in-JS의 개발 경험을 유지하면서도 정적 분석과 빌드 단계 최적화로 런타임 비용을 없앨 수 있다는 것이다.
- 빌드 시점에 스타일을 추출하려면 코드의 AST를 분석하고, 동적 값은 CSS 변수로 처리할 수 있다.
- 스타일 저장소에서 키·값의 중복을 확인해 같은 CSS와 클래스를 재생성하지 않도록 한다.
- CSS를 하나의 파일로 합치면 중복을 줄일 수 있지만, 사용하지 않는 컴포넌트 스타일을 제거하는 트리셰이킹도 함께 고려해야 한다.
- CSS 표준을 직접 나열하기보다 표준 데이터에 기반해 타입 자동 완성을 구성하면 새 속성과 선택자에 대응하기 쉽다.
소개
FEConf 2025 2025.8.23 11:00 ~ 17:40 세종대학교 광개토관 컨벤션센터 TRACK A-4 완전한 ZERO COST CSS-IN-JS, Devup-UI 오정민 | ㈜데브파이브 정말 티끌 하나도 코스트가 없는 CSS-in-JS 라이브러리 Devup-UI! 그러면서 반응형, 선택자, 테마까지 많은 기능을 제공하는 Devup-UI는 어떻게 이런 성능과 기능들을 모두 제공할 수 있을까? Next.js 의 서버컴포넌트 도입으로 하락세를 겪고 있는 CSS-in-JS 라이브러리에 대한 완벽한 대안기능 구현에 대한 아이디어부터 Rust와 웹 어셈블리를 통하여 개발하게 된 개발기 그리고 실제 작동까지! 어떤 라이브러리 보다 효율적이고(심지어 Tailwind CSS보다도!) 성능 이슈가 전혀 없는 완벽한 해결법을 향한 여정을 공유드립니다.
비슷한 학습 자료
컨퍼런스 DEVIEW 2023
SSR환경에서의 Micro-Frontend 구현과 퍼포먼스 향상을 위한 캐시전략
컨퍼런스 SLASH
토스ㅣSLASH 21 - 실무에서 바로 쓰는 Frontend Clean Code
컨퍼런스 SLASH
실무에서 클린 코드의 의의는 유지보수 시간의 단축입니다. 동료 혹은 과거의 스스로 짠 코드를 빠르게 이해할 수 있다면 유지보수할 때 드는 개발 시간이 짧아집니다. 실제 예시와 함께 1. 응집도 2. 단일 책임 3. 추상화 총 세 가지 관점으로 클린코드 방법론을 공유합니다. 진유림 / 토스 Frontend Developer 토스 개발자 컨퍼런스 SLASH에 대한 자세한 정보는 👉🏻 https://toss.im/slash-21 컨퍼런스 및 세션에 대한 문의는 👉🏻 slash@toss.im #토스 #개발자컨퍼런스 #SLASH
프론트엔드
컨퍼런스 SLASH
거대한 모놀리식 Django 프로젝트에 현대적인 프론트엔드 인프라를 구축한 사례를 공유합니다. 어떻게 해야 오래된 코드 베이스를 대대적으로 수정하지 않으면서도, 최신 프론트엔드 기술들을 적극적으로 도입해나갈 수 있을지 고민한 경험을 공유합니다. 조유성 / 토스 Full Stack Developer 토스 개발자 컨퍼런스 SLASH에 대한 자세한 정보는 👉🏻 https://toss.im/slash-21 컨퍼런스 및 세션에 대한 문의는 👉🏻 slash@toss.im #토스 #개발자컨퍼런스 #SLASH
웹 개발 프론트엔드
컨퍼런스 FEConf 2025 B트랙
FEConf 2025 [B3] 중요하지만 긴급하지 않은 일, 그럼에도 계획해야 하는 웹 접근성
컨퍼런스 FEConf 2025 B트랙
FEConf 2025 2025.8.23 11:00 ~ 17:40 세종대학교 광개토관 컨벤션센터 TRACK B-3 중요하지만 긴급하지 않은 일, 그럼에도 계획해야 하는 웹 접근성 김무훈 | A11YKR 커뮤니티 모든 사람을 위한 웹 접근성 지원과 설계, 제대로 알아봅시다. 웹 프런트엔드 서비스에서 접근성 지원은 여전히 제도적으로 의무화된 항공사 웹 서비스와 정부/공공기관 외에 모범 사례가 흔치 않고, 확실한 정답이 정해져 있지 않은 분야입니다. - 혹시 웹 접근성이 장애 사용자만을 위한 특수한 경험이라고 오해하고 계신가요? 웹의 본연의 힘은 보편성에 있습니다. 장애와 관계없이 모든 사람의 콘텐츠 접근은 필수적이라고 생각합니다. - 웹 접근성을 지원하기 위한 UI 컴포넌트 설계에 막연함을 느끼시나요? 웹 접근성 표준을 준수하면서, 일관된 UI 제어 경험을 어떻게 설계할 수 있는지 제가 고려했던 사항을 소개합니다. 따라서 아래 명제에 대한 발표자의 생각이 궁금하시면 꼭 보러 와주세...
프론트엔드 UI/UX
컨퍼런스 FEConf 2025 B트랙
FEConf 2025 [B6] 그리드 기반 웹 에디터 / 빌더 구현기
컨퍼런스 FEConf 2025 B트랙
FEConf 2025 2025.8.23 11:00 ~ 17:40 세종대학교 광개토관 컨벤션센터 TRACK B-6 그리드 기반 웹 에디터 / 빌더 구현기 이선협 | 마플코퍼레이션 그리드 기반 에디터는 웹에 최적화된 자유도를 가진 에디터입니다. 이런 장점을 기반으로 노코드 웹사이트 제작, 사용자 정의 대시보드 등 다양한 제품에서 사용할 수 있습니다. 대표적으로 Squarespace, 큐샵과 같은 서비스에서도 사용하고 있습니다. 본 발표에선 그리드 기반 에디터에 대한 소개와 구현 전략, 구현 시 주의할 점에 대해 다룹니다.
웹 개발 프론트엔드
컨퍼런스 INFCON 2024
그래픽 엔진 포팅 사례로 배우는 웹어셈블리 웹 컴포넌트 개발부터 디버깅, 최적화까지│인프콘2024
컨퍼런스 INFCON 2024
🌱 인프런 에서 인프콘2024 강의 자료 다운로드 받고 복습해보세요. 🩵 강의 자료 다운 받기 : https://inf.run/ifwWL 🌱 인프런과 함께 배우고, 나누고, 성장하세요. 🩵 그래픽 엔진 포팅 사례로 배우는 웹어셈블리 웹 컴포넌트 개발부터 디버깅, 최적화까지 - 유진의 "웹 어셈블리"(이하 WASM)는 2017년에 공개된 새로운 웹 표준 기술이며, C/C++ 등의 저수준 언어를 웹 환경에서 빠르고 안전하게 구동할 수 있습니다. 저희 조직에서는 C++ 오픈소스를 WASM으로 전환하는 과정을 통해 복잡한 그래픽스 엔진을 웹으로 포팅하여 성공적으로 운용하고 있으며, C++ 네이티브 API로 구동되는 웹 표준 컴포넌트를 개발하여 사용자들이 손쉽게 이용할 수 있는 가볍고 빠른 Lottie 애니메이션 플레이어를 제공하고 있습니다. WASM은 트렌디하며 굉장히 중요한 기술입니다. 본 세션에서는 WASM이 기존 웹 개발의 영역에서 어떠한 부분을 대체하고 개선할 수...
웹 개발 프로그래밍 언어