화상회의 참여자 화면 최적 배치 알고리즘 개발기

문제 상황

• 화상회의에서 참여자 수, 화면 공유, 디바이스 크기에 따라 화면 배치가 복잡해지는 문제
• 참여자 수 최대화, 박스 면적 최대화, 빈 공간 최소화가 서로 충돌하는 레이아웃 최적화 과제

구조와 흐름

• GroupNode와 FlexNode로 레이아웃을 계층적 트리 구조로 표현
• GroupNode는 동일 특성 참여자 묶음의 그리드 배치를 계산
• FlexNode는 두 자식 노드를 가로·세로로 나눠 배치하고, 두 방향을 시뮬레이션해 더 나은 결과 선택

성능/운영 포인트

• 조기 종료와 메모이제이션으로 불필요한 계산 감소
• 정수 연산과 ResizeObserver로 렌더링과 크기 변경 대응 최적화
• 단위 테스트와 엣지 케이스 검증으로 비율, 최소 높이, 최대 표시 수 확인

적용해볼 점

• 화면 공유처럼 고정 비율 콘텐츠와 일반 참여자를 분리해 레이아웃 설계
• 모바일·데스크톱 등 다양한 화면 비율을 전제로 배치 알고리즘 적용
• 프론트엔드 문제에도 트리, 재귀, 분할 정복 같은 CS 사고 활용