나노플레이데이즈사전
전체 사전

화면 요소 사전

버튼과 링크, 셀렉트와 드롭다운 메뉴, 모달과 팝오버처럼 헷갈리는 화면 요소를 직접 눌러 보고 차이와 AI 부탁 문장을 봅니다.

누르는 것

누르면 바로 일이 일어나거나, 켜짐·꺼짐이 바뀝니다.

  • 버튼 Button

    누르면 지금 화면에서 저장·전송·삭제 같은 일을 하는 요소입니다.

    직접 해 보기

    버튼을 눌러 보세요.

    이럴 때
    저장, 보내기, 결제처럼 '일을 시키는' 자리에 씁니다. 한 화면에서 가장 중요한 일 하나만 색을 채운 주 버튼으로 두고, 나머지는 테두리만 있는 보조 버튼으로 둡니다.
    다르게 부르는 말
    CTA, 주 버튼, 보조 버튼, primary button

    헷갈리는 이웃

    • 링크 링크는 다른 페이지로 이동하고, 버튼은 이 자리에서 일을 합니다. '자세히 보기'로 다른 페이지에 간다면 링크입니다.
    • 아이콘 버튼 글자 대신 그림만 있는 버튼입니다. 뜻이 분명한 그림(하트·공유)에만 씁니다.
    AI에게 이렇게 부탁하세요

    글쓰기 화면 아래에 '저장하기' 주 버튼과 '취소' 보조 버튼을 나란히 넣어 줘. 주 버튼은 색을 채우고 보조 버튼은 테두리만 두고, 누르는 동안 살짝 눌린 모습이 보이게 해 줘. 저장 중에는 버튼을 잠시 비활성화하고 '저장 중…'으로 글자를 바꿔 줘. 손가락으로 누르기 쉽게 높이는 44px 이상으로 해 줘.

  • 아이콘 버튼 Icon button

    글자 없이 그림 하나로 된 버튼입니다. 좋아요·공유·더 보기처럼 뜻이 널리 알려진 동작에 씁니다.

    직접 해 보기

    그림 버튼을 눌러 보세요.

    이럴 때
    자리가 좁은 카드·툴바에서 씁니다. 그림만 보이더라도 화면 읽기 프로그램이 읽을 이름(aria-label)을 꼭 붙입니다.
    다르게 부르는 말
    아이콘만 있는 버튼, icon only button

    헷갈리는 이웃

    • 버튼 글자가 있는 일반 버튼입니다. 뜻이 덜 알려진 동작은 글자 버튼이 더 분명합니다.
    • 툴팁 아이콘 버튼에 마우스를 올리면 이름을 짧게 띄우는 데 툴팁을 함께 씁니다.
    AI에게 이렇게 부탁하세요

    게시글 카드 오른쪽 아래에 좋아요·공유·더 보기 아이콘 버튼 세 개를 넣어 줘. 각각 aria-label에 '좋아요', '공유', '더 보기'를 넣고, 좋아요는 누를 때마다 켜짐·꺼짐이 바뀌며 aria-pressed로 상태를 알려 줘. 누르는 영역은 그림보다 넉넉하게 44px로 잡아 줘.

  • 토글 스위치 Toggle switch

    누를 때마다 설정이 켜짐과 꺼짐 사이에서 바뀌는 스위치입니다. 보통 바뀌는 즉시 적용됩니다.

    직접 해 보기

    알림 받기

    스위치를 눌러 보세요.

    이럴 때
    알림 받기, 어두운 화면처럼 켜고 끄는 설정에 씁니다. 흔히 '저장' 버튼 없이 바로 적용합니다.
    다르게 부르는 말
    토글, 스위치, 온오프 버튼, switch, toggle

    헷갈리는 이웃

    • 체크박스 토글은 설정을 켜고 끄고, 체크박스는 항목을 고르거나 풀며 일부만 고른 상태도 나타냅니다. 적용 시점은 구별 기준이 아닙니다. 흔히 토글은 바로 적용하고 체크박스는 '저장'으로 한꺼번에 보내지만, 체크박스도 즉시 적용할 수 있습니다.
    • 세그먼트 컨트롤 하나의 설정을 켜고 끄는 것이 아니라, 나란히 붙은 관련 선택 버튼 중 하나를 고르면 세그먼트 컨트롤입니다. '목록·바둑판'처럼 두 칸이어도 됩니다.
    AI에게 이렇게 부탁하세요

    설정 화면의 '알림 받기' 옆에 토글 스위치(toggle switch)를 넣어 줘. 누르는 즉시 켜짐·꺼짐이 저장되고, 켜지면 손잡이가 오른쪽으로 움직이며 색이 바뀌게 해 줘. role="switch"와 aria-checked로 상태를 알려 주고, 글자 '알림 받기'를 눌러도 스위치가 바뀌게 해 줘.

