Radix Themes 디자인 시스템.

Radix Themes 디자인 시스템의 시각 테마 및 분위기

무드 보드가 아닌 실제 작업용 인터페이스

Radix Themes는 사용자가 읽고, 판단하고, 정보를 입력하고, 미완료 작업으로 돌아오는 제품에 유용한 레퍼런스입니다. 절제된 간격, 차분한 표면, 명확한 타이포그래피 계층 구조, 일관된 컴포넌트 상태가 시각적 특징을 이룹니다. 이 가이드를 활용해 프로젝트 작업 공간, 계정 영역, 설정 화면 또는 데이터 검토 흐름을 구축하세요. 목표는 실제 콘텐츠를 담은 일관된 작업 화면이지, 작업 흐름 없이 보기 좋은 컴포넌트만 모아 놓은 화면이 아닙니다.

적절한 시작점 선택

React 애플리케이션이라면 실제 Radix Themes 패키지에서 시작하고, 직접 대체 요소를 만들기 전에 패키지의 컴포넌트를 사용하세요. 다른 기술 스택에서 시각적 콘셉트를 구현한다면, 이 원칙을 참고해 결과물을 시스템에서 영감을 받은 디자인이라고 설명하세요. Radix Themes와 Radix Primitives는 서로 다른 시작점입니다. 이 가이드는 스타일이 적용된 Themes 라이브러리를 다룹니다. OpenDesign 가이드를 따른다고 해서 임의의 HTML 목업이 기본 Radix 구현으로 바뀌는 것은 아닙니다.

구체적인 작업을 중심으로 구성

1. 첫 화면의 주요 작업은 프로젝트 만들기나 계정 설정 저장처럼 하나만 선택하세요.
2. 판단에 필요한 정보를 작업보다 앞에 배치하세요.
3. 탐색, 객체 메타데이터, 편집 가능한 필드, 피드백을 시각적으로 구분하세요.
4. 디자인할 때는 현실적인 길이의 제목, 다양한 상태 값, 빈 상태를 사용하세요.
5. 짧은 자리표시자 레이블 세 개만으로 작동하는 화면이라면, 아직 사용하기 좋은 시스템을 갖추지 못한 것입니다.

어조와 콘텐츠

짧고 설명적인 레이블, 구체적인 동사, 직접적인 설명을 사용하세요. 버튼은 다음에 일어날 일을 나타내야 합니다. 예를 들어 변경 사항 저장, 멤버 초대, 프로젝트 만들기처럼 작성하세요. 섹션의 주제를 제목으로 표현하고, 작은 컨트롤마다 홍보 문구를 붙이지 마세요. 작업에 실패하면 사용자가 수정할 수 있는 부분을 설명하고 작성한 내용은 보존하세요. 이는 참고 자료를 적용하기 위한 OpenDesign 편집 권장 사항이며, Radix가 추가로 제공하는 API가 아닙니다.

Radix Themes 디자인 시스템 색상 팔레트 및 역할

브랜드 색상과 의미를 구분하세요

화면에 색상을 고정하지 말고 테마를 사용하세요

공식 Theme 설정은 다음 항목을 제공합니다 accentColor 및 grayColor. 구성 요소가 같은 결정을 공유하도록 루트에서 선택하세요. 사용자 지정 구성 요소에서는 스크린샷의 색상을 복사하는 대신 현재 테마의 CSS 변수를 참조하세요. 아래 토큰 참조표에는 실무에 활용할 수 있는 간결한 하위 집합이 나와 있습니다. 토큰은 구성된 테마 안에서 역할을 나타내며, 라이트 모드와 다크 모드, 모든 강조 색상 선택에서 동일한 16진수 값이 유지된다는 뜻은 아닙니다.

표면과 테두리의 위계

차분한 페이지 배경에서 시작하세요. 관련 작업을 묶어야 할 때만 카드와 편집 패널에 구분되는 표면을 적용하세요. 같은 목록에 속한 행은 구분선으로 나누세요. 모든 항목에 테두리, 그림자, 색조가 있는 배경, 배지를 한꺼번에 적용하지 마세요. 설정 화면에서는 떠 있는 카드 여섯 개보다 행을 구분선으로 나눈 패널 하나가 대체로 더 명확합니다. 필수 텍스트를 희미하게 만들지 않으면서도 낮은 대비로 위계를 드러내세요.

라이트 및 다크 모드

