SaaS, 개발·AI
DatoCMS
형광펜 하이라이트를 더한 세리프 타이포그래피, 레거시 CMS의 문제점을 짚는 손그림 일러스트, 중앙 허브 구조도와 직무별 효익을 경쾌하게 풀어낸 헤드리스 CMS 홈입니다.
섹션 이미지 8
원본 사이트를 직접 캡처한 장면입니다. 이미지를 눌러 전체 높이로 살펴보세요.
8개 이미지
크게 보기형광펜 강조 세리프 제목과 고객 로고를 둔 헤드리스 CMS 히어로
히어로핵심 단어에 노란 형광펜 효과를 준 세리프 헤드라인과 무료 가입·영업 문의 버튼, Ricola·L'Officiel·Satispay·Wild 로고를 첫 화면에 배치합니다.
출처·촬영 조건
원본 사이트의 현재 데스크톱 화면을 직접 캡처했습니다. UIZZE가 보관한 팩 이미지와 다른 시점의 자료입니다.
CSS 뷰포트 1584 × 929 px. 정지 화면이며 실제 동작을 재현하지 않습니다.
원본 사이트 ↗
크게 보기개발자·디지털 마케터·콘텐츠 에디터 직무별 가치 제안
기능·콘텐츠 묶음기술 투자가 전사 팀원 모두에게 주는 효익을 개발자(확장성), 마케터(자율성), 에디터(멀티사이트 관리) 3개 역할 카드로 나누어 설명합니다.
출처·촬영 조건
원본 사이트의 현재 데스크톱 화면을 직접 캡처했습니다. UIZZE가 보관한 팩 이미지와 다른 시점의 자료입니다.
CSS 뷰포트 1584 × 929 px. 정지 화면이며 실제 동작을 재현하지 않습니다.
원본 사이트 ↗
크게 보기레거시 콘텐츠 인프라가 유발하는 3가지 병목 증상 일러스트
기능·콘텐츠 묶음수많은 CMS로의 파편화, 구형 기술로 인한 개발 지연, 글로벌 확장 한계를 유머러스한 손그림 일러스트와 체크리스트로 짚어냅니다.
출처·촬영 조건
원본 사이트의 현재 데스크톱 화면을 직접 캡처했습니다. UIZZE가 보관한 팩 이미지와 다른 시점의 자료입니다.
CSS 뷰포트 1584 × 929 px. 정지 화면이며 실제 동작을 재현하지 않습니다.
원본 사이트 ↗
크게 보기고객 이탈과 수익성 차이를 보여주는 외부 리서치 지표 카드
신뢰·근거Gartner, Harris, Oracle의 조사를 인용해 고객 경험 저하에 따른 이탈률(89%), 추가 지불 의향(86%), 멀티채널 통합 수익성(25%) 수치를 3열 카드로 제시합니다. 인용된 수치는 별도 검증하지 않았습니다.
출처·촬영 조건
원본 사이트의 현재 데스크톱 화면을 직접 캡처했습니다. UIZZE가 보관한 팩 이미지와 다른 시점의 자료입니다.
CSS 뷰포트 1584 × 929 px. 정지 화면이며 실제 동작을 재현하지 않습니다.
원본 사이트 ↗
크게 보기직무별 팀원과 멀티채널을 연결하는 중앙 허브 다이어그램
제품·UI 예시하단의 프로그래머·프론트엔드·마케터·에디터가 중앙의 DatoCMS 허브를 통해 웹사이트·챗봇·모바일·음성비서·스토어로 콘텐츠를 배포하는 흐름을 시각화합니다.
출처·촬영 조건
원본 사이트의 현재 데스크톱 화면을 직접 캡처했습니다. UIZZE가 보관한 팩 이미지와 다른 시점의 자료입니다.
CSS 뷰포트 1584 × 929 px. 정지 화면이며 실제 동작을 재현하지 않습니다.
원본 사이트 ↗
크게 보기통합 콘텐츠 관리·출시 시간 단축·글로벌 CDN 3대 강점
기능·콘텐츠 묶음단일 허브 기반 편집, 수개월에서 수시간으로 줄어드는 프로토타이핑, 200개 도시 글로벌 전송 네트워크를 캐릭터 일러스트와 함께 설명합니다.
출처·촬영 조건
원본 사이트의 현재 데스크톱 화면을 직접 캡처했습니다. UIZZE가 보관한 팩 이미지와 다른 시점의 자료입니다.
CSS 뷰포트 1584 × 929 px. 정지 화면이며 실제 동작을 재현하지 않습니다.
원본 사이트 ↗
크게 보기800+ 연구원·20+ 웹사이트를 통합한 고객 스토리 그리드
신뢰·근거Eurac Research의 대규모 단일 CMS 통합 사례를 대형 타이포그래피로 강조하고, 아래에 Le Pain Quotidien·Deltares 등의 성공 사례 카드를 배치합니다.
출처·촬영 조건
원본 사이트의 현재 데스크톱 화면을 직접 캡처했습니다. UIZZE가 보관한 팩 이미지와 다른 시점의 자료입니다.
CSS 뷰포트 1584 × 929 px. 정지 화면이며 실제 동작을 재현하지 않습니다.
원본 사이트 ↗
크게 보기무료 체험 플로팅 카드와 대안 CMS 비교·뉴스레터 푸터
푸터‘Start using DatoCMS today’ 카드 아래에 어두운 배경의 기능·프레임워크·경쟁사 비교(Contentful, Sanity, Strapi, WordPress) 링크와 뉴스레터 구독창을 결합합니다.
출처·촬영 조건
원본 사이트의 현재 데스크톱 화면을 직접 캡처했습니다. UIZZE가 보관한 팩 이미지와 다른 시점의 자료입니다.
CSS 뷰포트 1584 × 929 px. 정지 화면이며 실제 동작을 재현하지 않습니다.
원본 사이트 ↗디자인 연구를 위한 화면 기록입니다. 이미지에 포함된 브랜드·사진·서체 등 원본 소재의 프로젝트 사용 조건은 별도로 확인하세요.
구성 분석
형광펜 강조 세리프 제목과 무료 시작·영업 문의 버튼, 고객 로고를 둔 히어로 → 개발자·디지털 마케터·콘텐츠 에디터 직무별 가치 카드 → 레거시 콘텐츠 인프라의 3가지 병목 증상 일러스트 → 고객 이탈·비용 손실에 관한 리서치 인용 지표 → 직무별 작성자와 멀티채널(웹, 챗봇, 모바일, 음성, 스토어)을 잇는 중앙 허브 도식 → 통합 관리·빠른 출시·글로벌 CDN 3대 강점 설명 → 800+ 연구원·20+ 웹사이트 통합 사례 등 고객 스토리 → 시작 CTA 카드와 다크 푸터.
원본 홈페이지의 주요 구역 8개를 페이지 흐름에 따라 직접 촬영해 보관합니다.
디자인 관찰
굵은 세리프 헤드라인의 핵심 단어마다 노란색·민트색 형광펜 밑줄 효과를 적용하고, 유머러스한 핸드드로잉 캐릭터 일러스트를 곁들여 딱딱한 CMS 인프라 주제를 친근하게 전달합니다.
제품 기능을 바로 나열하기 전에 ‘레거시 CMS 때문에 돈을 잃고 있지 않나요?’라는 질문과 3가지 구체적인 고통(분산된 CMS, 느린 구형 기술, 확장 한계)을 먼저 짚어 문제의식을 환기합니다.
중앙의 DatoCMS 로고를 기점으로 하단의 개발자·마케터·에디터와 상단의 웹·모바일·챗봇·스토어 채널이 점선으로 연결되는 구조도를 통해 헤드리스 아키텍처의 개념을 비개발자에게도 한눈에 이해시킵니다. 인용된 외부 조사 수치는 별도 검증하지 않았습니다.
적용 메모
개발자와 현업(마케터, 에디터)이 함께 쓰는 B2B 도구를 소개할 때는 초반에 각 직무가 얻는 이점을 3개의 역할별 카드로 먼저 분리해 안내합니다.
기존 레거시 환경을 대체하는 제품은 해결책 제시 전에 고객이 겪는 대표적인 비효율 증상 3가지를 체크리스트와 일러스트로 공감 있게 풀어냅니다.
복잡한 백엔드·API 구조는 입력 주체(팀원)와 출력 채널(디바이스·서비스)을 잇는 한 장의 허브 앤 스포크 다이어그램으로 단순화해 보여줍니다.
프로젝트 적용 기록
아직 실제 프로젝트에 적용하지 않았습니다.
출처와 확인 범위
2026-10-27 UIZZE 공식 검색 메타데이터에서 팩 식별자와 링크를 확인했습니다. 현재 원본 공개 페이지를 별도로 관찰하고 주요 구역을 페이지 흐름에 따라 직접 촬영했습니다. UIZZE 팩 내부 파일의 촬영 조건과 내용은 확인하지 않았으며 원본 사이트와 보관 팩의 시점은 다를 수 있습니다.
원본 공개 홈페이지에서 확인한 주요 구역을 페이지 흐름에 따라 직접 캡처하고 자체 분석과 함께 보관합니다. 화면은 촬영 시점의 데스크톱 정지 장면이며 UIZZE 보관 팩 파일과는 별개입니다. 원본 소재의 프로젝트 재사용 조건은 별도 확인 대상입니다.
UIZZE 자료 모음 →