> ## Documentation Index
> Fetch the complete documentation index at: https://docs.cloosphere.ai/llms.txt
> Use this file to discover all available pages before exploring further.

# 화면 구성

> Cloosphere 메인 화면의 각 구성 요소와 네비게이션 방법을 안내합니다

Cloosphere의 화면은 크게 **사이드바**, **헤더**, **채팅 영역**, **입력 영역** 네 부분으로 구성됩니다. 각 영역의 역할과 사용 방법을 알아봅니다.

***

## 전체 레이아웃

<Frame caption="전체 레이아웃">
  <img src="https://mintcdn.com/cloocus/bFrDoUp8YAXyh4I1/images/getting-started/ui-layout-clean.png?fit=max&auto=format&n=bFrDoUp8YAXyh4I1&q=85&s=b667d818856af6bc88ea125f30055aa7" alt="전체 레이아웃" width="1914" height="907" data-path="images/getting-started/ui-layout-clean.png" />
</Frame>

Cloosphere 메인 화면은 다음 4개 영역으로 구성됩니다.

| 영역        | 위치 | 역할                                      |
| --------- | -- | --------------------------------------- |
| **사이드바**  | 좌측 | 채팅 목록, 워크스페이스, 프로젝트, 채널 탐색              |
| **헤더**    | 상단 | 모델 선택, 멀티모델 추가, 채팅 메뉴(공유·개요·다운로드·복사·태그) |
| **채팅 영역** | 중앙 | AI 응답과 사용자 메시지가 표시되는 대화 영역              |
| **입력 영역** | 하단 | 메시지 입력, 파일 첨부, 확장 기능 토글                 |

***

## 권한에 따라 달라지는 메뉴

Cloosphere의 일부 메뉴와 버튼은 계정 권한에 따라 표시 여부가 달라집니다. 대표적으로 다음 세 곳입니다.

| 위치         | 관리자 · 권한 보유 사용자                                  | 일반 사용자                      |
| ---------- | ------------------------------------------------ | --------------------------- |
| **프로필 메뉴** | **Admin Panel**(관리자 패널)                          | **Contact Admin**(관리자에게 문의) |
| **사이드바**   | **Workspace** · **Schedules** 메뉴, 채널 **+** 버튼 표시 | 권한이 없으면 미표시                 |
| **헤더**     | 멀티 모델 비교 **+** 버튼 표시                             | 비교 권한이 없으면 미표시              |

***

## 사이드바

화면 왼쪽의 사이드바는 Cloosphere의 주요 네비게이션 영역입니다. 채팅 목록 관리부터 워크스페이스 진입까지 모든 탐색이 여기서 시작됩니다.

<Frame caption="사이드바 전체">
  <img src="https://mintcdn.com/cloocus/bFrDoUp8YAXyh4I1/images/getting-started/ui-sidebar-full.png?fit=max&auto=format&n=bFrDoUp8YAXyh4I1&q=85&s=1ba093969728ddd2475e491ddd00cbad" alt="사이드바 전체" width="2000" height="947" data-path="images/getting-started/ui-sidebar-full.png" />
</Frame>

### 사이드바 상단

| 요소            | 설명                                          |
| ------------- | ------------------------------------------- |
| **로고**        | 클릭하면 메인 화면(`/`)으로 이동합니다                     |
| **접기/펼치기 버튼** | 사이드바를 접거나 펼칩니다. 접힌 상태에서는 아이콘만 표시됩니다         |
| **새 채팅**      | 새 대화를 시작합니다. 기존 대화 중에도 클릭하면 빈 채팅 화면으로 이동합니다 |

<Tip>
  키보드 단축키 `Ctrl + Shift + S`로 사이드바를 빠르게 토글할 수 있습니다.
</Tip>

### 워크스페이스 링크

**워크스페이스** 버튼을 클릭하면 에이전트, 지식기반, 데이터베이스, 플로우 등 AI 구성 요소를 관리하는 워크스페이스 페이지(`/workspace`)로 이동합니다.

<Note>
  워크스페이스 링크는 접근 권한이 있는 사용자에게만 표시됩니다.
</Note>

