Update app.py

app.py

@@ -9,26 +9,33 @@ app = Flask(__name__)
 
 @app.route('/')
 def index():
+    # HTML_TEMPLATE에 기본 이미지 자동 로드 스크립트 추가
     return render_template_string(HTML_TEMPLATE)
 
 @app.route('/webtoon.png')
 def serve_webtoon_image():
-    # 샘플 이미지 생성 (webtoon.png가 없을 경우)
-    try:
-        from PIL import Image
+    # 실제 webtoon.png 파일 체크
+    image_path = os.path.join(os.path.dirname(os.path.abspath(__file__)), 'webtoon.png')
+    
+    if os.path.exists(image_path):
+        return send_file(image_path, mimetype='image/png')
+    else:
+        # 파일이 없으면 샘플 이미지 생성
+        from PIL import Image, ImageDraw, ImageFont
         import io
         
-        # 700x1000 크기의 샘플 이미지 생성
-        img = Image.new('RGB', (700, 1000), color='white')
+        img = Image.new('RGB', (700, 1000), color='#f0f0f0')
+        draw = ImageDraw.Draw(img)
+        
+        # 샘플 텍스트 추가
+        text = "샘플 이미지\n(webtoon.png를 업로드하세요)"
+        draw.text((350, 500), text, fill='#999', anchor='mm')
         
-        # 이미지를 바이트로 변환
         img_io = io.BytesIO()
         img.save(img_io, 'PNG')
         img_io.seek(0)
         
         return send_file(img_io, mimetype='image/png')
-    except:
-        return "Sample image", 200
 
 
 
