AI 도구를 활용한 웹 서비스 미리보기 기능 구축기

실용적 조언

미리보기 기능을 만들 때 원본 데이터를 직접 수정하지 말고 별도의 임시 상태 변수를 사용하여 UI를 렌더링하라.
AI에게 전체 설계를 맡기기보다, 먼저 데이터 흐름도를 직접 그린 후 세부 함수 단위로 코드를 생성 요청하라.

섹션별 상세

미리보기 기능을 구현하기 위해 최종 데이터와 미리보기 데이터를 완전히 분리하는 아키텍처를 채택했다. 초기에는 최종 데이터를 미리보기에 재사용하려 했으나 버그가 빈번하게 발생하여, 임시 상태 계층(Temporary State Layer)을 별도로 두어 UI 상태와 백엔드 상태를 격리했다. 이러한 분리 전략을 통해 데이터 오염 없이 안전하게 변경 사항을 사용자에게 노출할 수 있었다.

AI 도구는 코드 생성 속도를 비약적으로 높여주었으나 시스템의 논리적 설계는 개발자의 수동 개입이 필수적이었다. AI가 제안하는 개별 코드 조각들을 결합하기 전, 데이터가 각 단계 사이에서 어떻게 흐를지(Data Flow)를 먼저 단순화하여 정의했다. 논리 구조가 명확해진 후에야 AI가 생성한 코드가 의도대로 작동했으며, 이는 AI 시대에도 설계 역량이 핵심임을 시사한다.

기술 스택은 React Native(Expo) 프론트엔드와 FastAPI 백엔드, SQLite 저장소를 조합하여 로컬 환경에서 먼저 검증했다. 한꺼번에 모든 기능을 구축하는 대신 미리보기와 최종 액션을 분리하고 단계별로 테스트를 진행하여 복잡도를 관리했다. 최종적으로 기본 클라우드 환경에 배포하며 초보자도 재현 가능한 워크플로를 완성했다.

용어 해설

임시 상태 계층(Temporary State Layer): — 최종 데이터에 반영하기 전 변경 사항을 일시적으로 저장하는 메모리 영역이다. 사용자가 '미리보기'를 수행할 때 원본 데이터를 훼손하지 않고 UI에만 변경을 표시하여 안전한 데이터 처리를 가능하게 한다.
패스트API(FastAPI): — 파이썬 기반의 현대적이고 빠른 웹 프레임워크로, 비동기 처리를 기본으로 지원한다. AI 도구와 결합하여 백엔드 API를 신속하게 구축하고 고성능의 데이터 통신을 구현하는 데 널리 사용된다.
리액트 네이티브 엑스포(React Native Expo): — 자바스크립트로 네이티브 모바일 앱을 개발할 수 있는 프레임워크와 도구 모음이다. 복잡한 네이티브 설정을 추상화하여 AI 생성 코드를 빠르게 모바일 환경에서 테스트하고 배포할 수 있게 돕는다.

언급된 도구

FastAPI추천

파이썬 기반 백엔드 API 서버 구축

React Native (Expo)추천

모바일 및 웹 프론트엔드 개발

SQLite추천

로컬 데이터 저장 및 관리

언급된 리소스

튜토리얼Vibe Start - Beginner Journey Document