aj3x/claude-skills

디자인: 기능 우선, 불필요한 것은 없다

입장

좋은 디자인은 사람과 그들이 하려는 일 사이의 가장 짧고 정직한 길입니다. 형식과 기능은 서로를 보완하며, 최고의 작업에서는 둘을 구분할 수 없습니다. 형식은 기능을 따릅니다(Sullivan); 적되, 더 나은(Rams).

우선 순위 규칙: 형식과 기능이 충돌할 때, 기능이 항상 승리합니다. 아름다움은 명확성, 비례, 적합성으로 얻어지는 것이지, 사용성, 속도, 접근성, 정직성을 희생해서 사는 것이 아닙니다. 불필요한 것은 없고, 경박한 것도 없습니다: 모든 요소는 그것이 수행하는 작업으로 그 존재를 정당화해야 합니다.

조용함은 밋밋함이 아닙니다. 목표는 사용 중에 사라지는 디자인(Rams의 '중립 도구', Morrison과 Fukasawa의 '초정상', Muji의 '공허함')이지, 스스로를 과시하는 디자인이 아닙니다.

결정 절차

각 요소, 기능, 스타일 선택 또는 애니메이션에 대해 실행합니다:

1. 이것은 누구의 작업을 위한 것인가? 사용자와 목표를 한 문장으로 말하세요. 할 수 없다면 멈추고 알아내세요.
2. 이 요소는 어떤 작업을 수행하는가? (정보 제공, 행동 활성화, 그룹화, 방향 제시, 피드백, 신뢰 구축, 인식 지원). 작업이 없으면 삭제하세요.
3. 제거, 병합 또는 연기할 수 있는가? 제거를 시도해보세요. 잃는 것이 없으면 제거된 상태로 유지합니다. 하나의 것이 손실된다면 더 간단한 요소가 그것을 대신할 수 있는지 물어보세요.
4. 어떤 작업에 해를 끼치는가? 속도, 명확성, 오류율, 접근성, 로드, 주의를 확인하세요. 기능에 측정 가능한 해를 끼치는 것은 아무리 예뻐도 기능에게 집니다.
5. 가장 간단한 버전이 정직하고 완전한가? 벗어날 기능적 이유가 없으면 관습적인 패턴을 선호하세요(야콥의 법칙).
6. 그런 다음 형식을 다듬으세요: 정렬, 간격, 리듬, 계층, 일관성. 이 단계에서의 주의는 꼼꼼함(Rams #8)이지 장식이 아닙니다.

두 옵션이 기능적으로 동등할 때는, 더 적은 부품, 더 적은 상태, 더 적은 단어를 가진 것을 선택하세요.

실천을 위한 원칙

출처는 references.md에 있습니다. 인용이 아닌 의역입니다.

원칙	실천
Rams: 유용함	작업을 돕지 않는 모든 것을 잘라내세요. 기능, 색상, 테두리, 아이콘, 카피.
Rams: 이해 가능함	인터페이스는 스스로를 설명합니다. 미스터리 아이콘 대신 레이블; 가시적 상태; 매뉴얼 불필요.
Rams: 방해하지 않음	크롬은 뒤로 물러나고, 콘텐츠가 주도합니다. 중립적인 기본 팔레트, 기본 작업 하나를 위한 악센트 하나.
Rams: 정직함	가짜 긴급성, 가짜 진행률, 부풀려진 주장, 또는 척하는 컨트롤은 없습니다. 로딩은 실제 상태를 보여줍니다.
Rams: 오래 지속됨	유행성 틱(유리 효과, 그 자체를 위한 그라데이션, 참신한 레이아웃)을 피하세요. 내구성 있는 서체, 그리드, 토큰을 사용하세요.
Rams: 꼼꼼함	엣지 케이스, 빈/오류/로딩 상태, 긴 문자열, 세부 사항도 디자인의 일부입니다.
Rams: 가능한 한 적은 디자인	필수 요소로 줄인 다음, 필수 요소가 올바른지 확인하세요.
힉의 법칙	더 적고, 그룹화된 선택. 뷰당 하나의 기본 작업; 나머지는 점진적 공개.
피츠의 법칙	빈번하고 기본적인 타겟은 포인터/엄지가 이미 있는 곳에 크고 가깝게. 최소 ~44px 터치 타겟(WCAG 2.2 기준 24px CSS 하한).
야콥의 법칙	익숙한 패턴(네비게이션 배치, 폼 동작, 아이콘)을 사용하세요. 참신함은 기능적 이득이 필요합니다.
밀러의 법칙 / 청킹	7개 항목 세기에 의존하지 마세요; 정보를 의미 있는 덩어리로 그룹화하고 작업 세트를 작게 유지하세요.
인지 부하	지금 필요한 것만 보여주세요. 화면 간에 기억하게 하지 마세요; 컨텍스트를 앞으로 전달하세요.
도허티 임계값	~400ms 이내에 응답하세요. 그 이상이면 즉각적인 피드백, 스켈레톤, 또는 낙관적 업데이트를 표시하세요; 절대 조용히 차단하지 마세요.
테슬러의 법칙	복잡성은 보존됩니다. 시스템(기본값, 추론, 자동화)에서 흡수하고, 사용자에게 전가하지 마세요. 단, 복잡성을 드러내는 것이 목적인 경우는 예외입니다.
포스텔의 법칙	다양한 입력(공백, 형식, 대소문자)을 수용하고; 일관되고 엄격한 출력을 내보내세요. 부드럽게 검증하고, 정확하게 설명하세요.
게슈탈트: 근접성, 공통 영역, 유사성, 연결성	테두리 전에 간격으로 그룹화하고, 테두리 전에 박스로 그룹화하세요. 간격은 가장 저렴한 구조입니다. 유사한 기능, 유사한 모양.
미적-사용성 효과	다듬음은 사물을 더 쉽게 느끼게 하고 관용을 사지만, 실제 사용성 결함을 가릴 수 있습니다. 실제 작업으로 테스트하세요; 결함이 있는 흐름을 출시하는 이유로 절대 사용하지 마세요.
폰 레스토르프	중요한 하나를 다르게 만드세요. 모든 것이 강조되면 아무것도 강조되지 않습니다.
연속 위치, 최고-끝	목록과 흐름에서 핵심 항목을 처음/마지막에 배치하세요; 마지막 단계와 오류 순간을 배려하세요.
자이가르닉, 목표-그래디언트	다단계 작업에서 진행 상황을 보여주고 부분 작업을 저장하세요.
투프트: 데이터-잉크	차트와 테이블에서 모든 표시는 데이터를 담아야 합니다. 차트정크, 무거운 그리드라인, 3D, 중복 범례를 제거하고; 직접 레이블을 지정하세요.
노먼: 어포던스, 시그니파이어, 피드백	컨트롤은 조작 가능해 보입니다; 모든 행동은 가시적인 인정을 받습니다; 컨트롤을 효과에 매핑합니다; 오류를 복구 가능하게 만듭니다.
비넬리 / 뮐러-브록만	그리드, 작은 서체 규모, 적은 서체, 일관된 간격. 제약이 일관성을 만듭니다.
무나리 / 아이허	최소한의 수단으로 문제를 해결하세요; 일회성이 아닌 시스템; 새로 발명하기보다 컴포넌트를 재사용하세요.
크루그	사람들이 생각하게 하지 마세요. 읽기가 아닌 스캐닝을 가정하세요. 명확함이 영리함보다 낫습니다.
브로블레프스키	폼: 더 적은 필드, 상단 정렬 레이블, 인라인 검증, 합리적인 기본값. 모바일 우선은 우선순위를 강제합니다.
프로스트 (아토믹 디자인)	토큰을 사용하는 작은 재사용 가능한 부품으로 구축하세요; 일관성은 경계심이 아닌 시스템에서 옵니다.
토냐치니	상태를 가시적으로 만들고, 사용자 작업을 보호하며, 상호작용을 되돌릴 수 있게 유지하고, 직접 조작을 선호하며, 키보드 경로를 유지하세요.
아이브 / 램스 장인정신	객체가 불가피해 보일 때까지 세부 사항을 해결하세요. 장식보다 재료의 정직함.

리뷰 체크리스트

기능

• 기본 작업이 빠르게 완료 가능하며, 기본 동작이 명확합니다.
• 모든 요소는 이름을 붙일 수 있는 작업이 있습니다; 장식적인 것은 남아 있지 않습니다.
• 모든 상호작용 요소에는 hover/focus/active/disabled/loading/error 상태가 있습니다.
• 빈 상태, 오류, 오프라인, 느림, 긴 콘텐츠 케이스가 설계되었습니다.
• 동작은 되돌릴 수 있거나 위험에 비례하여 확인됩니다.
• 카피는 평이하고, 구체적이며, 행동 지향적입니다; 오류는 무슨 일이 있었는지와 해결 방법을 알려줍니다.
• 기능적 이유가 없다면 익숙한 패턴이 사용되었습니다.

형태 (기능이 통과한 후에만)

• 명확한 계층: 뷰당 하나의 초점; 눈을 가늘게 뜨고 보는 테스트 통과.
• 일관된 그리드, 간격 규모, 서체 규모; 적은 서체와 굵기.
• 색상은 제한적이고, 목적이 있으며, 의미를 전달하는 유일한 수단이 아닙니다.
• 정렬과 리듬이 정확합니다; '거의' 정렬된 것은 없습니다.

정직성과 수명

• 다크 패턴, 가짜 희소성, 오해의 소지가 있는 어포던스가 없습니다.
• 어떤 것도 지나가는 유행에 의존하지 않습니다.

안티-패턴

• 장식: 장식적인 그라데이션, 그림자, 일러스트레이션, 모든 레이블 옆의 아이콘, 모든 것 주변의 테두리, 대비를 낮추는 배경.
• 무분별한 움직임: 작업을 지연시키는 애니메이션, 주의를 끌기 위한 루프, 패럴랙스. 움직임은 변화(출처, 계층, 상태)를 설명해야 하며 UI 피드백의 경우 200300ms를 유지해야 합니다. prefers-reduced-motion을 존중하세요.
• 다크 패턴: 컨펌셰이밍, 숨겨진 비용, 사전 체크된 옵트인, 위장된 광고, 로치-모텔 취소, 잔소리, 가짜 카운트다운, 동등한 결과의 수락/거절에 대한 비대칭 버튼.
• 미스터리 미트: 레이블이나 툴팁이 없는 아이콘 전용 컨트롤, 가시적 대안 없이 제스처 전용 동작.
• 선택 덤핑: 좋은 기본값 대신 설정과 옵션.
• 재발명: 사용자 정의 스크롤바, 비표준 폼 컨트롤, 그 자체를 위한 맞춤형 네비게이션.
• 강조 인플레이션: 모든 것이 굵게, 색상, 또는 배지.
• 내용보다 스타일: 콘텐츠가 존재하기 전에 컨테이너를 디자인함; 로렘 입숨 승인.
• 미니멀리즘으로 숨기기: 깔끔해 보이기 위해 레이블, 어포던스 또는 상태를 제거함. 미니멀은 필수적임을 의미하지, 없음을 의미하지 않습니다.
• 쇼케이스 우선: 포트폴리오 샷은 좋아 보이지만, 빈 상태와 오류 상태는 비어 있습니다.

베이스라인 (논쟁의 여지 없음)

접근성 (WCAG 2.2 AA 최소)

• 텍스트 대비 4.5:1 (큰 텍스트와 UI 경계/아이콘의 경우 3:1).
• 전체 키보드 작동, 논리적 포커스 순서, 가시적 포커스 표시기.
• 시맨틱 HTML 우선; ARIA는 간격을 메우는 데만 사용. 모든 입력에 레이블; 의미 있는 이미지에 대체 텍스트.
• 색상만으로 의미를 전달하지 마세요. 손실 없이 200% 확대 및 텍스트 크기 조정 지원.
• prefers-reduced-motion 및 prefers-color-scheme을 존중하세요. 초당 3회 이상 콘텐츠 깜빡임 없음.
• 타겟은 최소 24x24 CSS px, 터치의 경우 44x44를 목표로 함.

반응형

• 콘텐츠 우선 및 모바일 우선 설계; 레이아웃은 콘텐츠에 맞게 조정되며, 중단점은 기기 이름이 아닌 콘텐츠가 깨지는 곳에서 설정됨.
• 320px 너비에서 가로 스크롤 없음. 상대 단위, 유동 서체, min()/clamp().
• 본문 텍스트 ~16px 최소, 줄 길이 4575자, 줄 높이 1.41.6.
• 터치와 포인터 모두 작동; 호버는 유일한 경로가 아님.

디자인으로서의 성능

• 빠름은 기능입니다: 가벼운 에셋, 레이아웃 이동 없음, 시스템 폰트 또는 소수의 웹 폰트, 향상 전 의미 있는 콘텐츠.

형식이 주도할 수 있는 경우 (좁은 예외)

형식은 기능에 도움이 되는 경우에만 주도할 수 있습니다. 각 사용은 기능을 명시해야 합니다:

• 인식: 사람들이 제품을 식별하고 신뢰하는 데 도움이 되는 브랜드 마크, 색상 또는 일관된 시각적 시그니처.
• 신뢰와 신뢰성: 부족함이 위험(결제, 건강, 보안)을 알리는 전문적인 다듬음.
• 가독성과 스캐닝: 읽고 찾는 것을 더 쉽게 만들기 위해 선택된 타이포그래피 규모, 여백, 대비.
• 작업에 대한 정서적 적합: 분위기가 완료 또는 편안함에 영향을 미칠 때 컨텍스트에 맞는 어조(의료용 차분, 아동 학습용 유쾌).
• 작업이 있는 즐거움: 성공을 확인하거나 메커니즘을 가르치는 단일하고, 짧고, 건너뛸 수 있는 순간(빈번하거나 차단하는 경로에서는 절대 사용하지 않음).
• 예술 지향적 컨텍스트: 경험 자체가 제품인 에디토리얼, 마케팅, 게임, 포트폴리오. 거기서도 네비게이션, 읽기, 구매 경로는 기능 우선으로 유지.

예외가 '이것은 사용자가 X를 하는 데 도움이 된다'로 설명될 수 없다면, 예외가 아닙니다.

작업 방법

1. 사용자, 작업, 제약 조건을 2~3문장으로 작성하세요.
2. 콘텐츠와 구조를 먼저(정보 계층, 흐름), 비주얼은 나중에.
3. 실제 콘텐츠, 실제 데이터 볼륨, 실제 엣지 케이스를 사용하세요.
4. 가장 평범한 관습적 해결책으로 시작하세요; 테스트 또는 명시된 필요가 정당화하는 것만 추가하세요.
5. 체크리스트로 리뷰하세요; 추가하기 전에 삭제하세요.
6. 디자인 결정을 보고할 때는, 그것이 제공하는 기능을 명시하고, 기능을 해쳤기 때문에 매력적인 옵션이 거부되었다면 명시적으로 말하세요.