매뉴얼 개편: 배포 도구 분리·도메인 정정·용어/흐름도·포털 공유 추가

- Kubero/Coolify 배포 섹션을 접이식(details) 토글로 분리 - Coolify 배포 도메인을 *.apps.bokdev.in 으로 정정 (Kubero는 *.playground.bokdev.in) - git 레포 URL vs 배포 URL 구분 표 + 아키텍처 흐름도(architecture.svg) 추가 - 9-5 포털에 공유 절차 추가 (스크린샷 포함) - 목차/흐름도에 포털 공유 단계 반영 용어 통일 및 문구 다듬기 - '레포' → '레포지토리'(git 원격 저장소·URL 지칭 시), URL 이름 placeholder '<레포명>' → '<프로젝트명>'으로 통일 - 9-1 제목 변경에 맞춰 앵커 링크 동기화 - 섹션 0: 서비스 설명 정리(Gitea=원격 레포지토리, Kubero=k8s 기반/Coolify=Docker 기반), 미리보기 행 정리 - 9-3A/9-3B 제목에 토글 펼침 안내 문구 추가
2026-07-10 17:31:18 +09:00
parent 9ff87502a4
commit 47d4f9fa0b
4 changed files with 179 additions and 24 deletions
--- a/README.md
+++ b/README.md
@@ -1,7 +1,7 @@
 # AI DEV 개발·배포 매뉴얼 (개발자용)

 행번 계정 하나로 **Coder에서 개발**하고, **Gitea에 push**, **Kubero 또는 Coolify로 배포**합니다.
