안녕! 👋 오늘은 이커머스 앱 개발에서 가장 핵심적인 부분인 장바구니, 결제, 주문 시스템을 함께 파헤쳐볼 거야. 솔직히 말하면 이 세 가지만 제대로 구현해도 쇼핑몰 앱의 80%는 완성한 거나 마찬가지거든! 😎

요즘 모바일 쇼핑 시장이 얼마나 뜨거운지 알지? 통계에 따르면 2023년 기준 국내 모바일 쇼핑 거래액이 100조 원을 넘어섰대. 미친 숫자 아니야? 🚀 그만큼 이커머스 앱 개발자에 대한 수요도 엄청나게 늘어나고 있어.

나도 처음 이커머스 앱을 개발할 때는 "그냥 물건 담고 결제하면 되는 거 아냐?"라고 생각했었어. 근데 막상 해보니까... 와, 진짜 고려해야 할 게 산더미더라고. 😅 재고 관리, 동시성 제어, 결제 실패 처리, 환불 로직... 생각만 해도 머리가 지끈지끈하지?

그래서 오늘은 내가 실제로 여러 프로젝트를 진행하면서 배운 노하우들을 아낌없이 공유해볼게. 이론만 주구장창 늘어놓는 게 아니라, 실전에서 바로 써먹을 수 있는 팁들 위주로 말이야! 💪

🎯 이커머스 앱의 핵심 구조 이해하기

본격적으로 들어가기 전에, 이커머스 앱의 전체적인 구조부터 한번 짚고 넘어가자. 큰 그림을 이해하고 있어야 세부 구현할 때도 헷갈리지 않거든!

이커머스 앱은 크게 프론트엔드(사용자가 보는 화면)와 백엔드(서버 로직)로 나뉘어. 당연한 얘기지만, 이 둘이 유기적으로 잘 연결되어야 제대로 된 쇼핑 경험을 제공할 수 있어.

요즘은 네이티브 앱(Swift, Kotlin)보다는 React Native나 Flutter 같은 크로스 플랫폼 프레임워크를 많이 사용하는 추세야. 한 번 개발해서 iOS와 Android 둘 다 커버할 수 있으니까 개발 비용이 확 줄어들거든! 💰

백엔드는 Node.js, Python(Django/Flask), Java(Spring Boot) 등 다양한 선택지가 있어. 개인적으로는 Node.js + Express 조합을 추천하는데, JavaScript로 프론트와 백을 모두 다룰 수 있어서 러닝 커브가 낮거든.

🛒 장바구니 시스템 구현하기

자, 이제 본격적으로 장바구니부터 파헤쳐보자! 장바구니는 겉보기엔 단순해 보이지만, 실제로는 꽤 복잡한 로직이 숨어있어. 🤔

💾 장바구니 데이터 저장 방식

장바구니 데이터를 어디에 저장할지부터 결정해야 해. 크게 세 가지 방식이 있어:

// React Native AsyncStorage 예시
import AsyncStorage from '@react-native-async-storage/async-storage';

const addToCart = async (product) => {
  try {
    const existingCart = await AsyncStorage.getItem('cart');
    const cart = existingCart ? JSON.parse(existingCart) : [];
    
    const existingItem = cart.find(item => item.id === product.id);
    
    if (existingItem) {
      existingItem.quantity += 1;
    } else {
      cart.push({ ...product, quantity: 1 });
    }
    
    await AsyncStorage.setItem('cart', JSON.stringify(cart));
  } catch (error) {
    console.error('장바구니 저장 실패:', error);
  }
};

// Express.js + Redis 세션 예시
const session = require('express-session');
const RedisStore = require('connect-redis')(session);

app.use(session({
  store: new RedisStore({ client: redisClient }),
  secret: 'your-secret-key',
  resave: false,
  saveUninitialized: true,
  cookie: { maxAge: 86400000 } // 24시간
}));

app.post('/api/cart/add', (req, res) => {
  const { productId, quantity } = req.body;
  
  if (!req.session.cart) {
    req.session.cart = [];
  }
  
  const existingItem = req.session.cart.find(item => item.productId === productId);
  
  if (existingItem) {
    existingItem.quantity += quantity;
  } else {
    req.session.cart.push({ productId, quantity });
  }
  
  res.json({ success: true, cart: req.session.cart });
});

// MongoDB 스키마 예시
const cartSchema = new mongoose.Schema({
  userId: {
    type: mongoose.Schema.Types.ObjectId,
    ref: 'User',
    required: true
  },
  items: [{
    productId: {
      type: mongoose.Schema.Types.ObjectId,
      ref: 'Product',
      required: true
    },
    quantity: {
      type: Number,
      required: true,
      min: 1
    },
    price: {
      type: Number,
      required: true
    },
    addedAt: {
      type: Date,
      default: Date.now
    }
  }],
  updatedAt: {
    type: Date,
    default: Date.now
  }
});

// 장바구니 추가 API
router.post('/cart/add', authenticateUser, async (req, res) => {
  try {
    const { productId, quantity } = req.body;
    const userId = req.user.id;
    
    let cart = await Cart.findOne({ userId });
    
    if (!cart) {
      cart = new Cart({ userId, items: [] });
    }
    
    const product = await Product.findById(productId);
    if (!product) {
      return res.status(404).json({ error: '상품을 찾을 수 없습니다' });
    }
    
    const existingItem = cart.items.find(
      item => item.productId.toString() === productId
    );
    
    if (existingItem) {
      existingItem.quantity += quantity;
    } else {
      cart.items.push({
        productId,
        quantity,
        price: product.price
      });
    }
    
    cart.updatedAt = Date.now();
    await cart.save();
    
    res.json({ success: true, cart });
  } catch (error) {
    res.status(500).json({ error: '장바구니 추가 실패' });
  }
});

