LuoDesign

그저 넣기만 하면 되는 바닐라 CSS/JS 디자인 라이브러리 !
Vanilla CSS로 구축한 반응형, 글래스모피즘 디자인 시스템이에요.
PWA·웹·앱 어디서나 일관된 경험을 제공하는 데 초점을 두고 있어요.

기반

컬러 토큰

각 항목은 클릭해서 복사할 수 있어요.
테마 색상인 바이올렛은 아이덴티티, 프라이머리 액션에 사용해요. 그레이는 본문, 제목, 배경, 테두리 등 UI 전반에 걸쳐 다양한 톤으로 활용해요. 시맨틱 컬러는 상태와 피드백을 전달하는 데 사용해요.

바이올렛
복사 완료 !
50 · #f5f3ff
복사 완료 !
100 · #ede9fe
복사 완료 !
200 · #ddd6fe
복사 완료 !
300 · #a78bfa
복사 완료 !
400 · #8b5cf6
복사 완료 !
500 · #7c3aed
복사 완료 !
600 · #5b21b6
--ld-violet-500: #7c3aed; --ld-violet-400: #8b5cf6; --ld-violet-100: #ede9fe; --ld-violet-50 : #f5f3ff;
그레이
복사 완료 !
100 · 페이지 배경
복사 완료 !
200 · 테두리
복사 완료 !
300 · 구분선
복사 완료 !
400 · 비활성
복사 완료 !
500 · 플레이스홀더
복사 완료 !
600 · 아이콘
복사 완료 !
700 · 보조 텍스트
복사 완료 !
800 · 본문
복사 완료 !
900 · 제목
시맨틱
복사 완료 !
Red · #f04452
복사 완료 !
Green · #04c065
복사 완료 !
Amber · #f59e0b
기반

타이포그래피

Pretendard를 디스플레이·UI 텍스트 모두에 사용해요.

.ld-display / 40px 400
디스플레이 헤딩
.ld-t1 / 32px 700
T1. 페이지 제목
.ld-t2 / 24px 700
T2. 섹션 제목
.ld-t3 / 20px 700
T3. 카드 제목
.ld-t4 / 18px 700
T4. 서브섹션
.ld-body-lg / 17px
Body Large. 긴 글 읽기에 최적화된 큰 본문 텍스트.
.ld-body / 15px
Body. 기본 단락 텍스트. 모바일 가독성 최적화.
.ld-body-sm / 13px
Body Small. 캡션, 도움말, 타임스탬프, 메타데이터.
.ld-label-lg / 15px 600
Label Large. 리스트 로우 제목
.ld-label / 13px 600
Label. 태그, 버튼 SM 텍스트
.ld-label-sm / 11px 700
Label Small. 섹션 헤더
기반

모션

부드러운 모션을 위해 스프링과 말랑말랑(squish) 효과를 사용해요.

--spring
cubic-bezier(0.2, 0.8, 0.4, 1)
스프링
--spring-bounce
cubic-bezier(0.175, 0.885, 0.32, 1.275)
스프링 + 바운스
.ld-squish
scale(0.94) brightness(0.92)
버튼 등 동적 요소에 추가
컴포넌트

버튼/FAB

글래스모피즘은 이용자 경험을 해치지 않도록 제한적으로 사용해요. 버튼은 가독성을 높이기 위해 xl 스타일에서만 글로우와 그라데이션이 적용돼요.

변형
크기
전체 너비 (하단 CTA)
FAB
컴포넌트

칩/배지

알약 형태의 칩과 배지는 상태 또는 속성을 나타내는 데 사용돼요.

칩
보라 중립 성공 오류 경고 아웃라인
MD 사이즈 SM 사이즈 인증완료
배지
PRO 활성 오류 대기중 NEW 3
컴포넌트

카드/리스트 로우

카드와 리스트 로우는 정보를 그룹화하고 계층 구조를 제공하는 데 사용돼요.

