AI와 함께 시작하는 CSS. 경량 프레임워크 「Lism CSS」를 사용해 보자

여러분, CSS를 작성하고 계신가요?

「앞으로 Web 제작을 시작하고 싶다」 「AI가 코드를 작성해 주는 시대이니, CSS도 공부해 보고 싶다」라고 생각하시는 분들도 많으실 것입니다.

하지만 막상 시작하려고 하면 **「Tailwind? 순수 CSS? 프레임워크는 어떤 것을 골라야 하지?」**라며 망설였던 경험이 있는 분들도 계실 것이라 생각합니다.

그래서 이번에는, 2025년 6월에 v0가 출시되어 최근 조금씩 주목을 받고 있는 **경량 CSS 프레임워크 「Lism CSS」**를 소개하고자 합니다.

특히 이 기사에서는,

• 앞으로 CSS를 다뤄보고 싶은 분
• ChatGPT나 Claude 등의 AI에게 코드를 작성하게 하며 배우고 싶은 분
• 하지만 AI가 내뱉는 CSS가 「왠지 엉망진창이라 읽기 힘들다…」라고 느끼는 분

그런 분들을 위해, 「AI 시대의 CSS 입문」으로서의 Lism CSS라는 관점으로 써보겠습니다.

Lism CSS는 SWELL이라는 WordPress 테마의 개발자인 료(了, @ddryo_loos)님이 제작한, 일본에서 탄생한 경량 CSS 프레임워크입니다.

대략적인 특징을 정리하면 다음과 같습니다.

• 📦 **약 30KB (gzip 시 약 8KB)**의 경량 설계
• 🚀 CDN에서 한 줄 읽어오는 것만으로 사용 가능 (빌드 불필요)
• 🧱 레이아웃 퍼스트 (Layout-first) 설계 사상 (Every Layout에서 영감)
• 🎨 **CSS 변수 (Design Tokens)**를 통한 테마 관리
• 📱 컨테이너 쿼리 (Container Queries) 기반의 모던한 반응형 대응
• 🤖 AI 코딩과의 상성을 의식한 명명 규칙 및 MCP 서버 제공

「Tailwind CSS처럼 전부 클래스로 완결 짓는 것」이 아니라, 「CSS를 써야 할 부분은 제대로 쓴다」는 전제로 만들어졌다는 점이 포인트입니다.

이 밸런스가 CSS를 이제부터 배우려는 사람에게 딱 좋은 도입부가 됩니다.

최근에는 AI에게 「버튼을 만들어줘」라고 부탁하면 HTML과 CSS를 순식간에 작성해 줍니다. 편리한 한편, 이런 경험은 없으신가요?

• 같은 모양의 컴포넌트인데, 페이지마다 다른 클래스명으로 거의 동일한 스타일이 작성되어 있음
• 반응형 대응이 임기응변식 @media로 가득함
• 스타일링에 일관성이 없고, 왜 그 값을 사용했는지 근거가 없음

이는 AI에게 「설계 규칙」이 없기 때문에 발생하기 쉬운 현상입니다.

Lism CSS는,

• 클래스 명명 규칙
• 레이아웃 구성 방법
• 컬러나 여백 값 (Design Tokens)
• 레이어에 의한 명시도 (Specificity) 관리

이것들을 한 차례 「정해두고」 있기 때문에, AI에게 코드를 작성하게 할 때도 Lism의 규칙에 따라 작성하도록 하면 코드의 일관성을 유지하기 쉬워집니다.

공식에서 MCP 서버와 llms.txt를 제공하고 있는 것도 AI 연동을 중시하고 있다는 증거입니다.

**MCP (Model Context Protocol)**란 AI가 외부 문서나 도구를 참조하기 위한 메커니즘을 말합니다. Lism CSS는 공식 MCP 서버를 제공하고 있어, Claude Code, Cursor, GitHub Copilot 등에서 최신 문서를 참조하며 코드를 작성할 수 있습니다.

「AI에게 전적으로 맡기기에는 불안하니, 어느 정도의 규칙은 필요하다」는 사람에게 딱 적합하며, 또한 CSS 초보자에게도 「막연하게 작성하던 CSS의 설계 감각」이 자연스럽게 몸에 배는 교재가 될 수 있습니다.

Lism CSS의 도입 방법은 크게 **「CDN으로 읽어오는 방법」**과 「npm으로 설치하는 방법」 두 가지가 있습니다. 각각 순서대로 소개하겠습니다.

가장 간단한 시작 방법은 HTML 파일에 다음 한 줄을 추가하는 것뿐입니다.

<link href="https://cdn.jsdelivr.net/npm/lism-css@0/dist/css/main.css" rel="stylesheet" />

이것만으로 바로 Lism CSS의 클래스를 사용할 수 있는 상태가 됩니다. Node.js도 npm도 Vite도 필요 없습니다.

HTML 파일을 하나 만들어서 브라우저로 여는 것만으로 테스트할 수 있으므로, CSS 초보자의 첫걸음으로서도 허들이 낮습니다.

