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

# 테마를 사용해 Flowstep 화면 전체에서 색상과 모서리 둥글기를 일관되게 유지하기

> 파일마다 테마를 선택하거나 생성하고, 개별 화면의 스타일을 바꾸고, 조직의 테마를 편집하세요. 색상과 모서리를 테마 토큰에 연결하면 변경 사항이 모든 화면에 반영됩니다.

테마는 화면에 적용되는 공유 색상 팔레트와 모서리 둥글기 설정입니다. 모든 파일에는 테마와 모드(라이트 또는 다크)가 있으며, 화면은 테마의 토큰으로 스타일이 지정됩니다. 테마를 편집하면 그 테마를 사용하는 모든 화면이 함께 바뀌므로, 팀은 프롬프트마다 색상을 다시 설명하지 않고 하나의 기준을 따를 수 있습니다.

직접 만들거나 생성한 테마는 조직에 저장되며, Home의 **Themes**에 표시됩니다. 따라서 조직의 어떤 파일이든 이 테마를 사용할 수 있습니다.

## 파일의 테마 선택하기

파일 안의 프롬프트 작성기에서 새 화면에 사용할 테마와 모드를 선택하세요. Home의 프롬프트 상자에서는 테마 버튼을 사용할 수 없습니다.

<Steps>
  <Step title="테마 메뉴 열기">
    프롬프트 작성기에서 테마 버튼을 클릭하세요. 현재 테마의 색상 스와치가 표시되며, 테마가 **Automatic**이면 색상환이 표시됩니다. 메뉴의 제목은 **Theme for new screens**입니다.
  </Step>

  <Step title="테마 선택하기">
    **Automatic**, 조직의 테마 중 하나(맨 위에 표시됨), 또는 기본 제공 테마 중 하나를 선택하세요. 기본 제공 테마는 **Default**, **Blue**, **Grayscale**, **Green**, **Ice**, **Orange**, **Red**, **Rose**, **Violet**, **Yellow**입니다.
  </Step>

  <Step title="모드 선택하기">
    **Appearance** 아래에서 **Light** 또는 **Dark**를 선택하거나, **Automatic**을 선택해 Flowstep이 프롬프트에 따라 화면별로 결정하게 하세요. 예를 들어 "어두운 대시보드"를 요청하면 다크 모드로 생성됩니다.
  </Step>
</Steps>

<Note>
  선택한 항목은 다음에 생성하는 화면에 적용됩니다. 캔버스에 이미 있는 화면은 기존 모습을 유지합니다.
</Note>

## Flowstep이 테마를 설계하도록 하기

파일에 아직 테마가 없을 때, 즉 테마가 **Automatic**으로 설정된 새 파일이라면 Flowstep은 처음 생성하는 화면과 함께 커스텀 테마를 설계합니다. 작업하는 동안 채팅에 **Designing theme** 단계가 표시됩니다.

Flowstep은 다음을 바탕으로 테마를 만듭니다.

