AI 코딩 도구로 1시간 만에 완성한 재활용 가이드 앱

소개

아이디어에서 출시까지, 단 2시간의 여정

"책, 냉장고, 옷걸이... 이런 물건들을 어떻게 버려야 할까?"

일상에서 마주치는 이 질문에 답하기 위해 재활용 가이드 앱을 만들었습니다. 폐기물 종류별로 처리 방법 3가지를 제안하는 모바일 앱인데, 전통적인 개발 방식이라면 몇 주가 걸렸을 작업을 AI 코딩 도구 Manus를 활용해 단 1시간 만에 완성했습니다.

진행 방법

어떤 도구를 사용했고, 어떻게 활용하셨나요?

사용한 프롬프트 전문을 꼭 포함하고, 내용을 짧게 소개해 주세요.

"쓰레기 재활용 방법을 알려주는 앱을 만들려고 해. 책, 옷걸이, 책장, 전기다리미 등등 다양한 종류의 폐기물이 나오는데, 가능한 처리 방법을 3가지 정도 제안하는 앱이야. 중요한 것은 폐기물별로 다른 처리 방법이야."

활용 이미지나 캡처 화면을 꼭 남겨주세요.

QR 코드와 품목 목록이 표시된 휴대전화 화면

개발 과정: 기획부터 배포까지 (Manus의 사례글 작성 skill 활용)

1단계: 앱 구조 설계 (15분)

먼저 앱의 핵심 기능을 정의했습니다. 사용자가 폐기물을 검색하면 처리 방법 3가지를 카드 형태로 보여주는 구조입니다. 각 처리 방법에는 난이도, 비용, 환경 친화도 같은 메타데이터를 포함시켰습니다. Manus에 이 요구사항을 입력하면, 앱은 자동으로 React Native + Expo 프레임워크로 스캐폴딩되었습니다.

2단계: 데이터 구성 (20분)

18개의 폐기물 품목(책, 신문지, 박스, 전기다리미, TV, 냉장고 등)을 6개 카테고리(종이류, 가전제품, 가구, 의류, 플라스틱, 기타)로 분류하고, 각 품목마다 처리 방법 3가지를 정의했습니다. 예를 들어 "책"의 경우 재활용 수거함 배출, 중고서점 판매, 기부 기관 제공 이렇게 3가지 옵션을 제시합니다. 이 모든 데이터를 TypeScript 파일로 구조화하는 데 Manus의 자동 완성 기능이 큰 도움이 되었습니다.

3단계: UI 구현 (40분)

홈 화면에는 카테고리 필터 칩과 2열 카드 그리드를 배치했습니다. 사용자가 "가전제품"을 탭하면 해당 카테고리의 폐기물만 필터링되어 표시됩니다. 상세 화면에서는 처리 방법 카드를 탭하면 진행 순서, 난이도, 비용, 환경 친화도(🌿 아이콘)가 펼쳐지는 애니메이션 효과를 구현했습니다. 검색 화면에서는 실시간 검색과 최근 검색어 저장 기능을 추가했습니다.

4단계: 브랜딩 및 테마 (15분)

초록색과 주황색을 조합한 환경 친화적 브랜드 테마를 적용했습니다. Manus의 이미지 생성 기능으로 재활용 심볼을 담은 앱 로고를 만들고, 이를 iOS와 Android 모두에 적용했습니다.

5단계: 테스트 및 배포 (30분)

단위 테스트를 작성해 폐기물 데이터의 유효성을 검증했습니다. 모든 항목이 정확히 3가지 처리 방법을 가지고 있는지, 카테고리가 올바르게 분류되어 있는지 확인했습니다. Expo Go 앱에서 테스트할 때 AsyncStorage 에러가 발생했지만, Manus의 디버깅 제안으로 try-catch 에러 처리를 추가해 문제를 해결했습니다.

결과와 배운 점

AI 코딩 도구의 가치

이 프로젝트를 통해 느낀 점은 AI 도구가 반복적인 작업을 제거해준다는 것입니다. 보일러플레이트 코드 작성, 컴포넌트 구조화, 에러 처리 같은 기계적인 작업은 AI가 담당하고, 개발자는 아이디어 구현과 사용자 경험 개선에만 집중할 수 있었습니다.

또한 빠른 반복 개발이 가능했습니다. 기능을 추가하거나 수정할 때마다 즉시 피드백을 받고 개선할 수 있었고, 버그가 발생했을 때도 AI의 디버깅 제안으로 빠르게 해결할 수 있었습니다. 특히 Expo Go 환경에서의 호환성 문제를 해결할 때, AI가 제시한 에러 처리 패턴이 매우 실용적이었습니다.

마치며

"좋은 아이디어가 있지만 개발이 어렵다"고 생각하는 GPTers 수강생들에게 이 프로젝트는 하나의 증명입니다. 기술적 장벽은 생각보다 낮아졌습니다. 명확한 요구사항과 AI 도구만 있으면, 누구나 실제로 동작하는 앱을 만들 수 있습니다.

다음 단계로는 폐기물 데이터를 더 확장하고, 사용자 위치 기반 수거 시설 안내, 앱 내 커뮤니티 기능 등을 추가할 계획입니다. 이 모든 것도 AI의 도움을 받으면 충분히 가능할 것 같습니다.

당신의 아이디어도 앱으로 만들 수 있습니다. 시작해보세요.

결과물의 특징

폐기물별 맞춤형 처리 방법

이 앱의 핵심은 "일률적인 안내가 아닌 선택지 제공"입니다. 책을 버리는 방법도 3가지인데, 시간이 없으면 재활용 수거함에, 돈을 벌고 싶으면 중고서점에, 사회 기여를 원하면 기부 기관에 보낼 수 있습니다. 각 선택지마다 난이도와 비용이 다르므로 사용자가 상황에 맞춰 선택할 수 있습니다.

직관적인 UI/UX

카테고리 필터, 실시간 검색, 최근 검색어 저장 등 사용자 경험을 고려한 기능들이 iOS 디자인 가이드라인을 따릅니다. 처리 방법 카드의 확장/축소 인터랙션은 정보 과부하를 방지하면서도 필요한 세부 정보를 제공합니다. 각 처리 방법마다 진행 순서를 단계별로 표시하고, 환경 친화도를 시각적으로 표현해 사용자가 한눈에 비교할 수 있습니다.

데이터 기반 설계

폐기물 정보를 중앙화된 TypeScript 파일에서 관리하므로, 새로운 품목을 추가하거나 처리 방법을 수정할 때 코드 변경 없이 데이터만 업데이트하면 됩니다. 이는 나중에 팀원들이 앱을 유지보수할 때 매우 효율적입니다.

도움 받은 글 (옵션)

참고한 지피터스 글이나 외부 사례를 알려주세요.

(내용 입력)

뉴스레터 무료 구독

👉 이 게시글도 읽어보세요