틀토론:탭 편집하기

=== 내용 변수 글자 색 이슈 ===
{{완료된 토론 시작}}
내용 변수의 글자색이 #000으로 강제되어 다크 모드에서 내용이 전혀 보이지 않는 문제가 있습니다. 아마 탭 제목을 표시하기 위해 글자 색을 검정색으로 바꾸는 과정에서 발생한 문제점인 것 같네요.. --[[사용자:Misty 0821|'''<span style="font-family:'Ruthie', cursive;">Misty_0821</span>''']] ([[사용자토론:Misty 0821|토론]]) 2020년 1월 22일 (수) 01:41 (KST)
: 수정했습니다! --[[사용자:Pika|Pika]] ([[사용자토론:Pika|토론]]) 2020년 1월 22일 (수) 02:11 (KST)
::항상 감사드립니다 :D --[[사용자:Misty 0821|'''<span style="font-family:'Ruthie', cursive;">Misty_0821</span>''']] ([[사용자토론:Misty 0821|토론]]) 2020년 1월 22일 (수) 10:12 (KST)
{{완료된 토론 끝}}

=== 탭 디자인 변경 관련 논의 ===
{{완료된 토론 시작}}
[[주제:Vzrz48foc7ywsnzj]]의 대화를 옮겨 온 것입니다. 
{| class='wikitable mw-collapsible mw-collapsed' style='width:100%' 
! 사용자 
! 대화
|-
| [[사:Pika|Pika]]
|
[[틀:탭]]은 버튼 테두리를 유지하고, 테두리가 없는 틀을 따로 만드는 것이 좋겠다는 생각이 듭니다. 테두리가 없어지니 몇몇 문서는 '탭인지 아닌지'와 '버튼이 어디까지인지'가 모호해지는 문제가 있네요.
|-
| [[사:Text-Justify|Text-Justify]]
| 
저의 의도는 이곳의 탭 디자인이 다른 웹과 소프트웨어의 인터페이스와 어느 정도의 통일성을 갖고, 미관상으로도 부족하지 않은 모습을 갖추어야 한다는 것입니다.

사각형 테두리를 갖추었던 탭 디자인은 영역을 분명하게 드러내지만 고대비 조합이나 표에 인터페이스를 끼워넣은 것처럼 보입니다. 현재의 많은 웹 UI에서 탭 영역의 테두리 선을 그렇게 강조하는 경우는 많지 않습니다. 표의 형태를 보다 분명하게 드러내는 것도 시도해볼 수는 있겠지만, 실험적인 UI와 같은 모습이 전폭적으로 적용되지 않은 채 하나의 인터페이스에만 적용된다면 어울리지 않는다는 인상을 줍니다. 특히 열람자에게 탭 인터페이스가 위키에서 정보와 기능을 억지로 담아내는 용도로 자주 사용되었던 표의 연장선으로 받아들여지지 않도록 하고자 형태를 바꾼 의도도 있습니다.

그리고 선택된 탭을 나타내는 배경색이 버튼이 눌린 듯 특별색으로 처리된다는 점도 변경의 한 이유였습니다. 이에 대해서는 고대비 옵션이나 과거 OS UI에서 적용된 사례가 있기는 하지만, 현재를 기준으로 컴퓨터 브라우저의 탭 인터페이스는 물론 리버티 스킨의 최근 바뀜/토론 탭과도 정반대입니다. 이것이 버튼의 형태를 적용하고자 하는 의도였거나 편집상의 편의에 따른 것이었을 수도 있겠지만 사람들에게 특정한 용도에 있어 익숙한 인터페이스가 반대로 적용되는 것은 혼동을 줍니다.

다른 탭 인터페이스와 달리 고정된 위치 없이 내용 중간마다 들어가야 한다는 점은 저 역시도 고려할 사항이었습니다. 충분하지 않게 받아들여졌을 수 있겠지만, 저는 글씨의 굵기를 조정하고 상하단 여백을 소폭 늘리는 것으로 이를 반영했습니다. 추가로 선택되지 않은 탭의 글씨를 옅은 색으로 표시한다거나, 완전히 분리된 모양을 적용하는 등의 방법은 있을 것입니다. 안전한 길은 충분히 검증된 주도적인 대형 회사가 관리하거나 우수하게 평가된 디자인을 참고하는 것입니다.

다크 모드 대응과 같이 고려할 사항이 생기겠지만, 변경한 형태가 기존 이상으로 적절치 못하다는 분석이 많다면 초기에 적용된 모습대로 리버티 스킨의 최근 바뀜/최근 토론 탭 형태를 다시 가져와 적용하는 것은 어떨지 제안합니다. 저는 표와 같은 탭 디자인보다 초기의 형태가 혼동을 적게 주고 미관상 낫다고 생각합니다.
|-
| [[사:Text-Justify|Text-Justify]]
|
더불어 본문이 아닌 정보상자 틀에 탭을 사용하는 경우는 다른 사이트의 유사한 사례도 마땅치 않고, 이전 형태를 적용하더라도 독자가 인터페이스를 예상하기 힘든 크게 예외적인 위치에 놓여 적합하지 않은 활용 같다는 생각이 있습니다. 
|-
| [[사:Pika|Pika]]
| 
이렇게 장문의 답변을 남기시다니.. 깜짝 놀랐네요.

우선, [[틀:탭]] 수정에서 Text-Justify님이 의도하신 바는 어떤 것인지 잘 알겠습니다. 특히, 배경색 수정은 저도 동감합니다.

하지만, 테두리 선에는 약간 다른 의견입니다. 다른 앱이나 웹에서의 탭 버튼은 크기가 짧고 일정하지만, 리브레 위키에서의 탭 버튼은 크기가 가변적이고, 탭 개수가 적으면 탭이 엄청 길어집니다. 따라서 테두리가 있는 것이 좀 더 좋다는 생각이 듭니다.

추가적으로, 저는 틀:탭을 수정하여 적용한 틀만 사용하기 때문에, 편집 이전의 디자인은 잘 모릅니다. 최근 바뀜/최근 토론 형태인 줄 알았는데 그게 아니었나보네요.

정보상자에서의 사용에는 딱히 의견은 없습니다. 아마도 너무 길어지는 정보상자의 특성을 해결하기 위한 방책이겠지요. 영어 위키백과에서는 비슷한 틀을 절찬리 사용 중인 것 같기는 합니다. [[wikipedia:Seoul]]을 보시면 중간 쯤에 지도를 보여주기 위해 사용하고 있죠. 모양은 조금 다릅니다. (굳이 그렇게 많은 사진들을 정보상자에 넣을 필요가 있을지는 의문입니다.)
|-
| [[사:Liebesfreud|Liebesfreud]]
|
수정 이전의 디자인은 라이트/다크 모드와 상관없이 선택된 탭의 제목 배경이 더 불투명한 (회색에 가까운) 형태였습니다. 
|-
| [[사:Liebesfreud|Liebesfreud]]
|
탭 버튼 사이에만 구분선이 들어가면 괜찮을 것 같은데 어떻게 구현해야할지 모르겠네요.. 
|-
| [[사:Text-Justify|Text-Justify]]
|
초기 모습은 지금의 최근 바뀜/최근 토론 형태가 맞습니다. 조만간 기존 기반을 바탕으로 새 시안을 하나 공개해 보겠습니다. 
|-
| [[사:Text-Justify|Text-Justify]]
| 
[[:파일:스크린샷_2020-12-18_21.26.52.png|파일]] / [[미디어:스크린샷_2020-12-18_21.26.52.png|원본 크기]]

현재 기반에서 소폭 조정해, 다른 웹 사이트에서 사용하는 형태와 유사하도록 각 탭의 최대 폭을 제한하고 상하단 여백을 더해서 데스크탑 화면에서도 탭 기능이 쉽게 인식되도록 해봤습니다. 종전보다 밀도는 낮아집니다. 정보상자 내부와 같은 본문 이외의 사용처는 일반적으로 틀에서 여백 속성값을 추가해 사용하므로 이를 가지고 따로 대응할 수는 있겠습니다.

그런데 테두리와 다크 모드가 문제라면, 편하게 한다면 처음 형태의 최근 바뀜/최근 토론 탭으로 돌아가고 스타일은 틀 하위 CSS로 하는 대신 위키 자체 CSS로 다크 모드에 대응해도 되지 않을까요? 적어도 이전의 해당 모습은 최선이 아니라고 생각합니다.
|-
| [[사:Pika|Pika]]
| 
비활성 버튼에도 밑줄이 있는 건 꽤 좋은 생각이네요. 그런데 버튼하고 내용하고 틈이 크다는 것은 좀 흠이네요. 
|-
| [[사:Liebesfreud|Liebesfreud]]
| 
정확한 구조는 모르지만 버튼과 내용 사이의 틈 조절이 가능하다면 이 안으로도 충분할 것 같습니다. 
|-
| [[사:Text-Justify|Text-Justify]]
| 
서버 사정상 어떻게 적용하기에는 좀 미뤄져야 좋지 않을까 합니다. [[위키방:219642]]
|-
| [[사:Pika|Pika]]
| 
그렇네요. 내년까지는 기다려봐야겠습니다. 
|}

