관례: AI가 새로운 인터랙션을 만들지 않게 하세요
흐름을 깔끔히 잘라도 더 깊이 숨은 병이 있어요. AI는 가끔 새로워 보이지만 아무도 쓸 줄 모르는 인터랙션을 발명합니다. 이 레슨은 두 단어, 관례(idiom)와 어포던스(affordance)를 다룹니다. 끝나면 어느 컨트롤이 혁신을 가장하는지 한눈에 알아채고, 사용자가 왜 배우지 못하는지 설명할 수 있어요.
《About Face 4》 13장은 인터페이스를 세 갈래로 나눕니다. 프로그램 내부 구조대로 자란 것(구현 중심), 현실 물건처럼 그린 것(은유), 그리고 배워서 쓰는 것(관례). Cooper의 입장은 단호해요. 현대 GUI는 거의 세 번째에 기대고 있습니다. 창, 스크롤바, 드롭다운 메뉴, 하이퍼링크 — 직관에 의존하는 것은 하나도 없고, 전부 사용자가 하나씩 배운 겁니다.
그가 든 예는 마우스예요. 마우스를 한 번 보고 화면 커서를 조종한다는 걸 아는 사람은 없습니다. 누가 가르쳐 주거나 반쯤 만져 봐야 하죠. 하지만 한 번 배우면 평생 안 잊어요. 스크롤, 더블클릭, 드래그앤드롭, 당겨서 새로고침, 왼쪽으로 밀어 삭제 — 전부 같아요. 한 번 배우면, 어디서나 씁니다.
Alan Cooper, 《About Face 4》 13장.
제품 만드는 사람에게는 엄청난 공짜예요. 전 세계 제품이 이미 사용자를 가르쳐 두었으니, 있는 관례를 그대로 쓰면 학습 비용이 0입니다. 문제는 AI가 가끔 이 호의를 무시한다는 점이에요. 학습 데이터의 패턴을 짜맞춰서, 아무도 배운 적 없는 컨트롤을 발명해 버립니다.
두 번째 갈래도 함께 묻어둡시다. GUI가 막 뜨던 몇 년, 공은 「닮게 그린다」에 돌아갔어요. 데스크톱은 책상처럼, 폴더는 폴더처럼, 사용자는 그림만 보고 뜻을 읽는다고요. Cooper는 13장에서 사지 않습니다. 은유 인터페이스는 아이콘과 기능 사이를 선으로 잇는 수수께끼예요. 간단한 기능은 맞춰도, 조금만 추상해지면 그릴 수가 없습니다. 「파일 50개 일괄 이름 바꾸기」를 무엇으로 그릴 건가요?
더 골치 아픈 건 은유가 안 떠난다는 점이에요. 사용자가 기본 조작을 배운 뒤, 가죽 질감이나 페이지 넘김 애니메이션은 도우미에서 짐이 됩니다. 자리를 먹고, 인터랙션을 가두고, 기계 시대의 규칙을 끌고 와요. 애플도 인정했죠. iOS 6의 가죽 달력은 iOS 7에서 말끔히 지워졌습니다.
그래서 관례가 이기는 이유는 가벼운 짐이에요. 추측하게 두지 않고 바로 배우 하고, 배우기도 빠릅니다. 아래에서는 이 어휘가 어떻게 쌓이는지 볼게요.
13장에는 관례가 왜 배우기 쉬운지 설명하는 역피라미드가 있어요. GUI 인터랙션 어휘 전체가 세 층이고, 아래로 갈수록 적고 단순합니다. 각 층을 눌러 무엇이 들어 있는지 보세요.
사용자가 이 어휘를 다른 제품에서 당신 제품으로 가져올 수 있는 건 멘탈 모델 덕분이에요. 당신 UI가 쓰던 만 개 UI와 같은 규칙을 따른다고 기본으로 가정합니다. 모델이 어긋날 때 얼마나 헤매는지는 심리학 부에서 다뤘으니, 점프 카드만 두고 다시 가르치지 않아요.
교차 레슨 · 멘탈 모델: 사용자 머릿속 그 지도사용자는 옛 제품의 모델을 들고 당신 UI에 끼워 맞춥니다. 어긋날 때마다 길을 잃어요. 모델이 어디서 오는지, 어긋남을 어떻게 고치는지는 심리학 부 7레슨에서 다뤘습니다. 여기를 눌러 건너뛰세요.아래는 AI가 만든 클라우드 드라이브 설정 페이지예요. 기능은 돌아가고 화면도 못생기진 않았는데, 안에 똑똑해 보이는 발명 세 가지가 숨겨 있습니다. 저마다 잘 배운 관례를 하나씩 깨뜨려요. 하나씩 눌러 보세요. 맞히면 판정이 나옵니다.
AI가 왜 이러는지도 짚어 둘게요. 학습 데이터에는 다 들어 있어요. 진짜 제품, 수상한 컨셉, 디자인 커뮤니티의 기교 포트폴리오. 「디자인 감각 있는 설정 페이지」를 시키면 여러 출처의 패턴을 섞어 내놓습니다. 문법적으로는 통하는데, 규칙끼리는 서로 싸워요.
영원히 배우지 못하는 것도 하나 있어요. 당신 사용자가 뭘 배웠는지. 관례는 사용자 경험 속에 살고, AI는 컨트롤 생김새만 보지 30년의 가르침 역사는 못 봅니다. 그래서 이 관문은 당신이 지켜야 해요. 쓰는 법을 작은 한 줄로 설명해야 하는 컨트롤은 전부 의심할 만합니다.
두 번째 단어는 Norman의 《디자인과 인간심리》에서 와요. 어포던스(affordance) — 물건의 생김새가 쓰는 법을 드러냅니다. Cooper는 13장에서 정의를 더 날카롭게 다듬어요. 어포던스는 당신이 그것이 뭘 할 수 있다고 생각하는지를 다루고, 실제로 뭘 하는지는 따로 셉니다. 문 옆 작은 둥근 버튼은 다들 초인종으로 봐요. 눌러서 다른 일이 일어나도 어포던스는 여전히 초인종입니다.
고전 예는 문손잡이예요. 문에 가로로 금속 막대가 있으면 모양과 높이가 「당겨」라고 외치는데, 사실은 밀어야 합니다. 가게가 「밀기」 스티커를 붙여도 소용없어요. 사람들은 그대로 당깁니다. 손이 읽는 신호가 글자보다 큽니다.
화면에서는 이것이 계약이 됩니다. 버튼을 그리는 순간, 누를 수 있고, 누르면 반응하고, 라벨에 적힌 일을 한다는 약속을 사용자에게 한 겁니다. 약속을 깨는 컨트롤을 Cooper는 미끼식 어포던스(bait-and-switch)라고 불러요.
그는 플랫 디자인도 짚어요. 초창기 UI는 그림자와 입체감으로 「눌러」라고 외쳤는데, 플랫 바람이 그걸 다 쓸어 버렸습니다. 시각적으로는 깔끔하지만 어포던스는 다쳤어요. 그래서 플랫 UI에서 누를 수 있는 요소는 더 규칙을 지켜야 해요. 같은 색, 같은 모양은 누를 수 있는 것에게만 맡기고, 아무나 끼어들지 마세요.
아래 멤버십 센터 두 곳, 같은 업그레이드 카드를 두 가지로 그렸어요. 계약을 지킨다고 생각하는 쪽을 누르세요.
어포던스에는 비용 0인 검사가 있어요. 써 본 적 없는 사람에게 화면 캡처를 보내고 5초만 주고, 어디를 누를 수 있는지 가리키게 하세요. 틀린 곳마다 어포던스 사고입니다. AI가 그린 UI에 특히 잘 먹혀요. AI는 그릴 때 이 질문을 하지도 않거든요.
여기까지 오면 잘못된 결론을 내리기 쉬워요. 인터랙션은 영원히 있는 것만 베끼고, 혁신하면 죽는다. Cooper의 자는 훨씬 정밀합니다.
Alan Cooper, 《About Face 4》: 사용자가 다시 배우게 만드는 변경은, 이득이 육안으로 보일 만큼 커야 합니다.
내비게이션, 저장, 폼 같은 기본 조작은 사용자가 다른 제품에서 하루에도 수백 번 연습합니다. 여기서 모양을 바꾸면 다시 걷는 법을 배우라고 강요하는 셈이고, 제대로 된 보상도 없어요. 가장 흔한 패턴을 쓰세요. 혁신 예산은 핵심 차별점에 남기세요. 당신 제품만의 능력, 베낄 관례가 없는 곳. 잘 만들면 남이 당신을 베낍니다.
이 자로 한 문제를 재어 보세요. AI가 일괄 파일 관리 도구에 「하이라이트 디자인」 네 개를 붙였어요. 어느 혁신이 제자리에 쓰였을까요?
마지막으로 치트시트를 하나 둡니다. 아래 관례들은 사용자가 다른 제품에서 이미 훤히 배웠어요. 당신 제품이 베끼면 거저 얻는 사용성입니다. AI 산출물을 검수할 때 맞춰 보고, 오른쪽 열 멘트는 통째로 프롬프트에 붙여 넣으세요.
| 관례 | 사용자가 어디서 배웠나 | AI에게 기본으로 요구할 것 |
|---|---|---|
| 당겨서 새로고침 | 모든 피드 앱 | 목록 새로고침은 당기기로, 자체 새로고침 레이어를 만들지 마세요 |
| 왼쪽으로 밀어 삭제 | 시스템 메일, WeChat 채팅 목록 | 목록 항목 삭제는 왼쪽 밀기 또는 명확한 버튼으로, 길게 누르기 메뉴에 숨기지 마세요 |
| 하단 탭 바 | 모바일 앱의 표준 자리 | 주 내비게이션은 하단 탭, 아이콘+텍스트, 3~5개 |
| 장바구니 | 이커머스 30년의 가르침 | 다중 선택 후 결제는 장바구니 모델을 따르고, 새 은유를 발명하지 마세요 |
| 드래그앤드롭 업로드 | 클라우드 드라이브와 메일 첨부 | 업로드 영역은 드래그앤드롭을 지원하고 「클릭해서 파일 선택」도 남기세요 |
| Ctrl / Cmd + Z | 데스크톱 소프트웨어의 오랜 규칙 | 편집 기능은 실행 취소 단축키를 반드시 지원하세요 |
| 파란 밑줄 링크 | 웹의 첫 수업 | 링크는 알아볼 수 있는 스타일을 유지하고, 한 번 클릭으로 바로 이동 |
| 돋보기 검색창 | 브라우저와 모든 콘텐츠 앱 | 검색 입구는 돋보기 아이콘 + 플레이스홀더 안내 문구 |
| 빨간 점 배지 | 휴대폰 알림 시스템 | 읽지 않음은 배지 숫자로, 깜빡이는 표식을 만들지 마세요 |
표에 사용자가 새로 배울 항목은 하나도 없어요. 그게 가치입니다. 아낀 학습 예산을 앞 절의 자로 재서, 핵심 차별점에 투자하세요.
인터페이스는 관례로 돌아가요: 스크롤, 더블클릭, 드래그앤드롭 — 직관에 의존하는 것은 하나도 없고 전부 배운 겁니다. 좋은 관례는 한 번 배우면 평생 쓰고, 전 세계 제품이 이미 사용자를 가르쳐 두었어요 (Cooper, 《About Face 4》 13장).
어포던스는 계약이에요: 컨트롤이 어떻게 생겼으면 그 일을 해야 합니다. 버튼을 그리는 것은 누를 수 있고 누르면 반응한다는 약속이고, 버튼처럼 생겼는데 안 눌리면 페이지 전체 컨트롤의 신용이 깎여요.
혁신은 칼날에 쓰세요: 내비게이션과 기본 조작은 가장 흔한 패턴을 쓰고, 혁신 예산은 핵심 차별점에 남기세요. 중대한 변화는 눈에 띄게 우수해야 하고, 보상이 없는 새 모양새는 짐일 뿐입니다.
AI에게 쓸 멘트: 「내비게이션, 폼, 기본 버튼은 가장 흔한 표준 패턴만 쓰고 새 인터랙션을 발명하지 마세요. 누를 수 있는 요소는 누를 수 있게 보여야 합니다.」 손잡이 네 개를 다 다뤘으니, 다음 레슨은 디테일 — 컨트롤 자체를 어떻게 고를지예요.
출처: 샤오산 아카데미 「인터랙션 엔지니어링」 시리즈 오리지널. 일부 인터랙션 원칙은 《About Face 4: 인터랙션 디자인의 정수》에서 정리했고, 어포던스 개념은 Donald Norman의 《디자인과 인간심리》에서 왔습니다.