CRUD UI 와이어프레임 및 컴포넌트 계획 (사용 사례 → 화면 → 필드 수준 동작)
사용자 스토리를 화면 맵, 폼 사양 및 빠른 빌드 또는 인계 준비가 된 컴포넌트 동작으로 변환합니다.
프롬프트 개요
추천 AI 파트너
추천 팁
먼저 탭 순서를 설계하세요; 빈 상태를 조기에 정의하세요; 테이블 동작을 표준화하세요; 비활성 상태는 숨김 상태와 함께 문서화하세요.
운영팀 제공NexusAi Technology해결하는 문제
팀이 공유된 계획 없이 UI 코딩에 뛰어들어 재작업이 발생합니다. 이 계획은 화면, 폼 및 검증을 일관되게 정의합니다.
화면 맵
목록에서 상세, 생성까지의 엔드 투 엔드 경로.
컴포넌트 사양
규칙이 포함된 테이블, 폼, 필터 및 동작.
RBAC 주석
역할별 가시성 및 비활성 상태.
상태 패턴
빈 상태, 오류 및 로딩 규칙.
AI 프롬프트 지침
역할: 속도, 명확성 및 데이터 품질에 중점을 둔 내부 비즈니스 앱의 제품 디자이너 및 UI 아키텍트로 활동합니다.
이 작업이 중요한 이유: 명확한 화면과 폼 규칙은 개발 시간을 단축하고 검증 버그를 줄입니다. 초기 컴포넌트 선택은 일관성을 향상시킵니다.
중요한 경계:
- 키보드 중심 데이터 입력 및 접근 가능한 패턴을 우선시합니다.
- 시각적 잡음을 최소화하고 검증 및 상태를 강조합니다.
- 컴포넌트 라이브러리(예: React + 헤드리스 UI)를 가정하되 프레임워크에 구애받지 않습니다.
사용자 입력:
- 수용 기준이 포함된 주요 사용자 스토리
- 제약 조건이 있는 엔티티 및 주요 필드
- 필요한 역할 및 권한
목표:
1) 화면 맵 및 내비게이션 모델 생성.
2) 폼, 테이블, 필터 및 인라인 검증 명세.
3) 화면 및 컨트롤별 권한 문서화.
4) 빈 상태, 오류 상태, 로딩 상태 정의.
분석 워크플로우:
1) 스토리를 화면 및 흐름으로 변환.
2) 각 화면에 대해 컴포넌트 및 필드 규칙 목록 작성.
3) 테이블 열, 정렬, 필터링 및 페이지네이션 정의.
4) 성공/오류 토스트 및 실행 취소/롤백 패턴 명세.
5) 역할 기반 가시성 및 비활성 상태 매핑.
필수 출력 형식:
- 화면 맵
- 화면별 컴포넌트 및 동작
- 필드별 검증 규칙
- 역할별 RBAC 노트
- 상태 처리(빈/오류/로딩)
- 인계 체크리스트
품질 관리:
- 모든 동작은 가시적 상태 변경 및 확인이 있어야 합니다.
- 모든 필수 필드는 인라인 검증 및 도움말 텍스트가 있어야 합니다.
검증 체크리스트:
- 각 스토리는 최소 하나 이상의 화면 매핑이 있어야 합니다.
- CRUD 흐름은 일관된 내비게이션 및 브레드크럼을 가져야 합니다.
최종 지침: 빠른 와이어프레이밍 또는 컴포넌트 티켓에 적합한 구조화된 계획을 출력하세요.
예상 결과
화면 맵: 대시보드, 요청 목록, 요청 상세, 새 요청, 관리자 설정. 컴포넌트: 요청 목록(열: id, 제목, 상태, 소유자, 업데이트_시간; 필터: 상태, 소유자; 동작: 보기, 편집). 검증: 제목 필수; 금액은 0보다 큰 숫자. RBAC: 요청자는 생성; 승인자는 상태 업데이트; 관리자는 역할 관리. 상태: 빈 화면은 CTA 표시; 오류는 인라인 메시지 표시; 로딩은 스켈레톤 표시.
실행 과정
ChatGPT에서 UI 계획 생성
최고의 사용자 스토리와 필드 제약 조건을 ChatGPT에 제공하세요. 프롬프트를 실행하여 라벨이 붙은 섹션에 화면 맵, 컴포넌트 목록 및 검증 규칙을 받으세요.
20 min저해상도 와이어프레임 작성
Figma를 열고 컴포넌트 목록을 사용하여 각 화면을 스케치하세요. 검증 규칙을 사용하여 필드를 주석 처리하고 프레임에 직접 오류 상태를 정의하세요.
30 min컴포넌트 티켓화
섹션을 테이블, 폼, 필터, RBAC 검사 작업으로 이슈 트래커에 내보내세요. Figma 링크를 첨부하고 각 작업에 대한 수용 기준을 복사하세요.
15 min
