테마 및 외관

Elftia는 나만의 AI 작업 공간을 만들 수 있도록 풍부한 외관 커스터마이징 옵션을 제공합니다. 이 페이지에서는 모든 외관 설정을 자세히 안내합니다.

모든 외관 설정은 설정 → 외관 페이지에서 확인할 수 있습니다.

테마 모드

Elftia는 세 가지 테마 모드를 지원합니다:

모드	설명
라이트 모드	따뜻한 흰색 배경으로, 밝은 환경에 적합합니다
다크 모드	따뜻한 차콜 배경으로 눈의 피로를 줄이며, 야간 사용에 적합합니다
시스템 따라가기	운영 체제의 라이트/다크 설정에 따라 자동으로 전환됩니다

설정 방법:

1. 설정 → 외관을 엽니다.
2. 테마 모드 섹션에서 원하는 모드의 카드를 클릭합니다.
3. 변경 사항은 즉시 적용되며 재시작이 필요하지 않습니다.

정보

Elftia의 다크 모드는 순수 검정색 대신 따뜻한 톤을 사용하여 시각적으로 더 부드럽고 편안합니다. 라이트 모드 역시 순수 흰색 대신 따뜻한 크림 톤을 사용하여 눈부심을 줄입니다.

강조 색상

강조 색상은 버튼, 링크, 선택 상태 등 인터페이스 전반에 사용되는 테마 색상입니다.

프리셋 팔레트

Elftia는 한 번의 클릭으로 적용할 수 있는 엄선된 프리셋 색상 세트를 제공합니다:

• 각 프리셋 색상은 라이트 모드와 다크 모드 모두에서 좋은 대비와 시각적 품질을 보장하도록 조정되어 있습니다.
• 프리셋 팔레트는 따뜻한 톤, 차가운 톤, 중성 톤을 포함합니다.

커스텀 색상

프리셋이 요구 사항을 충족하지 못하는 경우 강조 색상을 직접 지정할 수 있습니다:

1. 팔레트 섹션에서 커스텀 색상 옵션을 찾습니다.
2. 다음 형식 중 하나로 색상 값을 입력합니다:
   • HEX: 예) #FF6B35
   • HSL: 예) hsl(20, 100%, 60%)
3. 미리보기 영역에서 선택한 색상의 효과를 실시간으로 확인할 수 있습니다.

팁

강조 색상을 선택할 때는 라이트 모드와 다크 모드 모두에서 충분한 대비를 확보해야 합니다. 너무 밝은 색상은 라이트 모드에서 눈에 띄지 않을 수 있고, 너무 어두운 색상은 다크 모드에서 같은 문제가 발생합니다.

글꼴 설정

Elftia에서는 인터페이스에 사용할 글꼴을 직접 지정할 수 있습니다.

UI 글꼴 (Sans)

인터페이스 텍스트에 사용되는 산세리프 글꼴로, 기본값은 Inter입니다.

1. 글꼴 설정 섹션에서 UI 글꼴 입력 필드를 찾습니다.
2. 시스템에 설치된 글꼴 이름을 입력합니다. 예:
   • "Noto Sans SC" — Source Han Sans
   • "Microsoft YaHei" — Microsoft YaHei
   • "PingFang SC" — PingFang (macOS)
3. 비워두면 기본 글꼴인 Inter가 사용됩니다.

코드 글꼴 (Mono)

코드 블록과 편집기에 사용되는 고정폭 글꼴로, 기본값은 JetBrains Mono입니다.

1. 코드 글꼴 입력 필드에 글꼴 이름을 입력합니다. 예:
   • "Fira Code" — 합자(ligature)를 지원하는 프로그래밍 글꼴
   • "Source Code Pro" — Adobe의 프로그래밍 글꼴
   • "Cascadia Code" — Microsoft의 프로그래밍 글꼴
2. 비워두면 기본 글꼴인 JetBrains Mono가 사용됩니다.

팁

글꼴 변경은 즉시 전체 인터페이스에 적용됩니다. 지정한 글꼴이 시스템에 설치되어 있지 않은 경우, 브라우저가 기본 글꼴로 대체합니다.

