Ringophilia/사용자처럼 생각하기

사용자의 관점에서 상호작용 생각하기

문제

AI가 상호작용을 작성할 때, 종종 구현 순서대로 구성하지 사용자의 순서대로 구성하지 않습니다. 데이터 구조가 먼저 있으면 그에 맞춰 컨트롤을 배치하고, 코드에서 어떤 함수가 먼저 작성되었는지에 따라 버튼을 배치합니다. 결과는:

• 긴 폼의 "저장" 버튼이 페이지 상단에 있어서, 사용자가 끝까지 작성한 후 다시 올라가서 찾아야 함
• "삭제"가 "저장" 바로 옆에 같은 색상, 같은 크기로 있음
• 가장 자주 사용되는 기능이 "더 보기 ⋯" 메뉴의 두 번째 계층에 숨겨져 있지만, 거의 사용하지 않는 설정이 툴바에서 가장 눈에 띄는 위치를 차지함
• 옵션이 하나뿐인데도 먼저 선택해야 "다음"을 클릭할 수 있음
• 이름을 바꾸려면: "편집 모드" 클릭 → 수정 → "적용" 클릭 → "저장" 클릭 → 확인 팝업 "정말 저장하시겠습니까?"
• 새 항목을 만들기 위해 세 단계의 마법사를 거쳐야 하지만, 실제로는 이름 하나만 입력하면 됨
• 버튼에 "제출", "실행", "확인"이라고 쓰여 있어서, 사용자가 클릭하면 무슨 일이 일어날지 모름
• 오류가 발생하면 "작업 실패"라는 메시지만 표시되고, 입력한 내용이 모두 사라짐

각각 하나씩 보면 치명적이지 않지만, 합쳐지면 "이게 왜 이렇게 불편하지?"라는 느낌을 줍니다.

첫 번째 단계: 사용자가 무엇을 하러 왔는지 분명히 하기

작업을 시작하기 전에 적어보세요 (마음속으로라도):

1. 누가 사용하는가: 처음 사용하는 초보자인가, 매일 사용하는 전문가인가?
2. 가장 자주 하는 1~3가지 작업은 무엇인가: 이 작업들은 가장 빠르고 눈에 띄어야 합니다.
3. 각 작업의 이상적인 경로: 프로그램을 시작할 때부터 완료할 때까지 최소 몇 단계가 필요한가?

인터페이스 레이아웃은 이 순서대로 정렬해야 하며, 기능 목록, 데이터베이스 필드 또는 코드 모듈 순서가 아닙니다.

두 번째 단계: 버튼과 진입점 배치

원칙	방법	반례
작업은 작업 대상 근처에 배치	행 내 편집/삭제는 해당 행에 배치; 카드 작업은 카드 위에 배치	먼저 행을 선택한 후 페이지 상단으로 가서 "편집"을 찾아야 함
완료 흐름의 위치에 배치	폼의 제출 버튼은 폼 끝에 배치; 대화상자의 버튼은 하단에 배치	긴 폼의 저장 버튼이 맨 위에 있음
빈도가 가시성을 결정	가장 자주 사용하는 것은 직접 노출; 가끔 사용하는 것은 메뉴에 배치; 거의 사용하지 않는 것은 설정에 배치	자주 사용하는 기능이 두 번째 계층 메뉴에 숨겨져 있음
한 화면에 하나의 주요 작업	주요 작업은 강조 스타일 사용, 다른 작업은 보조 스타일 사용	똑같이 눈에 띄는 파란색 버튼 다섯 개
위험 작업은 분리	삭제는 다른 색상, 더 먼 위치에 배치하거나 메뉴에 넣음	삭제와 저장이 나란히 있고, 모양이 같음
플랫폼 관행 따르기	Windows 대화상자 버튼은 오른쪽 아래, "확인"은 "취소" 왼쪽; macOS "취소"는 왼쪽, 주요 버튼은 가장 오른쪽; 웹 팝업 오른쪽 위에 닫기 버튼	독자적인 순서를 만듦
같은 작업은 항상 같은 위치	모든 페이지의 "새로 만들기"가 같은 위치에 있음	페이지마다 위치가 다름
진입점은 사용자가 찾는 곳에	사용자가 "내보내기"를 하고 싶다고 생각할 때 보는 곳 (툴바, 파일 메뉴, 목록 상단)	내보내기가 설정 페이지 안에 숨겨져 있음

세 번째 단계: 불필요한 단계 제거하기

주요 작업의 각 단계를 나열하고, 단계별로 질문하세요:

• 삭제할 수 있는가? 이 단계에서 사용자가 반드시 결정해야 하는가? 아니라면 삭제.
• 기본값을 제공할 수 있는가? 90%의 사용자가 같은 것을 선택한다면, 기본적으로 선택된 상태로 제공. 사용자의 마지막 선택을 기억하세요.
• 병합할 수 있는가? "편집 → 적용 → 저장"을 직접 편집, 자동 저장 또는 한 번의 저장으로 바꿀 수 있는가?
• 연기할 수 있는가? 등록, 세부 설정, 선택적 필드는 사용자가 실제로 필요할 때 물어볼 수 있는가?
• 자동으로 추론할 수 있는가? 파일 이름, 컨텍스트, 기존 데이터에서 추론할 수 있다면 사용자가 입력하게 하지 마세요.

일반적인 불필요한 단계:

불필요한 것	변경
되돌릴 수 있는 작업에도 "확인하시겠습니까?" 팝업	직접 실행하고 "실행 취소" 제공 (Gmail 스타일 토스트); 취소 불가능하고 영향이 큰 작업만 확인
확인 팝업에 "확인하시겠습니까? [확인][취소]"	결과와 대상을 명확히 표시: "3개 파일 삭제? 이 작업은 취소할 수 없습니다. [삭제][취소]"
옵션이 하나뿐인데도 선택해야 함	자동 선택 또는 단계 건너뛰기
별도의 "편집 모드" 스위치	바로 편집 가능하게
한 필드의 일이 여러 단계 마법사로 구성됨	입력 필드 하나 + 버튼 하나, 또는 인라인 생성
설정을 변경한 후 "적용"을 클릭하고 다시 "저장"을 클릭해야 함	한 번의 동작 또는 즉시 적용
작업 후 다른 페이지로 이동, 사용자가 다시 탐색해야 함	원래 위치에 남아, 바로 업데이트
매번 같은 정보를 다시 입력해야 함	기억하거나 미리 채움

네 번째 단계: 사용자가 요청하지 않은 것을 추가하지 않기

AI는 쉽게 "덤으로" 더 많은 일을 합니다: 사용자가 내보내기 버튼을 원했는데, 내보내기 형식 드롭다운, 내보내기 기록, 내보내기 설정 페이지가 추가됨; 사용자가 작은 도구를 원했는데, 사이드바, 설정 메뉴, 테마 전환, 정보 페이지, 도움말 센터, "출시 예정" 플레이스홀더 진입점이 추가됨.

기능, 메뉴, 진입점이 하나 추가될 때마다 사용자는 이해하고 건너뛰어야 할 것이 하나 더 늘어나며, 주요 작업의 진입점을 찾기 더 어려워집니다. 인터페이스의 모든 것은 사용자의 주의를 끌기 위해 경쟁합니다.

추가하기 전에 질문하세요:

• 사용자가 요청했는가? 요청하지 않았고, 주요 작업 완료에 필수적이지 않다면 추가하지 않음.
• 없으면 사용자가 막히는가? 막히지 않는다면 추가하지 않음.
• 옵션이 하나뿐이거나 거의 아무도 변경하지 않는가? 그렇다면 설정 항목이나 드롭다운이 필요하지 않음. 합리적인 기본값을 직접 사용.
• 비어 있거나, 구현되지 않았거나, "나중에 사용할 수도 있는" 것인가? 플레이스홀더 진입점, 회색 처리된 "출시 예정", 클릭해도 반응이 없는 메뉴를 배치하지 마세요.

일반적인 불필요한 것:

불필요한 것	변경
기능이 하나뿐인 도구인데 사이드바 + 상단 네비게이션 + 설정 메뉴가 있음	한 화면에 기능을 직접 배치
아무도 요청하지 않은 테마 전환, 언어 전환, 개인화 설정	하지 않음; 필요할 때 추가
한 페이지로 충분한데, "홈 / 대시보드 / 정보 / 도움말"로 나눔	한 페이지
같은 기능에 세 개의 진입점 (툴바, 우클릭 메뉴, 설정 페이지)	사용자가 가장 찾기 쉬운 진입점 하나; 단축키는 별도로 추가 가능
플레이스홀더 "출시 예정", "고급 기능", 빈 통계 카드	삭제
모든 값을 설정 가능한 항목으로 만듦	합리적인 기본값 제공, 사용자가 실제로 변경할 것만 노출

추가 기능이 실제로 유용하다고 생각되면, 주요 요구 사항을 완료한 후 한 문장으로 제안하고, 사용자가 결정하게 하세요. 직접 구현하지 마세요.

다섯 번째 단계: 사용자가 항상 무슨 일이 일어나고 있는지 알게 하기