마지막으로 나온 시안에 조금 더 의견을 덧붙이자면, [[:분류:SHOW BY ROCK!!의 등장인물]] 소속 문서나 제가 작성한 일부 문서 ([[Magnolia]] 등)와 같이 틀 안에 탭을 넣은 경우가 있는데, 이 시안으로 바꾼 후에도 디자인이 크게 무너지지 않는지 확인하는 과정이 있었으면 좋겠습니다. 
--[[사:Liebesfreud|Liebesfreud]] <small>([[특:기여/Liebesfreud|기여]]∙[[사토:Liebesfreud|토론]])</small> 2021년 1월 16일 (토) 23:45 (KST)
: [[:파일:스크린샷 2021-01-17 오전 1.09.44.png|파일]] / [[미디어:스크린샷 2021-01-17 오전 1.09.44.png |원본 크기]] 이런 형태가 됩니다. --[[사용자:Text-Justify|Text-Justify]] ([[사용자토론:Text-Justify|토론]]) 2021년 1월 17일 (일) 01:18 (KST)
:: 다행이 많이 무너지진 않네요. 이전에 말씀드렸던 것처럼 상하 여백 조정이 가능하다면 찬성합니다. --[[사:Liebesfreud|Liebesfreud]] <small>([[특:기여/Liebesfreud|기여]]∙[[사토:Liebesfreud|토론]])</small> 2021년 1월 17일 (일) 15:44 (KST)

