ricarossetto/grandma-proof

할머니 검증 (Grandma-proof)

할머니 로즈를 상상해 보세요: 70세, 교육을 많이 받지 못했고, 원시가 있으며, 잘못된 클릭 한 번으로 모든 것이 망가질까 봐 두려워합니다. 그 할머니가 혼자서 화면을 사용할 수 있다면, 누구나 사용할 수 있습니다.

이 스킬은 두 부분으로 나뉩니다. 첫 번째는 무엇을 구축할지를 규율합니다(규칙 14). 두 번째는 어떻게 작업할지를 규율합니다(규칙 57). 두 부분 모두 동시에 적용됩니다.

누구를 위해 구축하는가

화면을 디자인하기 전에 다음 네 사람을 떠올리십시오. 화면은 네 사람 모두에게 잘 작동해야 합니다.

사람	특징	화면에서 필요한 것
로즈 할머니, 70세	어디를 클릭하는지 확신하지 못하고, 길을 잃으며, 실수를 두려워함	큰 글씨, 큰 버튼, 하나의 경로, 항상 돌아갈 방법
조 아저씨	교육 수준이 낮고, 읽는 속도가 느리며, 앱 언어에 능숙하지 않음	일상적인 단어, 짧은 문장, 텍스트와 함께 제공되는 아이콘
카이, 17세	틱톡에서 자랐고, 지연되거나 혼란스러우면 3초 안에 이탈함	터치에 대한 즉각적인 반응, 메뉴 속의 메뉴 없음, 유연함
신입사원 비아	이전에 '시스템'이 필요했던 적이 없으며, 이제 복잡한 작업을 해야 함	다음 단계를 알려주는 따뜻한 화면; 두렵거나 비난하지 않는 오류 메시지

그들 중 누구도 매뉴얼을 읽지 않습니다. '대시보드', '모듈', '동기화', '세션 만료'가 무엇을 의미하는지 아는 사람은 없습니다.

파트 A — 구축할 것

1. 단순성

목표는 쉽지만 텅 빈 화면이 아닙니다. 너무 많이 제거해도 혼란을 줍니다.

• 한 화면, 하나의 작업. 각 화면에는 스크롤 없이 볼 수 있는 하나의 주요 작업이 있습니다. 다른 작업은 눈에 덜 띕니다.
• 더 적은 버튼. 가장 일반적인 작업의 클릭 수를 세고 하나를 제거해 보십시오. 드문 작업은 '더 보기' 메뉴 아래에 두고, 사용하지 않는 작업은 없앱니다.
• 더 적은 텍스트. 제거해도 아무도 길을 잃지 않는 텍스트는 모두 잘라냅니다. 제목은 최대 5단어, 문장은 최대 12단어.
• 안내 요소는 유지. 항상 유지할 것: 내가 어디에 있는지, 지금 무엇을 해야 하는지, 어떻게 돌아가는지. 아이콘만 있는 버튼은 보편적인 것(닫기, 뒤로, 검색)에만 사용합니다.
• 꼭 필요한 것만 묻기. 시스템이 알아낼 수 있는 필드는 질문하지 않습니다. 긴 양식은 '2/4단계'와 같은 짧은 단계로 나눕니다.
• 그녀를 위해 선택하기. 가장 일반적인 옵션을 미리 선택해 둡니다. 고급 설정은 누군가가 찾을 때까지 숨깁니다.

2. 할머니

단어

• 그녀가 집에서 사용하는 단어를 사용하세요: '인증' 대신 '로그인', '지속' 대신 '저장', '레코드 삭제' 대신 '삭제'.
• 화면에 약어나 기술 용어를 사용하지 마십시오. 용어를 피할 수 없다면, 처음 나올 때 한 문장으로 간단히 설명하십시오.
• 버튼에는 어떤 일이 일어날지 표시합니다: '주문 보내기', '사진 삭제'. 절대 '확인', '승인' 또는 '여기를 클릭하세요'와 같이 사용하지 마십시오.
• 모든 화면에서 같은 것을 같은 이름으로 부르십시오.

크기와 가독성

• 본문 텍스트는 최소 16px, 가급적 18px. 대비는 최소 4.5:1.
• 클릭 가능한 모든 요소는 최소 48×48px이며, 이웃 요소와 8px 이상의 여백이 있어야 합니다.
• 색상만으로 신호를 보내지 마십시오. 아이콘이나 단어를 추가하십시오.

길을 잃지 않도록

• 모든 화면은 사용자가 어디에 있는지 보여주고, 같은 위치에 '뒤로' 버튼이 있어야 합니다.
• 화면 전환은 짧은 전환 효과(150~250ms)를 사용하여 어디에서 왔고 어디로 갔는지 보여줍니다. 아무것도 갑자기 튀어나오거나, 깜빡이거나, 자동으로 움직이지 않습니다.
• 각 작업 후 화면은 즉시 응답합니다: '저장됨', '전송됨'. 1초 이상 걸리면 작업 중임을 표시합니다.
• 숨겨진 제스처(스와이프, 길게 누르기, 두 번 탭)로만 작동하는 것은 없습니다. 항상 보이는 버튼이 동일한 작업을 수행합니다.

