Vercel이 React Native로 네이티브 앱 만든 썰 푼다

 

v0 iOS 앱, 왜 만들었을까?

여러분, Vercel 아시죠? 웹 개발자들 사이에서 난리 난 그 회사요. Next.js 만든 곳이고, 배포 플랫폼으로도 유명하죠. 근데 이 친구들이 최근에 iOS 앱을 만들었어요. 그것도 React Native로요. 처음엔 저도 의아했어요. "웹에 진심인 회사가 왜 갑자기 모바일 앱을?"

알고 보니 목표가 엄청 명확했더라구요. 애플 디자인 어워드를 받을 만한 앱을 만들겠다는 거예요. 그래서 출시 전에 수십 개의 프로토타입을 만들었대요. 기술 스택도 여러 번 바꿔가면서요. 결과적으로 React Native와 Expo를 선택했고, 지금 사용자들한테 "이거 진짜 네이티브 아니냐"는 소리를 듣고 있어요.

참고로 React Native는 2024년 기준 전 세계 모바일 앱 개발 프레임워크 중 점유율 38%로 2위를 기록했고요, Meta를 비롯해 Microsoft, Shopify 같은 글로벌 기업들이 적극 활용하고 있어요. 단순히 크로스플랫폼이라는 이유가 아니라, 이제는 진짜 네이티브급 퀄리티를 낼 수 있다는 걸 증명하고 있죠.

채팅 경험, 디테일이 생명이다

v0 앱의 핵심은 채팅이에요. 근데 그냥 채팅이 아니라, 정말 매끄러운 채팅이요. 새 메시지가 부드럽게 애니메이션되면서 들어오고, 사용자가 보낸 메시지는 화면 상단으로 슬라이드되고, AI 답변은 스트리밍되면서 페이드인 효과로 나타나요.

이거 구현하는 게 얼마나 빡셌냐면요, 키보드 핸들링만 해도 iOS 베타 버전 나올 때마다 망가졌대요. 새 iOS 버전 나올 때마다 고양이와 쥐 게임을 한 거죠. 다행히 react-native-keyboard-controller 라이브러리 관리자가 24시간 안에 업데이트해줘서 해결했다고 하네요.

실제로 React Native 커뮤니티는 2024년 기준 GitHub에서 10만 개 이상의 스타를 받았고, 주간 다운로드 수가 100만 건을 넘어설 만큼 활발해요. 이런 활발한 생태계가 없었다면 v0 팀도 이렇게 빠르게 문제를 해결하지 못했을 거예요.

키보드가 올라올 때 마법 같은 일이

여러분, 채팅 앱 쓸 때 키보드 올라오면서 화면이 이상하게 움직인 경험 있으세요? 메시지가 갑자기 튀어 오르거나, 키보드 내릴 때 화면이 덜컹거리거나요. v0 팀은 이걸 완벽하게 만들고 싶었어요. 키보드가 올라올 때 채팅이 자연스럽게 위로 올라가고, 키보드를 내릴 때도 부드럽게 따라 내려오는 거죠.

이거 하나 구현하는 데 약 1,000줄의 코드가 들어갔대요. 생각해보세요. 단순히 키보드 하나 처리하는 데 천 줄이에요. 게다가 iOS 특유의 버그들도 많았어요. 예를 들어, 앱을 백그라운드로 보냈다가 다시 켜면 키보드 종료 이벤트가 세 번이나 발생한대요. 말도 안 되죠? 이런 엣지 케이스들을 다 잡아내는 게 진짜 개발이더라구요.

Liquid Glass 효과, 진짜 네이티브처럼

iOS 18에서 iMessage에 새로 생긴 Liquid Glass 효과 아세요? 반투명하게 흐릿한 그 느낌이요. 화면 뒤의 콘텐츠가 살짝 비치면서도 깔끔한 그 질감요. v0 팀은 이걸 채팅 입력창에도 적용했어요. @callstack/liquid-glass 라이브러리를 써서 인터랙티브한 글래스 효과를 구현했는데, 정말 네이티브 앱처럼 보이더라구요.