🔄 장바구니 수량 변경 및 삭제

장바구니에 담기만 하면 뭐해? 수량도 조절하고 삭제도 할 수 있어야지! 이 부분은 UI/UX가 정말 중요해. 사용자가 직관적으로 조작할 수 있어야 하거든.

// React Native 장바구니 컴포넌트 예시
import React, { useState, useEffect } from 'react';
import { View, Text, TouchableOpacity, FlatList } from 'react-native';

const CartScreen = () => {
  const [cartItems, setCartItems] = useState([]);
  const [totalPrice, setTotalPrice] = useState(0);
  
  useEffect(() => {
    loadCart();
  }, []);
  
  useEffect(() => {
    calculateTotal();
  }, [cartItems]);
  
  const loadCart = async () => {
    try {
      const response = await fetch('https://api.example.com/cart', {
        headers: {
          'Authorization': `Bearer ${userToken}`
        }
      });
      const data = await response.json();
      setCartItems(data.items);
    } catch (error) {
      console.error('장바구니 로드 실패:', error);
    }
  };
  
  const updateQuantity = async (itemId, newQuantity) => {
    if (newQuantity < 1) {
      removeItem(itemId);
      return;
    }
    
    try {
      await fetch(`https://api.example.com/cart/update`, {
        method: 'PUT',
        headers: {
          'Content-Type': 'application/json',
          'Authorization': `Bearer ${userToken}`
        },
        body: JSON.stringify({ itemId, quantity: newQuantity })
      });
      
      setCartItems(prevItems =>
        prevItems.map(item =>
          item.id === itemId ? { ...item, quantity: newQuantity } : item
        )
      );
    } catch (error) {
      console.error('수량 변경 실패:', error);
    }
  };
  
  const removeItem = async (itemId) => {
    try {
      await fetch(`https://api.example.com/cart/remove/${itemId}`, {
        method: 'DELETE',
        headers: {
          'Authorization': `Bearer ${userToken}`
        }
      });
      
      setCartItems(prevItems => prevItems.filter(item => item.id !== itemId));
    } catch (error) {
      console.error('상품 삭제 실패:', error);
    }
  };
  
  const calculateTotal = () => {
    const total = cartItems.reduce(
      (sum, item) => sum + (item.price * item.quantity),
      0
    );
    setTotalPrice(total);
  };
  
  return (
    <View style={{ flex: 1, padding: 16 }}>
      <FlatList
        data={cartItems}
        keyExtractor={item => item.id.toString()}
        renderItem={({ item }) => (
          <View style={{ 
            flexDirection: 'row', 
            padding: 16, 
            borderBottomWidth: 1,
            borderBottomColor: '#e0e0e0'
          }}>
            <View style={{ flex: 1 }}>
              <Text style={{ fontSize: 16, fontWeight: 'bold' }}>
                {item.name}
              </Text>
              <Text style={{ color: '#666', marginTop: 4 }}>
                {item.price.toLocaleString()}원
              </Text>
            </View>
            
            <View style={{ flexDirection: 'row', alignItems: 'center' }}>
              <TouchableOpacity
                onPress={() => updateQuantity(item.id, item.quantity - 1)}
                style={{ 
                  width: 30, 
                  height: 30, 
                  backgroundColor: '#f0f0f0',
                  justifyContent: 'center',
                  alignItems: 'center',
                  borderRadius: 4
                }}
              >
                <Text style={{ fontSize: 18 }}>-</Text>
              </TouchableOpacity>
              
              <Text style={{ marginHorizontal: 12, fontSize: 16 }}>
                {item.quantity}
              </Text>
              
              <TouchableOpacity
                onPress={() => updateQuantity(item.id, item.quantity + 1)}
                style={{ 
                  width: 30, 
                  height: 30, 
                  backgroundColor: '#f0f0f0',
                  justifyContent: 'center',
                  alignItems: 'center',
                  borderRadius: 4
                }}
              >
                <Text style={{ fontSize: 18 }}>+</Text>
              </TouchableOpacity>
            </View>
          </View>
        )}
      />
      
      <View style={{ 
        padding: 16, 
        borderTopWidth: 2, 
        borderTopColor: '#333' 
      }}>
        <Text style={{ fontSize: 18, fontWeight: 'bold', marginBottom: 12 }}>
          총 결제금액: {totalPrice.toLocaleString()}원
        </Text>
        <TouchableOpacity
          style={{ 
            backgroundColor: '#6b9bd1',
            padding: 16,
            borderRadius: 8,
            alignItems: 'center'
          }}
          onPress={() => navigation.navigate('Checkout')}
        >
          <Text style={{ color: '#fff', fontSize: 16, fontWeight: 'bold' }}>
            결제하기
          </Text>
        </TouchableOpacity>
      </View>
    </View>
  );
};

⏰ 장바구니 만료 처리

장바구니에 담긴 상품을 영원히 보관할 순 없어. 특히 인기 상품의 경우 다른 사람들이 구매하지 못하게 막는 꼴이 되거든. 그래서 장바구니 만료 정책이 필요해!

보통 30일 정도로 설정하는데, 서비스 특성에 따라 조절하면 돼. 예를 들어 티켓팅 서비스라면 10분, 일반 쇼핑몰이라면 30일 이런 식으로 말이야.

// 장바구니 만료 처리 스케줄러 (Node.js + node-cron)
const cron = require('node-cron');
const Cart = require('./models/Cart');

