화면 설계·AI 명세 생성기

화면 설계와 개발 명세를 함께 만드세요

입력창·버튼·표·패널 등 15종의 UI 요소로 화면을 그린 뒤, AI나 개발자에게 전달할 구조화된 명세를 만듭니다. 화면 자동 생성이나 코드 생성 기능은 없으며 사용자가 정한 배치와 설명을 변환합니다. 로그인 없이 사용할 수 있고 설계 내용은 서버나 AI로 전송하지 않습니다.

화면을 설계하는 순서

1. 화면 이름과 기준 크기를 정하고 필요한 요소를 추가하세요. 목록 버튼을 누르거나 캔버스로 끌어올 수 있습니다.
2. 캔버스에서 이동하고 오른쪽 아래 모서리로 크기를 바꾸세요. 속성에서 위치와 크기를 숫자로 입력할 수도 있습니다.
3. 문구·입력 조건·표 열을 적고 버튼을 눌렀을 때 구현할 동작을 설명으로 남기세요.
4. 함께 옮길 요소는 소속 패널을 지정하세요. 같은 영역의 여러 요소는 Shift+클릭으로 선택해 정렬할 수 있습니다.
5. 명세 내보내기에서 텍스트를 복사하세요. 계속 편집할 원본은 JSON으로 내려받으세요.

예시: 입력창과 조회 버튼 전달하기

Desktop 1280×800에 한 줄 입력과 버튼을 추가합니다. 입력 라벨은 ‘이름’, 변수명은 ‘userName’, 버튼 문구는 ‘조회’, 동작 설명은 ‘입력한 이름으로 목록을 조회한다’로 적습니다.

명세에는 두 요소의 종류·ID·위치·크기와 조회 동작 설명이 들어갑니다. API 주소와 모바일 대응을 입력하지 않았다면 미정으로 남습니다. 실제 조회나 회원 관리 기능이 만들어지는 것은 아닙니다.

출력 형식 선택

• JSON: 전체 배치와 속성을 저장하는 편집 원본입니다. JSON 불러오기로 복원합니다.
• Markdown: 화면 목적, 영역별 요소, 표 열과 동작 설명을 읽기 쉬운 문서로 만듭니다.
• AI 전달용 텍스트: 같은 명세에 구현 요청과 미정 사항 확인 지침을 덧붙입니다. 이미지 분석이 없는 AI에도 직접 전달할 수 있습니다.

모든 형식은 같은 설계 데이터를 기준으로 합니다. 미입력 업무 규칙·API·반응형 동작은 추정하지 않습니다.

저장과 작업 보호

브라우저 저장은 기본으로 꺼져 있습니다. 직접 켜면 변경 사항을 기기에 저장하고 다음 방문 시 복구를 선택할 수 있습니다. 브라우저 데이터 삭제·비공개 모드·저장 공간 부족으로 기록이 사라질 수 있으므로 중요한 설계는 JSON으로 백업하세요. 공용 기기에서는 저장 해제로 기록을 삭제할 수 있습니다. 새 화면·불러오기·삭제는 확인 후 적용하며 실행 취소는 최근 50단계를 지원합니다.

지원 범위와 제한

한 파일에 화면 하나와 최대 200개 요소를 담습니다. JSON 불러오기는 2MB, 표 열은 30개까지 지원합니다. Desktop·Tablet·Mobile은 설계 기준 크기이며 반응형 화면을 자동 생성하지 않습니다. 패널 안의 위치는 부모 패널 기준입니다. 크기 변경으로 밖으로 나간 요소는 배치 목록에서 선택해 위치를 수정하세요.

캔버스의 입력창·버튼·표는 설계 표시입니다. 실제 검색·API 호출·페이지 이동을 실행하지 않습니다. PNG/PDF, 여러 화면 연결, AI 자동 생성, 코드 생성, 협업은 제공하지 않습니다. 명세 전달 후 구현상의 미정 사항을 별도로 확인하세요.

자주 묻는 질문