@@ -49,20 +56,14 @@ HTML_TEMPLATE = '''
 
         body {
             font-family: 'Noto Sans KR', sans-serif;
-            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
-            min-height: 100vh;
-            padding: 20px;
+            background: #1a1a1a;
+            color: #fff;
+            overflow: hidden;
         }
 
         .container {
-            max-width: 1400px;
-            margin: 0 auto;
-            background: white;
-            border-radius: 20px;
-            box-shadow: 0 20px 60px rgba(0,0,0,0.3);
-            overflow: hidden;
             display: flex;
-            height: calc(100vh - 40px);
+            height: 100vh;
         }
 
         /* 좌측 툴바 */
@@ -88,24 +89,15 @@ HTML_TEMPLATE = '''
         }
 
         .toolbar h2 {
-            font-size: 20px;
+            font-size: 18px;
             margin-bottom: 20px;
             color: #fff;
             border-bottom: 2px solid #4a9eff;
             padding-bottom: 10px;
-            display: flex;
-            align-items: center;
-            gap: 10px;
         }
 
         .tool-section {
             margin-bottom: 30px;
-            animation: fadeIn 0.5s ease-in;
-        }
-
-        @keyframes fadeIn {
-            from { opacity: 0; transform: translateY(10px); }
-            to { opacity: 1; transform: translateY(0); }
         }
 
         .tool-section h3 {
@@ -113,40 +105,28 @@ HTML_TEMPLATE = '''
             margin-bottom: 15px;
             color: #aaa;
             text-transform: uppercase;
-            letter-spacing: 1px;
         }
 
         /* 파일 업로드 영역 */
         .file-upload {
             border: 2px dashed #4a9eff;
-            border-radius: 12px;
-            padding: 30px;
+            border-radius: 8px;
+            padding: 20px;
             text-align: center;
             cursor: pointer;
             transition: all 0.3s;
             margin-bottom: 20px;
-            background: linear-gradient(135deg, rgba(74, 158, 255, 0.1), rgba(118, 75, 162, 0.1));
         }
 
         .file-upload:hover {
-            background: linear-gradient(135deg, rgba(74, 158, 255, 0.2), rgba(118, 75, 162, 0.2));
+            background: rgba(74, 158, 255, 0.1);
             border-color: #6ab7ff;
-            transform: scale(1.02);
         }
 
         .file-upload input {
             display: none;
         }
 
-        .file-upload svg {
-            animation: float 3s ease-in-out infinite;
-        }
-
-        @keyframes float {
-            0%, 100% { transform: translateY(0); }
-            50% { transform: translateY(-10px); }
-        }
-
         /* 파일 리스트 */
         .file-list {
             background: #333;
@@ -160,15 +140,8 @@ HTML_TEMPLATE = '''
         .file-item {
             font-size: 12px;
             color: #aaa;
-            padding: 5px;
+            padding: 3px 0;
             border-bottom: 1px solid #444;
-            transition: all 0.3s;
-        }
-
-        .file-item:hover {
-            background: rgba(74, 158, 255, 0.1);
-            color: #4a9eff;
-            padding-left: 10px;
         }
 
         .file-item:last-child {
@@ -179,68 +152,43 @@ HTML_TEMPLATE = '''
         .component-grid {
             display: grid;
             grid-template-columns: repeat(3, 1fr);
-            gap: 10px;
+            gap: 8px;
         }
 
         .component-btn {
-            background: linear-gradient(135deg, #3a3a3a, #4a4a4a);
+            background: #3a3a3a;
             border: 1px solid #555;
-            border-radius: 12px;
-            padding: 12px;
+            border-radius: 8px;
+            padding: 10px;
             cursor: pointer;
             transition: all 0.3s;
             text-align: center;
             color: #fff;
-            position: relative;
-            overflow: hidden;
-        }
-
-        .component-btn::before {
-            content: '';
-            position: absolute;
-            top: 50%;
-            left: 50%;
-            width: 0;
-            height: 0;
-            background: radial-gradient(circle, rgba(74, 158, 255, 0.3), transparent);
-            transform: translate(-50%, -50%);
-            transition: width 0.3s, height 0.3s;
-        }
-
-        .component-btn:hover::before {
-            width: 100%;
-            height: 100%;
         }
 
         .component-btn:hover {
-            background: linear-gradient(135deg, #4a4a4a, #5a5a5a);
+            background: #4a4a4a;
             border-color: #4a9eff;
-            transform: translateY(-3px);
-            box-shadow: 0 5px 15px rgba(74, 158, 255, 0.3);
+            transform: translateY(-2px);
         }
 
         .component-btn svg {
-            width: 40px;
-            height: 40px;
-            margin-bottom: 5px;
-            position: relative;
-            z-index: 1;
+            width: 35px;
+            height: 35px;
+            margin-bottom: 3px;
         }
 
         .component-btn span {
             display: block;
             font-size: 11px;
-            position: relative;
-            z-index: 1;
         }
 
         /* 속성 편집 패널 */
         .properties-panel {
-            background: linear-gradient(135deg, #333, #3a3a3a);
-            border-radius: 12px;
+            background: #333;
+            border-radius: 8px;
             padding: 15px;
             margin-top: 20px;
-            box-shadow: inset 0 2px 5px rgba(0,0,0,0.3);
         }
 
         .property-group {
@@ -251,54 +199,37 @@ HTML_TEMPLATE = '''
             display: block;
             font-size: 12px;
             color: #aaa;
-            margin-bottom: 8px;
-            text-transform: uppercase;
-            letter-spacing: 0.5px;
+            margin-bottom: 5px;
         }
 
         .property-group input,
         .property-group select,
         .property-group textarea {
             width: 100%;
-            padding: 10px;
+            padding: 8px;
             background: #2a2a2a;
             border: 1px solid #444;
-            border-radius: 6px;
+            border-radius: 4px;
             color: #fff;
-            transition: all 0.3s;
-        }
-
-        .property-group input:focus,
-        .property-group select:focus,
-        .property-group textarea:focus {
-            border-color: #4a9eff;
-            box-shadow: 0 0 10px rgba(74, 158, 255, 0.2);
-            outline: none;
         }
 
         .color-picker {
             display: grid;
             grid-template-columns: repeat(6, 1fr);
-            gap: 8px;
+            gap: 5px;
         }
 
         .color-option {
             width: 35px;
             height: 35px;
-            border-radius: 6px;
+            border-radius: 4px;
             cursor: pointer;
             border: 2px solid transparent;
-            transition: all 0.3s;
-        }
-
-        .color-option:hover {
-            transform: scale(1.2);
         }
 
         .color-option.selected {
             border-color: #4a9eff;
-            box-shadow: 0 0 15px rgba(74, 158, 255, 0.5);
-            transform: scale(1.1);
+            box-shadow: 0 0 10px rgba(74, 158, 255, 0.5);
         }
 
         /* 메인 작업 영역 */
@@ -306,106 +237,80 @@ HTML_TEMPLATE = '''
             flex: 1;
             display: flex;
             flex-direction: column;
-            background: #f5f5f5;
+            background: #1a1a1a;
         }
 
         .workspace-header {
-            background: linear-gradient(135deg, #667eea, #764ba2);
+            background: #2a2a2a;
             padding: 15px 20px;
-            box-shadow: 0 2px 10px rgba(0,0,0,0.2);
+            border-bottom: 1px solid #444;
             display: flex;
             justify-content: space-between;
             align-items: center;
         }
 
-        .workspace-header h1 {
-            color: white;
-            font-size: 22px;
-            text-shadow: 2px 2px 4px rgba(0,0,0,0.2);
-        }
-
         .workspace-tools {
             display: flex;
             gap: 10px;
         }
 
         .tool-btn {
-            background: rgba(255,255,255,0.2);
-            border: 1px solid rgba(255,255,255,0.3);
-            border-radius: 8px;
-            padding: 10px 20px;
+            background: #3a3a3a;
+            border: 1px solid #555;
+            border-radius: 6px;
+            padding: 8px 16px;
             color: #fff;
             cursor: pointer;
             transition: all 0.3s;
-            backdrop-filter: blur(10px);
-            font-weight: 500;
         }
 
         .tool-btn:hover {
-            background: rgba(255,255,255,0.3);
-            transform: translateY(-2px);
-            box-shadow: 0 5px 15px rgba(0,0,0,0.2);
+            background: #4a4a4a;
+            border-color: #4a9eff;
         }
 
         .tool-btn.primary {
-            background: linear-gradient(135deg, #4a9eff, #6ab7ff);
-            border: none;
+            background: #4a9eff;
+            border-color: #4a9eff;
         }
 
         .tool-btn.primary:hover {
-            background: linear-gradient(135deg, #6ab7ff, #8ac4ff);
-        }
-
-        .tool-btn.danger {
-            background: linear-gradient(135deg, #ff4757, #ff6b7a);
-            border: none;
-        }
-
-        .tool-btn.danger:hover {
-            background: linear-gradient(135deg, #ff6b7a, #ff8997);
+            background: #6ab7ff;
         }
 
         /* 캔버스 영역 */
         .canvas-container {
             flex: 1;
             overflow: auto;
-            padding: 30px;
+            padding: 20px;
             display: flex;
             justify-content: center;
-            background: linear-gradient(135deg, #f5f5f5, #e0e0e0);
+            background: #222;
             position: relative;
         }
 
         .canvas-wrapper {
             position: relative;
             background: white;
-            box-shadow: 0 15px 50px rgba(0,0,0,0.2);
+            box-shadow: 0 10px 40px rgba(0,0,0,0.5);
             min-height: 800px;
             width: 700px;
-            border-radius: 10px;
-            overflow: hidden;
         }
 
         /* 이미지 컨테이너 */
         .image-container {
             position: relative;
             width: 100%;
-            animation: slideIn 0.5s ease-out;
-        }
-
-        @keyframes slideIn {
-            from { opacity: 0; transform: translateX(-20px); }
-            to { opacity: 1; transform: translateX(0); }
         }
 
         .image-number {
             position: absolute;
-            left: -45px;
+            left: -40px;
             top: 10px;
-            background: linear-gradient(135deg, #4a9eff, #6ab7ff);
+            background: #4a9eff;
             color: white;
-            width: 35px;
-            height: 35px;
+            width: 30px;
+            height: 30px;
             border-radius: 50%;
             display: flex;
             align-items: center;
@@ -413,7 +318,7 @@ HTML_TEMPLATE = '''
             font-weight: bold;
             font-size: 14px;
             z-index: 10;
-            box-shadow: 0 3px 10px rgba(0,0,0,0.3);
+            box-shadow: 0 2px 5px rgba(0,0,0,0.3);
         }
 
         .webtoon-image {
@@ -428,40 +333,35 @@ HTML_TEMPLATE = '''
             cursor: move;
             user-select: none;
             z-index: 50;
-            transition: box-shadow 0.3s;
         }
 
         .draggable-component.dragging {
             z-index: 1000;
-            opacity: 0.9;
-            box-shadow: 0 10px 30px rgba(0,0,0,0.3);
+            opacity: 0.8;
         }
 
         .draggable-component.selected {
             outline: 2px solid #4a9eff;
             z-index: 100;
-            box-shadow: 0 0 20px rgba(74, 158, 255, 0.3);
         }
 
         .draggable-component .resize-handle {
             position: absolute;
-            width: 12px;
-            height: 12px;
-            background: linear-gradient(135deg, #4a9eff, #6ab7ff);
-            border: 2px solid #fff;
-            border-radius: 50%;
+            width: 10px;
+            height: 10px;
+            background: #4a9eff;
+            border: 1px solid #fff;
             display: none;
-            box-shadow: 0 2px 5px rgba(0,0,0,0.2);
         }
 
         .draggable-component.selected .resize-handle {
             display: block;
         }
 
-        .resize-handle.nw { top: -6px; left: -6px; cursor: nw-resize; }
-        .resize-handle.ne { top: -6px; right: -6px; cursor: ne-resize; }
-        .resize-handle.sw { bottom: -6px; left: -6px; cursor: sw-resize; }
-        .resize-handle.se { bottom: -6px; right: -6px; cursor: se-resize; }
+        .resize-handle.nw { top: -5px; left: -5px; cursor: nw-resize; }
+        .resize-handle.ne { top: -5px; right: -5px; cursor: ne-resize; }
+        .resize-handle.sw { bottom: -5px; left: -5px; cursor: sw-resize; }
+        .resize-handle.se { bottom: -5px; right: -5px; cursor: se-resize; }
 
         /* 말풍선 스타일들 */
         .speech-bubble {
@@ -480,6 +380,12 @@ HTML_TEMPLATE = '''
             box-sizing: border-box;
         }
 
