AI에게 "히어로 섹션 만들어 줘", "요금제 카드 추가해 줘"라고 시키면 결과물은 금방 나옵니다. 문제는 그다음입니다. 화면마다 버튼 색이 조금씩 다르고, 간격은 12px이었다가 18px이었다가, 새 회색이 하나씩 늘어납니다. 페이지가 열 개쯤 쌓이면 같은 사이트로 보이지 않습니다.
이온디는 이 문제를 디자인 시스템과 AI용 프롬프트를 한 벌로 묶는 방식으로 풀었습니다. 그 결과물이 EOND UI(ui.eond.com)입니다.
EOND UI가 무엇인가
이온디가 만드는 모든 웹 프로젝트가 공유하는 하나의 디자인 언어입니다. 색·글자·간격 같은 기초 규칙(토큰)과, 버튼·폼·모달 같은 부품(컴포넌트)을 정리해 두고 문서 사이트에서 바로 보고 복사할 수 있게 했습니다. 용도에 따라 두 벌이 있습니다.
| 구분 | 쓰는 곳 | 특징 |
|---|---|---|
| EOND UI Web | 회사 사이트, 랜딩, 게시판 | 밝은 바탕, 오렌지와 딥네이비, eondui.css 한 파일 |
| EOND UI App | 관리 화면, 대시보드, 데스크톱 앱 | 다크·라이트 전환, 메인 색 4가지, React 부품 |
핵심은 "AI 프롬프트" 페이지
디자인 시스템은 많습니다. EOND UI가 다른 점은 코드와 프롬프트를 같이 제공한다는 것입니다.
- 마스터 프롬프트 — Claude나 ChatGPT 세션을 시작할 때 이 블록을 먼저 붙여 넣으면, 그 세션에서 만드는 모든 UI가 EOND UI 규칙을 따릅니다. "새 색을 만들지 말 것, 간격은 4px 배수만, 주 버튼 색은 화면당 하나" 같은 규칙이 들어 있습니다.
- 위젯별 프롬프트 — 컴포넌트 데모마다 "프롬프트" 버튼이 있어, 그 위젯을 AI에게 요청하는 문구를 바로 복사할 수 있습니다.
한 번 붙여 두면 이후에는 "히어로 만들어 줘"처럼 짧게만 말해도 색과 간격이 규칙대로 나옵니다. 매번 "우리 브랜드 색은 이거고…"를 설명할 필요가 없습니다.
쓰는 법은 한 줄
Web 버전은 CSS 파일 하나를 불러오면 끝입니다. 라이믹스, 워드프레스, 직접 만든 HTML 어디서든 똑같이 동작합니다.
<link rel="stylesheet" href="/static/el_design/eondui.css">
<button class="e-btn e-btn-primary">주 액션</button>
<div class="e-card">카드 내용</div>모든 부품은 e-로 시작하는 클래스 하나로 쓰고, 색·간격은 --e-로 시작하는 CSS 변수로 되어 있어 변수만 바꾸면 사이트 전체 분위기가 바뀝니다.
무엇이 들어 있나
- 기초: 컬러 토큰 20종, 글자 크기 9단계, 4px 간격 체계, 라운딩·그림자·모션 규칙
- 컴포넌트 25개 이상: 버튼·폼·탭·테이블부터 모달·바텀시트·토스트·채팅창·검색 콤보박스까지
- 패턴: 히어로 템플릿, 헤더 템플릿, 스탯, 스크롤 등장 효과
- 페이지 템플릿 7종: 게시판 목록(목록·갤러리·웹진·그리드)·글보기·글쓰기·문의·FAQ·지식인 Q&A·위키
- 아이콘: 직접 그린 라인 아이콘 87종과 컬러 아이콘 22종, 선 두께 통일
- 다크 모드와 Svelte·React·Vue 어댑터
디자인 원칙 네 가지
- 하나의 팔레트 — 오렌지(#FF6B35)와 딥네이비(#0B1120), 그리고 뉴트럴. 섹션마다 새 색을 만들지 않습니다.
- 한국어 조판 우선 — 어절 단위 줄바꿈, 제목은 균형 잡힌 줄로.
- 절제된 모션 — 떠오르는 등장과 호버 리프트 두 가지만. 움직임 줄이기 설정을 존중합니다.
- 복사해서 쓰는 컴포넌트 — 화면마다 CSS를 새로 짜지 않습니다.
이런 분께 추천합니다
- AI로 사이트를 만들다가 페이지마다 디자인이 달라져서 곤란했던 분
- 라이믹스·워드프레스 사이트에 일관된 UI를 입히고 싶은 분
- 디자인 시스템을 어떻게 문서화하는지 사례가 필요한 분
문서 사이트는 ui.eond.com에서 볼 수 있습니다. "AI 프롬프트" 페이지부터 열어 보시길 권합니다. 써 보시고 막히는 부분이나 필요한 컴포넌트가 있으면 댓글로 남겨 주세요.