미니멀 모던 UI: 완성된 느낌의 미니멀 사이트

개인 사이트, 포트폴리오, 랜딩 페이지 및 블로그를 위한: 작고 콘텐츠 우선인 사이트로, 절제와 디테일이 돋보입니다. 웹 앱, 제품 인터페이스, 대시보드 또는 도구에는 적합하지 않습니다. 이러한 것들의 문제(앱 상태, 데이터 밀도, 복잡한 양식)는 다른 지침이 필요합니다.

여기의 모든 것은 일반 HTML, CSS 및 약간의 바닐라 JS로 구성되어 있어 모든 스택 또는 스택이 없어도 사용할 수 있습니다. 프로젝트에 이미 빌드 또는 템플릿 설정이 있는 경우 이를 사용하세요. 원칙은 변하지 않습니다.

이는 템플릿이 아닌 나침반입니다. 각 규칙은 이유와 주제와 사용자의 취향에 맞게 조정할 수 있는 시작점을 제공합니다. 확실로 표시된 항목은 건너뛰지 말아야 할 몇 가지 사항입니다.

지원 파일(필요할 때 읽기):

references/snippets.md: 복사-붙여넣기 빌딩 블록(토큰, 베이스, 산문, 게시물 목록, 양식, 모션).
references/interface-checklist.md: Vercel의 웹 인터페이스 가이드라인을 기반으로 한 상세한 상호 작용, 양식, 콘텐츠 및 성능 점검 목록.
references/ship-checklist.md: SEO, 소셜 미리보기, RSS, 분석, 호스팅.
references/lessons.md: 실제 프로젝트에서 얻은 함정 및 브라우저 확인 팁.
references/templates.md: 10개의 Carrd 랜딩 페이지 템플릿의 측정값 (Carrd 템플릿 번호로 인용, 예: #304). 눈을 교정하기 위한 참조 데이터이지 규칙이 아닙니다.

1. 워크플로우

작업을 이해하세요. 누구의 사이트인지, 누구를 위한 것인지, 방문자가 해야 하거나 배워야 할 한 가지, 필요한 페이지, 그리고 '완료'가 무엇을 의미하는지 파악하세요. 빌드에 영향을 미치는 답변(최종 도메인, 방문자 추적 여부, 콘텐츠 소유자, 가져올 기존 콘텐츠(게시물, 프로젝트)가 있는지)이 있을 때 질문하세요.
방향을 설정하고(§2) 기록하세요: 프로젝트 노트(CLAUDE.md, AGENTS.md 또는 README)에 색상 토큰, 타이프 페어링, 간격 및 반경 스케일, 모션 특성을 기록하여 이후 세션에서 일관성을 유지하세요.
공유 요소를 설정하세요(§3): 첫 번째 페이지 전에 토큰, 기본 스타일, 레이아웃 프리미티브, 컴포넌트 그리고 헤더, 푸터 및 <head>의 단일 소스를 마련하세요. 첫 페이지를 포함한 모든 페이지는 이 요소들로 구축됩니다.
실제 카피를 먼저 사용하세요. 플레이스홀더 텍스트는 레이아웃 문제를 숨깁니다. 페이지 레시피(§4)를 따르세요.
정적이고, 반응형이며, 접근 가능하게 구축한 다음, 모션을 추가하고, 마지막으로 다듬으세요.
출시하고(§11), 브라우저에서 확인한 후(§12), 절제 패스를 수행하세요(§13).
작고 눈에 띄는 단계로 반복하세요. 한 번에 하나의 변경 사항을 적용하고, 살펴보고, 추측하는 대신 취향에 대한 의견을 묻고, 확인된 것과 확인되지 않은 것을 명확히 말하고, 요청이 있을 때만 커밋하거나 게시하세요.

2. 방향 선택하기

미니멀리즘이 기본입니다: 콘텐츠 우선, 하나의 악센트, 넉넉한 공간, 박스 대신 가는 선, 작은 모션. 모든 요소는 의미를 전달해야 하며, 그렇지 않은 장식은 제거됩니다.

패밀리	룩	주로 적합한 경우
조용한 라이트	거의 흰색, 중립 산세리프, 가는 선 구분선, 하나의 선명한 악센트	개인 사이트, 블로그, 글쓰기
조용한 다크	거의 검은색, 가벼운 무게의 큰 타입, 하나의 악센트, 메타데이터용 고정폭	엔지니어링 및 개인 사이트, 런칭
에디토리얼	디스플레이 또는 본문용 세리프, 넉넉한 행 길이, 아웃라인 버튼	장문의 글, 책, 문화; 기술 관객에게는 구식으로 보일 수 있으므로 먼저 실제로 보여주세요
소프트 글로우	조용한 베이스에 미묘한 그라데이션 또는 방사형 글로우, 선택적 프로스티드 표면	약간의 따뜻함이 필요한 랜딩 페이지
하나의 볼드 블록	조용한 베이스에 하나의 전체 너비 컬러 블록 또는 액자 사진	포트폴리오, 이벤트, 개인 브랜드

톤이 참신함보다 중요합니다. 진지한 주제는 차분하고 신뢰할 수 있는 디자인을 원합니다. 장난기 있는 폰트와 시끄러운 효과는 일반적으로 거절됩니다.
청중의 관습에 맞추세요. 기술 관객은 일반적으로 거의 흰색 또는 거의 검은색 배경에 하나의 선명한 악센트가 있는 중립 산세리프를 기대합니다. 다른 청중은 각자의 관습이 있습니다. 여러 방향을 제안할 때는 폰트와 종이 색상뿐만 아니라 레이아웃과 표면(목록 페이지, 고정 분할, 카드 그리드, 하나의 컬러 블록)도 달라야 사용자가 실제 대안 중에서 선택할 수 있습니다.
취향을 모를 때는 실제로 시도해보세요. 실제 페이지에서 폰트, 악센트 또는 간격을 바꾸고 사용자의 반응을 살펴보세요. 몇 번의 시도가 필요할 수 있습니다.
사용자의 취향이 이 가이드보다 우선합니다. 사용자가 방향을 수락하거나 거절하면 프로젝트 노트에 기록하고 여기의 기본값보다 이를 따르세요.

3. 공유 스타일 및 컴포넌트

두 번째 페이지는 스타일이 복사된 것이 아니라 동일한 요소로 구축되었기 때문에 첫 번째 페이지와 같아 보여야 합니다.

토큰의 단일 소스. 색상, 타입 스케일, 간격, 반경, 그림자 및 모션 타이밍은 하나의 파일에 있는 사용자 정의 속성입니다. 페이지와 컴포넌트는 토큰을 사용하며, 절대 원시 값을 사용하지 않습니다. 페이지 스타일의 16진수 코드 또는 일회성 픽셀 크기는 수정해야 할 버그입니다.
페이지가 아닌 컴포넌트 스타일링. .btn, .card, .field, .prose, .post-list, .site-header; .about .blue-box가 아닙니다. 변형은 수정자(.btn--outline)이며, 편집된 복사본이 아닙니다. 페이지 스타일은 컴포넌트를 배열할 뿐이며 짧게 유지됩니다.
CSS 계층화: 토큰 → 기본 → 레이아웃 프리미티브 → 컴포넌트 → 페이지 배열, @layer로 선언하여 페이지 규칙이 컴포넌트를 조용히 무시하지 못하게 합니다(스니펫 참조).
공유 크롬을 한 번 작성하세요. 헤더, 탐색, 푸터, <head> 및 사이트 스크립트는 하나의 소스(프로젝트의 includes, partials 또는 템플릿, 또는 작은 빌드 스크립트)에서 가져옵니다. 수동으로 복사한 헤더는 엇나가기 쉽습니다. 두 페이지 사이트에서 복사가 불가피한 경우 그렇게 말하고 각 변경 후 모든 복사본을 다시 확인하세요. aria-current="page"로 탐색 메뉴에서 현재 페이지를 표시하세요.
마크업에 의한 동작. 하나의 사이트 스크립트가 데이터 속성과 클래스를 통해 표시 및 공개를 처리하므로 새 페이지는 페이지별 JS 없이도 이를 사용할 수 있습니다.
인벤토리를 유지하세요. 프로젝트 노트에 컴포넌트(이름, 용도, 변형)를 나열하세요. 새 페이지에서는 먼저 재사용하고; 새로운 것은 공유 파일과 목록에 추가되며 페이지에 추가되지 않습니다. 각 상태와 테마의 모든 컴포넌트를 보여주는 styleguide.html은 변경 후 빠른 점검을 제공합니다.
오늘은 단일 페이지인가요? 어쨌든 토큰과 컴포넌트를 페이지 스타일과 분리하세요. 다음 페이지는 조립이 될 것입니다.

4. 페이지 레시피

랜딩 페이지

히어로: 첫 번째 뷰포트에 하나의 헤드라인, 한 문장의 리드, 주요 액션(또는 가입 양식 자체)을 배치하세요.
그런 다음 방문자의 질문에 순서대로 답하는 섹션: 그것이 무엇인지, 작동 방식(번호가 매겨진 단계와 하나의 작은 그림), 증거(짧은 인용문, 로고, 실제 숫자), FAQ, 푸터.
피치를 반복하지 마세요. 히어로가 양식을 보유하고 있다면, 그것을 다시 설명하는 마감 블록은 아무것도 추가하지 않습니다.

개인 사이트 / 포트폴리오

이름과 그 사람이 하는 일에 대한 한 줄, 그 다음 짧은 섹션: 작업 또는 프로젝트, 글쓰기, 소개, 연락처.
프로젝트와 게시물의 경우 카드 그리드보다 가는 선이 있는 목록이 더 좋습니다. 하나의 액자 사진으로 충분한 이미지입니다.
연락처는 사용자가 요청하지 않는 한 양식이 아닌 일반 링크(이메일, 프로필)입니다.

블로그 인덱스

카드가 아닌 목록: 제목, 날짜(<time datetime>), 선택적으로 한 줄 요약. 게시물이 많아지면 연도별로 그룹화하세요. 전체 행이 링크이며, 죽은 영역이 없습니다.
기본 썸네일은 없습니다. 페이지 매김 또는 하나의 긴 페이지 모두 작동합니다. 노트에 무엇을 사용할지 명시하세요.

블로그 게시물

약 60–72자의 읽기 열, 본문 17–19px, 줄 높이 1.6–1.75 (§5).
상단에 제목, 날짜 및 선택적 읽기 시간; 앵커와 scroll-margin-top이 있는 제목; 긴 게시물에만 목차.
캡션이 있는 그림은 텍스트보다 더 넓게 나올 수 있습니다. 코드 블록은 내부에서 스크롤되며 페이지는 절대 스크롤되지 않습니다.
다음 단계로 끝내기: 이전/다음 게시물 또는 더 많은 게시물의 짧은 목록, RSS 링크.

유형 간 공유 사항

헤더: 탐색 메뉴 또는 아무것도 없음. 브랜드 반대편의 외로운 버튼 하나는 미완성처럼 보입니다.
푸터는 하단에, 짧은 페이지에서도(전체 높이 flex column), 아래에 여분의 여백이 없습니다.
모든 상태 디자인: 비어 있음(아직 게시물 없음), 매우 긴 제목, 누락된 이미지, 사이트 디자인의 404 페이지.

5. 타이포그래피

하나 또는 두 개의 패밀리: 중립적인 본문 얼굴(시스템 스택도 괜찮음)에 최대 하나의 디스플레이 얼굴. 날짜, 코드 및 메타데이터용 고정폭은 가치가 있을 경우에만 세 번째 얼굴입니다.
제목은 현대적으로 크고, 가볍고, 촘촘하게 트래킹되어 보입니다: 히어로의 경우 약 40–72px, 가중치 300–500, 네오 그로테스크의 경우 자간 −0.02 ~ −0.05em, 줄 높이 1.1–1.25, clamp()로 크기 조정.
짧은 페이지의 섹션 제목(개인 사이트, 블로그 인덱스): 본문의 약 1.25배(≈20px), 세미볼드, 텍스트 색상. 희미한 대문자 레이블은 너무 약합니다. 디스플레이 크기는 히어로와 경쟁합니다.
읽기 텍스트. 17–19px, 줄 높이 1.6–1.75, 60–72ch 측정, 문단 간격 약 1em. 보조 텍스트는 더 작은 크기가 아닌 음소거된 색상을 사용합니다.
깔끔한 줄: 제목에는 text-wrap: balance, 문단에는 text-wrap: pretty를 사용하여 외로운 단어를 피하세요.
타이포그래피 세부 사항: 둥근 따옴표(“ ”), 생략 부호(…), 숫자와 단위 사이의 줄 바꿈 없는 공백(10 MB), 목록의 날짜와 숫자에는 tabular-nums. 브랜드 및 제품 이름은 translate="no"로 표시하여 브라우저 번역이 그대로 두도록 하세요.
워드마크: 섹션 제목 옆에서 스스로 자리잡을 수 있을 만큼 충분히 큼(종종 1.2–1.6×); 한 단어 내의 무게 대비(라이트 + 엑스트라 볼드)는 저렴하게 개성을 더합니다.
양쪽 정렬 텍스트는 lang 설정과 hyphens: auto가 있는 경우에만 사용하고, 좁은 열에서는 절대 사용하지 마세요.

6. 색상 및 표면

:root의 토큰: 배경, 표면, 텍스트, 음소거, 가는 선 색상, 하나의 악센트(선택적 두 번째 그라데이션 정지점) 및 온-악센트 색상.
대비 (확실). 본문 텍스트는 실제 표면에서 최소 4.5:1(WCAG 2)이어야 하며, 반투명 또는 그라데이션 표면의 가장 밝은 지점에서 확인하세요. 가벼운 무게의 디스플레이 타입은 더 많은 대비가 필요합니다. APCA는 얇은 타입에 유용한 두 번째 의견이지만, 대체는 아닙니다. 항상 링크 색상을 설정하세요. 브라우저 기본 파란색은 거의 모든 디자인에서 잘못 보입니다.
몇 개의 작은 표시를 위한 악센트: 헤드라인의 한 단어, 링크, 호버 및 포커스, 현재 탐색 항목. 큰 색상 블록이 아니며, 목록 번호 매기기에 사용하지 않습니다.
표면: 기본적으로 평평하고 가는 선이 있습니다. 그림자는 사용될 때 두 개의 레이어(부드러운 주변광과 더 좁은 직접광)가 있습니다. 테두리는 반투명할 수 있으므로 모든 배경에서 가장자리가 선명하게 유지됩니다. 내부 반경은 컨테이너의 반경보다 절대 크지 않습니다. 색상이 있는 배경에서는 테두리와 그림자를 색조로 물들입니다.
호버와 포커스는 정지 상태보다 대비를 높입니다.
라이트, 다크 또는 둘 다. 일찍 결정하세요. 하나의 고정된 구성도 괜찮습니다: color-scheme과 theme-color를 일치시키도록 설정하세요. 둘 다의 경우, prefers-color-scheme: dark 아래에 동일한 토큰을 재정의하고(토글이 있는 경우 [data-theme] 재정의 추가) 각각에서 대비, 그림자, 이미지 및 코드 블록을 확인하세요.
배경: 단색, 또는 하나의 부드러운 그라데이션 또는 글로우; 패턴은 ≤10% 대비에서만 사용하세요. 절대 두 가지 시끄러운 것은 사용하지 마세요.

7. 모션

모션은 누군가가 무엇이 변경되었는지 또는 어디를 봐야 하는지 보는 데 도움이 되어야 합니다. 이러한 사이트에서는 일반적으로 적을수록 좋습니다.

기본값: 로드 시 주요 콘텐츠의 짧은 페이드 인(약간의 상승)과 호버/포커스 피드백. 이것만 있는 페이지는 완전하고 차분한 결과입니다.
스크롤 표시는 선택 사항이며 미묘하게 유지됩니다: 불투명도와 6–20px의 움직임, ease, 0.3–1초, 약 25% 가시성에서 한 번 재생. 거리에 따라 계단식(헤딩이 가장 적게 움직이고 버튼이 가장 많이 움직임); 100–150ms 간격, 최대 6–8개 항목. 긴 형식의 읽기 콘텐츠에는 절대 사용하지 마세요.
CSS 우선, 그 다음 Web Animations API, 진정으로 필요한 경우에만 JS 라이브러리.
opacity 및 transform만 애니메이션하고, 전환되는 속성을 명시적으로 나열하고(transition: all 절대 사용하지 않음), 모션이 물리적으로 시작되는 곳에 transform-origin을 설정하세요. SVG의 경우 transform-box: fill-box로 <g>를 애니메이션하세요.
중단 가능: 고정된 타임라인이 아닌 전환이므로, 호버 아웃 또는 두 번째 클릭이 부드럽게 반전됩니다.
호버/포커스: 버튼은 약 1.02–1.06으로 확대되거나 들어 올려집니다. 네비게이션 및 텍스트 링크는 왼쪽에서 슬라이드 인하는 2px 밑줄을 얻으며, :focus-visible에서도 마찬가지입니다.
주변 모션: 최대 하나의 느린 루프, 또는 없음. 반복 미디어는 음소거된 <video>이며 GIF가 아니며, 5초 이상의 모션에는 일시 중지 컨트롤이 필요합니다.
유리 깜박임 (Chrome): backdrop-filter 요소의 자식을 페이드 하거나 블러를 애니메이션하지 마세요 (강의 참조).

8. 인터랙션 패턴

링크는 링크입니다. 탐색에는 <a>를 사용하여 새 탭, 링크 복사 및 가운데 클릭이 작동하도록 하세요. 죽은 영역 없음: 행이 클릭 가능해 보이면 전체가 클릭 가능해야 합니다.
양식 (가입, 연락처): 모든 필드에 레이블이 있어야 함; 올바른 type, name, autocomplete 및 inputmode; 이메일의 경우 spellcheck 꺼짐; 기본 유효성 검사 우선. 붙여넣기 또는 키 입력을 차단하지 말고, 사용자가 시도하기 전에 제출을 비활성화하지 마세요. 오류는 필드 옆에 위치하며, 문제를 해결하는 방법을 알려주고, 제출 시 첫 번째 오류로 포커스가 이동합니다. 인터페이스 체크리스트에 더 많은 내용이 있습니다.
제출: 버튼은 레이블을 유지하고 스피너를 얻으며, 약 200ms 후에만 표시되고 그 후 최소 약 400ms 동안 표시되어 빠른 응답이 깜박이지 않도록 합니다(스니펫 참조). 성공 시 양식을 명확한 다음 단계로 대체합니다.
공개 (FAQ, "더 보기"): <button aria-expanded aria-controls>, grid-rows 트릭으로 애니메이션, JS가 실행될 때만 닫힌 상태.
툴팁보다 인라인 도움말. 먼저 텍스트로 설명하세요. 툴팁이 필요한 경우 title에 의존하지 말고, 호버 및 포커스에서 사용자 지정 툴팁을 사용하고, 첫 번째 툴팁 전에는 짧은 지연을, 이웃 간 이동 시에는 지연 없이 사용하세요.
카피: 방문자의 말로 페이지가 제공하는 것을 말하세요; 버튼은 정확히 무엇을 하는지 말하세요("뉴스레터 받기", "제출"이 아님); 오류 메시지는 복구 방법을 알려줍니다.

9. 품질 기준 (확실)

모션 감소: prefers-reduced-motion: reduce를 사용하면 표시가 즉시 나타나고 루프와 부드러운 스크롤이 꺼집니다.
No-JS 안전: 숨겨진-공개-까지 상태는 .js 클래스 뒤에 있으므로 JS가 실패해도 아무것도 보이지 않는 상태로 남지 않습니다.
키보드 및 포커스: "콘텐츠로 건너뛰기" 링크, 논리적 제목 수준,

…

[번역을 위해 잘림]

미니멀 모던 UI