고르는 것

정해진 보기 중에서 하나 또는 여러 개를 고릅니다.

  • 체크박스 Checkbox

    보기마다 따로 켜고 끌 수 있는 네모 칸입니다. 여러 개를 함께 고를 수 있습니다.

    직접 해 보기

    약관 동의

    칸을 하나 이상 골라 보세요.

    이럴 때
    약관 동의, 관심 분야 여러 개 고르기처럼 항목을 고르거나 풀 때 씁니다. 흔히 고른 뒤 '다음'이나 '저장'으로 한꺼번에 보내지만, 바로 적용해도 됩니다.
    다르게 부르는 말
    체크 박스, 확인란, 다중 선택, check box

    헷갈리는 이웃

    • 라디오 버튼 라디오 버튼은 여러 보기 중 하나만 고릅니다. 여러 개를 고르면 체크박스입니다.
    • 토글 스위치 설정 하나를 켜고 끄면 토글 스위치, 항목을 고르거나 풀면 체크박스입니다.
    • 필터 칩 필터 칩도 여러 개를 고르지만, 고르는 즉시 목록이 바뀌는 검색 필터에 씁니다.
    AI에게 이렇게 부탁하세요

    회원가입 화면에 약관 동의 체크박스 세 개(이용약관 필수, 개인정보 수집 필수, 마케팅 수신 선택)를 넣어 줘. 맨 위에 '모두 동의' 체크박스를 두고, 일부만 고르면 중간 상태(indeterminate)로 보여 줘. 글자를 눌러도 체크되게 label로 묶고, 필수 두 개를 고르기 전에는 '다음' 버튼을 비활성화해 줘.

  • 라디오 버튼 Radio button

    여러 보기 중 하나만 고르는 동그란 칸입니다. 하나를 고르면 앞서 고른 것은 풀립니다.

    직접 해 보기

    배송 방법

    지금 고른 것: 일반 배송

    이럴 때
    배송 방법, 결제 수단처럼 보기가 2~5개이고 모두 한눈에 보여 주고 싶을 때 씁니다.
    다르게 부르는 말
    라디오, 단일 선택, radio

    헷갈리는 이웃

    • 체크박스 여러 개를 함께 고르면 체크박스입니다.
    • 셀렉트 박스 보기가 많거나 자리가 좁으면 접어 두는 셀렉트 박스가 낫습니다.
    • 세그먼트 컨트롤 보기가 짧고 화면 보기 방식을 바로 바꾸는 곳이면 세그먼트 컨트롤입니다.
    AI에게 이렇게 부탁하세요

    주문서에 배송 방법 라디오 버튼 그룹(일반 배송, 빠른 배송, 매장 픽업)을 넣어 줘. fieldset과 legend로 '배송 방법'이라는 묶음 이름을 붙이고, 기본값은 일반 배송으로 해 줘. 방향키로 보기 사이를 옮길 수 있게 같은 name으로 묶어 줘.

  • 셀렉트 박스 Select

    누르면 보기 목록이 펼쳐지고, 하나를 고르면 그 값이 칸에 남는 요소입니다.

    직접 해 보기

    아직 고르지 않았습니다.

    이럴 때
    지역, 연도처럼 보기가 많아 모두 펼쳐 두기 어려울 때 씁니다. 고른 값은 '저장'이나 '검색'과 함께 보냅니다.
    다르게 부르는 말
    셀렉트, 셀렉트박스, 드롭다운, 선택 상자, 콤보 박스, select box, dropdown

    헷갈리는 이웃

    • 드롭다운 메뉴 둘 다 '드롭다운'이라고 부르지만, 셀렉트는 값을 고르고 드롭다운 메뉴는 '복제·삭제' 같은 일을 실행합니다.
    • 자동완성 입력창 목록이 수십 개를 넘으면 글자를 쳐서 좁히는 자동완성 입력창이 빠릅니다.
    • 라디오 버튼 보기가 서너 개뿐이면 펼쳐 둔 라디오 버튼이 한 번 덜 누릅니다.
    AI에게 이렇게 부탁하세요

    배송지 입력 폼에 '시·도'를 고르는 셀렉트 박스(select)를 넣어 줘. 처음에는 '선택하세요'가 보이고, 고르지 않으면 제출할 때 안내 문구를 띄워 줘. 기본 select 요소를 써서 휴대폰에서는 기기 기본 선택 화면이 뜨게 하고, label을 연결해 줘.

  • 세그먼트 컨트롤 Segmented control

    붙어 있는 짧은 버튼 몇 개 중 하나를 고르면 바로 보기 방식이 바뀌는 요소입니다.

    직접 해 보기

    이번 주 일정 7일을 보여 줍니다.

    지금 보기: 주

    이럴 때
    일·주·월 보기, 목록·바둑판 보기처럼 같은 내용을 다르게 보여 줄 때 씁니다.
    다르게 부르는 말
    세그먼트, 세그먼티드 컨트롤, 버튼 그룹, 토글 버튼 그룹, segmented button

    헷갈리는 이웃

    • 탭 탭은 서로 다른 내용(상품 정보·리뷰)으로 넘어가고, 세그먼트는 같은 내용의 보기 방식을 바꿉니다.
    • 라디오 버튼 고르는 방식은 라디오와 같지만, 고르는 즉시 화면이 바뀌고 모양이 붙은 버튼입니다.
    AI에게 이렇게 부탁하세요

    달력 화면 위에 '일·주·월' 세그먼트 컨트롤(segmented control)을 넣어 줘. 하나를 고르면 바로 그 보기로 바뀌고, 고른 칸은 배경색이 채워져 보이게 해 줘. 내부는 같은 name의 라디오 버튼으로 만들어 방향키로도 옮길 수 있게 해 줘.

  • 필터 칩 Filter chip

    둥근 작은 버튼으로 조건을 켜고 끄면, 그 자리에서 목록이 걸러지는 요소입니다.

    직접 해 보기

    조건 없이 맛집 24곳

    켠 조건이 없습니다.

    이럴 때
    검색 결과·상품 목록 위에서 '무료', '주차 가능' 같은 조건을 여러 개 켜고 끌 때 씁니다.
    다르게 부르는 말
    칩, 태그 버튼, 필터 버튼, chip, pill

    헷갈리는 이웃

    • 배지 배지는 누를 수 없는 표시이고, 칩은 눌러서 조건을 바꿉니다.
    • 체크박스 체크박스는 목록 속 네모 칸으로 항목을 고르고, 필터 칩은 둥근 버튼으로 조건을 켜고 끕니다. 흔히 칩은 누르는 즉시 결과를 바꾸지만, 체크박스 필터도 즉시 적용할 수 있습니다.
    AI에게 이렇게 부탁하세요

    맛집 목록 위에 필터 칩(filter chip) '주차 가능', '예약 가능', '반려동물'을 가로로 넣어 줘. 누를 때마다 켜짐·꺼짐이 바뀌고 켜진 칩은 체크 표시와 채운 색으로 보이게 해 줘. aria-pressed로 상태를 알리고, 켜진 조건에 맞게 아래 목록이 바로 걸러지게 해 줘.

  • 슬라이더 Slider

    손잡이를 끌어 정해진 범위 안의 값을 고르는 막대입니다.

    직접 해 보기

    음량 40

    이럴 때
    음량·밝기처럼 정확한 숫자보다 대략의 크기를 맞추는 곳에 씁니다. 정확한 값이 필요하면 숫자 칸을 함께 둡니다.
    다르게 부르는 말
    레인지, 범위 조절, 조절 막대, range, range slider

    헷갈리는 이웃

    • 숫자 증감 버튼 1개, 2개처럼 정확한 수를 하나씩 바꾸면 숫자 증감 버튼이 맞습니다.
    AI에게 이렇게 부탁하세요

    영상 플레이어에 음량 슬라이더(slider)를 넣어 줘. 0부터 100까지 움직이고, 손잡이 옆에 지금 값을 숫자로 보여 줘. input type="range"를 써서 방향키로도 조절되게 하고, 0이 되면 스피커 아이콘을 음소거 모양으로 바꿔 줘.