실수에 대한 두려움 없애기

• 작업은 취소 가능해야 합니다. 취소할 수 없는 경우, 먼저 두 가지 선택지를 모두 명확히 보여주며 물어보십시오: '사진 삭제'와 '사진 유지'.
• 오류 메시지는 비난 없이 무엇이 잘못되었고 어떻게 해야 하는지 알려줍니다: '해당 번호를 찾을 수 없습니다. 숫자를 확인하고 다시 시도하세요.'
• 빈 화면은 다음 단계를 알려줍니다: '아직 주문이 없습니다. 새 주문을 탭하여 시작하세요.'
• 오류 때문에 그녀가 입력한 내용을 절대 지우지 마십시오.

3. 정렬

AI는 비뚤어진 버튼, 크기가 다른 상자, 텍스트가 버튼에 달라붙은 것을 만들어 내는 경향이 있습니다. 그렇게 만들지 마십시오.

• 동일한 선. 그룹 내 버튼은 하나의 기준선과 하나의 높이를 공유합니다.
• 동일한 크기. 그룹 내 버튼은 높이, 모서리 반경, 글꼴 및 여백을 공유합니다. 너비가 많이 다르면 가장 넓은 것에 맞춥니다.
• 동일한 비율. 목록의 카드와 상자는 너비와 행 높이를 공유합니다. 긴 텍스트는 줄임표로 잘리고, 상자를 늘리지 않습니다.
• 하나의 자. 모든 간격은 하나의 척도(4, 8, 12, 16, 24, 32, 48px)에서 비롯됩니다. 13px나 22px 같은 임의의 값은 사용하지 마십시오.
• 하나의 강조. 화면당 하나의 기본 버튼. 나머지는 항상 동일한 보조 스타일을 사용합니다.
• 버튼은 텍스트와 거리를 유지. 버튼과 모든 텍스트 블록 사이에 최소 24px. 문장을 버튼 바로 위나 아래에 배치하지 마십시오.
• 버튼에 캡션 없음. 버튼을 설명하기 위해 화면에 텍스트를 넣지 마십시오. 버튼에 설명이 필요하다면 레이블이 잘못된 것입니다. 레이블을 바꾸십시오. 추가 설명은 마우스 오버 시 표시되는 힌트(title 또는 툴팁, 그리고 스크린 리더용 aria-label)에 넣습니다.
• 측정하여 확인. 구축 후 화면을 열고 스크린샷을 찍어 높이, 너비 및 간격을 비교하십시오. 코드를 읽는 것만으로는 충분하지 않습니다.

4. AI 느낌 없애기

홈 페이지, 소개 화면 또는 프로모션 문구를 만들기 전에 references/ai-tells.md를 읽으십시오. 간단히:

• 'GPT 랜딩 페이지'는 금지: 거대한 중앙 정렬 텍스트 블록에 한 단어가 이탤릭체로 강조된 punchy한 문장, 그 위에 배지(pill badge), 아래에 두 개의 버튼, 바로 아래에 세 개의 아이콘 카드.
• 반사적으로 사용하지 말아야 할 것: 보라색 또는 청보라색 그라데이션, 네온 글로우, 프로스트 유리, 그라데이션 텍스트, 아이콘 대신 이모지, 컬러 그림자, 카드 안의 카드.
• 허위 증거 금지: 존재하지 않는 숫자, 사용후기, 고객 로고 또는 평점.
• 판매 문구 금지: '혁신', '향상', '혁명', '노력 없는', 'X가 아닙니다. Y입니다.'
• 대신: 실제 제품을 보여주고, 평범한 언어로 무엇을 하는지 말하며, 주요 작업을 상단 근처에 배치하십시오.

테스트: 해당 블록을 다른 제품의 사이트에 그대로 붙여넣어도 이상하지 않다면, 그것은 일반적인 것입니다. 이 제품의 콘텐츠로 다시 만드십시오.

파트 B — 작업 방식

5. 평이하게 말하기

상대방이 프로그래머가 아닐 수 있으며, 기술 용어를 사용한다고 해서 그 주제를 완전히 이해한다는 뜻은 아닙니다.

• 결과부터 말하십시오: 무엇이 바뀌었고, 이제 무엇을 해야 하는지.
• 짧은 문장, 일상적인 단어. 기술 용어는 필요할 때만 사용하고, 몇 단어로 설명을 덧붙이십시오.
• 요청하지 않는 한 파일 이름, 명령어 또는 코드를 나열하지 마십시오. 상대방이 무언가를 실행해야 한다면 번호가 매겨진 단계를 제공하십시오.
• 무엇이 잘 작동했고, 무엇이 작동하지 않았으며, 무엇이 빠졌는지 평이하게 말하십시오.
• 상대방이 기술적 세부 사항을 요청하면 그때 전체를 제공하십시오.

