컴포넌트 공부하기
이름을 알면 원하는 화면을 더 정확하게 만들 수 있어요.
홈페이지에 자주 쓰는 UI 요소 10가지, 움직임으로 알아보세요.
화면에 보이는 예제가 자동으로 반복돼요. 동작 사이에는 내용을 읽을 수 있는 여유를 두었습니다.
아코디언
Accordion필요한 내용만 펼쳐서 읽기
자주 묻는 질문, 이용 안내처럼 내용은 많지만 한 번에 모두 보여줄 필요가 없을 때 사용해요.
커서 클릭 → 답변 펼치기 → 잠시 읽기 → 접기
첫 항목을 열어두면 숨겨진 내용이 있다는 것을 쉽게 알 수 있어요.
멀티셀렉트
Multi-select여러 가지를 한꺼번에 선택하기
관심 분야나 검색 필터처럼 두 개 이상을 동시에 고를 수 있을 때 사용해요.
항목 선택 → 추가 선택 → 선택 개수 변화
하나만 고르는 드롭다운과 달라요. 여러 개 선택할 수 있다고 알려주세요.
탭
Tabs같은 공간에서 내용 바꾸기
상품의 상세정보·리뷰·배송 안내처럼 서로 관련 있는 내용을 나눠 보여줄 때 사용해요.
탭 선택 → 선택 배경 이동 → 내용 전환
선택된 탭은 색상뿐 아니라 배경과 굵기로도 구분해주세요.
토글
Toggle / Switch설정을 켜거나 끄기
알림이나 다크 모드처럼 두 가지 상태 중 하나를 정하고 즉시 적용할 때 사용해요.
스위치 클릭 → ON 유지 → OFF로 전환
눌렀을 때 바로 반영되는 설정에 적합해요. 제출 동의에는 체크박스를 사용해요.
슬라이더
Slider범위 안에서 값을 조절하기
볼륨, 밝기, 가격 범위처럼 연속적인 값을 빠르게 조절할 때 사용해요.
손잡이 이동 → 숫자 변화 → 시작 값으로 복귀
정확한 숫자가 중요하다면 숫자를 입력할 수 있는 방법도 함께 제공해요.
드롭다운
Dropdown / Select목록에서 하나 선택하기
정렬 기준, 지역, 카테고리처럼 정해진 여러 선택지 중 하나를 고를 때 사용해요.
메뉴 열기 → 최신순 선택 → 결과 전환
선택지는 짧고 명확하게 적고, 현재 선택한 값이 계속 보이게 해주세요.
모달
Modal / Dialog중요한 작업에 집중하기
작업 확인이나 상세 설정처럼 현재 화면 위에서 잠깐 집중해야 할 때 사용해요.
미리보기 열기 → 안내 읽기 → 창 닫기
닫는 방법을 명확히 하고, 닫은 뒤에는 원래 누른 버튼으로 초점이 돌아와야 해요.
토스트
Toast작업 결과를 짧게 알려주기
저장 완료처럼 다음 행동을 막지 않고 결과만 알려주고 싶을 때 사용해요.
저장 클릭 → 완료 메시지 → 자동 사라짐
실패나 중요한 안내는 금방 사라지는 메시지만으로 전달하지 마세요.
페이지네이션
Pagination긴 목록을 여러 페이지로 나누기
게시글이나 검색 결과가 많을 때 일부씩 나눠서 보여주고 이동할 수 있게 해요.
2페이지 → 3페이지 → 첫 페이지로 복귀
현재 위치를 알려주고, 첫 페이지의 이전 버튼은 비활성화해주세요.
입력 폼
Form & Validation정보를 입력받고 오류 안내하기
회원가입이나 문의처럼 사용자가 내용을 입력하고 제출해야 할 때 사용해요.
입력 → 오류 안내 → 수정 → 신청 완료
예시 문구만 두지 말고, 입력칸 위에 항상 보이는 이름표를 붙여주세요.