죄송하지만 시안에서 탭 디자인이 어떻게 바뀌었는지 잘 보이지 않습니다. 종전 디자인과의 비교 사진 같은 것을 만들어 주실 수 있습니까? --[[사용자:Jellanie|Jellanie]] ([[사용자토론:Jellanie|토론]]) 2021년 1월 17일 (일) 13:08 (KST)
: 버튼과 내용 상자 사이에 여백 추가, 비활성 버튼에 회색 라인 추가, 내용 상자 가장자리가 둥글어짐 정도로 요약할 수 있겠습니다. --[[사:Liebesfreud|Liebesfreud]] <small>([[특:기여/Liebesfreud|기여]]∙[[사토:Liebesfreud|토론]])</small> 2021년 1월 17일 (일) 15:44 (KST)
: 내용 상자 곡선은 당장 적용하기 미묘해서 일단 편집안에서는 제외하고 보셔도 됩니다. --[[사용자:Text-Justify|Text-Justify]] ([[사용자토론:Text-Justify|토론]]) 2021년 1월 17일 (일) 16:18 (KST)
:: 오, 좀 더 탭 같아졌군요. {{찬성}}하겠습니다. --[[사용자:Jellanie|Jellanie]] ([[사용자토론:Jellanie|토론]]) 2021년 1월 18일 (월) 10:28 (KST)

서버 상태 회복 소식에 따라 적용했습니다. --[[사용자:Text-Justify|Text-Justify]] ([[사용자토론:Text-Justify|토론]]) 2021년 1월 21일 (목) 00:08 (KST)
{{완료된 토론 끝}}