적는 것

글자나 숫자를 직접 넣습니다.

  • 입력창 Text field

    한 줄짜리 글자를 적는 칸입니다. 칸 위의 이름표(label)와 아래의 안내·오류 문구를 함께 씁니다.

    직접 해 보기

    칸에 이메일을 적어 보세요.

    이럴 때
    이름, 이메일, 전화번호처럼 짧은 값을 받을 때 씁니다. 형식이 틀리면 칸 바로 아래에 무엇을 고치면 되는지 적습니다.
    다르게 부르는 말
    입력 칸, 텍스트 필드, 인풋, input, text input, 텍스트 박스

    헷갈리는 이웃

    AI에게 이렇게 부탁하세요

    회원가입 폼에 이메일 입력창(text field)을 넣어 줘. 칸 위에 '이메일' 이름표를 항상 보이게 두고(placeholder만으로 이름을 대신하지 말고), type="email"로 휴대폰에서 @ 자판이 뜨게 해 줘. 칸을 벗어날 때 형식이 틀리면 칸 테두리를 빨갛게 하고 바로 아래에 '@를 포함해 적어 주세요'를 보여 줘.

  • 여러 줄 입력창 Textarea

    여러 줄의 긴 글을 적는 칸입니다. 글자 수 제한이 있으면 칸 아래에 지금 글자 수를 보여 줍니다.

    직접 해 보기

    칸에 글을 적어 보세요.

    이럴 때
    후기, 문의 내용, 자기소개처럼 길게 쓰는 곳에 씁니다.
    다르게 부르는 말
    텍스트 에어리어, 텍스트영역, 여러 줄 입력, 본문 입력, textarea, multi-line input

    헷갈리는 이웃

    • 입력창 이름·이메일처럼 한 줄이면 입력창입니다.
    AI에게 이렇게 부탁하세요

    문의하기 폼에 '문의 내용' 여러 줄 입력창(textarea)을 넣어 줘. 처음 높이는 4줄로 하고 글이 길어지면 칸이 따라 늘어나게 해 줘. 오른쪽 아래에 '지금 글자 수 / 500자'를 보여 주고, 500자를 넘으면 숫자를 빨갛게 바꿔 줘.

  • 자동완성 입력창 Combobox (autocomplete)

    글자를 적는 동안 맞는 보기를 아래에 띄우고, 그중 하나를 고를 수 있는 입력창입니다.

    직접 해 보기

    글자를 적으면 보기가 나타납니다.

    이럴 때
    도시·학교·상품명처럼 보기가 아주 많아 셀렉트 박스로 고르기 어려울 때 씁니다.
    다르게 부르는 말
    자동완성, 오토컴플리트, 검색 추천, 콤보박스, 자동 완성 입력, autocomplete, typeahead

    헷갈리는 이웃

    • 셀렉트 박스 보기가 10개 안팎이면 셀렉트 박스가 더 간단합니다.
    • 입력창 보기 없이 자유롭게 적기만 하면 입력창입니다.
    AI에게 이렇게 부탁하세요

    출발지 입력에 자동완성 입력창(combobox)을 만들어 줘. 한 글자부터 맞는 도시를 최대 5개 아래 목록에 보여 주고, 방향키로 고른 뒤 Enter로 넣게 해 줘. role="combobox"와 listbox, aria-activedescendant로 화면 읽기 프로그램이 고른 보기를 읽게 하고, 맞는 보기가 없으면 '결과 없음'을 보여 줘.

  • 숫자 증감 버튼 Stepper

    가운데 숫자 양옆의 −·+ 버튼으로 수를 하나씩 줄이고 늘리는 요소입니다.

    직접 해 보기

    1

    수량 1 (1~10)

    이럴 때
    장바구니 수량, 인원 수처럼 작은 정수를 정확히 맞출 때 씁니다.
    다르게 부르는 말
    스테퍼, 수량 조절, 플러스 마이너스 버튼, 숫자 입력, quantity stepper, number input

    헷갈리는 이웃

    • 슬라이더 대략의 크기를 끌어서 맞추면 슬라이더입니다.
    AI에게 이렇게 부탁하세요

    장바구니 상품마다 수량 조절 버튼(stepper)을 넣어 줘. 가운데 숫자 양옆에 −와 + 버튼을 두고, 최소 1·최대 10을 넘지 않게 끝에 닿으면 해당 버튼을 비활성화해 줘. 버튼에 '수량 줄이기', '수량 늘리기' 이름을 붙이고 바뀐 수량을 화면 읽기 프로그램이 읽도록 aria-live로 알려 줘.

