- 멀티클라우드 개방형 인터페이스 - 멀티클라우드 웹 도구 . 웹 도구 컨셉 (디자인 및 UI/UX) . 웹 도구 이용 방식 . 웹 도구 활용하기 - 웹도구 현황 및 향후 추진 계획 # 발표영상(YouTube) : https://youtu.be/mWl9JTvsZe0 ---------------------------------------------------------------------------------------------------------- # Cloud-Barista Community Homepage : https://cloud-barista.github.io # Cloud-Barista Community GitHub : https://github.com/cloud-barista # Cloud-Barista YouTube channel : https://cloud-barista.github.io/youtube # Cloud-Barista SlideShare : https://cloud-barista.github.io/slideshare

1. [세션7] CB-Waterstrider :
카페모카(Café Mocha) 한잔 어떠세요 ?
멀티클라우드, 글로벌 스케일로 시작하다
CLOUD
BARISTA 클라우드바리스타 커뮤니티 제4차 컨퍼런스
정 영 태
CB-Waterstrider 프레임워크 리더
멀티클라우드 개방형 인터페이스

2. 멀티클라우드 서비스 개방형 인터페이스
멀티클라우드 인프라 연동
프레임워크
멀티클라우드 애플리케이션
통합관리 프레임워크
멀티클라우드 인프라 서비스
통합 관리 프레임워크
멀티클라우드
통합
모니터링
프레임워크
멀티클라우드 서비스 공통 플랫폼
이번 세션은…
응용/도메인/기관 특화 SW
CLOUD
BARISTA
CB-Waterstrider
1

3. 목 차
멀티클라우드 개방형 인터페이스
I
멀티클라우드 웹 도구
II
웹도구 현황 및 향후 추진 계획
III
웹 도구 컨셉 (디자인 및 UI/UX)
i
웹 도구 이용 방식
ii
웹 도구 활용하기
iii
2

4. • 멀티클라우드 서비스 공통 플랫폼이 제공하는 공통 플랫폼 인터페이스
• 멀티클라우드 환경의 서비스 및 시스템을 운영, 개발 또는 이용하는 사용자 대상
• 공통 플랫폼 개방형 API (REST, Go API)와 웹/CLI 인터페이스를 제공
‘멀티클라우드 개방형 인터페이스’ 란?
개방형 인터페이스는 다양한 사용자 인터페이스를 제공합니다.
개방형 인터페이스 (1) 공통 플랫폼 개방형 API
• 웹/앱 개발자를 위한 외부 연동 인터페이스
• 일반적인 웹 서비스를 통한 외부 연동을 위한 REST API
• 실시간 및 프로세스간 통신을 위한 gRPC 기반 Go API
(2) 웹 인터페이스
• 편리한 관리 및 운영을 위한 사용자 GUI 인터페이스
• 다양한 브라우저 지원 및 하이브리드 웹앱 지원
• REST API 연동
(3) CLI 인터페이스
• 시스템 관리자를 위한 운용 및 관리 인터페이스
• Go API 연동
공통 플랫폼 인터페이스
(2) 웹 인터페이스 (3) CLI 인터페이스
<사용자>
(1) 공통 플랫폼 개방형 API
REST API Go API
<운영/관리자>
<개발자>
멀티클라우드 서비스 공통 플랫폼 서버
3

5. • 멀티클라우드 서비스 이용을 위한 편리한 관리 및 운용 도구
• 웹 인터페이스, 웹 도구(Webtool)
• 웹 기반의 GUI 인터페이스 제공
• 효율적인 사용자 운용을 지원
• 개방형 API 복합 기능 적용
• 공통 플랫폼 개방형 API 연동 사례 구축
• 멀티클라우드 환경의 사용/운용 편의성 강화
• 관계의 단순화  프레임워크와 사용자 격리
• 멀티클라우드 활용성
• 직관성 (단순성, 가독성)
• 사용 편의성 극대화  사용자 친화적 UI
‘멀티클라우드 웹 도구(Webtool)’ 는?
편리한 Cloud-Barista 시스템 활용을 위한 웹 인터페이스
웹 인터페이스
CB-Waterstrider / Webtool
4

6. • 디자인 / UI/UX 컨셉 및 특징
• 차분하고 안정감을 부여하는 컬러 색상을 위주
• 강조 및 집중을 위해 부분적 컬러 톤을 배치
• 간결한 동선을 위한 배치와 반복 작업의 최소화를 통해 편의성을 강화
멀티클라우드 웹 도구 컨셉 (디자인 및 UI/UX) - 1/2
웹 인터페이스는 간단하고 직관적인 UI/UX를 추구합니다.
디자인
디자인 UI/UX
UI/UX
웹 인터페이스
복잡/반복성을
편리하게 제공
간결한 동선 추구
차분하고 산뜻한 로그인 화면
(딥블루 컬러)
화려하지 않고 안정감을 주는
화면 (그레이 컬러)
강조 및 집중을 위한 포인트
컬러 활용
단순성 및 가독성을 고려한
항목의 배치
5

