Morit Plugin8. 실제 예제
UI 디자인 예제 4종 (Runtime v2)
아래 예제는 Runtime v2(ui_schema: 2)로 작성되어 있습니다. 새 플러그인은 Runtime v3를 기본으로
사용하며, v3로 만든 완성 예제는 Runtime v3 예제에 있습니다.
SDK 1.7.13 이상에서 사용하는 검색 폼, 뉴스 캐러셀, 대시보드, AI 결과 화면입니다.
패키지의 min_morit_version을 1.7.13 이상으로 지정합니다. 브랜드 색상과 장식을 유지하면서
정보·입력·행동의 순서를 명확하게 구성합니다. demo.search와 demo.list는 실제 플러그인의 capability로 바꿉니다.
search-form
json
{
"ui_schema": 2,
"theme": {
"radius": 18,
"spacing": 12,
"light": {
"color_scheme": {
"primary": "#00856A",
"surface": "#F7F9FC",
"on_surface": "#263342"
}
},
"dark": {
"color_scheme": {
"primary": "#99DACA",
"surface": "#202630",
"on_surface": "#E1E6EC"
},
"surface": {
"container_color": "#2A323D"
}
}
},
"app_bar": {
"title": "Campus"
},
"view": {
"type": "column",
"props": {
"spacing": 16
},
"children": [
{
"type": "surface",
"props": {
"padding": 20,
"border_radius": 18,
"gradient_colors": [
"#007C64",
"#147B8A"
]
},
"children": [
{
"type": "text",
"props": {
"text": "학교 생활을 한곳에서",
"font_size": 24,
"font_weight": 700,
"color": "#FFFFFF"
}
},
{
"type": "text",
"props": {
"text": "학교를 검색하고 나에게 맞는 일정을 설정하세요.",
"color": "#FFFFFF",
"line_height": 1.5
}
}
]
},
{
"type": "text",
"props": {
"text": "내 학교 찾기",
"style": "heading"
}
},
{
"type": "field",
"props": {
"state_key": "query",
"label": "학교 이름",
"placeholder": "학교 이름을 입력하세요"
}
},
{
"type": "surface",
"props": {
"padding": 20,
"border_radius": 18
},
"children": [
{
"type": "switch",
"props": {
"state_key": "reminders",
"label": "수업 시작 전에 알림 받기"
}
}
]
},
{
"type": "button",
"props": {
"label": "학교 검색",
"full_width": true
},
"action": {
"type": "invoke",
"capability": "demo.search",
"arguments": {
"query": "{{state.query}}"
}
}
}
]
},
"initial_state": {
"query": "서울",
"reminders": true
}
}
news-carousel
json
{
"ui_schema": 2,
"theme": {
"radius": 18,
"spacing": 12,
"light": {
"color_scheme": {
"primary": "#285B97",
"surface": "#F7F9FC",
"on_surface": "#263342"
}
},
"dark": {
"color_scheme": {
"primary": "#99DACA",
"surface": "#202630",
"on_surface": "#E1E6EC"
},
"surface": {
"container_color": "#2A323D"
}
}
},
"app_bar": {
"title": "Daily Brief"
},
"view": {
"type": "column",
"props": {
"spacing": 16
},
"children": [
{
"type": "text",
"props": {
"text": "오늘의 발견",
"font_size": 28,
"font_weight": 700
}
},
{
"type": "text",
"props": {
"text": "관심 있는 기사를 옆으로 넘겨 살펴보세요.",
"style": "caption"
}
},
{
"type": "list",
"props": {
"source": "data.news.data.items",
"scroll_direction": "horizontal",
"height": 240,
"min_item_width": 280,
"item_key": "id",
"spacing": 12
},
"children": [
{
"type": "surface",
"props": {
"padding": 20,
"border_radius": 18,
"gradient_colors": [
"#234E76",
"#366A93"
]
},
"children": [
{
"type": "text",
"props": {
"text": "{{item.category}}",
"color": "#C9E4FF",
"style": "caption"
}
},
{
"type": "text",
"props": {
"text": "{{item.title}}",
"font_size": 22,
"font_weight": 700,
"color": "#FFFFFF",
"line_height": 1.4,
"max_lines": 4
}
},
{
"type": "text",
"props": {
"text": "{{item.source}}",
"color": "#E0EEFF",
"style": "caption"
}
}
]
}
]
},
{
"type": "text",
"props": {
"text": "관심사를 바꾸면 더 나에게 맞는 소식을 볼 수 있어요.",
"style": "caption"
}
}
]
},
"data_sources": [
{
"id": "news",
"capability": "demo.list",
"trigger": "manual"
}
]
}
focus-dashboard
json
{
"ui_schema": 2,
"theme": {
"radius": 18,
"spacing": 12,
"light": {
"color_scheme": {
"primary": "#AC5944",
"surface": "#F7F9FC",
"on_surface": "#263342"
}
},
"dark": {
"color_scheme": {
"primary": "#99DACA",
"surface": "#202630",
"on_surface": "#E1E6EC"
},
"surface": {
"container_color": "#2A323D"
}
}
},
"app_bar": {
"title": "Focus"
},
"view": {
"type": "column",
"props": {
"spacing": 16
},
"children": [
{
"type": "surface",
"props": {
"padding": 20,
"border_radius": 18,
"gradient_colors": [
"#A95644",
"#B27449"
]
},
"children": [
{
"type": "text",
"props": {
"text": "꾸준함이 쌓이고 있어요",
"font_size": 24,
"font_weight": 700,
"color": "#FFFFFF"
}
},
{
"type": "text",
"props": {
"text": "이번 주 목표의 75%를 달성했어요.",
"color": "#FFFFFF"
}
},
{
"type": "progress",
"props": {
"value": "0.75"
}
}
]
},
{
"type": "grid",
"props": {
"columns": 2,
"min_item_width": 120,
"spacing": 12
},
"children": [
{
"type": "surface",
"props": {
"padding": 20,
"border_radius": 18
},
"children": [
{
"type": "metric",
"props": {
"label": "완료한 작업",
"value": "12",
"supporting": "지난주보다 3개 더"
}
}
]
},
{
"type": "surface",
"props": {
"padding": 20,
"border_radius": 18
},
"children": [
{
"type": "metric",
"props": {
"label": "집중 시간",
"value": "8.5h",
"supporting": "나만의 속도로"
}
}
]
}
]
},
{
"type": "surface",
"props": {
"padding": 20,
"border_radius": 18,
"selected": true,
"selected_background_color": "primary_container",
"selected_foreground_color": "on_primary_container"
},
"children": [
{
"type": "text",
"props": {
"text": "다음으로 할 일",
"style": "caption"
}
},
{
"type": "text",
"props": {
"text": "프로젝트 초안 정리",
"style": "heading"
}
},
{
"type": "text",
"props": {
"text": "메모 3개가 준비되어 있어요.",
"style": "caption"
}
}
]
}
]
}
}
ai-response
json
{
"ui_schema": 2,
"theme": {
"radius": 18,
"spacing": 12,
"light": {
"color_scheme": {
"primary": "#7056A1",
"surface": "#F7F9FC",
"on_surface": "#263342"
}
},
"dark": {
"color_scheme": {
"primary": "#99DACA",
"surface": "#202630",
"on_surface": "#E1E6EC"
},
"surface": {
"container_color": "#2A323D"
}
}
},
"app_bar": {
"title": "Research Companion"
},
"view": {
"type": "column",
"props": {
"spacing": 16
},
"children": [
{
"type": "surface",
"props": {
"padding": 20,
"border_radius": 18,
"gradient_colors": [
"#644D88",
"#84659D"
]
},
"children": [
{
"type": "text",
"props": {
"text": "생각을 정리했어요",
"font_size": 24,
"font_weight": 700,
"color": "#FFFFFF"
}
},
{
"type": "text",
"props": {
"text": "핵심 내용 3개 · 출처 4개",
"color": "#EDE1FF"
}
}
]
},
{
"type": "surface",
"props": {
"padding": 20,
"border_radius": 18
},
"children": [
{
"type": "text",
"props": {
"text": "지금 중요한 것",
"style": "caption"
}
},
{
"type": "text",
"props": {
"text": "실제 사용자 흐름을 먼저 확인하세요.",
"font_size": 20,
"font_weight": 600,
"line_height": 1.4
}
},
{
"type": "text",
"props": {
"text": "입력, 선택, 저장이 이어지는 과정에서 불편한 지점을 하나씩 줄이는 것이 출발점입니다.",
"line_height": 1.6
}
}
]
},
{
"type": "wrap",
"props": {
"spacing": 8
},
"children": [
{
"type": "chip",
"props": {
"label": "핵심 요약",
"selected": true
},
"action": {
"type": "set_state",
"values": {
"detail": false
}
}
},
{
"type": "chip",
"props": {
"label": "다음 행동"
},
"action": {
"type": "set_state",
"values": {
"detail": true
}
}
}
]
},
{
"type": "text",
"props": {
"text": "작은 개선부터 시작해 보세요.",
"style": "caption"
}
}
]
},
"initial_state": {
"detail": false
}
}