네이티브 구성 요소에는 공식 모양 설정을 사용하고, 동일한 콘텐츠로 두 가지 모드를 모두 확인하세요. 색상을 무작정 반전하거나 라이트 모드의 그림자를 재사용해 다크 화면을 만들지 마세요. 오버레이, 비활성 필드, 구분선, 선택된 행, 강조 색상 위의 텍스트를 각각 확인하세요. 이 페이지의 인터랙티브 예제는 몇 가지 테마 선택을 보여 줍니다. 전체 라이브러리와 네이티브 동작은 공식 플레이그라운드에서 확인하세요.

대비와 중복 신호

강조 색상이나 표면을 바꾼 후 최종 전경색과 배경색의 조합을 확인하세요. 대기 중, 완료, 실패와 같은 상태는 색상과 텍스트를 함께 사용해 나타내세요. 선택 항목에는 체크 표시나 그 밖의 명확한 시각적 구분을 추가하세요. 접근성을 고려한 구성 요소 라이브러리를 사용한다고 해서 모든 콘텐츠나 테마 조합의 접근성이 보장되는 것은 아닙니다. 레이블, 중첩 구조, 사용자 지정 CSS, 정보의 순서도 화면 전체를 사용할 수 있는지에 영향을 줍니다.

Radix Themes 디자인 시스템 타이포그래피 규칙

의도적인 읽기 위계

화면에 명확한 제목 하나를 두고, 섹션 제목, 본문, 필드 레이블, 보조 메타데이터를 구분하세요. 이러한 관계를 설명하는 데 필요한 최소한의 글자 크기만 사용하세요. 정보가 밀집된 제품 화면에서는 크게 장식한 제목보다 읽기 쉬운 레이블이 더 중요합니다. 설명 문단은 해당 컨트롤 가까이에 두고, 입력란에 값이 입력된 뒤에도 레이블이 보이도록 하세요. 자리표시자 텍스트는 참고 정보일 뿐, 필드 레이블을 대신하지 않습니다.

글자 크기 체계와 굵기

Radix는 글자 크기, 행간, 자간을 짝지은 9단계 타이포그래피 체계를 문서화합니다. 이 페이지의 참조 표에는 기본 체계의 값이 그대로 담겨 있습니다. 서로 관계없는 행간을 조합하지 말고 하나의 단계를 하나의 완전한 조합으로 선택하세요. 본문에는 보통 굵기를, 제목이나 선택된 레이블에는 더 굵은 글꼴을 사용하세요. 모든 글자를 굵게 만들면 위계가 사라지고, 보조 텍스트를 전부 옅게 만들면 화면을 읽기 어려워집니다.

글꼴 선택과 대체 글꼴

Radix Themes는 시스템 글꼴 스택을 기본값으로 사용합니다. 특정 브랜드 글꼴보다 이식성이 중요하다면 해당 스택을 유지하고, 라이선스를 보유한 글꼴을 사용하려면 문서화된 사용자 지정 방식을 통해 설정하세요. 주변의 OpenDesign 사이트는 Albert Sans를 사용하지만, 그렇다고 Albert Sans가 공식 Radix 글꼴인 것은 아닙니다. 다국어 애플리케이션에서는 실제 대체 글꼴을 사용해 대표적인 중국어, 일본어, 한국어 문구와 길이가 긴 유럽 언어 레이블을 테스트하세요.

숫자, 코드, 줄바꿈

세로로 값을 비교할 수 있도록 숫자 열을 정렬하세요. 문자 경계가 중요한 코드, 식별자, 토큰에는 고정폭 글꼴 스타일을 사용하세요. 카드 높이를 유지하려고 제목과 설명을 잘라내지 말고 자연스럽게 줄바꿈하세요. ID처럼 실제로 줄바꿈할 수 없는 문자열에는 적절한 줄바꿈이나 복사 기능을 제공하세요. 모바일에서도 레이아웃이 바뀌더라도 전체 의미를 확인할 수 있어야 합니다.

콘텐츠 길이도 디자인의 일부입니다.

구성 요소를 재사용할 수 있다고 판단하기 전에 긴 프로젝트 이름, 두 줄로 표시되는 구성원 역할, 번역된 작업 레이블을 테스트하세요. 가능한 경우 버튼마다 너비를 고정하지 말고 내용에 따라 늘어나게 하세요. 본문 단락은 편안하게 읽을 수 있는 줄 길이로 유지하고, 여러 항목의 정보를 비교해야 한다면 목록이나 표를 사용하세요. 페이지를 더 세련되게 보이게 하려고 설명을 여러 개의 작은 장식용 카드로 쪼개지 마세요.