7. • UI/UX 레이아웃
• 일반적인 메뉴 배치 - 메인 메뉴 및 빠른 메뉴(숏컷 링크)
• 콘텐츠의 표현 - 하향식 계층구조를 갖는 콘텐츠(메인, 서브) 영역과 부가 정보
멀티클라우드 웹 도구 컨셉 (디자인 및 UI/UX) - 2/2
웹 인터페이스는 간단하고 직관적인 UI/UX를 추구합니다.
UI/UX 레이아웃
상단 헤더
콘텐츠 영역
하단 테일
NS영역 프로필 연결 설정
기능맵
상세 도움말
타이틀 네비
알림 메시지
인프라 / 서비스 상태 요약
화면 콘텐츠
카드형 / 목록 정보
요약 정보
선택 세부 정보
이미지 맵 정보
요약 정보
좌측
사이드
CB-WebTool
로고
운영 관리 설정
웹 도구 메뉴
사용자 프로필
NS 정보
선택 세부 정보
(선택, 클릭 - 부가 정보)
(선택,클릭 - 세부 정보)
(클릭 – 객체 생성)
메인 콘텐츠
✓ 요약 영역 > 목록 영역 > 세부
정보 영역 순으로 배치
✓ 필요에 따라 하위로
Deepdive 하게 내려감
빠른 메뉴 & 숏컷
✓ 운영 및 설정 기능 중 필수적인
기능을 배치
✓ 사용자 프로필, 로그인/아웃
부가 콘텐츠
✓ 메인 콘텐츠의 내용 또는
정보를 보완하거나 별도의
정보를 추가적으로 표시하기
위한 숨겨진 영역
메인 메뉴
✓ 운영 / 구성 및 설정의 작업
유형에 따른 탭 분리
✓ 유형별 세부적인 기능
메뉴를 나열
부가 정보
✓ 현재 작업공간 정보를 표기
위에서 아래로, 화면 전환을 최소화
6