== 제목과 내용 사이의 여백 ==
{{완료된 토론 시작}}
탭 틀을 자주 쓰면서 느끼는 건데 제목과 내용 사이의 여백이 너무 넓은 것 같더군요! 가능하면 줄이거나 아예 없애는 편이 미관상으로나 공간 절약으로나 좋지 않을까 싶습니다. 다만 style.css 쪽을 손봐야 하니 원래 작성 의도에 어긋날까봐 조금 조심스럽네요! --[[사용자:Unter|Unter]] ([[사용자토론:Unter|토론]]) 2021년 8월 6일 (금) 23:19 (KST)
: 미관상으로는 충분한 여백이 확보되는 편이 더 좋다고 보고 있습니다. --[[사용자:Text-Justify|<span style="color: #606060; font-weight: 300; font-family: Helvetica Neue, Helvetica;">Text-Justify</span>]] ([[사용자토론:Text-Justify|메시지]]) 2021년 8월 7일 (토) 21:28 (KST)
:: 그렇군요! 저는 그렇게 생각하지 않아서 여백을 없애고 싶은데, 여백을 조정하는 변수를 쓸 수  있으면 좋겠습니다! 사실 지금도 리듬 게임 수록곡 문서에서 개별적으로 style.css를 수정해서 쓰는 형식으로 탭의 여백을 조절해서 쓰고 있는데, 아예 탭 틀 쪽에서 조절하는 편이 관리면과 사용면에서 편하지 않을까 합니다! 뭐 안 된다면 여백을 조정한 탭2를 만들어서 써야겠지만요! --[[사용자:Unter|Unter]] ([[사용자토론:Unter|토론]]) 2021년 8월 7일 (토) 21:47 (KST)
:: <code><nowiki>|버튼여백좁게 = y</nowiki> </code> 처럼 넣을 경우 여백이 없어지도록 해봤습니다. --[[사용자:Text-Justify|<span style="color: #606060; font-weight: 300; font-family: Helvetica Neue, Helvetica;">Text-Justify</span>]] ([[사용자토론:Text-Justify|메시지]]) 2021년 8월 7일 (토) 22:21 (KST)
::: 오… 기대하지 않았는데 수정해주셨군요. 감사합니다! 마음에 쏙 드네요. 별도로 정보상자용 탭을 만들고 있었는데 수고를 덜었습니다! --[[사용자:Unter|Unter]] ([[사용자토론:Unter|토론]]) 2021년 8월 14일 (토) 07:20 (KST)
{{완료된 토론 끝}}

== [[미디어위키:common.js]] 틀 구현 부분 js 스크립트 교체 제안 ==
{{완료된 토론 시작}}
<syntaxhighlight lang="javascript">
document.querySelectorAll('.libre .libre-tab').forEach(function (libretab) {
    var $libretab = $(libretab);
    var $btns = $libretab.children('.libre-tab-btns');
    var $content = $libretab.children('.libre-tab-main');
    $btns.children('.libre-tab-btn').click(function () {
        if (this.classList.contains('.libre-tab-btn-active')) return;
        $btns.children('.libre-tab-btn-active').removeClass('libre-tab-btn-active');
        this.classList.add('libre-tab-btn-active');

        var index = $(this).index();
        $content.children('.libre-tab-main-content-active').removeClass('libre-tab-main-content-active');
        $content.children('.libre-tab-main-content').eq(index).addClass('libre-tab-main-content-active');
    });
})
</syntaxhighlight>