-(배포 도구는 Kubero·Coolify 중 검토 중입니다. [9번](#9-배포-gitea--kubero--coolify)에 두 방법을 모두 정리해 두었습니다.)
+(배포 도구는 Kubero·Coolify 중 하나를 사용할 수 있습니다. [9번](#9-배포-gitea--kubero--coolify)에 두 방법을 모두 정리해 두었습니다.)
 DB(PostgreSQL)·파일저장소(MinIO)·AI(LiteLLM - key 제외)는 워크스페이스에 미리 연결되어 있습니다.

 <!-- 이미지: `![설명](images/파일명.png)` 자리에 맞춰 캡처 후 images/ 에 추가 -->
@@ -12,27 +12,29 @@ DB(PostgreSQL)·파일저장소(MinIO)·AI(LiteLLM - key 제외)는 워크스페
 [1. 로그인](#1-로그인) → [2. 워크스페이스 만들기](#2-워크스페이스-만들기-최초-1회) → [3. VS Code 열기](#3-vs-code-열기) → [5. AI 키 등록](#5-ai-키-등록-최초-1회)

 **앱마다**
-[6. 새 프로젝트 시작](#6-새-프로젝트-시작) → [7. 개발](#7-개발) → [8. 로컬 실행·확인](#8-로컬-실행확인) → [9. 배포](#9-배포-gitea--kubero--coolify)
+[6. 새 프로젝트 시작](#6-새-프로젝트-시작) → [7. 개발](#7-개발) → [8. 로컬 실행·확인](#8-로컬-실행확인) → [9. 배포](#9-배포-gitea--kubero--coolify) → [9-5. 포털에 공유](#9-5-포털에-공유)

 ```
 [최초 1회] 로그인(1) → 워크스페이스 생성(2) → VS Code(3) → AI 키 등록(5)
-[앱마다]   new-project + git init(6) → 개발·커밋(7) → 로컬 확인(8) → 레포 생성·push·배포(Kubero/Coolify)(9)
+[앱마다]   new-project + git init(6) → 개발·커밋(7) → 로컬 확인(8) → 레포지토리 생성·push·배포(Kubero/Coolify)(9) → 포털 공유(9-5)
 ```

-## 0. 서비스 주소
+## 0. 서비스 종류

 | 용도 | 주소 |
 |---|---|
 | AI DEV 포털 (시작점) | https://portal.bokdev.in |
 | Coder (개발 워크스페이스) | https://coder.bokdev.in |
-| Gitea (코드 저장소) | https://gitea.bokdev.in |
-| Kubero (배포 · 후보) | https://kubero.bokdev.in |
-| Coolify (배포 · 후보) | https://coolify.bokdev.in |
-| 개발 중 미리보기 | `https://<자동생성>.coder.bokdev.in` |
-| 배포된 앱 | `https://<레포명>.playground.bokdev.in` |
+| Gitea (코드 저장소, 원격 레포지토리) | https://gitea.bokdev.in |
+| Kubero (배포(k8s 기반)) | https://kubero.bokdev.in |
+| Coolify (배포(Docker 기반)) | https://coolify.bokdev.in |
+| 배포된 앱 (Kubero) | `https://<프로젝트명>.playground.bokdev.in` |
+| 배포된 앱 (Coolify) | `https://<프로젝트명>.apps.bokdev.in` |

 모든 서비스는 **행번 계정(SSO)** 으로 로그인합니다.

+![개발 및 배포 흐름도](images/architecture.svg)
+
 코드에서 쓰는 접속정보(DB·S3)는 `.project-env` 파일로 자동 제공됩니다. 직접 입력할 값이 없습니다.

 ## 1. 로그인
@@ -135,7 +137,7 @@ cd ~/projects
 cd sample && git pull && cd ..   # 예제 최신화
 new-project myapp                # 예제를 ~/projects/myapp 으로 복사 + .project-env 자동 생성
 ```
-`myapp`은 예시입니다. 이 이름은 Gitea 레포명으로 설정할 이름과 동일하게 맞추시면 되고, 소문자·숫자·하이픈만 사용합니다.
+`myapp`은 예시입니다. 이 이름(프로젝트 명)은 Gitea 레포지토리명과 동일하게 맞추시면 되고, 영어·숫자·하이픈만 사용합니다.

 **(2) git 초기화** — 개발 시작 시점에 합니다. 커밋 이력을 처음부터 관리하기 위함이며, 원격(Gitea) 연결은 배포 단계([9번](#9-배포-gitea--kubero--coolify))에서 합니다:
 ```bash
@@ -220,20 +222,21 @@ curl 127.0.0.1:3000/s3        # {"ok":true,"bucket":...} S3 연결

 ## 9. 배포 (Gitea → Kubero / Coolify)

-배포 단위: Gitea `playground` 조직의 레포 1개 = 배포 앱 1개.
-배포 주소: `https://<레포명>.playground.bokdev.in`
+배포 단위: Gitea `playground` 조직의 레포지토리 1개 = 배포 앱 1개.
+배포 주소는 사용하는 도구에 따라 다릅니다 — **Kubero → `https://<프로젝트명>.playground.bokdev.in`**, **Coolify → `https://<프로젝트명>.apps.bokdev.in`**.

 배포 도구는 **Kubero**와 **Coolify** 중 하나를 사용합니다.  
-**Gitea 레포 생성([9-1](#9-1-gitea-원격-레포-생성-앱당-1회))과 push([9-2](#9-2-push))는 두 도구 공통**이며, 이후 사용하는 도구에 따라 [9-3A(Kubero)](#9-3a-kubero에-앱-추가-앱당-1회) 또는 [9-3B(Coolify)](#9-3b-coolify에-앱-추가-앱당-1회)를 따릅니다.
+**Gitea 레포지토리 생성([9-1](#9-1-gitea-원격-레포지토리-생성-앱당-1회))과 push([9-2](#9-2-push))는 두 도구 공통**이며, 이후 사용하는 도구에 따라 [9-3A(Kubero)](#9-3a-kubero에-앱-추가-앱당-1회) 또는 [9-3B(Coolify)](#9-3b-coolify에-앱-추가-앱당-1회)를 따릅니다.

 | 항목 | Kubero | Coolify |
 |---|---|---|
-| 배포 위치 | `playground` 파이프라인에 앱 추가 | `ai-dev` 팀 → `ai-dev` 프로젝트에 앱 추가 |
+| 배포 주소 | `https://<프로젝트명>.playground.bokdev.in` | `https://<프로젝트명>.apps.bokdev.in` |
+| 배포 위치 | `playground` 파이프라인에 앱 추가 | `aidev` 팀 → `aidev` 프로젝트에 앱 추가 |
 | 코드 수정 반영 | push 후 **수동 재빌드** (자동 빌드 미연동) | push 시 **자동 재빌드·배포** (webhook 설정 시, [9-3B](#9-3b-coolify에-앱-추가-앱당-1회)) |
 | 환경변수 입력 | `.project-env` 업로드 → 자동 파싱 | `.project-env` 값을 붙여넣기 (Developer view) |
 | 빌드 방식 | Dockerfile | Dockerfile |

-### 9-1. Gitea 원격 레포 생성 (앱당 1회)
+### 9-1. Gitea 원격 레포지토리 생성 (앱당 1회)

 1. https://gitea.bokdev.in/playground → 우측 상단 **`+` → New Repository**  
   ![새 저장소 만들기](images/make-new-repository.png)
@@ -253,6 +256,11 @@ git push -u origin main

 ### 9-3A. Kubero에 앱 추가 (앱당 1회)

+▸ 아래 삼각형을 눌러 펼치세요.
+
+<details>
+<summary><b>Kubero로 배포</b> — 도메인 <code>*.playground.bokdev.in</code> · 클릭해서 펼치기</summary>
+
 `playground` pipeline을 사용하시면 되며, 사용자는 그 안에 본인 앱만 추가합니다.

 1. https://kubero.bokdev.in 접속
@@ -264,9 +272,16 @@ git push -u origin main

 > 자동 빌드는 현재 미연동입니다. **코드 수정 후에는 push 하고 Kubero에서 해당 앱의 빌드를 다시 실행합니다.**

+</details>
+
 ### 9-3B. Coolify에 앱 추가 (앱당 1회)

-Coolify는 "**push → Dockerfile로 자동 빌드·배포**" 방식입니다. 사용자는 `ai-dev` 프로젝트에 본인 앱만 추가합니다.
+▸ 아래 삼각형을 눌러 펼치세요.
+
+<details>
+<summary><b>Coolify로 배포</b> — 도메인 <code>*.apps.bokdev.in</code> · 클릭해서 펼치기</summary>
+
+Coolify는 "**push → Dockerfile로 자동 빌드·배포**" 방식입니다. 사용자는 `aidev` 프로젝트에 본인 앱만 추가합니다.

 1. https://coolify.bokdev.in 접속 → 우측 상단에서 **`aidev`** 팀 선택
 2. 좌측 **`Projects` → `aidev`** (서버·DB가 연결된 프로젝트) → **`+ Add Resource`**  
@@ -276,13 +291,13 @@ Coolify는 "**push → Dockerfile로 자동 빌드·배포**" 방식입니다.
 4. **Repository URL**에 **전체 주소**를 입력 후 **`Check Repository`**:
   `https://gitea.bokdev.in/playground/myapp.git`
   (`playground/myapp` 처럼 줄여 쓰면 실패합니다.)
-   > **비공개(private) 레포일 때** — `Public Repository` 로도 받을 수 있습니다. URL에 Gitea 토큰을 끼워 넣습니다:
+   > **비공개(private) 레포지토리일 때** — `Public Repository` 로도 받을 수 있습니다. URL에 Gitea 토큰을 끼워 넣습니다:
   > `https://<토큰>@gitea.bokdev.in/playground/myapp.git`
   > - 토큰 발급: Gitea → 우측 상단 프로필 → **Settings → Applications → Generate New Token**. 이름 지정 후 **`repository` 읽기 권한(Read)** 만 체크 → 생성. 표시되는 토큰은 **이때 한 번만** 보이므로 복사해 둡니다.
   > - 발급한 토큰을 위 URL의 `<토큰>` 자리에 넣고 **`Check Repository`**. (토큰이 URL·Coolify 설정에 저장되므로 읽기 전용 권한만 부여합니다.)
 5. **Build Pack: `Dockerfile`**, Branch `main`, Port `3000`.
   ![Coolify 저장소 연결](images/coolify-repo.png)
-6. **Configuration → Domains** 에서 **`Generate Domain`** 클릭 → `https://<레포명>.apps.bokdev.in` 형태로 지정.
+6. **Configuration → Domains** 에서 **`Generate Domain`** 클릭 → `https://<프로젝트명>.apps.bokdev.in` 형태로 지정.
 7. **Environment Variables** 에 `.project-env` 값 등록:
   - **Developer view** 에서 `.project-env` 내용을 그대로 붙여넣으면 일괄 등록됩니다. (`cat ~/projects/myapp/.project-env`)
   - `DATABASE_URL` 은 `%20`·`%3D` 인코딩까지 **그대로** 넣습니다(빼면 DB 연결이 깨집니다).
@@ -294,7 +309,7 @@ Public Repository 방식은 webhook을 걸어야 push가 자동 배포로 이어

 1. **Coolify 앱** → **Configuration → Webhooks** 탭에서, **Gitea** 항목의 **Webhook URL** 과 **Secret** 을 복사합니다. (Secret 칸이 비어 있으면 값을 입력/생성 후 저장)
   ![Coolify Webhook URL·Secret](images/coolify-webhook.png)
-2. **Gitea 레포** → `https://gitea.bokdev.in/playground/myapp` → **Settings → Webhooks → Add Webhook → Gitea** 에 등록:
+2. **Gitea 레포지토리** → `https://gitea.bokdev.in/playground/myapp` → **Settings → Webhooks → Add Webhook → Gitea** 에 등록:
   - **Target URL**: 1번의 Webhook URL
   - **Secret**: 1번의 Secret
   - **Content Type**: `application/json`
@@ -305,20 +320,37 @@ Public Repository 방식은 webhook을 걸어야 push가 자동 배포로 이어
 > push가 배포를 트리거할지는 앱 **Advanced** 탭의 **`Auto Deploy`** 옵션이 결정하며, **기본값이 켜짐**이라 따로 켤 필요는 없습니다(자동 배포를 끄고 싶을 때만 여기서 해제).
 > 설정 후에는 코드를 고쳐 **`git push` 하면 자동으로 다시 빌드·배포**됩니다(Deployments에서 새 빌드 로그 확인). webhook을 걸지 않았다면 앱 화면에서 **Deploy** 를 눌러 수동 배포합니다.

+</details>
+
 ### 9-4. 확인

 배포·재시작 직후 약 1~2분은 초기화(코드 다운로드·설치) 시간입니다. 일시적으로 404가 나오는 경우, 잠시 기다린 후 Ctrl + Shift + R로 강력 새로고침 후 확인해주세요.

 ```bash
-curl https://<레포명>.playground.bokdev.in/healthz   # {"ok":true}
-curl https://<레포명>.playground.bokdev.in/db
-curl https://<레포명>.playground.bokdev.in/s3
+# Kubero로 배포한 경우 (도메인 .playground.bokdev.in)
+curl https://<프로젝트명>.playground.bokdev.in/healthz   # {"ok":true}
+curl https://<프로젝트명>.playground.bokdev.in/db
+curl https://<프로젝트명>.playground.bokdev.in/s3
+
+# Coolify로 배포한 경우 (도메인 .apps.bokdev.in)
+curl https://<프로젝트명>.apps.bokdev.in/healthz
+curl https://<프로젝트명>.apps.bokdev.in/db
+curl https://<프로젝트명>.apps.bokdev.in/s3
 ```

 ![배포된 앱](images/08-deployed-app.png)

 문제가 있으면 Kubero에서 해당 앱의 빌드/배포 로그를 확인합니다. 로그에 `listening on :3000` 이 보이면 기동 성공입니다.

+### 9-5. 포털에 공유
+
+1. [AI DEV Portal](https://portal.bokdev.in)에 접속합니다.
+2. `새 프로젝트` 버튼을 눌러 내용을 작성합니다.  
+   ![새 프로젝트 버튼](images/portal-add-new-project.png)
+3. 프로젝트 제목, Git 저장소 URL(Gitea URL), 간단한 설명, 배포 URL(실제로 서비스에 접속 가능한 URL) 등을 입력합니다.  
+   ![새 프로젝트 등록 디테일](images/portal-add-new-project-details.png)
+4. 공개 범위를 `공개`로 하는 경우 모두에게 프로젝트가 공유되며, `비공개`로 설정하는 경우 나만 볼 수 있습니다.  
+   - 등록 이후에도 공개 범위를 포함하여 프로젝트 내용은 얼마든지 수정 가능하니 편하게 설정해주세요.

 ## FAQ

@@ -342,6 +374,19 @@ curl https://<레포명>.playground.bokdev.in/s3
 - **DB가 비어 있음** → 정상입니다. 빈 전용 스키마가 제공되며 테이블은 직접 생성합니다.
 - **K8s에 직접 접근하고 싶어요** → 직원은 K8s에 직접 접근하지 않습니다. Coder·Gitea·Kubero로 개발·배포가 완결됩니다.

+- git 레포지토리 URL vs 배포 URL
+
+   배포 과정에서 나오는 두 주소는 이름이 비슷해 헷갈리기 쉽지만, **서로 완전히 다른 것**입니다.
+
+   | 종류 | 형태 (예시) | 무엇인가 · 브라우저로 열면 | 매뉴얼에서 쓰는 곳 |
+   |---|---|---|---|
+   | **git 레포지토리 URL** | `https://gitea.bokdev.in/playground/<프로젝트명>.git` | **내 소스코드가 저장되는 위치**. `git push` 로 코드를 이 주소에 올립니다. (`.git` 을 뗀 주소를 브라우저로 열면 **코드 파일 목록**이 보이며, 실행 중인 앱이 아닙니다.) | [9-2 push](#9-2-push), Coolify의 *Repository URL* 입력([9-3B](#9-3b-coolify에-앱-추가-앱당-1회)) |
+   | **배포 URL** | Kubero `https://<프로젝트명>.playground.bokdev.in`<br>Coolify `https://<프로젝트명>.apps.bokdev.in` | **정식 배포되어 항상 켜져 있는 앱 주소**. 브라우저로 열면 **실제로 실행 중인 앱**이 응답합니다. | [9-4 확인](#9-4-확인) |
+
+   > **핵심 구분** — **git 레포지토리 URL = 코드(소스)가 저장된 곳**, **배포 URL = 그 코드가 실제로 실행되어 접속 가능한 앱**.
+   > 절차는 항상 이 순서입니다: **코드를 git 레포지토리 URL로 push → 배포 도구(Kubero/Coolify)가 그 코드로 앱을 빌드 → 배포 URL에 앱이 뜸.**
+   > 즉 push 하는 주소(git 레포지토리)와 접속해서 보는 주소(배포 URL)는 다릅니다.
+

 ## 문의
 - IT 전략국 클라우드팀 김창록 팀장
--- a/images/architecture.svg
+++ b/images/architecture.svg
@@ -0,0 +1,110 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1280 720" width="1280" height="720">
+  <style>
+    text { font-family: 'Pretendard','Noto Sans KR','Noto Sans CJK KR','Malgun Gothic','Apple SD Gothic Neo',sans-serif; }
+  </style>
+  <defs>
+    <marker id="arrow" viewBox="0 0 10 10" refX="9" refY="5" markerWidth="8" markerHeight="8" orient="auto-start-reverse">
+      <path d="M0,0 L10,5 L0,10 z" fill="#475569"/>
+    </marker>
+    <marker id="arrowAccent" viewBox="0 0 10 10" refX="9" refY="5" markerWidth="7" markerHeight="7" orient="auto-start-reverse">
+      <path d="M0,0 L10,5 L0,10 z" fill="#334155"/>
+    </marker>
+    <marker id="arrowDash" viewBox="0 0 10 10" refX="9" refY="5" markerWidth="8" markerHeight="8" orient="auto-start-reverse">
+      <path d="M0,0 L10,5 L0,10 z" fill="#64748B"/>
+    </marker>
+  </defs>
+
+  <!-- 배경 -->
+  <rect x="0" y="0" width="1280" height="720" fill="#FFFFFF"/>
+
+  <!-- 제목 -->
+  <text x="640" y="52" text-anchor="middle" font-size="23" font-weight="700" fill="#1E293B">개발 → 배포 흐름도</text>
+
+  <!-- ===================== 강조 라벨 (박스 위) ===================== -->
+  <text x="545" y="127" text-anchor="middle" font-size="19" font-weight="800" fill="#1D4ED8">① 코드가 저장되는 곳</text>
+  <text x="1115" y="127" text-anchor="middle" font-size="19" font-weight="800" fill="#C2410C">② 코드가 실제로 실행되는 앱</text>
+
+  <!-- ===================== 1. 개발자 ===================== -->
+  <circle cx="72" cy="193" r="15" fill="none" stroke="#475569" stroke-width="2.2"/>
+  <path d="M48,236 a24,20 0 0 1 48,0" fill="none" stroke="#475569" stroke-width="2.2"/>
+  <text x="72" y="260" text-anchor="middle" font-size="15" font-weight="700" fill="#1E293B">개발자</text>
+  <text x="72" y="281" text-anchor="middle" font-size="11.5" fill="#64748B">행번 계정(SSO) 로그인</text>
+
+  <!-- 화살표 1: 개발·커밋 -->
+  <line x1="102" y1="227" x2="172" y2="227" stroke="#475569" stroke-width="2.2" marker-end="url(#arrow)"/>
+  <text x="137" y="211" text-anchor="middle" font-size="13" fill="#334155">개발·커밋</text>
+
+  <!-- ===================== 2. Coder 워크스페이스 ===================== -->
+  <rect x="180" y="168" width="165" height="118" rx="10" fill="#F1F5F9" stroke="#94A3B8" stroke-width="1.8"/>
+  <svg x="250" y="178" width="24" height="24" viewBox="0 0 24 24"><path fill="#1E293B" d="M14.862 6.67H24v10.663h-9.138zM6.945 15.304c-1.934 0-3.366-1.264-3.366-3.305s1.432-3.323 3.366-3.365c1.411-.03 2.787.99 2.878 2.543l3.472-.106c-.076-2.802-2.33-4.706-6.35-4.706S0 8.558 0 12c0 3.426 3.046 5.635 6.945 5.635 3.898 0 6.29-1.935 6.38-4.782l-3.472-.077c-.152 1.553-1.497 2.528-2.908 2.528Z"/></svg>
+  <text x="262" y="224" text-anchor="middle" font-size="15" font-weight="700" fill="#1E293B">Coder 워크스페이스</text>
+  <text x="262" y="248" text-anchor="middle" font-size="12" fill="#475569">VS Code로 개발하는</text>
+  <text x="262" y="266" text-anchor="middle" font-size="12" fill="#475569">내 전용 공간</text>
+
+  <!-- 화살표 2: git push -->
+  <line x1="345" y1="227" x2="427" y2="227" stroke="#475569" stroke-width="2.2" marker-end="url(#arrow)"/>
+  <text x="386" y="199" text-anchor="middle" font-size="13" font-weight="700" fill="#334155">git push</text>
+  <text x="386" y="215" text-anchor="middle" font-size="11.5" fill="#334155">(코드 업로드)</text>
+
+  <!-- ===================== 3. Gitea = git 레포 URL (①) ===================== -->
+  <rect x="435" y="142" width="220" height="170" rx="12" fill="#DBEAFE" stroke="#2563EB" stroke-width="2.5"/>
+  <svg x="499" y="165" width="26" height="26" viewBox="0 0 24 24"><path fill="#609926" d="M4.209 4.603c-.247 0-.525.02-.84.088-.333.07-1.28.283-2.054 1.027C-.403 7.25.035 9.685.089 10.052c.065.446.263 1.687 1.21 2.768 1.749 2.141 5.513 2.092 5.513 2.092s.462 1.103 1.168 2.119c.955 1.263 1.936 2.248 2.89 2.367 2.406 0 7.212-.004 7.212-.004s.458.004 1.08-.394c.535-.324 1.013-.893 1.013-.893s.492-.527 1.18-1.73c.21-.37.385-.729.538-1.068 0 0 2.107-4.471 2.107-8.823-.042-1.318-.367-1.55-.443-1.627-.156-.156-.366-.153-.366-.153s-4.475.252-6.792.306c-.508.011-1.012.023-1.512.027v4.474l-.634-.301c0-1.39-.004-4.17-.004-4.17-1.107.016-3.405-.084-3.405-.084s-5.399-.27-5.987-.324c-.187-.011-.401-.032-.648-.032zm.354 1.832h.111s.271 2.269.6 3.597C5.549 11.147 6.22 13 6.22 13s-.996-.119-1.641-.348c-.99-.324-1.409-.714-1.409-.714s-.73-.511-1.096-1.52C1.444 8.73 2.021 7.7 2.021 7.7s.32-.859 1.47-1.145c.395-.106.863-.12 1.072-.12zm8.33 2.554c.26.003.509.127.509.127l.868.422-.529 1.075a.686.686 0 0 0-.614.359.685.685 0 0 0 .072.756l-.939 1.924a.69.69 0 0 0-.66.527.687.687 0 0 0 .347.763.686.686 0 0 0 .867-.206.688.688 0 0 0-.069-.882l.916-1.874a.667.667 0 0 0 .237-.02.657.657 0 0 0 .271-.137 8.826 8.826 0 0 1 1.016.512.761.761 0 0 1 .286.282c.073.21-.073.569-.073.569-.087.29-.702 1.55-.702 1.55a.692.692 0 0 0-.676.477.681.681 0 1 0 1.157-.252c.073-.141.141-.282.214-.431.19-.397.515-1.16.515-1.16.035-.066.218-.394.103-.814-.095-.435-.48-.638-.48-.638-.467-.301-1.116-.58-1.116-.58s0-.156-.042-.27a.688.688 0 0 0-.148-.241l.516-1.062 2.89 1.401s.48.218.583.619c.073.282-.019.534-.069.657-.24.587-2.1 4.317-2.1 4.317s-.232.554-.748.588a1.065 1.065 0 0 1-.393-.045l-.202-.08-4.31-2.1s-.417-.218-.49-.596c-.083-.31.104-.691.104-.691l2.073-4.272s.183-.37.466-.497a.855.855 0 0 1 .35-.077z"/></svg>
+  <text x="562" y="186" text-anchor="middle" font-size="21" font-weight="800" fill="#1D4ED8">Gitea</text>
+  <text x="545" y="211" text-anchor="middle" font-size="14.5" font-weight="700" fill="#1E3A8A">git 레포 URL</text>
+  <text x="545" y="234" text-anchor="middle" font-size="12" fill="#1E40AF">git push 로 코드가 올라오는 곳</text>
+  <rect x="452" y="248" width="186" height="50" rx="6" fill="#FFFFFF" stroke="#93C5FD" stroke-width="1.2"/>
+  <text x="545" y="268" text-anchor="middle" font-size="11.5" fill="#1E40AF">https://gitea.bokdev.in/</text>
+  <text x="545" y="286" text-anchor="middle" font-size="11.5" fill="#1E40AF">playground/&lt;레포명&gt;.git</text>
+
+  <!-- 화살표 3: 빌드 -->
+  <line x1="655" y1="227" x2="733" y2="227" stroke="#475569" stroke-width="2.2" marker-end="url(#arrow)"/>
+  <text x="694" y="199" text-anchor="middle" font-size="12.5" fill="#334155">코드를 가져와</text>
+  <text x="694" y="215" text-anchor="middle" font-size="12.5" fill="#334155">빌드</text>
+
+  <!-- ===================== 4. 배포 도구 ===================== -->
+  <rect x="740" y="168" width="190" height="118" rx="10" fill="#F1F5F9" stroke="#94A3B8" stroke-width="1.8"/>
+  <text x="835" y="196" text-anchor="middle" font-size="15" font-weight="700" fill="#1E293B">배포 도구</text>
+  <svg x="794" y="211" width="28" height="14.1" viewBox="14 37 111 56"><path fill="#7473bf" d="m 96.157565,88.887539 c -2.078917,0.570944 -6.52565,1.148532 -9.98367,1.296794 -7.398975,0.317216 -12.843214,-0.498395 -27.139975,-4.065957 -12.964018,-3.235009 -19.146755,-4.31556 -23.5006,-4.107242 -5.790951,0.277113 -6.162961,2.81403 -0.645157,4.399742 1.094027,0.3144 5.522989,0.741875 9.84213,0.949895 l 7.85297,0.378259 -3.646029,0.727159 c -4.380958,0.873739 -12.937882,1.179523 -15.829665,0.56566 -3.17812,-0.674634 -5.485542,-2.884259 -5.485542,-5.253011 0,-2.53099 0.77414,-3.91157 2.772944,-4.945203 4.334681,-2.241554 12.715059,-1.430264 31.298819,3.029978 15.965836,3.831932 18.207784,4.155817 26.448323,3.820969 5.949203,-0.241752 7.911072,-0.567291 12.360577,-2.051066 6.33899,-2.113888 10.37097,-4.334353 13.64065,-7.512123 2.30653,-2.241701 4.60932,-6.026247 5.96696,-9.268294 0.1294,-0.308969 0.9184,-0.851319 -3.35369,1.007555 -5.66298,2.464045 -12.56255,3.604553 -23.164083,3.200168 C 83.760646,70.685821 78.837396,69.856085 65.17494,66.271659 37.411783,58.987806 24.892815,58.888266 18.734317,65.902413 c -2.261116,2.575265 -2.293341,1.787682 -0.05156,-1.260643 1.153699,-1.568796 2.858622,-2.891667 5.188566,-4.025877 8.584916,-4.179128 21.39977,-3.623246 44.978819,1.951105 7.124108,1.684215 18.282021,3.743701 18.607264,3.434486 0.09161,-0.08717 -4.245801,-7.795904 -9.753158,-17.334052 -2.415843,-4.183967 -2.587045,-4.346452 -4.560251,-4.327611 -1.127593,0.0099 -3.943302,0.359986 -6.257111,0.776027 -9.480928,1.704785 -11.208062,2.720639 -12.962844,7.62443 l -1.101781,3.078969 0.187154,-3.780199 c 0.23753,-4.797658 1.290789,-6.31114 6.046941,-8.689102 6.9964,-3.498047 16.694045,-4.75027 18.99195,-2.452365 2.657818,2.657842 6.606502,11.648085 9.048373,20.601188 l 1.24306,4.557658 2.876061,0.345565 c 9.959891,1.196736 23.269681,-0.678412 26.598541,-3.747356 4.22906,-3.898853 -2.54004,-6.4817 -20.65262,-7.880281 l -9.240072,-0.713454 6.101365,-0.454785 c 7.143167,-0.532447 19.383467,-0.109887 22.291407,0.769729 5.10514,1.544054 7.52353,4.703723 6.16485,8.054448 -0.40206,0.991579 -1.29758,3.792496 -2.26015,6.120676 -2.54659,6.159471 -4.58475,9.898654 -7.89934,13.384651 -0.79606,0.837218 -1.97437,2.122875 -4.89369,3.565239 -6.6171,2.742171 -8.437796,2.796942 -11.268525,3.38668 z M 16.403488,68.720566 c 0,-0.154336 0.12621,-0.280447 0.280462,-0.280447 0.154262,0 0.280465,0.126185 0.280465,0.280447 0,0.154337 -0.12621,0.280472 -0.280465,0.280472 -0.154262,0 -0.280462,-0.126185 -0.280462,-0.280472 z"/></svg>
+  <text x="828" y="223" font-size="13.5" fill="#334155">Kubero</text>
+  <text x="835" y="245" text-anchor="middle" font-size="11.5" fill="#94A3B8">또는</text>
+  <svg x="800" y="256" width="20" height="20" viewBox="0 0 24 24"><path fill="#7C3AED" d="M4.364 4.364V0h17.454v4.364zm0 13.09H0V4.365h4.364zm0 0h17.454v4.364H4.364ZM6.545 6.546v-1.7H22.3V2.182H24v4.363zm0 0v10.4h-1.7v-10.4ZM3.882 17.936v1.7h-1.7v-1.7ZM24 24H6.545v-1.7H22.3v-2.664H24Z"/></svg>
+  <text x="826" y="271" font-size="13.5" fill="#334155">Coolify</text>
+
+  <!-- 화살표 4: 앱 실행 -->
+  <line x1="930" y1="227" x2="992" y2="227" stroke="#475569" stroke-width="2.2" marker-end="url(#arrow)"/>
+  <text x="961" y="211" text-anchor="middle" font-size="13" fill="#334155">앱 실행</text>
+
+  <!-- ===================== 5. 배포된 앱 = 배포 URL (②) ===================== -->
+  <rect x="1000" y="142" width="230" height="170" rx="12" fill="#FFEDD5" stroke="#EA580C" stroke-width="2.5"/>
+  <text x="1115" y="186" text-anchor="middle" font-size="21" font-weight="800" fill="#C2410C">배포된 앱</text>
+  <text x="1115" y="211" text-anchor="middle" font-size="14.5" font-weight="700" fill="#9A3412">배포 URL</text>
+  <text x="1115" y="234" text-anchor="middle" font-size="12" fill="#9A3412">항상 켜져 있는, 실행 중인 실제 앱</text>
+  <rect x="1010" y="248" width="210" height="50" rx="6" fill="#FFFFFF" stroke="#FDBA74" stroke-width="1.2"/>
+  <text x="1115" y="268" text-anchor="middle" font-size="10.5" fill="#9A3412">Kubero: &lt;레포명&gt;.playground.bokdev.in</text>
+  <text x="1115" y="286" text-anchor="middle" font-size="10.5" fill="#9A3412">Coolify: &lt;레포명&gt;.apps.bokdev.in</text>
+
+  <!-- ===================== ① → ② 강조 브래킷 ===================== -->
+  <path d="M545,312 L545,362 L972,362 L972,297 L992,297" fill="none" stroke="#334155" stroke-width="3" marker-end="url(#arrowAccent)"/>
+  <text x="758" y="387" text-anchor="middle" font-size="14.5" font-weight="700" fill="#334155">push한 코드 → 이 앱으로 실행됨</text>
+
+  <!-- ===================== 공용 리소스 ===================== -->
+  <rect x="430" y="540" width="420" height="90" rx="10" fill="#F8FAFC" stroke="#94A3B8" stroke-width="1.8"/>
+  <text x="640" y="573" text-anchor="middle" font-size="15" font-weight="700" fill="#1E293B">공용 리소스</text>
+  <text x="640" y="602" text-anchor="middle" font-size="13" fill="#475569">PostgreSQL(DB) · MinIO(S3 파일저장소) · LiteLLM(AI)</text>
+
+  <!-- 공용 리소스 → Coder 워크스페이스 (점선) -->
+  <path d="M470,540 L470,410 L262,410 L262,294" fill="none" stroke="#64748B" stroke-width="1.8" stroke-dasharray="6 5" marker-end="url(#arrowDash)"/>
+  <text x="366" y="401" text-anchor="middle" font-size="11.5" fill="#64748B">.project-env 로 자동 연결</text>
+
+  <!-- 공용 리소스 → 배포된 앱 (점선) -->
+  <path d="M810,540 L810,425 L1060,425 L1060,320" fill="none" stroke="#64748B" stroke-width="1.8" stroke-dasharray="6 5" marker-end="url(#arrowDash)"/>
+  <text x="935" y="416" text-anchor="middle" font-size="11.5" fill="#64748B">.project-env 로 자동 연결</text>
+
+  <!-- ===================== 사용자 → 배포된 앱 ===================== -->
+  <line x1="1190" y1="482" x2="1190" y2="320" stroke="#475569" stroke-width="2.2" marker-end="url(#arrow)"/>
+  <rect x="1136" y="372" width="108" height="21" fill="#FFFFFF"/>
+  <text x="1190" y="387" text-anchor="middle" font-size="13" fill="#334155">브라우저로 접속</text>
+  <circle cx="1190" cy="505" r="13" fill="none" stroke="#475569" stroke-width="2.2"/>
+  <path d="M1169,543 a21,17 0 0 1 42,0" fill="none" stroke="#475569" stroke-width="2.2"/>
+  <text x="1190" y="567" text-anchor="middle" font-size="14" font-weight="700" fill="#1E293B">사용자</text>
+</svg>
--- a/images/portal-add-new-project-details.png
+++ b/images/portal-add-new-project-details.png
--- a/images/portal-add-new-project.png
+++ b/images/portal-add-new-project.png