// 매일 새벽 3시에 만료된 장바구니 정리
cron.schedule('0 3 * * *', async () => {
  try {
    const thirtyDaysAgo = new Date();
    thirtyDaysAgo.setDate(thirtyDaysAgo.getDate() - 30);
    
    const result = await Cart.updateMany(
      { updatedAt: { $lt: thirtyDaysAgo } },
      { $set: { items: [] } }
    );
    
    console.log(`${result.modifiedCount}개의 만료된 장바구니 정리 완료`);
  } catch (error) {
    console.error('장바구니 정리 실패:', error);
  }
});

// 또는 개별 아이템 만료 처리
const cleanExpiredItems = async (userId) => {
  const cart = await Cart.findOne({ userId });
  
  if (!cart) return;
  
  const sevenDaysAgo = new Date();
  sevenDaysAgo.setDate(sevenDaysAgo.getDate() - 7);
  
  cart.items = cart.items.filter(item => item.addedAt > sevenDaysAgo);
  
  await cart.save();
};

💳 결제 시스템 구현하기

자, 이제 가장 중요한 결제 파트야! 💰 솔직히 말하면 결제 시스템은 직접 구현하는 게 아니라 PG사(Payment Gateway)의 API를 연동하는 거야. 왜냐면 결제는 보안이 정말정말 중요하거든!

국내에서 많이 쓰는 PG사로는 아임포트(PortOne), 토스페이먼츠, 나이스페이, KG이니시스 등이 있어. 나는 개인적으로 아임포트를 추천하는데, 문서화가 잘 되어 있고 개발자 친화적이거든. 😊

🔐 결제 프로세스 이해하기

결제 프로세스를 단계별로 나눠보면 이렇게 돼:

📱 아임포트 연동 예시

실제로 아임포트를 연동하는 코드를 보여줄게. React Native 기준이야!

// 1. 아임포트 React Native SDK 설치
// npm install iamport-react-native

// 2. 결제 컴포넌트 구현
import React from 'react';
import IMP from 'iamport-react-native';

const PaymentScreen = ({ route, navigation }) => {
  const { orderData } = route.params;
  
  const handlePaymentResponse = async (response) => {
    try {
      // 결제 결과를 서버로 전송하여 검증
      const verifyResponse = await fetch('https://api.example.com/payment/verify', {
        method: 'POST',
        headers: {
          'Content-Type': 'application/json',
          'Authorization': `Bearer ${userToken}`
        },
        body: JSON.stringify({
          imp_uid: response.imp_uid,
          merchant_uid: response.merchant_uid
        })
      });
      
      const result = await verifyResponse.json();
      
      if (result.success) {
        // 결제 성공
        navigation.navigate('OrderComplete', { orderId: result.orderId });
      } else {
        // 결제 실패
        alert('결제에 실패했습니다: ' + result.message);
        navigation.goBack();
      }
    } catch (error) {
      console.error('결제 검증 실패:', error);
      alert('결제 처리 중 오류가 발생했습니다.');
      navigation.goBack();
    }
  };
  
  const paymentData = {
    pg: 'html5_inicis',
    pay_method: 'card',
    merchant_uid: orderData.merchantUid,
    name: orderData.orderName,
    amount: orderData.totalAmount,
    buyer_email: orderData.buyerEmail,
    buyer_name: orderData.buyerName,
    buyer_tel: orderData.buyerTel,
    buyer_addr: orderData.buyerAddr,
    buyer_postcode: orderData.buyerPostcode,
    app_scheme: 'yourapp',
    // 추가 파라미터
    custom_data: {
      orderId: orderData.orderId,
      userId: orderData.userId
    }
  };
  
  return (
    <IMP.Payment
      userCode="imp12345678" // 아임포트 가맹점 식별코드
      data={paymentData}
      callback={handlePaymentResponse}
    />
  );
};

// 3. 서버 측 결제 검증 로직 (Node.js + Express)
const axios = require('axios');

router.post('/payment/verify', authenticateUser, async (req, res) => {
  try {
    const { imp_uid, merchant_uid } = req.body;
    
    // 1. 아임포트 액세스 토큰 발급
    const getToken = await axios.post('https://api.iamport.kr/users/getToken', {
      imp_key: process.env.IMP_API_KEY,
      imp_secret: process.env.IMP_API_SECRET
    });
    
    const accessToken = getToken.data.response.access_token;
    
    // 2. 결제 정보 조회
    const getPaymentData = await axios.get(
      `https://api.iamport.kr/payments/${imp_uid}`,
      { headers: { 'Authorization': accessToken } }
    );
    
    const paymentData = getPaymentData.data.response;
    
    // 3. 주문 정보 조회
    const order = await Order.findOne({ merchantUid: merchant_uid });
    
    if (!order) {
      return res.status(404).json({ 
        success: false, 
        message: '주문 정보를 찾을 수 없습니다' 
      });
    }
    
    // 4. 결제 금액 검증
    if (paymentData.amount !== order.totalAmount) {
      // 금액 불일치 - 위변조 의심
      await Order.updateOne(
        { _id: order._id },
        { status: 'payment_failed', failReason: '결제 금액 불일치' }
      );
      
      return res.status(400).json({ 
        success: false, 
        message: '결제 금액이 일치하지 않습니다' 
      });
    }
    
    // 5. 결제 상태 확인
    if (paymentData.status === 'paid') {
      // 결제 성공 처리
      await Order.updateOne(
        { _id: order._id },
        { 
          status: 'paid',
          paidAt: new Date(),
          impUid: imp_uid,
          paymentMethod: paymentData.pay_method
        }
      );
      
      // 재고 차감
      for (const item of order.items) {
        await Product.updateOne(
          { _id: item.productId },
          { $inc: { stock: -item.quantity } }
        );
      }
      
      // 장바구니 비우기
      await Cart.updateOne(
        { userId: req.user.id },
        { $set: { items: [] } }
      );
      
      // 주문 확인 이메일 발송 (생략)
      
      res.json({ 
        success: true, 
        orderId: order._id,
        message: '결제가 완료되었습니다' 
      });
    } else {
      // 결제 실패
      await Order.updateOne(
        { _id: order._id },
        { status: 'payment_failed', failReason: paymentData.fail_reason }
      );
      
      res.status(400).json({ 
        success: false, 
        message: paymentData.fail_reason || '결제에 실패했습니다' 
      });
    }
  } catch (error) {
    console.error('결제 검증 오류:', error);
    res.status(500).json({ 
      success: false, 
      message: '결제 검증 중 오류가 발생했습니다' 
    });
  }
});

