큐레이션 · 오픈 · 무료

Umami

Umami는 Google Analytics의 간단하고 프라이버시 중심적인 오픈소스 웹 분석 대안입니다.

01

디자인 DNA

웹 분석을 위한 깔끔하고 미니멀한 대시보드입니다.

02

컬러

중립적인 흰색 배경에 주요 작업을 위해 단일 파란색 포인트 컬러를 사용하는 깔끔한 고대비 팔레트입니다.

03

타이포그래피

humanist-sans · monospace

• display63px · 800
• heading42px · 700
• body14px · 400
• small11px · 400

디스플레이 제목은 자간을 좁게 조정한 굵은 휴머니스트 산세리프 글꼴을 사용합니다. · 본문은 가독성을 위해 일반 굵기의 휴머니스트 산세리프 글꼴을 사용합니다. · 문서 내 코드 스니펫에는 고정폭 글꼴이 사용됩니다.

04

여백

간격 체계는 7px 기본 단위를 기반으로 합니다.

05

표면 (라운드 / 그림자 / 경계선)

1px solid rgba(0, 0, 0, 0.05)

rgba(0, 0, 0, 0.1) 0px 1px 3px 0px · rgba(0, 0, 0, 0.1) 0px 1px 2px -1px · rgba(0, 0, 0, 0.1) 0px 8px 10px -6px · rgba(0, 0, 0, 0.1) 0px 20px 25px -5px · rgba(0, 0, 0, 0.15) 0px 10px 40px 0px

06

레이아웃

히어로 섹션은 단일 열 레이아웃을 사용하며, 기능 및 콘텐츠 섹션을 위해 다중 열 그리드로 전환됩니다.

07

모션과 인터랙션

hover 및 focus 시 부드러운 색상과 배경색 트랜지션. · 차트와 같은 동적 콘텐츠를 위한 불투명도 페이드인.

버튼과 링크 같은 상호작용 요소에 hover 시 색상과 배경색이 변경됩니다. · 클릭 시 미세한 배경색 변화가 적용됩니다.

08

컴포넌트

• button 주요 작업을 위한 파란색 둥근 사각형 버튼으로, 텍스트는 흰색입니다.
• card 미세한 테두리와 연한 그림자가 있는 흰색 카드로, UI 목업을 표시하는 데 사용됩니다.
• chip 지표의 변화율을 표시하는 데 사용되는 작은 둥근 뱃지입니다.
• input 미세한 테두리가 있는 표준 텍스트 입력 필드입니다.
• hero 군�은 헤드라인, 부제목, 주요 CTA 버튼으로 구성된 크고 중앙 정렬된 히어로 섹션 뒤에 UI 목업이 배치됩니다.

09

보이스와 금지 목록

• 톤 간결하고 자신감 있으며 도움이 되는 어조로, 단순함과 프라이버시를 강조합니다.
• 헤드라인 핵심 가치 제안을 강조하는 굵고 크며 간결한 문장입니다.
• CTA '무료로 시작하기'와 같이 명확하고 행동 지향적인 문구를 사용합니다.

• 어두운 배경을 사용하지 마세요. 스크린샷은 주로 흰색(#ffffff) 배경을 보여줍니다.
• 여러 포인트 컬러를 사용하지 마세요. 스크린샷은 단일 파란색(#3366FF) 포인트만 보여줍니다.
• 9.45px 이상의 둥근 모서리를 사용하지 마세요. 스크린샷은 절제된 둥글기를 보여줍니다.
• 모든 요소에 그림자를 사용하지 마세요. 스크린샷은 카드와 같은 특정 구성 요소에만 그림자를 보여줍니다.
• 제목에 세리프 글꼴을 사용하지 마세요. 스크린샷은 모든 제목에 휴머니스트 산세리프를 사용합니다.
• 좁고 비좁은 레이아웃을 사용하지 마세요. 스크린샷은 넉넉한 여백과 패딩을 보여줍니다.
• 밀도 높고 정보가 많은 히어로 섹션을 사용하지 마세요. 스크린샷은 명확하고 집중된 헤드라인과 단일 CTA를 보여줍니다.
• 다크 모드 테마를 사용하지 마세요. 스크린샷은 라이트 테마를 보여줍니다.
• 피하기: 복잡한 전문 용어 또는 지나치게 기술적인 언어 사용.
• 피하기: 지나치게 과장된 홍보 문구나 허풍을 떠는 단어 사용.
• 피하기: 장난스럽거나 지나치게 캐주얼한 어조 사용.

10

팩 안의 실제 스크린샷

실제 페이지에서 캡처 · 실 computed styles

11

System Prompt

en · zh-CN · zh-TW · ja · ko