헤더가 있는 카드
내 포트폴리오
A
Apple Inc.
AAPL · 5주
+₩42,000
N
Netflix
NFLX · 2주
-₩18,500
G
Google
GOOGL · 1주
리스트 로우
쿠팡 로켓배송
어제 · 생활용품
관리비
3일 전 · 자동이체
-₩85,000
컴포넌트

텍스트 필드

검색, 폼 입력 등 다양한 시나리오에 맞게 사용할 수 있어요.

컴포넌트

컨트롤

야간 알림
00시~06시 사이에 광고성 알림을 받아요.
제3자 개인정보 공유
수량
1
컴포넌트

세그먼트 컨트롤

탭을 클릭하면 인디케이터가 바운스 효과와 함께 슬라이딩되며 활성 탭을 강조 표시해요.

전체
오늘
이번 주
레이아웃

앱 헤더

스크롤에 따라 글래스모피즘이 적용되고, 투명도가 조절돼요.

주식 잔고
총 자산 가치
₩1,284,000
A
Apple Inc.
AAPL · 5주
+₩42,000
N
Netflix
NFLX · 2주
-₩18,500
G
Google
GOOGL · 1주
+₩9,200
S
Samsung
005930 · 10주
-₩5,000
레이아웃

내비게이션

알약 형태의 글래스모피즘 내비게이션으로 거리감과 깊이를 표현해요.

홈
3
자산
결제
마이
레이아웃

웹 헤더

웹 환경에서는 헤더를 통해서 브랜드를 표현하고 주요 내비게이션을 제공해요.

LuoDesign
레이아

웹 푸터

LuoDesign
그저 넣기만 하면 되는 바닐라 CSS/JS 디자인 라이브러리 !
리소스
문서GitHubFigma
© 2026 d0ulLabs. MIT License.
오버레이

하단 시트

하단에서부터 나타나는 시트로, 주요 행동을 유도하거나 간단한 정보를 보여줄 때 사용해요. 배경을 어둡게 처리하여 시트에 집중할 수 있도록 도와줘요.

이메일 전송
아래 내용을 확인하고 메일을 보내주세요.
받는 분이도울
메일 주소support@pcor.me
오버레이

토스트

간단한 메시지를 잠시 보여주는 토스트로, 작업의 결과나 상태를 알릴 때 사용해요. 화면 하단에 나타나며 자동으로 사라져요.

패턴

스퀴시 인터랙션

.ld-squish를 상호작용 가능한 요소에 추가해서 누르는 동안 살짝 눌리는 효과를 줄 수 있어요. 버튼, 카드, 리스트 로우 등 다양한 컴포넌트에 적용 가능해요.

카드 스퀴시
카드가 말랑말랑 -!
하나 더 !
스퀴시 효과는 이렇게 간단하게 !
리스트 1
리스트 로우에도 적용 가능해요.
리스트 2
<div class="ld-card ld-squish">카드 콘텐츠</div> <button class="ld-btn ld-btn-primary ld-btn-lg">버튼 (기본 내장)</button> <span class="ld-chip ld-chip-violet ld-squish">칩</span> .ld-squish { transition: transform 0.15s var(--spring), filter 0.15s; } .ld-squish:active { transform: scale(0.94); filter: brightness(0.92); }
패턴

채팅 입력

채팅 환경에서 사용할 수 있는 입력 바 패턴이에요. 텍스트 영역과 전송 버튼으로 구성되어 있으며, 글자를 입력하면 TextArea의 높이가 자동으로 조절돼요.

패턴

데모

LuoDesign 컴포넌트를 통해 만든 랜딩 페이지 샘플이에요.

LuoDesign
LuoDesign 출시 !
꿈을 향해
새로운 마음으로

LuoDesign을 통해서 간단하게 미려한 웹 페이지를 만들어봣어요 !

고품질 컴포넌트
컴포넌트를 조합하기만 해도 멋진 웹 페이지가 완성돼요.
열린 웹
접근성 기준을 준수하고, 대체 텍스트와 키보드 내비게이션을 지원하여 누구나 사용할 수 있어요.
다크모드 지원
시스템 설정을 자동으로 감지하여 다크모드와 라이트모드를 지원해요.
© 2026 LuoDesign. MIT License.