컨트롤을 잘 골랐나요: 라디오, 체크박스, 토글과 드롭다운

AI가 컨트롤을 고르는 법은 주사위예요

AI에게 폼을 만들게 하면 컨트롤은 대개 되는대로 집습니다. 옵션 세 개도 드롭다운에 넣고, 라디오와 체크박스는 기분대로, 동작마다 팝업까지. 하나씩 보면 크지 않은데, 한 폼에 쌓이면 사용자는 매 단계 힘을 더 씁니다.

전형적 병	현장	사용자가 더 치르는 비용
옵션 세 개도 드롭다운	영수증 유형이 세 가지인데 「선택하세요」 안에 숨김	옵션을 보려면 한 번 더 누르고, 나란히 비교도 못 함
라디오·체크박스 운에 맡김	배타 옵션에 체크박스, 다중 선택에 라디오	모순 데이터가 나오거나, 다중 선택을 못 해 한 번 벽에 부딪힘
뭐든 팝업	저장 성공도 띄우고, 탭 전환도 띄움	팝업마다 한 번 방해 — 손은 페이지에, 마음은 끌려감

Cooper는 《About Face 4》 21장에서 이 부품들을 하나씩 다룹니다. 규칙은 외울 만큼 분명해요. 이번 레슨은 규칙을 외우고, 매칭으로 손맛을 익힌 뒤, 규칙을 프롬프트로 옮깁니다.

네 문장 규칙, 컨트롤은 제자리로

21장은 선택형 컨트롤의 역할을 분명하게 가릅니다. 라디오 버튼 이름은 옛 자동차 라디오에서 왔어요. 운전자가 방송국 키를 하나 누르면 이전 키가 튀어 오르고, 시선은 도로를 떠나지 않습니다. 배타적, 반드시 하나 — 그게 그 영역이에요. 네 문장이 네 컨트롤에 대응하니, 얼굴부터 보고 규칙을 봅니다.

전표 보통 전자

배타적으로 하나만 → 라디오 버튼

하나 고르면 나머지가 튀어 올라, 잘못된 조합은 물리적으로 없습니다. 그룹일 때만 의미 있고, 라디오 하나만은 켜면 취소가 안 돼 21장이 무의미하다고 판정해요.

제품 업데이트 이벤트 주간 다이제스트

여러 개 체크 → 체크박스

체크해 표시하고 다시 눌러 취소 — 나란히 놓으면 동시 다중 선택. 네모는 수십 년 쌓인 얼굴이니 동그라미로 바꾸지 마세요. 라디오와 얼굴이 겹칩니다.

다크 모드 소리

즉시 적용 → 토글

밀면 바로 바뀌고 저장은 필요 없어요. 21장은 모바일 설정에서 아주 쓰기 좋다고 하고, 반대로 폼과 함께 제출할 옵션에는 토글을 쓰지 마세요. 이미 적용됐다고 오해합니다.

광둥성 옵션 34개가 안에

한 화면을 넘을 때만 드롭다운을 고민

드롭다운 초기 상태는 현재 선택만 보이고 나머지는 전부 숨어요. 옵션을 한 번 보려면 클릭 한 번이 듭니다. 화면에 안 들어갈 때의 타협안이니, 옵션 셋에 할당을 낭비하지 마세요.

「링크는 내비게이션, 버튼은 동작.」
Alan Cooper, 《About Face 4》 21장: 컨트롤마다 역할이 있고, 남의 일을 시키면 사용자가 다시 배워야 합니다.

직접 해보기 · 여섯 장면, 컨트롤에 자리 배정

규칙을 외웠으면 손맛을 익히세요. 아래 여섯 장면은 실제 폼에서 나왔고, 각 장면에서 네 컨트롤 중 가장 맞는 하나를 고르세요. 틀리면 교정 판정이 있고, 맞힐 때까지 고를 수 있어요.

장면을 컨트롤에 매칭 0 / 6

장면 아래 컨트롤 칩을 눌러 답하세요. 여섯 문제 전부 맞히면 규칙이 손에 붙은 겁니다

1경비 청구서에서 영수증 유형 고르기: 전표·보통·전자, 하나만

맞아요. 옵션 셋, 배타적, 반드시 하나 — 라디오를 펼치면 영수증 유형을 한눈에 비교할 수 있어요. AI는 대개 드롭다운을 주고 옵션 셋을 클릭 두 번에 숨깁니다.

체크박스는 동시에 여러 개를 체크할 수 있어요. 전표와 보통을 함께 체크하면 재무 시스템이 바로 경보합니다. 배타 장면은 하나를 고르면 다른 하나를 밀어내야 해요.