### 예약 작업 링크

예약 작업을 관리하는 스케줄 페이지(`/schedules`)로 이동합니다. 크론(CRON) 기반 자동 실행 작업을 설정하고 관리할 수 있습니다.

<Note>
  예약 작업 링크는 관리자이거나 예약 작업 권한(`features.scheduled_tasks`)이 있는 사용자에게만 표시됩니다.
</Note>

### 검색

사이드바의 검색창에 키워드를 입력하면 채팅 제목과 내용에서 일치하는 대화를 찾아줍니다. 검색은 입력 후 1초 뒤에 자동으로 실행됩니다.

<Frame caption="검색 필터링 결과">
  <img src="https://mintcdn.com/cloocus/bFrDoUp8YAXyh4I1/images/getting-started/ui-search-filter.png?fit=max&auto=format&n=bFrDoUp8YAXyh4I1&q=85&s=4b1f81b6b9d6a6e46385ae2585c951a6" alt="검색 필터링 결과" width="1913" height="907" data-path="images/getting-started/ui-search-filter.png" />
</Frame>

### 채팅 목록

사이드바의 대부분을 차지하는 영역으로, 다음 섹션들이 순서대로 표시됩니다.

<Accordion title="채널">
  실시간 팀 메시징 공간입니다. 관리자가 채널 기능을 활성화한 경우 표시됩니다.

  * 채널을 클릭하면 해당 채널의 메시지 목록으로 이동합니다
  * 관리자는 **+** 버튼으로 새 채널을 생성할 수 있습니다
</Accordion>

<Accordion title="예약 작업">
  예약된 자동 실행 작업 목록입니다. 각 작업의 이름과 활성 여부를 확인할 수 있습니다.
</Accordion>

<Accordion title="프로젝트">
  문서와 채팅을 한 공간에서 통합 관리하는 개인 작업 공간입니다. 직접 만들었거나 공유받은 프로젝트가 여기에 표시됩니다(공유 시 독립 복사본 생성).
</Accordion>

<Accordion title="내 채팅">
  개인 대화 목록입니다. 시간순으로 정렬되며, 다음 기능을 지원합니다:

  * **고정됨**: 중요한 대화를 상단에 고정
  * **폴더**: 대화를 폴더로 분류하여 관리. **새 폴더** 버튼으로 폴더를 생성하고, 대화를 드래그 앤 드롭으로 이동
  * **시간 범위 그룹**: 오늘, 어제, 이전 7일, 이전 30일, 월별로 자동 그룹핑

  <Frame caption="My Chats 섹션">
    <img src="https://mintcdn.com/cloocus/bFrDoUp8YAXyh4I1/images/getting-started/ui-sidebar-mychats.png?fit=max&auto=format&n=bFrDoUp8YAXyh4I1&q=85&s=20641fc9a498d1a8cee203e2c2a30b9e" alt="My Chats 섹션" width="418" height="458" data-path="images/getting-started/ui-sidebar-mychats.png" />
  </Frame>

  <Tip>
    대화 항목을 우클릭하면 이름 변경, 고정, 삭제, 공유 등 컨텍스트 메뉴가 표시됩니다.
  </Tip>
</Accordion>

### 사용자 프로필

사이드바 하단에 로그인한 사용자의 **프로필 이미지**와 **이름**이 표시됩니다. 클릭하면 드롭다운 메뉴가 나타납니다.

| 메뉴 항목      | 설명                                           |
| ---------- | -------------------------------------------- |
| **설정**     | 개인 설정 (테마, 언어, 기본 모델 등)                      |
| **보관된 채팅** | 보관된 대화 목록                                    |
| **새로운 기능** | 최근 변경 사항 및 업데이트 로그 (관리자만 표시)                 |
| **관리자 패널** | 관리자이거나 사용자·평가·함수·설정·모니터링 중 하나 이상의 권한이 있으면 표시 |
| **관리자 문의** | 관리자에게 문의 (일반 사용자)                            |
| **로그아웃**   | 로그아웃                                         |

<Tip>
  프로필 메뉴 하단에는 현재 접속 중인 **온라인 사용자 수**가 표시됩니다.
