-
- 로그인후 이용해주세요.
업데이트 노트
메인 화면 렌더링 구조 개선
현재 리빌더의 메인 화면은
레이아웃 기반 동적 렌더링 구조(AJAX 기반 레이아웃 로딩)로 동작하고 있습니다.
페이지 진입 시 전체 콘텐츠를 서버에서 바로 출력하는 방식이 아니라,
초기 페이지 로드 이후 각 레이아웃 영역의 모듈 및 섹션 정보를 비동기 요청(AJAX)으로 조회한 뒤
클라이언트에서 DOM을 재구성하는 방식으로 구현되어 있습니다.
동작 흐름은 다음과 같습니다.
1. 메인 페이지 기본 구조가 먼저 로드됩니다.
2. 화면에 배치된 레이아웃 정보를 수집합니다.
3. 해당 레이아웃 번호를 기준으로 서버에 AJAX 요청을 전달합니다.
4. 서버에서는 레이아웃에 포함된 모듈(Module) 및 섹션(Section) 정보를 조회합니다.
5. 모듈과 섹션의 정렬값(order_id)을 기준으로 통합 정렬(Unified Sorting)을 수행합니다.
6. 각 모듈 타입에 따라 HTML 구조를 동적으로 생성합니다.
7. 생성된 결과를 JSON 형태로 반환하고, 클라이언트에서 DOM에 삽입하여 화면을 구성합니다.
이후 슬라이더 초기화, 애니메이션(AOS) 재적용, 섹션 내부 모듈 재배치 등의
클라이언트 후처리(Post Rendering Process)가 수행됩니다.
이 구조는 관리자 편집 기능과의 연동 및 레이아웃 유연성을 고려하여 설계된 방식입니다.
현재 구조의 장점
레이아웃 단위 동적 로딩
레이아웃 단위로 모듈을 비동기적으로 로딩할 수 있어
특정 영역만 부분적으로 갱신하거나 재렌더링하는 것이 가능합니다.
관리자 편집 시스템과 높은 호환성
모듈 추가, 삭제, 순서 변경, 섹션 이동 등 레이아웃 편집 기능과 자연스럽게 연동되는 구조입니다.
구조적 확장성
모듈 타입이 증가하거나 기능이 확장되더라도 레이아웃 렌더링 엔진을 중심으로 유연하게 확장할 수 있습니다.
레이아웃 단위 캐시 적용 가능
레이아웃별 캐시 파일을 생성하고 체크섬 기반으로 변경 여부를 감지하는 방식의
부분 캐싱 전략을 적용할 수 있습니다.
현재 구조의 한계
초기 렌더링 지연 가능성
메인 페이지 로드 이후 추가적인 AJAX 요청이 발생하기 때문에
First Contentful Paint(FCP) 시점에서 콘텐츠 표시가 늦어질 수 있습니다.
추가 네트워크 요청 발생
초기 페이지 로드 이후 별도의 비동기 요청이 발생하므로 네트워크 왕복 비용(Round Trip Cost)이 증가합니다.
클라이언트 후처리 비용 증가
AJAX 응답 이후
DOM 삽입, 섹션 내부 모듈 재배치,
슬라이더 초기화,
애니메이션 재적용
등의 작업이 수행되기 때문에
브라우저 렌더링 부담이 증가할 수 있습니다.
렌더링 흐름 복잡도 증가
PHP → JSON → JS → DOM 삽입 구조로 이루어져 있어
렌더링 파이프라인(Rendering Pipeline)이 다소 복잡해질 수 있습니다.
개선 방향
메인 화면의 초기 표시 속도와 렌더링 효율을 개선하기 위해
사용자 화면 기준 렌더링 방식을 다음과 같이 개선할 예정입니다.
기존 구조
AJAX 기반 클라이언트 렌더링
개선 구조
PHP 서버사이드 렌더링(Server Side Rendering) 기반 출력
즉, 페이지 진입 시 서버에서 레이아웃과 모듈 정보를 조회한 뒤
완성된 HTML을 직접 생성하여
반환하는 방식으로 전환할 예정입니다.
이 방식은 다음과 같은 특징을 갖습니다.
페이지 진입 시 추가 AJAX 요청 없이 바로 콘텐츠 표시
렌더링 구조 단순화
초기 체감 로딩 속도 개선
클라이언트 후처리 부담 감소
기존 기능과의 호환성
이번 구조 개선은 사용자 화면의 렌더링 방식에 대한 변경이며,
관리자 기능 및 기존 데이터 구조에는 영향을 주지 않습니다.
기대 효과
이번 구조 개선을 통해 다음과 같은 개선 효과가 기대됩니다.
메인 초기 렌더링 속도 개선
추가 네트워크 요청 감소
클라이언트 렌더링 부담 감소
구조 단순화로 유지보수 안정성 향상
SEO 및 크롤링 환경 개선
리빌더는 단순한 기능 확장뿐 아니라
플랫폼 구조 자체의 성능과
안정성을 지속적으로 개선하는 방향으로 발전하고 있습니다.
앞으로도 더 빠르고 안정적인 사용 환경을 제공할 수 있도록
렌더링 구조와 시스템 아키텍처를
지속적으로 개선해 나가겠습니다.
감사합니다.
- 다음글새로워진 Rb 어드민, 핵심 부가기능, Rb 플랫폼2026.03.15
댓글목록