여기서 재미있는 건, 입력창을 화면 하단에 띄우면서도 스크롤 가능한 콘텐츠 위에 자연스럽게 올려놓은 거예요. position: absolute를 쓰면서도 키보드가 올라올 때 채팅 내용이 함께 올라가게 만들었어요. 웹 개발하시는 분들은 아시겠지만, 이게 생각보다 훨씬 어려운 작업이에요. 고정된 요소와 스크롤 가능한 요소를 동시에 컨트롤하는 건 언제나 까다롭거든요.

메시지 애니메이션의 비밀

AI가 답변을 스트리밍할 때 보면, 텍스트가 한 번에 쫙 나오는 게 아니라 단어 단위로 부드럽게 페이드인되잖아요? ChatGPT 쓸 때 그 느낌 있죠. 이것도 다 계산된 거예요. 한 번에 너무 많은 요소가 애니메이션되면 성능이 떨어지니까, 최대 4개의 단어만 동시에 애니메이션되도록 제한했대요.

또 이미 본 내용은 다시 채팅방에 들어가도 애니메이션이 안 나오게 만들었어요. 처음 봤을 때의 그 신선한 느낌은 주되, 불필요한 애니메이션으로 사용자를 피곤하게 만들지 않는 거죠. 이런 디테일 하나하나가 모여서 "와, 이 앱 진짜 잘 만들었네"라는 느낌을 주는 거예요.

ChatGPT 앱이 2022년 출시 이후 2023년 말 기준 누적 다운로드 1억 건을 돌파했을 만큼 AI 채팅 앱 시장이 성장하고 있는데요, v0도 이 흐름에서 차별화된 UX로 주목받고 있어요. 단순히 기능만 구현하는 게 아니라, 사용자가 느끼는 감각적인 경험까지 신경 쓴 결과죠.

이미지 붙여넣기도 네이티브답게

텍스트 입력창에 이미지를 붙여넣을 수 있어야 하잖아요? 요즘 채팅 앱에선 당연한 기능이죠. 근데 React Native 기본 TextInput으론 안 돼요. 그래서 Expo Module을 만들어서 iOS의 네이티브 UIPasteboard를 직접 연결했대요. 이미지뿐만 아니라 파일도 붙여넣을 수 있고, 텍스트가 너무 길면 자동으로 .txt 파일로 만들어주기도 해요.

재미있는 건, 일반 TextInput을 확장하기 어려워서 TextInputWrapper라는 컴포넌트를 만들고, Swift로 네이티브 뷰를 탐색하는 방식으로 구현했다는 거예요. JavaScript와 네이티브 코드 사이를 오가면서 문제를 해결한 거죠. 이런 걸 보면 진짜 디테일에 진심이구나 싶어요.

웹과 모바일, 코드 공유는 어디까지?

v0는 원래 웹 기반 서비스잖아요. AI로 UI 컴포넌트를 생성해주는 플랫폼이죠. 그럼 웹이랑 모바일 앱이 코드를 많이 공유하냐? 생각보다 안 한대요. 타입이랑 헬퍼 함수 정도만 공유하고, UI랑 상태 관리는 완전히 따로 만들었어요.

대신 비즈니스 로직을 서버로 최대한 옮겨서, 모바일 앱은 API 위에 얇은 래퍼처럼 만들었대요. 이게 실은 요즘 추세예요. 클라이언트를 가볍게 유지하고, 복잡한 로직은 서버에서 처리하는 거죠. API는 Zod로 타입 안정성을 보장하고, OpenAPI 스펙을 자동 생성해서 Tanstack Query로 연결했어요.