이동하는 것

다른 화면·다른 내용으로 옮겨 갑니다.

  • 탭 Tabs

    같은 자리에서 제목을 눌러 서로 다른 내용 묶음으로 바꿔 보는 요소입니다.

    직접 해 보기

    무게 240g, 면 100%

    열린 탭: 상품 정보

    이럴 때
    상품 정보·리뷰·문의처럼 한 페이지 안의 내용을 나눠 보여 줄 때 씁니다. 페이지 주소는 그대로입니다.
    다르게 부르는 말
    탭 메뉴, 탭바, tab, tab bar

    헷갈리는 이웃

    • 세그먼트 컨트롤 같은 내용의 보기 방식만 바꾸면 세그먼트 컨트롤입니다.
    • 아코디언 내용을 위아래로 펼쳐 여러 개를 동시에 볼 수 있으면 아코디언입니다.
    AI에게 이렇게 부탁하세요

    상품 상세 페이지에 '상품 정보·리뷰·문의' 탭(tabs)을 만들어 줘. 고른 탭은 아래 선과 굵은 글자로 표시하고, 탭을 누르면 아래 내용만 바뀌게 해 줘. role="tablist"·"tab"·"tabpanel"과 aria-selected를 쓰고, 좌우 방향키로 탭 사이를 옮기게 해 줘.

  • 아코디언 Accordion

    제목을 누르면 그 아래 내용이 펼쳐지고, 다시 누르면 접히는 목록입니다.

    직접 해 보기

    배송은 얼마나 걸리나요?

    평일 오후 2시 전 주문은 다음 날 도착합니다.

    교환은 어떻게 하나요?

    받은 날부터 7일 안에 마이페이지에서 신청합니다.

    모두 접혀 있습니다.

    이럴 때
    자주 묻는 질문, 긴 설정 목록처럼 제목만 훑고 필요한 것만 펼쳐 볼 때 씁니다.
    다르게 부르는 말
    접고 펼치기, 펼침 메뉴, FAQ 펼치기, collapse, disclosure

    헷갈리는 이웃

    • 탭 탭은 한 번에 한 내용만 보이고, 아코디언은 여러 개를 함께 펼칠 수 있습니다.
    • 드롭다운 메뉴 드롭다운 메뉴는 위에 떠서 고르면 닫히고, 아코디언은 내용이 페이지 안에서 아래로 밀며 펼쳐집니다.
    AI에게 이렇게 부탁하세요

    자주 묻는 질문 목록을 아코디언(accordion)으로 만들어 줘. 질문을 누르면 답이 아래로 펼쳐지고, 오른쪽 화살표가 아래·위로 돌아가게 해 줘. details와 summary 요소를 써서 자바스크립트 없이도 동작하게 하고, 여러 질문을 동시에 펼칠 수 있게 해 줘.