🔄 결제 실패 및 취소 처리

결제가 항상 성공하는 건 아니야. 카드 한도 초과, 네트워크 오류, 사용자가 중간에 취소하는 경우 등 다양한 이유로 실패할 수 있어. 이런 경우들을 모두 대비해야 해! 🛡️

// 결제 취소 API
router.post('/payment/cancel', authenticateUser, async (req, res) => {
  try {
    const { orderId, reason } = req.body;
    
    const order = await Order.findOne({ 
      _id: orderId, 
      userId: req.user.id 
    });
    
    if (!order) {
      return res.status(404).json({ 
        success: false, 
        message: '주문을 찾을 수 없습니다' 
      });
    }
    
    if (order.status !== 'paid') {
      return res.status(400).json({ 
        success: false, 
        message: '취소할 수 없는 주문 상태입니다' 
      });
    }
    
    // 아임포트 액세스 토큰 발급
    const getToken = await axios.post('https://api.iamport.kr/users/getToken', {
      imp_key: process.env.IMP_API_KEY,
      imp_secret: process.env.IMP_API_SECRET
    });
    
    const accessToken = getToken.data.response.access_token;
    
    // 결제 취소 요청
    const cancelResponse = await axios.post(
      'https://api.iamport.kr/payments/cancel',
      {
        imp_uid: order.impUid,
        amount: order.totalAmount,
        reason: reason,
        checksum: order.totalAmount // 취소 가능 금액 검증
      },
      { headers: { 'Authorization': accessToken } }
    );
    
    if (cancelResponse.data.code === 0) {
      // 취소 성공
      await Order.updateOne(
        { _id: order._id },
        { 
          status: 'cancelled',
          cancelledAt: new Date(),
          cancelReason: reason
        }
      );
      
      // 재고 복구
      for (const item of order.items) {
        await Product.updateOne(
          { _id: item.productId },
          { $inc: { stock: item.quantity } }
        );
      }
      
      res.json({ 
        success: true, 
        message: '주문이 취소되었습니다' 
      });
    } else {
      res.status(400).json({ 
        success: false, 
        message: '결제 취소에 실패했습니다' 
      });
    }
  } catch (error) {
    console.error('결제 취소 오류:', error);
    res.status(500).json({ 
      success: false, 
      message: '결제 취소 중 오류가 발생했습니다' 
    });
  }
});

💰 다양한 결제 수단 지원

요즘은 신용카드만으로는 부족해! 카카오페이, 네이버페이, 토스, 페이코 등 다양한 간편결제를 지원해야 해. 특히 모바일에서는 간편결제 비중이 엄청 높거든. 📱

// 결제 수단별 처리 예시
const paymentData = {
  pg: getPgProvider(paymentMethod), // PG사 선택
  pay_method: paymentMethod,
  merchant_uid: generateMerchantUid(),
  name: orderName,
  amount: totalAmount,
  buyer_email: buyerEmail,
  buyer_name: buyerName,
  buyer_tel: buyerTel,
  buyer_addr: buyerAddr,
  buyer_postcode: buyerPostcode
};

function getPgProvider(method) {
  switch(method) {
    case 'card':
      return 'html5_inicis'; // 이니시스
    case 'trans':
      return 'html5_inicis.INIBillTrs'; // 실시간 계좌이체
    case 'vbank':
      return 'html5_inicis'; // 가상계좌
    case 'kakaopay':
      return 'kakaopay'; // 카카오페이
    case 'naverpay':
      return 'naverpay'; // 네이버페이
    case 'tosspay':
      return 'tosspay'; // 토스페이
    case 'phone':
      return 'danal'; // 휴대폰 소액결제
    default:
      return 'html5_inicis';
  }
}

// 가상계좌의 경우 입금 대기 처리
if (paymentMethod === 'vbank') {
  paymentData.vbank_due = getVbankDueDate(); // 입금 기한 설정
  
  // 웹훅으로 입금 확인 후 주문 처리
  router.post('/payment/webhook', async (req, res) => {
    const { imp_uid, merchant_uid, status } = req.body;
    
    if (status === 'paid') {
      // 가상계좌 입금 완료
      await Order.updateOne(
        { merchantUid: merchant_uid },
        { status: 'paid', paidAt: new Date() }
      );
      
      // 재고 차감 및 주문 확인 메일 발송
    }
    
    res.sendStatus(200);
  });
}

📦 주문 시스템 구현하기

결제가 완료되면 이제 주문 시스템이 작동해야 해! 주문 시스템은 단순히 "주문 완료" 상태만 저장하는 게 아니라, 주문 생명주기 전체를 관리해야 해. 🔄

📊 주문 상태 관리

주문은 여러 단계를 거쳐서 진행돼. 각 단계마다 적절한 처리가 필요하지!

