안녕하세요. 오늘은 제가 ‘바이브코딩’을 시작하며 첫 번째 목표로 삼았던 프로젝트, HYPRFEED의 개발 배경과 그 뒤에 숨겨진 이야기를 공유해보려 합니다.
1. 20년의 리서치, 그리고 닥쳐온 ‘정보의 홍수’
저는 지난 20년 가까이 매일 리서치를 쉬지 않았습니다. 관심 있는 블로그와 뉴스그룹의 RSS를 하나둘 모으다 보니 어느덧 구독하는 피드만 200개가 넘어가더군요.
정보를 수집하는 것은 즐거운 일이었지만, 어느 순간부터 심각한 문제가 발생했습니다. ‘읽는 것’보다 ‘내가 읽어야 할 것을 골라내는 것’이 더 큰 일이 되어버린 것이죠.
2. 느린 읽기 속도와 쌓여가는 스트레스
저는 사실 글을 빨리 읽지 못합니다. 모국어인 한국어조차 읽는 속도가 많이 느린 편인데, 매일 쏟아지는 수백 개의 피드를 훑어보는 데만 1시간이 넘게 걸리기 시작했습니다.
바쁜 일상 속에서 리서치에 너무 많은 시간을 뺏기다 보니 생활의 밸런스 가 무너졌고, 미처 다 읽지 못한 피드들을 보며 ‘정보를 놓치고 있다’는 압박감과 스트레스에 시달려야 했습니다.
3. 또 하나의 장벽: 다국어의 높은 벽
대부분의 양질의 정보는 영어로 되어 있습니다. 하지만 영어를 읽는 것은 제게 한국어보다 몇 배는 더 힘든 일이었습니다. 최적화를 위해 다양한 번역기를 동원해봤지만, 매번 복사하고 붙여넣는 과정 자체가 또 다른 노동이었습니다.
최근 AI 기술이 발전하면서 자동 번역과 요약이 쉬워졌지만, 이번에는 ’비용’과 ‘자동화’가 발목을 잡았습니다. 시중에 나와 있는 도구들은 저에게 딱 맞춘 듯한 편리함을 주지 못했죠.
4. 세 번의 도전 끝에 완성된 ‘나만의 도구’
결국 깨달았습니다.
나의 읽기 습관과 필요에 완벽하게 최적화된 RSS 도구가 직접 필요하구나.
그렇게 HYPRFEED가 탄생했습니다. 사실 제 코딩 실력이 늘어감에 따라 이 프로젝트는 벌써 세 번째 버전입니다. 첫 번째와 두 번째 버전에서의 시행착오를 거쳐, 드디어 세 번째 버전인 지금에 와서야 저에게 딱 맞는 옷처럼 완성되었습니다.
5. hyprfeed가 해결한 것들
AI 기반 자동 요약: 수많은 글 중 핵심만 빠르게 파악하여 읽을지 말지를 결정합니다.
매끄러운 번역: 언어의 장벽 없이 전 세계의 정보를 모국어처럼 편하게 받아들입니다.
데일리 Brief(브리핑): 수많은 뉴스 중 지금 가장 중요한 내용만 추려내어 짧은 브리핑 형태로 제공합니다. 바쁜 아침, 이것만 봐도 흐름을 놓치지 않습니다.
나에게 최적화된 인터페이스: 불필요한 노이즈를 제거하고 ‘읽기’ 본연의 가치에 집중했습니다.
하이퍼피드 랜딩 페이지
iPhone의 피드 앱 스크린샷
아이폰의 문자 메시지 스크린샷
앱 소스 목록의 스크린샷
아이폰의 뮤직 플레이어 앱 스크린샷
배경이 어두운 게임의 프로필 화면
6. 기술 스택 및 서비스 구조
HYPRFEED는 최신 기술을 활용해 빠르고 효율적인 정보 처리에 집중했습니다.
Frontend: React Native를 사용하여 iOS와 Android 모두에서 일관된 사용자 경험을 제공합니다. 특히 읽기 중심의 UI인 만큼 성능 최적화에 신경 썼습니다.
Logic & Language: TypeScript를 기반으로 안정적인 데이터 흐름을 설계했습니다.
AI Integration: OpenAI(GPT-4o) 및 최신 LLM 모델을 연동하여 텍스트의 요약, 번역, 그리고 데일리 브리핑 생성을 자동화했습니다.
Architecture:
Feed Aggregator: 200여 개의 RSS 소스에서 실시간으로 데이터를 수집합니다.
AI Processing Layer: 수집된 원문 데이터를 AI가 분석하여 번역 및 요약을 수행하고, 사용자 성향에 맞는 브리핑 데이터를 생성합니다.
Mobile App: 처리된 최적의 데이터를 사용자에게 가장 읽기 편한 형태로 전달합니다.
7. 웹앱을 React Native로 포팅한 실전 기록
(이 섹션은 Claude의 도움을 받아 작성되었습니다)
왜 React Native인가?
HYPRFEED는 원래 React + Vite로 만든 웹앱이었습니다. RSS 피드를 모아서 AI로 요약해주는 서비스인데, 웹에서만 쓰기엔 아쉽기도 했고 지하철에서 보기 편해야 했습니다. Claude가 제시한 선택지는 세 가지였습니다:
PWA → 네이티브 경험이 없고 App Store 배포도 애매
Flutter → 언어를 새로 배워야 함(내가 배우는건 아니지만..)
React Native + Expo → 기존 React 코드 재활용 가능, TypeScript 그대로
당연히 마지막 선택. 바이브코더는 마찰을 줄이는 쪽으로 갑니다.
스택 구성
항목
선택
프레임워크
React Native 0.81 + Expo SDK 54
언어
TypeScript
인증 + DB
Supabase
API 서버
Vercel Serverless Functions
인앱결제
RevenueCat
빌드
EAS Build
한 가지 주의할 점이 있습니다. React Native 0.81부터 New Architecture가 기본으로 켜져 있는데, 아직 서드파티 라이브러리 호환이 불안정하다고하니 app.json에서 "newArchEnabled": false로 꺼두는 게 현시점에서 안전합니다.
Step 1. 프로젝트 초기화
Expo CLI로 TypeScript 템플릿을 받는 것부터 시작합니다. 기존 웹 프로젝트가 있다면 src/ 폴더 안의 비즈니스 로직 파일들(API 호출, 상태 관리, 유틸 함수)은 그대로 복사해도 됩니다. React Native는 React와 import 구조와 훅이 완전히 동일하기 때문에 바꿔야 하는 건 화면을 그리는 UI 레이어뿐입니다.
Step 2. 네비게이션 설계
React Navigation 라이브러리를 사용하는데 HYPRFEED의 구조는 아래와 같습니다.
앱 전체 (RootStack)
├── 온보딩: 랜딩, 로그인
└── 메인 (BottomTab — 하단 탭바)
├── Feed 탭 → 피드 목록 → 히스토리
├── Brief 탭 → 브리프 → 히스토리
├── Sources 탭
├── Browse 탭
└── Profile 탭 → 결제 내역 → 약관
중요한 패턴은 탭 안에 스택 네비게이터를 중첩하는 것입니다. 탭마다 독립적인 화면 히스토리가 필요할 때 이 구조가 필요합니다. 예를 들어 Feed 탭에서 히스토리 화면으로 들어갔다가 뒤로 가도, 다른 탭의 히스토리 상태에 영향을 주지 않습니다.
Step 3. Supabase 인증 설정
웹에서는 Supabase가 세션을 localStorage에 저장하지만, 모바일에서는 expo-secure-store로 교체해야 한다. 세션 토큰을 기기의 키체인에 안전하게 저장하는 방식입니다.
추가로 flowType을 pkce로 설정하는 것이 필수다. 모바일 OAuth에서 보안 취약점이 있는 기존 방식(implicit flow) 대신, 코드 교환 방식(PKCE)을 쓰도록 명시하는 옵션입니다.
Step 4. 딥링크 연결
Google/Apple 로그인 후 앱으로 돌아오려면 딥링크 스킴이 있어야 합니다. app.json에 "scheme": "hyprfeed"를 설정하면 hyprfeed:// 주소로 앱을 열 수 있게 됩니다.
그 다음 Supabase 대시보드에서 허용 URL 목록에 hyprfeed://를 등록해야 인증 후 리다이렉트가 정상적으로 작동합니다. 개발 중에는 exp://도 추가해두면 Expo Go 앱에서도 테스트할 수 있습니다.
Step 5. API 서버 분리
RSS 파싱과 AI 요약은 앱에서 직접 호출하지 않고 Vercel Serverless Function으로 분리했습니다. 이유는 두 가지입니다:
첫째, 많은 RSS 서버가 모바일 앱의 직접 요청을 CORS로 차단한다. 서버를 중간에 두면 이 문제가 없다.
둘째, Gemini API 키 같은 민감한 정보를 앱 번들에 포함시키면 안 된다. 서버에서만 사용하고 앱에는 노출하지 않는다.
로컬 개발할 때는 npx vercel dev로 Vercel 함수를 로컬에서 실행하고, 환경변수에서 API URL을 localhost:3000으로 설정하면 시뮬레이터에서도 그대로 테스트할 수 있습니다.
Step 6. RevenueCat으로 인앱결제 연동
App Store 인앱결제를 직접 구현하면 StoreKit API와 씨름해야 해야하는데, RevenueCat이 이걸 대부분 대신 해결해줍니다.
초기화는 앱이 시작될 때 한 번만 하면 되고, 핵심은 Supabase 유저 ID를 RevenueCat의 사용자 식별자로 연결해서 사용하는 것입니다. 이렇게 하면 구독 상태와 유저가 1:1로 연결되어 서버에서도 구독 여부를 정확하게 확인할 수 있게 됩니다.
로그인 이벤트에서 RevenueCat에 동일한 ID로 로그인하고, 로그아웃 이벤트에서 RevenueCat도 함께 로그아웃 처리해주면 됩니다.
Step 7. EAS Build로 Xcode 없이 빌드
EAS를 쓰면 Xcode 없이 터미널에서 명령어 하나로 빌드 할 수 있습니다. 빌드는 Expo 클라우드 서버에서 돌아갑니다. 무료로 월 20회(? 였나;) 정도 무료 빌드할 수 있는데 처음에 그걸 모르고 계속 빌드하다가 나중에 문제가 되었습니다;;
개발 빌드 — 시뮬레이터나 실기기에서 테스트용으로 설치하는 버전
프리뷰 빌드 — TestFlight에 올려서 내부 테스터들이 쓰는 버전
프로덕션 빌드 — App Store에 제출하는 버전이다.
eas submit명령어 하나로 App Store Connect에 자동 업로드
eas.json에 "autoIncrement": true와 "appVersionSource": "remote"를 설정해두면 빌드마다 빌드 번호를 손으로 올릴 필요가 없고 클라우드에서 자동으로 관리됩니다.
HYPRFEED는 현재 iOS만 지원하고 있습니다.
마치며
사람마다 정보를 소비하고 글을 읽는 방식은 모두 다릅니다. 하지만 저처럼 글 읽는 속도가 느려 고민이시거나, 외국어 콘텐츠 소비에 피로감을 느끼시는 분, 혹은 넘쳐나는 정보 속에서 길을 잃은 분들이 계신다면 HYPRFEED가 좋은 대안이 될 수 있을 것 같습니다.
저와 비슷한 고민을 가진 분들과 이 결과물을 나누고 싶습니다. 직접 사용해 보시고 여러분의 소중한 의견도 들려주세요!