8. • 웹 도구를 이용한 멀티클라우드 서비스 운영
• (a) 설치 : 웹 도구 다운로드 → 설치/환경설정
• (b) 준비 : 클라우드 연결 및 작업공간 정의 → 자원 등록/동기화
• (c) 이용 : 서비스 생성/관리 → 모니터링 및 운영 대시보드
웹 도구 이용 순서
클라우드 연결 및 네임스페이스 정의 → 자원 등록 → 서비스 등록/배포 → 서비스 운영
클라우드
연결정의
자원등록및
동기화
서비스
등록/배포
서비스
운영/관리
STEP1
클라우드 연결을 정의하고
작업 공간을 정의 합니다.
STEP2
연결된 클라우드 자원을
동기화 또는 등록 합니다.
STEP3
서비스를 정의하고
클라우드로 배포합니다.
STEP4
배포된 서비스를 운영
(Life Cycle)/관리 합니다.
STEP5
모니터링을 설정하고 운영
상황을 모니터링합니다.
모니터링및
대시보드
다운로드/설치
및환경구성
(https://github.com/cloud-barista/cb-webtool.git)
7

9. 웹 도구(cb-webtool) 시연
카페모카(Café Mocha) 한잔 어떠세요 ?
CLOUD
BARISTA
멀티클라우드 서비스 공통 플랫폼

10. • 화면 내 정보의 조회
• 조건을 통한 목록 필터링, 지정 항목을 기준한 정렬
• 목록 → 상세정보 → 부가정보 출력, 하향식 계층 구조 또는 팝업 레이어를 통한 출력
[참고] 웹 도구 이용 방식 (화면 입출력 패턴) - 1/4
정보 조회를 위해 목록의 필터와 정렬을 제공합니다.
<상세 정보> - MCIS 상세
(서버 아이콘 클릭 - 기본 정보)
(탭 클릭 - 세부 정보)
02 목록
목록 정보가 출력됩니다.
01 조건
조회 조건을 지정합니다. 03
상세 정보
세부 정보가 출력됩니다.
04
부가 정보
부가정보가 출력됩니다.
(서비스 목록 클릭 - 상세 정보)
9

11. • 제어 Action의 실행 (운영/Life Cycle, 삭제/제거)
• 목록, 아이콘 리스트 선택/체크를 통한 제어 대상의 지정 (MCIS, MCKS, Server, Node, …)
• 제어 Action 드롭다운 메뉴의 선택을 통한 실행
[참고] 웹 도구 이용 방식 (화면 입출력 패턴) - 2/4
Action 기능 메뉴는 영역의 우측 상단에 있습니다.
01 호출
제어화면을 호출합니다. 03
리스트
리스트 목록을 선택합니다.
04
Action
제어 Action을 실행합니다.
02 아이콘
아이콘 목록을 선택합니다.
10

12. • 서비스, 서버, 자원 생성/변경 (MCIS, MCKS, Server, Node, MCIR, …)
• 필수 정보 및 부가 정보의 입력/선택
• ‘*’ 표시된 필수 입력 정보, Text 입력 또는 목록에서 선택(선택 또는 체크)
• 하향식 또는 팝업 레이어를 통한 선택할 부가 정보에 대한 조회(참조 및 추가)
[참고] 웹 도구 이용 방식 (화면 입출력 패턴) - 3/4
정보 입력을 위한 필수 정보 및 부가 정보의 입력 방법을 제시합니다.
02 필수 정보
필수 항목을 입력합니다.
01 호출
생성/변경화면을 호출합니다.
<세부 정의에 의한 생성>
<네트워크 상세 설정>
03
부가 정보
부가 항목을 입력합니다.
04
기타
기타 항목을 입력합니다.
<서브넷 설정>
11

13. • 화면/항목 도움말 및 화면 가이드 제공
• 화면(우측상단 “?” 아이콘) /항목(항목 우측 “?” 표기) 도움말
• 화면 가이드 (로그인 시)
• 화면 이용 방법 및 서비스 생성 가이드에 대해 안내
[참고] 웹 도구 이용 방식 (화면 입출력 패턴) - 4/4
웹 도구 이용을 위한 도움말 및 가이드를 제공합니다.
화면 가이드
서비스 생성 / 운영하기
현재 작업 영역 (Name Space) 변경하기
서비스 및 자원 운용(생성, 관리) 메뉴 호출
자원 관리(등록, 설정) 메뉴 호출
프로필 변경
공지/알람 메세지 확인
새로운 클라우드 연결
서비스 관리하기 (이동하기)
1. 작업공간 할당하기 (이동하기)
처음 MCIS 서비스 생성하는 방법
2. 연결 만들기 (이동하기)
3. 자원 등록하기 (이동하기)
4. 서비스 생성하기 (이동하기)
5. 서비스 관리하기 (이동하기)
서비스 운영하기 (이동하기)
11
화면 가이드
안내 정보가 표시 됩니다.
01 화면 도움말
화면 설명을 제공합니다.
12

14. • 웹 도구 현황(카페모카 버전) 및 향후 로드맵
[참고] 웹도구의 개발 현황 및 향후 추진 계획 (로드맵)
MCIS서비스고도화
☜관리도구고도화개발
☜관리도구확장개발
자원관리고도화
MCKS기능확장
모니터링고도화개선
어플리케이션서비스
장애/알람분석
☜관리도구구조개선
웹프레임워크개선
대상클라우드확대
전체 관리자
대시보드
사용자 대시보드 for MCIS
Application
네임스페이스
(NS)
사용자 대시보드 for MCKS 사용자 대시보드 for MCAS
K-클러스터 K-노드
인프라서비스 서버 / VM
MCIR관리
서버 Spec
이미지
Access Key 네트워크
보안/방화벽
노드 Spec
클러스터설정 MCAR관리
Pod 설정
App 이미지
Pod
클라우드 연결 Credential
Zone
클라우드 제공자 드라이버 리전
Public Private
AWS
Azure
GCP
Alibaba Tencent
Softlayer CloudIt 국내
클라우드
…
Open Stack
Cloud-twin
…
…
MCIS운영
템플릿
생성/확장
현황/조회 Life Cycle
모니터링
MCKS운영
템플릿
생성/확장
현황/조회 Life Cycle
모니터링
MCAS운영
카탈로그
생성/확장
현황/조회 Life Cycle
모니터링
특화서비스
21yr 개선
21yr 신규
21yr 계획
22yr 계획
모니터링정책
임계치설정
모니터링설정
이벤트/알람
이벤트핸들러
이벤트태스크
이벤트내역
모니터링 분석
가동율분석
장애/알람분석
13

15. 감사합니다.
https://github.com/cloud-barista
https://cloud-barista.github.io
(정 영 태 / contact-to-cloud-barista@googlegroups.com)
“멀티클라우드, 글로벌 스케일로 시작하다”
Cloud-Barista Community the 4th Conference
클라우드바리스타들의 네번째 이야기
본 발표자료에는 네이버에서 제공한 나눔글꼴이 적용되어 있습니다.