+        .speech-bubble .component-text {
+            margin-top: 0;
+            padding-top: 8px;
+            padding-bottom: 8px;
+        }
+
         .speech-bubble-tail {
             position: absolute;
             bottom: -10px;
@@ -519,6 +425,12 @@ HTML_TEMPLATE = '''
             box-sizing: border-box;
         }
 
+        .thought-bubble .component-text {
+            margin-top: 0;
+            padding-top: 8px;
+            padding-bottom: 8px;
+        }
+
         .thought-bubble-dots {
             position: absolute;
             bottom: -25px;
@@ -611,8 +523,7 @@ HTML_TEMPLATE = '''
             width: 100%;
             height: 100%;
             font-weight: bold;
-            text-shadow: 3px 3px 0 white, -3px -3px 0 white, 3px -3px 0 white, -3px 3px 0 white,
-                         2px 2px 0 black, -2px -2px 0 black, 2px -2px 0 black, -2px 2px 0 black;
+            text-shadow: 2px 2px 0 white, -2px -2px 0 white, 2px -2px 0 white, -2px 2px 0 white;
             display: flex;
             align-items: center;
             justify-content: center;
@@ -659,7 +570,6 @@ HTML_TEMPLATE = '''
             display: flex;
             align-items: center;
             justify-content: center;
-            box-shadow: 0 5px 15px rgba(0,0,0,0.2);
         }
 
         .gradient-box .component-text {
@@ -692,12 +602,11 @@ HTML_TEMPLATE = '''
             top: 50%;
             left: 50%;
             transform: translate(-50%, -50%);
-            background: linear-gradient(135deg, rgba(0,0,0,0.95), rgba(30,30,30,0.95));
-            padding: 40px;
-            border-radius: 15px;
+            background: rgba(0,0,0,0.9);
+            padding: 30px;
+            border-radius: 10px;
             z-index: 10000;
             text-align: center;
-            box-shadow: 0 10px 40px rgba(0,0,0,0.5);
         }
 
         .loading.active {
@@ -705,13 +614,13 @@ HTML_TEMPLATE = '''
         }
 
         .loading-spinner {
-            border: 4px solid rgba(255,255,255,0.1);
-            border-top: 4px solid #4a9eff;
+            border: 3px solid #f3f3f3;
+            border-top: 3px solid #4a9eff;
             border-radius: 50%;
-            width: 50px;
-            height: 50px;
+            width: 40px;
+            height: 40px;
             animation: spin 1s linear infinite;
-            margin: 0 auto 15px;
+            margin: 0 auto 10px;
         }
 
         @keyframes spin {
@@ -719,11 +628,6 @@ HTML_TEMPLATE = '''
             100% { transform: rotate(360deg); }
         }
 
