UI 시각 설계 노트

웹 화면은 상단 탐색 바(Header) → 핵심 가치를 보여주는 첫 화면(Hero) → 본문 구획(Section) → 하단 정보(Footer)로 나뉜다. 와이드 모니터에서 글줄이 끝없이 길어지면 시선이 다음 줄을 놓치므로 컨테이너 최대 폭을 고정한다.

• 12컬럼 그리드는 2·3·4·6으로 모두 나누어떨어져 2단(6:6), 3단(4:4:4), 비대칭(8:4) 배치를 하나의 격자 위에서 정렬해 준다.
• 첫 화면(Above the Fold, 스크롤 전 영역)에는 핵심 제목 1줄 + 보조 설명 2줄 + 주 행동 버튼 1개 + 대표 시각물만 남겨 시선을 집중시킨다.

선을 따로 긋지 않아도 가까이 붙어 있는 요소는 같은 묶음으로 인식된다(게슈탈트 근접성). 임의의 숫자(13px, 19px, 27px) 대신 8배수 간격만 쓰면 화면 전체에 일정한 리듬이 생긴다.

• 8pt 기본 스케일: 4px(초밀착) · 8px(아이콘-텍스트) · 12px(소그룹) · 16px(기본 간격) · 24px(카드 패딩) · 32px(중그룹) · 48~64px(큰 구획) · 80~96px(섹션 분리).
• 정렬 기준선 최소화: 한 화면에서 글자와 박스가 시작되는 세로 정렬선(Alignment Line)은 2~3개 이하로 맞추고, 본문과 폼은 왼쪽 정렬을 기본으로 둔다.

눈을 가늘게 뜨고 화면을 흐릿하게 봤을 때 1순위(초점) → 2순위(구조) → 3순위(보조) 덩어리가 명확히 나뉘어야 한다. 모든 글자를 크게 굵게 키우면 오히려 아무것도 눈에 들어오지 않는다.

• 1순위(초점): 페이지 핵심 제목과 주 행동 버튼(Primary CTA) 단 1개 — 가장 큰 크기와 가장 높은 명도 대비.
• 2순위(구조): 섹션 소제목, 카드 타이틀, 핵심 요약 지표 — 중간 크기와 굵기(600~700).
• 3순위(보조): 부연 설명, 날짜, 태그, 캡션 — 12~14px 크기와 한 단계 낮춘 회색(--text-muted)으로 힘을 뺀다.

모든 UI 부품은 정지된 그림 한 장이 아니라 세 가지 축의 조합으로 관리한다. 이 규격이 맞아야 입력창 옆에 버튼을 나란히 놓았을 때 높이가 1px 오차 없이 정렬된다.

• 변형(Variant): 강조 정도에 따른 역할 구분 (Primary · Secondary · Outline · Ghost · Destructive).
• 크기(Size): 한 줄에 나란히 배치되는 입력창(Input), 셀렉트(Select), 버튼(Button)은 동일한 높이 토큰(예: 40px)을 공유한다.
• 상태(State): 기본(Default) · 호버(Hover) · 키보드 포커스(Focus-visible) · 클릭 순간(Active) · 비활성(Disabled) · 처리 중(Loading) 6가지를 정의한다.

한 화면이나 카드 안에 진한 배경의 Primary 버튼이 여러 개 있으면 무엇이 핵심 행동인지 흐려진다. 가장 중요한 행동 단 하나만 Primary로 두고 나머지는 보조 등급으로 힘을 뺀다.

• Primary(주 행동): 화면당 1개 원칙. 채움 배경과 높은 대비로 시선을 유도한다 (예: 저장하기, 결제하기).
• Secondary / Outline(보조 행동): Primary 옆에 놓이는 대안 행동 (예: 임시저장, 목록으로).
• Ghost(3순위 보조): 배경과 테두리 없이 호버 시에만 은은한 면이 생기는 도구형 버튼 (예: 취소, 닫기, 북마크).
• Destructive(파괴적 행동): 계정 삭제·영구 제거처럼 되돌릴 수 없는 위험 동작에만 빨간 계열을 제한적으로 사용한다.

본문과 버튼 곳곳에 컬러 이모지(🔥🚀✨💡)를 섞어 쓰면 인상이 가벼워지고 전형적인 자동 생성 화면처럼 보인다. 아이콘은 글자를 돕는 보조 기호로만 절제해서 쓴다.

• 단일 아이콘 패밀리 유지: Lucide, Heroicons, Phosphor 등 한 가지 선형(Outline) 아이콘 세트로 통일한다.
• 선 굵기(stroke-width: 1.5~1.75px)와 기본 크기(16px / 20px)를 고정해 본문 서체 두께와 균형을 맞춘다.
• 아이콘 단독 버튼(닫기 ×, 검색, 북마크)에는 스크린 리더용 `aria-label`과 최소 36~44px 클릭 영역을 확보한다.

