[Android App] Cursor로 Anroid 비디오 플레이어 앱 만들기

Vibe coding으로 웹 기반의 응용을 많이 만들지만 Android 앱도 만들 수 있다.

 

- PRD 작성: PRD라고 적었지만, Product라기 보다는 기능이 가져야 하는 요구 사항을 정리한다. PRD는 사실 이 보다는 더 넓은 개념에서 제품에 대해 정리한 부분이기는 하다.

- Empy Project 만들기

- PRD 전달하고 코드 생성하기

- 테스트가 가능해지는 시점에서 빌드하면서 Feedback하고 수정

 

PRD 작성

Wireframe

위와 같은 UI Flow 혹은 Wireframe을 손으로 그렸다. 이 부분에 대한 설명은 다음과 같이 했다.

Android로 첨부한 Wireframe의 앱의 PRD를 작성해줘.
- 첫 화면에서는 버튼이 있어서, 클릭하면 Video Picker가 실행이 돼.
- Video Picker에서 비디오를 선택하면, 가로 화면으로 비디오를 재생해줘.
- 비디오 재생 화면의 오른쪽 상단에 X표 버튼이 있어서, 누르면 첫 화면으로 돌아가.
- 첫 화면에서는 기존에 재생한 비디오 목록을 보여줘. 최대 10개까지 보여줘.

 

아래는 생성된 PRD에서 일부 수정한 내용이다. 예를 들면, 단순화 하기 이해 Room DB와 SharedPreference 중에서 후자를 선택해서 단순화 하고, Thumbnail 추출은 MediaExtractor로 변경하였다.

 

# 📄 Product Requirements Document (PRD)

📱 App Name: VideoPlay

## 🎯 목적 (Purpose)
사용자가 휴대폰에 저장된 비디오를 선택해 전체화면(가로모드)으로 재생하고, 최근 재생한 비디오 목록을 쉽게 다시 접근할 수 있도록 하는 Android 앱.

## 🧑‍💻 주요 기능 (Key Features)
1. 홈 화면 (Home Screen)
구성 요소:
[재생 시작 버튼] : 비디오 선택을 위한 버튼
[최근 재생 목록] : 최대 10개의 최근 재생한 비디오 파일 표시

기능:
사용자가 버튼을 누르면 시스템 Video Picker 호출
최근 재생 목록은 가장 최근 것이 상단에 표시되며, 최대 10개 저장
각 목록은 썸네일 + 파일명 표시

2. 비디오 선택 (Video Picker)
Android 시스템의 파일 선택기 사용 (Intent.ACTION_PICK or Intent.ACTION_OPEN_DOCUMENT)
비디오 MIME 타입 필터링 (video/*)
사용자가 선택한 파일 URI를 앱으로 반환

3. 비디오 재생 화면 (Video Player Screen)
가로 화면 고정 (Landscape)
전체 화면 비디오 재생
오른쪽 상단에 [X] 버튼 배치
누르면 재생 중단 및 홈 화면으로 복귀
재생된 파일은 최근 재생 목록에 추가
기존 목록에 이미 있는 경우, 맨 앞으로 이동

10개를 초과하면 가장 오래된 항목 제거

## 🔁 사용자 흐름 (User Flow)
앱 시작
→ 홈 화면 표시

[재생 시작] 버튼 클릭
→ 시스템 Video Picker 실행

비디오 선택
→ 비디오 재생 화면 전환 (가로 모드)

비디오 재생
→ [X] 버튼 클릭 시 홈으로 복귀

홈화면
→ 최근 재생한 목록에 새 항목 반영됨

## 📱 UI 구성 (UI Components)
### 📄 홈 화면
Button - "비디오 선택"
RecyclerView (수직 스크롤)
아이템 구성: 썸네일, 파일명

### 🎞️ 비디오 재생 화면
VideoView or ExoPlayer
전체 화면 (Landscape)
ImageButton (오른쪽 상단) - X 아이콘

### 💾 데이터 저장 (Storage)
최근 재생한 비디오 리스트
최대 10개
SharedPreferences
저장 항목: URI, 파일명, 썸네일 경로(optional)

### ⚙️ 기술 스택 (Tech Stack)
Language: Kotlin
UI Framework: Android View System / Jetpack Compose (선택)
Media Player: ExoPlayer
저장소: SharedPreferences

### 📝 비고 (Notes)
썸네일은 MediaExtractor에서 추출
재생 중 화면 회전은 고정 (android:screenOrientation="landscape")

 

Cursor로 작업

이 후 작업은 Cursor에서 작업하기 위한 준비 작업과 코드 생성 및 테스트 방법이다. 물론, Cursor에서도 CLI로 gradle build하고 adb로 설치하여 테스트하는 것도 가능하겠지만, Android Studio가 이 작업을 GUI로 처리해 주므로 더 편리할 수도 있다.

 

- Android Studio에 빈 Project를 만든다.

- Cursor에서 이 Project Folder를 연다.

- PRD 전달하고 코드 생성하기

- 테스트가 가능해지는 시점에서 빌드하면서 Feedback하고 수정

 

테스트 시점에서는 Android Studio의 logcat의 경우, App과 관련된 log만 필터 하기 때문에 정말 필요한 정보를 Cursor에 피드백하기 좋다. 아래는 완료된 Video Player 구현 데모 영상이다.

 

동영상 서비스가 종료되어 해당 콘텐츠를 재생할 수 없습니다.

 

마무리

ChatGPT와 같은 LLM으로 코드를 생성하면서 작업도 충분히 가능하지만, Cursor와 같은 IDE의 경우는 피드백 루프를 단순화 해주어 생산성을 더 높여 준다. 여기서 생성한 코드는 아니지만, 유사한 작업을 한 결과물을 github 링크도 남겨 둔다.

 

https://github.com/blcktgr73/ExoVibe