// 주문 스키마 정의
const orderSchema = new mongoose.Schema({
  orderNumber: {
    type: String,
    required: true,
    unique: true
  },
  userId: {
    type: mongoose.Schema.Types.ObjectId,
    ref: 'User',
    required: true
  },
  items: [{
    productId: {
      type: mongoose.Schema.Types.ObjectId,
      ref: 'Product',
      required: true
    },
    productName: String,
    quantity: Number,
    price: Number,
    options: Object // 상품 옵션 (색상, 사이즈 등)
  }],
  totalAmount: {
    type: Number,
    required: true
  },
  shippingInfo: {
    recipientName: String,
    phone: String,
    address: String,
    postcode: String,
    deliveryMessage: String
  },
  status: {
    type: String,
    enum: [
      'pending',      // 주문 접수
      'paid',         // 결제 완료
      'preparing',    // 상품 준비중
      'shipping',     // 배송중
      'delivered',    // 배송 완료
      'confirmed',    // 구매 확정
      'cancelled',    // 주문 취소
      'refunded'      // 환불 완료
    ],
    default: 'pending'
  },
  paymentInfo: {
    method: String,
    impUid: String,
    merchantUid: String,
    paidAt: Date
  },
  shippingInfo: {
    carrier: String,      // 택배사
    trackingNumber: String, // 운송장 번호
    shippedAt: Date,
    deliveredAt: Date
  },
  statusHistory: [{
    status: String,
    changedAt: {
      type: Date,
      default: Date.now
    },
    note: String
  }],
  createdAt: {
    type: Date,
    default: Date.now
  }
});

// 주문번호 자동 생성
orderSchema.pre('save', async function(next) {
  if (this.isNew) {
    const date = new Date();
    const dateStr = date.toISOString().slice(0, 10).replace(/-/g, '');
    const randomStr = Math.random().toString(36).substring(2, 8).toUpperCase();
    this.orderNumber = `ORD${dateStr}${randomStr}`;
  }
  next();
});

🚚 배송 추적 시스템

주문이 완료되면 사용자는 "내 물건이 어디쯤 왔을까?" 궁금해하잖아? 그래서 배송 추적 기능이 필수야! 📍

국내 주요 택배사들은 대부분 배송 조회 API를 제공해. 스마트택배(Sweet Tracker) 같은 통합 배송 조회 서비스를 쓰면 여러 택배사를 한 번에 처리할 수 있어서 편해!

// Sweet Tracker API를 이용한 배송 조회
const axios = require('axios');

const trackShipment = async (carrier, trackingNumber) => {
  try {
    const response = await axios.get(
      'https://info.sweettracker.co.kr/api/v1/trackingInfo',
      {
        params: {
          t_key: process.env.SWEET_TRACKER_API_KEY,
          t_code: carrier, // 택배사 코드
          t_invoice: trackingNumber // 운송장 번호
        }
      }
    );
    
    return response.data;
  } catch (error) {
    console.error('배송 조회 실패:', error);
    return null;
  }
};

// 배송 조회 API
router.get('/order/:orderId/tracking', authenticateUser, async (req, res) => {
  try {
    const order = await Order.findOne({
      _id: req.params.orderId,
      userId: req.user.id
    });
    
    if (!order) {
      return res.status(404).json({ 
        success: false, 
        message: '주문을 찾을 수 없습니다' 
      });
    }
    
    if (!order.shippingInfo.trackingNumber) {
      return res.json({ 
        success: true, 
        message: '아직 배송이 시작되지 않았습니다',
        status: order.status
      });
    }
    
    const trackingData = await trackShipment(
      order.shippingInfo.carrier,
      order.shippingInfo.trackingNumber
    );
    
    res.json({ 
      success: true, 
      tracking: trackingData,
      order: {
        orderNumber: order.orderNumber,
        status: order.status,
        carrier: order.shippingInfo.carrier,
        trackingNumber: order.shippingInfo.trackingNumber
      }
    });
  } catch (error) {
    console.error('배송 조회 오류:', error);
    res.status(500).json({ 
      success: false, 
      message: '배송 조회 중 오류가 발생했습니다' 
    });
  }
});

// React Native 배송 추적 화면
import React, { useState, useEffect } from 'react';
import { View, Text, ScrollView, ActivityIndicator } from 'react-native';

const TrackingScreen = ({ route }) => {
  const { orderId } = route.params;
  const [tracking, setTracking] = useState(null);
  const [loading, setLoading] = useState(true);
  
  useEffect(() => {
    loadTracking();
  }, []);
  
  const loadTracking = async () => {
    try {
      const response = await fetch(
        `https://api.example.com/order/${orderId}/tracking`,
        {
          headers: {
            'Authorization': `Bearer ${userToken}`
          }
        }
      );
      const data = await response.json();
      setTracking(data);
    } catch (error) {
      console.error('배송 조회 실패:', error);
    } finally {
      setLoading(false);
    }
  };
  
  if (loading) {
    return (
      <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
        <ActivityIndicator size="large" color="#6b9bd1" />
      </View>
    );
  }
  
  return (
    <ScrollView style={{ flex: 1, padding: 16 }}>
      <View style={{ 
        backgroundColor: '#f8f9fb', 
        padding: 20, 
        borderRadius: 12,
        marginBottom: 20
      }}>
        <Text style={{ fontSize: 18, fontWeight: 'bold', marginBottom: 8 }}>
          주문번호: {tracking.order.orderNumber}
        </Text>
        <Text style={{ color: '#666', marginBottom: 4 }}>
          택배사: {tracking.order.carrier}
        </Text>
        <Text style={{ color: '#666' }}>
          운송장번호: {tracking.order.trackingNumber}
        </Text>
      </View>
      
      {tracking.tracking && tracking.tracking.trackingDetails && (
        <View>
          <Text style={{ 
            fontSize: 16, 
            fontWeight: 'bold', 
            marginBottom: 16,
            color: '#4a5568'
          }}>
            배송 진행 상황
          </Text>
          
          {tracking.tracking.trackingDetails.map((detail, index) => (
            <View 
              key={index}
              style={{ 
                flexDirection: 'row',
                paddingVertical: 12,
                borderLeftWidth: 2,
                borderLeftColor: index === 0 ? '#6b9bd1' : '#e0e0e0',
                paddingLeft: 16,
                marginLeft: 8
              }}
            >
              <View style={{ flex: 1 }}>
                <Text style={{ 
                  fontSize: 14, 
                  fontWeight: index === 0 ? 'bold' : 'normal',
                  color: index === 0 ? '#6b9bd1' : '#333',
                  marginBottom: 4
                }}>
                  {detail.where}
                </Text>
                <Text style={{ fontSize: 13, color: '#666' }}>
                  {detail.kind}
                </Text>
                <Text style={{ fontSize: 12, color: '#999', marginTop: 4 }}>
                  {detail.timeString}
                </Text>
              </View>
            </View>
          ))}
        </View>
      )}
    </ScrollView>
  );
};