배경화면

Elftia에서는 인터페이스에 배경화면을 설정하고 반투명 유리 효과를 적용할 수 있습니다. 배경화면 소스는 이미지 또는 그라디언트를 사용할 수 있으며, 다중 레이어 색상/불투명도 조정과 결합하면 깔끔한 비즈니스 스타일부터 몰입감 있는 분위기까지 다양하게 연출할 수 있습니다.

배경화면 소스

배경화면 소스는 두 가지 중 하나를 선택할 수 있습니다(둘 다 설정된 경우 그라디언트가 우선 적용됩니다):

소스	설정 방법	참고 사항
이미지 배경화면	이미지 변경을 클릭하여 로컬 파일을 선택하거나, 입력 필드에 URL을 붙여넣습니다	앱 데이터 디렉터리 themes/wallpapers/에 자동으로 복사되며, 라이트 모드와 다크 모드가 같은 이미지를 공유합니다
그라디언트 배경	그라디언트 배경 토글을 켜고, 색상 수(1~4)를 선택한 후 각 슬롯에 색상을 지정합니다	활성화 시 아래의 이미지가 일시적으로 숨겨지며, 토글을 끄면 복원됩니다

지원 이미지 형식: JPG, PNG, WebP, GIF.

원격 이미지 배경화면

