ADYou 를 만드는 규칙
흰 캔버스 위 잉크 한 색, 시그니처 표면 카드로 리듬, 굵기보다 크기로 위계, hover 없음, 알약은 요금만. 화면·문구·자산 전부 이 문서대로 만들고, 새 규칙이 생기면 여기에 먼저 적어요.
로고 — 스티어링 휠
「광고, 내가 직접 운전한다」. 링 하나, 스포크 셋(9시·3시·6시), 허브 하나. 워드마크는 Pretendard 800, 자간 -0.045em 으로 타이트하게 — 심벌의 굵은 링과 무게를 맞춘다.
여백·크기
로고 주변 여백은 마크 높이의 1/2 이상. 마크 최소 20px, 가로형 최소 높이 24px. 워드마크 자간은 -0.045em, 굵기 800.
색
밝은 바탕엔 잉크(#181d26), 어두운·시그니처 바탕엔 흰색. 다른 색·그라디언트·그림자·외곽선 금지.
하지 않기
회전·기울임·늘리기 · 마크 안에 글자 넣기 · 「Adpilot」 옛 이름 병기 · 마크만 쓸 때 다른 아이콘과 나란히 같은 크기로 두기(마크는 항상 한 단계 크게).
색
바탕은 흰색, 글자와 주 버튼은 잉크 한 색. 브랜드의 힘은 액센트가 아니라 시그니처 표면 카드(코랄·포레스트·다크·크림)에서 나온다. 링크 파랑을 버튼에 쓰지 않는다.
바탕·글자
시그니처 표면
의미색
타이포
Pretendard Variable 한 가족. 위계는 크기로, 굵기는 400·500(히어로만 600). 본문 16px · 줄간 1.65 · 한글 가독성을 위해 회색을 진하게 쓴다. 요금 화면만 475 굵기 + 알약 버튼의 별도 방언.
| 토큰 | 크기 · 굵기 · 줄간 | 용도 | 보기 |
|---|---|---|---|
| hero-title | 56px · 600 · 1.08 | 히어로 제목(폰 38) | 대행사 없이, 당신이 직접. |
| display-xl | 48px · 500 · 1.1 | 큰 편집 제목 | 광고를 24시간 집행하고 |
| display-md | 32px · 500 · 1.2 | 섹션·페이지 제목 | 세 번만 확인하면 광고가 나갑니다. |
| title-lg | 24px · 500 · 1.35 | 카드 큰 제목 | 내 광고 |
| title-md | 20px · 500 · 1.5 | 카드 제목 | AI가 읽은 내용 |
| title-sm | 18px · 500 · 1.4 | 단계 카드 제목 | 주소를 넣으면 AI가 사이트를 읽어요 |
| label-md | 16px · 500 | 라벨 · 버튼 | 광고 시작하기 |
| body | 16px · 400 · 1.65 | 본문 | 소재 제작, 매체 등록, 성과에 따른 조정, 보고까지 전부 자동. |
| body-sm | 15px · 400 · 1.6 | 설명 | 어느 단계에서든 말로 고칠 수 있어요. |
| caption | 13.5px · 500 | 캡션 · 힌트 | 가입 무료 · 광고 시작 전까지 0원 |
| pricing-display | 44.8px · 475 | 요금 화면 숫자(방언) | 10% |
간격 · 모양 · 깊이
4px 그리드. 섹션 사이 96px(폰 64). 그림자는 쓰지 않고 색 블록과 헤어라인으로 깊이를 만든다.
간격
라운드
입력 · 배지 · 칩
카드 · 데모 표면
주 버튼 · 시그니처 카드
아이콘 버튼 · 요금 알약
깊이
- 평면 — 본문·내비·푸터(테두리 없음 · 내비는 스크롤 시 헤어라인)
- 헤어라인 1px #ddd — 카드·입력·표 구분선·보조 버튼
- 색 블록 — 시그니처·파스텔 표면이 깊이를 만든다
- 포커스 — 파란 링 2px(#458fff)
- 그림자 · 글로우 · 그라디언트 · 이모지 — 쓰지 않는다
표면 리듬
긴 페이지는 두세 화면마다 시그니처 카드로 박자를 준다. 같은 표면을 연달아 두 번 쓰지 않는다. 랜딩 순서: 흰 → 코랄 → 크림 → 흰(파스텔 그리드) → 포레스트 → 흰 → 다크.
컴포넌트
전부 `components/ui.tsx` 와 `globals.css` 의 클래스. 브라우저 기본 팝업·기본 슬라이더·기본 셀렉트는 쓰지 않는다. 아래는 실제로 동작하는 데모.
버튼
주 버튼은 한 화면에 하나. 보조 버튼과 짝으로 쓴다. hover 스타일은 없고 Default·Active·Disabled 만.
입력
44px · 6px 라운드 · 포커스는 파란 링. 라벨은 위, 힌트는 아래.
선택 · 칩 · 스위치 · 슬라이더 · 세그먼트
선택 카드는 잉크 테두리 2px + 체크 원. 칩은 눌리면 잉크 채움. 슬라이더는 잉크 채움 트랙.
탭 · 단계 레일 · 배지
탭은 밑줄. 단계 레일은 완료=체크, 현재=잉크 채움. 배지는 6px 라운드(알약 금지).
- 주소·예산
- 2브리프 확인
- 3광고 확인·시작
알림 · 다이얼로그 · 토스트
브라우저 기본 alert/confirm/prompt 는 쓰지 않는다. 위험 액션은 코랄 버튼.
아코디언
+ 가 × 로 돌아간다. 한 번에 하나만 열림.
네. 사이트 주소와 한 달 예산만 넣으면 AI가 사이트를 읽고 브리프를 보여 드려요.
「광고 시작」을 누른 순간부터, 계획에 적힌 하루 예산만큼만요.
통계 타일 · 표
숫자는 tabular-nums. 타일 배경은 파스텔 표면으로 구분.
| 매체 | 방향 | 쓴 돈 | 클릭률 |
|---|---|---|---|
| 페이스북·인스타그램 | 핵심 혜택형 | ₩318,000 | 1.41% |
| 구글 | 첫 주문 혜택형 | ₩294,400 | 0.62% |
체크 아이콘 · 선 아이콘
이모지 대신 잉크 선 아이콘(1.75px). 의미색은 성공 초록 · 위험 코랄만.
문장 규칙
화면 문구는 광고를 모르는 사장님이 읽어도 바로 이해해야 하고, 엔진이 실제로 하는 일만 말해야 한다.
반응형
카드는 줄어들지 않고 열 수가 줄어든다. 표·단계 레일·탭은 가로 스크롤(의도). 터치 목표 44px 이상.
| 구간 | 폭 | 바뀌는 것 |
|---|---|---|
| 폰 | < 768px | 한 열 · 내비는 전체 시트 · 그리드 1열 · 시그니처 패딩 28/22 · 히어로 38px · 히어로 폼 세로(입력 56px 고정) · 소재 벽 3열 |
| 태블릿 | 768~1024 | 2열 · 두 열 레이아웃은 한 열로 · 시그니처 그리드 한 열 |
| 데스크톱 | 1024~1440 | 3~4열 · 컨테이너 1280 · 거터 48 |
| 와이드 | > 1440 | 데스크톱과 같음 · 바깥 여백만 늘어남 |
내려받기
SVG 는 원본, PNG 는 2배 해상도. OG 이미지는 1200×630.
