화상회의 참여자 화면 최적 배치 알고리즘 개발기
화상회의 참여자 화면 최적 배치 알고리즘 개발기
화상회의 참여자 화면 배치를 최적화하기 위해 트리 기반 알고리즘을 설계하고 구현했습니다. 화면 공유와 일반 참여자를 분리해 다양한 화면 비율에 맞게 효율적으로 배치했습니다.
#TypeScript#알고리즘
600
프론트엔드 기술 블로그 최신 글
필터 0
화상회의 참여자 화면 최적 배치 알고리즘 개발기
화상회의 참여자와 화면 공유를 최적으로 배치하는 프론트엔드 레이아웃 알고리즘을 설계하고 구현한 사례였습니다. 트리 구조와 재귀적 시뮬레이션으로 다양한 화면 비율과 제약을 처리했습니다.
#algorithm#TypeScript
2000
더 빠르게 주문 상태 전달하기: Live Activities
더 빠르게 주문 상태 전달하기: Live Activities
Live Activities를 iOS 주문 상태 전달에 적용한 사례를 소개했습니다. 앱 종료 상태와 여러 기기에서도 일관된 상태 반영을 위해 APNs 기반 서버 관리를 선택했습니다.
#iOS#Live Activities
5800
우리 팀엔 자바스크립트 상차만 하는 프런트엔드가 있었다
우리 팀엔 자바스크립트 상차만 하는 프런트엔드가 있었다
프런트엔드의 index.html을 백엔드에서 분리해 독립 배포 구조로 전환했습니다. S3, CloudFront, Lambda@Edge를 활용해 성능과 운영 효율을 함께 개선했습니다.
#React#TypeScript
5100
100년 가는 프론트엔드 코드, SDK
결제 SDK의 연동 복잡성과 운영 문제를 해결하기 위해 V2 SDK를 다시 설계했습니다. 계층 분리와 계약 중심 구조로 안정성, 확장성, 명확성을 강화했습니다.
#SDK#TypeScript
15700
글로벌웹툰 안드로이드 Large Screen 적용기
글로벌웹툰 안드로이드 Large Screen 적용기
글로벌웹툰 안드로이드 앱의 Large Screen 대응과 최적화 사례를 소개했습니다. View와 Compose 환경에서의 적용 포인트와 품질 가이드라인을 공유했습니다.
#Android#Flutter
9200
Shadow Dom : 중요한 건 깨지지 않는 스타일
여러 플랫폼의 이력서를 한 화면에서 안정적으로 보여주기 위해 Shadow DOM 적용 사례를 다뤘습니다. 스타일 충돌 방지, 스크립트 처리, FOUC 대응과 한계까지 정리했습니다.
#Shadow DOM#CSS
6500
“더 빠르고, 자연스러운 경험을 만드는 웹&에디터팀”
미리캔버스 웹&에디터팀이 에디터 2.0의 모듈화와 UX 개선, 성능 최적화를 중심으로 일하는 방식을 소개했습니다. 또한 모니터링, 설계 리뷰, 테스트 코드로 안정성과 확장성을 높이는 과정을 공유했습니다.
#React#애니메이션
4600
대규모 프론트엔드 아키텍처의 새로운 패러다임 - Part 3. Nx를 활용한 마이크로프론트엔드
Nx를 활용해 모노레포에서 마이크로프론트엔드를 구축하는 방법을 소개했습니다. 빌드타임 통합과 런타임 통합을 예시 코드로 비교하며 Nx의 장점을 설명했습니다.
#Nx#모노레포
13300
대규모 프론트엔드 아키텍처의 새로운 패러다임 - Part 2. 모듈 페더레이션 PoC
모듈 페더레이션 PoC로 Next.js 기반 마이크로프론트엔드의 런타임 통합 방식을 살펴보았습니다. 다만 원격 모듈 설정 자동화와 타입 안전성, SSR 구현 난이도는 추가 해결이 필요했습니다.
#Module Federation#micro frontend
13000
하이브리드 앱에 구축하는 iOS 개발자모드
하이브리드 iOS 앱에 개발자모드와 WebView 디버깅 도구를 SwiftUI로 구축한 사례를 소개했습니다. 프로토콜과 DI로 로컬 플래그를 분리해 운영 리스크를 줄이고 생산성을 높였습니다.
#iOS#SwiftUI
6100
Next.js 프로젝트의 정적 파일 배포 환경 구성
Next.js 정적 파일을 개발·운영으로 분리하고 CI/CD로 자동 배포하는 구성을 소개했습니다. 변경된 파일만 rsync와 Purge로 처리해 캐시 비용과 운영 부담을 줄였습니다.
#Next.js#CI/CD
3300
Compose에서 Stable을 가볍게 보면 안 되는 이유: LazyList 안정성 가이드 Part 2
Compose에서 Stable을 가볍게 보면 안 되는 이유: LazyList 안정성 가이드 Part 2
LazyColumn 최적화에서 key와 stable 상태가 recomposition 범위에 큰 영향을 준다고 설명했습니다. 아이템 상태와 리스트 변경 방식에 맞는 모델을 선택하는 것이 중요하다고 정리했습니다.
#Android#Jetpack Compose
5200
스윙 iOS에서 더 개선된 애니메이션 시스템 만들기
iOS 애니메이션의 예기치 않은 동작 원인을 CATransaction과 레이아웃 생명주기 관점에서 정리했습니다. CADisplayLink 기반 SWAnimation으로 진행도 제어, 취소, FPS 측정까지 확장한 사례를 소개했습니다.
#iOS#UIView.animate
2900