본문으로 건너뛰기
ASSETby WEMASHUP
레퍼런스 관리
← 디자인 팩

SaaS, 개발·AI

DatoCMS

형광펜 하이라이트를 더한 세리프 타이포그래피, 레거시 CMS의 문제점을 짚는 손그림 일러스트, 중앙 허브 구조도와 직무별 효익을 경쾌하게 풀어낸 헤드리스 CMS 홈입니다.

UIZZE 팩 확인 (새 탭)원본 사이트 (새 탭)

구성 분석

형광펜 강조 세리프 제목과 무료 시작·영업 문의 버튼, 고객 로고를 둔 히어로 → 개발자·디지털 마케터·콘텐츠 에디터 직무별 가치 카드 → 레거시 콘텐츠 인프라의 3가지 병목 증상 일러스트 → 고객 이탈·비용 손실에 관한 리서치 인용 지표 → 직무별 작성자와 멀티채널(웹, 챗봇, 모바일, 음성, 스토어)을 잇는 중앙 허브 도식 → 통합 관리·빠른 출시·글로벌 CDN 3대 강점 설명 → 800+ 연구원·20+ 웹사이트 통합 사례 등 고객 스토리 → 시작 CTA 카드와 다크 푸터.
원본 홈페이지의 주요 구역 8개를 페이지 흐름에 따라 직접 촬영해 보관합니다.

디자인 관찰

굵은 세리프 헤드라인의 핵심 단어마다 노란색·민트색 형광펜 밑줄 효과를 적용하고, 유머러스한 핸드드로잉 캐릭터 일러스트를 곁들여 딱딱한 CMS 인프라 주제를 친근하게 전달합니다.
제품 기능을 바로 나열하기 전에 ‘레거시 CMS 때문에 돈을 잃고 있지 않나요?’라는 질문과 3가지 구체적인 고통(분산된 CMS, 느린 구형 기술, 확장 한계)을 먼저 짚어 문제의식을 환기합니다.
중앙의 DatoCMS 로고를 기점으로 하단의 개발자·마케터·에디터와 상단의 웹·모바일·챗봇·스토어 채널이 점선으로 연결되는 구조도를 통해 헤드리스 아키텍처의 개념을 비개발자에게도 한눈에 이해시킵니다. 인용된 외부 조사 수치는 별도 검증하지 않았습니다.

적용 메모

개발자와 현업(마케터, 에디터)이 함께 쓰는 B2B 도구를 소개할 때는 초반에 각 직무가 얻는 이점을 3개의 역할별 카드로 먼저 분리해 안내합니다.
기존 레거시 환경을 대체하는 제품은 해결책 제시 전에 고객이 겪는 대표적인 비효율 증상 3가지를 체크리스트와 일러스트로 공감 있게 풀어냅니다.
복잡한 백엔드·API 구조는 입력 주체(팀원)와 출력 채널(디바이스·서비스)을 잇는 한 장의 허브 앤 스포크 다이어그램으로 단순화해 보여줍니다.

프로젝트 적용 기록

아직 실제 프로젝트에 적용하지 않았습니다.

출처와 확인 범위

2026-10-27 UIZZE 공식 검색 메타데이터에서 팩 식별자와 링크를 확인했습니다. 현재 원본 공개 페이지를 별도로 관찰하고 주요 구역을 페이지 흐름에 따라 직접 촬영했습니다. UIZZE 팩 내부 파일의 촬영 조건과 내용은 확인하지 않았으며 원본 사이트와 보관 팩의 시점은 다를 수 있습니다.

원본 공개 홈페이지에서 확인한 주요 구역을 페이지 흐름에 따라 직접 캡처하고 자체 분석과 함께 보관합니다. 화면은 촬영 시점의 데스크톱 정지 장면이며 UIZZE 보관 팩 파일과는 별개입니다. 원본 소재의 프로젝트 재사용 조건은 별도 확인 대상입니다.

UIZZE 자료 모음 →
카드에서 최대 3개를 선택해 비교하세요.

직접 복사하기

복사가 허용되지 않았습니다. 아래 내용을 선택해 복사하세요.

섹션 이미지

원본 사이트 ↗