• 버튼 문구 = 동사 + 대상: "CSV 내보내기", "프로젝트 삭제", "초대 보내기". "제출", "실행", "확인"이 아닙니다. 사용자의 말을 사용하고, 구현 용어를 사용하지 마세요 ("payload 동기화", "job 트리거"라고 쓰지 마세요).
• 클릭하면 반응이 있어야 함: 100ms 이내에 시각적 피드백; 1초 이상 소요되면 진행률 또는 로딩 상태를 표시하고 버튼을 비활성화하여 중복 제출 방지.
• 완료되면 사용자에게 알려야 함: 가벼운 성공 메시지 또는 인터페이스에 직접 결과 표시.
• 오류 발생 시 해결 방법을 알려야 함: 어디서 오류가 발생했는지, 어떻게 수정해야 하는지 명확히 설명; 오류를 발생한 필드 옆에 표시; 사용자가 이미 입력한 내용 유지.
• 빈 상태에서는 다음 단계를 안내해야 함: 목록이 비어 있을 때, 여기에 무엇이 나타날지 알려주고 "첫 번째 항목 만들기" 버튼 직접 제공.
• 키보드: 대화상자 열릴 때 포커스는 첫 번째 입력 필드에; Enter 제출, Esc 닫기; Tab 순서와 시각적 순서 일치.
• 갑자기 변경하지 마세요: 사용자 작업 중에 버튼 위치를 이동하거나, 클릭하는 곳을 막는 팝업을 띄우지 마세요.

CLI도 마찬가지입니다: 자주 사용하는 매개변수는 짧은 옵션과 합리적인 기본값 제공; 위험한 작업은 확인을 요청하지만 --yes 제공; 오류 메시지는 수정 방법 설명; 긴 작업은 진행 상태 표시.

여섯 번째 단계: 실제로 따라가 보기

작성을 마쳤다고 해서 사용성이 좋은 것은 아닙니다. 전달하기 전에 반드시 실제로 사용자로서 주요 작업을 따라가 보세요 (스크린샷 방식은 background-friendly 참조):

1. 처음 열어보는 척: 코드는 보지 말고, 인터페이스만 보고 5초 이내에 해야 할 일의 진입점을 찾을 수 있는가?
2. 단계 수 세기: 주요 작업을 완료하는 데 몇 번의 클릭/입력이 필요한가? 첫 번째 단계에서 작성한 이상적인 경로와 비교하여, 추가된 각 단계에는 이유가 있어야 함.
3. 키보드만으로 따라가 보기.
4. 일부러 한 번 실수해보기: 잘못된 입력, 중간 취소, 네트워크 끊김 등이 발생할 때 무슨 일이 일어나고, 입력이 손실되는지 확인.
5. 창을 줄이거나, 내용이 많거나 비어 있을 때 버튼이 여전히 합리적인 위치에 있는가?

실행 환경이 없어 따라갈 수 없을 때는 사용자에게 "상호작용 흐름이 실제로 검증되지 않았습니다"라고 명확히 알리고, 설계한 단계를 나열하여 사용자가 확인할 수 있게 하세요.

경계

• 사용자가 레이아웃이나 흐름을 지정했다면 사용자의 것을 따름; 문제가 있다고 생각되면 말하고, 사용자가 결정하게 함.
• 전문 도구의 숙련된 사용자는 초보자 가이드보다 효율성을 더 중시할 수 있음: 단축키, 일괄 작업, 고밀도가 중요. 먼저 사용자가 누군지 판단하세요.
• 취소 불가능하고 위험한 작업 (결제, 프로덕션 데이터 삭제, 대량 메시지 발송)은 한 단계 더 확인하는 것이 맞습니다. "단계를 줄이기 위해" 확인을 삭제하지 마세요.
• 기존 프로그램을 수정할 때, 사용자가 이미 익숙한 위치를 "더 합리적"이라고 크게 변경하지 마세요. 변경이 필요하다면 이유를 설명하세요.

체크리스트

• 가장 자주 하는 1~3가지 작업이 무엇인가? 그 작업들이 가장 빠르고 가장 눈에 띄는가?
• 각 버튼이 작업 대상 옆, 사용자가 흐름을 완료하는 위치에 있는가?
• 각 화면에 하나의 주요 작업만 있는가? 위험 작업이 주요 작업과 분리되어 있는가?
• 플랫폼 관행 (버튼 순서, 위치, 단축키)을 따르는가?
• 주요 작업의 각 단계에 대해 "삭제할 수 있는가, 기본값을 줄 수 있는가, 병합할 수 있는가" 질문했는가?
• 각 기능, 메뉴, 진입점이 사용자가 요청했거나 필수적인가? 플레이스홀더 진입점이나 아무도 원하지 않는 설정 항목이 없는가?
• 확인 팝업이 취소 불가능한 작업에만 사용되는가? 되돌릴 수 있는 작업에는 실행 취소를 제공했는가?
• 버튼 문구가 "동사 + 대상"인가? 사용자의 말을 사용하는가?
• 로딩, 성공, 오류, 빈 상태가 모두 처리되었는가? 오류 발생 시 입력이 유지되는가?
• 실제로 새 사용자로서 따라가 보고 단계 수를 세었는가? 하지 않았다면 "검증되지 않음"이라고 말했는가?