# 표준 관리자 화면을 오픈소스로: admin-design이 담는 범위

플랫폼 프런트엔드에서 추출한 관리자 화면의 기준선. 의미 토큰, 레이아웃 셸, 공용 컴포넌트, 표준 페이지와 컴포넌트 갤러리. MIT 라이선스.

> Runlume은 플랫폼 기능, 독립 업무 앱과 전문 서비스를 필요에 따라 조합해 제공합니다. 기능, 한도와 납품 범위는 선택한 요금제 또는 약정에 따릅니다. 업무 앱은 개별 선택할 수 있으며 앱 간 협업에는 연동 설정과 권한 경계가 적용됩니다.

원본 페이지: https://runlume.app/ko/blog/admin-design-open-source

개발자 가이드 · 표준 관리자 / 오픈소스 / 프런트엔드 기준선

게시：2026-09-17 · 작성자：Runlume 팀

관리자 프로젝트는 매번 같은 일을 다시 합니다. 로그인, 레이아웃, 표, 트리, 알림, 설정, 빈 상태와 오류 상태를 새로 만듭니다. 그런데 색과 여백, 상호작용의 세부는 서로 달라지고, 화면이 늘어날수록 일관성을 유지하는 비용도 함께 커집니다.

저희는 그 공통 부분을 재사용 가능한 하나의 기준선으로 정리해 MIT 라이선스로 공개했습니다. **admin-design**은 Runlume 플랫폼 프런트엔드에서 추출한 표준 관리자 화면의 설계와 구현입니다.

## 담고 있는 것

- 테마와 의미 토큰: 색상은 의미를 가진 유틸리티 클래스로만 지정하고, 여섯 가지 프리셋 배색에 기본색과 테마색을 겹쳐 씁니다. 밝은 모드와 어두운 모드는 자동으로 따라갑니다.
- 세 가지 레이아웃 셸: 사이드바, 상단 + 사이드바, 상단 내비게이션. 사이드바 너비, 모서리 반경, 페이지 전환, 상단 작업 순서를 조정할 수 있습니다.
- 아홉 갈래 컴포넌트 페이지: 기본 컨트롤, 폼과 선택, 데이터 표시, 피드백과 오버레이, 내비게이션과 흐름, 지표와 차트, 아이콘, 테마와 설정, 표준 페이지. 컴포넌트 갤러리는 문서이면서 검수 기준면입니다.
- 표준 페이지 유형: 대시보드, 목록, 상세, 설정, 알림 센터, 로그인, 회원가입, 비밀번호 재설정.
- 중국어와 영어 기본 제공, 키보드 접근성과 접근성 설정, 문서 사이트와 같은 명령 팔레트 검색.

## 세 가지 입구

- 소개 페이지와 프로젝트 개요: [adesign.runlume.app](https://adesign.runlume.app)
- 문서 사이트(컴포넌트 설명과 개발 규약): [adoc.runlume.app](https://adoc.runlume.app)
- 온라인 데모(권한이 다른 두 개의 테스트 계정): [ago.runlume.app](https://ago.runlume.app)
- 소스 코드와 이슈: [github.com/runlume/admin-design](https://github.com/runlume/admin-design)

## 누구에게 맞고, 경계는 어디인가

관리자 화면을 직접 만들어야 하지만 인터페이스를 처음부터 두 번 작성하고 싶지 않은 팀에 맞습니다. 저장소를 복제하고 `package.json`의 이름을 바꾼 뒤 메뉴와 브랜드 자산을 교체하고, 예시 데이터를 자체 API로 연결하면 됩니다.

포함된 범위는 설계와 상호작용 계층뿐입니다. 업무 API, 인증 구현, 권한 모델, 업무 규칙은 포함하지 않습니다. 예시 데이터는 메모리에 있고 새로 고치면 초기화됩니다. 신원, 업로드, 트리 드래그, 지연 로딩 같은 기능은 props로 주입하므로 실제 서비스 연결은 콜백 교체로 끝납니다.

## 관련 페이지

- [플랫폼](https://runlume.app/ko/platform)
- [업무 앱](https://runlume.app/ko/apps)
- [개발자](https://runlume.app/ko/developers)
- [Runlume 소개](https://runlume.app/ko/about)