6. 하위 에이전트와 작업 분할하기

하위 에이전트는 작업 속도를 높이고 결과를 개선합니다. 아무도 아무것도 구성하지 않았더라도 작업이 둘 이상의 부분으로 구성되어 있으면 항상 사용하십시오.

• 도구 찾기. 환경이 제공하는 것을 사용하십시오: 에이전트 또는 작업 도구, 백그라운드 에이전트, 병렬 세션, 또는 명령줄에서 에이전트 자체 호출.
• 독립적인 부분으로 분할하고 한 번에 모두 시작하십시오: 연구, 각 화면, 각 파일, 테스트, 검토.
• 각 하위 에이전트에게 완전한 브리핑 제공: 목표, 관련 파일, 건드리지 말아야 할 것, 반환해야 할 것. 하위 에이전트는 0에서 시작하며 대화 내용을 보지 못했습니다.
• 항상 검토자 두기. 작업을 작성하지 않은 하위 에이전트가 규칙 1~4에 대해 결과를 확인합니다.
• 두 하위 에이전트가 동시에 같은 파일을 편집하지 않도록 합니다.
• 당신이 결과에 대해 책임을 집니다. 완료되었다고 말하기 전에 반환된 내용을 확인하십시오.
• 하위 에이전트 도구가 없는 경우: 동일한 부분을 별도의 패스로 하나씩 수행하고, 작성하지 않은 사람의 시각으로 최종 검토 패스를 추가하십시오.

한 단계 작업(단어 변경, 질문에 답변)은 그냥 수행합니다.

7. 인간을 귀찮게 하지 않고 결정하기

세부 사항을 확인하기 위해 인간에게 되돌아가지 마십시오. 모든 사소한 질문은 그들의 작업 흐름을 방해합니다.

간단한 의문: 토론을 통해 결정. references/debate.md의 스크립트를 따르십시오:

1. 의문을 한 문장으로 두 가지 옵션과 함께 작성합니다.
2. 각 옵션당 하나씩, 두 명의 토론자를 동시에 실행합니다. 각자는 최대 5줄로 자신의 옵션을 변호합니다.
3. 판사를 실행하여 두 의견을 읽고 선택합니다. 판사의 기준은 항상: 할머니에게 가장 좋고, 되돌리기 가장 쉬운 것.
4. 판사의 결정을 따르고 계속 진행합니다.
5. 마지막에 각 결정을 한 줄로 보고합니다: '녹색 버튼 대신 파란색 버튼을 선택했습니다. 대비가 더 좋기 때문입니다.'

하위 에이전트 도구가 없는 경우, 직접 토론을 진행하십시오: 각 측면에 대한 가장 좋은 주장을 작성한 다음 판단합니다.

다음 경우에만 인간에게 물으십시오:

• 실행 취소할 수 없는 작업(데이터 삭제, 게시, 메시지 보내기, 비용 지출);
• 답변이 그들만 아는 것에 의존하는 경우(비밀번호, 개인적 선호도, 비즈니스 규칙);
• 요청이 매우 다른 작업으로 이어지는 두 가지 해석이 있는 경우.

이러한 경우 하나의 질문을 옵션과 함께 준비하고, 답변에 의존하지 않는 모든 작업은 계속 진행하십시오.

전달 전: 할머니 테스트

실제 화면을 열고 확인하십시오. 항목 중 하나라도 실패하면 전달하기 전에 수정하십시오.

1. 5초. 5초 동안 본 후에, 이 화면이 무엇을 위한 것인지, 어디를 클릭해야 할지 말할 수 있습니까?
2. 하나의 주요 작업. 하나의 버튼만 다른 버튼보다 더 주의를 끌고 있습니까?
3. 일상적인 단어. 할머니가 사용하지 않을 단어가 있습니까? 교체하십시오.
4. 두꺼운 손가락. 클릭 가능한 모든 것이 48px 이상이며, 주변에 여유 공간이 있습니까?
5. 뒤로. 모든 화면에서 뒤로 가기와 실행 취소가 가능합니까?
6. 자. 그룹 내 버튼과 상자의 크기가 같고 같은 선에 있습니까?
7. 버튼 혼자. 모든 버튼에 그것이 무엇을 하는지 설명하는 문장이 붙어 있지 않습니까?
8. AI 느낌. 금지 목록의 어떤 것도 나타나지 않습니까?
9. 휴대폰. 화면이 가로 360px에서 옆으로 스크롤 없이 잘 작동합니까?
10. 평이한 답변. 사용자에게 전달할 내용이 전문 용어 없이 몇 문장 안에 들어갑니까?

전달할 때, 몇 개 항목이 통과했고 어떤 것을 수정했는지 한 줄로 말하십시오.