reopt designreopt design
DocsExploreToolsPricingBuilder
시작하기
개요
시작하기
Next.js 설치
Private install
핵심 개념
아키텍처
컴포지션 패턴
접근성
키보드 패턴
스타일링
테마 시스템
고급 패턴
구축·운영
Skills
AI 연동
CLI (opt surface add)
의존 그래프
도구
Canvas 카탈로그
Theme Builder
Form Builder
템플릿
템플릿
릴리즈
릴리즈 노트
reopt designreopt design

AI 시대를 위한 디자인 시스템

  • 문서
  • 가격
  • 릴리즈 노트
  • GitHub
  • 서비스 약관
  • 개인정보처리방침

© 2026 reopt-ai. All rights reserved.

일관된 컴포넌트 설계로 고객 경험을 개선합니다

잘 설계한 컴포넌트가 실제 화면에서도 같은 품질로 이어지도록 흐름과 상태, 정보 밀도를 함께 맞춥니다. 고객은 화면이 바뀌어도 익숙하게 이해하고 편하게 사용할 수 있습니다.

디자인 하네스에이전트 계약

인터페이스 컴포넌트

컴포넌트, 데이터그리드, 에디터, 챗처럼 고객 화면에 직접 쓰이는 기본 패키지입니다.

opt-ui

Core, Shells, Surfaces

컴포넌트 선택, 테마, 접근성, Surface/Template 조합, opt-ui 도입 워크플로우를 담당합니다.

설치와 테마 연결컴포넌트 카탈로그와 Layer 구조접근성, 스타일링, 템플릿

opt-charts

Charts, Visuals, Metrics

Recharts 기반 차트, SVG 시각화, chart-specific shell, 시각화 메타데이터와 예제를 담당합니다.

차트 설치와 import 경계Charts 카탈로그와 chart-specific shellsChartContainer, Tooltip, Legend 조합

opt-datagrid

Editing, Scale, Remote Data

편집형 그리드, 성능 튜닝, 원격 연동 계약, 컬럼/selection 모델처럼 DataGrid 고유 문제를 담당합니다.

기본 설치와 첫 그리드 렌더링편집/운영/대규모 데이터 시나리오원격 프로토콜과 백엔드 계약

opt-editor

Blocks, Streaming, AI Authoring

블록 시스템, 스트리밍 프로토콜, Markdown 변환, AI 백엔드 연결과 커스텀 블록 확장을 담당합니다.

EditorProvider와 빠른 시작Flat spec, block catalog, block typesNDJSON streaming과 AI integration

opt-chat

AI Chat, Streaming, Rich Parts

Chat UI 컴포넌트, 메시지 렌더링, 입력 인터페이스, 대화 상태 관리를 담당합니다.

채팅 메시지 렌더링과 스트리밍채팅 입력과 파일 첨부대화 목록과 사이드바

인터페이스 프레임

제품 화면을 조립하고, 상태와 어댑터, 디자인 기준을 함께 맞춰 고객 경험이 흔들리지 않게 합니다.

opt-shell

Product Frame, State UX, Adapters

opt-ui 위에서 app shell, page rhythm, state boundary, datagrid/editor adapter처럼 제품 화면의 구조적 일관성을 담당합니다.

앱 셸과 route group 구조page rhythm과 content width 정책loading/empty/error UX 표준화

opt-cli

Surface CLI, Harness Checks

harness 계약 검증(opt harness check/doctor), 디자인 시스템·레이어·a11y lint 룰, completeness/coverage 스코어링과 SARIF 출력을 담당합니다.

harness 계약 검증 (check / doctor / test)디자인 시스템·레이어·a11y lint 룰completeness·coverage 스코어링과 SARIF

opt-devtool

Dev Overlay, Devtool Bridges

dev-only overlay, opt-ui debugger migration, datagrid/editor/harness bridge, cross-module inspection surface를 담당합니다.

전역 dev overlay와 hotkeyopt-ui focus/tab/spatial inspectiondatagrid/editor/harness snapshot bridges

리옵트 연동

리옵트 brandapp-sdk 연동을 지원합니다. 인증과 계정 같은 제품 블록을 빠르게 구현하여 운영 흐름을 완성합니다.

brandapp-ui

Copy-paste BrandApp Surfaces

brandapp-sdk 기능을 opt-ui 위에 조립한 copy-paste Surface 모음. 소비자는 opt surface add로 소스 파일을 자기 프로젝트에 복사해 자유롭게 개조합니다.

인증 Surface(사인인 버튼, 사용자 메뉴, 보호 화면, 세션 만료)AI Surface(채팅, 이미지 생성)와 BrandApp credit UIEAV 레코드 테이블과 운영 콘솔 예제