🔔 주문 알림 시스템

주문 상태가 변경될 때마다 사용자에게 알려줘야 해! 푸시 알림, 이메일, SMS 등 다양한 채널로 알림을 보낼 수 있어. 📬

// Firebase Cloud Messaging을 이용한 푸시 알림
const admin = require('firebase-admin');

admin.initializeApp({
  credential: admin.credential.cert(serviceAccount)
});

const sendOrderNotification = async (userId, orderId, status) => {
  try {
    const user = await User.findById(userId);
    
    if (!user.fcmToken) {
      console.log('FCM 토큰이 없습니다');
      return;
    }
    
    const messages = {
      'paid': {
        title: '결제가 완료되었습니다 💳',
        body: '주문이 정상적으로 접수되었습니다.'
      },
      'preparing': {
        title: '상품을 준비하고 있습니다 📦',
        body: '곧 배송이 시작됩니다.'
      },
      'shipping': {
        title: '배송이 시작되었습니다 🚚',
        body: '운송장 번호로 배송을 추적할 수 있습니다.'
      },
      'delivered': {
        title: '배송이 완료되었습니다 ✅',
        body: '상품을 확인하신 후 구매확정 부탁드립니다.'
      }
    };
    
    const message = messages[status];
    
    if (!message) return;
    
    await admin.messaging().send({
      token: user.fcmToken,
      notification: {
        title: message.title,
        body: message.body
      },
      data: {
        type: 'order_status',
        orderId: orderId.toString(),
        status: status
      },
      android: {
        priority: 'high'
      },
      apns: {
        payload: {
          aps: {
            sound: 'default',
            badge: 1
          }
        }
      }
    });
    
    console.log('푸시 알림 전송 완료');
  } catch (error) {
    console.error('푸시 알림 전송 실패:', error);
  }
};

// 주문 상태 변경 시 알림 발송
const updateOrderStatus = async (orderId, newStatus) => {
  const order = await Order.findById(orderId);
  
  order.status = newStatus;
  order.statusHistory.push({
    status: newStatus,
    changedAt: new Date()
  });
  
  await order.save();
  
  // 알림 발송
  await sendOrderNotification(order.userId, orderId, newStatus);
};

⚡ 성능 최적화 및 보안

이커머스 앱은 동시 접속자가 많을 수 있어서 성능 최적화가 정말 중요해! 특히 세일 기간이나 특가 상품 오픈 시간에는 트래픽이 폭발적으로 증가하거든. 💥

🚀 동시성 제어

여러 사용자가 동시에 같은 상품을 구매하려고 할 때 문제가 생길 수 있어. 재고가 1개 남았는데 10명이 동시에 주문하면? 😱 이런 상황을 방지하기 위해 동시성 제어가 필요해!

// Redis를 이용한 재고 관리
const redis = require('redis');
const client = redis.createClient();

// 재고 확인 및 차감 (원자적 연산)
const decreaseStock = async (productId, quantity) => {
  const key = `stock:${productId}`;
  
  // Lua 스크립트로 원자적 연산 보장
  const script = `
    local stock = redis.call('GET', KEYS[1])
    if not stock then
      return -1
    end
    stock = tonumber(stock)
    if stock < tonumber(ARGV[1]) then
      return 0
    end
    redis.call('DECRBY', KEYS[1], ARGV[1])
    return 1
  `;
  
  return new Promise((resolve, reject) => {
    client.eval(script, 1, key, quantity, (err, result) => {
      if (err) reject(err);
      else resolve(result);
    });
  });
};

// 주문 생성 시 재고 확인
router.post('/order/create', authenticateUser, async (req, res) => {
  const session = await mongoose.startSession();
  session.startTransaction();
  
  try {
    const { items } = req.body;
    
    // 1. 재고 확인 및 차감
    for (const item of items) {
      const result = await decreaseStock(item.productId, item.quantity);
      
      if (result === -1) {
        throw new Error('상품 정보를 찾을 수 없습니다');
      } else if (result === 0) {
        throw new Error('재고가 부족합니다');
      }
    }
    
    // 2. 주문 생성
    const order = new Order({
      userId: req.user.id,
      items: items,
      totalAmount: calculateTotal(items),
      status: 'pending'
    });
    
    await order.save({ session });
    
    // 3. 트랜잭션 커밋
    await session.commitTransaction();
    
    res.json({ 
      success: true, 
      orderId: order._id,
      orderNumber: order.orderNumber
    });
  } catch (error) {
    // 트랜잭션 롤백
    await session.abortTransaction();
    
    // 재고 복구
    for (const item of items) {
      await client.incrby(`stock:${item.productId}`, item.quantity);
    }
    
    res.status(400).json({ 
      success: false, 
      message: error.message 
    });
  } finally {
    session.endSession();
  }
});

🔒 보안 강화