알려 주는 것

지금 상태나 할 일을 화면 위에 띄워 알려 줍니다.

  • 툴팁 Tooltip

    요소에 마우스를 올리거나 키보드로 옮겨 가면 짧은 설명이 잠깐 뜨는 말풍선입니다.

    직접 해 보기

    수수료 3,300원

    i 아이콘에 마우스를 올리거나 눌러 보세요.

    이럴 때
    아이콘 버튼의 이름, 낯선 용어의 한 줄 설명처럼 짧은 글에만 씁니다. 안에 버튼이나 링크를 넣지 않습니다.
    다르게 부르는 말
    말풍선 도움말, 마우스 오버 설명, 호버 설명, tooltip, hint

    헷갈리는 이웃

    • 팝오버 눌러서 열고, 안에 버튼·링크·여러 줄 내용을 담으면 팝오버입니다.
    • 토스트 토스트는 사용자가 한 일의 결과를 알리고, 툴팁은 요소 자체를 설명합니다.
    AI에게 이렇게 부탁하세요

    '수수료' 옆 i 아이콘에 툴팁(tooltip)을 붙여 줘. 마우스를 올리거나 키보드로 옮겨 가면 0.3초 뒤 '결제 금액의 3.3%가 빠집니다'를 아이콘 위에 띄우고, 벗어나거나 Esc를 누르면 닫아 줘. role="tooltip"과 aria-describedby로 연결하고, 휴대폰에서는 눌러서 열고 닫게 해 줘.

  • 팝오버 Popover

    버튼을 누르면 그 옆에 붙어 뜨는 작은 창입니다. 안에 설정·설명·링크를 담을 수 있고, 바깥을 누르면 닫힙니다.

    직접 해 보기

    '공유'를 눌러 보세요.

    이럴 때
    공유 설정, 날짜 고르기처럼 지금 화면을 가리지 않고 잠깐 더 보여 줄 때 씁니다.
    다르게 부르는 말
    말풍선 창, 작은 팝업, 플라이아웃, popover, flyout

    헷갈리는 이웃

    • 툴팁 툴팁은 마우스를 올리면 뜨는 한 줄 설명이고, 안에 누를 것을 넣지 않습니다.
    • 모달 모달은 화면 가운데에 뜨고 닫기 전까지 뒤를 막습니다. 팝오버는 뒤 화면을 계속 쓸 수 있습니다.
    • 드롭다운 메뉴 할 일 목록만 담으면 드롭다운 메뉴입니다.
    AI에게 이렇게 부탁하세요

    '공유' 버튼을 누르면 버튼 아래에 팝오버(popover)를 띄워 줘. 안에는 '링크 복사' 버튼과 '누구나 볼 수 있음' 체크박스를 넣고, 바깥을 누르거나 Esc를 누르면 닫아 줘. 화면 끝에 닿으면 반대쪽으로 뜨게 하고, 닫히면 포커스를 '공유' 버튼으로 돌려줘.

  • 바텀시트 Bottom sheet

    휴대폰 화면 아래에서 위로 올라오는 창입니다. 엄지가 닿기 쉬운 자리에 보기나 할 일을 모아 둡니다.

    직접 해 보기

    정렬

    '정렬' 버튼을 눌러 보세요.

    이럴 때
    모바일에서 정렬 방법 고르기, 공유 대상 고르기처럼 보기 몇 개를 고를 때 씁니다.
    다르게 부르는 말
    바텀 시트, 하단 시트, 아래에서 올라오는 창, 액션 시트, bottom sheet, action sheet

    헷갈리는 이웃

    • 모달 화면 가운데에 뜨면 모달입니다. 바텀시트도 뒤를 막는 방식이면 모달의 한 종류입니다.
    • 드롭다운 메뉴 컴퓨터 화면에서는 같은 목록을 버튼 아래 드롭다운 메뉴로 보여 주는 경우가 많습니다.
    AI에게 이렇게 부탁하세요

    모바일 상품 목록의 '정렬' 버튼을 누르면 바텀시트(bottom sheet)를 띄워 줘. 화면 아래에서 0.25초 동안 올라오고, 위쪽에 끌 수 있는 손잡이와 '추천순·낮은 가격순·리뷰 많은순' 보기를 두어 줘. 고르면 닫히며 목록을 다시 정렬하고, 바깥 어두운 부분을 누르거나 아래로 끌어내리면 닫혀 줘.

  • 토스트 Toast

    방금 한 일의 결과를 화면 아래쪽에 몇 초 동안 띄웠다가 저절로 사라지는 짧은 알림입니다.

    직접 해 보기

    '링크 복사'를 눌러 보세요.

    이럴 때
    '복사했습니다', '저장했습니다'처럼 확인만 하면 되는 결과에 씁니다. '되돌리기' 같은 동작 버튼을 함께 두는 알림은 안드로이드에서 스낵바(Snackbar)라는 별도 구성요소로 구분합니다.
    다르게 부르는 말
    토스트 메시지, 스낵바, 알림 메시지, toast, snackbar

    헷갈리는 이웃

    • 알림 배너 사라지지 않고 사용자가 닫을 때까지 남아야 하는 안내는 알림 배너입니다.
    • 모달 대답을 받아야 하면 모달입니다. 토스트는 대답을 기다리지 않습니다.
    AI에게 이렇게 부탁하세요

    '링크 복사'를 누르면 화면 아래 가운데에 '링크를 복사했습니다' 토스트(toast)를 띄워 줘. 3초 뒤 저절로 사라지고, 그 사이 마우스를 올리면 사라지지 않게 해 줘. role="status"로 화면 읽기 프로그램이 읽게 하고, 여러 번 누르면 겹쳐 쌓지 말고 하나만 다시 띄워 줘.

  • 알림 배너 Alert banner

    페이지 안에 자리를 차지하고 남아 있는 안내 상자입니다. 사용자가 닫거나 문제가 풀릴 때까지 보입니다.

    직접 해 보기

    배너가 보입니다. ×로 닫아 보세요.

    이럴 때
    점검 예정, 결제 실패처럼 이 페이지를 쓰는 동안 계속 알아야 하는 안내에 씁니다.
    다르게 부르는 말
    공지 배너, 안내 상자, 경고 상자, 얼럿, alert, banner, callout

    헷갈리는 이웃

    • 토스트 몇 초 뒤 사라지는 결과 알림은 토스트입니다.
    • 모달 확인을 눌러야 넘어가게 막으면 모달입니다. 배너는 페이지를 계속 쓸 수 있습니다.
    AI에게 이렇게 부탁하세요

    결제 페이지 맨 위에 알림 배너(alert banner)를 넣어 줘. 노란 배경에 느낌표 아이콘, '카드 결제가 실패했습니다. 다른 카드로 다시 시도해 주세요' 문구를 두고, 오른쪽에 닫기(×) 버튼을 붙여 줘. 오류는 role="alert"로 바로 읽히게 하고, 닫아도 다음 방문에 같은 문제가 있으면 다시 보여 줘.

  • 배지 Badge

    아이콘이나 글자 옆에 붙어 개수·상태를 알려 주는 작은 표시입니다. 누를 수 없습니다.

    직접 해 보기

    2

    읽지 않은 알림 2개

    이럴 때
    읽지 않은 알림 수, '새 글'·'품절' 같은 상태를 한눈에 보여 줄 때 씁니다.
    다르게 부르는 말
    뱃지, 숫자 배지, 알림 점, 라벨, 태그, badge, label, tag

    헷갈리는 이웃

    • 필터 칩 눌러서 조건을 켜고 끄면 필터 칩입니다. 배지는 보여 주기만 합니다.
    • 토스트 새 알림이 왔다는 것을 잠깐 띄워 알리면 토스트, 쌓인 개수를 계속 보여 주면 배지입니다.
    AI에게 이렇게 부탁하세요

    상단 메뉴의 종 아이콘 오른쪽 위에 읽지 않은 알림 수 배지(badge)를 붙여 줘. 1~99는 숫자로, 100개부터는 '99+'로 보여 주고, 0이면 배지를 숨겨 줘. 아이콘 버튼의 aria-label에 '알림 3개 읽지 않음'처럼 개수를 함께 넣어 줘.

