Genspark AI Developer로 POV 배너 앱 만들기

소개

갤럭시 Z Fold 6을 사용하면서 "폴더블의 큰 화면을 활용한 독특한 경험을 만들어보면 어떨까?"라는 생각이 들었습니다.

공중에 텍스트가 떠있는 것처럼 보이는 POV(Persistence of Vision) 배너를 폴더블 기기로 구현하면, 콘서트나 행사에서 멋진 응원 도구가 될 것 같았어요. 특히 여러 대의 폰을 동기화하면 더 큰 메시지를 만들 수 있을 것 같다는 아이디어가 떠올랐습니다 😄 (참고 Youtube 영상)

평소 Genspark AI Developer를 주력 개발 도구로 사용하고 있었기에, 이번에도 이 도구로 빠르게 프로토타입을 만들어보기로 했습니다.

진행 방법

개발 전략 🎯

비개발자 이지만 AI를 활용해서 프로덕트를 만드는 Flowgrammer로서, 다음과 같은 단계적 접근을 선택했습니다:

1단계: 웹 프로토타입으로 빠른 검증 (선택한 방법)

HTML5 + JavaScript 기반
센서 API 작동 여부 확인
개념 검증 후 네이티브 앱 전환

2단계: 안드로이드 네이티브 앱 (향후 계획)

Kotlin + Android Studio
폴더블 전용 최적화
플레이스토어 출시

프로젝트 요청사항

프로젝트명: POV-Banner-Prototype

목표: 스마트폰을 좌우로 흔들면 텍스트가 공중에 떠있는 것처럼 보이는 POV(Persistence of Vision) 배너 웹앱 만들기

핵심 기능:
1. 디바이스의 가속도계/자이로스코프를 사용해 움직임 감지
2. 움직임 속도와 방향에 따라 텍스트를 세로 줄(column) 단위로 순차 표시
3. 한글 텍스트 입력 및 표시 지원
4. 어두운 배경에 밝은 글자 (POV 효과 최대화)
5. 텍스트 색상, 크기 조절 가능
6. 폴더블 폰(대화면) 최적화

기술 스택:
- HTML5
- CSS3 (다크 모드)
- JavaScript (Vanilla JS)
- DeviceMotionEvent / DeviceOrientationEvent API
- 반응형 디자인 (모바일 우선)

UI 구성:
1. 설정 화면:
   - 텍스트 입력 필드 (기본값: "사랑해요")
   - 색상 선택 (기본값: 빨간색)
   - 글자 크기 조절 (슬라이더)
   - 민감도 조절 (슬라이더)
   - 시작 버튼

2. 디스플레이 화면:
   - 전체 화면 검은 배경
   - 중앙에 한 줄의 픽셀 컬럼 표시
   - 상단에 작은 정지 버튼

작동 원리:
1. 텍스트를 캔버스에 렌더링하여 픽셀 데이터 추출
2. 가로 방향을 세로 컬럼으로 분할 (각 컬럼은 1-2px 폭)
3. 가속도계로 좌우 움직임 속도 감지
4. 움직임 방향과 속도에 맞춰 순차적으로 컬럼 표시
5. 빠르게 흔들수록 전체 텍스트가 더 빨리 완성됨

주의사항:
- HTTPS 환경 필요 (센서 API 사용 위해)
- iOS Safari의 경우 센서 권한 요청 필요
- 화면 밝기 최대화 안내
- 어두운 환경에서 사용 권장 안내

추가 기능:
- 좌우 방향 자동 감지
- 움직임 없을 때 대기 상태
- 캘리브레이션 기능 (사용자의 흔드는 속도 학습)

결과물

https://gilded-taiyaki-833e8e.netlify.app/

✅ POV 알고리즘

텍스트를 세로 픽셀 단위로 분할
자이로스코프 센서로 실시간 움직임 감지
속도에 맞춰 프레임 순차 표시
좌우 양방향 지원

✅ 사용자 설정 UI

실시간 텍스트 입력 (한글 완벽 지원)
컬러 피커
글자 크기 슬라이더
센서 민감도 조정

✅ 폴더블 최적화

7.6인치 대화면 활용
반응형 레이아웃
접힌 상태에서 빠른 설정
펼친 상태에서 POV 디스플레이

✅ 크로스 플랫폼

iOS Safari 센서 권한 처리
Android Chrome 완벽 지원
DeviceMotionEvent API 활용

배포 및 테스트

센서 API가 HTTPS 환경에서만 작동하기 때문에 Netlify Drop을 이용해 즉시 배포했습니다:

Netlify Drop 페이지 접속

드래그 앤 드롭(Drag & Drop)은 온라인으로 파일을 드래그 앤 드롭할 수 있는 웹사이트입니다.

HTML 파일 드래그 앤 드롭
자동 생성된 URL로 접속
어두운 곳에서 화면 밝기 최대로 설정 후 테스트

Screen_Recording_20260121_203210_Kakao Work_1768995302173.mp4

2.35MB

[Genspark AI Developer 소감]

🚀 빠른 프로토타이핑: 아이디어에서 작동하는 프로토타입까지 단 하루 만에 완성
🎯 명확한 가이드: 구현 가능/불가능 범위를 사전에 설명해줘서 현실적인 목표 설정 가능
📱 센서 API 전문성: 모바일 센서와 관련된 HTTPS 요구사항, 권한 처리 등을 자동으로 해결
🔧 즉시 배포 가능: 웹 기반이라 별도 빌드 없이 바로 테스트 가능
🌐 크로스 플랫폼: iOS/Android 모두 지원하는 코드를 한 번에 생성

배운 점과 다음 단계

💡 핵심 인사이트

센서 API는 HTTPS 필수: 로컬 파일로는 센서 접근이 제한되므로 반드시 웹 호스팅 필요
폴더블 특화 전략: 접힌 상태에서는 설정, 펼친 상태에서는 디스플레이라는 이중 UX 활용
프로토타입 우선: 네이티브 앱 개발 전 웹으로 빠르게 검증하는 전략이 효과적
Flowgrammer 접근법: 비개발자도 AI 도구를 활용하면 충분히 복잡한 센서 기반 앱 개발 가능

🚀 향후 계획

여러 대 동기화 기능
- Firebase 기반 실시간 동기화
- 템플릿 코드 입력으로 그룹 생성
- 더 큰 메시지 표현 가능
네이티브 앱 전환
- Kotlin + Cursor AI 조합
- Samsung SDK로 Flex Mode 활용
- 플레이스토어 출시
마케팅 전략
- 아이폰 폴더블 출시 타이밍에 iOS 버전 동시 공개
- "폴더블로만 가능한 경험" 포지셔닝
- 유튜브 테크 채널 협업

✨ Flowgrammer로서의 교훈

AI 개발 도구를 잘 활용하면 아이디어 → 프로토타입 → 제품까지의 사이클을 혼자서도 빠르게 돌릴 수 있다는 것을 다시 한번 확인했습니다. 특히 Genspark AI Developer는 명확한 가이드와 함께 실행 가능한 코드를 제공해주어, 비개발자가 기술적 한계를 극복하는 데 큰 도움이 되었습니다 💪

AI의 파도, 함께하면 이뤄낼 수 있어요! 22기 스터디 사전판매 시작 🚀