이영희
UI/UX 디자이너
새 디자인 시안을 공유했습니다.
List
항목을 세로 목록으로 표시하는 리스트 컴포넌트입니다. 불릿·번호 유형과 인터랙티브 항목을 지원합니다.
기본
list_title · list_meta · list_desc로 항목 내용을 구성합니다.
- 홍길동
- 김철수
- 이영희
불릿
class에 list_bullet을 적용합니다. list_bullet-circle · list_bullet-square로 마커 형태를 바꿀 수 있습니다.
- 디자인 토큰 정의
- 컴포넌트 문서화
- 접근성 검토
불릿 · 본문
title · description prop으로 제목·설명을 함께 표시합니다.
- HTML 마크업시맨틱 태그와 ARIA 속성을 사용합니다.
- SCSS 스타일OOCSS 패턴으로 구조와 스킨을 분리합니다.
- 접근성WCAG 2.2 AA 기준을 준수합니다.
불릿 변형
circle · square 마커와 중첩 목록을 지원합니다.
- 원형 마커 항목 A
- 원형 마커 항목 B
- 사각 마커 항목 A
- 사각 마커 항목 B
- 레이아웃
- Container
- Grid
- 기본 요소
- Button
- Typography
번호
tag="ol"과 list_ordered 클래스로 순서 목록을 만듭니다.
- 요구사항 분석
- 와이어프레임 작성
- 프로토타입 검증
- 개발 및 배포
번호 변형
list_ordered-alpha · list_ordered-roman · list_ordered-upper-alpha · list_ordered-upper-roman으로 번호 형식을 변경합니다.
- 첫 번째 옵션
- 두 번째 옵션
- 세 번째 옵션
- 서론
- 본론
- 결론
- 항목 A
- 항목 B
- Chapter I
- Chapter II
- 프로젝트 설정저장소 클론 및 의존성 설치
- 터미널에서 프로젝트 폴더 이동
- pnpm install 실행
- pnpm dev 실행
- 빌드pnpm build로 out/ 출력
번호 · 계층
list_ordered-outline(1.1) · list_ordered-dash(1-1)은 뎁스마다 번호가 이어집니다. list_ordered-depth는 뎁스별로 1 → a → i 형식이 자동 전환됩니다.
- 1단계 — 요구사항 정의
- 설계
- 정보 구조
- UI 설계
- 와이어프레임
- 프로토타입
- 개발 및 배포
- 1단계 — 환경 구성
- 개발
- 컴포넌트 구현
- 문서화
- API 표
- 데모 예제
- QA 및 릴리스
- 레이아웃
- 기본 요소
- Button
- Form
- Input
- Select
- 피드백
불릿 · 링크
불릿 목록에서도 li 안에 a.list_link를 사용합니다.
테두리
bordered prop으로 각 항목에 테두리를 적용합니다.
- 알림 설정이메일 및 푸시 알림을 관리합니다.
- 프로필 편집이름, 사진, 소개를 변경합니다.
- 보안비밀번호 및 2단계 인증을 설정합니다.
링크
페이지 이동이 필요한 항목은 a.list_link를 배치합니다. split prop으로 항목 구분선을 적용합니다.
버튼
같은 페이지 내 액션은 button.list_link를 사용합니다. button 안에는 phrasing content만 넣고, 본문 영역은 span.list_content로 감쌉니다.
카드 혼합
list_cards 클래스로 li 안에 card를 배치합니다.
정의 목록
variant="definition"으로 dl · list_definition을 적용합니다. title · description prop이 있으면 ListItem이 dt · dd로 직접 렌더됩니다.
- OOCSS
- 구조와 스킨을 분리해 클래스를 조합하는 CSS 방법론입니다.
- Design Token
- 색상·간격·타이포 등 디자인 값을 변수로 정의한 것입니다.
- WCAG
- 웹 콘텐츠 접근성 지침으로, 대비·키보드 사용성 등을 다룹니다.
정의 목록 · 인라인
layout="inline"으로 제목·내용을 가로 배치합니다. 너비는 콘텐츠에 맞게 줄어듭니다.
- OOCSS
- 구조와 스킨을 분리해 클래스를 조합하는 CSS 방법론입니다.
- Design Token
- 색상·간격·타이포 등 디자인 값을 변수로 정의한 것입니다.
- WCAG
- 웹 콘텐츠 접근성 지침으로, 대비·키보드 사용성 등을 다룹니다.
정의 목록 · 값 우측 정렬
descAlign="right"로 dd(설명) 텍스트를 우측 정렬합니다. 주문 요약·금액 표시 등에 적합합니다.
- 주문번호
- ORD-2024-0815
- 결제금액
- ₩42,000
- 배송지
- 서울특별시 강남구 테헤란로 123
API · List Props
| Prop | 타입 | 기본값 | 설명 |
|---|---|---|---|
bordered | boolean | false | 테두리 (list_bordered) |
split | boolean | false | 항목 구분선 (list_divider) |
block | boolean | false | 부모 너비 100% (list_block, inline 레이아웃에서 auto 너비 덮어씀) |
size | 'md' | 'compact' | md | compact는 list_compact |
variant | 'default' | 'bullet' | 'ordered' | 'definition' | default | 목록 유형 — bullet · ordered · definition 스킨 클래스 자동 적용 |
tag | 'ul' | 'ol' | 'dl' | 'div' | variant 기준 | 루트 태그 — 미지정 시 variant에 따라 ul · ol · dl 결정, div는 role="list" |
layout | 'block' | 'inline' | block | block은 전체 너비 세로 배치, inline은 너비 auto + 제목·내용 가로 배치 (list_inline) |
inlineLabelWidth | string | — | 인라인 정의 목록 dt 열 너비 (layout="inline"일 때, --list-inline-label-width) |
inlineGap | string | — | 인라인 정의 목록 dt · dd 열 간격 (layout="inline"일 때, --list-inline-gap) |
descAlign | 'left' | 'right' | left | 정의 목록 dd 텍스트 정렬 (variant="definition"일 때, right는 list_desc-right) |
className | string | — | list 루트에 추가 클래스 (list_bullet 등 스킨 조합) |
API · ListItem Props
| Prop | 타입 | 기본값 | 설명 |
|---|---|---|---|
title | string | — | 항목 제목 (list_title) |
description | string | — | 설명 (list_desc) |
meta | string | — | 보조 메타 (list_meta) |
tag | 'auto' | 'li' | 'dt' | 'dd' | auto | 항목 태그 — auto는 ul/ol→li, div→div+role=listitem, dl+title·description→dt·dd |
className | string | — | 항목(li · dt · dd)에 추가 클래스 |
API · List Children
| Children | 설명 |
|---|---|
children | ListItem 또는 목록 콘텐츠를 전달하는 React children |
API · ListItem Children
| Children / Prop | 설명 |
|---|---|
prefix | 앞쪽에 표시할 아바타·아이콘 등의 React 노드 |
title | 항목 제목 (list_title) |
description | 설명 (list_desc) |
meta | 보조 메타 (list_meta) |
extra | 우측 보조 콘텐츠로 전달하는 React 노드 (list_extra) |
actions | 우측 액션으로 전달하는 React 노드 (list_action) |
children | title·description 대신 표시할 React children |
클래스 · 속성
List · ListItem이 렌더하는 OOCSS 클래스입니다. className으로 스킨 클래스를 조합합니다.
| 클래스 | 설명 |
|---|---|
list | 리스트 루트 |
list_bordered · list_divider · list_compact | 스타일 변형 |
list_bullet · list_bullet-circle · list_bullet-square | 불릿 목록 (ul) |
list_ordered · list_ordered-alpha · list_ordered-roman · list_ordered-upper-alpha · list_ordered-upper-roman | 번호 목록 (ol) — 소문자·대문자 알파벳·로마 숫자 |
list_ordered-outline · list_ordered-dash | 계층 번호 — 뎁스별 1.1 · 1-1 형식 (중첩 ol에 동일 클래스 적용) |
list_ordered-depth | 뎁스별 번호 형식 자동 전환 (1 → a → i → 1 …) |
list_definition | 정의 목록 (dl) — dt · dd 용어-설명 쌍 |
list_inline | 인라인 배치 — width auto, 제목·내용 가로 (layout="inline") |
list_block | 부모 너비 100% (block prop) |
list_desc-right | 정의 목록 dd 우측 정렬 (descAlign="right") |
list_item | 항목 (li · div[role=listitem]) |
list_content · list_title · list_desc · list_meta | 항목 콘텐츠 파트 |
list_extra · list_action | 우측 영역 |
list_interactive | 클릭 가능 항목 |
list_link | 항목 링크·버튼 — data-ripple 로 파장 |
data-ripple | 클릭 파장 활성. data-ripple="surface"는 절대 위치 보조 버튼용 |
data-ripple="false" | 해당 요소 ripple 비활성 |
data-no-ripple | 하위 전체 ripple 비활성 |
디자인 토큰
| 토큰 | 기본값 | 설명 |
|---|---|---|
--list-gap | var(--space-xs) | 항목 간격 |
--list-item-padding-y · --list-item-padding-x | 0.65rem · 1rem | 항목 패딩 |
--list-title-size · --list-desc-size · --list-meta-size | — | 텍스트 크기 |
--list-inline-label-width · --list-inline-gap | 8rem · var(--space-md) | 인라인 정의 목록 열 너비 · 열 간격 |