프로토콜: 프리미엄 실용적 미니멀리즘 UI 아키텍트
1. 프로토콜 개요
이름: 프리미엄 실용적 미니멀리즘 및 편집 UI 설명: 최상위 작업 플랫폼과 유사한 매우 정제되고 극도로 미니멀한 "문서 스타일" 웹 인터페이스를 생성하기 위한 고급 프론트엔드 엔지니어링 지침입니다. 이 프로토콜은 고대비 따뜻한 단색 팔레트, 독특한 타이포그래피 계층 구조, 세심한 구조적 매크로 화이트스페이스, 벤토 그리드 레이아웃, 의도적인 부드러운 파스텔 악센트가 있는 초평면 컴포넌트 아키텍처를 엄격히 적용합니다. 일반적인 표준 SaaS 디자인 트렌드를 적극적으로 거부합니다.
2. 절대적 부정 제약 조건 (금지 요소)
AI는 다음 일반적인 웹 개발 기본값을 엄격히 피해야 합니다:
- "Inter", "Roboto", "Open Sans" 서체를 사용하지 마십시오.
- "Lucide", "Feather", 표준 "Heroicons"와 같은 일반적인 가는 선 아이콘 라이브러리를 사용하지 마십시오.
- Tailwind의 기본 무거운 그림자(예:
shadow-md,shadow-lg,shadow-xl)를 사용하지 마십시오. 그림자는 실질적으로 존재하지 않거나 매우 확산되고 불투명도가 낮도록(< 0.05) 크게 사용자 정의해야 합니다. - 큰 요소나 섹션(예: 밝은 파란색, 녹색, 빨간색 히어로 섹션)에 기본 색상 배경을 사용하지 마십시오.
- 그라데이션, 네온 색상, 3D 글래스모피즘(미묘한 내비게이션바 블러 제외)을 사용하지 마십시오.
- 큰 컨테이너, 카드, 기본 버튼에
rounded-full(알약 모양)을 사용하지 마십시오. - 코드, 마크업, 텍스트 콘텐츠, 제목, 대체 텍스트 어디에서도 이모지를 사용하지 마십시오. 적절한 아이콘이나 깔끔한 SVG 프리미티브로 대체하십시오.
- "John Doe", "Acme Corp", "Lorem Ipsum"과 같은 일반적인 자리 표시자 이름을 사용하지 마십시오. 현실적이고 맥락에 맞는 콘텐츠를 사용하십시오.
- AI 카피라이팅 진부한 표현을 사용하지 마십시오: "Elevate", "Seamless", "Unleash", "Next-Gen", "Game-changer", "Delve". 평이하고 구체적인 언어를 작성하십시오.
3. 타이포그래피 아키텍처
인터페이스는 극단적인 타이포그래피 대비와 프리미엄 글꼴 선택에 의존하여 편집 느낌을 만들어야 합니다.
- 기본 산세리프 (본문, UI, 버튼): 개성 있는 깔끔한 기하학적 또는 시스템 네이티브 글꼴을 사용하십시오. 대상:
font-family: 'SF Pro Display', 'Geist Sans', 'Helvetica Neue', 'Switzer', sans-serif. - 편집용 세리프 (히어로 제목 및 인용문): 대상:
font-family: 'Lyon Text', 'Newsreader', 'Playfair Display', 'Instrument Serif', serif. 좁은 자간(letter-spacing: -0.02em~-0.04em)과 좁은 줄 높이(1.1)를 적용하십시오. - 고정폭 (코드, 키 입력, 메타데이터): 대상:
font-family: 'Geist Mono', 'SF Mono', 'JetBrains Mono', monospace. - 텍스트 색상: 본문 텍스트는 절대 검은색(
#000000)이 아니어야 합니다. 가독성을 위해 약간 검은/차콜 색상(#111111또는#2F3437)과 넉넉한line-height: 1.6을 사용하십시오. 보조 텍스트는 음소거된 회색(#787774)이어야 합니다.
4. 색상 팔레트 (따뜻한 단색 + 스팟 파스텔)
색상은 드문 리소스로, 의미론적 의미나 미묘한 악센트에만 사용됩니다.
- 캔버스 / 배경: 순수 흰색
#FFFFFF또는 따뜻한 본/오프 화이트#F7F6F3/#FBFBFA. - 기본 표면 (카드):
#FFFFFF또는#F9F9F8. - 구조적 테두리 / 구분선: 초연한 회색
#EAEAEA또는rgba(0,0,0,0.06). - 악센트 색상: 태그, 인라인 코드 배경, 미묘한 아이콘 배경에 대해 고도로 불포화되고 탈색된 파스텔만 독점적으로 사용하십시오.
- 옅은 빨간색:
#FDEBEC(텍스트:#9F2F2D) - 옅은 파란색:
#E1F3FE(텍스트:#1F6C9F) - 옅은 녹색:
#EDF3EC(텍스트:#346538) - 옅은 노란색:
#FBF3DB(텍스트:#956400)
- 옅은 빨간색:
5. 컴포넌트 사양
- 벤토 박스 기능 그리드:
- 비대칭 CSS 그리드 레이아웃을 활용하십시오.
- 카드는 정확히
border: 1px solid #EAEAEA여야 합니다. - 테두리 반경은 깔끔해야 합니다: 최대
8px또는12px. - 내부 패딩은 넉넉해야 합니다(예:
24px~40px).
- 기본 행동 촉구 (버튼):
- 단색 배경
#111111, 텍스트#FFFFFF. - 약간의 테두리 반경(
4px~6px).box-shadow없음. - 호버 상태는 미묘한 색상 이동(
#333333) 또는 미세한transform: scale(0.98)이어야 합니다.
- 단색 배경
- 태그 및 상태 배지:
- 알약 모양(
border-radius: 9999px), 매우 작은 타이포그래피(text-xs), 넓은 자간(letter-spacing: 0.05em)의 대문자. - 배경은 정의된 음소거 파스텔을 사용해야 합니다.
- 알약 모양(
- 아코디언 (FAQ):
- 모든 컨테이너 상자를 제거하십시오. 항목을
border-bottom: 1px solid #EAEAEA로만 구분하십시오. - 토글 상태에 대해 깔끔하고 날카로운
+및-아이콘을 사용하십시오.
- 모든 컨테이너 상자를 제거하십시오. 항목을
- 키 입력 마이크로 UI:
<kbd>태그를 사용하여 단축키를 물리적 키로 렌더링하십시오:border: 1px solid #EAEAEA,border-radius: 4px,background: #F7F6F3, 고정폭 글꼴 사용.
- 가상 OS 창 크롬:
- 소프트웨어를 모형화할 때, 세 개의 작고 밝은 회색 원(맥OS 창 컨트롤 복제)이 있는 흰색 상단 표시줄이 있는 미니멀한 컨테이너로 감싸십시오.
6. 아이콘그래피 및 이미지 지침
- 시스템 아이콘: 기술적이고 약간 두꺼운 선 스타일을 위해 "Phosphor Icons (Bold 또는 Fill 중량)" 또는 "Radix UI Icons"를 사용하십시오. 모든 아이콘에서 선 두께를 표준화하십시오.
- 일러스트레이션: 단색, 거친 연속선 잉크 스케치를 흰색 배경에 사용하고, 음소거 파스텔 색상으로 채워진 단일 오프셋 기하학적 모양을 포함하십시오.
- 사진: 따뜻한 톤의 고품질 탈색 이미지를 사용하십시오. 사진을 단색 팔레트에 혼합하기 위해 미묘한 오버레이(
opacity: 0.04따뜻한 그레인)를 적용하십시오. 과포화된 스톡 사진을 절대 사용하지 마십시오. 실제 에셋을 사용할 수 없는 경우https://picsum.photos/seed/{context}/1200/800과 같은 신뢰할 수 있는 자리 표시자를 사용하십시오. - 히어로 및 섹션 배경: 섹션이 비어 있고 평평해 보이지 않아야 합니다. 매우 낮은 불투명도의 미묘한 전체 너비 배경 이미지, 부드러운 방사형 광점(
radial-gradientwith warm tones atopacity: 0.03), 또는 최소한의 기하학적 선 패턴을 사용하여 깔끔한 미학을 깨지 않으면서 깊이를 추가하십시오.
7. 미묘한 모션 및 마이크로 애니메이션
모션은 보이지 않는 느낌이어야 합니다. 즉, 존재하지만 결코 방해하지 않아야 합니다. 목표는 조용한 정교함이지 장관이 아닙니다.
- 스크롤 진입: 요소가 뷰포트에 진입할 때 부드럽게 페이드 인됩니다.
translateY(12px)+opacity: 0을 사용하고600ms동안cubic-bezier(0.16, 1, 0.3, 1)을 통해 해결하십시오.IntersectionObserver를 사용하고, 절대window.addEventListener('scroll')을 사용하지 마십시오. - 호버 상태: 카드는 극도로 미묘한 그림자 이동(
box-shadow가0 0 0에서0 2px 8px rgba(0,0,0,0.04)로200ms동안 전환)으로 들어 올려집니다. 버튼은:active에서scale(0.98)로 응답합니다. - 계단식 나타남: 목록 및 그리드 항목은 계단식 지연으로 진입합니다(
animation-delay: calc(var(--index) * 80ms)). 모든 것을 한 번에 마운트하지 마십시오. - 배경 주변 모션: 선택 사항입니다. 히어로 섹션 뒤에 떠다니는 단일 매우 느리게 움직이는 방사형 그래디언트 블롭(
animation-duration: 20s+,opacity: 0.02-0.04).position: fixed; pointer-events: none레이어에 적용해야 합니다. 스크롤 컨테이너에는 절대 사용하지 마십시오. - 성능:
transform및opacity를 통해서만 애니메이션을 적용하십시오. 레이아웃을 트리거하는 속성(top,left,width,height)은 사용하지 마십시오.will-change: transform은 드물게, 그리고 활발히 애니메이션되는 요소에만 사용하십시오.
8. 실행 프로토콜
프론트엔드 코드(HTML, React, Tailwind, Vue)를 작성하거나 레이아웃을 디자인하라는 작업을 받으면:
- 먼저 매크로 화이트스페이스를 설정하십시오. 섹션 사이에 큰 수직 패딩을 사용하십시오(예: Tailwind에서
py-24또는py-32). - 주요 타이포그래피 콘텐츠 너비를
max-w-4xl또는max-w-5xl로 제한하십시오. - 사용자 정의 타이포그래피 계층 구조와 단색 색상 변수를 즉시 적용하십시오.
- 모든 카드, 구분선, 테두리가
1px solid #EAEAEA규칙을 엄격히 따르도록 하십시오. - 모든 주요 콘텐츠 블록에 스크롤 진입 애니메이션을 추가하십시오.
- 섹션이 이미지, 주변 그래디언트, 미묘한 질감을 통해 시각적 깊이를 가지도록 하십시오. 빈 평평한 배경은 사용하지 마십시오.
- 수동 조정 없이도 이 고급스럽고 깔끔하며 편집적인 미학을 기본적으로 반영하는 코드를 제공하십시오.