-        .loading p {
-            color: white;
-            font-size: 16px;
-        }
-
         /* 이미지 간격 조절 */
         .spacing-control {
             display: flex;
@@ -733,93 +637,36 @@ HTML_TEMPLATE = '''
 
         .spacing-control input[type="range"] {
             flex: 1;
-            height: 6px;
-            -webkit-appearance: none;
-            appearance: none;
-            background: #333;
-            border-radius: 3px;
-            outline: none;
-        }
-
-        .spacing-control input[type="range"]::-webkit-slider-thumb {
-            -webkit-appearance: none;
-            appearance: none;
-            width: 18px;
-            height: 18px;
-            border-radius: 50%;
-            background: linear-gradient(135deg, #4a9eff, #6ab7ff);
-            cursor: pointer;
         }
 
         .spacing-value {
             width: 50px;
             text-align: center;
-            color: #4a9eff;
-            font-weight: bold;
         }
 
         /* 개별 저장 입력 */
         .save-individual {
             display: flex;
-            gap: 8px;
+            gap: 5px;
             margin-top: 10px;
         }
 
         .save-individual input {
-            width: 80px;
-            padding: 8px;
-            background: #2a2a2a;
-            border: 1px solid #444;
-            border-radius: 6px;
-            color: white;
+            width: 60px;
         }
 
         .save-individual button {
             flex: 1;
-            padding: 8px;
-            background: linear-gradient(135deg, #28a745, #5cbf5c);
+            padding: 5px;
+            background: #28a745;
             border: none;
-            border-radius: 6px;
+            border-radius: 4px;
             color: white;
             cursor: pointer;
-            font-weight: 500;
-            transition: all 0.3s;
         }
 
         .save-individual button:hover {
-            background: linear-gradient(135deg, #5cbf5c, #7ed07e);
-            transform: translateY(-2px);
-            box-shadow: 0 5px 15px rgba(40, 167, 69, 0.3);
-        }
-
-        /* 빈 상태 메시지 */
-        .empty-state {
-            display: flex;
-            flex-direction: column;
-            align-items: center;
-            justify-content: center;
-            height: 100%;
-            color: #999;
-            text-align: center;
-            padding: 40px;
-        }
-
-        .empty-state svg {
-            width: 100px;
-            height: 100px;
-            margin-bottom: 20px;
-            opacity: 0.5;
-        }
-
-        .empty-state h3 {
-            font-size: 24px;
-            margin-bottom: 10px;
-            color: #666;
-        }
-
-        .empty-state p {
-            font-size: 14px;
-            color: #999;
+            background: #5cbf5c;
         }
     </style>
 </head>
@@ -827,22 +674,19 @@ HTML_TEMPLATE = '''
     <div class="container">
         <!-- 좌측 툴바 -->
         <div class="toolbar">
-            <h2>
-                <span>🎨</span>
-                <span>웹툰 편집 도구</span>
-            </h2>
+            <h2>🎨 웹툰 편집 도구</h2>
             
             <!-- 파일 업로드 -->
             <div class="tool-section">
                 <h3>📁 이미지 업로드</h3>
                 <div class="file-upload" onclick="document.getElementById('fileInput').click()">
-                    <svg width="50" height="50" fill="#4a9eff">
-                        <rect x="10" y="15" width="30" height="25" fill="none" stroke="currentColor" stroke-width="2"/>
-                        <polyline points="20,30 25,25 30,30" fill="none" stroke="currentColor" stroke-width="2"/>
-                        <line x1="25" y1="25" x2="25" y2="35" stroke="currentColor" stroke-width="2"/>
+                    <svg width="40" height="40" fill="#4a9eff">
+                        <rect x="5" y="10" width="30" height="25" fill="none" stroke="currentColor" stroke-width="2"/>
+                        <polyline points="15,25 20,20 25,25" fill="none" stroke="currentColor" stroke-width="2"/>
+                        <line x1="20" y1="20" x2="20" y2="30" stroke="currentColor" stroke-width="2"/>
                     </svg>
-                    <p style="font-size: 14px; margin-top: 10px;">클릭하여 이미지 선택</p>
-                    <p style="font-size: 11px; color: #888; margin-top: 5px;">여러 파일 동시 선택 가능</p>
+                    <p>클릭하여 이미지 선택</p>
+                    <p style="font-size: 11px; color: #888; margin-top: 5px;">파일명 기준 자동 정렬 (1.jpg, 2.jpg...)</p>
                     <input type="file" id="fileInput" multiple accept="image/*">
                 </div>
                 <div id="fileList"></div>
@@ -861,7 +705,7 @@ HTML_TEMPLATE = '''
                     <label>개별 이미지 저장</label>
                     <div class="save-individual">
                         <input type="number" id="imageNumber" placeholder="번호" min="1">
-                        <button onclick="exportSingleImage()">💾 저장</button>
+                        <button onclick="exportSingleImage()">저장</button>
                     </div>
                 </div>
             </div>
@@ -905,7 +749,7 @@ HTML_TEMPLATE = '''
                     </div>
                     <div class="component-btn" onclick="addComponent('action')">
                         <svg viewBox="0 0 100 100" fill="none" stroke="white" stroke-width="2">
-                            <text x="50" y="55" text-anchor="middle" font-size="40" fill="white" font-weight="bold">!</text>
+                            <text x="50" y="50" text-anchor="middle" font-size="30" fill="white">!</text>
                         </svg>
                         <span>효과음</span>
                     </div>
@@ -921,6 +765,12 @@ HTML_TEMPLATE = '''
                         </svg>
                         <span>텍스트박스</span>
                     </div>
+                    <div class="component-btn" onclick="addComponent('transparent')">
+                        <svg viewBox="0 0 100 100" fill="none" stroke="white" stroke-width="2" stroke-dasharray="5,5">
+                            <rect x="20" y="30" width="60" height="40"/>
+                        </svg>
+                        <span>투명박스</span>
+                    </div>
                     <div class="component-btn" onclick="addComponent('gradient')">
                         <svg viewBox="0 0 100 100">
                             <defs>
@@ -947,6 +797,8 @@ HTML_TEMPLATE = '''
                                 <option value="Arial">Arial</option>
                                 <option value="Verdana">Verdana</option>
                                 <option value="Georgia">Georgia</option>
+                                <option value="'Times New Roman'">Times New Roman</option>
+                                <option value="'Courier New'">Courier New</option>
                                 <option value="'Comic Sans MS'">Comic Sans MS</option>
                             </optgroup>
                             <optgroup label="한글 폰트">
@@ -1008,25 +860,17 @@ HTML_TEMPLATE = '''
         <!-- 메인 작업 영역 -->
         <div class="workspace">
             <div class="workspace-header">
-                <h1>🎨 웹툰 편집 스튜디오 Pro</h1>
+                <h1 style="font-size: 20px;">🎨 웹툰 편집 스튜디오 Pro</h1>
                 <div class="workspace-tools">
-                    <button class="tool-btn danger" onclick="deleteSelected()">🗑️ 선택 삭제</button>
+                    <button class="tool-btn" onclick="deleteSelected()">🗑️ 선택 삭제</button>
                     <button class="tool-btn" onclick="clearAll()">🔄 전체 초기화</button>
-                    <button class="tool-btn primary" onclick="exportAllImages()">💾 전체 저장</button>
+                    <button class="tool-btn primary" onclick="exportSingleImage()">💾 이미지 저장</button>
                 </div>
             </div>
             
             <div class="canvas-container">
                 <div class="canvas-wrapper" id="canvas">
-                    <div class="empty-state" id="emptyState">
-                        <svg viewBox="0 0 100 100" fill="none" stroke="#ccc" stroke-width="2">
-                            <rect x="20" y="30" width="60" height="40" stroke-dasharray="5,5"/>
-                            <circle cx="35" cy="45" r="5"/>
-                            <path d="M 30 55 L 40 45 L 50 50 L 60 40 L 70 55"/>
-                        </svg>
-                        <h3>이미지를 업로드하세요</h3>
-                        <p>좌측 상단의 업로드 버튼을 클릭하여<br>웹툰 이미지를 불러오세요</p>
-                    </div>
+                    <!-- 업로드된 이미지와 컴포넌트들이 여기에 추가됩니다 -->
                 </div>
             </div>
         </div>
@@ -1049,7 +893,63 @@ HTML_TEMPLATE = '''
         let selectedColor = 'black';
         let uploadedImages = [];
         let currentDragElement = null;
-        const DEFAULT_FONT_SIZE = 22;
+        const DEFAULT_FONT_SIZE = 22; // 기본 글자 크기 상수
+
+        // 페이지 로드 시 기본 이미지 로드
+        window.addEventListener('DOMContentLoaded', function() {
+            loadDefaultImage();
+        });
+
+        // 기본 이미지 로드 함수
+        function loadDefaultImage() {
+            const canvas = document.getElementById('canvas');
+            
+            // 이미지 컨테이너 생성
+            const container = document.createElement('div');
+            container.className = 'image-container';
+            container.id = 'image-container-1';
+            
+            // 번호 라벨 생성
+            const numberLabel = document.createElement('div');
+            numberLabel.className = 'image-number';
+            numberLabel.textContent = '1';
+            
+            // 이미지 생성
+            const img = document.createElement('img');
+            img.src = 'webtoon.png';
+            img.className = 'webtoon-image';
+            img.alt = 'webtoon.png';
+            img.id = 'webtoon-image-1';
+            
+            // 이미지 로드 에러 처리
+            img.onerror = function() {
+                console.error('기본 이미지(webtoon.png)를 불러올 수 없습니다.');
+                // 에러 시 파일 리스트에 메시지 표시
+                const fileList = document.getElementById('fileList');
+                fileList.innerHTML = '<p style="font-size: 12px; color: #ff6b6b;">⚠️ webtoon.png 파일을 찾을 수 없습니다.</p>';
+            };
+            
+            // 이미지 로드 성공 시
+            img.onload = function() {
+                // 파일 리스트 업데이트
+                const fileList = document.getElementById('fileList');
+                fileList.innerHTML = '<p style="font-size: 12px; color: #4a9eff; margin-bottom: 10px;">✅ 기본 이미지 로드됨</p><div class="file-list"><div class="file-item">1. webtoon.png (기본)</div></div>';
+                
+                // uploadedImages 배열에 추가
+                uploadedImages.push({
+                    id: 1,
+                    name: 'webtoon.png',
+                    element: img
+                });
+                
+                // 이미지 간격 적용
+                updateImageSpacing();
+            };
+            
+            container.appendChild(numberLabel);
+            container.appendChild(img);
+            canvas.appendChild(container);
+        }
 
         // 자연스러운 정렬 함수
         function naturalSort(a, b) {
@@ -1071,14 +971,6 @@ HTML_TEMPLATE = '''
         // 파일 업로드 처리
         document.getElementById('fileInput').addEventListener('change', async function(e) {
             const files = Array.from(e.target.files);
-            if (files.length === 0) return;
-            
-            // 빈 상태 메시지 숨기기
-            const emptyState = document.getElementById('emptyState');
-            if (emptyState) {
-                emptyState.style.display = 'none';
-            }
-            
             files.sort(naturalSort);
             
             const canvas = document.getElementById('canvas');
@@ -1157,14 +1049,8 @@ HTML_TEMPLATE = '''
             });
         }
 
