레젠위키
Xe-skin
| r1 | ||
|---|---|---|
| r1 (새 문서) | 1 | [[분류:스킨]] |
| 2 | ||<tablealign=right><tablewidth=400><tablebordercolor=#0e63ff,#0e63ff><tablebgcolor=#0e63ff,#0e63ff><-2><:> '''{{{#white {{{+2 xe_skin}}}}}}''' || | |
| 3 | ||<bgcolor=#ffffff,#0c1b31><-2><:> [[파일:Xe_Skin_스크린샷.png|width=100%]] || | |
| 4 | ||<width=30%><colbgcolor=#f5faff,#11203d><colcolor=#000,#eee> '''제작자''' ||[[사용자:Xenon54|Xenon54]] || | |
| 5 | ||<bgcolor=#f5faff,#11203d> '''엔진''' ||[[thetree]] || | |
| 6 | ||<bgcolor=#f5faff,#11203d> '''기반 언어''' ||Vue.js, CSS3 || | |
| 7 | ||<bgcolor=#f5faff,#11203d> '''라이선스''' ||[[MIT 라이선스]] || | |
| 8 | ||
| 9 | [목차] | |
| 10 | [clearfix] | |
| 11 | ||
| 12 | == 개요 == | |
| 13 | [[레젠위키]]에서 사용하기 위해 자체 제작된 thetree 엔진 호환 스킨입니다. | |
| 14 | 현재 해당 위키에서만 독점적으로 사용되고 있으며, 소스 코드는 외부에 공개되지 않은 비공개(Closed Source) 스킨입니다. | |
| 15 | ||
| 16 | 전반적으로 부드러운 그라데이션과 블러(Blur) 효과를 적극적으로 활용한 '''글래스모피즘(Glassmorphism)''' 디자인을 채택하여, 현대적이고 몽환적인 분위기를 제공합니다. | |
| 17 | ||
| 18 | == 주요 특징 == | |
| 19 | === 디자인 및 테마 === | |
| 20 | * '''오로라 백그라운드 (Aurora Background):''' | |
| 21 | 배경에 두 개의 거대한 원형 그라데이션 오브젝트(`Aurora A`, `Aurora B`)가 배치되어 있습니다. 이들은 고정되어 있지 않고 천천히 부유하며(Floating Animation), 페이지에 생동감을 불어넣습니다. | |
| 22 | * '''노이즈 텍스처 (Noise Texture):''' | |
| 23 | 화면 전체에 미세한 노이즈 패턴이 오버레이 되어 있습니다. 이는 디지털 화면 특유의 차가운 느낌을 줄이고, 종이 질감과 유사한 아날로그 감성을 더해줍니다. | |
| 24 | * '''글래스모피즘 UI:''' | |
| 25 | 상단 바(Topbar), 사이드바, 카드 UI 등 주요 요소에 배경 블러 처리가 되어 있어, 배경의 오로라가 은은하게 투과되어 보입니다. | |
| 26 | * '''다크 모드 완벽 지원:''' | |
| 27 | 시스템 설정 혹은 스킨 자체 토글 기능을 통해 라이트/다크 모드를 전환할 수 있습니다. 다크 모드에서는 심해를 연상시키는 짙은 네이비(`Dark Navy`) 톤을 사용하여 눈의 피로를 최소화합니다. | |
| 28 | ||
| 29 | === 레이아웃 및 UX === | |
| 30 | * '''히어로 섹션 (Hero Section):''' | |
| 31 | 문서 제목과 메타 데이터(마지막 편집 시간 등)가 상단에 크게 배치되어 주목도를 높였습니다. 특히 문서 도구(편집, 토론 등) 버튼들이 둥근 캡슐(Pill) 형태로 디자인되어 깔끔함을 더합니다. | |
| 32 | * '''반응형 사이드바:''' | |
| 33 | PC 환경에서는 우측(또는 설정에 따라 좌측)에 고정되지만, 모바일 환경(`960px` 이하)에서는 우측에서 슬라이드 되어 나오는 드로어(Drawer) 형식으로 변환됩니다. | |
| 34 | * '''스마트한 상단 바:''' | |
| 35 | 스크롤 시 상단 바가 화면에 고정(Sticky)되며, 검색창과 사용자 메뉴에 빠르게 접근할 수 있습니다. 배경 흐림 효과가 적용되어 본문 내용을 가리지 않으면서도 구분감을 줍니다. | |
| 36 | ||
| 37 | == 기능 == | |
| 38 | 스킨 자체적으로 제공하는 설정 모달을 통해 사용자가 직접 UI를 커스터마이징할 수 있습니다. | |
| 39 | ||
| 40 | === 사용자 설정 === | |
| 41 | 우측 상단의 '설정' 버튼을 통해 다음과 같은 옵션을 제어할 수 있습니다. | |
| 42 | ||<tablewidth=100%><tablebgcolor=#ffffff,#0c1b31><bgcolor=#0e63ff> '''{{{#white 설정 항목}}}''' ||<bgcolor=#0e63ff> '''{{{#white 기능 설명}}}''' || | |
| 43 | ||<bgcolor=#f5faff,#11203d> '''사이드바 설정''' || 사이드바를 '''표시 / 숨김 / 하단 배치''' 중에서 선택할 수 있습니다.[br]화면을 넓게 쓰고 싶은 사용자는 사이드바를 숨기거나 하단으로 내릴 수 있습니다. || | |
| 44 | ||<bgcolor=#f5faff,#11203d> '''상단 바 고정''' || 스크롤 시 상단 메뉴바가 따라다닐지 여부를 결정합니다. || | |
| 45 | ||<bgcolor=#f5faff,#11203d> '''스크롤 버튼''' || 화면 우측 하단에 나타나는 '위로 / 아래로 / 목차' 버튼의 표시 여부를 설정합니다. || | |
| 46 | ||<bgcolor=#f5faff,#11203d> '''검색창 초기화''' || 페이지 이동 시 검색창에 입력했던 검색어를 자동으로 지울지 설정합니다. || | |
| 47 | ||
| 48 | === 기타 편의 기능 === | |
| 49 | * '''알림 센터:''' 읽지 않은 알림이 일정 개수(5개) 이상 쌓이면 경고 메시지를 띄워 확인을 유도합니다. | |
| 50 | * '''편집 요청 감지:''' 현재 보고 있는 문서에 진행 중인 편집 요청이나 토론이 있을 경우, 상단에 알림(Alert)을 표시하여 기여 참여를 독려합니다. | |
| 51 | * '''타이포그래피:''' Pretendard와 SUIT 폰트를 우선 적용하여, 다양한 OS 환경에서도 가독성 높은 본문 환경을 제공합니다. | |
| 52 | ||
| 53 | == 여담 == | |
| 54 | * 배경의 움직이는 오로라 애니메이션은 CSS Keyframes를 사용하여 구현되었으며, 성능 최적화를 위해 GPU 가속을 활용합니다. | |
| 55 | * 본 스킨은 레젠위키 전용으로 제작되었으므로 별도의 배포나 공유 계획은 없다고 알려져 있습니다. |