Neoline(r11 Blame)

r11
r1
Gwangtori

(새 문서) 		1[[분류:위키/스킨]]
2[include(틀:위키 스킨)]
3[목차]
4[clearfix]
5== 개요 ==
6||<nopad><width=71.8%><tablebgcolor=#fff,#1c1d1f><tablebordercolor=#000,#fff> [[파일:Neoline 25.12 (1).png|width=100%]] ||<nopad> [[파일:Neoline 25.12 (2).png|width=100%]] ||
7|| PC 버전 || Mobile 버전 ||
8|||| '''Neoline 스킨 스크린샷 (2025/12)'''[br]{{{-2 사진을 눌러 크게 볼 수 있습니다.}}} ||
9[[https://daol.cc/License|라이선스 페이지]] | [[https://github.com/Wikive/thetree_neoline|Github]][* 접근 권한이 있어야 볼 수 있다.]
10
11== 역사 ==
12||<nopad><tablebgcolor=#fff,#1c1d1f><width=57%> [[파일:Neoline 25.06.png|width=100%]] ||<nopad> [[파일:Neoline 25.07.png|width=100%]] ||
13|| 2025년 6월, 레이아웃 짜기 || 2025년 7월, 뼈대 구축 ||
14 * 2025년 6월: Adobe XD로 레이아웃을 미리 정했다. 이때까지만 해도 Central의 분위기가 남아 있는 것이 특징아닌 특징.
15 * 2025년 7월: 기존 Central 코드를 재활용하여 html로 뼈대만 구축하였다. css나 js는 하나도 없기 때문에 정상 작동은 전혀 안했다.
16 * 2025년 11월: 디자인을 뒤집어 엎었다.
17 * 2025년 12월 23일: 뒤집어 엎은 디자인 html 파일을 vue로 전환하기 시작했다.
18 * 2025년 12월 24일: 레이아웃만 작동하는 상태로 다올위키에 스킨으로 추가되었다. [[https://daol.cc/thread/ModernBillowyFullAgent| ]][* 정말 레이아웃만 동작했기 때문에 모바일에서 사용자 도구에 접근할 수 없거나, 드롭다운이 이상하게 동작하는 등 정상적으로 사용하기에는 힘들었다.]
19 * 2025년 12월 27일: 모바일에서 자동 완성의 위에 1~3줄이 잘리는 사소?한 문제 빼고 모두 해결되어 드디어 스킨 구실을 할 수 있게 되었다.
20
21== 특징 ==
22한국에서 가장 많이 볼만한 위키 디자인은 아무래도 한국에서 가장 유명한 위키인 나무위키에서 쓰이는 [[espejo]] 스킨이다.
23
24이 스킨은 2015년에 출시한 [[senkawa]]와 크게 다르지 않은 디자인으로, 레이아웃이 크게 변하지 않아 사용자들에게는 친숙하다는 장점이 있을 수 있으나, 나쁘게 말하자면 10년 동안 디자인이 똑같다는 것이다.[* 문서 도구 버튼이 ...이 생겨 자주 쓰지 않는 버튼들이 드롭다운 속으로 들어갔다는 것과 동글동글해진 것 등 변화가 아예 없는 것은 아니다.] 동년에 출시한 리브레 위키의 기본 스킨, [[Liberty]]와 디자인이 별 차이가 없는데 그 이유는 이때 두 스킨 모두 부트스트랩을 사용했기 때문에 레이아웃이 비슷한 것이다.
25
26하지만 Liberty는 지금도 꽤 많은 위키에서 아직도 사용 중이다. 그 이유는 공개된 스킨 중에서 가장 깔끔하고, 무난한 스킨이기도 하며 앞서 말한 나무위키와 레이아웃이 크게 다르지 않기 때문이기도 한 것 같다. 나무위키의 스킨은 구형도 신형도 비공개이기 때문에 쓰고 싶어도 쓸 수 없다.
27
28하지만 이러한 틀을 깨보는 것이 어떨까라는 생각이 들었다. 내가 [[Central]] 스킨을 만들었긴 했지만 제작자인 내가 봐도 솔직히 espejo랑 Liberty를 짬뽕한 이도저도 아닌 그냥 조금 다르게 생긴 평범한 스킨이라는 생각밖에 들지 않는다.
29
302025년 초에 하늘위키에서 [[clearsky]] 스킨이 만들어졌었다. 난 이때 새로운 시도를 한 이 스킨이 굉장히 마음에 들었다. 하지만 얼마 안가 the tree가 프론트엔드가 생기고 Vue로 스킨이 전환되자 삐걱삐걱 거리기 시작하며 하늘위키가 사라져버렸다...
31
32그래서 내가 또 다른 스킨을 만들어 보았다. clearsky와는 살짝 다른, 요즘 웹사이트 디자인으로 흔하게 쓰는 양쪽 사이드바 디자인을 위키에 적용해보았다.
33
34이 스킨은 내가 만들고 싶어서도 있지만 요즘 LLM의 코딩 실력을 보고 싶어서 만들어본 점도 있다. Google의 Gemini를 사용했으며, 만들어진 순서는 다음과 같다.
35 1. 일단 디자인이 들어간 css, js가 포함된 HTML를 뽑는다.
36 1. Central에 사용된 변수들을 적용하며 Vue 포팅을 한다.
37 1. 포팅하며 생긴 css 문제와 js 문제를 수정한다.
38 1. 디자인을 가다듬고 사람들에게 피드백 받은 것들을 개선한다.
39
40놀랍게도 3번까지 나는 손 하나 까딱 안 하고 오로지 복사 붙여넣기와 말빨로 만들었다. 진짜 기술 발전이 무섭긴 하구나...라는 생각이 들긴 하지만 ChatGPT는 500줄, Gemini는 800줄이 넘어가면 요소 몇개를 빼먹거나 고쳐달라 해도 안 고치고 똑같은 코드를 뱉는 오류?를 보면 아직까지는 사람이 개입을 해야하긴 한다. 또한, 이 친구들은 최적화 따위 하지 않기 때문에 Central은 css가 500줄 남짓이지만 이번에 만든 Neoline의 css는 무려 1220줄이 넘는다.
41
r2
Gwangtori
42현생 이슈로 많이 밀린 것이 아쉽긴 하지만, 열심히 최적화해서 이 스킨을 완성하고자 한다.
r1
Gwangtori

(새 문서) 		43
r9
Gwangtori
44== config ==
45=== publicConfig.json ===
r10
Gwangtori
46||<-5><tablebordercolor=#696FFF><bgcolor=#696FFF><tablebgcolor=#fff,#1c1d1f><color=#fff> {{{+1 '''Neoline 스킨 변수'''}}} ||
r9
Gwangtori
47|| '''종류''' || '''변수 이름''' || '''기본값''' || '''사용 예시''' || '''추가 설명''' ||
r10
Gwangtori
48|| 메인 컬러 || skin.Neoline.main_color || '''{{{#!wiki style="display: inline-block; background: #996fff; border: 1px solid #000; border-radius: 10px; padding: 1px 7px 0 7px; color: #fff;" dark-style="border-color: #fff;"
49#996FFF}}}''' || "skin.Neoline.main_color": "#696FFF" || [* 크롬 테마 컬러와 엔진 내부의 브랜드 컬러로 사용된다.] ||
50|| 상단바 색상 || skin.Neoline.nav_color || '''{{{#!wiki style="display: inline-block; background: #996fff; border: 1px solid #000; border-radius: 10px; padding: 1px 7px 0 7px; color: #fff;" dark-style="border-color: #fff;"
51#996FFF}}}''' || "skin.Neoline.nav_color": "linear-gradient(90deg, #996FFF, #696FFF)" || [* 단색이 기본값이나 그라데이션 같은 문법도 사용 가능하다.] ||
52|| 서브 컬러 || skin.Neoline.sub_color || '''{{{#!wiki style="display: inline-block; background: #a783ff; border: 1px solid #000; border-radius: 10px; padding: 1px 7px 0 7px; color: #fff;" dark-style="border-color: #fff;"
53#A783FF}}}''' || "skin.Neoline.sub_color": "#7E83FF" || [* 상단바 아이템을 마우스 호버할 때 나타나는 색상과 마우스 드래그 했을 때 표시되는 색상이다.] ||
54||<|2> 이름공간 밑줄 색상 || skin.Neoline.ns_color ||<|2> '''{{{#!wiki style="display: inline-block; background: #a783ff40; border: 1px solid #000; border-radius: 10px; padding: 1px 7px 0 7px;" dark-style="border-color: #fff;"
r9
Gwangtori
55#A783FF40}}}'''
r10
Gwangtori
56[* 투명도가 포함되어 있는 헥스 코드이기 때문에 기본값으로는 다크모드 구분이 없다. 구버전 브라우저에서는 작동 안 할 수 있다.] || "skin.Neoline.ns_color": "#e7ddff" || [* 라이트모드일 때의 이름공간 밑줄 색상.] ||
57|| skin.Neoline.dark_ns_color || "skin.Neoline.dark_ns_color": "#532fa9" || [* 라이트모드일 때의 이름공간 밑줄 색상.] ||
58|| 상단바 로고 가로 길이 || skin.Neoline.logo_width || 75px || "skin.Neoline.logo_width": "75px" || [* 로고가 표시될 면적] ||
59|| 상단바 로고 이미지 세로 크기 || skin.Neoline.logo_size || auto || "skin.Neoline.logo_size": "20px" || [* svg면 자동 조정되나 png, jpg같은 일반 이미지는 따로 조정해줘야 한다.] ||
60|| 특수 기능 드롭다운 위치 변경 || skin.Neoline.dropdown_left || auto || "skin.Neoline.dropdown_left": "0" || [* 로고 길이가 짧은 경우 드롭다운이 오른쪽 정렬할 때 왼쪽이 잘리는 문제가 있는 경우만 0으로 사용할 것.] ||
61|| [사이드바 일정] 시작일 || skin.Neoline.banner_date_start || - || "2023-11-01" || [* 사이드바에 일정을 표시할 시작일 작성] ||
62|| [사이드바 일정] 종료일 || skin.Neoline.banner_date_end || - || "2023-11-01" || [* 사이드바에 일정을 표시할 종료일 작성] ||
63|| [사이드바 일정] 제목 || skin.Neoline.banner_date_title || - || "머찐 기념일" || [* 사이드바에 일정의 제목 입력] ||
64|| [사이드바 일정] 설명 || skin.Neoline.banner_date_content || - || "우와 머찌다" || [* 사이드바에 일정의 설명 입력] ||
65|| [사이드바 일정] 색상 || skin.Neoline.banner_date_color || 1 || "2" || [* 사이드바에 일정의 색상 선택. 1: 빨강 / 2: 노랑 / 3: 초록] ||
66|| [사이드바 일정] 링크 || skin.Neoline.banner_date_link || - || "/w/Neoline" || [* 사이드바에 일정을 클릭했을 때 넘어갈 링크 작성. 외부 링크 불가] ||
r9
Gwangtori
67
68=== stringConfig.json ===
r11
Gwangtori
69 * skin.neoline.footer_html
r9
Gwangtori
70 * footer_text보다 우선 적용하고 싶을 때 사용
r11
Gwangtori
71 * skin.neoline.sitenotice
r9
Gwangtori
72 * 위키 전체 공지보다 우선 적용
73 * 해당 스킨만 작동하는 공지를 적용하고 싶을 때도 가능
r11
Gwangtori
74 * skin.neoline.ad_top_html / skin.neoline.ad_side_html
r9
Gwangtori
75 * 문서 제목과 내용 사이 / 사이드바 목차 아래에 광고 적용 가능
76 * {{{nonce="{cspNonce}"}}}를 넣어야 정상 작동
77
r1
Gwangtori

(새 문서) 		78== [anchor(사용 위키)]사용 위키 ==
79> 순서는 적용된 순서대로 정렬합니다.
r6
Gwangtori
80 * [[https://daol.cc|다올위키]]
r1
Gwangtori

(새 문서) 		81 * [[https://testwiki.hyonsu.com|테스트위키]]
r5
Marth
82 * [[https://wiki.psec.dev|FloydNET Internal Wiki]][*기본]
r3
hyonsu
83 * [[https://adofaiwiki.com|코스모피디아]]
r8
Gwangtori
84 * [[https://hanbit.cc|한빛위키]]
85 * [[https://ssiat.wikive.cc|씨앗위키]]