마우스와 터치
클릭
Click
트리거 또는 상태
onClick뜻
사용자가 마우스로 요소를 누르고 놓는 동작입니다.
기대 동작
메뉴 열기, 버튼 실행, 항목 선택, 링크 이동 같은 동작을 설명할 때 사용합니다.
요청 예시
메뉴 버튼을 클릭하면 메뉴 패널이 열리게 해줘.
프로그래밍
페이지 동작을 위한 UI 동작 용어
버튼, 메뉴, 드롭다운, 폼, 검색, 키보드 조작, 피드백 상태가 어떻게 동작해야 하는지 정확히 요청하기 위한 UI 동작 용어 참고 자료입니다.
47 개 항목
마우스와 터치
탭
Tap
트리거 또는 상태
touch / pointer뜻
터치 화면에서 손가락으로 요소를 누르고 떼는 동작입니다.
기대 동작
모바일과 태블릿에서는 중요한 클릭 동작이 탭으로도 동일하게 동작해야 합니다.
주의
터치 기기에서는 hover 전용 동작이 안정적이지 않습니다.
요청 예시
모바일에서는 카테고리 메뉴가 hover가 아니라 탭으로 열리게 해줘.
마우스와 터치
호버
Hover
트리거 또는 상태
:hover뜻
마우스 포인터가 요소 위에 올라가 있는 상태입니다.
기대 동작
호버는 색상, 밑줄, 배경, 그림자 변화로 상호작용 가능함을 미리 보여줍니다.
주의
필수 동작을 hover에만 의존하게 만들면 안 됩니다.
요청 예시
메뉴 항목에 마우스를 올리면 배경색이 바뀌게 해줘.
마우스와 터치
길게 누르기
Long press
트리거 또는 상태
touch hold뜻
터치 화면에서 손가락을 요소 위에 잠시 길게 유지하는 동작입니다.
기대 동작
길게 누르기는 보조 동작에 쓰일 수 있지만, 눈에 보이는 버튼보다 발견하기 어렵습니다.
주의
중요한 기능을 길게 누르기로만 접근하게 만들지 않는 편이 좋습니다.
요청 예시
중요한 복사 동작을 길게 누르기에만 숨기지 말아줘.
마우스와 터치
드래그
Drag
트리거 또는 상태
pointerdown + pointermove뜻
요소나 선택 영역을 누른 상태로 움직이는 동작입니다.
기대 동작
드래그 동작은 명확한 핸들, 이동 범위, 정밀 조작이 필요할 때의 대체 컨트롤이 필요합니다.
요청 예시
패널을 드래그할 수 있다면 보이는 핸들을 추가해줘.
마우스와 터치
스와이프
Swipe
트리거 또는 상태
touch move뜻
손가락을 화면 위에서 빠르게 미는 터치 제스처입니다.
기대 동작
스와이프는 캐러셀이나 패널 이동에 쓸 수 있지만, 눈에 보이는 컨트롤도 함께 있는 편이 좋습니다.
요청 예시
예시 사이를 스와이프로 이동할 수 있게 하되 화살표 버튼도 보이게 해줘.
키보드
키보드 이벤트
Keyboard event
트리거 또는 상태
keydown / keyup뜻
키보드 키를 누르거나 뗄 때 발생하는 상호작용입니다.
기대 동작
Escape로 닫기, Enter로 제출, 방향키 이동, 단축키 등에 사용합니다.
요청 예시
Escape 키를 누르면 드롭다운이 닫히게 해줘.
키보드
Escape 키
Escape key
트리거 또는 상태
Escape뜻
임시 UI를 취소하거나 닫거나 빠져나갈 때 자주 쓰는 키입니다.
기대 동작
드롭다운, 메뉴, 모달, 팝오버는 보통 Escape 키로 닫히는 것이 좋습니다.
요청 예시
언어 드롭다운과 사이트 메뉴가 모두 Escape 키로 닫히게 해줘.
키보드
Enter 키
Enter key
트리거 또는 상태
Enter뜻
포커스된 컨트롤을 실행하거나 폼을 제출할 때 자주 쓰는 키입니다.
기대 동작
포커스된 버튼은 Enter로 실행되어야 합니다. 검색 폼은 Enter로 제출될 수 있습니다.
요청 예시
검색창에 포커스가 있을 때 Enter를 누르면 검색이 실행되게 해줘.
키보드
Tab 키
Tab key
트리거 또는 상태
Tab뜻
상호작용 가능한 컨트롤 사이에서 포커스를 이동하는 키입니다.
기대 동작
Tab 이동 순서는 화면에서 읽고 조작하는 순서와 자연스럽게 맞아야 합니다.
요청 예시
헤더 컨트롤의 Tab 이동 순서를 자연스럽게 유지해줘.
UI 상태
포커스
Focus
트리거 또는 상태
:focus / :focus-visible뜻
요소가 키보드 입력이나 실행 대상이 된 상태입니다.
기대 동작
포커스된 컨트롤에는 보이는 외곽선이나 포커스 스타일이 있어야 합니다.
요청 예시
포커스된 검색창이 분명히 보이게 해줘.
UI 상태
포커스 해제
Blur
트리거 또는 상태
blur / focusout뜻
요소가 포커스를 잃는 상태 변화입니다.
기대 동작
blur는 입력 검증이나 가벼운 UI 닫기에 쓸 수 있지만 사용자를 놀라게 하면 안 됩니다.
요청 예시
검색창이 포커스를 잃어도 검색어는 지우지 말아줘.
UI 상태
누른 상태
Active state
트리거 또는 상태
:active뜻
컨트롤을 누르고 있는 짧은 순간의 상태입니다.
기대 동작
active 상태는 배경, 테두리, 위치 변화를 통해 눌리는 느낌을 줄 수 있습니다.
요청 예시
아이콘 버튼에 은은한 눌림 상태를 추가해줘.
UI 상태
선택된 상태
Selected state
트리거 또는 상태
selected / aria-current뜻
목록, 메뉴, 탭, 필터 그룹에서 현재 선택된 항목의 상태입니다.
기대 동작
선택된 항목은 선택되지 않은 항목과 시각적으로 구분되어야 합니다.
요청 예시
활성 카테고리 칩이 비활성 칩과 확실히 구분되게 해줘.
UI 상태
비활성 상태
Disabled state
트리거 또는 상태
disabled / aria-disabled뜻
컨트롤이 보이지만 사용할 수 없는 상태입니다.
기대 동작
비활성 컨트롤은 사용할 수 없다는 느낌을 주되 의미는 이해 가능해야 합니다.
요청 예시
필수 입력이 유효해질 때까지 제출 버튼을 비활성화해줘.
UI 상태
체크된 상태
Checked state
트리거 또는 상태
checked뜻
체크박스, 라디오, 스위치형 컨트롤이 켜지거나 선택된 상태입니다.
기대 동작
체크된 상태는 시각적으로 분명하고 컨트롤 의미로도 전달되어야 합니다.
요청 예시
선택된 옵션에는 명확한 체크 상태를 보여줘.
열림과 닫힘
토글
Toggle
트리거 또는 상태
toggle state뜻
열림/닫힘, 켜짐/꺼짐처럼 두 상태 사이를 전환하는 동작입니다.
기대 동작
토글은 현재 상태를 보여주고, 누를 때 상태가 예측 가능하게 바뀌어야 합니다.
요청 예시
각 메뉴 카테고리를 하나의 버튼으로 열고 닫게 해줘.
열림과 닫힘
열기 / 닫기
Open / close
트리거 또는 상태
open / closed뜻
패널, 메뉴, 섹션이 보이거나 숨겨지는 상태입니다.
기대 동작
열림/닫힘 상태는 버튼, 바깥 클릭, Escape, 선택 동작으로 일관되게 제어되어야 합니다.
요청 예시
언어 드롭다운이 열리면 사이트 메뉴는 닫히게 해줘.
열림과 닫힘
드롭다운
Dropdown
트리거 또는 상태
button -> panel뜻
버튼이나 입력 필드에서 열리는 떠 있는 목록입니다.
기대 동작
드롭다운은 보통 항목 선택, 바깥 클릭, Escape 키로 닫힙니다.
요청 예시
언어를 선택하면 드롭다운이 닫히게 해줘.
열림과 닫힘
아코디언
Accordion
트리거 또는 상태
section toggle뜻
섹션 제목을 눌러 내용을 열거나 닫는 UI 패턴입니다.
기대 동작
아코디언은 어떤 섹션이 열려 있는지 명확히 표시해야 합니다.
요청 예시
아코디언 카테고리는 기본적으로 모두 닫힌 상태로 시작하게 해줘.
열림과 닫힘
모달
Modal
트리거 또는 상태
open dialog뜻
페이지 위에 떠서 사용자의 주의를 모으고 보통 배경 콘텐츠 조작을 막는 UI입니다.
기대 동작
모달에는 닫기 컨트롤, Escape 동작, 포커스 처리, 명확한 목적이 필요합니다.
요청 예시
모달에 닫기 버튼과 Escape로 닫기 동작을 추가해줘.
열림과 닫힘
바깥 클릭
Outside click
트리거 또는 상태
document pointerdown뜻
드롭다운, 메뉴, 팝오버 같은 임시 패널 바깥을 클릭하거나 탭하는 동작입니다.
기대 동작
임시 패널은 사용자가 바깥을 클릭하면 닫히는 경우가 많습니다.
주의
같은 헤더 그룹 안의 컨트롤은 로직을 따로 쓰지 않으면 바깥 클릭으로 인식되지 않을 수 있습니다.
요청 예시
사용자가 메뉴 패널 바깥을 클릭하면 메뉴가 닫히게 해줘.
열림과 닫힘
포커스 트랩
Focus trap
트리거 또는 상태
modal open뜻
모달이나 대화상자가 열려 있는 동안 키보드 포커스를 그 안에 머물게 하는 동작입니다.
기대 동작
포커스 트랩은 키보드 사용자가 열린 모달 뒤쪽으로 실수로 이동하지 않게 합니다.
요청 예시
모달이 닫힐 때까지 포커스가 모달 안에 머물게 해줘.
이동
링크 이동
Link navigation
트리거 또는 상태
link click뜻
링크를 통해 다른 페이지, 경로, 섹션으로 이동하는 동작입니다.
기대 동작
링크는 올바른 목적지로 이동해야 하며 임시 메뉴 안에서 클릭했다면 메뉴가 닫히는 것이 자연스럽습니다.
요청 예시
메뉴 링크를 클릭한 뒤에는 메뉴가 닫히게 해줘.
이동
경로 변경
Route change
트리거 또는 상태
router navigation뜻
애플리케이션의 한 경로 또는 URL에서 다른 경로로 바뀌는 동작입니다.
기대 동작
경로가 바뀌면 페이지 콘텐츠, 메타데이터, 활성 네비게이션 상태가 함께 맞아야 합니다.
요청 예시
경로가 변경된 뒤 활성 네비게이션 상태를 갱신해줘.
이동
스크롤
Scroll
트리거 또는 상태
wheel / touch scroll뜻
화면보다 큰 콘텐츠 안에서 보이는 위치를 이동하는 동작입니다.
기대 동작
스크롤은 페이지 전체에서 일어나거나 overflow가 있는 패널 내부에서 일어날 수 있습니다.
요청 예시
긴 드롭다운 메뉴가 화면 밖으로 길어지지 않고 패널 안에서 스크롤되게 해줘.
이동
앵커 이동
Anchor scroll
트리거 또는 상태
href=#id뜻
같은 페이지 안에서 일치하는 id를 가진 요소로 스크롤 이동하는 링크 동작입니다.
기대 동작
앵커 링크는 도구, 참고 자료, 섹션으로 바로 이동할 때 유용합니다.
요청 예시
도구 둘러보기 버튼을 누르면 도구 섹션으로 스크롤되게 해줘.
입력과 폼
입력하기
Type
트리거 또는 상태
input event뜻
input이나 textarea에 텍스트 또는 값을 입력하는 동작입니다.
기대 동작
입력은 즉시 상태를 갱신하거나, 유효성을 검사하거나, 제출 전까지 기다릴 수 있습니다.
요청 예시
사용자가 입력하는 동안 검색 결과가 바로 갱신되게 해줘.
입력과 폼
제출
Submit
트리거 또는 상태
submit event뜻
폼 입력 내용을 보내거나 적용하는 동작입니다.
기대 동작
제출은 필수 입력을 검증하고, 필요하면 실수로 페이지가 새로고침되지 않게 하며, 결과 피드백을 보여줘야 합니다.
요청 예시
폼 제출 시 페이지가 새로고침되지 않게 해줘.
입력과 폼
초기화
Reset
트리거 또는 상태
reset action뜻
컨트롤이나 값을 기본 상태로 되돌리는 동작입니다.
기대 동작
초기화는 예측 가능해야 하며 중요한 작업을 경고 없이 지우지 않는 것이 좋습니다.
요청 예시
검색어를 지우고 카테고리를 전체로 되돌리는 초기화 버튼을 추가해줘.
입력과 폼
유효성 검사
Validation
트리거 또는 상태
input / submit뜻
사용자 입력이 완전하고 올바른지 확인하는 동작입니다.
기대 동작
유효성 검사는 무엇이 잘못됐고 어떻게 고치면 되는지 설명해야 합니다.
요청 예시
입력값이 올바르지 않으면 유효성 검사 메시지를 보여줘.
검색과 필터
검색
Search
트리거 또는 상태
query change뜻
사용자가 입력한 텍스트를 기준으로 일치하는 항목을 찾는 동작입니다.
기대 동작
검색은 이름, 별칭, 설명, 예시처럼 실제로 찾고 싶은 필드를 확인해야 합니다.
요청 예시
검색이 한국어 용어, 영어 용어, 별칭, 요청 예시에 모두 매칭되게 해줘.
검색과 필터
필터
Filter
트리거 또는 상태
filter state뜻
선택한 조건에 맞는 항목만 남기도록 목록을 좁히는 동작입니다.
기대 동작
필터는 어떤 조건이 활성인지, 필요하면 몇 개 항목이 남았는지 보여주는 것이 좋습니다.
요청 예시
UI 동작 용어 카드 위에 카테고리 필터를 추가해줘.
검색과 필터
정렬
Sort
트리거 또는 상태
sort option뜻
이름, 날짜, 우선순위, 카테고리 같은 기준으로 항목 순서를 바꾸는 동작입니다.
기대 동작
정렬은 항목을 제거하지 않고 순서만 바꿉니다.
요청 예시
필터링된 용어를 알파벳순으로 정렬해줘.
검색과 필터
디바운스
Debounce
트리거 또는 상태
delayed input뜻
사용자가 입력을 멈춘 뒤 잠깐 기다렸다가 비용이 큰 동작을 실행하는 방식입니다.
기대 동작
디바운스는 검색, 검증, API 호출이 모든 키 입력마다 실행되는 것을 막습니다.
요청 예시
항목이 많아져 검색이 느려지면 검색 입력에 디바운스를 적용해줘.
검색과 필터
지우기
Clear
트리거 또는 상태
clear action뜻
입력값, 선택된 필터, 임시 상태를 제거하는 동작입니다.
기대 동작
지우기 동작은 의도한 필드나 상태에만 영향을 줘야 합니다.
요청 예시
검색창 안에 검색어 지우기 버튼을 추가해줘.
피드백
로딩
Loading
트리거 또는 상태
pending state뜻
데이터, 페이지 콘텐츠, 동작 결과가 아직 준비되는 중인 임시 상태입니다.
기대 동작
로딩 피드백은 앱이 작업 중임을 알려주고, 필요하면 반복 클릭을 막습니다.
요청 예시
변환 결과를 준비하는 동안 로딩 상태를 보여줘.
피드백
스피너
Spinner
트리거 또는 상태
loading visual뜻
무언가 로딩 중이거나 처리 중임을 보여주는 시각 표시입니다.
기대 동작
스피너는 짧은 대기에 적합하고, 긴 대기에는 더 명확한 진행 표시나 텍스트가 필요할 수 있습니다.
요청 예시
제출 중에는 버튼 안에 작은 스피너를 보여줘.
피드백
토스트
Toast
트리거 또는 상태
temporary message뜻
동작이 끝난 뒤 잠깐 나타나는 짧은 알림 메시지입니다.
기대 동작
토스트는 복사 완료, 저장 완료, 업데이트 완료 같은 확인 메시지에 유용합니다.
요청 예시
텍스트를 클립보드에 복사한 뒤 토스트를 보여줘.
피드백
오류 상태
Error state
트리거 또는 상태
error뜻
무언가 잘못되었음을 사용자에게 알려주는 상태입니다.
기대 동작
오류 메시지는 구체적이고 읽기 쉬워야 하며 다음에 무엇을 하면 되는지 알려줘야 합니다.
요청 예시
입력값을 변환할 수 없을 때 명확한 오류 메시지를 보여줘.
피드백
성공 상태
Success state
트리거 또는 상태
success뜻
동작이 성공적으로 끝났음을 확인해주는 상태입니다.
기대 동작
결과가 이미 화면에 보이면 성공 상태는 은은하게 표현해도 충분합니다.
요청 예시
설정이 저장된 뒤 작은 성공 메시지를 보여줘.
피드백
빈 상태
Empty state
트리거 또는 상태
empty result뜻
데이터가 없거나 일치하는 결과가 없을 때 보여주는 상태입니다.
기대 동작
빈 상태는 왜 아무것도 보이지 않는지 설명하고 다음 행동을 제안하는 것이 좋습니다.
요청 예시
검색 결과가 없으면 결과 없음 메시지를 보여줘.
피드백
클립보드 복사
Copy to clipboard
트리거 또는 상태
navigator.clipboard뜻
텍스트를 사용자의 클립보드에 넣는 동작입니다.
기대 동작
복사 동작은 사용자가 복사 완료를 알 수 있도록 피드백을 주는 것이 좋습니다.
요청 예시
속성 칩을 클릭하면 해당 CSS 속성이 복사되게 해줘.
움직임과 타이밍
전환 효과
Transition
트리거 또는 상태
CSS transition뜻
색상, 투명도, 위치 같은 두 시각 상태 사이를 부드럽게 바꾸는 효과입니다.
기대 동작
전환 효과는 UI를 다듬어 보이게 하지만 도구 화면에서는 빠르게 유지하는 것이 좋습니다.
요청 예시
메뉴 항목 hover 색상 변화에 짧은 전환 효과를 추가해줘.
움직임과 타이밍
애니메이션
Animation
트리거 또는 상태
CSS animation뜻
한 번 또는 반복해서 실행되는 시각적 움직임입니다.
기대 동작
애니메이션은 작업을 돕는 정도여야 하며 읽기나 반복 작업을 방해하면 안 됩니다.
요청 예시
드롭다운이 열릴 때 은은한 아래로 펼쳐지는 애니메이션을 사용해줘.
움직임과 타이밍
지연
Delay
트리거 또는 상태
setTimeout / delay뜻
무언가 실행되거나 사라지기 전에 기다리는 시간입니다.
기대 동작
지연은 피드백을 읽을 시간을 줄 수 있지만 너무 길면 UI가 느리게 느껴집니다.
요청 예시
복사 완료 토스트를 약 1초 정도 보이게 유지해줘.
움직임과 타이밍
스로틀
Throttle
트리거 또는 상태
limited repeated events뜻
반복 이벤트 처리 함수가 실행되는 빈도를 제한하는 방식입니다.
기대 동작
스로틀은 scroll이나 resize처럼 매우 자주 발생하는 이벤트 처리에 유용합니다.
요청 예시
스크롤이 버벅이면 scroll handler에 스로틀을 적용해줘.