</Tip>

<Frame caption="프로필 드롭다운 메뉴">
  <img src="https://mintcdn.com/cloocus/bFrDoUp8YAXyh4I1/images/getting-started/ui-profile-dropdown.png?fit=max&auto=format&n=bFrDoUp8YAXyh4I1&q=85&s=813bb0a02d11221d4c35ed83422a412c" alt="프로필 드롭다운 메뉴" width="1912" height="907" data-path="images/getting-started/ui-profile-dropdown.png" />
</Frame>

***

## 헤더 영역

채팅 화면 상단에 위치하며, 현재 대화에서 사용할 AI 모델을 선택하고 제어합니다.

### 모델 선택기

**"모델 선택"** 드롭다운을 클릭하면 사용 가능한 모델 목록이 표시됩니다.

* 모델 이름을 입력하여 **검색**할 수 있습니다
* 모델을 선택한 뒤 드롭다운 하단의 **"기본값으로 설정"** 링크를 클릭하면 기본 모델로 지정됩니다
* 관리자 또는 권한이 있는 사용자는 **+ 버튼**으로 여러 모델을 동시에 선택하여 응답을 비교할 수 있습니다

<Frame caption="모델 선택 드롭다운 펼친 상태">
  <img src="https://mintcdn.com/cloocus/bFrDoUp8YAXyh4I1/images/getting-started/first-chat-model-dropdown.png?fit=max&auto=format&n=bFrDoUp8YAXyh4I1&q=85&s=87420d26599133ffff1dc2e10fb741ab" alt="모델 선택 드롭다운 펼친 상태" width="1912" height="907" data-path="images/getting-started/first-chat-model-dropdown.png" />
</Frame>

<Note>
  일반 사용자에게 멀티 모델 비교 기능이 보이지 않는 경우, 관리자가 해당 권한(`multiple_models`)을 비활성화한 것입니다.
</Note>

### 채팅 메뉴 (더보기)

첫 메시지를 보낸 뒤 헤더 우측에 **더보기(⋯) 메뉴**가 나타나며, **공유**, **개요**, **다운로드**, **복사**, **태그** 기능을 제공합니다. 자세한 내용은 [채팅 개요](/ko/chat/overview)를 참고하세요.

### 알림 히스토리

헤더 우측의 **벨 아이콘**을 클릭하면 시스템 알림 히스토리 패널이 열립니다. 파일 처리 완료, 오류, 권한 변경 등의 알림을 모아 확인할 수 있습니다.

| 기능              | 설명                                      |
| --------------- | --------------------------------------- |
| **읽지 않은 알림 배지** | 벨 아이콘에 빨간 원형 숫자 표시 (9개 초과 시 "9+")       |
| **알림 타입**       | 성공(초록), 오류(빨강), 경고(노랑), 정보(파랑) 아이콘으로 구분 |
| **복사**          | 알림 메시지를 클립보드에 복사                        |
| **개별/전체 삭제**    | 개별 × 버튼 또는 "모두 지우기"로 정리                 |

패널을 열면 읽지 않은 알림이 자동으로 읽음 처리되어 배지가 사라집니다.

<Tip>
  **백그라운드 작업 진행률**도 알림 센터로 통합되어 있습니다 — 지식기반 파일 업로드/메타데이터 추출, DbSphere 동기화, 용어집 DB 추출, 지식 그래프 동기화 등 시간이 오래 걸리는 작업의 진행 상태가 모두 이 패널에서 실시간 갱신됩니다. 작업이 끝나면 같은 패널에 완료 알림이 그대로 남아 결과를 확인할 수 있습니다.
</Tip>

***

## 채팅 메시지 영역

화면 중앙의 메시지 영역에서 사용자와 AI 간의 대화가 표시됩니다.

<Frame caption="채팅 메시지 영역">
  <img src="https://mintcdn.com/cloocus/bFrDoUp8YAXyh4I1/images/getting-started/ui-chat-messages.png?fit=max&auto=format&n=bFrDoUp8YAXyh4I1&q=85&s=e53fded91fafee7bffa1869b457ecc38" alt="채팅 메시지 영역" width="2000" height="947" data-path="images/getting-started/ui-chat-messages.png" />