* 프롬프트에서 언급한 색상
* [디자인 가이드라인](/ko/design-guidelines)의 색상
* 첨부 파일과 [붙여넣은 링크](/ko/design-references#paste-a-url)의 브랜드 색상
* 더 구체적인 정보가 없을 때는 프롬프트에서 설명한 제품과 분위기

테마에는 짧은 이름, 라이트와 다크를 모두 포함한 전체 팔레트, 모서리 둥글기 단계가 설정됩니다. 테마는 조직의 Home에 있는 **Themes**에 저장되며, 파일은 이후 생성하는 모든 화면에 이 테마를 사용합니다.

파일에 테마가 설정되면 Flowstep은 스스로 다른 테마를 설계하지 않습니다. 새 테마를 원하면 테마 메뉴에서 **Automatic**을 다시 선택하세요. 다음 생성 때 새 테마가 설계되고 파일은 이를 사용하게 됩니다. Flowstep이 테마를 설계할 수 없으면 파일은 기본 제공 테마 중 하나를 사용합니다.

<Tip>
  첫 프롬프트에서 브랜드 색상을 언급하거나, 생성하기 전에 [디자인 가이드라인](/ko/design-guidelines)에 색상을 설정하세요. 생성된 테마는 이 색상을 기준으로 시작합니다.
</Tip>

## 개별 화면의 테마 변경하기

파일의 나머지 부분에 영향을 주지 않고 한 화면의 스타일만 바꾸려면 다음 단계를 따르세요.

1. 캔버스에서 화면을 선택하세요.
2. 화면 위 메뉴에서 **Theme** 버튼을 클릭하세요.
3. 조직의 테마 또는 기본 제공 테마 중 하나를 선택하거나, **Light**와 **Dark** 사이를 전환하세요.

테마를 전환하면 화면이 즉시 다시 칠해집니다. **Light**와 **Dark** 사이를 전환하면 [AI 편집](/ko/editing-designs)과 마찬가지로 AI에 화면의 스타일을 다시 지정하도록 요청합니다. 생성이 진행 중일 때는 이 메뉴를 사용할 수 없습니다.

## 테마 편집하기

Home의 **Themes** 섹션에서 테마를 엽니다. 테마 편집기에는 테마의 실시간 미리보기가 표시되고, 오른쪽에는 **Theme settings**가 있습니다. 상단의 **Light**와 **Dark** 버튼으로 미리보기를 전환하고, 테마 이름을 클릭하면 이름을 바꿀 수 있습니다.

* **색상** — 각 색상 그룹에는 라이트용 스와치와 다크용 스와치가 하나씩 있습니다. 그룹은 **Primary**, **Secondary**, **Accent**, **Muted**, **Destructive**, **Background**, **Card**, **Popover**, **Border**, **Input**, **Ring**, **Charts**, **Sidebar**입니다. 스와치를 클릭하면 색상 선택기나 hex 값으로 그룹의 채우기 색상과 텍스트 색상 같은 값을 편집할 수 있습니다.
* **모서리 둥글기** — 둥글기 단계(**Square**, **Slight**, **Balanced**, **Soft**, **Round**) 중 하나를 고르거나, **Custom**을 선택하고 **Base radius**를 드래그해 직접 설정하세요.

편집 내용은 초안으로 저장되므로, 작업하는 동안에는 화면이 바뀌지 않습니다. 준비가 되면 다음을 진행하세요.

* **Publish**를 클릭해 테마를 사용하는 모든 화면을 업데이트하세요. Flowstep은 "Published. Screens using this theme are updating."(게시되었습니다. 이 테마를 사용하는 화면을 업데이트하는 중입니다.)라고 확인 메시지를 표시합니다.
* **Reset changes**를 클릭하면 게시되지 않은 변경 사항이 취소됩니다. 이 테마를 사용하는 화면은 영향을 받지 않습니다.

테마를 삭제하려면 **Theme settings** 하단의 **Delete theme**을 클릭하거나, Home의 **Themes** 목록에서 테마 옆의 휴지통 아이콘을 클릭하세요. 삭제된 테마는 테마 메뉴에 더 이상 표시되지 않습니다. 이미 이 테마를 사용하는 화면은 기존 모습을 유지하므로 캔버스에는 변화가 없습니다.

<Note>
  Guest를 제외한 조직의 모든 구성원이 테마를 편집하고 삭제할 수 있습니다.
</Note>

## 색상과 모서리를 테마에 연결하기

색상과 모서리는 고정 값 대신 테마 토큰을 가리킬 수 있습니다. 연결된 값은 화면의 테마를 따르므로, 테마가 바뀌면(다른 테마로 전환하거나, 게시된 편집을 적용하거나, 라이트와 다크를 전환하는 경우) 연결된 색상과 모서리도 함께 업데이트됩니다.

**색상** — **Fill** 또는 **Border** 패널에서 색상 스와치를 클릭하세요. **Token** 탭에서 **Theme**, **Base**, **Tailwind** 그룹의 토큰을 검색하거나 선택하세요. 정확한 색상이 필요하면 **Custom** 탭을 사용하세요. 연결된 색상은 패널에 토큰 이름이 표시되며, 여전히 불투명도를 조정할 수 있습니다.

**모서리** — **Corners** 패널에서 모서리 미리보기를 클릭하세요. **Token** 탭에서 단계(예: `md` 또는 `lg`)를 고르고, **Custom** 탭에서는 픽셀 단위의 정확한 값을 입력하세요. 연결된 모서리에는 토큰 이름이 표시되며, 테마의 둥글기를 변경하면 모서리도 다시 맞춰집니다.

연결된 값을 고정 값으로 되돌리려면 **Detach from token**을 클릭하세요. 색상이나 모서리는 현재 모습을 유지하지만, 더 이상 테마를 따르지 않습니다.

## 알아두면 좋은 점

* **화면은 자신만의 테마를 유지합니다** — 각 화면은 자신의 테마와 모드를 기억합니다. 파일의 테마를 바꾸면 다음에 생성하는 화면에만 적용되며, 기존 화면의 스타일을 바꾸려면 화면별 **Theme** 메뉴를 사용하세요.
* **게시된 버전만 표시됩니다** — 화면에는 테마의 게시된 버전이 표시됩니다. 초안은 게시하기 전까지 테마 편집기에서만 볼 수 있습니다.
* **토큰 연결은 편집 후에도 유지됩니다** — 그림자, 필터, 그라디언트에 사용된 테마 색상은 Flowstep이 화면을 편집하거나 다시 생성해도 테마에 연결된 상태를 유지합니다.
* **크기가 조절되지 않는 둥글기 단계** — `none`과 `full` 모서리 토큰은 테마의 둥글기 설정과 관계없이 항상 각각 사각형과 완전한 원형입니다.


This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.