Synolink CMS 케이스 스터디

cms.synolink.ai

비주얼 웹 빌더

Webflow와 Squarespace 급의 비주얼 웹 빌더이자 Synolink 스위트를 이루는 세 제품 중 하나. 캔버스 위에서 타입이 있는 요소로 페이지를 조립하고, AI 생성 콘텐츠, SEO·GEO 최적화 결과물, i18n을 갖춘 채로 퍼블리시합니다.

에디터는 제가 만든 리치 콘텐츠 에디터용 React 프레임워크인 content-builder 위에서 동작합니다. Sanity와 Builder.io에서 영감을 받았습니다.

cms.synolink.ai 방문content-builder의 시작 보기
상태
운영 중
역할
클라이언트 개발 총괄
스위트
synolink.ai

구조

캔버스부터 퍼블리싱까지, 여섯 개의 레이어.

ENKO{ }654Aa321

  1. 캔버스와 라이브 모드

    실시간 미리보기가 있는 드래그 앤 드롭 편집. 라이브 모드는 같은 페이지를 편집에서 미리보기로 전환하고, 전체 실행 취소·다시 실행 기록은 단축키로 동작합니다.

  2. 요소 시스템

    컨테이너, 텍스트, 헤딩, 이미지, 버튼, 링크, 다이얼로그, 드롭다운, 캐러셀, 폼 등 20가지 이상의 요소가 중첩되어 복잡한 레이아웃을 만들고, 데스크톱·태블릿·모바일 브레이크포인트가 기본으로 들어 있습니다.

  3. 디자인 변수

    색상, 크기, 폰트 패밀리를 위한 토큰 시스템과 디바이스별 오버라이드. 토큰으로 부족할 때는 Monaco 에디터에서 CSS를 직접 편집합니다.

  4. 플러그인 아키텍처

    사이드바와 툴바는 플러그인이며, 요소·레이어·스타일·액션·에셋·CMS·히스토리 등 15개 이상의 기본 탭을 갖췄습니다. 커스텀 React 컴포넌트와 액션으로 포크 없이 에디터를 확장합니다.

  5. AI 생성

    프롬프트로 요소를 생성해 캔버스에 스트리밍합니다. OpenAI, Anthropic, Azure, Google, OpenRouter 등 여러 제공자를 지원합니다.

  6. 데이터와 퍼블리싱

    API, JSON, 로케일 데이터에 연결되는 컬렉션 리스트, 검증과 조건부 필드를 갖춘 폼, 페이지 메타데이터와 JSON-LD, 그리고 모든 페이지의 로케일 전환.

역할

제가 맡은 부분.

담당

  • cms.synolink.ai의 클라이언트 개발을 총괄했습니다.
  • 그 아래에 있는 에디터 프레임워크 content-builder를 만들었습니다.

포함하지 않은 내용

  • 트래픽, 매출, 성능 수치는 공개하지 않습니다.

문의

빌더에 대해 궁금한 점이 있으신가요?

소개로 돌아가기
Synolink CMS 케이스 스터디 | 조하운