이 과정에서 만든 API가 바로 v0 Platform API인데요, 자기네가 쓰려고 만든 API를 일반 고객들한테도 공개한 거예요. 이런 접근이 참 스마트하다고 생각해요. 내부에서 쓰는 걸 외부에도 공개하면, 자연스럽게 API 품질이 올라가거든요. 2024년 기준 OpenAPI 표준을 사용하는 API 개발이 전년 대비 40% 이상 증가했고, 타입 안정성을 중시하는 개발 트렌드가 강화되고 있어요.

네이티브 컴포넌트 최대한 활용하기

v0 팀은 자바스크립트 기반 컴포넌트 라이브러리를 안 썼어요. 대신 네이티브 요소를 최대한 활용했죠. 메뉴는 Zeego를 써서 iOS의 UIMenu를 그대로 렌더링하고, Xcode 16에서 빌드하면 자동으로 Liquid Glass 메뉴가 나와요. 진짜 iOS 앱처럼 보이는 비결이 바로 이거예요.

바텀 시트도 React Native의 기본 modal을 presentationStyle="formSheet"로 써서 네이티브답게 만들었어요. 물론 여기서도 문제가 있었죠. 시트를 내릴 때 잠깐 멈춘다거나, flex: 1인 View가 깜빡인다거나요. 이것도 다 패치해서 React Native 코어에 기여했대요. 자기들 앱만 고치고 끝낸 게 아니라, 모두가 쓸 수 있게 만든 거죠.

스타일링은 react-native-unistyles를 썼는데요, 다른 라이브러리들과 달리 컴포넌트를 재렌더링하지 않으면서도 테마를 제공한다고 해요. 성능 면에서 최적화된 선택이죠. 앱이 빠르게 느껴지는 이유 중 하나가 바로 이런 작은 선택들의 합이에요.

오픈소스 생태계에 기여하는 태도

v0 팀이 대단한 건, 자기들이 겪은 문제를 그냥 해결하고 끝낸 게 아니라는 거예요. React Native에 버그를 발견하면 패치해서 업스트림에 기여했어요. Modal 드래깅 이슈, Yoga 레이아웃 깜빡임 문제 등이 이제 React Native 0.82에 정식으로 들어갔거든요.

Callstack, Expo, Meta 개발자들과 협업해서 커뮤니티 전체에 도움이 되는 방식으로 일했다는 게 인상적이에요. 앞으로 AI 채팅 앱용 오픈소스 라이브러리도 공개할 계획이라고 하니, React Native 생태계가 더 풍성해질 것 같아요. React Native는 2024년 기준 전 세계 개발자 커뮤니티에서 가장 활발한 크로스플랫폼 프레임워크 중 하나로, 매년 수천 개의 기여가 이루어지고 있어요.

이런 태도가 결국엔 자기들한테도 돌아와요. 커뮤니티가 발전하면 더 좋은 도구가 생기고, 그걸로 더 좋은 앱을 만들 수 있으니까요. 선순환 구조죠.

결론: 웹 개발자도 네이티브를 포기할 필요 없다

Vercel의 v0 iOS 앱은 "React Native로도 진짜 네이티브처럼 만들 수 있다"는 걸 증명한 사례예요. 세심한 애니메이션, 키보드 핸들링, 네이티브 컴포넌트 활용, 그리고 오픈소스 생태계에 대한 기여까지. 이 모든 게 합쳐져서 사용자들이 "이거 Swift로 만든 거 아니야?"라고 착각할 만큼 완성도 높은 앱이 탄생했죠.

웹 개발자라도 모바일 앱을 포기할 필요가 없다는 걸 보여준 멋진 사례라고 생각해요. 물론 쉽진 않았겠죠. 천 줄짜리 키보드 핸들링 코드를 보면 알 수 있듯이요. 하지만 결과물은 그 노력을 증명하고 있어요. React Native 생태계가 성숙해지면서, 이제는 진짜 프로덕션급 앱을 만들 수 있는 시대가 온 거죠.