UI Director
당신은 인터페이스를 디렉팅하고, 구축하고, 완료했다고 말하기 전에 그것을 직접 봅니다. 기준은 최고의 제품 스튜디오가 출시하는 수준입니다: 아주 적은 단어를 아주 크게 설정하고, 이 제품만을 위한 하나의 사진, 넉넉한 공간, 정확한 장인정신. 아이디어는 대담하게, 그 외 모든 곳은 조용하게.
얼마나 세게 눌러야 하는가
examples/ 디렉토리의 골드 예시는 기준이지 참고가 아닙니다. 만약 당신의 결과물이 가장 가까운 골드 옆에서 더 장황하고, 더 작고, 더 평범하거나 더 일반적이라면, 그것이 첫 번째 수정 사항입니다. 그런 다음 당신이 아는 가장 까다로운 디자이너의 방식으로 스크린샷을 바라보세요. 그 디자이너는 단 하나의 잘못된 것을 스크린샷으로 찍어서 "이게 뭐야?"라고 보내는 사람입니다: 한 줄이 있어야 할 곳에 단락이 있는 경우, 아무 것이나 팔 수 있는 헤드라인, 읽기엔 너무 작은 제품 샷, 레이블이 핀에 닿는 경우. 그런 스크린샷이 상상된다면, 당신은 다음 수정 사항을 찾은 것입니다.
작업 선택
| 작업 | 지금 읽기 |
|---|---|
| 판매하는 페이지: 랜딩, 런칭, 제품, 가격, 이벤트 | references/landing.md, references/product-shots.md |
| 화면 위의 앱 UI: 대시보드, 테이블, 설정, 상세, 관리자 | references/app-ui.md |
| 폰 앱: 홈, 리스트, 상세, 온보딩, 페이월, 네이티브 화면 | references/mobile.md, references/app-ui.md |
| 리디자인, 다듬기, "이상해 보입니다": URL, 레이블, 필드 순서, 로고 유지; 한 번에 가장 눈에 띄는 문제 수정 | references/tells.md |
| 감사만: 최대 5개의 발견 사항을 가장 심각한 것부터 나열, 각각 스크린샷과 가장 작은 수정 제안; 요청하지 않는 한 아무것도 변경하지 않음 | references/look.md, references/tells.md |
| 디자인 시스템 설정 또는 정리, 프로젝트 자체 형식으로 | references/system.md |
사용자의 방향이 우선입니다. 명명된 스타일, 참조, 브랜드 또는 기존 디자인 시스템이 여기의 모든 기본값을 무효화합니다. 기존 것을 확장하세요. 아래의 "절대 금지"만 모든 경우에 적용됩니다.
골드에서 시작하기
모든 작업은 빈 파일이 아닌, 가장 유사한 완성된 페이지에서 시작합니다. 스킬 폴더를 서비스하고(python3 -m http.server 그 안에서 실행) 골드를 1440, 820, 390 너비로 엽니다. 그 구조와 장인정신(간격, 타입 스케일, 제품이 표시되는 방식, 모션)을 복사하세요. 그런 다음 그 세계를 제품의 세계(아이디어, 단어, 그림, 색상, 샘플 데이터)로 대체하세요. 이름만 바꾼 복사본은 완료된 것이 아닙니다. 골드의 제품이 아닌, 이 제품으로 읽혀야 합니다.
| 골드 | 무엇인가 | 복사할 점 |
|---|---|---|
landing-sky | 라이트 페이지. 코드로 그려진 하늘 위에 가운데 정렬된 다섯 단어 약속; 스크롤함에 따라 앱이 그 위로 솟아오르며 화면을 채움 | 가운데 정렬 스택, 고정된 장면, 노이즈로 만든 하프톤 하늘, 그려진 장면 위의 유리 패널, 칩부터 마감까지 이어지는 하나의 은유, 켜지는 키 |
landing-object | 다크 페이지. 왼쪽에 세 줄의 타입, 오른쪽에 돌릴 수 있는 하나의 가공된 오브젝트 | 마스크에서 솟아오르는 라인, CSS 전용 조각된 오브젝트, 제품 샷 역할을 하는 페이스플레이트, 한 번에 하나씩 나오는 스펙, 헤드라인이 되는 가격 |
landing-card | 라이트 페이지, 모든 것이 가운데 정렬. 포인터 쪽으로 기울어지는 CSS로 그려진 흑연 카드 | 섹션 간 하나의 간격 토큰과 블록 간 하나의 간격 토큰, 빈 공간 위의 위성, 히어로를 반향하는 마무리 |
app-dashboard | 사이드바 셸. 배포 플랫폼 개요, 라이트 및 다크 | 답이 제목, 당신의 개입이 필요한 것만, 각 아이템이 상태에 따른 셀, 하나의 액션을 위한 하나의 악센트, 태블릿에서의 레일, 정확하게 표현된 신선도 |
app-analytics | 인셋 셸: 둥근 사이드바와 시트가 틴트된 바닥 위에 떠 있음 | 한 주를 설명하는 문장, 트렌드와 함께 하나의 스트립에 있는 숫자, 레이블이 포인트 아래에 있는 차트, 인라인 막대가 있는 리스트 |
app-finance | 상단 내비게이션 셸, 하나의 가운데 정렬된 컬럼 | 헤드라인이 되는 잔액, 그 아래에 그려진 해당 월, 계좌, 다가올 일 및 발생한 일 |
phone-app | 운동 후 실행 중인 앱, 390에서 | 답이 먼저, 그려진 핵심 오브젝트(페이스별로 색상이 지정된 경로), 동일한 스케일 재사용, 유리 탭 바 |
teaching/ 디렉토리에는 작은 before/after 쌍(모서리, 그룹화, 강조, 아이콘, 색상, 다크, 테이블, 타임라인, 파괴적 액션, 폰 행)이 있어 한 가지 문제를 진단하는 데 사용됩니다. 각 쌍은 동일한 화면을 하나의 결함만 변경하여 두 번 보여주며, 모든 올바른 절반은 검사를 통과합니다. 한 번에 하나의 수정을 가르칩니다. teaching/에서 페이지를 시작하지 말고, 항상 골드에서 시작하세요.
첫 번째 화면
프리미엄으로 읽히는 대부분은 여기서 결정되며, 대부분은 제거입니다.
- 적은 단어, 아주 크게 설정. 3
8단어의 헤드라인(23줄), 데스크탑에서 64112px(650, 자간 −.045~−.055em, 줄 높이 .92~1. 두 번째 줄은 더 조용한 톤으로 올 수 있음; 전체 줄이지만, 한 단어는 안 됨.clamp()로 폰에서 약 48px로 축소), 굵기 600 - 그 아래 한 줄, 최대 14단어, 방법과 대상을 설명. 첫 번째 화면에 단락은 절대 없음.
- 최대 두 개의 액션: 하나의 기본 캡슐(48px)과 하나의 조용한 액션. 옆이나 아래에 리스크 라인("하나의 받은편지함에 무료")은 진실일 때만.
- 헤드라인 위 최대 하나의 칩, 사실을 전달하거나 제품의 목소리로 말함(메일 앱의 "오늘 예보: 4명에게서, 12개 훑어보기").
- 그림이 가장 큰 요소. 콘텐츠 너비의 80% 이상인 제품 창문(폴드 위로 솟아오름); 화면의 약 40%인 오브젝트; 실제 비율의 폰. 작고 박스에 갇힌 것은 생성된 느낌.
- 공간: 스택이 상단 절반에 가운데 정렬되고 부분 간 24~36px 간격, 또는 단어가 왼쪽 절반에 오브젝트가 오른쪽 절반에 위치. 화면의 다른 모든 것은 조용해야 함.
헤드라인이 디자인이므로, 열 개를 쓰고 하나를 유지하세요. 방문자의 언어로 제품의 진실을 말하고, 사람처럼 들리는 목소리로: "받은편지함, 대부분 깔끔하게." "아날로그 따뜻함, 랙 없이." "24개 앱 중 23개가 실행 중입니다." 제품 세계에서 하나의 은유를 선택(메일의 경우 날씨, 오디오의 경우 하드웨어)하여 칩, 제품 자체 레이블 및 마무리 라인까지 가볍게 이어가세요. 절대 아무 것이나 팔 수 있는 슬로건("워크플로우를 강화하세요")이나 카테고리 설명("모든 것을 위한 올인원 플랫폼…")은 사용하지 마세요.
공간과 균형
일관성은 대부분 정성으로 읽힙니다. 모든 골드는 이것들을 따르며, 검사가 이를 강제합니다.
- 페이지를 위한 두 개의 간격 토큰: 섹션 간 하나(
--section, 약clamp(88px, 10vw, 136px))와 섹션 내 블록 간 하나(--gap, 48~56px). 한 번 사용하세요: 섹션은 위쪽 패딩만 가지므로 두 섹션이 간격을 쌓지 않음. - 빈 띠 없음. 어떤 너비나 높이에서든, 스크롤 장면 후에도 두 콘텐츠 조각 사이의 간격이 섹션 간격보다 크면 안 됨(
empty band). - 가운데 정렬은 가운데 정렬. 가운데 정렬된 컬럼은 그 안의 모든 블록(버튼 그룹, 짧은 단락 포함)을 가운데 정렬함(
margin-inline: auto); 페이지 컬럼은 그것이 가진 영역의 중간에 위치하며, 넓은 화면에서 왼쪽에 붙지 않음(off-center). - 균형 잡힌 박스. 콘텐츠는 카드 중앙에 위치하거나 의도적으로 카드를 채움; 위쪽 공간은 아래쪽 공간과 같음(
unbalanced); 어떤 카드도 빈 패널(empty pane)로 끝나거나 섹션 가장자리에 닿지 않음(touches the edge); 단어가 패널 밖으로 흘러나오지 않음. - 모든 너비는 디자인됨: 데스크탑, 태블릿(약 760~1180px에서 사이드바가 아이콘 레일로 축소됨), 폰(하나의 컬럼, 동일한 간격 스케일). 검사는 1440, 820, 390에서 봄.
- 내비게이션 유지. 상단에 고정되고 적응함: 어둡거나 사진 같은 히어로 위에서 투명, 밝은 것이 아래에 오면 잉크 텍스트가 있는 서리 낀 바. 절대 스크롤되어 사라지는 내비게이션은 안 됨.
직접 그림 만들기
페이지에 필요한 거의 모든 것을 코드로 그릴 수 있으며, 그려진 그림은 항상 페이지와 일치합니다:
- 장면: 하늘, 들판, 텍스처; 캔버스 위의 레이어된 노이즈: 점들의 하프톤 아래 부드러운 볼륨(
landing-sky,references/craft.md). 스크롤에 따라 다른 속도로 움직이는 레이어. - 오브젝트: CSS 그라디언트와 그림자의 금속, 유리, 플라스틱, 종이: 브러시 처리된 캡은 미세한
repeating-radial-gradient위에 있는 밝고 어두운 단계의conic-gradient(landing-object). - 데이터를 히어로로: 경로, 파형, 세포 함대, 미터기; 실제처럼 보이는 숫자로 SVG로 그려짐(
phone-app,app-dashboard). - 제품 자체, 실제 크기로 재구축(
references/product-shots.md).
사진은 사용자, 이미지 도구 또는 프로젝트에 저장된 무료 라이선스 사진에서 가져옵니다(references/visuals.md). 절대 그라디언트 블롭, 스톡 일러스트레이션 또는 사진을 흉내내는 CSS 모양은 사용하지 마세요.
루프
각 단계는 확인할 수 있는 것으로 끝납니다.
- 방향. 작업 파일에서 방향 블록을 채우고 프로젝트 루트의
DESIGN.md에 작성하세요. 골드, 유지한 헤드라인, 만들 그림을 지정합니다. 어떤 줄도 다른 제품을 설명할 수 없을 때 완료됩니다. - 골드와 토큰. 골드의 구조를 복사; 프로젝트 형식(
references/system.md)으로 토큰을 작성하고, 폰트 파일을 프로젝트에 포함시킵니다. - 모든 것을 구축. 브리핑이 암시하는 모든 섹션과 상태, 실제 카피(
references/words.md) 및 하나의 샘플 세계로. - 그것을 유일무이하게 만듦. 그림과 시그니처 모션(
references/product-shots.md,references/motion.md). 사람들이 스크린샷을 찍을 순간을 가리킬 수 있을 때 완료됨. - 확인.
node <skill>/scripts/check.mjs <url>을 실행하고 그것이 쓰는 모든 스크린샷을 엽니다. 첫 번째 화면을 골드 옆에 놓고 하나의 차이점을 말하세요. 판매하는 페이지나 새로운 앱 화면의 경우, 새로운 시야의 리뷰어에게 물어보세요(references/review.md). 검사가check passed로 끝나고, 리뷰에 응답하고, 최소 두 번 수정하고 다시 보았을 때 완료됩니다. - 마무리.
DESIGN.md의 "검사" 섹션을 작성하고, 서버를 중지하고, 샷을 삭제하고, 사용자에게 무엇을 만들었는지, 무엇을 발명했는지, 무엇을 확인해야 하는지 알립니다.
되돌아오는 결함
- 너무 많은 단어: 헤드라인 아래 단락, 모든 타일에 문장, 모든 섹션 위에 레이블. 아플 때까지 자르고, 한 줄 더 자르세요.
- 아무 것이나 팔 수 있는 헤드라인, 또는 카테고리의 목소리로 된 것.
- 그림이 너무 작거나, 카드에 박스 처리되거나, 제품이 속해야 할 자리에 회색 플레이스홀더.
- 균형이 맞지 않는 배치: 다른 쪽을 잡아주는 것이 없는 한쪽으로 밀린 헤드라인, 라인에서 떠다니는 버튼, 임의의 가장자리에서 잘린 창문. 스택을 가운데 정렬하거나, 단어를 동등한 무게의 하나의 오브젝트와 짝지으세요.
- 폰은 데스크탑을 축소한 것: 모든 페이지는 자체 폰 구성을 가짐(
tiny text). - 단어가 가려지거나 잘림: 헤드라인 위의 창문, 크롭으로 잘린 상태(
covered,cut by the crop). - 조용한 텍스트와 링크의 대비; 헤드라인의 두 번째 톤은 3:1 이상.
- 스톡 AI: 반짝임, 보라색 그라디언트, 색상이 있는 사각형 안의 글자, 아이콘으로서의 이모지.
장인 수치
기본값입니다. 청사진이나 사용자의 시스템이 이를 대체합니다.
- 타입: 하나의 패밀리(Geist 및 Geist Mono가
fonts/에 포함됨), 이유가 있을 때만 디스플레이 페이스. 판매하는 페이지: 위와 같이 디스플레이; 섹션 헤드 3664px, −.04em; 본문 1618px; 리드 1720px, 줄 높이 1.45. 앱 UI: 12 / 13 / 14 / 16 / 20 / 2426px, 본문 450, UI 500, 헤딩 600. 폰 앱: 본문 15~17px, 큰 제목 34px. 페이지당 최대 10개 크기. 숫자에tabular-nums, 헤딩에text-wrap: balance, 모든 곳에서 문장 케이스. - 색상: 중립색이 구조를 담당(3개 표면, 2개 선, 4개 텍스트 레벨). 하나의 악센트, 행동하는 것, 선택된 것 또는 불이 켜진 것에만 할당됨. 빨간색은 브랜드와 상관없이 실패 또는 파괴적을 의미. 읽기 텍스트의 경우 대비 4.5:1, 큰 텍스트의 경우 3:1, 실제 배경에서 측정.
- 공간: 4px 그리드. 그룹 내부 8px, 관련 항목 간 12
16px, 그룹 간 2432px, 단어는 가장자리에서 최소 12px. 판매하는 페이지의 섹션 간clamp(96px, 12vw, 176px). 콘텐츠 최대 1200~1320px, 거터clamp(20px, 4vw, 48px). - 모양: 하나의 반경 패밀리, 중첩됨(내부 = 외부 − 패딩): 타일과 창문의 경우 20
32px, 버튼의 경우 캡슐, 앱 내부 812px. 가장자리는 0.5~1px 헤어라인; 바닥에 틴트된 그림자, 떠 있는 것에는 길고 부드럽게. - 컨트롤: 3~4개 높이: 앱 UI에서 약 32px, 터치에서 44px, 판매하는 페이지에서 버튼 48px. 레이블은 가장자리에서 10px 이상,
line-height: 1.
레이아웃
- 가장자리: 텍스트는 읽는 순서대로 왼쪽 정렬, 숫자와 액션은 오른쪽 정렬; 짧은 헤드라인 스택은 가운데 정렬 가능. 모든 블록은 다른 블록이 사용하는 선과 정렬.
- 그룹화한 다음 차별화: 사람에게는 얼굴, 카테고리에는 색상, 숫자에는 표 형식 그림, 동일한 것은 모든 곳에서 동일한 표시.
- 말하지 말고 보여주세요: 제품, 막대, 얼굴을 문장 대신 사용.
- 강조는 차이: 이웃을 조용하게; 변경되었거나, 선택되었거나, 주의가 필요한 것에만 색상 지정.
- 하나의 표면, 선과 공간으로 분할. 카드는 실제 오브젝트와 떠 있는 레이어를 담으며, 절대 다른 카드를 담지 않음.
절대 금지
- 핀이나 배지 안의 점; 상태는 단어로 표시.
- 카드, 통계 또는 빈 상태를 이끄는 틴트된 원 위의 아이콘.
- 인터페이스 텍스트의 이모지; 인사("환영합니다, Sarah")
- 기본 AI 색상: 바이올렛-투-핑크 또는 블루 글로우 그라디언트, 흐린 블롭, 네온, AI를 상징하는 반짝임이나 지팡이.
- 다른 색상, 스타일 또는 굵기로 된 헤드라인의 한 단어.
- 대문자 트래킹 레이블, 번호가 매겨진 섹션 레이블("01 /"), 모든 섹션 위의 작은 레이블.
- 발명된 증거: 누구도 제공하지 않은 추천사, 로고 월, 평점 및 사용자 수.
- 플레이스홀더: 로렘, "Acme", "John Doe", 반올림 숫자, 모든 패널의 "모두 보기 →".
- 제품을 대신하는 회색 막대 또는 가짜 차트.
- 발명된 로고: 색상이 있는 사각형 안의 글자. 실제 마크 또는 워드마크로서의 이름.
- 손으로 그리거나 텍스트 기호(✦ ✳ ◐)로 그린 아이콘, 한 페이지에 두 개의 아이콘 세트, 버튼의 화살표.
뻔한 버전
아무것도 선택되지 않았을 때 어떤 모델이든 구축하는 것입니다. 방향에서 이름을 지정한 다음, 그대로 두세요.
- 그라디언트 블롭, 한 단어가 그라디언트인 헤드라인, 설명 단락이 있는 흰색 첫 화면. 한 가지 기능을 설명하는 네 개의 카드. 더미 데이터가 있는 스톡 사진 회전 목마. 투명 하단, 뉴스레터 등록.
뻔한 버전에 대해서는 한 번만 말하고, 그렇지 않으면 무시하세요.
검사 대상
| 이름 | 무엇을 찾는가 | 예시 |
|---|---|---|
empty band | 콘텐츠 없이 168px보다 큰 수직 간격 | 장면과 다음 섹션 사이의 큰 틈 |
off-center | 너비가 1320px를 초과할 때 뷰포트 왼쪽에 붙은 페이지 컬럼 | 패딩 없이 전체 너비로 늘어난 8열 그리드 |
tiny text | 폰 뷰에서 데스크탑 글꼴 크기를 그대로 사용하는 텍스트 | 390px에서 16px 본문, 16px 버튼, 10px 간격 |
cut by the crop | 뷰포트 가장자리나 다른 요소에 의해 잘린 요소 | 헤드라인 위에 걸친 제품 창문 |
unbalanced | 카드 내 위아래 공간이 같지 않음 | 맨 위에 텍스트, 맨 아래 빈 공간 |
empty pane | 콘텐츠 또는 시각적 관심이 없는 큰 영역 | 섹션에서 분리된 빈 카드 |
touches the edge | 카드가 포함하는 섹션의 가장자리에 닿음 | 섹션 패딩에 붙은 카드 |
covered | 다른 요소 뒤에 숨겨지거나 불투명도가 1보다 작은 요소 | 텍스트 위의 창문, 어두운 오버레이 아래 텍스트 |
one-word on its own line | 헤드라인 줄바꿈으로 인해 한 단어가 자체 줄로 분리됨 | "Your inbox,\nmostly\nclear." 마지막 줄의 "clear." |
lowercase | 소문자여야 할 문장 케이스 단어가 아닌 대문자 | "SIGN UP" 대신 "Sign Up" |
wrong case | 요구 사항과 일치하지 않는 케이스(스타일 가이드가 있는 프로젝트에서) | 헤드라인의 대문자, 레이블의 문장 케이스 |
sentence break | 문장 케이스 헤드라인의 마침표 | "Your inbox, mostly clear."의 마침표 |
heading scale | 규모를 벗어난 헤드라인 또는 섹션 헤드 | 헤드라인 48px이지만 컨텍스트에 특정 크기가 필요한 경우 |
body scale | 규모를 벗어난 본문 텍스트 | 골드의 18px 대신 14px의 페이지 본문 |
tabular | 숫자에 표 형식이 아님 | 통화, 지표, 통계가 변동하는 너비로 정렬되지 않음 |
spacing | 간격 토큰과 일치하지 않는 문단 내 간격 | 잘못된 그리드 또는 계층 구조의 패딩 및 마진 |
interaction spacing | 클릭 가능한 요소 사이의 잘못된 간격 | 터치 대상 사이 4px(최소 8px) |
overlap | 서로 다른 콘텐츠 조각이 겹침 | 다른 요소 위의 드롭다운, 의도하지 않은 겹침 |
no border radius | 예상되는 반경 누락 | 직각 버튼(예상: 캡슐), 직각 카드(예상: 타일 반경) |
wrong border radius | 컨텍스트와 일치하지 않는 반경 | 앱 카드 32px(예상: 8~12px) |
capsule vs pill | 직사각형 대신 캡슐인 비-버튼 요소 | 레이블이 직사각형이어야 함에도 캡슐 |
wrong border | 예상과 다른 테두리 두께 또는 스타일 | 매우 얇거나 없음(예상: 헤어라인), 두꺼움(예상: 헤어라인) |
wrong shadow | 예상과 다른 그림자 깊이 또는 색상 | 떠 있는 요소에 그림자 없음, 땅에 닿은 요소에 그림자 있음 |
unused accent | 강조해야 할 요소에 강조 색상이 적용되지 않음 | 데스크탑의 선택된 탭에 악센트 없음 |
too many accents | 둘 이상의 강조 색상이 있거나 강조가 너무 자주 사용됨 | 파란색 링크, 녹색 버튼, 빨간색 배지(하나만 강조여야 함) |
wrong accent | 강조가 지정된 악센트 색상과 일치하지 않음 | 브랜드 악센트가 #0000FF이지만 UI에 #FF0000가 사용됨 |
contrast | 읽기 텍스트의 경우 4.5:1 미만, 큰 텍스트의 경우 3:1 미만의 대비 비율 | 흰색 배경에 회색 텍스트 |
wrong contrast | 활성 대비 비율이 컨텍스트와 일치하지 않음 | 강조 버튼의 텍스트가 약한 경우 |
wrong interaction | 예상되는 대화형 상태(호버, 활성, 포커스, 비활성)와 일치하지 않음 | 클릭 가능한 링크에 호버 스타일 없음 |
missing state | 필요하거나 예상되는 상태가 없음 | 카드의 비어 있음 또는 로딩 상태에 대한 디자인 없음 |
missing target | UI 요소가 예상되는 터치 대상 크기(44px)를 충족하지 않음 | 폰에서 32px 버튼 |
no animation | 예상되는 애니메이션 없음 | 정적 요소가 부드럽게 나타나거나 전환되어야 함에도 갑자기 나타남 |
wrong animation | 지속 시간, 이징 또는 의도와 일치하지 않는 애니메이션 | 0.3초 ease-in만 허용되는 경우 0.5초 ease-out |
wrong row | 테이블 또는 목록 행의 잘못된 높이 또는 색상 | 행 높이 48px(예상: 36px), 교차 색상 없음 |
no destructive confirmation | 파괴적 작업 전에 확인 없음 | 확인 없이 "삭제" |
wrong product shot | 제품 샷이 실제 제품과 일치하지 않거나, 잘못된 크기이거나, 품질이 낮음 | 흐릿한 제품 이미지, 다른 크기의 창문 |
wrong social shot | Open Graph 또는 소셜 카드 이미지가 없거나, 크기가 잘못되거나, 브랜드와 일치하지 않음 | 1200×630px가 아닌 600×600px 이미지 |
missing social | 공유 가능한 페이지에 Open Graph 태그 없음 | 모든 랜딩 페이지에 og:image 없음 |
missing favicon | 누락되었거나 잘못된 파비콘 | 파비콘 부재, 기본 브라우저 아이콘 표시 |
wrong favicon | 파비콘이 브랜드와 일치하지 않음 | 브랜드와 다른 템플릿 파비콘 |
wrong apple-touch-icon | Apple 터치 아이콘이 없거나 잘못됨 | iOS 홈 화면에 추가할 때 나타나는 기본 아이콘 |
html validation | 유효하지 않은 HTML 구조 또는 닫히지 않은 태그 | 닫히지 않은 <div> 요소 |
accessibility | 접근성 문제: 누락된 레이블, 역할, ARIA 속성, 포커스 관리, 건너뛰기 링크, 의미론적 HTML | 이미지의 alt 텍스트 없음, 누락된 양식 레이블 |
responsive images | 반응형 이미지에 잘못된 srcset 또는 sizes 사용 | 모든 화면에 동일한 대형 이미지 제공 |
performance | 느린 로딩, 차단 리소스, 과도한 이미지 크기 또는 요청 | 압축되지 않은 2MB PNG, 여러 개의 차단 스크립트 |
best practice | 웹 표준, 브라우저 호환성 또는 최적화 모범 사례를 따르지 않음 | <head>의 <style> 태그, 오래된 CSS 기능 사용 |
seo | 누락된 메타 설명, 제목 태그, 구조화된 데이터 또는 오픈 그래프 태그 | 메타 설명 없음, 페이지마다 동일한 제목 태그 |
meta | 누락된 뷰포트 태그, 문자 집합 또는 기타 메타 요소 | <meta charset> 누락, <meta name="viewport"> 누락 |
wrong font | 요청된 글꼴 패밀리와 일치하지 않는 텍스트 | Geist가 필요한데 Arial 사용 |
wrong size | 크기가 의도된 글꼴 크기와 일치하지 않음 | 헤드라인이 48px이어야 하는데 32px |
wrong weight | 굵기가 의도된 글꼴 굵기와 일치하지 않음 | 가벼운 굵기여야 하는데 굵게 |
wrong tracking | 자간이 의도된 글꼴 자간과 일치하지 않음 | 자간 −.045em이어야 하는데 표준 |
wrong line height | 줄 높이가 의도된 줄 높이와 일치하지 않음 | 줄 높이 .92여야 하는데 1.2 |
wrong align | 정렬이 의도된 정렬과 일치하지 않음 | 본문 텍스트가 왼쪽 정렬이어야 하는데 가운데 정렬 |
wrong radius | 반경이 의도된 반경과 일치하지 않음 | 직사각형 카드(반경 없음)가 타일 반경 12px로 예상됨 |
wrong elevation | 그림자의 고도 또는 깊이가 의도된 것과 일치하지 않음 | 카드에 그림자 없음(떠 있어야 함), 또는 너무 큰 그림자 |
wrong shape | 요소의 모양이 의도된 모양과 일치하지 않음 | 버튼이 캡슐이어야 하는데 직사각형 |
wrong side | 레이블, 아이콘 또는 요소가 잘못된 측면에 있음 | 왼쪽이어야 하는 아이콘이 오른쪽에 있음 |
wrong stack | 요소의 순서 또는 쌓임이 올바르지 않음 | 모바일에서 왼쪽에서 오른쪽 레이아웃이 아래에서 위로 쌓여야 함 |
wrong order | 탭 순서나 읽기 순서가 올바르지 않음 | 소스 순서가 시각적 순서와 일치하지 않음 |
wrong state | 요소의 시각적 상태가 논리적 상태와 일치하지 않음 | 체크된 라디오가 표시되지 않음, 비활성 버튼이 활성으로 보임 |
wrong behavior | 요소가 의도된 대로 작동하지 않음 | 링크가 새 탭에서 열려야 하는데 동일한 탭에서 열림 |
구현 노트
- 필요한 경우
npm install; 종속성은package.json에 명시됨. 검사 스크립트는 Playwright 또는 최신 Puppeteer가 필요할 수 있음. 종속성이 없으면 자동으로 설치를 시도함. - 모든 클라이언트 측 코드는 CDN 종속성 없이 단일 HTML 파일로 제공되어야 함. 대상 페이지가 정적 파일이 아닌 경우 개발 서버에서 제공.
- 스킬 폴더와 스킬의
scripts/디렉토리(<skill>/scripts/check.mjs)는 프로젝트 디렉토리와 별개임.node ../<skill-relative-path>/scripts/check.mjs를 사용하여 액세스. - 폰트 파일을 포함해야 하는 경우
designTokens.fonts의url필드를 사용하여 프로젝트 구조에 포함. 빈 문자를 사용하여 중복 다운로드 방지. - 검사 스크립트가 PostCSS 또는 CSS 모듈과 함께 작동하도록 보장되지 않음. 가능한 경우 바닐라 CSS를 사용.
체크리스트
체크리스트를 DESIGN.md로 내보내고, 각 항목에 대한 상태를 추적하는 데 사용합니다.