</Frame>

### 사용자 메시지

* 입력한 텍스트와 첨부 파일이 표시됩니다
* 메시지 hover 시 **편집** 아이콘이 나타나 내용을 수정하고 재전송할 수 있습니다

### AI 응답

* 마크다운 렌더링을 지원합니다 (제목, 목록, 표, 코드 블록 등)
* 코드 블록에는 **구문 강조**(Syntax Highlighting)와 **복사 버튼**이 포함됩니다
* 수학 수식은 LaTeX 렌더링으로 표시됩니다
* 응답 하단에 **복사**, **재생성**, **읽어주기**, **좋은 응답/잘못된 응답** 버튼이 있습니다

### 새 대화 시작 화면

대화가 없는 빈 상태에서는 플랫폼 로고와 함께 "오늘 어떻게 도와드릴까요?"와 같은 환영 메시지가 표시됩니다. 관리자가 설정한 추천 프롬프트가 카드 형태로 표시될 수 있습니다.

***

## 입력 영역

화면 하단에 위치한 메시지 입력 영역으로, 텍스트 입력 외에 다양한 부가 기능을 제공합니다.

| 요소         | 위치     | 설명                                                    |
| ---------- | ------ | ----------------------------------------------------- |
| **+ (첨부)** | 입력창 좌측 | 파일 첨부, 클라우드 스토리지(Google Drive·OneDrive·SharePoint) 연결 |
| **텍스트 입력** | 중앙     | 질문/요청을 입력하는 Rich Text 에디터                             |
| **전송 버튼**  | 입력창 우측 | 메시지를 전송합니다 (`Enter`와 동일)                              |
| **마이크 버튼** | 입력창 우측 | 음성으로 메시지를 입력합니다 (STT)                                 |

### 특수 기능 버튼 (에이전트 설정에 따라 표시)

에이전트의 capability 설정에 따라 입력 영역에 추가 버튼이 나타날 수 있습니다.

| 버튼         | 설명                           |
| ---------- | ---------------------------- |
| **웹 검색**   | AI가 실시간 웹 검색 결과를 참고하여 답변합니다  |
| **이미지 생성** | 텍스트 프롬프트로 이미지를 생성합니다         |
| **코드 실행**  | Python 코드를 직접 실행하여 결과를 반환합니다 |

***

## 다크 모드

Cloosphere는 **라이트 모드**와 **다크 모드**를 지원합니다.

<Steps>
  <Step title="설정 열기">
    사이드바 하단의 프로필을 클릭한 뒤 **설정**을 선택합니다.
  </Step>

  <Step title="테마 변경">
    **일반** 탭에서 **테마** 옵션을 선택합니다.

    * **시스템**: 운영체제 설정을 따릅니다
    * **라이트**: 밝은 테마
    * **다크**: 어두운 테마
  </Step>
</Steps>

<Frame caption="테마 설정">
  <img src="https://mintcdn.com/cloocus/bFrDoUp8YAXyh4I1/images/getting-started/ui-theme-setting.png?fit=max&auto=format&n=bFrDoUp8YAXyh4I1&q=85&s=e86f2146c5c0734b2e137e5d70ba575f" alt="테마 설정" width="1100" height="592" data-path="images/getting-started/ui-theme-setting.png" />
</Frame>

***

## 사이드바 접기/펼치기

사이드바는 두 가지 상태를 지원합니다.

<Tabs>
  <Tab title="펼친 상태 (260px)">
    * 로고, 이름, 메뉴 텍스트가 모두 표시됩니다
    * 검색창이 입력 가능한 형태로 표시됩니다
    * 채팅 목록이 전체 너비로 표시됩니다
  </Tab>

  <Tab title="접힌 상태 (68px)">
    * 아이콘만 표시됩니다
    * 검색 아이콘을 클릭하면 사이드바가 자동으로 펼쳐집니다
    * 로고에 마우스를 올리면 펼치기 아이콘으로 전환됩니다
  </Tab>
</Tabs>

**전환 방법:**

