눌러 보고 이름을 찾는
화면 용어 사전
화면 부품과 움직임의 이름을 직접 작동시켜 보며 익힙니다. 기획서·디자이너·개발자·AI에게 같은 말로 부탁할 수 있습니다.
사전 목록
용어 36개를 모두 직접 눌러 보거나 움직여 볼 수 있습니다.
화면 요소 사전
버튼·셀렉트·모달처럼 화면을 이루는 부품
- 버튼Button누르면 지금 화면에서 저장·전송·삭제 같은 일을 하는 요소입니다.
- 링크Link누르면 다른 페이지나 같은 페이지의 다른 위치로 이동하는 글자입니다.
- 아이콘 버튼Icon button글자 없이 그림 하나로 된 버튼입니다. 좋아요·공유·더 보기처럼 뜻이 널리 알려진 동작에 씁니다.
- 토글 스위치Toggle switch누를 때마다 설정이 켜짐과 꺼짐 사이에서 바뀌는 스위치입니다. 보통 바뀌는 즉시 적용됩니다.
- 체크박스Checkbox보기마다 따로 켜고 끌 수 있는 네모 칸입니다. 여러 개를 함께 고를 수 있습니다.
- 라디오 버튼Radio button여러 보기 중 하나만 고르는 동그란 칸입니다. 하나를 고르면 앞서 고른 것은 풀립니다.
- 셀렉트 박스Select누르면 보기 목록이 펼쳐지고, 하나를 고르면 그 값이 칸에 남는 요소입니다.
- 세그먼트 컨트롤Segmented control붙어 있는 짧은 버튼 몇 개 중 하나를 고르면 바로 보기 방식이 바뀌는 요소입니다.
- 필터 칩Filter chip둥근 작은 버튼으로 조건을 켜고 끄면, 그 자리에서 목록이 걸러지는 요소입니다.
- 슬라이더Slider손잡이를 끌어 정해진 범위 안의 값을 고르는 막대입니다.
- 입력창Text field한 줄짜리 글자를 적는 칸입니다. 칸 위의 이름표(label)와 아래의 안내·오류 문구를 함께 씁니다.
- 여러 줄 입력창Textarea여러 줄의 긴 글을 적는 칸입니다. 글자 수 제한이 있으면 칸 아래에 지금 글자 수를 보여 줍니다.
- 자동완성 입력창Combobox (autocomplete)글자를 적는 동안 맞는 보기를 아래에 띄우고, 그중 하나를 고를 수 있는 입력창입니다.
- 숫자 증감 버튼Stepper가운데 숫자 양옆의 −·+ 버튼으로 수를 하나씩 줄이고 늘리는 요소입니다.
- 탭Tabs같은 자리에서 제목을 눌러 서로 다른 내용 묶음으로 바꿔 보는 요소입니다.
- 아코디언Accordion제목을 누르면 그 아래 내용이 펼쳐지고, 다시 누르면 접히는 목록입니다.
- 드롭다운 메뉴Dropdown menu버튼을 누르면 할 일 목록이 아래로 떠 있고, 하나를 고르면 그 일을 하고 닫히는 메뉴입니다.
- 브레드크럼Breadcrumb'홈 › 분류 › 지금 페이지'처럼 지금 위치까지의 길을 링크로 이어 보여 주는 줄입니다.
- 페이지네이션Pagination긴 목록을 여러 쪽으로 나누고, 번호와 이전·다음 버튼으로 쪽을 옮기는 줄입니다.
- 툴팁Tooltip요소에 마우스를 올리거나 키보드로 옮겨 가면 짧은 설명이 잠깐 뜨는 말풍선입니다.
- 팝오버Popover버튼을 누르면 그 옆에 붙어 뜨는 작은 창입니다. 안에 설정·설명·링크를 담을 수 있고, 바깥을 누르면 닫힙니다.
- 모달Modal dialog화면 가운데에 뜨고, 닫기 전까지 뒤 화면을 누를 수 없게 막는 창입니다.
- 바텀시트Bottom sheet휴대폰 화면 아래에서 위로 올라오는 창입니다. 엄지가 닿기 쉬운 자리에 보기나 할 일을 모아 둡니다.
- 토스트Toast방금 한 일의 결과를 화면 아래쪽에 몇 초 동안 띄웠다가 저절로 사라지는 짧은 알림입니다.
- 알림 배너Alert banner페이지 안에 자리를 차지하고 남아 있는 안내 상자입니다. 사용자가 닫거나 문제가 풀릴 때까지 보입니다.
- 배지Badge아이콘이나 글자 옆에 붙어 개수·상태를 알려 주는 작은 표시입니다. 누를 수 없습니다.
웹 글자 효과 사전
타이핑·스크램블·형광펜처럼 글자가 움직이는 효과
- 타이핑 효과Typewriter등장 효과. 어울리는 곳: 첫 화면 제목, 챗봇 답변, 검색창 예시 문구
- 단어 바꿔 보이기Rotating text반복 효과. 어울리는 곳: 서비스 소개 첫 줄, 여러 쓰임새를 한 줄에 보여 줄 때
- 마스크 리빌Mask reveal등장 효과. 어울리는 곳: 섹션 제목, 포트폴리오 첫 화면
- 글자 쪼개기 등장Split text등장 효과. 어울리는 곳: 행사 안내, 브랜드 문구, 짧은 강조 문장
- 텍스트 스크램블Text scramble등장 효과. 어울리는 곳: 기술·보안 느낌의 제목, 숫자·코드 공개, 게임 화면
- 블러 리빌Blur reveal등장 효과. 어울리는 곳: 사진 위 문구, 차분한 소개 문장
- 스크롤 텍스트 하이라이트Scroll text highlight스크롤 효과. 어울리는 곳: 긴 소개 문단, 회사·서비스 이야기, 랜딩 페이지 중간
- 형광펜 효과Highlighter강조 효과. 어울리는 곳: 본문 속 핵심 문장, 가격·기한 같은 꼭 볼 정보
- 숫자 올라가기Count-up등장 효과. 어울리는 곳: 소개 페이지의 글·도구 개수, 성과·이용자 수
- 흐르는 그라데이션 글자Animated gradient text반복 효과. 어울리는 곳: 행사·이벤트 제목, 버튼 위 짧은 강조 문구
찾는 용어가 없습니다. 영어 이름이나 다른 말로 찾아보세요.