안녕하세요, 최서원입니다. 두 주 전에 이어서, 개발을 진행하는 과정을 보여드리고자 합니다.
진행 과정 질문하기
우선, 저는 모바일 어플리케이션에 대한 개발 경험과 어플리케이션의 구조를 짜는 경험을 해본 적이 없기 때문에, GPT에게 프레임워크 작성을 의뢰했습니다.
프롬프트: good. Remember the stories you just made. With the stories we just created, we will form a team to create a lifestyle storybook application for young children. The format is a mobile application, and the environment is Android. Act like you're an app developer. Could you please write the basic framework of an educational application with 7 short stories?
답변:
Absolutely! Here's a basic framework for the "Adventures of Prince Leo in Habitville" educational storybook application for Android:
---
Habitville Adventures: Mobile App Framework
1. App Introduction:
- App Name: Habitville Adventures with Prince Leo
- Logo: A colorful depiction of Prince Leo with the iconic locations from the stories in the background (like the Whispering Waterfall and Chef Bumblebee's picnic blanket).
- Tagline: Discover magical habits with Prince Leo!
---
2. Home Screen:
- Title Banner: Features the app name and logo.
- Episodes List: Displays a scrollable list of all 7 stories.
- Each story has a vibrant icon representing its theme.
- Brief one-line description for each episode.
- Settings Button: To adjust sound, narration speed, and language options.
---
3. Individual Episode Screen:
- Story Display:
- Vibrant illustrations on each page.
- Interactive animations (e.g., tap the Whispering Waterfall to hear its whisper).
- Clear, child-friendly text beneath each illustration.
- Narration Option:
- Clickable play button for audio narration of the story.
- Option to choose between male/female narrator.
- Interactivity: Small clickable elements for engagement (e.g., moving butterflies in the meadow).
- Progress Bar: Shows how much of the story has been read.
- Back to Home: Easily accessible button to return to the main menu.
---
4. Quiz & Activities (Post Story Interaction):
- After each story, kids can engage in:
- Simple Quizzes: Questions related to the habit discussed, using pictures and multiple-choice options.
- Interactive Activities: Mini-games like "Help Leo pick colorful fruits for his breakfast" or "Guide Leo through a safe path".
- Sticker Rewards: On completion, kids earn stickers related to the story's theme.
---
5. Parental Corner:
- Progress Tracking: Shows which stories the child has completed and their quiz scores.
- Feedback Option: Allows parents to provide feedback on stories or report issues.
- Additional Resources: Links to articles or tips about nurturing these habits in children.
---
6. Additional Features:
- Night Mode: A darker theme for bedtime reading.
- Bookmark: Save a particular page to come back to later.
- Search Option: Search for favorite episodes or keywords.
- Offline Mode: Download stories to read without an internet connection.
---
7. Conclusion & Outro:
- Completion Badge: After finishing all stories, kids earn a "Habitville Hero" badge.
- Share: Option for parents to share their child's progress on social media.
- Feedback & Rating: Prompt for parents to rate the app and provide feedback for improvements.
---
8. Technical Aspects:
- Compatibility: Ensure the app is compatible with various Android devices and screen sizes.
- Performance: Optimize animations to run smoothly.
- Security: Ensure children's data is protected, and there are no external unsafe links.
---
This framework serves as a starting point, but as development progresses, more features or modifications can be introduced based on user feedback and technical requirements.
개발 환경 질문하기
다음으로는, 저는 전혀 사용 경험이 없는 Android에 대한 개발 환경을 구축하기 위한 질문을 하였습니다.
프롬프트: good. Please explain to me step by step how to develop this application, along with code, according to the framework you have just written.
답변:
어떻게 개발해야 하는지에 대한 개괄적인 내용을 설명해 주는 것을 확인할 수 있습니다. 다만, 저는 개발 환경에 대하여 더 궁금하였기 때문에 추가 질문을 진행하였습니다.(하단부터는 토큰의 이유로 프롬프트 창을 바꾸어 진행하였습니다.)
개발 환경 구축 질문하기(2)
프롬프트: 안녕, 나는 학교에 들어가기 전의 유아를 위한 생활 습관 어플리케이션을 개발하고 싶 어. 네가 개발자라고 생각하고, 다음 조건에 따라 어플리케이션의 파일 구조를 만들어 줘. 1. 환경: Android Studio 2. 프레임워크: 상단에 제시한 프레임워크를 그대로 사용해 줘.
답변:
GPT가 기본적인 어플리케이션의 구조를 작성해 주었습니다. 다만 Android Studio에 대한 Background가 전혀 없기 때문에, 해당 사항을 질문해 보았습니다.
프롬프트: 좋아. 이 파일 구조를 쉽게 구축하는 방법이 있을까? 한 번에 프레임워크를 구축하는 방법이 Android에도 있는지 알고 싶어.
답변:
답변의 내용 중 1. 프로젝트 템플릿 사용이 가장 합리적이라고 판단하였고, 모바일 어플리케이션에 익숙하지 않아 템플릿을 결정하기 위해 GPT에게 다시 한 번 질의를 하였습니다.
프롬프트:
안녕. 1번에서 제안한 것처럼, 프로젝트 템플릿을 사용하고자 해. 네가 개발자라고 상상한 후, 제시한 프레임워크에, 어떤 프로젝트 템플릿이 가장 적합할지 결정해 줘.
답변:
이 단계에서 GPT가 제시한 방안이 합리적이라고 판단하여, Navigation Drawer Views Activity를 선택하였습니다. 이후, 언어를 JAVA로 설정하여(해당 언어에 관하여는 경험이 거의 없는 상태입니다) 태블릿을 구성하였습니다. (이후의 옵션에 대해서도 하나씩 질문하여 보았으나, 내용이 너무 방대하여 해당 질문에 대한 프롬프트 첨부는 생략하겠습니다!)
기능 예시 확인하기
이후, 실제로 어떠한 구조로 개발이 진행되는지 알고 싶어, 특정 기능을 개발하는 예시 코드를 작성하는 프롬프트를 작성하였습니다.
프롬프트: 안녕, 나는 EpisodeActivity에 대한 내용을 작성하고자 해. String으로 제시된 내용을 네 컷의 그림에 맞추어 한 페이지에 한 장의 그림과 한 덩어리의 내용이 들어가도록 내용을 표출할 거야. 네가 개발자라고 생각하고, java 파일과 리소스 파일을 작성해 줘.
답변:
안녕하세요! Java와 XML을 사용하여 "EpisodeActivity"에 대한 간단한 예제 코드를 작성하겠습니다. 이 예제에서는 ViewPager를 사용하여 4개의 슬라이드(각각의 슬라이드는 하나의 그림과 하나의 텍스트로 구성됩니다)를 표시합니다.
Java 파일 (EpisodeActivity.java)
javaCopy codepackage com.example.habitvilleadventures;
import android.os.Bundle;
import androidx.annotation.NonNull;
import androidx.fragment.app.Fragment;
import androidx.fragment.app.FragmentManager;
import androidx.fragment.app.FragmentPagerAdapter;
import androidx.appcompat.app.AppCompatActivity;
import androidx.viewpager.widget.ViewPager;
public class EpisodeActivity extends AppCompatActivity {
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_episode);
ViewPager viewPager = findViewById(R.id.viewPager);
EpisodePagerAdapter episodePagerAdapter = new EpisodePagerAdapter(getSupportFragmentManager());
viewPager.setAdapter(episodePagerAdapter);
}
private static class EpisodePagerAdapter extends FragmentPagerAdapter {
private final String[] episodeTexts = {
"This is the text for episode 1",
"This is the text for episode 2",
"This is the text for episode 3",
"This is the text for episode 4"
};
private final int[] episodeImages = {
R.drawable.episode1_image,
R.drawable.episode2_image,
R.drawable.episode3_image,
R.drawable.episode4_image
};
public EpisodePagerAdapter(@NonNull FragmentManager fm) {
super(fm);
}
@NonNull
@Override
public Fragment getItem(int position) {
return EpisodeFragment.newInstance(episodeTexts[position], episodeImages[position]);
}
@Override
public int getCount() {
return episodeTexts.length;
}
}
}
XML 파일 (activity_episode.xml)
xmlCopy code<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".EpisodeActivity">
<androidx.viewpager.widget.ViewPager
android:id="@+id/viewPager"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toTopOf="parent" />
</androidx.constraintlayout.widget.ConstraintLayout>
Fragment (EpisodeFragment.java)
각 페이지는 이 프래그먼트를 사용하며, 텍스트와 이미지를 인자로 받습니다.
javaCopy codepackage com.example.habitvilleadventures;
import android.os.Bundle;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.ImageView;
import android.widget.TextView;
import androidx.annotation.NonNull;
import androidx.annotation.Nullable;
import androidx.fragment.app.Fragment;
public class EpisodeFragment extends Fragment {
public static EpisodeFragment newInstance(String text, int imageResource) {
EpisodeFragment fragment = new EpisodeFragment();
Bundle args = new Bundle();
args.putString("text", text);
args.putInt("image", imageResource);
fragment.setArguments(args);
return fragment;
}
@Nullable
@Override
public View onCreateView(@NonNull LayoutInflater inflater, @Nullable ViewGroup container, @Nullable Bundle savedInstanceState) {
View view = inflater.inflate(R.layout.fragment_episode, container, false);
TextView textView = view.findViewById(R.id.episodeText);
ImageView imageView = view.findViewById(R.id.episodeImage);
Bundle args = getArguments();
if (args != null) {
textView.setText(args.getString("text"));
imageView.setImageResource(args.getInt("image"));
}
return view;
}
}
Fragment의 XML 파일 (fragment_episode.xml)
xmlCopy code<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent">
<ImageView
android:id="@+id/episodeImage"
android:layout_width="match_parent"
android:layout_height="0dp"
android:scaleType="fitCenter"
android:layout_weight="1" />
<TextView
android:id="@+id/episodeText"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:textSize="18sp"
android:padding="16dp" />
</androidx.constraintlayout.widget.ConstraintLayout>해당 예시처럼, GPT와 각 기능에 대해 질의를 해가며 프로그램을 완성할 예정입니다. 환경에 대한 이해가 부족하여, 프롬프트를 작성하여 원하는 해답을 얻기까지 걸리는 시간이 걸리는 것 같습니다. 실무에서 사용하지 않아본 언어로 프로그램을 구성하는 것도, GPT를 통해 가능하다는 것을 확인하게 되었습니다. (사정이 생겨 완성을 하지 못하였습니다. 스터디가 끝난 이후에 시간을 할애하여, 프로젝트를 완성할 예정입니다.)