이럴 때 씁니다
  • 기획서나 요청서에 "저기 누르는 거" 대신 정확한 이름을 쓰고 싶을 때
  • AI에게 화면을 만들어 달라고 할 때 원하는 부품을 한 번에 알아듣게 말하고 싶을 때
  • 새로 온 동료와 디자이너·개발자가 같은 화면을 같은 말로 부르게 하고 싶을 때
사용법
  1. 분류(누르는 것·고르는 것·적는 것·이동하는 것·알려 주는 것)에서 찾거나, 사전 첫 화면 검색에 아는 말을 적습니다.
  2. 용어마다 있는 예시를 직접 눌러 보고, 아래 상태 줄에서 무엇이 바뀌었는지 확인합니다.
  3. 헷갈리는 이웃에서 비슷한 요소와의 차이를 보고, 맞는 용어의 부탁 문장 복사를 눌러 AI나 요청서에 붙여넣습니다.
꼭 알아둘 점
  • 같은 부품을 회사·도구마다 다르게 부르기도 합니다. 용어마다 '다르게 부르는 말'을 함께 적어 두었으니 검색에 그 말을 적어도 찾을 수 있습니다.
  • 부탁 문장에는 키보드·화면 읽기 프로그램으로도 쓸 수 있게 하는 속성(aria 등)까지 들어 있습니다. 문구와 숫자는 내 화면에 맞게 고쳐 씁니다.
  • 예시는 이 페이지 안에서만 움직입니다. 링크·브레드크럼 예시는 실제로 이동하지 않고 어디로 가는지만 보여 줍니다.
