좋은 화면은 10가지 GUI 요소를 제대로 쓰는 데서 시작해요

좋은 화면은 10가지 GUI 요소를 제대로 쓰는 데서 시작해요

IT & AI 뉴스 썸네일

새로운 화면도 버튼, 폼, 메뉴, 링크처럼 오래된 요소를 조합해 만들어요. UX 연구자 야콥 닐슨은 거의 모든 GUI를 구성하는 10가지 요소와 86개 사용성 지침을 한데 묶었어요. 익숙한 요소를 언제, 어떤 역할로 써야 하는지 다시 확인할 수 있는 실무 자료예요. 1

핵심 요약

구분	핵심	왜 볼만한가요
구성 요소	버튼, 폼, 메뉴, 링크, 대화상자, 알림, 아이콘, 선택 컨트롤, 탭, 검색이 GUI의 기본 재료예요	화면을 새로 그리기 전에 각 요소의 역할부터 나눌 수 있어요
사용성	자주 쓰는 목표는 크고 가깝게 두고, 조작할 수 있는 요소는 그렇게 보여야 해요	꾸미기보다 클릭 성공률과 이해 속도를 먼저 점검하게 해요
일관성	사용자가 다른 제품에서 익힌 관례를 함부로 뒤집지 않아요	새로운 사용법을 다시 배우는 비용과 실수를 줄여요
AI 제품	승인, 중지, 수정, 실행 취소 같은 제어에는 익숙한 컨트롤이 필요해요	동적으로 바뀌는 화면에서도 사용자가 통제권을 잃지 않게 해요

1. 익숙한 GUI 요소에도 서로 다른 문법이 있어요

브랜드와 색을 걷어 내면 대부분의 화면은 비슷한 재료로 남아요. 버튼은 행동을 실행하고, 링크는 다른 위치로 이동시켜요. 폼과 검색은 입력받고, 알림은 시스템 상태를 알려줘요. 생김새가 비슷해도 맡은 일이 달라서 역할을 뒤섞으면 사용자가 다음 결과를 예측하기 어려워져요. 2

버튼과 링크는 결과가 달라요

버튼을 누르면 저장, 전송, 구매, 삭제처럼 상태가 바뀌어요. 그래서 `확인`보다 `청구서 저장`, `주문하기`, `파일 3개 삭제`처럼 결과를 드러내는 문구가 안전해요. 링크는 페이지나 화면의 다른 위치로 이동할 때 써요. 이동 수단을 버튼처럼 꾸미거나 실행 명령을 링크처럼 보이게 만들면 사용자가 클릭 뒤의 결과를 짐작하기 어려워요.

728x90

자주 누르는 버튼은 크고 손이나 포인터 가까이에 두는 편이 좋아요. 피츠의 법칙에 따르면 목표가 멀수록 가리키는 시간이 늘고, 목표가 클수록 줄어요. 원문은 터치 목표의 물리적 크기로 최소 1×1cm를 제시해요. 숫자를 그대로 모든 화면에 적용하기보다 기기와 입력 방식에 맞춰 실제 누르기 쉬운지 확인해야 해요. 1

폼은 필드를 더하기보다 덜어내야 해요

입력창 안의 힌트만 레이블로 쓰면 내용을 적기 시작한 뒤 무엇을 입력하는 칸인지 사라져요. 필드 바깥에 이름을 남기고, 오류는 문제가 생긴 칸 옆에서 쉬운 말로 알려주는 편이 나아요. 형식이 조금 다르다는 이유로 전화번호나 카드 정보를 다시 입력하게 만들기보다 여러 표기를 받아 코드에서 정리할 수도 있어요.

필드 삭제는 가장 직접적인 개선 방법이에요. 제품 팀은 데이터를 더 받고 싶어 하지만, 사용자는 입력할 이유가 보이지 않으면 이탈해요. 원문은 Expedia가 예약 폼에서 선택 항목인 회사명 필드를 없앤 뒤 연간 1,200만 달러의 추가 수익을 보고한 사례를 들어요. 오래된 사례지만 질문 하나를 줄이는 일이 전환에 영향을 줄 수 있다는 점은 지금도 점검할 만해요. 1

메뉴, 탭, 검색은 서로 다른 탐색 문제를 풀어요