집필 시점에서는 버전이 아직 0.x 계열이므로, 실제 운영 환경에서 사용할 경우에는 버전을 고정(예: lism-css@0.0.13)하는 것이 좋습니다.

）에서 로딩하는 것을 추천합니다.

Vite, Next.js, Astro 등 빌드 툴을 사용한 프로젝트에 통합할 경우에는 npm을 통한 설치도 가능합니다.

npm install lism-css

프로젝트의 진입점(예: main.js / main.ts / index.css)에서 import하기만 하면 됩니다.

// main.js / main.ts 등에서
import 'lism-css/dist/css/main.css';

Next.js를 사용하는 경우에는 App Router라면 app/layout.tsx,
Pages Router라면 pages/_app.tsx에서 로드합니다.

// Next.js App Router
import 'lism-css/dist/css/main.css';
export default function RootLayout({ children }: { children: React.ReactNode }) {
...

Lism CSS는 React 컴포넌트와 Astro 컴포넌트도 공식적으로 제공합니다.

클래 이름을 직접 작성하는 대신, props로 지정하는 스타일로 작성할 수 있습니다.

// React의 경우
import { Box, Flex, Stack, Heading, Text } from 'lism-css/react';
export default function Hello() {
...

이는 내부적으로 다음과 같은 클래스 지정으로 변환되어 렌더링됩니다.

<div class="l--stack -g:20">
<h2 class="-fz:xl">Welcome</h2>
<div class="l--flex -g:20 -ai:center">
...

클래 이름 규칙에 익숙해지기 전에는, props로 작성할 수 있는 React/Astro 버전이 더 쉽게 다가올 수도 있습니다.

Astro에서 이용할 때 주의점

.astro 파일을 node_modules에서 직접 로드할 수 없으며,
Directory import '...' is not supported resolving ES modules ...와 같은 에러가 발생할 수 있습니다. 그 경우에는 astro.config.js의 vite.ssr.noExternal에 `

<div class="l--stack -g:20">
<p>텍스트1</p>
<p>텍스트2</p>
...

-g:20

로 요소 간의 gap (여백)을 지정하고 있습니다. 폼 항목 나열, 카드 내용, 섹션 전체의 골격 등, 가장 사용 빈도가 높은 레이아웃입니다.

<div class="l--flex -ai:c -jc:sb -g:20">
<span>왼쪽</span>
<span>오른쪽</span>
...
</div>

-ai:c

→ align-items: center (세로 중앙 정렬) -
-jc:sb

→ justify-content: space-between (양끝 정렬) -
-g:20

→ gap

헤더의 로고와 오른쪽 내비게이션, 라벨과 버튼 등, 가로 방향으로 나열하고 싶은 상황에서 편리합니다.

<section class="l--center" style="min-height: 100dvh;">
<h1>히어로 텍스트</h1>
</section>

히어로 섹션(Hero section)처럼 화면 중앙에 똿! 하고 배치하고 싶을 때 딱 맞습니다.

<div class="l--columns -g:20" style="--cols: 3;">
<div>컬럼1</div>
<div>컬럼2</div>
...
</div>

--cols

로 컬럼 수를 지정하는 것만으로, 심플하게 그리드 (Grid)를 구성할 수 있습니다.

유틸리티 클래스 (Utility class)는 -프로퍼티명:값 이라는 표기법을 사용하여, CSS 프로퍼티를 그대로 축약한 듯한 작성감을 제공합니다.

클래스	CSS	의미
-p:20	padding: var(--s20)	여백 (내부)
-mbs:50	margin-block-start: var(--s50)	상단 여백
-fz:l	font-size: var(--fz-l)	폰트 크기
-fw:bold	font-weight: bold	폰트 두께
-c:main	color: var(--c-main)	글자 색상 (메인 컬러)
-bgc:base-2	background-color: var(--c-base-2)	배경색
-bdrs:10	border-radius: var(--s10)	테두리 곡률 (Border radius)
-ai:c	align-items: center	flex/grid 세로 정렬
-jc:sb	justify-content: space-between	flex/grid 가로 정렬

익숙해지기 전까지는 "암호 같네..."라고 느낄 수도 있지만, -프로퍼티:값이라는 심플한 규칙이기 때문에 익숙해지면 오히려 읽기 편해집니다.

Lism CSS에서는 --c-main, --c-base, --s20, --fz-l 등의 **CSS 변수 (Design Token)**가 사전에 준비되어 있습니다.

:root {
--c-main: #d97706; /* 메인 컬러 덮어쓰기 */
--c-base: #fffaf0; /* 배경색 덮어쓰기 */
...
}

이와 같이 :root에서 변수를 덮어쓰는 것만으로, 사이트 전체의 테마를 변경할 수 있습니다.

"색상이나 여백 값이 여기저기 흩어져 있어 유지보수가 어렵다"는 CSS의 흔한 고민을 처음부터 방지해 주는 구조로 되어 있습니다.

Lism CSS의 클래스는 AI에게 전달하기 쉬운 명명 규칙을 가지고 있습니다.

예를 들어, AI에게 다음과 같이 요청해 보면 Lism CSS의 규칙에 따른 코드를 더 쉽게 얻을 수 있습니다.

Lism CSS (lism-css.com)를 사용하여 다음 히어로 섹션을 만들어 주세요.
- 화면 중앙에 h1 제목과 설명문, 버튼을 세로로 나열
- 배경은 --c-base, 글자 색상은 --c-text
...

그러면, 다음과 같은 코드가 반환되는 이미지입니다.

<section class="l--center -bgc:base -c:text" style="min-height: 100dvh;">
<div class="l--stack -g:30 -ai:c -p:40 -ta:c">
<h1 class="-fz:xl -fw:bold">Welcome to Lism</h1>
...

포인트는, "Lism CSS를 사용해 주세요"라고 처음에 명시하는 것과, "사용했으면 하는 클래스 이름이나 토큰 이름"을 구체적으로 지정하는 것입니다.

공식 문서나 llms.txt를 AI가 참조하게 하면 정확도가 더욱 높아집니다.

Cursor나 Claude Code를 사용하고 있다면, 공식 Lism MCP 서버를 도입해 두면 AI가 최신 클래스 이름이나 Props 지정을 자동으로 참조하면서 코드를 생성해 줍니다.

CSS 프레임워크라고 하면 Tailwind를 떠올리는 분들도 많을 것입니다. 양자의 차이점을 간단히 정리해 보겠습니다.

관점	Lism CSS	Tailwind CSS
설계 사상	레이아웃 퍼스트 (Layout-first) + 유틸리티 (Utility)	유틸리티 퍼스트 (Utility-first)
...	-p:20, l--stack 등 짧음	p-5, flex 등 짧음
반응형 (Responsive)	컨테이너 쿼리 (Container Queries) + CSS 변수	미디어 쿼리 (Media Queries) + 브레이크포인트 접두사 (Breakpoint prefix)
학습 비용	중 (독자적인 설계 이해 필요)	저~중 (클래스 수가 많음)
커스텀 CSS	작성하는 것을 전제로 한 설계	가급적 작성하지 않는 방침
...

대략 말하자면,

• **"모든 것을 클래스로 완결짓고 싶다!"**는 분은 Tailwind
• **"어느 정도는 CSS도 쓰고 싶다 · 설계를 의식하고 싶다"**는 분은 Lism

이라는 선택이 될 것 같습니다. CSS 초보자에게는 "순수 CSS도 자연스럽게 작성한다"는 전제의 Lism이 CSS의 기초를 익히기 쉽다는 측면도 있습니다.

좋은 점만 써버렸습니다만, 물론 사용하기 전에 알아두어야 할 포인트도 있습니다.

-p:20과 같은 짧은 표기법, l-- / is-- / has-- / c-- 접두사(Prefix), @layer의 계층 구조 등 독자적인 규칙이 조금 있습니다.

Tailwind에 익숙한 사람일수록 처음에는 당황할 수도 있습니다. 반대로 CSS를 거의 처음 접하는 사람은 백지상태에서 배울 수 있기 때문에 익숙해지는 것이 빠릅니다.

집필 시점에서는 v0.0.13 전후로, 아직 파괴적 변경(Breaking Changes)이 발생할 가능성이 있습니다.

실제 프로덕션 제품에서 사용할 경우에는 버전 고정 및 문서 업데이트를 정기적으로 체크하는 것을 추천합니다.

Tailwind에 비해 인터넷상의 정보나 기사는 아직 많지 않습니다.

무언가 어려움이 생겼을 때는 우선 공식 문서, 그다음 GitHub 리포지토리나 Discussion을 확인하는 것을 추천합니다.

Lism CSS는,

CDN 한 줄로 바로 테스트할 수 있는 경량성
레이아웃을 부품화한 프리미티브 (Primitives)
CSS를 작성하는 것을 전제로 한 설계 사상
AI 코딩을 의식한 에코시스템 (Ecosystem)

을 겸비하여, 이제 막 CSS를 시작하려는 사람에게도 추천할 수 있는 CSS 프레임워크입니다.

특히 "AI에게 어느 정도 코드를 작성하게 하면서, 스스로도 조금씩 CSS를 배워나가고 싶다"는 분에게는, **"규칙이 잘 정돈되어 있어서 AI가 작성한 코드도 잘 깨지지 않는다"**는 점이 큰 이점이 됩니다.

그리고 코드를 작성해 나가는 과정에서 자연스럽게 디자인 토큰 (Design Token), 레이어 설계 (Layer Design), 레이아웃 프리미티브 (Layout Primitive)와 같은 모던 CSS 설계의 기초를 접할 수 있을 것입니다.

"갑자기 큰 프레임워크를 배우는 것은 좀...", "AI에게만 전적으로 맡기기에는 불안해..."라고 생각하신다면, 우선 HTML 파일 하나를 만들어서 CDN으로 불러와 Lism CSS를 직접 만져보는 것은 어떨까요?

공식 문서와 Playground 링크를 남겨두니, 관심 있는 분들은 꼭 확인해 보세요.

공식 사이트

공식 문서

GitHub

개발자 분의 해설 기사