MFE 환경에서 공통 헤더(GNB) 개편하기
MFE 환경에서 이중 관리되던 공통 헤더를 Module Federation과 어댑터 모듈로 통합했습니다. 쿠키 스냅샷과 CSS, transform 모션으로 UX·DX 균형을 개선했습니다.
#MFE#Module Federation
000
프론트엔드 기술 블로그 최신 글
필터 0
FE News 26년 3월 소식을 전해드립니다!
FE News 26년 3월 소식을 전해드립니다!
FE 엔지니어들이 React 재단, CSS Day, Claude Code, TypeScript, Vinext 같은 프런트엔드 관련 소식을 소개했습니다. Next.js 대안과 성능 개선 사례를 포함한 월간 기술 큐레이션입니다.
#React#CSS
13300
리액트의 현재와 미래, 그리고 AI: React Summit US 2025 참관기
리액트의 현재와 미래, 그리고 AI: React Summit US 2025 참관기
React Summit US 2025 현장에서 본 프론트엔드와 AI의 최신 흐름을 정리했습니다. 도구는 더 강력해졌지만, 결국 기본기와 설계 역량이 중요하다는 메시지를 전했습니다.
#React#LLM
9700
매장을 찾는 과정을 설계한 올영매장 고도화 여정
올영매장은 매장 정보를 보여주는 기능에서 고객의 행동을 이끄는 탐색 공간으로 고도화했습니다. 콘텐츠와 픽업 대시보드를 통해 방문 이유와 다음 행동을 더 선명하게 설계했습니다.
#UI/UX#O2O
12500
200MB 모듈을 팀 단위로 해결하기: 당근 숏폼팀의 On-demand Dynamic Feature Module 도입
200MB 모듈을 팀 단위로 해결하기: 당근 숏폼팀의 On-demand Dynamic Feature Module 도입
비디오 편집 모듈의 200MB 용량을 줄이기 위해 On-demand DFM을 도입했습니다. 기능 코드는 base에 두고 SO 파일만 분리해 글로벌 사용자 부담과 운영 복잡도를 함께 낮췄습니다.
#Android#DFM
8100
신입 디자이너가 꼭 알아야 할 실험 설계 팁
실험 경험이 없는 인턴 디자이너가 비회원 가입 퍼널 개선 실험을 설계한 과정을 공유했습니다. 기존 러닝을 분석해 명확한 가설을 세우고, 문구와 이미지 개선으로 전환율을 높였습니다.
#UI/UX#실험 설계
7400
쓰기 쉬운 Toss Front SDK
Toss Front 외부 연동 SDK를 Facade 패턴으로 단순하고 안전하게 설계하는 방법을 소개했습니다. 공통 유즈케이스는 고수준 API로 묶고 특수한 경우만 저수준 API를 남겨 DX와 안정성을 높였습니다.
#SDK#Facade
13200
[디자인 시스템 어떻게 만들었어요?(3)] Tree Shaking과 구형 브라우저 대응
[디자인 시스템 어떻게 만들었어요?(3)] Tree Shaking과 구형 브라우저 대응
Next.js 환경에서 디자인 시스템 라이브러리의 번들 최적화와 구형 브라우저 대응 방법을 정리했습니다. 모듈 구조 유지, transpilePackages, 폴리필 전략을 통해 서비스 단의 호환성과 성능을 함께 개선했습니다.
#Next.js#React
10000
쏘카 디자인 시스템 2.0 개발기 2편: 기술로 굴리기(웹)
쏘카 디자인 시스템 2.0 웹 개발에서 컴포넌트 구조, 패키지 전략, LLM 활용 방식을 정리했습니다. 상태 결합도에 따라 Hook과 객체를 분리하고, rollup과 Instructions 체계로 운영성을 높였습니다.
#React#Next.js
11600
쏘카 디자인 시스템 2.0 개발기 2편: 기술로 굴리기(웹)
디자인 시스템 컴포넌트를 결합도에 따라 Hook 또는 객체와 Hook Adapter로 분리했습니다. Rollup 번들 전략과 LLM Instructions로 성능·재사용성·협업 일관성을 높였습니다.
#React#Next.js
200
쏘카 디자인 시스템 2.0 개발기 1편: 시스템으로 굴리기(웹)
쏘카프레임 2.0을 규칙·컴포넌트·Figma 연동·운영 프로세스를 아우르는 디자인 시스템으로 재정의했습니다. 플러그인과 Code Connect, Slot 설계로 전달 흐름을 개선하고 직군 간 정책 합의와 QC를 운영했습니다.
#디자인 시스템#Figma
400
쏘카 디자인 시스템 2.0 개발기 1편: 시스템으로 굴리기(웹)
쏘카 디자인 시스템 2.0을 시스템 관점에서 설계하고 운영한 과정을 정리했습니다. Figma 연동과 직군 합의를 통해 디자인-개발 흐름과 품질 관리 체계를 강화했습니다.
#Figma#UI/UX
11300
웹뷰 엔지니어를 위한 iOS Webview Input 경험 개선기
웹뷰 엔지니어를 위한 iOS Webview Input 경험 개선기
iOS 웹뷰에서 input focus 시 화면이 밀리는 문제를 여러 방식으로 개선한 과정을 정리했습니다. 최종적으로는 opacity 트릭으로 자동 스크롤을 막아 입력 경험을 안정화했습니다.
#iOS#WebView
10600
불안정한 테스트를 신뢰로 바꾸는 과정: Playwright Flaky Test 개선기
불안정한 테스트를 신뢰로 바꾸는 과정: Playwright Flaky Test 개선기
Robot Framework 기반 자동화 테스트의 Flaky 문제를 Playwright로 마이그레이션하며 개선한 사례를 소개했습니다. 팝업 자동 처리, 셀렉터 정교화, 데이터 조건별 skip으로 테스트 신뢰도를 높였습니다.
#Playwright#Pytest
11900