프론트엔드
화상회의 참여자 화면 최적 배치 알고리즘 개발기
두줄요약
화상회의 참여자와 화면 공유를 최적으로 배치하는 프론트엔드 레이아웃 알고리즘을 설계하고 구현한 사례였습니다. 트리 구조와 재귀적 시뮬레이션으로 다양한 화면 비율과 제약을 처리했습니다.
문제 상황
- 화상회의 참여자 수, 화면 공유, 디바이스 비율에 따라 화면 배치가 복잡해지는 문제
- 참여자 수 최대화, 각 박스 면적 최대화, 빈 공간 최소화가 동시에 요구되는 트레이드오프
구조와 흐름
- GroupNode와 FlexNode로 레이아웃을 트리 구조로 표현
- GroupNode에서 그리드 조합을 완전 탐색하며 비율, 최소 높이, 면적을 기준으로 최적 배치 선택
- FlexNode에서 횡/종 배치를 둘 다 시뮬레이션하고 자식 노드가 실제 사용한 공간까지 반영
성능/운영 포인트
- 조기 종료로 불필요한 시뮬레이션 감소
- useMemo, useCallback, ResizeObserver로 재계산 최소화
- 정수 연산과 단위 테스트로 렌더링 품질과 안정성 확보
적용해볼 점
- 화면 공유, 고정 발표자, 일반 참여자처럼 특성이 다른 콘텐츠를 같은 알고리즘으로 분리 배치하는 설계
- 재귀적 노드 구조와 시뮬레이션 기반 최적화로 복잡한 프론트엔드 레이아웃 문제 해결