토글은 켜짐/꺼짐만 담아요. 영수증 유형 셋은 두 상태에 안 들어가고, 토글은 즉시 적용 설정용입니다.

옵션이 셋인데 벌써 드롭다운이면 너무 일찍 숨긴 거예요. 21장의 문턱은 옵션이 한 화면에 안 들어갈 때입니다.

2구독 설정 「어떤 메일을 받고 싶나요」: 제품 업데이트, 이벤트 알림, 주간 큐레이션 — 자유롭게 체크

라디오는 배타적이에요. 이벤트를 고르면 제품 업데이트가 자동으로 빠지고, 둘 다 원하는 사용자는 길이 없습니다. 공존하는 옵션은 체크박스 몫이에요.

맞아요. 옵션 셋이 서로 독립·공존하니 체크박스로 하나씩 고르는 게 맞습니다. 21장에는 고급 용법인 표시(marker)도 있어요. 목록 각 행에 체크박스 하나, 다중 선택이 한눈에 보입니다.

아깝네요. 토글 셋으로도 버틸 수는 있지만, 여기 선택은 「저장」과 함께 제출됩니다. 토글의 약속은 밀면 즉시 적용이라 의미가 안 맞아요.

드롭다운은 한 번에 하나만 보여요. 뭘 체크했는지 보려면 열어 세어 봐야 하고, 다중 선택 상태가 전부 숨습니다.

3설정 「다크 모드」, 바꾸면 화면이 바로 바뀌고 저장은 필요 없음

라디오 둘로 「켜/꺼」하면 자리만 두 배예요. 토글은 압축된 라디오 둘을 합친 것이고, 둘 중 하나·즉시 적용이면 토글을 쓰세요.

체크박스는 폼에서 자랐어요. 보면 본능적으로 「저장」을 찾습니다. 즉시 적용 설정은 토글 — 적용됐다는 감각도 설계예요.

맞아요. 밀면 바로 색이 바뀌고, 토글 형태 자체가 「즉시 적용」을 약속합니다. 21장은 설정 페이지에서 제일 쓰기 좋다고 짚어요. AI가 설정 페이지를 만들 때 이 단어만 주면 됩니다.

옵션 둘을 드롭다운으로 하면 전환 한 번에 클릭 두 번이고, 다른 옵션이 뭔지도 안 보입니다.

4배송지에서 성/시 고르기 — 옵션 34개

라디오 34개를 펼치면 폼이 벽이 됩니다. 라디오는 화면을 먹고, 21장은 옵션이 적고 자주 안 쓰는 경우에 맞다고 합니다.

성/시는 하나만 고르니 체크박스는 의미부터 틀리고, 34개를 놓으면 재앙이에요.

토글에 상태 34개는 안 들어가요. 켜짐과 꺼짐뿐.

맞아요. 옵션이 한 화면을 넘을 때 드롭다운이 정당해지고, 숨기는 이유는 화면을 구하기 위해서예요. 더 신경 쓰면 입력 자동완성을 붙여 두 글자로 바로 갈 수 있습니다.

5결제대에서 결제 수단 고르기: WeChat Pay, Alipay, UnionPay — 하나로 결제

맞아요. 배타적·반드시 하나·옵션 셋 — 펼친 라디오면 한눈에 보고 누릅니다. 실제 결제대는 큰 카드 세 장인데, 라디오의 변종이고 규칙은 같아요.

한 번의 결제가 두 통로를 동시에 탈 수 없어요. 체크박스의 다중 선택 의미가 여기선 함정입니다.

결제 수단 셋은 토글 하나에 안 들어가요. 상태는 둘뿐.

결제는 저항을 더하면 안 되는 단계예요. 옵션 셋을 드롭다운에 숨기면 결제대 앞에 문을 하나 더 세운 셈입니다.

6가입 「서비스 약관을 읽고 동의합니다」 — 체크해야 가입 가능

라디오 하나만은 의미가 없어요. 켜면 취소가 안 됩니다. 21장의 거의 원문에 가까운 결론이에요. 둘 중 하나이면서 배타가 아닌 표시는 체크박스 몫.

맞아요. 체크하면 동의, 다시 누르면 취소 — 체크박스 하나가 「체크/비체크」 두 상태를 덮습니다. 처음 발명된 용법이에요.

토글은 즉시 적용돼요. 그런데 「약관 동의」는 가입과 함께 제출하는 약속이라, 토글을 쓰면 미는 순간 서명한 줄 압니다.

「동의/비동의」를 드롭다운으로 하면 뭘 고를 수 있는지 보려면 열어야 하니, 한 단계에 두 단계를 억지로 붙인 거예요.

