이영희
UI/UX 디자이너
새 디자인 시안을 공유했습니다.
List
항목을 세로 목록으로 표시하는 리스트 컴포넌트입니다. 불릿·번호 유형과 인터랙티브 항목을 지원합니다.
기본
list_title · list_meta · list_desc로 항목 내용을 구성합니다.
-
홍길동
-
김철수
-
이영희
<ul class="list">
<li class="list_item">
<span class="avatar color_primary" aria-hidden="true">홍</span>
<div class="list_content">
<span class="list_title">홍길동</span>
<span class="list_meta">프론트엔드 개발자</span>
</div>
</li>
<li class="list_item">
<span class="avatar color_success" aria-hidden="true">김</span>
<div class="list_content">
<span class="list_title">김철수</span>
<span class="list_meta">백엔드 개발자</span>
</div>
</li>
<li class="list_item">
<span class="avatar color_warning" aria-hidden="true">이</span>
<div class="list_content">
<span class="list_title">이영희</span>
<span class="list_meta">UI/UX 디자이너</span>
</div>
</li>
</ul>불릿
class에 list_bullet을 적용합니다. list_bullet-circle · list_bullet-square로 마커 형태를 바꿀 수 있습니다.
- 디자인 토큰 정의
- 컴포넌트 문서화
- 접근성 검토
<ul class="list list_bullet">
<li class="list_item">디자인 토큰 정의</li>
<li class="list_item">컴포넌트 문서화</li>
<li class="list_item">접근성 검토</li>
</ul>불릿 · 본문
title · description prop으로 제목·설명을 함께 표시합니다.
-
HTML 마크업 시맨틱 태그와 ARIA 속성을 사용합니다.
-
SCSS 스타일 OOCSS 패턴으로 구조와 스킨을 분리합니다.
-
접근성 WCAG 2.2 AA 기준을 준수합니다.
<ul class="list list_bullet">
<li class="list_item">
<div class="list_content">
<span class="list_title">HTML 마크업</span>
<span class="list_desc">시맨틱 태그와 ARIA 속성을 사용합니다.</span>
</div>
</li>
<li class="list_item">
<div class="list_content">
<span class="list_title">SCSS 스타일</span>
<span class="list_desc">OOCSS 패턴으로 구조와 스킨을 분리합니다.</span>
</div>
</li>
<li class="list_item">
<div class="list_content">
<span class="list_title">접근성</span>
<span class="list_desc">WCAG 2.2 AA 기준을 준수합니다.</span>
</div>
</li>
</ul>불릿 변형
circle · square 마커와 중첩 목록을 지원합니다.
- 원형 마커 항목 A
- 원형 마커 항목 B
- 사각 마커 항목 A
- 사각 마커 항목 B
- 레이아웃
- Container
- Grid
- 기본 요소
- Button
- Typography
<!-- list_bullet -->
<ul class="list list_bullet list_bullet-circle">
<li class="list_item">원형 마커 항목 A</li>
<li class="list_item">원형 마커 항목 B</li>
</ul>
<!-- list_bullet -->
<ul class="list list_bullet list_bullet-square">
<li class="list_item">사각 마커 항목 A</li>
<li class="list_item">사각 마커 항목 B</li>
</ul>
<!-- list_bullet -->
<ul class="list list_bullet">
<li class="list_item">레이아웃
<ul class="list list_bullet">
<li class="list_item">Container</li>
<li class="list_item">Grid</li>
</ul>
</li>
<li class="list_item">기본 요소
<ul class="list list_bullet">
<li class="list_item">Button</li>
<li class="list_item">Typography</li>
</ul>
</li>
</ul>번호
tag="ol"과 list_ordered 클래스로 순서 목록을 만듭니다.
- 요구사항 분석
- 와이어프레임 작성
- 프로토타입 검증
- 개발 및 배포
<ol class="list list_ordered">
<li class="list_item">요구사항 분석</li>
<li class="list_item">와이어프레임 작성</li>
<li class="list_item">프로토타입 검증</li>
<li class="list_item">개발 및 배포</li>
</ol>번호 변형
list_ordered-alpha · list_ordered-roman · list_ordered-upper-alpha · list_ordered-upper-roman으로 번호 형식을 변경합니다.
- 첫 번째 옵션
- 두 번째 옵션
- 세 번째 옵션
- 서론
- 본론
- 결론
- 항목 A
- 항목 B
- Chapter I
- Chapter II
-
프로젝트 설정 저장소 클론 및 의존성 설치
-
개발 서버 실행 pnpm dev로 로컬 미리보기
- 터미널에서 프로젝트 폴더 이동
- pnpm install 실행
- pnpm dev 실행
-
빌드 pnpm build로 html/ 출력
<!-- list_ordered -->
<ol class="list list_ordered list_ordered-alpha">
<li class="list_item">첫 번째 옵션</li>
<li class="list_item">두 번째 옵션</li>
<li class="list_item">세 번째 옵션</li>
</ol>
<!-- list_ordered -->
<ol class="list list_ordered list_ordered-roman">
<li class="list_item">서론</li>
<li class="list_item">본론</li>
<li class="list_item">결론</li>
</ol>
<!-- list_ordered -->
<ol class="list list_ordered list_ordered-upper-alpha">
<li class="list_item">항목 A</li>
<li class="list_item">항목 B</li>
</ol>
<!-- list_ordered -->
<ol class="list list_ordered list_ordered-upper-roman">
<li class="list_item">Chapter I</li>
<li class="list_item">Chapter II</li>
</ol>
<!-- list_ordered -->
<ol class="list list_ordered">
<li class="list_item">
<div class="list_content">
<span class="list_title">프로젝트 설정</span>
<span class="list_desc">저장소 클론 및 의존성 설치</span>
</div>
</li>
<li class="list_item">
<div class="list_content">
<span class="list_title">개발 서버 실행</span>
<span class="list_desc">pnpm dev로 로컬 미리보기</span>
</div>
<ol class="list list_ordered list_ordered-alpha">
<li class="list_item">터미널에서 프로젝트 폴더 이동</li>
<li class="list_item">pnpm install 실행</li>
<li class="list_item">pnpm dev 실행</li>
</ol>
</li>
<li class="list_item">
<div class="list_content">
<span class="list_title">빌드</span>
<span class="list_desc">pnpm build로 html/ 출력</span>
</div>
</li>
</ol>번호 · 계층
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
- 피드백
<!-- list_ordered -->
<ol class="list list_ordered list_ordered-outline">
<li class="list_item">1단계 — 요구사항 정의</li>
<li class="list_item">설계
<ol class="list list_ordered list_ordered-outline">
<li class="list_item">정보 구조</li>
<li class="list_item">UI 설계
<ol class="list list_ordered list_ordered-outline">
<li class="list_item">와이어프레임</li>
<li class="list_item">프로토타입</li>
</ol>
</li>
</ol>
</li>
<li class="list_item">개발 및 배포</li>
</ol>
<!-- list_ordered -->
<ol class="list list_ordered list_ordered-dash">
<li class="list_item">1단계 — 환경 구성</li>
<li class="list_item">개발
<ol class="list list_ordered list_ordered-dash">
<li class="list_item">컴포넌트 구현</li>
<li class="list_item">문서화
<ol class="list list_ordered list_ordered-dash">
<li class="list_item">API 표</li>
<li class="list_item">데모 예제</li>
</ol>
</li>
</ol>
</li>
<li class="list_item">QA 및 릴리스</li>
</ol>
<!-- list_ordered -->
<ol class="list list_ordered list_ordered-depth">
<li class="list_item">레이아웃</li>
<li class="list_item">기본 요소
<ol class="list list_ordered list_ordered-depth">
<li class="list_item">Button</li>
<li class="list_item">Form
<ol class="list list_ordered list_ordered-depth">
<li class="list_item">Input</li>
<li class="list_item">Select</li>
</ol>
</li>
</ol>
</li>
<li class="list_item">피드백</li>
</ol>불릿 · 링크
불릿 목록에서도 li 안에 a.list_link를 사용합니다.
<ul class="list list_bullet">
<li class="list_item">
<a href="components/button.html" class="list_link">
<span class="list_title">Button</span>
</a>
</li>
<li class="list_item">
<a href="components/typography.html" class="list_link">
<span class="list_title">Typography</span>
</a>
</li>
<li class="list_item">
<a href="components/icon.html" class="list_link">
<span class="list_title">Icon</span>
</a>
</li>
</ul>테두리
bordered prop으로 각 항목에 테두리를 적용합니다.
-
알림 설정 이메일 및 푸시 알림을 관리합니다.
-
프로필 편집 이름, 사진, 소개를 변경합니다.
-
보안 비밀번호 및 2단계 인증을 설정합니다.
<ul class="list list_bordered">
<li class="list_item">
<div class="list_content">
<span class="list_title">알림 설정</span>
<span class="list_desc">이메일 및 푸시 알림을 관리합니다.</span>
</div>
</li>
<li class="list_item">
<div class="list_content">
<span class="list_title">프로필 편집</span>
<span class="list_desc">이름, 사진, 소개를 변경합니다.</span>
</div>
</li>
<li class="list_item">
<div class="list_content">
<span class="list_title">보안</span>
<span class="list_desc">비밀번호 및 2단계 인증을 설정합니다.</span>
</div>
</li>
</ul>링크
페이지 이동이 필요한 항목은 a.list_link를 배치합니다. split prop으로 항목 구분선을 적용합니다.
<ul class="list list_divider">
<li class="list_item">
<a href="components/button.html" class="list_link">
<div class="list_content">
<span class="list_title">대시보드</span>
</div>
<span class="list_action color_muted" aria-hidden="true">›</span>
</a>
</li>
<li class="list_item">
<a href="components/card.html" class="list_link">
<div class="list_content">
<span class="list_title">프로젝트</span>
</div>
<span class="list_action color_muted" aria-hidden="true">›</span>
</a>
</li>
<li class="list_item">
<a href="getting-started.html" class="list_link">
<div class="list_content">
<span class="list_title">설정</span>
</div>
<span class="list_action color_muted" aria-hidden="true">›</span>
</a>
</li>
</ul>버튼
같은 페이지 내 액션은 button.list_link를 사용합니다. button 안에는 phrasing content만 넣고, 본문 영역은 span.list_content로 감쌉니다.
<ul class="list list_bordered">
<li class="list_item">
<button type="button" class="list_link">
<span class="avatar color_primary" aria-hidden="true">홍</span>
<span class="list_content">
<span class="list_title">홍길동</span>
<span class="list_meta">메시지 보내기</span>
</span>
<span class="list_action color_muted" aria-hidden="true">›</span>
</button>
</li>
<li class="list_item">
<button type="button" class="list_link">
<span class="avatar color_success" aria-hidden="true">김</span>
<span class="list_content">
<span class="list_title">김철수</span>
<span class="list_meta">메시지 보내기</span>
</span>
<span class="list_action color_muted" aria-hidden="true">›</span>
</button>
</li>
</ul>카드 혼합
list_cards 클래스로 li 안에 card를 배치합니다.
<ul class="list list_cards">
<li class="list_item">
<a href="components/card.html" class="card card_shadow card_clickable card_horizontal">
<div class="card_media card_media-placeholder" role="img" aria-label="프로젝트 썸네일">
<svg class="icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" aria-hidden="true">
<rect x="3" y="3" width="18" height="18" rx="2"/>
<circle cx="8.5" cy="8.5" r="1.5"/>
<path d="M21 15l-5-5L5 21"/>
</svg>
</div>
<div class="card_inner">
<div class="card_header">
<div class="card_header-main">
<h3 class="card_title">프로젝트 Alpha</h3>
<p class="card_subtitle">진행 중 · 2일 전</p>
</div>
</div>
<div class="card_body">
디자인 시스템 구축 및 컴포넌트 라이브러리 개발
</div>
</div>
</a>
</li>
<li class="list_item">
<article class="card card_shadow">
<div class="card_header">
<div class="card_header-main">
<div class="card_header-row">
<span class="avatar color_warning" aria-hidden="true">이</span>
<div>
<h3 class="card_title">이영희</h3>
<p class="card_subtitle">UI/UX 디자이너</p>
</div>
</div>
</div>
</div>
<div class="card_body">
<p class="list_desc">새 디자인 시안을 공유했습니다.</p>
</div>
<div class="card_footer card_footer-between">
<span class="color_muted size_sm">10분 전</span>
<a href="#" class="link color_primary size_sm">보기</a>
</div>
</article>
</li>
<li class="list_item">
<a href="components/list.html" class="card card_accent color_primary card_clickable">
<div class="card_body">
<p class="card_title" style="margin-bottom: 0.25rem;">알림</p>
<p class="list_desc">리스트와 카드를 함께 사용하는 패턴입니다.</p>
</div>
</a>
</li>
</ul>정의 목록
variant="definition"으로 dl · list_definition을 적용합니다. title · description prop이 있으면 ListItem이 dt · dd로 직접 렌더됩니다.
- OOCSS
- 구조와 스킨을 분리해 클래스를 조합하는 CSS 방법론입니다.
- Design Token
- 색상·간격·타이포 등 디자인 값을 변수로 정의한 것입니다.
- WCAG
- 웹 콘텐츠 접근성 지침으로, 대비·키보드 사용성 등을 다룹니다.
<dl class="list list_definition" style="max-width: 28rem; width: 100%;">
<dt class="list_title">OOCSS</dt>
<dd class="list_desc">구조와 스킨을 분리해 클래스를 조합하는 CSS 방법론입니다.</dd>
<dt class="list_title">Design Token</dt>
<dd class="list_desc">색상·간격·타이포 등 디자인 값을 변수로 정의한 것입니다.</dd>
<dt class="list_title">WCAG</dt>
<dd class="list_desc">웹 콘텐츠 접근성 지침으로, 대비·키보드 사용성 등을 다룹니다.</dd>
</dl>정의 목록 · 인라인
layout="inline"으로 제목·내용을 가로 배치합니다. 너비는 콘텐츠에 맞게 줄어듭니다.
- OOCSS
- 구조와 스킨을 분리해 클래스를 조합하는 CSS 방법론입니다.
- Design Token
- 색상·간격·타이포 등 디자인 값을 변수로 정의한 것입니다.
- WCAG
- 웹 콘텐츠 접근성 지침으로, 대비·키보드 사용성 등을 다룹니다.
<dl class="list list_definition list_inline" style="--list-inline-label-width: auto; --list-inline-gap: var(--space-md);">
<dt class="list_title">OOCSS</dt>
<dd class="list_desc">구조와 스킨을 분리해 클래스를 조합하는 CSS 방법론입니다.</dd>
<dt class="list_title">Design Token</dt>
<dd class="list_desc">색상·간격·타이포 등 디자인 값을 변수로 정의한 것입니다.</dd>
<dt class="list_title">WCAG</dt>
<dd class="list_desc">웹 콘텐츠 접근성 지침으로, 대비·키보드 사용성 등을 다룹니다.</dd>
</dl>정의 목록 · 값 우측 정렬
descAlign="right"로 dd(설명) 텍스트를 우측 정렬합니다. 주문 요약·금액 표시 등에 적합합니다.
- 주문번호
- ORD-2024-0815
- 결제금액
- ₩42,000
- 배송지
- 서울특별시 강남구 테헤란로 123
<dl class="list list_definition list_inline list_block list_compact list_desc-right" style="--list-inline-label-width: auto; --list-inline-gap: 1rem;">
<dt class="list_title">주문번호</dt>
<dd class="list_desc">ORD-2024-0815</dd>
<dt class="list_title">결제금액</dt>
<dd class="list_desc">₩42,000</dd>
<dt class="list_title">배송지</dt>
<dd class="list_desc">서울특별시 강남구 테헤란로 123</dd>
</dl>클래스 · 속성
| 클래스 | 설명 |
|---|---|
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 형식 |
list_ordered-depth |
뎁스별 번호 형식 자동 전환 (1 → a → i → 1 …) |
list_definition |
정의 목록 (dl) — dt · dd 용어-설명 쌍 |
list_inline · list_block · list_desc-right |
인라인 배치 · 전체 너비 · dd 우측 정렬 |
list_item · list_content · list_title · list_desc · list_meta |
항목 콘텐츠 파트 |
list_extra · list_action |
우측 영역 |
list_interactive · list_link |
클릭 가능 항목 · 링크·버튼 |
디자인 토큰
| 토큰 | 기본값 | 설명 |
|---|---|---|
--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) | 인라인 정의 목록 열 너비 · 열 간격 |