Radix Themes 디자인 시스템 구성 요소 스타일 및 상태

버튼 및 작업 우선순위

하나의 작업 그룹에서 가장 중요한 결정을 파악하고 가장 눈에 띄는 스타일을 적용하세요. 보조 작업도 쉽게 찾을 수 있어야 하지만 주요 작업과 같은 수준으로 경쟁해서는 안 됩니다. 파괴적인 작업은 일반적인 확인 작업과 분리하세요. 제출 중에는 중복 실행을 방지하고 진행 상황을 명확히 표시하세요. 완료 후에는 실제 결과를 보여주세요. 비활성화된 버튼의 이유가 양식만으로 명확하지 않다면 근처에 이해하기 쉬운 설명을 제공하세요.

입력 및 양식

• 각 입력란 위나 옆에 항상 표시되는 레이블을 배치하세요.
• 도움말은 관련 입력란 가까이에 두고, 유효성 검사 메시지는 일반적인 배너에만 표시하지 말고 해당 입력란에 연결하세요.
• 유효성 검사에 실패해도 입력한 값을 유지하세요.
• 관련 입력란은 의미 있는 섹션 제목 아래에 묶으세요.
• 적절한 입력 유형과 자동 완성 값을 사용해 브라우저와 보조 도구가 사용자의 작업을 돕도록 하세요.

카드, 목록 및 표

의미 있는 요약과 작업이 포함된 독립적인 항목에는 카드를 사용하세요. 비슷한 레코드가 나열될 때는 목록을, 여러 레코드의 속성을 비교해야 할 때는 표를 사용하세요. 장식용 차트 조각 대신 담당자, 업데이트 시간, 상태처럼 실제 필드를 표시하세요. 카드의 클릭 동작이 내부 링크나 버튼과 경쟁해서는 안 됩니다. 링크 대상을 명확히 정하고 일반적인 키보드 동작을 유지하세요.

탐색 및 선택

전역 탐색을 페이지 수준의 탭 및 로컬 필터와 분리하세요. 현재 위치는 강조 색상에만 의존하지 않고도 알아볼 수 있어야 합니다. 탐색에는 링크를, 페이지 내 변경에는 버튼을 사용하세요. 탭 패턴을 구현한다면 키보드 동작을 포함하세요. 그렇지 않다면 레이블이 명확한 일반 버튼 그룹을 사용하세요. 작동하지 않는 항목을 시각적으로만 꾸민 스팬을 나열해 상호 작용할 수 있는 것처럼 보이게 하지 마세요.

메뉴, 대화상자 및 오버레이

React 제품을 구현할 때 복잡한 동작이 필요하다면 기본 라이브러리 구성 요소를 사용하세요. 대화상자에는 제목, 명확한 닫기 방법, 적절한 포커스 관리, 그리고 대화상자를 연 컨트롤로 포커스를 돌려보내는 동작이 필요합니다. 이러한 동작 없이 절대 위치가 지정된 카드로 모달을 만들지 마세요. 대화상자는 하나의 결정에 집중하도록 하세요. 편집 작업이 길다면 점점 복잡해지는 오버레이보다 별도의 페이지가 적합한 경우가 많습니다.

로딩, 빈 상태, 오류 및 성공

• 동일한 실제 작업을 기준으로 각 상태를 설계하세요.
• 프로젝트 목록이 비어 있다면 첫 프로젝트를 만드는 방법을 안내하세요.
• 로딩 상태는 화면이 갑자기 바뀌는 것을 방지할 수 있도록 충분한 구조를 유지해야 합니다.
• 오류에는 유용한 다음 작업을 안내하고 완료된 작업을 지우지 마세요.
• 성공 메시지에는 무엇이 변경되었는지 명시하세요.
• 이 페이지의 정적 예시 버튼은 모양을 보여줄 뿐, 해당 상태의 실제 동작을 보장하지 않습니다.

Radix Themes 디자인 시스템 레이아웃, 간격 및 밀도

공통 간격 척도 사용

문서에 정의된 간격 척도에는 기본 단계가 9개 있습니다. 4, 8, 12, 16, 24, 32, 40, 48, 64픽셀입니다. 밀접하게 관련된 컨트롤 사이에는 작은 단계를, 독립된 섹션 사이에는 큰 단계를 사용하세요. 제목과 본문 사이의 관계가 눈에 보이도록 유지하세요. 화면을 채우려고 빈 공간을 균등하게 배분하지 마세요. 근접성을 통해 어떤 정보가 서로 관련되어 있는지 전달해야 합니다.

