25.09.19 / JUN
상용 앱을 구성하는 6개 핵심 요소(로그인/회원가입, 홈 대시보드, 입력 폼, 목록/상세, 설정, 알림)에 대해, 현대적 프롬프트 엔지니어링 전략(맥락·제약·파일경로·수용기준·테스트 포인트·접근성 등)을 반영한 모범 프롬프트 예시. 스택은 React/Vite, 도구는 Cursor(로직/코드), v0(UI 생성)
1. 로그인 & 회원가입 화면
- 역할: 사용자 인증, 계정 생성
- 구성 요소: 이메일/비밀번호 입력, 소셜 로그인(Google, Apple, Kakao 등)
- 학습 포인트: 입력 처리, 서버 인증 API 연동, 에러 메시지 표시
v0용(UI 생성)
- 목적: 로그인/가입 탭형 카드 UI 생성(Tailwind), 모바일 우선, 폼 라벨과 aria-속성 포함
- 구성: 이메일/비밀번호 입력, “비밀번호 표시” 토글, “기억하기” 체크박스, 제출/취소 버튼
- 에러 메시지는 입력 아래 붉은 helper text로, 제출 버튼은 로딩 스피너 상태 제공
- 상단에는 앱 로고 자리(원형 placeholder), 하단에는 약관/개인정보 링크 행 추가
- 색상은 중립/시스템 톤, 다크모드 지원(
dark:프리픽스)- 산출물:
src/components/auth/AuthCard.tsx단일 컴포넌트, props로mode: "login"|"signup"
Cursor용(로직/코드)
- 컨텍스트: React/Vite + Supabase Auth(email/password, OAuth 없이), 라우팅은 react-router-dom v6 사용
- 목표:
/auth경로에 탭 전환형 로그인/회원가입 구현, 성공 시/dashboard이동, 실패 시 토스트- 제약: 외부 UI 라이브러리 추가 금지,
src/features/auth/하위에 컴포넌트/서비스 분리, zod로 폼 유효성- 산출물:
AuthPage.tsx,auth.service.ts,useAuth.ts,.env.local키 주석 안내(예시 값)- 테스트 포인트: 잘못된 이메일 포맷, 중복가입, 비밀번호 8자 미만 케이스 처리
- 수용 기준: 타입 오류 0, 로딩/에러 상태 표시, Enter로 제출 동작, 성공 후 히스토리 replace 네비게이션
2. 메인 대시보드 / 홈 화면
- 역할: 앱의 핵심 기능이나 콘텐츠를 한눈에 보여줌
- 구성 요소: 카드뷰, 리스트, 배너, 요약 위젯
- 학습 포인트: 리스트/그리드 UI, API에서 데이터 불러오기
v0용(UI 생성)
- 목적: 그리드형 KPI 카드 4개 + 최근 목록 테이블 + 공지 배너 레이아웃 제작(Tailwind)
- 규칙: 카드에는 아이콘/타이틀/주수치/전일 대비 배지(+3.2%) 포함, 테이블는 정렬 가능한 헤더
- 반응형: md 이상 12열 그리드, 모바일 1열, KPI는 2열→4열로 단계 확장
- 접근성: KPI는
aria-labelledby, 테이블 헤더에scope="col"- 산출물:
src/components/dashboard/KpiGrid.tsx,RecentTable.tsx,NoticeBanner.tsx- 스타일: 그림자/라운드는
rounded-2xl shadow-sm, hover 상태는 미묘하게
Cursor용(로직/코드)
- 컨텍스트: 인증된 사용자만 접근,
ProtectedRouteHOC로 가드, TanStack Query로 요약 데이터 패칭- 목표: 상단 KPI 4개(오늘 방문/신규 유저/전환/매출), 최근 항목 리스트, 공지 배너 영역
- 제약: 목데이터 → service 레이어 후 실제 API로 교체 용이하게, 캐시 키/에러 리트라이 1회 제한
- 파일:
src/features/dashboard/DashboardPage.tsx,dashboard.api.ts,types.ts- 성능: skeleton placeholder 제공, 200ms 딜레이 시 skeleton 노출
- 수용 기준: 비로그인 접근 시
/auth리다이렉트, 빈 데이터일 때 공백 상태(Empty state) 표시
3. 데이터 입력 & 관리 화면 (Form)
- 역할: 사용자로부터 정보 입력 받기 (예: 게시글 작성, 일정 추가)
- 구성 요소: TextField, DatePicker, DropDown, 버튼
- 학습 포인트: 폼 입력값 검증, 상태 관리, 저장/수정 기능
v0용(UI 생성)
- 목적: 양식 레이아웃—2열 그리드(라벨/필드), 모바일 1열, 하단 고정 액션 바(취소/저장)
- 필드: 제목(text), 설명(textarea), 카테고리(select), 가격(number), 이미지(upload placeholder)
- 접근성: 각 입력에
id/for연결, 에러 텍스트 role=”alert”, 필수 *표시- 도움말: 각 필드 오른쪽에
?아이콘 호버 시 tooltip- 산출물:
src/components/items/ItemForm.tsx(props:defaultValues,onSubmit)- 톤앤매너: 폼 섹션 구분 카드, 섹션 타이틀 포함
Cursor용(로직/코드)
- 컨텍스트:
react-hook-form + zodResolver, 이미지 업로드는 input file로 mock, 저장은 POST 호출- 목표: 제목/설명/카테고리/가격/이미지 필드 유효성 + 에러 포커스, 성공 시 상세페이지로 이동
- 제약: 컨트롤드 컴포넌트 일관, 숫자 입력 형식 보장(
valueAsNumber), 중복 제출 방지- 파일:
src/features/items/ItemCreatePage.tsx,item.api.ts(create),item.schema.ts(zod)- UX: 저장 중 버튼 disabled + 스피너, 실패 시 재시도 버튼 노출
- 수용 기준: 필수값 누락/범위 벗어남 검출, 저장 성공 토스트, 브라우저 back 시 폼 상태 유지
4. 목록(List) & 상세(Detail) 화면
- 역할: 콘텐츠 탐색 구조 (예: 게시판, 상품 목록 → 상세 페이지)
- 구성 요소: RecyclerView/ListView(안드로이드), List(스위프트UI)
- 학습 포인트: 네비게이션, 항목 클릭 이벤트, 데이터 전달
v0용(UI 생성)
- 목적: 툴바(검색/정렬) + 데이터 테이블/카드 + 페이지네이션 UI
- 테이블: 체크박스 선택, 행 hover, “즐겨찾기” 스타 아이콘 토글
- 상세: 헤더(타이틀/상태 배지/액션 버튼), 본문은 2컬럼 정보 패널
- 반응형: 모바일에서는 카드 리스트로 대체, 툴바는 드로어로 접기
- 산출물:
src/components/items/ItemToolbar.tsx,ItemTable.tsx,ItemDetailView.tsx- 접근성: 검색 input에
aria-label, 테이블 row에aria-selected반영
Cursor용(로직/코드)
- 컨텍스트: 목록은 페이지네이션(쿼리스트링
page), 검색/정렬 쿼리 처리, 상세는 id 기반 패칭- 목표: 리스트에서 선택 → 상세 진입, 캐시 공유, 낙관적 업데이트로 “즐겨찾기” 토글
- 제약: Query 키는
['items', {page, q, sort}], 상세는['item', id], 에러 404 처리- 파일:
src/features/items/ItemListPage.tsx,ItemDetailPage.tsx,items.api.ts- 성능: 리스트 무한스크롤 또는 페이지네이션 중 하나 선택, 스켈레톤 로우 10개
- 수용 기준: 네트워크 실패 시 재시도 버튼, 검색어 없음/결과 없음 empty state
5. 설정(Settings) 화면
- 역할: 사용자 맞춤 환경 제공 (푸시 알림, 다크모드, 언어 변경)
- 구성 요소: 토글 스위치, 체크박스, 슬라이더
- 학습 포인트: 로컬 저장소(UserDefaults, SharedPreferences) 사용, 앱 전역 상태 반영
v0용(UI 생성)
- 목적: 섹션 카드형 설정 페이지—프로필/알림/디스플레이/언어 구역 분리
- 컨트롤: 토글, 셀렉트, 라디오 그룹, 아바타 업로드 placeholder
- 레이아웃: 좌측 사이드 내비게이션 + 우측 상세(≥md), 모바일은 상단 탭
- 접근성: 토글은
role="switch"와 상태aria-checked반영, 키보드 포커스 링 명확하게- 산출물:
src/components/settings/SettingsSection.tsx(슬랏 구조),SidebarNav.tsx- 톤: 절제된 중립 컬러, 섹션 간 divider, 설명 텍스트는
text-sm text-muted로
Cursor용(로직/코드)
- 컨텍스트: 사용자 프로필/알림/테마/언어 설정 로컬 저장 + 서버 패치 API 분리
- 목표: 변경 사항 낙관적 업데이트 후 실패 시 롤백, 다크모드 토글은
data-theme로 즉시 반영- 제약: 로컬 스토리지 키 네임스페이스
app:settings:*, 폼은react-hook-form- 파일:
src/features/settings/SettingsPage.tsx,settings.api.ts,useTheme.ts- 국제화: 언어 선택 시 i18n 리로딩(간단 mock), 날짜/숫자 포맷 예시
- 수용 기준: 저장 성공/실패 토스트, 리프레시 후에도 설정 유지
6. 알림 & 메시지 처리
- 역할: 사용자에게 중요한 이벤트를 알려줌 (푸시 알림, 인앱 알림)
- 구성 요소: Notification API, AlertDialog, SnackBar
- 학습 포인트: 백엔드 연동(Firebase 등), 이벤트 기반 UI 업데이트
v0용(UI 생성)
- 목적: 헤더 벨 아이콘 + 뱃지 + 드롭다운 목록 UI, 빈 상태 일러스트 포함
- 항목: 아이콘/타이틀/시간/읽음배지, hover 시 배경 하이라이트
- 드롭다운: 높이 제한 + 스크롤, “모두 읽음 처리”/“전체 보기” 버튼
- 전체 페이지: 필터(전체/안읽음), 날짜 구분 헤더, 무한스크롤 placeholder
- 산출물:
src/components/notifications/Bell.tsx,NotificationItem.tsx,NotificationList.tsx- 접근성: 벨 버튼
aria-haspopup="menu", 목록 항목role="menuitem"및 키보드 내비게이션
Cursor용(로직/코드)
- 컨텍스트: 인앱 알림 피드(읽음/안읽음), 웹소켓/폴링 중 택1(입문자는 폴링 30s)
- 목표: 헤더 벨 아이콘 배지 표기, 드롭다운에 최신 10개, 전체 보기 페이지 제공
- 제약: 상태는 Zustand 또는 Context로 전역 관리, 알림 클릭 시 관련 상세로 이동
- 파일:
src/features/notifications/useNotifications.ts,BellMenu.tsx,NotificationsPage.tsx- 실패/복구: 네트워크 실패 시 재시도, 읽음 토글 낙관적 업데이트
- 수용 기준: 배지 카운트 정확, 접근 후 자동 읽음 옵션 토글 제공, 탭 전환 간 캐시 유지
첫 포스팅: 25.09.19 / 포스트 문의: JUN (naebon@naver.com)