이 틀을 중첩해서 사용할 경우 내부에서 버튼을 누르면 부모의 버튼이 작동되는 버그가 있습니다. 제가 새로 짠 위의 코드에 약간의 수정을 가하여 교체할 것을 제안합니다. <span style="font-family: Noto Serif KR; line-height: 2em; font-weight: bold;">[[사:하늘|{{색|g = linear-gradient(24deg, #0074ff, #dbecff);|蒼天}}]]</span> <small>[[사토:하늘|토론]] [[특수:기여/하늘|기여]]</small> 2022년 6월 27일 (월) 17:17 (KST)
: [[틀:탭]]을 중첩해 사용할 수 있도록 개선하는 것은 환영하지만 코드에 관해서는 관련 지식이 부족해 의견을 내기 어렵습니다. 기존에 사용한 탭 문법에 영향을 끼치지 않고 로드가 지나치게 커지지만 않으면 바꿔도 좋다는 입장입니다. --[[사:Liebesfreud|Liebesfreud]] <small>(<span class="plainlinks">[https://librewiki.net/wiki/특수:기록?user=Liebesfreud 공개 기록]</span>·[[사토:Liebesfreud|토론]])</small> 2022년 6월 29일 (수) 14:24 (KST)
:: 부족한 실력으로 코드를 만들어서 높은 로드율을 발생시킬 지를 알 수가 없습니다. 탭이 수 십개 사용되면 성능 저하가 발생할 수 있는데 5개 이상 탭을 사용한 사례를 한번도 본적은 없는 것 같습니다. 성능상 괜찮을 것 같습니다. <span style="font-family: Noto Serif KR; line-height: 2em; font-weight: bold;">[[사:하늘|{{색|g = linear-gradient(24deg, #0074ff, #dbecff);|蒼天}}]]</span> <small>[[사토:하늘|토론]] [[특수:기여/하늘|기여]]</small> 2022년 6월 29일 (수) 14:30 (KST)
::: 테스트를 위해 개인 위키를 운영하고 있는 것으로 알고 있는데 [[틀:탭]]을 사용한 같은 위키 문서를 기존 common.js를 사용했을 때와 celurean님이 제시하신 common.js를 적용했을 때의 구문 분석기 프로파일링 데이터를 확인할 수 있을까요? 편집 화면에서 "미리 보기"를 누른 후 최하단에 노출됩니다. --[[사:Liebesfreud|Liebesfreud]] <small>(<span class="plainlinks">[https://librewiki.net/wiki/특수:기록?user=Liebesfreud 공개 기록]</span>·[[사토:Liebesfreud|토론]])</small> 2022년 6월 29일 (수) 14:39 (KST)
:::: js도 데이터에 찍히나요? <span style="font-family: Noto Serif KR; line-height: 2em; font-weight: bold;">[[사:하늘|{{색|g = linear-gradient(24deg, #0074ff, #dbecff);|蒼天}}]]</span> <small>[[사토:하늘|토론]] [[특수:기여/하늘|기여]]</small> 2022년 6월 29일 (수) 14:40 (KST)
::::: [https://caeruleum.kro.kr/wiki/%EC%8B%A4%ED%97%98%EC%8B%A4 실험실] 여기에 코드를 넣어놨습니다. <span style="font-family: Noto Serif KR; line-height: 2em; font-weight: bold;">[[사:하늘|{{색|g = linear-gradient(24deg, #0074ff, #dbecff);|蒼天}}]]</span> <small>[[사토:하늘|토론]] [[특수:기여/하늘|기여]]</small> 2022년 6월 29일 (수) 14:41 (KST)

<table class="preview-limit-report wikitable"><tbody><tr><th>CPU 시간 사용</th><td>0.065초</td></tr><tr><th>실제 시간 사용</th><td>0.066초</td></tr><tr><th>전처리기가 방문한 노드 수</th><td>4,313/1,000,000</td></tr><tr><th>전개한 뒤 포함 크기</th><td>30,558/2,097,152 바이트</td></tr><tr><th>틀 인수 크기</th><td>4,224/2,097,152 바이트</td></tr><tr><th>최대 전개 깊이</th><td>5/40</td></tr><tr><th>부하 높은 파서 함수 수</th><td>0/100</td></tr><tr><th>Unstrip 재귀 깊이</th><td>0/20</td></tr><tr><th>Unstrip 확장 후 크기</th><td>29,678/5,000,000 바이트</td></tr></tbody></table>

<table class="preview-limit-report wikitable"><tbody><tr><th>CPU 시간 사용</th><td>0.065초</td></tr><tr><th>실제 시간 사용</th><td>0.066초</td></tr><tr><th>전처리기가 방문한 노드 수</th><td>4,313/1,000,000</td></tr><tr><th>전개한 뒤 포함 크기</th><td>30,448/2,097,152 바이트</td></tr><tr><th>틀 인수 크기</th><td>4,224/2,097,152 바이트</td></tr><tr><th>최대 전개 깊이</th><td>5/40</td></tr><tr><th>부하 높은 파서 함수 수</th><td>0/100</td></tr><tr><th>Unstrip 재귀 깊이</th><td>0/20</td></tr><tr><th>Unstrip 확장 후 크기</th><td>29,678/5,000,000 바이트</td></tr></tbody></table>

여기선 차이는 없는 듯 합니다. <span style="font-family: Noto Serif KR; line-height: 2em; font-weight: bold;">[[사:하늘|{{색|g = linear-gradient(24deg, #0074ff, #dbecff);|蒼天}}]]</span> <small>[[사토:하늘|토론]] [[특수:기여/하늘|기여]]</small> 2022년 6월 29일 (수) 14:48 (KST)
: 리브레 위키 내에서도 시간만 제외하면 (현재 조금 로딩이 지연되는 것 같습니다.) 대부분의 데이터가 비슷하게 나왔습니다. ([[특수:고유링크/1601840]]) 중첩된 틀이 잘 작동하는지만 확인하면 될 것 같습니다. --[[사:Liebesfreud|Liebesfreud]] <small>(<span class="plainlinks">[https://librewiki.net/wiki/특수:기록?user=Liebesfreud 공개 기록]</span>·[[사토:Liebesfreud|토론]])</small> 2022년 6월 29일 (수) 14:52 (KST)
:: 리브레위키에서 기존에 적용된 스크립트 때문에 작동을 테스트할 수 없습니다. 방법이 있을까요? <span style="font-family: Noto Serif KR; line-height: 2em; font-weight: bold;">[[사:하늘|{{색|g = linear-gradient(24deg, #0074ff, #dbecff);|蒼天}}]]</span> <small>[[사토:하늘|토론]] [[특수:기여/하늘|기여]]</small> 2022년 6월 29일 (수) 15:00 (KST)
::: [https://caeruleum.kro.kr/wiki/%EC%9D%BC%EB%B3%B8%EC%96%B4%EC%82%AC%EC%A0%84:%E5%A5%BD%E3%81%8D%E3%81%A0 잘 작동이 되는 것 같습니다.] <span style="font-family: Noto Serif KR; line-height: 2em; font-weight: bold;">[[사:하늘|{{색|g = linear-gradient(24deg, #0074ff, #dbecff);|蒼天}}]]</span> <small>[[사토:하늘|토론]] [[특수:기여/하늘|기여]]</small> 2022년 6월 29일 (수) 15:03 (KST)
: 해당 기능은 사용자 단에서 이루어지기 때문에 미디어위키의 렌더링 시간은 유의미한 차이가 없을 겁니다. --'''[[사:Zlzleking|<span style="color: #3399FF;">Zlzleking</span>]]''' <small>([[사토:zlzleking|대화]]<nowiki>|</nowiki>[[특수:기여/zlzleking|편집 이력]])</small> 2022년 7월 3일 (일) 16:56 (KST)

{{찬성}} 혹시 제가 놓친 부분이 있다면 안내 부탁드립니다. --[[사:Liebesfreud|Liebesfreud]] <small>(<span class="plainlinks">[https://librewiki.net/wiki/특수:기록?user=Liebesfreud 공개 기록]</span>·[[사토:Liebesfreud|토론]])</small> 2022년 6월 29일 (수) 15:05 (KST)
: 어.. 없는 것 같습니다. --<span style="font-family: Noto Serif KR; line-height: 2em; font-weight: bold;">[[사:하늘|{{색|g = linear-gradient(24deg, #0074ff, #dbecff);|蒼天}}]]</span> <small>[[사토:하늘|토론]] [[특수:기여/하늘|기여]]</small> 2022년 6월 29일 (수) 15:07 (KST)

7월 7일에 운영진 요청으로 코드 반영을 요청합니다. <span style="font-family: Noto Serif KR; line-height: 2em; font-weight: bold;">[[사:하늘|{{색|g = linear-gradient(24deg, #0074ff, #dbecff);|蒼天}}]]</span> <small>[[사토:하늘|토론]] [[특수:기여/하늘|기여]]</small> 2022년 7월 3일 (일) 20:25 (KST)
{{완료된 토론 끝}}