작업에 맞는 밀도

리소스 디렉터리에는 항목을 비교할 수 있도록 충분한 수의 항목이 한눈에 보여야 합니다. 설정 양식에는 레이블, 도움말, 오류를 표시할 공간이 필요합니다. 읽기 페이지에는 안정적인 줄 길이와 눈에 띄는 개요가 필요합니다. 모든 곳에 동일한 카드 크기를 적용하지 말고 작업에 맞는 밀도를 선택하세요. Radix에는 관련 치수를 함께 조정하는 배율 설정도 있습니다. 컴팩트 배율을 제품 기본값으로 지정하기 전에 가독성과 터치 대상을 확인하세요.

그리드 및 컨테이너 동작

먼저 페이지 컨테이너를 정한 다음 주요 콘텐츠와 보조 영역을 배치하세요. 바깥쪽 캔버스가 넓더라도 긴 텍스트는 읽기 쉬운 너비의 열에 유지하세요. 화면 너비가 좁아지면 보조 콘텐츠를 주요 콘텐츠 아래로 옮기거나 긴 보조 영역을 접근성 있는 로컬 탐색 컨트롤로 바꾸세요. 모바일 화면의 흐름과 키보드 순서가 데스크톱 그리드 배치에 의존하지 않도록 소스 순서를 유지하세요.

중첩된 카드보다 행 사용

간결한 토큰 참조에서는 이름, 값, 사용법을 한 줄에 배치해 빠르게 훑어볼 수 있게 하세요. 카탈로그에서는 제목, 범주, 설명, 이동 대상을 함께 배치하세요. 상자 안에 상자를 반복하면 시각적 잡음이 늘고 콘텐츠에 할당해야 할 너비가 줄어듭니다. 관련된 행 사이에는 얇은 구분선을 사용하고, 실시간 미리보기나 코드 예시처럼 맥락이 실제로 달라지는 경우에만 테두리가 있는 패널을 사용하세요.

중요한 콘텐츠가 보이도록 유지하세요

페이지를 짧게 만들기 위해 상세한 가이드를 짧은 요약으로 줄이지 마세요. 목차와 명확한 하위 제목을 제공해 필요한 부분부터 살펴볼 수 있게 하세요. 필터나 아코디언으로 표시 여부가 바뀐다면 결과가 없을 때와 선택된 상태를 분명하게 보여 주세요. 실제 상호작용에 꼭 필요한 경우가 아니라면 내부 목록에 별도의 스크롤을 적용하지 마세요. 긴 리소스 모음은 보통 페이지 전체를 스크롤하는 편이 더 편리합니다.

Radix Themes 디자인 시스템의 모서리 반경, 깊이 및 모션

모서리 반경은 관계를 만듭니다

Radix는 이름이 지정된 모서리 반경 설정과 맥락에 따른 컴포넌트 동작을 제공합니다. 모든 요소에 똑같은 임의의 반경을 지정하기보다 테마 수준에서 설정을 선택하세요. 버튼, 체크박스, 대형 패널은 구조적 역할이 서로 다릅니다. 각 요소의 역할은 유지하면서 형태에는 일관성을 주세요. 자체 컴포넌트에서 반경 토큰을 사용한다면 해당 설정이 같은 시스템에 속하는지 판단하기 전에 기본 버튼 및 입력 필드와 나란히 놓고 확인하세요.

레이어를 설명하는 깊이

깊이를 사용해 오버레이와 그 아래 페이지, 또는 상호작용 패널과 차분한 캔버스를 구분하세요. Radix는 여섯 단계의 그림자 스케일을 제공합니다. 그림자 단계가 높을수록 카드가 더 장식적이라는 식으로 해석하지 마세요. 요소가 빽빽하게 들어찬 카탈로그는 테두리만으로도 충분할 수 있습니다. 밝은 테마와 어두운 테마 모두에서 그림자를 확인하세요. 밝은 테마의 흐림 효과를 어두운 배경에 그대로 적용하면 사라지거나 후광처럼 보여 깊이를 잘못 전달할 수 있습니다.

변화를 명확하게 하는 모션

선택, 열기, 진행 상황 또는 서로 관련된 상태 간의 이동을 설명할 때는 짧은 전환 효과를 사용하세요. 진입 애니메이션 뒤에 콘텐츠 표시를 지연하지 마세요. 업무용 화면에 계속 움직이는 배경을 사용하지 마세요. 동작 줄이기 설정을 따르고 전환 효과를 제거해도 최종 상태가 명확하게 보이도록 하세요. 사용자 지정 구현의 타이밍은 애플리케이션에서 결정할 사항입니다. 검증된 공식 Radix 지속 시간 토큰이 없다면 이 가이드에서 임의로 만들어 내지 않습니다.