이커머스는 결제 정보를 다루기 때문에 보안이 생명이야! 🛡️ 몇 가지 필수 보안 조치들을 알려줄게.

// JWT 인증 미들웨어
const jwt = require('jsonwebtoken');

const authenticateUser = (req, res, next) => {
  try {
    const token = req.headers.authorization?.split(' ')[1];
    
    if (!token) {
      return res.status(401).json({ 
        success: false, 
        message: '인증 토큰이 없습니다' 
      });
    }
    
    const decoded = jwt.verify(token, process.env.JWT_SECRET);
    req.user = decoded;
    next();
  } catch (error) {
    if (error.name === 'TokenExpiredError') {
      return res.status(401).json({ 
        success: false, 
        message: '토큰이 만료되었습니다' 
      });
    }
    return res.status(401).json({ 
      success: false, 
      message: '유효하지 않은 토큰입니다' 
    });
  }
};

// Rate Limiting
const rateLimit = require('express-rate-limit');

const apiLimiter = rateLimit({
  windowMs: 15 * 60 * 1000, // 15분
  max: 100, // 최대 100회 요청
  message: '너무 많은 요청을 보냈습니다. 잠시 후 다시 시도해주세요.',
  standardHeaders: true,
  legacyHeaders: false
});

app.use('/api/', apiLimiter);

// 결제 API는 더 엄격하게
const paymentLimiter = rateLimit({
  windowMs: 60 * 60 * 1000, // 1시간
  max: 10, // 최대 10회
  message: '결제 시도 횟수를 초과했습니다.'
});

app.use('/api/payment/', paymentLimiter);

📊 캐싱 전략

자주 조회되는 데이터는 캐싱해서 DB 부하를 줄여야 해! Redis를 활용하면 엄청난 성능 향상을 볼 수 있어. 🚀

// Redis 캐싱 예시
const getProduct = async (productId) => {
  const cacheKey = `product:${productId}`;
  
  // 1. 캐시 확인
  const cached = await client.get(cacheKey);
  if (cached) {
    console.log('캐시 히트!');
    return JSON.parse(cached);
  }
  
  // 2. DB 조회
  const product = await Product.findById(productId);
  
  // 3. 캐시 저장 (1시간)
  await client.setex(cacheKey, 3600, JSON.stringify(product));
  
  return product;
};

// 상품 정보 변경 시 캐시 무효화
const updateProduct = async (productId, updateData) => {
  const product = await Product.findByIdAndUpdate(
    productId, 
    updateData, 
    { new: true }
  );
  
  // 캐시 삭제
  await client.del(`product:${productId}`);
  
  return product;
};

🎨 사용자 경험(UX) 개선

기능이 완벽해도 UX가 별로면 사용자들이 떠나버려. 😢 이커머스에서 특히 중요한 UX 요소들을 정리해볼게!

🛍️ 장바구니 UX 팁

💳 결제 UX 팁

// 주소 검색 API 연동 (Daum 우편번호 서비스)
import React, { useState } from 'react';
import { View, TouchableOpacity, Text, Modal } from 'react-native';
import { WebView } from 'react-native-webview';

const AddressSearchModal = ({ visible, onClose, onSelectAddress }) => {
  const handleMessage = (event) => {
    const data = JSON.parse(event.nativeEvent.data);
    
    onSelectAddress({
      postcode: data.zonecode,
      address: data.address,
      addressDetail: ''
    });
    
    onClose();
  };
  
  return (
    <Modal visible={visible} animationType="slide">
      <View style={{ flex: 1 }}>
        <View style={{ 
          flexDirection: 'row', 
          justifyContent: 'space-between',
          padding: 16,
          borderBottomWidth: 1,
          borderBottomColor: '#e0e0e0'
        }}>
          <Text style={{ fontSize: 18, fontWeight: 'bold' }}>
            주소 검색
          </Text>
          <TouchableOpacity onPress={onClose}>
            <Text style={{ fontSize: 16, color: '#666' }}>닫기</Text>
          </TouchableOpacity>
        </View>
        
        <WebView
          source={{ 
            uri: 'https://t1.daumcdn.net/mapjsapi/bundle/postcode/prod/postcode.v2.js'
          }}
          onMessage={handleMessage}
          injectedJavaScript={`
            new daum.Postcode({
              oncomplete: function(data) {
                window.ReactNativeWebView.postMessage(JSON.stringify(data));
              }
            }).embed(document.body);
          `}
        />
      </View>
    </Modal>
  );
};

📱 모바일 최적화

모바일 쇼핑이 대세인 만큼, 모바일 최적화는 필수야! 📱

🧪 테스트 및 디버깅

이커머스는 돈이 오가는 서비스라서 버그가 있으면 정말 큰일 나! 😱 철저한 테스트가 필수야.

✅ 테스트 전략

// Jest를 이용한 단위 테스트
describe('Cart Service', () => {
  test('장바구니에 상품 추가', async () => {
    const userId = 'test-user-id';
    const productId = 'test-product-id';
    const quantity = 2;
    
    const result = await addToCart(userId, productId, quantity);
    
    expect(result.success).toBe(true);
    expect(result.cart.items).toHaveLength(1);
    expect(result.cart.items[0].quantity).toBe(2);
  });
  
  test('동일 상품 추가 시 수량 증가', async () => {
    const userId = 'test-user-id';
    const productId = 'test-product-id';
    
    await addToCart(userId, productId, 1);
    const result = await addToCart(userId, productId, 2);
    
    expect(result.cart.items).toHaveLength(1);
    expect(result.cart.items[0].quantity).toBe(3);
  });
  
  test('재고 부족 시 에러', async () => {
    const userId = 'test-user-id';
    const productId = 'out-of-stock-product';
    const quantity = 100;
    
    await expect(
      addToCart(userId, productId, quantity)
    ).rejects.toThrow('재고가 부족합니다');
  });
});