드롭다운 장부: 옵션을 볼 때마다 클릭 한 번

네 컨트롤 중 AI가 가장 남용하는 게 드롭다운이라 따로 장부를 칩니다. 21장이 목록 컨트롤을 말하며 선천적 결함을 짚어요. 초기 상태는 직전 선택만 보이고 나머지는 전부 안 보입니다. 옵션이 안 보이면 비교도, 이 단계에 얼마나 걸릴지 짐작도 못 해요. 아래는 같은 배달 주문 페이지 — 쓰고 싶은 쪽을 누르세요.

배달 시간 고르기: 드롭다운 vs 펼침 A/B 대결

카드를 눌러 투표하고, 끝나면 판정이 열려요

방안 A

waimai.example.com/checkout

주문 확인합계 ¥ 42.5

배달 시간

배달 시간을 선택하세요

주문 제출

시간대 셋을 드롭다운에 넣으면 열기 전엔 하나도 안 보여요

방안 B

waimai.example.com/checkout

주문 확인합계 ¥ 42.5

배달 시간

바로 보내기약 35분

오늘 18:00 전후점심 피크 피하기

오늘 19:00 전후집에 도착한 뒤 수령

주문 제출

시간대 셋을 펼치고 설명을 달았으며, 가장 흔한 것을 기본값으로

펼침 방안은 「바로 보내기」를 기본값으로 두는 한 수도 조용히 씁니다. 옵션이 보이고 기본값이 합리적이면 대부분 사용자는 1초 만에 통과해요. 그게 앞 장의 오류 방지 삼단봉 중 「기본값으로 받쳐 주기」가 컨트롤 층에 나타난 모습입니다.

대화상자는 방해예요. 가능하면 띄우지 마세요

21장은 대화상자 위치를 부엌 비유로 말합니다. 앱은 부엌, 대화상자는 식료품 저장고 — 이야기를 밀지만 주인공은 못 돼요. 주요 인터랙션은 주 창에 두고, 대화상자는 주 흐름 밖만 담습니다. 위험한 것, 드문 것, 한 주제 정보를 한곳에 모을 것. 놓치기 쉬운 디테일: 기능 대화상자 제목은 동사로, 사용자가 무엇을 확인하는지 한눈에 알게 하세요.

AI 습관은 정반대예요. 성공도, 안내도, 확인도 띄웁니다. 아래 다섯 장면 — 하나씩 띄울지 말지 판단하세요.

대화상자를 띄울까, 다섯 연속 판정 0 / 5

각 장면에서 「띄워야 함」또는 「띄우면 안 됨」을 누르세요. 판정이 근거를 말해 줍니다

사용자가 「휴지통 비우기」를 눌렀고, 기록 200건이 영구 삭제되며, 제품은 아직 실행 취소를 못 함

띄워야 하지만, 예비 타이어예요. 되돌릴 수 없고 실행 취소도 아직 없으니 확인 창이 마지막 방어선입니다. 제목은 동사로: 「이 기록 200건을 비울까요?」. 3레슨에서 말했듯, 되돌릴 수 있게 만들 수 있으면 그걸 우선하고, 팝업은 실행 취소가 없을 때만 대신합니다.

저장이 성공할 때마다 「저장 성공」대화상자를 띄워 확인을 누르게 함

띄우면 안 됩니다. 정상 일을 끝내고 칭찬 클릭까지 받는 건 소프트웨어가 공을 청하는 셈이에요. 성공 피드백은 비모달 가벼운 안내: 구석 체크, 2초 사라지는 토스트 — 눈구석으로 보이면 충분합니다.

폼에 빈 항목이 남은 채 제출을 누르면 「정보가 불완전합니다」팝업

띄우면 안 됩니다. 이 장면은 3레슨에서 나왔어요. 오류 방지는 앞에 두고, 안 채웠으면 제출을 비활성화하고 옆에 뭐가 부족한지 적으세요. 벽에 먼저 부딪히게 한 뒤 팝업으로 반창고를 주면, 방지를 오류 보고로 만든 겁니다.

사용자가 「전체 데이터 내보내기」를 누르고, 형식·범위·첨부 포함 여부를 한 번에 골라야 함

띄워야 합니다. 내보내기는 주 흐름 밖이고 드물며, 한 주제의 설정 여러 개를 한곳에 모아야 해요. 그게 21장이 말하는 대화상자의 특기 — 관련 정보를 모아 사용자가 화면 전체를 헤매지 않게 하는 것.