장식이 아닌 상호작용

호버 스타일은 요소를 조작할 수 있다는 점을 보강해야 합니다. 포커스 스타일은 인접한 배경과 뚜렷하게 구분되어야 합니다. 정보가 빽빽한 행 전체가 호버할 때 크게 움직여 읽는 동안 내용이 밀리지 않도록 하세요. 터치 화면에서도 호버 없이 필수 작업을 사용할 수 있어야 합니다. 애니메이션 자체에 시선을 끄는 것이 아니라 사용자가 컨트롤을 이해하는 데 도움이 될 때 효과가 성공적입니다.

Radix Themes 디자인 시스템의 권장 사항과 주의 사항

권장: 완성된 화면 하나부터 만들기

실제 내비게이션, 의미 있는 콘텐츠, 주요 작업, 그리고 하나 이상의 예외 상태를 포함한 화면을 만드세요. 재사용 가능한 컴포넌트를 수십 개 추출하기 전에 화면을 검토하세요. 강조 색상, 정보 밀도, 타이포그래피 단계, 빈 상태 문구처럼 신중하게 결정한 사항을 기록하세요. 이렇게 하면 코딩 에이전트가 따라야 할 구체적인 기준이 생기고 이후 반복 작업에서 차이를 더 쉽게 발견할 수 있습니다.

권장: 기본 컴포넌트와 사용자 지정 요소의 일관성 유지

라이브러리에서 이미 지원하는 동작에는 기존 컴포넌트를 우선 사용하세요. 사용자 지정 래퍼에는 테마 변수를 사용하고 두 테마 모두에서 확인하세요. 스타일을 적용할 때 레이블과 의미론적 HTML을 유지하세요. 프로젝트에 기존 디자인 시스템이 있다면 교체하기 전에 이 참고 자료와 비교하세요. 통제되지 않는 두 번째 테마 레이어는 줄이려는 것보다 더 큰 불일치를 일으킬 수 있습니다.

주의: 색상만 바꿔 브랜드를 재현하지 않기

강조 색상만 바꿔서는 일관된 인터페이스를 만들 수 없습니다. 여백, 서체, 콘텐츠 계층 구조, 상호작용 패턴, 반응형 레이아웃 결정도 시각적 정체성의 상당 부분을 이룹니다. 목업이 라이브러리와 비슷해 보인다는 이유만으로 공식 통합을 표방하지 마세요. 새 제품 화면에 다른 제품의 상표, 독점 자산 또는 사업 관련 주장을 복사해 넣지 마세요.

주의: 더 깔끔한 스크린샷을 위해 의미를 희생하지 않기

Radix Themes 디자인 시스템의 반응형 및 접근성 동작

화면을 줄이기 전에 구조를 조정하세요

화면 폭이 좁아지면 열 수를 줄이고 주요 작업까지의 단계를 간소화하며 보조 정보는 일반적인 읽기 흐름에 배치하세요. 데스크톱 대시보드를 이미지처럼 축소한 뒤 모바일 레이아웃이라고 하지 마세요. 줄바꿈, 세로로 쌓기 또는 적절한 표 레이아웃을 활용해 동일한 콘텐츠를 계속 제공하세요. 설명이 포함된 링크 텍스트를 유지해 데스크톱 카드의 맥락에서 벗어나도 연결 대상이 무엇인지 알 수 있게 하세요.

문서화된 중단점을 적절히 활용하세요

공식 중단점 이름은 initial, xs, sm, md, lg, xl입니다. 각 중단점의 최소 너비는 0, 520, 768, 1024, 1280, 1640픽셀입니다. 이를 매 단계마다 반드시 레이아웃을 바꿔야 하는 기준이 아니라 활용 가능한 도구로 여기세요. 콘텐츠에 다른 배치가 필요할 때 중단점을 추가하세요. 취약한 중간 레이아웃을 찾아내기 위해 중단점 너비뿐 아니라 이름이 지정된 중단점 사이의 너비에서도 테스트하세요.

키보드 및 포커스

