
업데이트 노트
웹을 만드는 새로운 방법, Visual Editor (가칭)
Visual Editor 개발 소식을 전해드립니다.


현재는 편집 구조와 주요 동작을 검증하는 프로토타입 단계입니다.
리빌더에 통합할지, 그누보드를 사용하지 않는 독립형 CMS로 제공할지는 아직 결정되지 않았습니다만
그누보드의 구조적 한계로 새로운 CMS로 제공하는것에 힘이 실리고있습니다.
핵심 개발 방향은 정밀한 화면 편집, 구조화된 콘텐츠 관리, AI를 통한 디자인 확장입니다.
사용자가 직접 수행하는 편집과 AI가 생성하는 결과를 동일한 편집 체계 안에서 관리하도록 설계하고 있습니다.
구조화된 페이지 모델
페이지는 섹션 → 컨테이너 → 블록으로 구성됩니다.
각 요소의 배치, 디자인 속성, 콘텐츠 연결 정보를 구조화된 데이터로 관리합니다.
이 구조는 요소별 수정과 재사용의 기반이 됩니다.
AI 역시 선택한 요소의 유형과 속성, 상위·하위 관계를 기준으로 수정 대상을 해석할 수 있도록 설계합니다.
선택한 요소에 맞춘 정밀 편집
텍스트, 버튼, 배지, 게시물 등 선택한 요소의 특성에 맞춰 편집 도구를 제공합니다.
텍스트의 부분 서식부터 행간·자간·정렬·간격, 버튼의 아이콘·배경·모서리까지 화면에서 직접 조정할 수 있습니다.
반복되는 게시물 요소에는 공통 스타일을 적용해, 한 번의 수정으로 해당 블록 전체의 디자인 일관성을 유지합니다.
게시판 데이터와 스킨의 분리
하나의 게시판을 여러 블록에 연결하고, 각 블록에 서로 다른 출력 방식과 디자인을 적용할 수 있습니다.
동일한 데이터를 목록형, 카드형 등 다양한 형태로 구성하면서 카테고리·제목·요약·날짜·작성자의 표시 여부와 스타일을 독립적으로 제어합니다. 콘텐츠를 중복 관리하지 않고도 페이지 목적에 맞는 화면을 구성하는 방식입니다.
단일 페이지 구조를 사용하는 반응형 설계
화면과 컨테이너의 가용 너비를 기준으로 열 수와 배치를 조정합니다.
모바일 페이지를 별도로 관리하지 않으며, 하나의 콘텐츠 구조를 여러 화면 크기에서 사용합니다.
공통 반응형 규칙과 컨테이너별 설정을 함께 제공해, 자동 배치의 편의성과 세부 조정의 유연성을 확보하는 방향입니다.
AI를 통한 부분 수정과 스킨 제작
AI 연동은 선택한 요소를 기준으로 요청 범위를 한정하고, 변경 결과를 확인한 뒤 적용하는 흐름으로 설계하고 있습니다.
문구 수정부터 게시물 스킨의 레이아웃·스타일 생성까지 대화로 요청하고, 생성 결과는 구조 검증과 미리보기를 거쳐 적용하도록 구성할 예정입니다.
가장 중요한 설계 원칙은 AI가 생성한 결과의 재편집 가능성입니다.
AI가 만든 스킨에서도 제목, 배지, 버튼 등 각 요소를 선택해 기존 편집 도구로 수정할 수 있어야 합니다.
직접 편집한 결과를 AI가 이어서 수정하고, AI가 생성한 결과를 사용자가 다시 조정하는 연속적인 작업 흐름을 목표로 합니다.
스킨과 페이지의 저장·공유
스킨은 고유 ID로 식별하고, 제작한 스킨을 라이브러리에 저장해 필요에 따라 교체하거나
다른 사용자와 공유할 수 있도록 설계합니다.
하나의 게시판에 다양한 스킨을 적용하고, 완성된 디자인을 다른 페이지에서도 재사용할 수 있습니다.
메인페이지 및 서브페이지 전체를 하나의 템플릿으로 저장·공유하는 기능도 개발 범위에 포함됩니다.
섹션과 컨테이너의 배치, 블록 구성, 디자인 설정을 함께 보관해 페이지 단위로 불러오고 적용하는 방식입니다.
개별 스킨부터 완성된 페이지까지, 제작 결과를 재사용하고 공유할 수 있는 구조로 확장합니다.
Visual Editor (가칭) 는 사용자와 AI가 동일한 화면 구조와 편집 규칙을 공유하는 편집 환경을 지향합니다.
직접 편집, AI를 통한 제작, 스킨 교체, 페이지 공유까지 하나의 작업 흐름으로 연결하는 것이 이번 개발의 핵심입니다.
-----
에디터의 개발소식을 전해드렸지만, 리빌더의 고도화가 1순위 입니다.
틈틈히 프로토타입이 나오는대로 공유해드리겠습니다.
응원해주세요!
- 다음글Rb 어드민 (라이트) 공개2026.09.10
댓글목록