메뉴는 쓸 수 있는 선택지를 보여줘서 명령을 외우지 않아도 되게 해요. 탭은 같은 수준의 콘텐츠를 오갈 때 어울려요. 검색은 사용자가 원하는 대상을 자기 언어로 직접 입력할 때 필요해요. 공간이 부족하다는 이유만으로 데스크톱의 주요 탐색을 햄버거 메뉴 안에 숨기면, 처음 온 사용자는 어떤 메뉴가 있는지 발견하기 어려워져요.

탭 안에 또 탭을 넣거나 메뉴 단계를 깊게 쌓으면 현재 위치를 놓치기 쉬워요. 검색 결과가 없을 때는 빈 화면만 보여주지 말고 철자를 고치거나 범위를 넓힐 방법을 안내해야 해요. 각 요소가 푸는 문제를 먼저 적어 보면 한 화면에 불필요한 탐색 장치를 겹쳐 놓는 일을 줄일 수 있어요.

선택 컨트롤은 선택 시점과 개수를 알려줘요

체크박스는 여러 항목을 독립적으로 고를 때 써요. 라디오 버튼은 목록에서 하나만 고를 때 맞아요. 토글은 켜고 끄는 즉시 설정이 반영될 때 자연스러워요. 저장 버튼을 눌러야 적용되는 값을 토글로 표현하면 사용자는 이미 바뀌었다고 오해할 수 있어요.

옵션 이름은 긍정문으로 쓰고, 선택 여부를 색만으로 구분하지 않는 편이 좋아요. 키보드 포커스와 충분한 터치 영역도 함께 확인해야 해요. 시각적 모양만 맞추는 것으로는 접근성과 조작성을 확보할 수 없어요.

대화상자와 알림은 꼭 필요할 때만 끼어들어야 해요

대화상자는 사용자가 하던 일을 멈추게 해요. 삭제처럼 되돌리기 어렵거나 다음 단계에 꼭 필요한 결정에만 쓰는 편이 좋아요. 단순 안내는 화면 안의 상태 메시지나 잠시 나타나는 알림으로 충분할 수 있어요. 오류 문구에는 잘못됐다는 말뿐 아니라 무엇을 고치면 되는지도 담아야 해요.

아이콘도 익숙함이 중요해요. 검색의 돋보기, 삭제의 휴지통처럼 널리 알려진 표시는 빠르게 이해할 수 있어요. 새 아이콘이나 뜻이 여러 개인 아이콘에는 텍스트 레이블을 붙여야 해요. 작은 그림 하나로 모든 의미를 전달할 수 있다고 가정하면 사용자가 추측해야 해요.

왜 중요한가요

디자인 시스템을 갖춰도 요소의 역할을 잘못 정하면 일관된 실수가 반복돼요. 컴포넌트 이름과 색상만 정리하기보다 버튼은 어떤 상태 변화를 실행하는지, 링크는 어디로 이동하는지, 오류 뒤에는 어떻게 복구하는지까지 규칙에 넣어야 해요. 기획자와 개발자도 이 기준을 공유하면 화면 검토가 취향 논쟁보다 행동과 결과 중심으로 바뀌어요. 1

생성형 AI나 에이전트 제품에서도 오래된 GUI 문법은 여전히 필요해요. 사용자는 작업을 승인하고, 잠시 멈추고, 결과를 확인하고, 실행을 취소해야 해요. 시스템이 화면을 그때그때 바꾸더라도 제어 버튼의 위치와 의미까지 계속 달라지면 실수가 늘어요. 동적인 기능일수록 익숙한 컨트롤, 분명한 상태 표시, 되돌릴 수 있는 경로를 함께 설계해야 해요. 2

실무에서는 화면마다 10가지 요소를 모두 넣을 필요가 없어요. 현재 과업에 필요한 행동과 입력, 이동, 피드백만 남기면 돼요. 새 컴포넌트를 만들기 전에는 기존 요소로 같은 목적을 더 쉽게 설명할 수 있는지 확인해 보세요.

참고 자료

1. 10 GUI Design Elements Build Every User Interface — UX Tigers, Jakob Nielsen
2. 모든 사용자 인터페이스를 구성하는 10가지 GUI 디자인 요소 — GeekNews