README 최종 완성

README.md

@@ -1,9 +1,9 @@
 <p align="middle" >
-<img width="" alt="cicd" src="https://github.com/user-attachments/assets/a01828bf-7603-4262-9761-6a44b361c2bd">
+<img src="https://github.com/user-attachments/assets/907f345d-33f3-4c33-937d-f112f057a91b">
 </p>
 
 <h2 align="center">🎨 Cloud Canvas 🎨</h2>
-<p align="middle">쉽고 빠르게, 누구나 클라우드를 설계하는 즐거운 경험을!(배너로 대체 예정)</p>
+<h3 align="middle">쉽고 빠르게, 누구나 클라우드를 설계하는 즐거운 경험을!</h3>
 
 <div align=center>
   <a href="https://hits.seeyoufarm.com">
@@ -26,51 +26,37 @@ Cloud Canvas는 클라우드 인프라를 **그래픽 인터페이스**로 손
 -   **🤝 협업 및 재활용**  
     **인프라 허브**를 통해 다른 사용자들과 설계도를 공유하고 수정하며 효율적으로 협업!
 
-## 기능 시연
+## GUI를 통한 인프라 배치
 
-### GUI를 통한 인프라 설계
+### 리소스 배치
 
-시나리오
+https://github.com/user-attachments/assets/e901a5de-1d5f-4388-bd65-3ef989e2a857
 
-1. 허브 페이지에서 헤더에 있는 새 캔버스 버튼을 눌러 캔버스 페이지로 이동한다.
-2. 간단한 인프라를 설계한다.
+### 리소스 속성 설정
 
-### 테라폼 코드 변환
+https://github.com/user-attachments/assets/c4b8ec74-5e9f-489a-923b-d6dc952d4633
 
-시나리오
+### 노드 삭제 및 엣지 연결
 
-1. 캔버스 페이지에 완성된 인프라 아키텍처가 존재한다.
-2. 캔버스 페이지 우상단에 있는 convertor 버튼을 누르면 현재 설계된 인프라를 바탕으로 변환된 테라폼 코드가 나온다.
-3. 테라폼 코드를 통해 배포된 인프라를 확인한다.
+https://github.com/user-attachments/assets/382d3865-0152-4eb8-b66f-af08742b8164
 
-### 인프라 아키텍처 허브 업로드(프라이빗)
+### 2D / 3D, 라이트 / 다크모드 지원
 
-시나리오
+https://github.com/user-attachments/assets/b0e81cfd-f1d8-4a9d-be33-3ebf2b6643a7
 
-1. 인프라 아키텍처를 완성했다고 가정하고 캔버스 페이지에서 저장 버튼을 누른다.(/canvas)
-2. 저장이 완료되면, 새로고침 되며 발급받은 프라이빗 아키텍처를 parameter 붙여 private architecture 캔버스 페이지로 이동한다.(/canvas/private-architecutes/{id})
-3. 해당 아키텍처가 캔버스에 다시 불러와진 것을 확인하면 허브 페이지로 이동한다.(/로 이동)
-4. 허브 페이지에서 마이페이지로 이동하고 프라이빗 아키텍처 목록에서 새로운 목록이 추가된 것을 확인하고 클릭한다.
-5. 새로 추가된 프라이빗 아키텍처 목록을 클릭하면 다시 캔버스 페이지로 이동한다.
+## 허브
 
-### 인프라 아키텍처 허브 업로드(퍼블릭)
+### 공유하기
 
-시나리오
+https://github.com/user-attachments/assets/d039e4a8-9a19-453e-acee-969221ce8834
 
-1. 인프라 아키텍처를 완성했다고 가정하고 캔버스 페이지에서 저장 버튼을 누른다.(/canvas)
-2. 저장이 완료되면, 새로고침 되며 발급받은 프라이빗 아키텍처를 parameter 붙여 private architecture 캔버스 페이지로 이동한다.(/canvas/private-architecutes/{id})
-3. 해당 아키텍처가 캔버스에 다시 불러와진 것을 확인하면 허브 페이지로 이동한다.(/로 이동)
-4. 허브 페이지에서 마이페이지로 이동하고 프라이빗 아키텍처 목록에서 새로운 목록이 추가된 것을 확인하고 클릭한다.
-5. 새로 추가된 프라이빗 아키텍처 목록을 클릭하면 다시 캔버스 페이지로 이동한다.
+### 불러오기
 
-### 인프라 아키텍처 허브 임포트
+https://github.com/user-attachments/assets/ef312ff8-df45-4f4a-a5cb-0e54e41d20fc
 
-시나리오
+## 테라폼 코드 변환
 
-1. 허브 페이지에서 아무 인프라 아키텍처 목록을 클릭한다.
-2. 퍼블릭 인프라 아키텍처 상세 페이지로 이동하고 임포트 버튼을 클릭한다.
-3. 임포트가 완료되면 캔버스 페이지로 리다이렉트 하고 임포트 되어 해당 아키텍처가 캔버스로 그려진 것을 확인한다.
-4. 마이페이지로 들어가서, 임포트한 퍼블릭 인프라 아키텍처가 임포트 목록에 추가된 것을 확인한다.
+https://github.com/user-attachments/assets/a4dd50a2-f058-4055-b4c5-fac06b352b55
 
 <div align="center">
 
@@ -145,17 +131,54 @@ Cloud Canvas는 클라우드 인프라를 **그래픽 인터페이스**로 손
 
 ## **아키텍처** 🌐
 
-### **인프라 설계**
+### **테라폼 모듈을 활용한 인프라 배포**
+
+![image](https://github.com/user-attachments/assets/ee335fdb-b671-49d8-a376-bc1f98305f2a)
+
+### **테라폼 워크플로우 중앙화**
 
 ![image](https://github.com/user-attachments/assets/e8bd555e-ae84-4989-a520-800a61b3da54)
 
+### **인프라 설계**
+
 ![image](https://github.com/user-attachments/assets/b18b1048-5fe8-43ee-a33f-8fbe2b38e873)
 
 ### **애플리케이션 설계**
 
 ![image](https://github.com/user-attachments/assets/04145d8b-61b0-401a-8943-7494a0f9aed5)
 
-## 우리의 Next!
+### **Cloud Canvas로 설계한 인프라**
+
+![image (2)](https://github.com/user-attachments/assets/43b5a7d6-e159-4801-a535-fbc8b9e1712c)
+
+![image (3)](https://github.com/user-attachments/assets/92246da9-6d78-4e09-b8fd-4060576dd97c)
+
+## 우리의 Next! 로드맵
+
+### 🌐 **멀티 클라우드 전략**<br>
+
+    AWS, Azure 등 다양한 클라우드 리소스 원활한 지원
+    클라우드 공급자 간 seamless 인프라 관리
+
+### 🚀 원클릭 인프라 배포<br>
+
+    테라폼 코드 자동 변환 및 즉시 서비스 배포 기능
+    인프라 프로비저닝 프로세스 획기적 간소화
+
+### 👥 협업 인프라 디자인<br>
+
+    실시간 팀 단위 인프라 공동 설계 환경
+    대시보드 기반 협업 및 버전 관리
+
+### 🩺 통합 헬스케어 모니터링<br>
+
+    클라우드 환경 실시간 상태 모니터링
+    자동 장애 감지 및 알림 시스템
+
+### 🎨 유연한 커스터마이징<br>
+
+    고도화된 인프라 캔버스 플랫폼
+    사용자 맞춤형 인프라 설계 지원
 
 ## 🌈 **함께하세요!**