강조는 primary 하나로 수렴 — 2차는 잉크 반전 표면, 3차는 반투명 워시. loading 스피너와 disabled 상태를 내장합니다.
원하는 모든 것,
나답게 배우다
강조는 단 하나의 오렌지로 수렴하고, 텍스트는 onView 3단 잉크로 층을 나누며, 구획은 그림자 대신 반투명 헤어라인이 맡습니다. 취미부터 커리어까지 — 배움의 경험을 하나의 절제된 시각 언어로 잇습니다.
같은 오렌지가 라이트·다크 캔버스 어디서든 그대로 — 버튼·배지·선택 상태가 전부 한 색을 공유합니다.
01
컴포넌트
버튼·칩·토스트부터 드롭다운·탭·테이블까지 같은 토큰 사전 위에서 동작합니다 — 잉크 반전 2차 버튼, pill 실루엣, 상태 4색과 container 틴트.
완전한 pill 실루엣 — 선택 상태도 같은 오렌지로 표시하고, 긴 라벨은 lineLimit 말줄임으로 접습니다.
닉네임
일러스트 초보
이메일
이메일 주소
이메일을 입력해주세요
라벨이 필드 안에서 떠오르는 다이내믹 라벨 — 헤어라인 보더에 clearable, 에러 상태는 보더와 helper가 함께 붉어집니다.
커스텀 문구가 적용되었습니다
일시적인 오류가 발생했습니다
짙은 잉크 표면의 라운드 필 — 상태 아이콘과 존댓말 안내형 카피("~되었습니다"), 짧은 동사형 액션이 얹힙니다.
새로운 소식을 이메일로 받아보실 수 있습니다
저장이 완료되었습니다
저장 공간이 얼마 남지 않았습니다
결제 수단을 확인해주세요
informative / success / warning / error — 상태 4색이 각자의 옅은 container 틴트를 동반하고, 내장 버튼 옵션을 갖습니다.
현재 페이지는 항상 onView1 — 구획은 그림자 대신 5%·10% 반투명 헤어라인(default · dashed · thick)이 맡습니다.
모
아
재
준
BEST
NEW
LIVE
배지는 확장 팔레트의 보조 악센트까지 허용 — 스켈레톤은 실제 컴포넌트와 동일 사이즈라 로딩 전후 레이아웃이 흔들리지 않습니다.
관심 클래스 알림
새로운 소식이 있을 때 알려드릴게요
모바일에선 바텀 시트, PC에선 모달로 등장하는 적응형 다이얼로그 — Primary 없이 Secondary·Sub 버튼을 쓸 수 없습니다.
renderOpener 아래 8px 오프셋으로 붙는 부착형 패널 — PC에선 드롭다운, 모바일에선 바텀 시트로 등장하고, 패널 구획도 그림자 없는 5%·10% 헤어라인이 맡습니다.
탭 바가 콘텐츠 스크롤을 따라 현재 섹션을 가리키고, 탭을 선택하면 페이지 뷰가 전환됩니다. 활성 탭만 텍스트용 오렌지를 얻습니다.
ScrollTabsLayout은 스크롤 위치와 연동되는 고정 탭, ViewPagerTabGroup은 탭 선택으로 뷰를 스와이프 전환하는 탭 — 두 레이아웃이 같은 탭 바 문법과 콘텐츠 패딩(px 20)을 공유합니다.
loop·snap·panelsPerView로 제어하는 가로 캐러셀 — 다음 패널이 오른쪽에 살짝 걸쳐 보이며 이어짐을 암시하는 카드 레일 패턴의 기반입니다.
| 클래스명 | 카테고리 | 상태 | 수강생 | |
|---|---|---|---|---|
| 아이패드로 시작하는 캐릭터 드로잉 | 드로잉 | 공개 | 1,284 | |
| 오븐 없이 굽는 홈카페 디저트 | 베이킹 | 검수 중 | 862 | |
| 주말 두 시간, 은반지 만들기 | 공예 | 비공개 | — |
행 선택·정렬·필터칩을 갖춘 어드민급 데이터 스위트 — 액션 라벨은 "새로고침"·"추가" 같은 2–4자 동사형, 선택 행은 옅은 primaryContainer 틴트, 좁은 폭에선 표만 가로 스크롤로 접힙니다.
02
화면 스케치
바텀바·FAB·바텀시트가 zIndex 1급 토큰으로 명명된 모바일 앱 우선 시스템 — 탐색 화면 한 장으로 요약합니다.
탐색 화면, 토큰 그대로
흰 캔버스 위에 헤어라인으로만 구획을 나누고, 오렌지는 활성 탭과 플로팅 액션 버튼 두 곳에만 등장합니다. 카드 일러스트의 유채색은 확장 팔레트의 몫입니다.
- 1TopBar emphasis — 메인 상단은 큰 타이틀과 좌우 아이콘 액션 슬롯.
- 2GridList — 브레이크포인트별 열 선언(2→3→4열)으로 접히는 카드 그리드.
- 3카테고리 라벨은 텍스트용 오렌지(onViewPrimary), 크리에이터명은 onView3 — 3단 잉크 위계.
드로잉
아이패드로 시작하는 나만의 캐릭터 드로잉
1.2천 · 모모 작가
베이킹
오븐 없이 굽는 홈카페 디저트의 기본
860 · 소금빵 셰프
공예
주말 두 시간, 은반지 하나를 완성하는 법
640 · 공방 하루
음악
코드 네 개로 완주하는 첫 기타 연주
2.1천 · 리프 선생