-        // 컴포넌트 추가
+        // 컴포넌트 추가 (기본 폰트 크기 수정)
         function addComponent(type) {
-            // 이미지가 없으면 경고
-            if (uploadedImages.length === 0) {
-                alert('먼저 이미지를 업로드해주세요!');
-                return;
-            }
-            
             const canvas = document.getElementById('canvas');
             const component = document.createElement('div');
             component.className = 'draggable-component';
@@ -1234,6 +1120,12 @@ HTML_TEMPLATE = '''
                             <textarea class="component-text" placeholder="텍스트 입력..." style="font-size: ${DEFAULT_FONT_SIZE}px;"></textarea>
                         </div>`;
                     break;
+                case 'transparent':
+                    innerContent = `
+                        <div class="transparent-box">
+                            <textarea class="component-text" placeholder="텍스트 입력..." style="font-size: ${DEFAULT_FONT_SIZE}px;"></textarea>
+                        </div>`;
+                    break;
                 case 'gradient':
                     innerContent = `
                         <div class="gradient-box">
@@ -1303,6 +1195,7 @@ HTML_TEMPLATE = '''
             isDragging = true;
             currentDragElement = component;
             
+            // 드래그 중 클래스 추가
             component.classList.add('dragging');
             
             const canvasRect = document.getElementById('canvas').getBoundingClientRect();
@@ -1328,6 +1221,7 @@ HTML_TEMPLATE = '''
             let newX = e.clientX - canvasRect.left - dragOffset.x;
             let newY = e.clientY - canvasRect.top - dragOffset.y + containerScrollTop;
             
+            // 캔버스 범위 내로 제한
             newX = Math.max(0, Math.min(newX, canvas.offsetWidth - currentDragElement.offsetWidth));
             newY = Math.max(0, newY);
             
@@ -1497,11 +1391,25 @@ HTML_TEMPLATE = '''
             tempContainer.style.left = '-9999px';
             document.body.appendChild(tempContainer);
             
+            // html2canvas 옵션
             html2canvas(tempContainer, {
                 backgroundColor: '#ffffff',
                 scale: 2,
                 useCORS: true,
-                logging: false
+                logging: false,
+                scrollY: 0,
+                scrollX: 0,
+                windowHeight: tempContainer.scrollHeight,
+                windowWidth: tempContainer.scrollWidth,
+                onclone: function(clonedDoc) {
+                    // 클론된 문서에서 텍스트 영역 스타일 조정
+                    const textAreas = clonedDoc.querySelectorAll('.component-text');
+                    textAreas.forEach(textarea => {
+                        textarea.style.paddingTop = '10px';
+                        textarea.style.lineHeight = '1.6';
+                        textarea.style.overflow = 'visible';
+                    });
+                }
             }).then(function(canvas) {
                 const link = document.createElement('a');
                 link.download = 'webtoon_' + imageNumber + '_' + new Date().getTime() + '.png';
@@ -1524,55 +1432,6 @@ HTML_TEMPLATE = '''
             });
         }
 
-        // 전체 이미지 저장
-        function exportAllImages() {
-            if (uploadedImages.length === 0) {
-                alert('⚠️ 저장할 이미지가 없습니다.');
-                return;
-            }
-            
-            const loading = document.getElementById('loading');
-            loading.classList.add('active');
-            
-            // 모든 컴포넌트 선택 해제
-            document.querySelectorAll('.draggable-component').forEach(c => {
-                c.classList.remove('selected');
-            });
-            
-            // 모든 번호 라벨 숨기기
-            document.querySelectorAll('.image-number').forEach(label => {
-                label.style.display = 'none';
-            });
-            
-            html2canvas(document.getElementById('canvas'), {
-                backgroundColor: '#ffffff',
-                scale: 2,
-                useCORS: true,
-                logging: false
-            }).then(function(canvas) {
-                const link = document.createElement('a');
-                link.download = 'webtoon_complete_' + new Date().getTime() + '.png';
-                link.href = canvas.toDataURL('image/png');
-                link.click();
-                
-                // 번호 라벨 다시 표시
-                document.querySelectorAll('.image-number').forEach(label => {
-                    label.style.display = 'flex';
-                });
-                
-                loading.classList.remove('active');
-                
-                alert('✅ 전체 이미지가 성공적으로 저장되었습니다!');
-            }).catch(function(error) {
-                document.querySelectorAll('.image-number').forEach(label => {
-                    label.style.display = 'flex';
-                });
-                loading.classList.remove('active');
-                console.error('Error:', error);
-                alert('⚠️ 이미지 저장 중 오류가 발생했습니다.');
-            });
-        }
-
         // 캔버스 클릭 이벤트
         document.getElementById('canvas').addEventListener('click', function(e) {
             if (e.target === this || e.target.classList.contains('webtoon-image')) {