* 사이드바 상단의 **접기/펼치기 토글 버튼** 클릭
* 키보드 단축키: `Ctrl + Shift + S`
* 모바일: 화면 좌측 가장자리에서 **스와이프**

***

## 키보드 단축키 정리

| 단축키                     | 기능           |
| ----------------------- | ------------ |
| `Enter`                 | 메시지 전송       |
| `Shift + Enter`         | 줄바꿈          |
| `Shift + Esc`           | 채팅 입력창에 포커스  |
| `Ctrl + Shift + O`      | 새 채팅 열기      |
| `Ctrl + Shift + S`      | 사이드바 전환      |
| `Ctrl + Shift + C`      | 마지막 응답 복사    |
| `Ctrl + Shift + ;`      | 마지막 코드 블록 복사 |
| `Ctrl + Shift + Enter`  | 프롬프트 쌍 생성    |
| `Ctrl + Shift + Delete` | 채팅 삭제        |
| `Ctrl + .`              | 설정 전환        |
| `Ctrl + /`              | 단축키 보기       |

***

## 모바일 화면

모바일 환경(768px 이하)에서는 UI가 자동으로 조정됩니다.

* 사이드바가 기본적으로 **숨김 상태**로 시작합니다
* 사이드바 열기: 좌측 가장자리에서 **오른쪽 스와이프** 또는 햄버거 메뉴
* 사이드바 닫기: 사이드바 외부 영역을 탭하면 자동으로 닫힙니다
* 메뉴 항목 클릭 시 사이드바가 자동으로 닫힙니다

<Tabs>
  <Tab title="사이드바 닫힌 상태">
    <Frame caption="모바일 사이드바 닫힌 상태">
      <img src="https://mintcdn.com/cloocus/bFrDoUp8YAXyh4I1/images/getting-started/ui-mobile-closed.png?fit=max&auto=format&n=bFrDoUp8YAXyh4I1&q=85&s=529d36871865b9f00358ea92c2ed2d5d" alt="모바일 사이드바 닫힌 상태" width="376" height="816" data-path="images/getting-started/ui-mobile-closed.png" />
    </Frame>
  </Tab>

  <Tab title="사이드바 열린 상태">
    <Frame caption="모바일 사이드바 열린 상태">
      <img src="https://mintcdn.com/cloocus/bFrDoUp8YAXyh4I1/images/getting-started/ui-mobile-sidebar-open.png?fit=max&auto=format&n=bFrDoUp8YAXyh4I1&q=85&s=5483b1e690b69864b815f246bffe6a56" alt="모바일 사이드바 열린 상태" width="372" height="814" data-path="images/getting-started/ui-mobile-sidebar-open.png" />
    </Frame>
  </Tab>
</Tabs>

***

## Guide Q\&A 도우미

화면 우측 하단의 **물음표(?) 버튼**을 클릭하면 **가이드 문서 기반 Q\&A 챗봇**이 열립니다.

Cloosphere 사용법에 대해 궁금한 점을 자연어로 질문하면, AI가 가이드 문서를 검색하여 답변합니다.

| 항목           | 설명                                |
| ------------ | --------------------------------- |
| **위치**       | 화면 우측 하단 물음표(?) 플로팅 버튼            |
| **사용 가능 대상** | 로그인한 모든 사용자                       |
| **응답 소스**    | Cloosphere 가이드 문서 (ReAct 에이전트 기반) |
| **모델 선택**    | 채팅 패널 상단에서 AI 모델 변경 가능            |

<Tip>
  "지식기반 필터는 어떻게 설정하나요?", "예약 작업으로 이메일 알림을 보내려면?" 같은 질문에 답변합니다. 기능 사용법을 빠르게 확인할 때 활용하세요.
</Tip>

***

## 다음 단계

<Columns cols={2}>
  <Card title="첫 대화 시작" icon="message" href="/ko/getting-started/first-chat">
    AI 모델을 선택하고 첫 대화를 시작합니다
  </Card>

  <Card title="대화 관리" icon="folder" href="/ko/chat/conversations">
    폴더, 핀, 태그로 대화를 체계적으로 관리합니다
  </Card>
</Columns>