코드에 `#3b82f6` 같은 원시 색상값을 직접 적는 대신 역할 이름(시맨틱 토큰)을 붙여 관리한다. 화면 면적의 60%는 기본 배경, 30%는 카드·보조 표면, 10% 이하만 강조색(Primary)으로 써야 강조점이 명확해진다.

• 순수 검정(#000000)과 순수 회색 대신 살짝 정돈된 슬레이트 중립색(#0f172a, #475569, #f6f7f9)을 쓰면 화면이 차분하게 가라앉는다.
• 다크 모드는 단순 색상 반전이 아니다: 바닥 배경은 깊은 어두운 톤(#0b0f17)으로 깔고 위로 올라오는 카드·모달일수록 한 단계씩 밝은 표면(#131926 → #1c2436)을 쓴다.
• 장식용 그라데이션을 배제하고 매트한 단색 면(Solid Surface)과 1px 미세 테두리(Hairline Border)로 경계를 나눈다.

서체는 본문용 산세리프(Pretendard 등) 1종과 코드·수치용 고정폭(JetBrains Mono 등) 1종이면 충분하다. 한글은 영문보다 획이 촘촘하므로 줄 간격을 넉넉히 잡고 어절 중간 끊김을 막아야 읽기 편하다.

• 본문 기본 크기는 15~16px 이상을 유지하고 보조 캡션도 12px 미만으로 줄이지 않는다.
• `word-break: keep-all`을 적용해 한글 단어가 어절 중간에서 끊기는 현상을 막는다.
• 가격·퍼센트·카운터 숫자가 바뀌는 영역에는 `font-variant-numeric: tabular-nums`로 숫자 폭 흔들림을 막는다.

바깥 카드와 안쪽 버튼의 모서리 둥글기를 똑같이 `16px`로 주면 모서리 두께가 어색해 보인다. 동심원처럼 자연스럽게 맞물리려면 바깥 곡률에서 패딩만큼 뺀 값을 안쪽 곡률로 쓴다.

• 예시: 카드 안쪽 요소 곡률이 `10px`이고 패딩이 `10px`이면 카드 바깥 곡률은 `20px`일 때 자연스럽다.
• 모션 타이밍: 호버 피드백은 `120~160ms`, 드로어·모달 등장은 `200~260ms ease-out`, 퇴장은 `150ms ease-in`으로 짧게 끝낸다.
• 레이아웃 재계산을 부르는 `top/left/height` 대신 `transform`과 `opacity`만 애니메이션한다.

가장 작은 원자 단위부터 규칙을 쌓아 두면 맨 아래 토큰 값 하나만 바꿨을 때 모든 부품과 페이지가 한꺼번에 갱신된다.

• 원시 토큰(Primitive): 색상과 수치 자체 (`--slate-900: #0f172a`, `--space-4: 16px`).
• 시맨틱 토큰(Semantic): 화면에서의 역할 (`--text-main: var(--slate-900)`, `--border-subtle`).
• 컴포넌트 토큰(Component): 특정 부품 전용 규격 (`--btn-height-md: 40px`, `--card-radius: 16px`).

AI 모델은 인터넷의 흔한 홍보용 랜딩페이지 스타일을 기본값처럼 꺼내 쓰려는 경향이 있다. 무엇을 더할지보다 무엇을 금지할지 못 박아 두는 것이 훨씬 효과적이다.

• 무지개 텍스트 그라데이션 → 단색 고대비 타이포(`#0f172a`)와 굵기 대비로 대체.
• 배경 네온 빛 번짐(Glow) 장식 → 매트한 단색 배경(`#f6f7f9`)과 정돈된 여백으로 대체.
• 제목·버튼 옆 컬러 이모지 남발(🚀✨💡🔥) → 단일 선형 SVG 아이콘 세트로 통일하거나 제거.
• 박스 안의 박스 안의 박스(삼중 테두리) → 겹치는 외곽선을 걷어내고 여백 비례로만 구분.
• 획일적인 1×1 3열 카드 반복 → 중요도에 따른 비대칭 그리드나 깔끔한 표(Table)로 전환.

'세련되게' 같은 추상적 표현 대신 검증된 디자인 시스템의 특성을 기준점으로 삼으면 결과물이 흔들리지 않는다.

• 문서·아카이브·노트 계열: Notion, Stripe Docs (넓은 여백, 차분한 무채색, 명확한 타이포 위계).
• 생산성 도구·이슈 트래커 계열: Linear, Raycast, Vercel Geist (1px 미세 보더, 고밀도 정렬, 단축키 중심).
• 모바일 금융·생활 서비스 계열: Toss Design System(TDS), Apple HIG (넉넉한 터치 타겟, 한 화면 1과업).