Communitygithub.com

Sketchware 레이아웃 디자이너

Sketchware Pro UI 레이아웃, XML 뷰 계층, 위젯 및 FAB 구성을 설계, 구조화 및 생성하여 1클릭으로 가져올 수 있는 프로젝트를 만드는 전문 기술입니다.

Sketchware 레이아웃 디자이너란 무엇인가요?

이 기술은 Sketchware Pro 프로젝트의 UI 계층을 생성하고 관리하는 데 특화되어 있습니다. `.swb` 백업 패키지의 `data/view`에 필요한 정확한 JSON 사양을 생성하며, 위젯 계층 구조, 스타일링, 반응형 레이아웃 및 플로팅 액션 버튼(FAB)을 완벽하게 지원합니다. Sketchware Pro의 뷰 시스템을 JSON 기반 ViewBean 스키마로 표현하며, 각 UI 요소는 고유한 id, type, parent 관계, 레이아웃 속성, 텍스트 및 이미지 설정을 포함합니다. 이 기술은 `sketchware-events-manager`, `sketchware-blocks-engine`, `sketchware-project-generator`와 같은 다른 기술과 통합되어 완전한 Sketchware 프로젝트 개발 워크플로우를 가능하게 합니다. 지원되는 위젯 유형은 Button, TextView, EditText, ImageView, ListView, Spinner, CalendarView, FAB 등 19가지이며, LinearLayout, RelativeLayout, ScrollView와 같은 컨테이너도 포함됩니다.

지원 대상~Claude Code~Codex CLI~Cursor
npx skills add https://github.com/AndroidForgeHQ/SketchWare-Agent-Skill/tree/main/sketchware-layout-designer
원본 보기→모든 스킬 둘러보기

즐겨 사용하는 AI에게 물어보기

이 에이전트 스킬이 미리 로드된 새 채팅을 엽니다.

OpenAIChatGPTClaudeClaudeGeminiGeminiGrokGrokPerplexityPerplexityDeepSeekDeepSeek

문서

Sketchware 레이아웃 디자이너 기술

개요

이 기술은 Sketchware Pro 프로젝트의 UI 계층을 생성하고 관리하는 데 특화되어 있습니다. .swb 백업 패키지의 data/view에 필요한 정확한 JSON 사양을 생성하며, 위젯 계층 구조, 스타일링, 반응형 레이아웃 및 플로팅 액션 버튼(FAB)을 완벽하게 지원합니다.

1. 백업 아카이브의 파일 구조

Sketchware 프로젝트 또는 .swb 아카이브에서 모든 화면 레이아웃은 단일 AES 암호화 파일 data/view에 결합됩니다.

다중 화면 및 섹션 헤더

레이아웃은 섹션 마커로 구분됩니다.

  • @<activity_xml_name>.xml (예: @main.xml, @home.xml)
  • @<activity_xml_name>.xml_fab (플로팅 액션 버튼이 있는 활동의 경우)
  • @<custom_view_name>.xml (ListView/Spinner에 사용되는 CustomView의 경우)
@main.xml
<보기 1에 대한 ViewBean JSON>
<보기 2에 대한 ViewBean JSON>
<보기 3에 대한 ViewBean JSON>

@main.xml_fab
<FAB에 대한 ViewBean JSON>

@item_row.xml
<사용자 지정 보기 항목에 대한 ViewBean JSON>

2. ViewBean JSON 스키마 및 필수 필드

모든 UI 요소는 ViewBean을 나타내는 한 줄 JSON 문자열입니다.