자주 묻는 질문
셀렉트와 드롭다운은 같은 말인가요?
둘 다 '드롭다운'이라고 부르는 경우가 많지만 하는 일이 다릅니다. 셀렉트 박스는 값을 고르고 그 값이 칸에 남습니다. 드롭다운 메뉴는 '복제·삭제' 같은 일을 실행하고 닫힙니다.
모달과 팝업은 어떻게 다른가요?
흔히 '팝업'이라고 부르는 화면 위 창 가운데, 닫기 전까지 뒤 화면을 막는 것이 모달입니다. 뒤 화면을 막지 않고 버튼 옆에 붙어 뜨는 작은 창은 팝오버입니다.
체크박스와 토글 스위치는 언제 나눠 쓰나요?
토글 스위치는 설정을 켜고 끄는 요소이고, 체크박스는 항목을 고르거나 푸는 요소이며 일부만 고른 상태도 나타낼 수 있습니다. 흔히 토글은 누르는 즉시 적용하고 체크박스는 '저장'으로 한꺼번에 보내지만, 체크박스도 즉시 적용할 수 있습니다.
토스트와 스낵바는 다른 건가요?
웹에서는 섞어 부르기도 하지만 안드로이드 공식 문서는 둘을 다른 구성요소로 나눕니다. 둘 다 결과를 잠깐 띄웠다 사라지는 알림인데, 스낵바는 '되돌리기' 같은 동작 버튼 하나를 담을 수 있고 토스트는 글자만 보여 줍니다.

광고