// 결제 테스트
describe('Payment Service', () => {
  test('결제 금액 검증', async () => {
    const order = {
      merchantUid: 'test-order-123',
      totalAmount: 50000
    };
    
    const paymentData = {
      amount: 50000,
      status: 'paid'
    };
    
    const result = await verifyPayment(order, paymentData);
    
    expect(result.success).toBe(true);
  });
  
  test('금액 불일치 시 실패', async () => {
    const order = {
      merchantUid: 'test-order-123',
      totalAmount: 50000
    };
    
    const paymentData = {
      amount: 30000, // 금액 불일치
      status: 'paid'
    };
    
    const result = await verifyPayment(order, paymentData);
    
    expect(result.success).toBe(false);
    expect(result.message).toContain('금액이 일치하지 않습니다');
  });
});

🐛 디버깅 팁

// 로깅 시스템 구축
const winston = require('winston');

const logger = winston.createLogger({
  level: 'info',
  format: winston.format.combine(
    winston.format.timestamp(),
    winston.format.json()
  ),
  transports: [
    new winston.transports.File({ 
      filename: 'error.log', 
      level: 'error' 
    }),
    new winston.transports.File({ 
      filename: 'combined.log' 
    })
  ]
});

// 주문 생성 시 로깅
router.post('/order/create', async (req, res) => {
  const startTime = Date.now();
  
  try {
    logger.info('주문 생성 시작', {
      userId: req.user.id,
      items: req.body.items,
      totalAmount: req.body.totalAmount
    });
    
    const order = await createOrder(req.body);
    
    logger.info('주문 생성 완료', {
      orderId: order._id,
      orderNumber: order.orderNumber,
      duration: Date.now() - startTime
    });
    
    res.json({ success: true, order });
  } catch (error) {
    logger.error('주문 생성 실패', {
      userId: req.user.id,
      error: error.message,
      stack: error.stack,
      duration: Date.now() - startTime
    });
    
    res.status(500).json({ 
      success: false, 
      message: '주문 생성에 실패했습니다' 
    });
  }
});

🚀 배포 및 운영

개발이 끝났다고 끝이 아니야! 실제 서비스를 운영하면서 고려해야 할 것들이 많아. 🏃‍♂️

☁️ 클라우드 인프라

요즘은 대부분 클라우드 서비스를 사용해. AWS, GCP, Azure 등이 있는데, 각각 장단점이 있어.

📊 모니터링

서비스가 잘 돌아가는지 실시간으로 모니터링해야 해! 문제가 생기면 바로 알아차릴 수 있도록 말이야. 👀

// PM2를 이용한 프로세스 관리
module.exports = {
  apps: [{
    name: 'ecommerce-api',
    script: './server.js',
    instances: 'max', // CPU 코어 수만큼 인스턴스 생성
    exec_mode: 'cluster',
    env: {
      NODE_ENV: 'production',
      PORT: 3000
    },
    error_file: './logs/err.log',
    out_file: './logs/out.log',
    log_date_format: 'YYYY-MM-DD HH:mm:ss',
    merge_logs: true,
    // 자동 재시작
    watch: false,
    max_memory_restart: '1G',
    // 모니터링
    monitoring: true
  }]
};

// Sentry를 이용한 에러 트래킹
const Sentry = require('@sentry/node');

Sentry.init({
  dsn: process.env.SENTRY_DSN,
  environment: process.env.NODE_ENV,
  tracesSampleRate: 1.0
});

app.use(Sentry.Handlers.requestHandler());
app.use(Sentry.Handlers.errorHandler());

🎓 학습 리소스 및 커뮤니티

이커머스 앱 개발을 더 깊이 공부하고 싶다면? 이런 리소스들을 추천해! 📚

🤝 협업 도구

팀으로 개발할 때 필요한 도구들도 알아두면 좋아!

🎯 마무리하며

와, 여기까지 정말 긴 여정이었지? 😅 이커머스 앱 개발은 생각보다 고려해야 할 게 정말 많아. 하지만 하나하나 차근차근 구현해나가다 보면 어느새 완성도 높은 쇼핑몰 앱이 만들어질 거야! 💪

핵심을 다시 한번 정리해볼게:

1. 장바구니 - 로컬/서버/DB 저장 방식을 적절히 선택하고, 사용자 경험을 최우선으로 생각해

2. 결제 - PG사 API를 안전하게 연동하고, 반드시 서버에서 검증해. 보안이 생명이야!

3. 주문 - 주문 생명주기를 체계적으로 관리하고, 사용자에게 적절한 알림을 보내줘

4. 성능 - 동시성 제어, 캐싱, 최적화로 안정적인 서비스를 만들어

5. 보안 - HTTPS, JWT, Rate Limiting 등으로 시스템을 보호해

처음에는 어렵게 느껴질 수 있지만, 실제로 만들어보면서 배우는 게 가장 빠른 길이야. 작은 프로젝트부터 시작해서 점점 기능을 추가해나가보자! 🚀

그리고 혼자 막히는 부분이 있다면 재능넷에서 경험 많은 개발자들에게 도움을 받는 것도 좋은 방법이야. 때로는 전문가의 한마디 조언이 며칠간의 삽질을 줄여주기도 하거든! 😊

이커머스 앱 개발, 어렵지만 정말 보람찬 작업이야. 내가 만든 앱으로 사람들이 쇼핑하고, 판매자는 수익을 올리고, 구매자는 편리하게 물건을 받는 걸 보면 뿌듯함이 장난 아니거든! 💖

자, 이제 당신도 이커머스 앱 개발자가 될 준비가 됐어! 화이팅! 🎉