{
  "id": "button_submit",
  "type": 3,
  "parent": "root",
  "parentType": 0,
  "index": 0,
  "convert": "Button",
  "customView": "",
  "enabled": 1,
  "clickable": 1,
  "alpha": 1.0,
  "translationX": 0.0,
  "translationY": 0.0,
  "scaleX": 1.0,
  "scaleY": 1.0,
  "firstDayOfWeek": 1,
  "dividerHeight": 1,
  "choiceMode": 0,
  "checked": 0,
  "indeterminate": "false",
  "progress": 0,
  "max": 100,
  "progressStyle": "?android:progressBarStyle",
  "spinnerMode": 1,
  "inject": "",
  "adSize": "",
  "adUnitId": "",
  "preIndex": 0,
  "preParentType": -1,
  "parentAttributes": {},
  "layout": {
    "width": -1,
    "height": -2,
    "orientation": -1,
    "gravity": 0,
    "layoutGravity": 0,
    "weight": 0,
    "weightSum": 0,
    "marginLeft": 16,
    "marginTop": 16,
    "marginRight": 16,
    "marginBottom": 16,
    "paddingLeft": 12,
    "paddingTop": 12,
    "paddingRight": 12,
    "paddingBottom": 12,
    "backgroundColor": 16777215,
    "borderColor": -16740915
  },
  "text": {
    "text": "Submit",
    "textSize": 16,
    "textColor": -16777216,
    "hint": "",
    "hintColor": 16777215,
    "singleLine": 0,
    "line": 0,
    "inputType": 1,
    "imeOption": 0,
    "textFont": "default_font",
    "textType": 1
  },
  "image": {
    "rotate": 0,
    "scaleType": "CENTER"
  }
}

3. 위젯 및 레이아웃 유형 상수

유형 정수위젯 / 레이아웃 클래스convert 문자열설명
0LinearLayoutLinearLayout선형 컨테이너 (가로 또는 세로)
1RelativeLayoutRelativeLayout상대적 컨테이너
2HorizontalScrollViewHorizontalScrollView가로 스크롤 컨테이너
3ButtonButton대화형 푸시 버튼
4TextViewTextView텍스트 표시 레이블
5EditTextEditText텍스트 입력 필드
6ImageViewImageView이미지 컨테이너
7WebViewWebView앱 내 브라우저 / 웹 프레임
8ProgressBarProgressBar원형 또는 수평 로딩 표시기
9ListViewListView스크롤 가능한 세로 항목 목록
10SpinnerSpinner드롭다운 선택 목록
11CheckBoxCheckBox두 가지 상태 확인 가능한 상자
12ScrollViewScrollView세로 스크롤 컨테이너
13SwitchSwitch두 가지 상태 토글 스위치
14SeekBarSeekBar드래그 가능한 값 슬라이더
15CalendarViewCalendarView대화형 월 달력
16FloatingActionButtonFloatingActionButton표준 Material FAB (_fab 섹션)
17AdViewAdViewGoogle AdMob 배너
18MapViewMapViewGoogle Maps 컨테이너

4. 계층 구조 및 상위 규칙 (중요)

  1. 루트 수준 뷰:
    • 화면 베이스에 직접 연결된 요소의 경우 "parent": "root"로 설정합니다.
    • "parentType": 0 (FAB의 경우 -1)로 설정합니다.
  2. 컨테이너의 하위 뷰:
    • "parent": "<container_view_id>"로 설정합니다 (예: "parent": "linear_main").
    • "parentType": <container_type_int>로 설정합니다 (예: LinearLayout의 경우 0).
  3. 인덱스 순서:
    • "index"는 동일한 "parent"를 공유하는 형제 간에 0, 1, 2, 3... 순차적으로 지정되어야 합니다.
  4. 레이아웃 크기:
    • MATCH_PARENT: -1
    • WRAP_CONTENT: -2
    • 정확한 DP: 양의 정수 (예: 48dp의 경우 48).
  5. 선형 레이아웃 방향:
    • 가로: "orientation": 0
    • 세로: "orientation": 1
    • 비컨테이너 위젯: "orientation": -1