사용자가 타이핑 중인데 백그라운드 동기화가 끝나 「동기화 완료」팝업

띄우면 안 됩니다. 손이 키보드에 있는데 팝업이 포커스를 뺏어, 반쯤 친 문장이 「확인」버튼에 들어가 버립니다. 백그라운드 상태는 구석 아이콘이나 상태 바로 조용히 갱신하세요. Cooper는 이를 풍부한 시각적 비모달 피드백이라 부르고, 15장 전체가 그걸로 대화상자를 없애는 법입니다.

치트시트 · 프롬프트에 붙이면 AI가 주사위를 안 굴려요

규칙을 머릿속에만 두면 소용없고, AI에게 주는 요구에 써야 합니다. 먼저 치트시트, 아래 제약 멘트를 한 번에 복사해, 폼이 있는 UI를 만들 때 프롬프트 끝에 붙이세요.

컨트롤	언제 쓰나	AI의 흔한 오용
라디오 버튼	배타적·반드시 하나·옵션이 한 화면에 들어감	써야 할 곳에 드롭다운이나 체크박스를 줌
체크박스	다중 선택, 또는 단일 「체크/비체크」표시	배타 옵션에도 체크박스 → 모순 데이터
토글	둘 중 하나이며 즉시 적용되는 설정	폼과 함께 제출하는 필드에 씀
드롭다운	옵션이 한 화면을 넘는, 공간 부족 시의 타협	옵션 서너 개도 숨겨 클릭을 공짜로 추가
대화상자	주 흐름 밖: 위험·드문·한 주제 모으기	성공 안내·일상 확인도 띄움, 일마다 팝

컨트롤 제약 멘트, 바로 프롬프트로 복사 가능

오른쪽 위 복사를 눌러, UI 생성 프롬프트 끝에 붙이세요

제약 멘트

컨트롤 선택 제약: 배타적이고 옵션이 5개 이하면 라디오를 펼치고 드롭다운 금지; 다중 선택은 체크박스; 토글은 즉시 적용 설정만; 옵션이 한 화면을 넘을 때만 드롭다운 허용하고 입력 자동완성 제공. 대화상자는 주 흐름 밖 기능만(위험 조작, 드문 설정, 한 주제 정보 모으기), 기능 대화상자 제목은 동사; 성공은 비모달 토스트, 「성공」대화상자 금지; 폼 검증은 앞에(비활성 + 누락 안내), 제출 후 「정보 불완전」팝업 금지.

가산점 · 합체 버튼 미제 사건

21장은 피해야 할 컨트롤도 짚어요. 상태 전환 버튼. 음악 플레이어의 「재생/일시정지」합체 키가 대표입니다. 아이콘이 삼각형일 때 누르면 음악이 나오고 아이콘이 세로 막대 둘이 됩니다. Cooper가 보기에 병은 어디에 있을까요?

재생/일시정지 합체 키, 병의 뿌리는? 객관식

틀려도 설명이 있고, 맞힐 때까지 고르세요

A기능 둘이 버튼 하나에 몰려 터치 영역이 작아 오터치하기 쉽다

B아이콘이 현재 상태인지, 누르면 일어날 일인지 사용자가 구분 못 한다

C아이콘에 글자가 없어 초보가 배우지 못한다

D전환이 너무 빨라 애니메이션이 끝나기 전에 바뀐다

핵심 요점

✓

네 문장 규칙: 배타적으로 하나만 → 라디오, 여러 개 체크 → 체크박스, 즉시 적용 → 토글, 한 화면을 넘을 때만 드롭다운 (Cooper, 《About Face 4》 21장).

✓

드롭다운은 타협안: 처음엔 하나만 보이고, 옵션을 보려면 클릭이 듭니다. 옵션 서너 개는 먼저 펼치고 합리적 기본값을 두면, 대부분 사용자는 1초 만에 통과해요.

✓

대화상자는 방해: 주 인터랙션은 주 창에, 팝업은 주 흐름 밖의 위험·드문·모아야 할 기능만; 성공은 비모달 가벼운 피드백, 기능 대화상자 제목은 동사.

✓

규칙을 AI에게 쓰세요: 치트시트 제약 멘트를 프롬프트에 붙이면 컨트롤이 더 이상 AI 주사위에 기대지 않아요. 컨트롤이 맞아도 카피가 사람 말을 해야 합니다. 다음 레슨은 인터페이스가 어떻게 입을 여는지.

출처: 샤오산 아카데미 「인터랙션 엔지니어링」 시리즈 오리지널. 일부 인터랙션 원칙은 《About Face 4: 인터랙션 디자인의 정수》에서 정리했습니다.