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

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

​

파일의 테마 선택하기

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

​

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

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

• 프롬프트에서 언급한 색상
• 디자인 가이드라인의 색상
• 첨부 파일과 붙여넣은 링크의 브랜드 색상
• 더 구체적인 정보가 없을 때는 프롬프트에서 설명한 제품과 분위기

테마에는 짧은 이름, 라이트와 다크를 모두 포함한 전체 팔레트, 모서리 둥글기 단계가 설정됩니다. 테마는 조직의 Home에 있는 Themes에 저장되며, 파일은 이후 생성하는 모든 화면에 이 테마를 사용합니다. 파일에 테마가 설정되면 Flowstep은 스스로 다른 테마를 설계하지 않습니다. 새 테마를 원하면 테마 메뉴에서 Automatic을 다시 선택하세요. 다음 생성 때 새 테마가 설계되고 파일은 이를 사용하게 됩니다. Flowstep이 테마를 설계할 수 없으면 파일은 기본 제공 테마 중 하나를 사용합니다.

​

개별 화면의 테마 변경하기

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

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

테마를 전환하면 화면이 즉시 다시 칠해집니다. Light와 Dark 사이를 전환하면 AI 편집과 마찬가지로 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 목록에서 테마 옆의 휴지통 아이콘을 클릭하세요. 삭제된 테마는 테마 메뉴에 더 이상 표시되지 않습니다. 이미 이 테마를 사용하는 화면은 기존 모습을 유지하므로 캔버스에는 변화가 없습니다.

​

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

색상과 모서리는 고정 값 대신 테마 토큰을 가리킬 수 있습니다. 연결된 값은 화면의 테마를 따르므로, 테마가 바뀌면(다른 테마로 전환하거나, 게시된 편집을 적용하거나, 라이트와 다크를 전환하는 경우) 연결된 색상과 모서리도 함께 업데이트됩니다. 색상 — Fill 또는 Border 패널에서 색상 스와치를 클릭하세요. Token 탭에서 Theme, Base, Tailwind 그룹의 토큰을 검색하거나 선택하세요. 정확한 색상이 필요하면 Custom 탭을 사용하세요. 연결된 색상은 패널에 토큰 이름이 표시되며, 여전히 불투명도를 조정할 수 있습니다. 모서리 — Corners 패널에서 모서리 미리보기를 클릭하세요. Token 탭에서 단계(예: md 또는 lg)를 고르고, Custom 탭에서는 픽셀 단위의 정확한 값을 입력하세요. 연결된 모서리에는 토큰 이름이 표시되며, 테마의 둥글기를 변경하면 모서리도 다시 맞춰집니다. 연결된 값을 고정 값으로 되돌리려면 Detach from token을 클릭하세요. 색상이나 모서리는 현재 모습을 유지하지만, 더 이상 테마를 따르지 않습니다.

​

알아두면 좋은 점

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