신혁이의 컴포넌트 모음집

제목을 누르면 아래 내용이 펼쳐지고 접히는 목록입니다. FAQ처럼 항목이 많을 때 화면을 짧게 유지해 줍니다.

화면 안에 머무르는 알림 상자입니다. 안내나 오류 메시지를 눈에 띄게 보여줄 때 씁니다.

화면을 덮고 뜨는 확인 창입니다. 삭제처럼 되돌릴 수 없는 작업 전에 한 번 더 묻습니다.

영역의 가로세로 비율을 고정합니다. 이미지나 영상이 기기마다 찌그러지지 않게 잡아 줍니다.

첨부한 파일을 이름·형식·크기와 함께 보여주는 카드입니다. 제거 버튼 같은 동작을 붙일 수 있습니다.

사용자 프로필 사진입니다. 사진이 없으면 이니셜로 대체되고, 여러 명을 겹쳐 묶을 수도 있습니다.

상태나 분류를 표시하는 작은 라벨입니다. '신규', '진행중' 같은 짧은 꼬리표에 씁니다.

지금 보고 있는 페이지가 어느 경로에 있는지 보여주는 이동 경로입니다. 상위 단계로 바로 돌아갈 수 있습니다.

메신저 같은 대화 말풍선입니다. 보내는 쪽과 받는 쪽을 색과 정렬로 구분합니다.

가장 기본이 되는 클릭 버튼입니다. 강조 정도와 크기를 옵션으로 바꿔 씁니다.

버튼 여러 개를 하나로 붙여 묶습니다. 정렬 방식 전환처럼 선택지가 나란할 때 좋습니다.

달력에서 날짜를 고르는 컴포넌트입니다. 하루만 고르거나 기간으로 고를 수 있습니다.

제목·설명·본문·버튼을 담는 상자입니다. 화면을 구역으로 나눌 때 가장 많이 쓰입니다.

좌우로 넘겨 보는 슬라이드입니다. 이미지나 카드가 많을 때 자리를 아껴 줍니다.

막대·선·영역 그래프를 그립니다. 색과 범례가 테마에 맞춰 자동으로 맞춰집니다.

켜고 끄는 체크 상자입니다. 약관 동의처럼 여러 개를 동시에 고를 때 씁니다.

내용을 접었다 펴는 가장 단순한 형태입니다. Accordion과 달리 항목이 하나일 때 씁니다.

직접 입력해서 걸러내며 고르는 선택 상자입니다. 항목이 많을 때 드롭다운보다 편합니다.

검색해서 기능을 실행하는 명령 팔레트입니다. 단축키로 띄우는 빠른 검색창에 쓰입니다.

마우스 오른쪽 버튼을 눌렀을 때 나오는 메뉴입니다. 항목별 추가 동작을 숨겨 둘 때 씁니다.

정렬·필터가 되는 데이터 표입니다. 목록 화면에서 많은 행을 다룰 때 씁니다.

버튼을 누르면 달력이 떠서 날짜를 고르는 입력칸입니다. 고른 날짜가 버튼에 바로 표시됩니다.

화면 가운데 떠서 배경을 어둡게 가리는 창입니다. 정보 수정이나 확인처럼 잠깐 집중이 필요한 작업에 씁니다.

화면 가장자리에서 밀려 나오는 패널입니다. 모바일에서 아래에서 올라오는 선택 창에 주로 씁니다.

버튼을 누르면 아래로 펼쳐지는 메뉴입니다. 계정 메뉴나 '더 보기' 버튼처럼 여러 동작을 숨겨 둘 때 씁니다.

목록이나 검색 결과가 비었을 때 보여주는 안내 화면입니다. 왜 비었는지 알려주고 다음 행동을 제안합니다.

라벨·입력칸·설명·오류 메시지를 한 묶음으로 정리하는 폼 조립 부품입니다. 어떤 입력 요소든 같은 모양으로 맞춰 줍니다.

마우스를 올리면 잠깐 뜨는 미리보기 카드입니다. 사용자 이름에 프로필 요약을 붙일 때 씁니다.

한 줄짜리 글자 입력칸입니다. 이름·이메일·검색어처럼 짧은 값을 받을 때 씁니다.

입력칸 앞뒤나 위아래에 아이콘·글자·버튼을 붙여 한 덩어리로 만듭니다. 검색창, 금액 입력, 코드 칸에 씁니다.

인증번호를 한 칸에 한 글자씩 입력하는 칸입니다. 문자·이메일로 받은 6자리 코드 확인 화면에 씁니다.

아이콘·제목·설명·버튼을 한 줄로 정돈한 목록 한 칸입니다. 설정 목록, 알림, 사람 목록의 기본 단위로 씁니다.

키보드 키를 작은 키캡 모양으로 보여줍니다. 단축키를 안내하는 도움말이나 검색창 힌트에 씁니다.

입력 요소 옆에 붙는 이름표입니다. 글자를 눌러도 해당 입력칸이 반응하도록 연결됩니다.

파일·편집·보기처럼 프로그램 상단에 나란히 놓이는 메뉴 막대입니다. 데스크톱 앱 느낌의 화면에 씁니다.

메신저 대화 한 줄을 이루는 묶음입니다. 프로필 사진·이름·말풍선·읽음 표시를 한 세트로 배치합니다.

채팅 메시지 목록의 스크롤을 똑똑하게 다루는 틀입니다. 답변이 흘러나올 때 맨 아래를 따라가고, 사용자가 위로 올리면 자리를 지켜 줍니다.

브라우저 기본 선택 상자에 모양만 입힌 것입니다. 가볍고, 휴대폰에서는 기기 고유의 선택 화면이 뜹니다.

사이트 상단에 두는 메뉴입니다. 항목에 마우스를 올리면 하위 링크가 넓게 펼쳐지는 홈페이지 헤더 메뉴에 씁니다.

긴 목록을 여러 페이지로 나눠 넘겨 보는 페이지 번호 줄입니다. 게시판이나 검색 결과 아래에 씁니다.

버튼을 누르면 바로 옆에 뜨는 작은 창입니다. 배경을 가리지 않아 짧은 설정이나 설명을 보여줄 때 씁니다.

작업이 얼마나 진행됐는지 보여주는 막대입니다. 업로드·설치·설문 진행률 표시에 씁니다.

질문을 한 번에 하나씩 보여주며 답을 모으는 설문 흐름입니다. 온보딩이나 AI에게 작업 조건을 묻는 화면에 씁니다.

여러 선택지 중 하나만 고르는 동그란 버튼 묶음입니다. 요금제·배송 방식처럼 딱 하나를 고를 때 씁니다.

경계선을 끌어 영역 크기를 바꾸는 분할 화면입니다. 사이드바 너비나 편집기·미리보기 비율 조절에 씁니다.

정해진 크기 안에서 내용을 스크롤하는 영역입니다. 브라우저마다 다른 스크롤 막대를 얇고 통일된 모양으로 바꿔 줍니다.

버튼을 누르면 목록이 펼쳐지는 선택 상자입니다. 브라우저 기본 것보다 모양을 자유롭게 꾸밀 수 있어 대부분의 폼에 씁니다.