Web App 개발의 장벽은 '기술'이 아니라 '용어'
Web App 개발은 점점 쉬워지고 있지만, 추상적 용어의 홍수는 초보자에게 장벽으로 인식되기 쉽습니다. 하지만 SSR (Server-Side Rendering), BaaS (Backend as a Service), JAMstack, SPA (Single Page Application), CI/CD (Continuous Integration, Continuous Deployment), DevOps (Development Operations) 등의 난해한 기술 용어보다, "데이터는 어디서 처리되고 어디서 보여지는가"를 명확히 이해하는 것이 더 중요합니다. 개발의 본질은 결국 '무엇을(데이터), 어떻게(로직), 보여줄 것인가(UI)'에 대한 명확한 설계이기 때문입니다. 이 글은 Firebase Platform 위에 만들어지는 Web App의 데이터 흐름를 설명하며, 불필요한 추상적 용어들을 걷어내고 데이터 흐름 중심의 사고방식을 구축하고자 합니다. 이를 통해 개발자는 기술 용어의 장벽에 갇히지 않고, 실제 문제 해결이라는 개발 본연의 목적에 집중할 수 있을 것입니다.
용어 정리: 불필요한 추상적 의미 제거와 실용적 해석
기술 용어는 때때로 본질적인 기능을 감추고 복잡하게 느껴지게 합니다. 여기서는 웹 앱(Web App) 개발에서 자주 접하는 대표 용어들을 실제 의미로 환원하고, 실용적인 관점에서 재정의합니다.
| 용어 | 형식적 의미 | 실용적 해석 |
|---|---|---|
| SPA/SSR/CSR (Single Page Application/Server-Side Rendering/Client-Side Rendering) | 렌더링 방식의 차이 | 궁극적으로 "HTML을 어디서 그릴 것인가" 문제일 뿐입니다. |
| GraphQL/REST (Graph Query Language/Representational State Transfer) | API(Application Programming Interface) 통신 방법의 차이 | MVP (Minimum Viable Product) 단계에서는 REST + JSON (JavaScript Object Notation)으로 충분합니다. |
| CI/CD (Continuous Integration/Continuous Deployment) | App 자동 배포 시스템 | GitHub Action + Firebase Deploy 으로 충분히 대체 가능합니다. |
실제로 개발에 필요한 핵심 용어들도 다음과 같이 실용적으로 재정의하여 접근합니다.
| 필수 용어 | 형식적 의미 | 실용적 해석 |
|---|---|---|
| Serverless (서버리스) | 요청 시에만 실행되고, 항상 서버를 켜둘 필요가 없는 계산 코드입니다. | Google Cloud Function, AWS Lambda, GitHub Action 등을 활용 |
| BaaS (Backend as a Service) | 인증(Auth), 데이터베이스(DB), API 등이 제공되는 백엔드 플랫폼입니다. | 파이어베이스(Firebase) 플랫폼 같은 서비스. |
| Full-stack (풀스택) 개발 능력 | 백엔드(Backend)와 프론트엔드(Frontend)를 모두 구현하는 능력 | Input → Function → Output 전 과정의 설계 능력 |
데이터 흐름 중심의 설계
웹 앱(Web App) 설계의 핵심은 단순합니다: "입력 → 처리 → 출력"의 세 단계를 명확히 구분하고 연결하는 것입니다.
- 공통 결과: 모든 사용자에게 동일하게 보여지는 웹 페이지는 정적 HTML (common_page)로 구성됩니다. 이는 서버에 미리 저장되어 사용자 요청 시 즉시 전송됩니다.
- 개인화 결과: 사용자별로 다르게 보여지는 정보는 실시간 API 호출 + 자바스크립트(JavaScript)
fetch()를 통해 동적으로(my_page) 생성되어 보여집니다. - 전략 실행: 복잡한 계산이나 머신러닝(Machine Learning) 모델 실행 등은 Google Colab 또는 Cloud Functions의 컨테이너(Container) 기능을 활용하여 별도로 처리합니다. 이는 필요할 때만 자원을 할당하므로 효율적입니다.
| 역할 | 정의 | 기능 예시 | 사용 도구 (Firebase 기준) |
|---|---|---|---|
| 입력 (Input) | 사용자나 외부 데이터로부터 들어오는 값 | 사용자 입력, 외부 API 호출, 로그인 정보 | Form + JS (JavaScript), Firebase Auth |
| 처리 (Function) | 입력값을 바탕으로 계산·분석·판단을 수행하는 로직 | 수익률 계산, 데이터 분석, 복잡한 비즈니스 로직 실행 | Cloud Function, Google Colab |
| 출력 (Output) | 계산된 결과를 시각적으로 보여주거나 저장 | HTML 렌더링, JSON 응답, 시각화 카드 | Firebase Hosting, JS fetch(), 시각화 라이브러리 |
프론트엔드(Frontend)/백엔드(Backend) 구성 요소와 Firebase 도구 매핑
파이어베이스(Firebase)는 전체 웹 앱(Web App) 구조의 대부분을 구성할 수 있는 강력하고 유연한 도구들을 서비스 형태로 제공합니다. GCP (Google Cloud Platform)의 다른 서비스들과도 긴밀하게 연동됩니다.
| 기능 | 설명 | Firebase 도구 | 비유 |
| 정적 웹 배포 | 변하지 않는 HTML/CSS/JS 파일을 사용자에게 제공 | Firebase Hosting | Apache 웹 서버 |
| 인증 관리 | 사용자 로그인 및 UID(User ID) 기반 권한 제어 | Firebase Auth | 사용자 인증 시스템 |
| 실시간/문서형 DB | 실시간 동기화되는 경량 문서 저장소 (회원별 상태/입력 등) | Firestore (NoSQL) | 빠른 Key-Value 메모리 |
| 관계형 DB | 구조화된 테이블 기반 데이터 저장, 복잡한 쿼리 처리 | Firebase Data Connect 또는 Cloud SQL | RDBMS (MySQL/PostgreSQL) |
| 파일 저장소 | 이미지/동영상 등 대용량 파일 저장 | Firebase Storage | 클라우드 파일 디렉토리 |
| 동적 API 처리 | 특정 요청마다 백엔드 로직을 실행하여 응답 | Firebase Cloud Function | 수익률 계산기, DB 조회기 |
사용자 UI 구성: Tailwind CSS 및 컴포넌트(Component) 활용
빠른 프론트엔드(Frontend) 구현과 일관된 사용자 경험 제공을 위해 다음과 같은 UI(User Interface) 관련 도구들을 병행 활용하는 것이 효율적입니다.
| 도구 | 실제 기능 정의 | 추천 활용 예시 |
|---|---|---|
| Tailwind CSS | HTML에 직접 클래스(class)로 스타일을 지정하는 도구 | 버튼, 카드, 입력 폼 등 개별 UI 요소에 대한 빠르고 유연한 스타일링 |
| Component (DaisyUI, Flowbite 등) | 자주 쓰는 Tailwind 클래스(class)를 묶어 놓은 UI 모듈 | 미리 제작된 카드, 버튼, 탭, 내비게이션 바 등의 UI 블록을 활용하여 개발 속도 향상 |
| Snippet (CodePen 등) | HTML/CSS/JS로 구성된 작은 완성형 기능 예제 | 로그인 폼, 계산기 등 특정 기능 구현 시 참고할 수 있는 레퍼런스 제공 |
핵심은 데이터, 계산, 표현
Web App 개발에서는 기술 용어보다 다음 3가지 핵심 구조를 정확하게 설계하고 구현하는 것이 중요합니다:
- Storage (데이터 저장): 어떤 데이터를 어디에 저장할 것인가? (예: 사용자 프로필은 Firestore, 시장 데이터는 Cloud SQL, 이미지는 Firebase Storage)
- Compute (계산/로직): 어떤 로직을 언제, 어떻게 실행할 것인가? (예: 사용자 요청 시 Cloud Function, 주기적인 배치(batch) 작업은 Cloud Function 또는 Google Colab)
- Presentation (출력): 어떤 방식으로 사용자에게 보여줄 것인가? (예: Firebase Hosting을 통한 정적 페이지, 자바스크립트(JavaScript)를 통한 동적 데이터 렌더링)