5. 스타일링, 색상 및 타이포그래피

  • ARGB 16진수를 32비트 부호 있는 정수로 변환: Sketchware는 색상을 32비트 부호 있는 정수로 저장합니다.
    • 투명 / 기본값: 16777215 (0x00FFFFFF)
    • 검은색 (#FF000000): -16777216
    • 흰색 (#FFFFFFFF): -1
    • Sketchware 기본 파란색 (#FF008DCD): -16740915
    • Material 강조 빨간색 (#FFFF4081): -49023
    • Material 회색 (#FF9E9E9E): -6381922
  • 텍스트 스타일 (textType):
    • 0: 일반
    • 1: 굵게
    • 2: 기울임꼴
    • 3: 굵은 기울임꼴
  • 입력 유형 (EditText의 inputType):
    • 1: 일반 텍스트
    • 2: 텍스트 (제안 없음)
    • 33: 이메일 주소 (TYPE_TEXT_VARIATION_EMAIL_ADDRESS)
    • 129: 비밀번호 (TYPE_TEXT_VARIATION_PASSWORD)
    • 2: 숫자 (TYPE_CLASS_NUMBER)
    • 3: 전화번호 (TYPE_CLASS_PHONE)
  • 스케일 유형 (ImageView의 scaleType):
    • "CENTER", "CENTER_CROP", "CENTER_INSIDE", "FIT_CENTER", "FIT_START", "FIT_END", "FIT_XY"

6. 플로팅 액션 버튼 (FAB) 설정

활동에서 FAB를 활성화하는 경우:

  1. data/file (@activity)에서 "options": 1 (또는 FAB가 있는 비트마스크)로 설정합니다.
  2. data/view에서 @<activity>.xml_fab 아래에 항목을 추가합니다.
@main.xml_fab
{"adSize":"","adUnitId":"","alpha":1.0,"checked":0,"choiceMode":0,"clickable":1,"convert":"","customView":"","dividerHeight":1,"enabled":1,"firstDayOfWeek":1,"id":"_fab","image":{"rotate":0,"scaleType":"CENTER"},"indeterminate":"false","index":0,"inject":"","layout":{"backgroundColor":16777215,"borderColor":-16740915,"gravity":0,"height":-2,"layoutGravity":85,"marginBottom":16,"marginLeft":16,"marginRight":16,"marginTop":16,"orientation":-1,"paddingBottom":0,"paddingLeft":0,"paddingRight":0,"paddingTop":0,"weight":0,"weightSum":0,"width":-2},"max":100,"parentAttributes":{},"parentType":-1,"preIndex":0,"preParentType":0,"progress":0,"progressStyle":"?android:progressBarStyle","scaleX":1.0,"scaleY":1.0,"spinnerMode":1,"text":{"hint":"","hintColor":16777215,"imeOption":0,"inputType":1,"line":0,"singleLine":0,"text":"","textColor":16777215,"textFont":"default_font","textSize":12,"textType":0},"translationX":0.0,"translationY":0.0,"type":16}
  1. data/logic에서 클릭 이벤트는 _fab 대상에 바인딩됩니다.
    • 이벤트 헤더: @MainActivity.java_events -> {"eventName":"onClick","eventType":1,"targetId":"_fab","targetType":16}
    • 로직 블록 헤더: @MainActivity.java__fab_onClick

7. 기술 간 통합 프로토콜

  • sketchware-events-manager와 함께: 여기서 생성된 모든 대화형 뷰(Button, EditText, ImageView, ListView, _fab)는 data/logic에서 해당 id 및 targetType을 통해 클릭, 변경 및 항목 리스너에 참조됩니다.
  • sketchware-blocks-engine과 함께: 뷰 ID는 UI 블록 매개변수(예: setText, getText, setVisible, setImageUrl)에 전달됩니다.
  • sketchware-project-generator와 함께: 생성된 뷰 JSON 문자열은 해당 @<screen>.xml 헤더 아래에 결합되어 data/view로 암호화됩니다.

관련 스킬

steipete/sag

ElevenLabs text-to-speech with mac-style say UX.

community

steipete/oracle

Oracle CLI second-model review/debug/refactor/design with selected files, dry-run token checks, API or browser engine.

community

steipete/peekaboo

Capture and automate macOS UI with the Peekaboo CLI.

community

mattpocock/design-an-interface

Generate multiple radically different interface designs for a module using parallel sub-agents. Use when user wants to design an API, explore interface options, compare module shapes, or mentions "design it twice".

community

mattpocock/prototype

Build a throwaway prototype to flesh out a design — a runnable terminal app for state/business-logic questions, or several radically different UI variations toggleable from one route.

community

mattpocock/grill-me

Interview the user relentlessly about a plan or design until reaching shared understanding, resolving each branch of the decision tree. Use when user wants to stress-test a plan, get grilled on their design, or mentions "grill me".

community