모듈 2⏱️ 예상 소요 시간: 35분📊 난이도: 중급

모듈 2: 간단한 앱 개발 및 모바일/웹 테스트 방법

React Native / Expo 또는 PWA를 활용한 스마트폰 앱 개발 실습

클로드 AI를 활용하여 스마트폰에서 실제로 구동되는 모바일 앱(To-Do 리스트 또는 실시간 날씨 앱)을 개발하고 테스트하는 과정을 학습합니다.

✅ 기능 명세서 프롬프트 작성 -> React Native (Expo) 앱 작성 -> Expo Go 앱 및 웹 에뮬레이터에서 모바일 테스트

앱 아이디어 기능 명세서 프롬프트 작성

모바일 앱의 상태 관리, 사용자 UI, 터치 인터랙션을 고려한 기획 프롬프트 작성법입니다.

클로드_입력_프롬프트.txttext

1	당신은 모바일 앱 전문 개발자입니다. React Native (Expo)를 사용하여 "스마트 투두(To-Do) 및 습관 관리 앱"을 만들어주세요.
2
3	[핵심 기능]
4	1. 할 일 추가, 완료 체크박스, 삭제 기능
5	2. 카테고리 태그 (공부, 운동, 업무) 필터링
6	3. 달성률 프로그래스 바 (전체 중 완료된 퍼센트 계산)
7	4. AsyncStorage를 활용한 데이터 로컬 저장 (앱을 꺼도 유지)
8
9	Expo 호환 컴포넌트(TouchableOpacity, FlatList, StyleSheet)를 사용한 단일 App.js 코드로 작성해주세요.

복사 버튼을 누른 후 claude.ai 입력창에 그대로 붙여넣으세요.

App.jsjavascript

1	import React, { useState } from 'react';
2	import { StyleSheets, Text, View, TextInput, TouchableOpacity, FlatList } from 'react-native';
3
4	export default function App() {
5	const [tasks, setTasks] = useState([]);
6	const [input, setInput] = useState('');
7
8	const addTask = () => {
9	if (!input.trim()) return;
10	setTasks([...tasks, { id: Date.now().toString(), text: input, completed: false }]);
11	setInput('');
12	};
13
14	return (
15	<View style={styles.container}>
16	<Text style={styles.header}>✨ 클로드 AI 모바일 To-Do</Text>
17	<View style={styles.inputContainer}>
18	<TextInput
19	style={styles.input}
20	placeholder="할 일을 입력하세요..."
21	value={input}
22	onChangeText={setInput}
23	/>
24	<TouchableOpacity style={styles.addButton} onPress={addTask}>
25	<Text style={styles.buttonText}>추가</Text>
26	</TouchableOpacity>
27	</View>
28	</View>
29	);
30	}

React Native Expo로 작성된 기본 투두리스트 핵심 앱 구조 코드

📸 실습 스크린샷 가이드라인

16:9

클로드가 작성한 React Native 모바일 코드와 구조

[이미지 영역: 1920x1080 (16:9)]

🎯 스크린샷 필수 포함 요소:

React Native 모듈 importFlatList 렌더링 함수상태 관리 훅

작성된 코드를 스마트폰에서 QR 코드로 직접 실행해보는 방법입니다.

1. 터미널에서 `npx create-expo-app my-app` 실행 후 생성된 App.js에 코드를 붙여넣습니다. 2. `npx expo start` 입력 시 출력되는 QR 코드를 스마트폰 카메라로 스캔하면 내 스마트폰에서 앱이 즉시 실행됩니다!

📸 실습 스크린샷 가이드라인

16:9

터미널의 QR 코드와 스마트폰 Expo Go 앱에서 실행 중인 앱 스크린샷

[이미지 영역: 1920x1080 (16:9)]

🎯 스크린샷 필수 포함 요소:

터미널 대형 QR 코드Expo Go 로딩 스플래시실제 스마트폰 화면 구동

이번 모듈에서 학습한 핵심 개념을 잘 이해했는지 테스트해보세요.