• 의미 있는 모든 작업을 키보드로 수행할 수 있어야 합니다.
• 보이는 포커스 상태를 호버 상태와 구분하고, 컨테이너에서 콘텐츠가 잘리더라도 포커스가 계속 보이게 하세요.
• 컨트롤 순서가 예측할 수 없이 바뀌는 양수 tabindex 값은 사용하지 마세요.
• 필터로 결과가 바뀐 뒤에도 컨트롤에 포커스를 유지하고 결과 개수를 간결하게 알려 주세요.
• 모달을 닫은 뒤 문서의 시작 부분에 포커스를 남기지 말고 적절한 위치로 되돌리세요.

레이블, 대상 영역 및 보조 텍스트

아이콘만 표시되는 동작에는 아이콘의 모양이 아니라 동작을 설명하는 접근성 이름을 지정하세요. 시각적으로 아이콘이 작더라도 터치 영역은 충분히 넉넉하게 확보하세요. 장식용 아이콘은 접근성 트리에서 제외하세요. 저장된 변경사항이나 검색 결과 수와 같은 업데이트는 관련 없는 콘텐츠를 반복해서 알리지 않으면서 전달하세요. 아이콘과 텍스트를 함께 사용해 상태를 표시할 때는 스크린 리더가 같은 메시지를 두 번 읽지 않도록 하세요.

실제 콘텐츠로 검증

• 데스크톱, 태블릿, 폭이 좁은 휴대전화에서 확인하세요.
• 텍스트가 길어지는 경우, 이미지가 없는 경우, 빈 목록, 공백 없이 이어지는 긴 식별자를 포함하세요.
• 동작 줄이기 설정을 켠 상태와 키보드 탐색으로 페이지를 테스트하세요.
• 색상을 크게 변경한 뒤에는 두 가지 모양을 모두 확인하세요.
• 자동화된 검사는 구조적 문제를 찾는 데 도움이 되지만, 계층 구조와 콘텐츠 밀도, 전반적인 시각적 특성이 제품의 의도된 요구사항을 충족하는지는 판단할 수 없습니다.

Radix Themes 디자인 시스템 AI 에이전트 프롬프트 가이드 및 구현

프로젝트 맥락 준비

1. 무엇을 만들지, 누가 사용할지, 주요 동작은 무엇인지, 현재 디자인을 정의하는 기존 파일은 무엇인지 코딩 AI 에이전트에게 알려주세요.
2. 정체가 명확하지 않은 스크린샷을 모방하도록 요청하는 대신, 이 가이드를 참고 자료로 첨부하세요.
3. React을 사용하는 경우 Radix Themes 네이티브 컴포넌트를 우선 사용하라고 명시하세요.
4. 다른 스택을 사용하는 경우, 해석한 내용을 명확히 표시하고 추가로 필요한 상호작용 구현을 검토하도록 요청하세요.

완성도 높은 첫 결과물 지정

실제 콘텐츠와 몇 가지 상태를 포함하는 작동하는 화면 하나를 요청하세요. 탐색 메뉴, 입력 필드, 객체 메타데이터, 주요 동작의 예상 결과를 지정하세요. 키보드 포커스, 빈 상태, 유효성 검사, 좁은 화면 레이아웃도 요청에 포함하세요. 기존 헤더, 운영 환경의 데이터 계약, 사전 승인된 콘텐츠 블록처럼 유지해야 하는 제약 조건을 명시하세요.

실제 문제를 찾을 수 있는 순서로 검토

1. 먼저 화면이 의도된 작업을 지원하는지 확인하세요.
2. 그런 다음 정보 계층 구조, 간격, 타이포그래피, 색상을 선택한 레퍼런스와 비교하세요.
3. 마지막으로 상호작용 상태와 반응형 레이아웃을 테스트하세요.
4. 페이지가 빌드되거나 스크린샷이 깔끔해 보인다는 이유만으로 시각적 변경을 승인하지 마세요.
5. 시각적 조정 후에도 긴 콘텐츠, 오류, 반복 동작이 제대로 작동하는지 확인하세요.

명확한 결정에 따라 확장

첫 화면이 제대로 작동하면 테마 설정, 타이포그래피 역할, 간격 설정, 반복해서 사용할 컴포넌트 패턴을 기록하세요. 에이전트가 승인된 콘텐츠를 임의로 다시 작성하지 않고 다음 화면에 해당 결정을 적용하도록 요청하세요. 새 화면에 다른 패턴이 필요하면 그 이유를 문서화하고 기존 화면과 일관성이 있는지 확인하세요. 겉보기만 비슷한 페이지를 대량으로 생성하는 대신 검증된 동작을 바탕으로 확장하세요.

범위와 출처의 한계