1. 배경화면 입력 필드에 이미지 URL을 붙여넣습니다 (예: https://example.com/wallpaper.jpg).
2. 고급 설정에서 원격 리소스 허용을 먼저 활성화해야 합니다.
3. 원격 이미지의 도메인이 허용 목록에 포함되어야 합니다.

주의

원격 이미지를 활성화하면 외부 서버에 요청을 보내 이미지를 불러옵니다. 개인 정보 보호를 위해 기본적으로 비활성화되어 있습니다. 신뢰할 수 있는 도메인만 허용하세요.

유리 블러 효과

파라미터	범위	기본값	설명
유리 블러	0–30 px	6	배경화면 뒤에 적용되는 가우시안 블러. 값이 높을수록 배경화면이 더 흐려지고 인터페이스 텍스트가 더 선명하게 보입니다

배경 오버레이 (배경화면 위의 색조 레이어)

오버레이는 배경화면을 어둡게 하거나 색조를 더해 가독성을 높입니다. 0.1.11부터 오버레이 색상은 컬러 피커로 조정하며, 자동 밝기 토글이 추가되었습니다.

파라미터	범위	기본값	설명
오버레이 강도	0–100 %	70	전체 불투명도. 0 = 배경화면 완전히 표시, 100 = 완전히 가려짐
오버레이 색상	컬러 피커	중성 회색	HEX 색상을 선택하면 미리보기에 즉시 적용됩니다
자동 밝기	토글	켜짐	켜짐 시 오버레이 밝기가 모드에 따라 변경됩니다 (라이트 모드에서는 흰색, 다크 모드에서는 검정색). 꺼짐 시 컬러 피커의 밝기가 직접 적용됩니다
오버레이 그라디언트	선택적 토글 + 1–4 색상 슬롯	꺼짐	활성화 시 단색 오버레이를 선형 그라디언트로 대체합니다. 강도 슬라이더는 전체 불투명도를 계속 조정합니다

팁

강도가 0인 상태에서 처음으로 오버레이 색상을 드래그하면, 색상 효과를 바로 확인할 수 있도록 시스템이 자동으로 강도를 50 %로 높입니다.

권장 오버레이 설정:

배경화면 유형	유리 블러	오버레이 강도
풍경 사진	6–12	60–75
그라디언트 / 단색	0–4	50–65
복잡한 패턴	10–20	70–85
어두운 이미지	4–8	55–70

요소 배경 색조

사이드바 항목, 카드, 레이블, 탭 전환기 같은 반투명 패널은 기본적으로 테마를 따릅니다 (라이트 모드에서는 따뜻한 크림, 다크 모드에서는 따뜻한 차콜). 요소 배경 색조를 켜면 모든 요소를 커스텀 색상으로 일괄 변경할 수 있습니다:

파라미터	기본값	설명
요소 배경 색조 (토글)	꺼짐	꺼짐 시 테마 기본 색상 사용. 켜짐 시 아래 색상이 적용됩니다
색조 색상	컬러 피커	레일 / 카드 / 레이블 / 탭 / 컨텍스트 메뉴를 포함한 모든 반투명 표면에 영향을 줍니다
요소 그라디언트	선택 사항	단색과 상호 배타적. 활성화 시 1–4 색상 그라디언트가 단색을 대체하며, 각 레이어는 자체 불투명도를 유지합니다

입력 필드 및 Dialog/Modal과 같이 불투명해야 하는 요소는 영향을 받지 않습니다.

메시지 버블 색상

메시지 버블(사용자 버블 / 어시스턴트 버블)은 기본적으로 요소 배경의 색상과 불투명도를 따릅니다. 0.1.11부터 새로운 독립 제어 항목이 추가되었습니다:

파라미터	기본값	설명
독립 제어 (마스터 토글)	꺼짐	꺼짐 시 버블이 요소 배경을 따릅니다. 켜짐 시에만 아래 전용 옵션이 표시됩니다
사용자 버블	서브 토글 + 컬러 피커	사용자 메시지 버블 색상 / 그라디언트를 독립적으로 설정합니다
어시스턴트 버블	서브 토글 + 컬러 피커	어시스턴트 메시지 버블 색상 / 그라디언트를 독립적으로 설정합니다
버블 불투명도	0–100 % (기본값 35)	마스터 토글이 켜진 경우에만 적용됩니다. 낮을수록 버블이 더 투명해지고 배경화면이 더 잘 보입니다

각 쪽의 버블은 독립적으로 "단색" 또는 "그라디언트"를 선택할 수 있으며, 이 둘도 상호 배타적입니다 (그라디언트를 활성화하면 해당 쪽의 단색을 덮어씁니다).

팁

모든 반투명 패널을 하나의 톤으로 통일하고 싶다면, 요소 배경 색조만 켜세요. 그러면 버블도 자동으로 따라갑니다. 버블과 카드를 다른 색상으로 구분하고 싶을 때만 독립 제어를 활성화하면 됩니다.

기타 고급 파라미터

파라미터	범위	기본값	용도
요소 불투명도	0–100 %	0	실험적: 모든 반투명 UI를 불투명한 방향으로 밀어붙입니다 (배경화면이 너무 눈에 띌 때 사용)
배경화면 투명도	0–100 %	100	표면 색조 강도 계수: 0 = 표면 완전 투명 (배경화면이 가장 선명하게 보임), 100 = 기본 표면 색조
컴팩트 창에서 배경화면 비활성화	토글	꺼짐	켜짐 시 Mini/Selection 등 작은 창에서는 배경화면을 자동으로 비활성화합니다

배경화면 제거

배경화면 입력 필드 위의 지우기 버튼(휴지통 아이콘)을 클릭하면 현재 배경화면 이미지가 제거됩니다. 그라디언트 배경은 그라디언트 활성화 토글로 별도로 제어합니다.

배경화면 투명도 내부 규칙

배경화면이 설정되면 인터페이스는 자동으로 투명도 규칙 세트를 활성화합니다:

• 메인 컨테이너: 35% 불투명도의 유리 효과
• 버튼 및 카드: 15–20% 불투명도의 반투명 효과
• 입력 필드: 가독성을 위해 불투명 유지
• 팝업 및 다이얼로그: 불투명 유지, 배경화면의 영향 없음
• 드롭다운 / 컨텍스트 메뉴: 85% 불투명도의 가독성 높은 유리 효과

이 값들은 자동으로 처리되며 별도의 설정이 필요하지 않습니다. 위에서 설명한 "요소 배경 색조" 및 "메시지 버블" 옵션은 각 레벨의 알파 값을 유지하면서 선택한 색조를 그 위에 덮어씁니다.

커스텀 CSS

고급 사용자를 위해, Elftia는 커스텀 스타일을 주입하여 인터페이스 외관을 심층적으로 커스터마이징할 수 있는 전용 CSS 편집기를 제공합니다.

CSS 편집기 사용 방법

1. 외관 설정에서 커스텀 CSS 섹션을 찾습니다.
2. 편집기를 클릭하여 펼치면 구문 강조 기능이 있는 CSS 코드 편집기가 표시됩니다.
3. 커스텀 CSS 코드를 작성합니다.
4. 코드가 실시간으로 인터페이스에 적용되므로 즉시 효과를 확인할 수 있습니다.

예시: 메시지 버블 커스터마이징

{/* 사용자 메시지 버블의 배경 색상 변경 */}
.chat-bubble[data-role="user"] {
  background-color: hsl(var(--primary) / 0.15);
  border-radius: 16px;
}

{/* AI 답변의 글꼴 크기 변경 */}
.chat-bubble[data-role="assistant"] {
  font-size: 15px;
  line-height: 1.7;
}

예시: 사이드바 너비 커스터마이징

{/* 사이드바 너비 조정 */}
.session-panel {
  width: 280px;
}

사용 가능한 CSS 변수

커스텀 CSS에서 Elftia의 테마 변수를 사용할 수 있습니다:

변수	용도
--background	페이지 배경 색상
--foreground	기본 텍스트 색상
--surface-0	기본 표면 색상
--surface-1	1단계 표면 색상 (카드, 컨테이너)
--surface-2	2단계 표면 색상 (입력 필드, 보조 컨테이너)
--surface-3	3단계 표면 색상 (팝업)
--primary	테마 강조 색상
--border	테두리 색상
--muted-foreground	보조 텍스트 색상
--destructive	오류/위험 작업에 사용되는 색상
--success	성공 상태에 사용되는 색상

작업 버튼

CSS 편집기 위에서 다음 작업을 사용할 수 있습니다:

버튼	기능
복사	현재 CSS를 클립보드에 복사
붙여넣기	클립보드의 CSS를 붙여넣기
실행 취소	마지막으로 저장된 상태로 되돌리기
지우기	모든 커스텀 CSS 삭제
호환성 템플릿 삽입	자주 사용되는 호환성 CSS 선택자 템플릿 삽입

주의

커스텀 CSS는 매우 강력하지만, 잘못된 스타일은 인터페이스 레이아웃 문제를 일으킬 수 있습니다. 문제가 발생하면 CSS 편집기의 내용을 지워 기본 스타일로 복원하세요.

테마 설정 파일

모든 외관 설정을 테마 설정 파일로 묶어 내보내고 공유할 수 있습니다.

테마 내보내기

1. 외관 설정 페이지에서 테마 설정 섹션을 찾습니다.
2. 내보내기 버튼을 클릭합니다.
3. 저장 위치를 선택하면 JSON 형식으로 저장됩니다.

내보낸 파일에는 테마 모드, 강조 색상, 글꼴 설정, 배경화면 파라미터 (이미지 파일 제외), 커스텀 CSS가 포함됩니다.

테마 가져오기

1. 가져오기 버튼을 클릭합니다.
2. 테마 JSON 파일을 선택합니다.
3. 가져오기 효과를 미리 확인한 후 확인하여 적용합니다.

팁

직접 만든 테마 설정 파일을 커뮤니티와 공유할 수 있으며, 다른 사람이 공유한 테마를 사용하여 Elftia를 빠르게 꾸밀 수도 있습니다.

코드 편집기 외관

Elftia에 내장된 코드 편집기(CodeMirror)에는 자체 외관 설정이 있습니다:

설정	설명
편집기 테마	코드 편집기의 색상 스킴 선택
줄 바꿈	긴 코드 줄을 자동으로 줄 바꿈할지 여부
줄 번호	줄 번호 표시 여부
미니맵	오른쪽에 미니맵 표시 여부
글꼴 크기	코드 편집기의 글꼴 크기

이 설정들은 외관 페이지의 코드 편집기 섹션에 있습니다.

---

외관 커스터마이징 중 표시 문제가 발생하면, 커스텀 CSS를 지우거나 올바른 것으로 알려진 테마 설정을 가져와 보세요. 더 많은 도움이 필요하면 자주 발생하는 문제를 참고하세요.