Insights
AI가 자동으로 큐레이션·번역·정리하는 기술 동향 피드입니다.
GUI를 구성하는 10가지 핵심 요소와 설계 원칙을 설명합니다. 버튼, 폼, 메뉴 등 표준 요소의 역할과 Fitts의 법칙, Jakob의 법칙 등 사용성을 높이는 디자인 관례를 다룹니다.
AI 자동 생성 콘텐츠
본 콘텐츠는 GeekNews의 원문을 AI가 자동으로 요약·번역·분석한 것입니다. 원 저작권은 원저작자에게 있으며, 정확한 내용은 반드시 원문을 확인해 주세요.
원문 바로가기약 10개의 표준 요소만으로 거의 모든 GUI를 구성할 수 있음
버튼은
명령을 실행함
폼·체크박스·검색은 입력을 받음
메뉴·링크·탭은 사용자를 이동시킴
대화상자·알림은 시스템의 응답을 전달함
아이콘은 다른 요소가 쓰는 상징을 제공함
GUI는 Windows, Icons, Menus, Pointer의 결합인
WIMP를 통해 명령 시퀀스에서 작업 공간으로 발전함
Jakob의 법칙에 따르면 사용자는 대부분의 시간을 다른 사이트와 앱에서 보내므로, 새 제품도 이미 아는 방식으로 작동하기를 기대함
디자인 관례는 여러 제품이 함께 축적하는
공동 자산임
표준 돋보기 아이콘은 집단 학습을 강화함
데스크톱 탐색을 햄버거 메뉴로 감추거나 링크를 버튼처럼 꾸미면 다른 인터페이스가 의존하는 관례까지 약화시킴
OK대신 Save Invoice
, Place Order
, Delete 3 Files
처럼 동사와 결과를 포함해야 함
1954년 발표된
Fitts의 법칙에 따르면 포인팅 시간은 거리에 따라 늘고 목표 크기에 따라 줄어듦
자주 쓰는 목표는 크고 가까워야 함
터치 목표는 최소
1×1cm여야 함
화면 가장자리에 붙은 메뉴는 포인터가 경계를 넘어갈 수 없어 사실상 더 큰 목표가 됨
분할 버튼(split button)은 큰 영역에서 기본 명령을 실행하고 작은 영역에서 변형 명령 메뉴를 엶
두 영역 사이에 구분선을 표시해야 함
작은 메뉴 영역도 충분한 크기를 확보해야 함
지배적인 기본 명령이 없다면 일반 메뉴 버튼을 써야 함
일시적으로 사용할 수 없는 버튼은 숨기지 말고 기본색의 흐린 버전으로 표시하며, 비활성화된 이유와 활성화 방법을 알려야 함
폼은 결제, 가입, 잠재 고객 확보가 이뤄지는 곳이므로 사용성이 매출에 직접 연결됨
모든 필드에는 입력 중에도 남아 있는 외부 레이블이 필요함
자리표시자(placeholder)는 타이핑을 시작하면 사라지므로 레이블을 대신할 수 없음
전화번호의 괄호·공백·하이픈처럼 다양한 입력 형식을 받아들이고 코드에서 정리해야 함
오류는 문제가 있는 필드 옆에서 평이한 언어로 알려야 하며, 사용자가 이미 입력한 데이터는 보존해야 함
날짜에는 날짜 선택기, 장바구니 항목 제거에는 휴지통처럼 사용자의
정신 모형에 맞는 전용 컨트롤을 사용함
가장 강력한 폼 개선 방법은 필드 삭제임
선택 필드도 읽기, 해석, 적용 여부 판단, 생략 가능성 확인이라는
필드 세금을 부과함
실제 부담보다 사용자가 느끼는 부담이 이탈을 더 잘 예측함
3 questions, 40 seconds
처럼 예상 부담을 정확히 표시하면 막연한 두려움을 구체적인 거래로 바꿀 수 있음
실제로 5분 걸리는 폼을 1분이라고 안내하면 브랜드 신뢰를 잃음
Expedia는 예약 폼의 선택 항목
Company
를 삭제한 뒤 연간 1,200만 달러를 추가로 얻었다고 보고함
고객이 이 필드에 은행명과 은행 주소를 넣어 결제 검증에 실패하던 문제를 제거함
Submit대신 Place Order
처럼 결과를 표시함
메뉴는 필요할 때 나타나는 명령 또는 탐색 목록으로, 공간을 절약하면서 사용자가 명령을 기억하지 않고 보이는 선택지를 인지하게 함
메뉴는 제공 가능한 선택지 전체를 보여준다는
완전성의 약속을 내포함
가능성 공간을 열거할 수 있으면 메뉴를 사용함
선택지가 사실상 무한하면 검색을 사용함
사용자가 열지 않을 레이블 아래에 들어간 기능은 존재하지 않는 것과 같음
Xerox Star는 1981년 고정 드롭다운 메뉴를 도입했고, Apple Lisa는 1983년 메뉴 바를 화면 상단에 붙임
이후 계단식 메뉴, 전자상거래용 메가 메뉴, 모바일 햄버거 메뉴, Microsoft Office Ribbon으로 확장됨
메가 메뉴는 예시를 함께 보여주어 카테고리의
정보 향기를 강화할 수 있음
Ribbon은 1,000개가 넘는 명령을 그룹과 레이블이 있는 아이콘으로 정리하려는 사용자 테스트 기반 설계였음
메뉴 구조는 정보 아키텍처를 직접 보여줌
Solutions
, Resources
같은 모호한 분류는 기능 발견을 방해함
보이는 항목은 작업 기억에 보관할 필요가 없으므로 7±2 제한을 적용할 이유가 없음
짧고 모호한 메뉴보다 길고 명확한 메뉴가 나음
상단과 측면 탐색은 모두 사용자가 아는 표준 패턴이며 어느 쪽이든 사용할 수 있음
hover 기반 계단식 메뉴는 하위 항목으로 대각선 이동할 때 이웃 항목을 지나며 닫힐 수 있고, 깊이가 늘수록 실패 가능성도 커짐
햄버거 메뉴는 공간이 부족한 모바일에서는 타협안이지만 데스크톱에서는 탐색을 불필요하게 숨김
hypertext라는 말을 만들었으며, Doug Engelbart는 1968년 작동하는 링크를 시연함
Click here, Learn more
는 목적지 정보를 제공하지 못함
(PDF)처럼 링크에 표시함
대화상자는 질문, 결정, 확인이 필요할 때 주 작업 흐름을 중단하는 보조 창임
모달 대화상자는 닫을 때까지 다른 작업을 막음
비모달 대화상자는 작업을 계속할 수 있게 함
Macintosh는 1984년 메시지와 OK·Cancel 버튼으로 대화상자 문법을 정립했지만, 결과 중심 레이블이 더 명확함
Delete 3 Files
와 Keep Files
는 결과를 직접 전달함
Cancel버튼을 두면 취소 행위인지 대화상자 닫기인지 모호해짐
모달은 작업 기억을 끊으므로 차단이 필요한 결정, 되돌릴 수 없는 결과, 진행에 필수적인 입력에만 사용해야 함
사소한 행동마다 확인하면
확인 피로가 생겨 중요한 경고도 반사적으로 닫게 됨
되돌릴 수 있는 행동에는 확인보다 실행 취소가 적합함
1990년대 후반 팝업 광고, 2018년 이후 쌓인 쿠키 동의 벽, 방문 즉시 나타나는 뉴스레터 오버레이는 사용자의 작업을 침범함
분석 도구는 구독한 3%를 기록하지만 불쾌감을 느낀 97%는 기록하지 못할 수 있음
비용은 몇 주 뒤 구독 취소와 이탈로 나타나 원래 오버레이에 귀속되지 않을 수 있음
오버레이를 사용한다면 전환뿐 아니라 비용도 측정해야 함
OK가 아니라 결과를 적음
Esc는 항상 취소로 작동하게 함
Message sent같은 확인에는 적합함
사용자가 조치해야 하는 오류를 4초 뒤 사라지게 해서는 안 됨
오류 메시지는 평이한 언어로 문제와 위치를 정확히 밝히고 복구 방법을 알려야 하며, 사용자를 탓하지 않아야 함
Abort, Retry, Ignore?
, PC LOAD LETTER
, An error occurred
처럼 맥락과 해결책이 없는 문구는 도움이 되지 않음
illegal, fatal
, invalid user
처럼 사용자에게 책임을 돌리는 표현을 피함
icon을 만들었고, Xerox Star는 1981년 상용화했으며 Susan Kare는 1984년 Macintosh 아이콘을 제작함
휴지통과 플로피 디스크 저장 아이콘은 원래 물체가 사라진 뒤에도
관례 자본으로 남았음
돋보기, 집, 톱니바퀴, 휴지통 정도만 널리 인식되며 나머지는 사용자가 의미를 추측해야 함
공간이 허용되면 아이콘에 텍스트 레이블을 붙여야 함
레이블이 붙은 아이콘은 학습 기회임
레이블 없는 아이콘은 사용자를 시험함
반복 학습된 뒤에야 돋보기처럼 독립적으로 사용할 수 있음
표준 아이콘을 새로 그리면 수십 년간 쌓인 집단 학습을 소모하므로, 새 상징이 잃는 의미보다 더 많은 의미를 제공할 때만 정당화됨
favicon은 Internet Explorer 5가 1999년 도입했으며 원래 크기는
16×16픽셀임
탭이 15~20개를 넘어 제목이 잘리면 favicon이 사이트를 식별하는 유일한 단서가 될 수 있음
체크박스는 독립적인 선택을 켜거나 끄며 여러 항목을 동시에 선택할 수 있음
라디오 버튼은 상호 배타적인 집합에서 정확히 하나를 선택하게 함
이름은 하나를 누르면 이전 버튼이 튀어나오던 자동차 라디오 프리셋에서 유래함
사각형은
여러 개 선택
, 원은 하나만 선택
이라는 수십 년간 학습된 문법을 전달하므로 서로 바꿔 쓰면 안 됨
None을 제공함
설문 편향 문제가 없다면 가장 안전하거나 흔한 값을 기본 선택함
iPhone이 2007년 대중화한 토글은 변경이 즉시 적용되는 설정에 사용함
저장 버튼으로 확정해야 한다면 체크박스를 사용함
토글과
Save
버튼을 함께 두면 적용 시점이 모호해짐
None을 제공함
탭은 한 화면 영역을 여러 병렬 패널이 공유하고 한 번에 하나만 보여주는 구조임
파일 서랍의 돌출된 레이블에서 유래했으며 1990년대 초 소프트웨어 대화상자에 들어옴
제품 세부 정보, 리뷰, 사양처럼
같은 유형과 수준의 콘텐츠에 적합함
선택된 탭은 해당 패널에 붙어 보이고, 나머지는 클릭할 수 있지만 덜 두드러져야 함
탭은 한 줄만 사용해야 함
1990년대 중반 Microsoft 대화상자의 다중 행 탭은 뒤쪽 탭을 누를 때 행이 재배치되어 공간 기억을 무너뜨림
탭은 자유로운 이동을 약속하므로 순차적 결제 단계에는 적합하지 않으며 단계 표시가 있는 마법사를 사용해야 함
비교할 데이터를 탭으로 나누면 사용자가 정보를 기억하며 왕복해야 하므로 표로 함께 보여줘야 함
탭 콘텐츠는 사용자가 장소로 인식하므로 각각 고유 URL을 가져야 북마크, 공유, 뒤로 가기가 가능함
검색은 텍스트 필드와 돋보기로 표시한 제출 행동을 결합해 사용자가 탐색 구조 대신 자신의 말로 목표를 입력하게 함
검색 우선 사용자는 방문 즉시 검색창으로 향하고, 다른 사용자에게는 메뉴가 실패했을 때의 탈출구가 됨
GUI가 명령어를 보이는 선택지로 대체했어도 검색은 무한한 의도를 언어로 다룰 수 있어 살아남은
명령줄임
AI 어시스턴트의 프롬프트 필드도 같은 입력 형태이며, 오래된 검색 상자가 새로운 컴퓨팅 패러다임으로 이어짐
검색 로그에는 사용자의 목표, 어휘, 철자가 그대로 남음
검색량이 많지만 결과가 나쁜 질의는 수요순으로 정렬된 사용성 개선 목록이 됨
검색창은 전체 질의를 볼 만큼 넓어야 하며 페이지 상단에 숨기지 않은 필드로 제공해야 함
오타, 복수형, 동의어를 허용하고 검색 결과 페이지 자체도 독립적인 UI로 설계해야 함
W임
겹치는 창은 1970년대 Xerox PARC에서 등장했지만, 오늘날 웹 앱 설계자는 대개 브라우저 탭이라는 창을 상속받음
새 창을 예고 없이 열면 웹의 역방향 장치인
뒤로 가기가 깨지므로 드물게 사용해야 함
스크롤바는 콘텐츠를 이동하는 컨트롤인 동시에 현재 위치와 남은 양을 보여주는 지도임
사용자가 스크롤하더라도 관심은 상단에 집중되므로 콘텐츠 순서가 곧 중요도 순위가 됨
반복되는 실패 유형은 세 가지임
스크롤재킹은 속도나 방향을 바꿔 사용자의 근육 기억을 침해함
가늘거나 보이지 않는 스크롤바는 남은 분량을 감춤
무한 스크롤은 필요한 바닥글을 계속 밀어내고 위치 감각을 약화시킬 수 있음
Load More를 사용함
10개 기본 요소와 2개 보너스 요소가 40년 넘게 살아남은 것은 인지 우선 원칙, 지각된 어포던스, Fitts의 법칙, 제한된 인내심 같은 인간 특성에 맞기 때문임
86개 지침은 세 가지 원칙으로 압축됨
사용자가 기억하게 만들지 않음
사용자가 추측하게 만들지 않음
사용자가 기다리게 만들지 않음
혁신은 새로운 체크박스를 만드는 데 쓰기보다 콘텐츠와 서비스에 집중해야 함
생성형 인터페이스가 화면을 즉석에서 만들더라도 사람은 여전히 버튼, 필드, 탭을 읽고 조작함
동적 화면은 공간 기억을 약화시키므로 익숙한 위젯이 방향 감각을 회복시킴
에이전트 시스템에서는 기존 컨트롤이 직접 조작뿐 아니라
승인, 일시정지, 검사, 실행 취소를 담당함
좋은 표준 컨트롤은 사용자가 요소 자체를 의식하지 않고 작업에 집중하게 하며, 인터페이스에서 사라진 듯 느껴지는 상태가 가장 높은 평가임