--- name: enhancement-guide description: SaaS 수정 및 고도화 가이드 - 기능 추가, 성능 개선, 확장 방법 --- # SaaS 수정 및 고도화 가이드 처음 만든 SaaS를 더 좋게 만들고 싶으신가요? 이 가이드를 따라하세요! --- ## 목차 1. [코드 수정하기](#1-코드-수정하기) 2. [새 기능 추가하기](#2-새-기능-추가하기) 3. [디자인 변경하기](#3-디자인-변경하기) 4. [성능 개선하기](#4-성능-개선하기) 5. [확장하기 (스케일링)](#5-확장하기-스케일링) 6. [보안 강화하기](#6-보안-강화하기) 7. [유지보수 가이드](#7-유지보수-가이드) --- ## 1. 코드 수정하기 ### 1.1 수정 전 준비사항 ``` ⚠️ 중요: 코드를 수정하기 전에 항상 백업하세요! 방법 1: Git으로 백업 (권장) ┌─────────────────────────────────────────┐ │ git add . │ │ git commit -m "수정 전 백업" │ └─────────────────────────────────────────┘ 방법 2: 새 브랜치 만들기 (더 안전) ┌─────────────────────────────────────────┐ │ git checkout -b feature\/새기능이름 │ └─────────────────────────────────────────┘ ``` ### 1.2 파일 찾기 ``` 📁 어디를 수정해야 할까요? ┌─────────────────────────────────────────────────────────┐ │ 수정하고 싶은 것 │ 찾아야 할 파일 │ ├─────────────────────────────────────────────────────────┤ │ 홈페이지 내용 │ src\/app\/page.tsx │ │ 로그인 페이지 │ src\/app\/(auth)\/login\/ │ │ 대시보드 │ src\/app\/(dashboard)\/ │ │ 가격 페이지 │ src\/app\/pricing\/ │ │ 버튼, 카드 등 UI │ src\/components\/ui\/ │ │ 색상, 폰트 │ tailwind.config.js │ │ API 로직 │ src\/app\/api\/ │ │ 데이터베이스 연결 │ src\/lib\/db.ts │ │ 환경 변수 │ .env.local │ └─────────────────────────────────────────────────────────┘ ``` ### 1.3 텍스트 수정하기 ```tsx \/\/ 예시: 홈페이지 제목 변경하기 \/\/ 📂 src\/app\/page.tsx 열기 \/\/ 변경 전:

Welcome to My SaaS<\/h1> \/\/ 변경 후:

나만의 멋진 서비스<\/h1> \/\/ 💾 저장 (Ctrl+S 또는 Cmd+S) \/\/ 🔄 브라우저에서 자동으로 변경사항 확인! ``` ### 1.4 색상 변경하기 ```javascript \/\/ 📂 tailwind.config.js module.exports = { theme: { extend: { colors: { \/\/ 브랜드 색상 변경 primary: { 50: '#eff6ff', \/\/ 가장 밝은 색 500: '#3b82f6', \/\/ 기본 색 600: '#2563eb', \/\/ 호버 색 900: '#1e3a8a', \/\/ 가장 어두운 색 }, \/\/ 새 색상 추가 brand: '#FF6B6B', }, }, }, } \/\/ 사용법: \/\/

Welcome to My SaaS<\/h1> \/\/ 변경 후:

문제가 발생했습니다<\/h2>