Recent Forum Posts

최근 디스코드 등 각종 서비스에서 EN위키를 링크하면 명함처럼 잘 정리된 정보가 나오기 시작했습니다.
사용된 방법은 바로 위키닷에서 지원하는 <meta> 태그 등록으로, 웹페이지의 메타데이터(설명, 썸네일, 대표색상, SNS 링크)를 직접 작성해 넣을 수 있는 기능입니다. 겉보기에 편할 뿐만 아니라, 데이터가 풍부하게 제공되면 검색엔진 노출에서 유리하게 작용하기도 합니다.¹

사실은 본사 이전에 한위키 적용을 제안하려 했는데, 어쩌다 보니 늦어졌네요.
기술적인 부분이 안 궁금하시면 세 번째 것만 보셔도 됩니다.

▶ 일단 EN위키의 기재 현황을 먼저 살펴보겠습니다.

▶ 한위키 기재 현황입니다. (주제와 무관한 코드 생략)

▶ 등록 제안입니다. 처리 시 이 접기 속 내용을 따라주세요.

▷ 등록 제안입니다. 처리 시 이 접기 속 내용을 따라주세요.

각 사이트에서 다르게 출력되는 것과 위키닷의 기술적 한계²로 인해 적정값을 찾느라 고생 좀 했네요.

⚠️ 주의사항

하나라도 빠지면 의도한 대로 작동하지 않을 가능성이 높습니다.

메타 편집을 시작하기 전 기존에 있던 keywords, robots, language, description(대문에만 있음)은 삭제해주세요. 다른 건 지우시면 안 됩니다!

아래 순서대로 추가해주세요. 그래야 실제로 올바르게 등록됩니다.

등록할 땐 항상 '모든 페이지에 추가'를 눌러주세요.

<meta name="twitter:image:alt" content="SCP 재단 로고"/>
<!-- 트위터 사이트 카드에 쓰일 섬네일 설명입니다. -->
 
<meta name="twitter:image" content="https://scpko-pseudo.wdfiles.com/local--files/scp-eee-ko/opengraph.png"/>
<!-- 트위터 사이트 카드에 쓰일 섬네일입니다.
이건 임시 주소니 파일을 대문에 올리거나 한 뒤 그쪽 링크를 입력하세요.
(링크에 https, wdfiles가 들어가고 리다이렉트 없는 링크인지 확인하시고요)
og:image값과 일치시켜 주세요. -->
 
<meta name="twitter:site" content="@scp_ko"/>
<!-- 사이트의 트위터 계정명입니다. -->
 
<meta name="twitter:text:title" content="SCP 재단"/>
<!-- 트위터 사이트 카드의 제목입니다.
(위키닷의) 기술적 한계로 인해 문서명을 제목으로 지정할 수는 없었습니다.
og:site_name값과 일치시켜 주세요.  -->
 
<meta name="twitter:text:description" content="설명텍스트설명텍스트설명텍스트"/>
<!-- 트위터 사이트 카드의 설명입니다.
description값과 일치시켜 주세요. -->
 
<meta name="twitter:card" content="summary"/>
<!-- 트위터 사이트 카드 유형을 지정합니다. -->
 
<meta name="og:site_name" content="SCP 재단"/>
<!-- 디스코드 카드에서의 사이트명입니다.
twitter:text:title값과 일치시켜 주세요. -->
 
<meta name="og:locale" content="ko_KR"/>
<!-- 올바르게 정정한 언어값입니다. -->
 
<meta name="og:image" content="https://scpko-pseudo.wdfiles.com/local--files/scp-eee-ko/opengraph.png"/>
<!-- 사이트 섬네일 이미지입니다.
twitter:image값과 일치시켜 주세요. -->
 
<meta name="og:type" content="article"/>
<!-- 몇 차례 실험을 거친 결과, 이게 있어야 디스코드, 카톡 등에서 문서명이 제목으로 나옵니다. -->
 
<meta name="theme-color" content="#882244"/>
<!-- 사이트 대표색상입니다. 디스코드 카드 좌측 테두리에 입혀집니다. -->
 
<meta name="robots" content="index,follow"/>
<!-- 검색봇 접근 허용입니다. 기본값이고 이전과 달라지지 않았지만, 명시해두는 편이 나으니까요. -->
 
<meta name="description" content="설명텍스트설명텍스트설명텍스트"/>
<!-- 사이트 설명입니다.
twitter:text:description값과 일치시켜 주세요. -->

일단 위 내용을 반영하면 링크는 이렇게 카드 처리가 됩니다만,
역시 사이트 자체의 이미지에 영향을 주는 부분인만큼 내용 논의가 필요하겠죠?

The SCP Foundation's 'top-secret' archives, declassified for your enjoyment.

EN위키의 문구입니다. '탑시크릿'에서 불호를 느끼고 픽션 사이트인걸 강조하잔 의견도 있었지만, 결국 조금 조절해 최종 타협은 이렇게 되었네요.

Trang lưu trữ 'tuyệt mật' của Tổ Chức SCP Chi Nhánh Việt Nam. Nay đã được công khai cho bạn tìm tòi và khám phá.

VN위키 문구입니다. 앞 문장에 베트남 지부가 붙은 걸 제외하면 큰 차이는 없습니다.

대중의 격리된 상상력, 여러분의 즐거움을 위해 기밀 해제합니다.

EN 설명을 어레인지하고 이쪽의 표현을 인용해 만들어 본 문구인데, 탁월한 수준까진 아니어도 무난하지 않나 싶습니다.

(어반 판타지 창작 사이트라는 설명)

조금 심심할수도 있겠지만, 컨셉잡는단 느낌이 싫으시다면 직관적이고 좋을지도 모릅니다.

로고는 카톡에서 예쁘게 나오게끔 배경도 넣고 조금 조절했습니다. 한위키 로고를 써도 되겠지만 그럴 필요성까진 못 느끼겠네요.

사이트 메타데이터 등록 제안 편집자

Denevola, 27 Sep 2021 15:44

Denevola 20 Sep 2021 18:58
토론 Hidden / 페이지별 토론 » 현무암 테마

깊은우물 카논을 바탕으로 682를 재해석하여 화제가 된 작품, SCP-6820(미번역)을 통해 데뷔한 테마입니다.
블랙 하이라이터·반그림자에 이은 테마 프레임워크로, 자체적으로도 소소한 커스텀이 가능함은 물론 변종 테마도 곧 나올 것으로 보입니다.

편집자

Denevola, 20 Sep 2021 18:58

블랙 하이라이터 오류제보 받습니다!

Denevola 10 Aug 2021 07:07
토론 테스트 그룹 / 일반 » BHL 관련

며칠 전 블랙 하이라이터 테마가 대규모 업데이트를 했습니다.
디자인 자체와 UI 다양한 곳에 변화를 주었기에 호불호가 나뉘고 있는 상황인데, 가장 문제인 점은 이곳저곳에서 사소한 문제가 발생한단 겁니다.

지금까진 BHL 문서를 본사로부터의 원본 CSS + 한위키서만 필요한 글꼴, 버그픽스 형태로 만들어 문서에 include했지만, 개발자인 Woedenaz가 이번 업데이트를 진행하며 각 지부의 문제를 해결하고 아예 언어별 옵션 설정이 가능하게 해 뒀기에, 현재 한위키 BHL에서 발생하는 문제를 정리해 개발자에게 제보하려 합니다.

아래 목록을 한 번 확인하시고, 해당 사항이 없다면 링크와 증상, 스크린샷(선택)을 보내주세요.
자리를 크게 차지하지만 않으면 포럼 포스트, 대화방의 #군기시 채널 어디든 상관없습니다.

+ 제안 열기

+ 오류 열기

블랙 하이라이터 오류제보 받습니다! 편집자

Denevola, 10 Aug 2021 07:07

기술제안

Denevola 12 Jun 2021 07:54
토론 테스트 그룹 / 일반 » 기술제안

관리자와 기술지원 스태프분들은 필독, 다른 회원분들껜 투표를 부탁드립니다.

안녕하세요, 스태프는 아닌 회원 Denevola입니다.
오늘은, 코드 관리·테마 구조·사이드바·대문 정비 제안을 위해 포스트를 작성하게 되었습니다.

요즘들어 위키닷은 항상 불안정합니다. 가장 흔하게 일어나는 현상 중 하나는 바로 파일 로딩 실패인데, 단순히 본문의 사진 뿐 아니라 테마나 사이드바 아이콘도 다같이 깨지고 있습니다.

그리고 문득 이런 생각이 들더군요.

페이지 접속마다 받는 부담을 다른 서버가 처리하면 어떨까?

위키닷은 애초부터 웹자원 전달 효율을 최우선으로 하는 사이트가 아닙니다. 첨부파일이나 코드를 수정해도 즉각적으로 반영되지 않죠. 만약 테마 관련 리소스를 타 시스템에서 관리하고 그 내용물을 호스팅하는 데 외부 서버를 사용하면 관리도 편해지고, 위키닷의 부담도 줄고, 속도도 빨라질 겁니다.

나중에서야 안 사실이지만 이런 방식을 사용하는 사이트는 이미 있었습니다.

SCP-CN: 중국 본토에서 로딩 속도가 느려 테마를 외부 서버에서 가져옵니다.
SCP-INT, DE를 비롯한 일부 위키: 아예 한 테마 베이스를 똑같이 사용합니다.
블랙 하이라이터: 규모와 복잡성이 크다보니 개발이 GitHub에서 이루어집니다.
눈누: 제가 제안하려는 것과 거의 동일한 구조입니다.
EN 깃허브 / INT / JP / CN / CS

아래의 접기는 각각 세 개씩입니다. 일반 회원분들은 개요, 제안만 읽으셔도 좋고, 적용 방법이 궁금하면 세번째의 적용법도 읽어주세요.

+ PART 1. 한위키 공식 GitHub

- PART 1. 한위키 공식 GitHub

SCP 재단은 창작(글쓰기) 커뮤니티 치고 웹 관련 기술을 접할 일이 많습니다. 문서의 사소한 꾸미기부터 테마, 컴포넌트, 대화방 봇이나 자동백업도구까지 다양하죠. 일부 요소의 쾌적한 관리를 위해 GitHub를 제안합니다.

https://github.com/scpko

기본적인 틀은 다 짰고, 운영진분들의 계정을 초대하기만 하면 됩니다.

사용하려는 서버는, GitHub의 소스코드를 웹상에서 호스팅해 주는 CDN인 jsDelivr입니다. 완전히 무료이며 전세계 엣지를 지원하고(국내에선 인천 서버가 잡힙니다), 2012년부터 다양한 실 서비스에서 사용되었습니다.
빠른 서버의 이점을 최대한 활용하고자 한다면, 위키의 페이지를 접속할 때마다 로딩되는 시그마-9, 다수의 작품에서 쓰이는 정보모듈의 CSS(info:style), 다중접기(colmod)에서 사용되는 CSS(colstyle) 등은 이곳에서 관리할 가치가 있다고 봅니다. 스태프만 수정할 수 있으며, 그리 자주 고칠 필요가 없는 페이지들이니까요.

두번째 사용처는 바로 글꼴입니다. CORS 문제로 인해 위키에 업로드 된 모든 글꼴은 첨부파일이 아니라 base64로 인코딩되어 있어, 로딩 속도가 느리고 용량이 큽니다. 단순히 파일을 깃허브에 업로드하는 것만으로도 문제 해결이지만, 한 가지 과정을 더 거치려 합니다. 구글 폰트는 일반 웹폰트보다 빠른 속도를 보이는데, 이는 서버가 탄탄한 것도 있겠지만, 자주 쓰이는 글자를 분석해 글꼴 하나를 빈도별 여러 파일로 잔뜩 쪼갠 뒤 페이지에서 사용된 글자에 해당하는 글꼴만 불러오는 최적화 덕입니다. 이 방식으로 정리하는데 시간은 좀 걸리겠지만, 어떤 근사한 분께서 해당 조합으로 글꼴을 조각내는 도구를 만들어주신 덕에 비교적 수월할 것이고, 결과적으로는 글꼴 대부분의 렉과 로딩 시간이 감소하여 긍정적인 효과를 보게될 겁니다.

<은글꼴 플레이스홀더>
그 외에도 대화방의 브라단 파서 소스 코드를 백업하는 목적으로도 사용할 수 있겠습니다.

+ 제안

+ 적용법

+ PART 2. 테마

+ 제안

- 제안

기능상 큰 차이는 없었기 때문에 저 사실 자체가 중요한 건 아니고, 제가 확인받고자 하는 것은 현 테마와 비교하여 추가된 사항들에 관해서입니다.

EN의 업데이트
- 코드에 작성 규칙이 적용되어 겉보기에 말끔해짐.

모바일 사이드바를 끝까지 내린 뒤 계속 드래그하면 뒷내용(본문)도 스크롤되는 현상 제거
라이선스 및 인용표기용 CSS, 성인 콘텐츠 경고문 CSS	둘 다 한위키에는 없는 것들인데, 나중에 번역이나 관련 추가대응을 할 때도 편할 것이고, 다른 곳에도 영향을 주지 않아 그냥 놔두었습니다.

제가 적용한 수정 사항
- W3C 표준 CSS 레벨 3 + SVG 검사에 맞추어 오류사항 제거.

나눔고딕, 나눔고딕코딩을 따로 불러오는 대신 요청 하나로 통합, 나눔고딕 가중치 800 제거	(아직 미반영) 나눔고딕과 나눔고딕코딩의 외형적 차이가 미미한 탓에, 작품에서 고정폭 글꼴이 일종의 장치로 사용될 경우 체감하기 어렵습니다. XCninety님께서 D2Coding을 기본 고정폭 글꼴로 제안하신 적이 있었는데, 아까 PART 1에서 설명한 글꼴 최적화를 거치면 실사용 가능한 수준이 될 듯 합니다. 이 문제도 관련 의견 부탁드립니다.
`@viewport` 등 오래전 지원 종료된 CSS 제거
헤더 배경 이미지 교체	자세히는 모르겠으나, 한위키만 배경 이미지가 깨져있습니다. 임의로 이미지를 압축한 결과로 보입니다.
구형 브라우저 지원 코드 제거	`border-radius` 등이 실험적으로만 작동하는, 2010년 전후의 브라우저입니다.
사이드바 블록에서 맨 처음으로 오는 제목 위 여백 제거	이런 사항은 크게 중요하지 않을 수도 있지만, 이 전체 작업을 시작하게 된 계기 중 하나가 '외관 면에선 완전한' 사이트를 이루어내자는 생각이었습니다.
검색 바와 검색 버튼에 본문 글꼴값 똑같이 적용	현재는 (본사와 달리) 검색 바와 검색 버튼의 높이가 다릅니다.
모바일 사이드바를 닫을 시 테두리가 없어져 내용물이 좌측 상단으로 1px 가량 움직이는 현상 제거	잘 모르시겠다면, 모바일 사이드바를 응시하면서 닫아보세요.
Nested topbar가 태블릿 너비의 화면에서 메뉴와 떨어지지 않도록 수정

black.png 관련 코드 중복 제거

`logo_white.png` 제거	페이지 구조상 사이드바가 본문보다 먼저 나오기에, 페이지에서 맨 처음으로 나오는 이미지가 섬네일이 되는 방식입니다.³ PART 5에서 제안할, 섬네일 링크 메타태그로 대체하려 합니다.
사이드바 항목 아이콘 SVG로 교체	용량 차이는 몇 바이트 이내, 호환성 문제는 전무합니다.
'ㅇㅇ' 항목과 '한국어 ㅇㅇ' 항목 표기 문제	..그리고 스레드는 끝났습니다. 제안해주신 것은 '이야기 EN \| 이야기 KO' 형식이었으나, 반복되어서 헷갈리기도 하고 '작가 페이지 KO'는 글자 수가 안 맞아서 다음 줄로 넘어가더군요.
[SCP 자료] 분류에서 'SCP 인터내셔널' 항목을 맨 첫번째에서 마지막으로 이동	이야기 EN/KO, 카논 EN/KO 항목 등을 인터내셔널 페이지가 아우르는 것도 아니고, 번역/창작 콘텐츠 이후에 '기타'의 느낌으로 타자부 허브를 보여주는 게 낫겠다고 생각했습니다.
'기여하기' 항목을 [사이트] 분류에서 [새 기여자 정보]의 맨 마지막으로 이동	사이드바의 [사이트] 분류에는 랜덤이나 평점, 내역과 같은 위키의 기능적인 부분들이 자리하고 있는데, 기여하기 문서는 페이지 생성창을 제외하면 신입을 위한 작품 범주 설명에 가깝습니다.
회원 안내, 관리, SNS 블록에 직접 `background-color`를 지정하는 대신 각각 guide, resources, media 클래스 부여	본사에서 적용된 사항이고, 이미 class를 이용한 테마가 있습니다.
CC BY-SA 버튼도 사이드 블록 내부에 위치	아래 인터위키도 있는데 혼자 분리된 느낌도 주고 있습니다. 부여된 class는 `.copyright`입니다.
SNS 아이콘을 SVG로 교체, 깃허브 추가	깃허브 링크에 들어갈 것은 PART 1에서의 그것입니다. Dr_Grom이 제작한 INT계열 테마셋에 포함된 이미지들이며, 네이버는 저것 기반으로 직접 제작했습니다.

15세 이용가 팝업 제거	위키닷 오류로 인해 닫을 수 없는 경우가 있어 삭제하자는 의견이 나온 적 있습니다. 아이콘 자체도 눈에 띄거나 직관적이지 않아 제거하는 편이 낫겠습니다.
'기밀입니다' 텍스트 행간 조절	너무 가까워서 답답해보입니다. 한글은 영문 글꼴보다 두께가 얇아 눈에 덜 띄는 점도 있습니다.
`.content-panel`에 좌우 여백 추가	모바일에선 모서리에 너무 가까워져 미관상 좋지 못합니다.
`.content-panel`에 단어별 자동 줄바꿈 추가	기기 너비에 따라 문구가 잘려 어색해보입니다.
사이트 섬네일로 기능하는 이미지 제거	페이지에서 맨 처음으로 나오는 이미지가 섬네일이 되는 방식입니다. PART 5에서 제안할, 섬네일 링크 메타태그로 대체하려 합니다. 꼭 이 사유가 아니더라도 사이드바의 것과 중복이었습니다.
로그인 오류 메시지	본사의 것은 디자인을 덜 해치는 형태이며 조금 더 친절하게 설명하고, 로그인 된 사용자에겐 아예 메시지가 보이지 않습니다. 눈에 띄어야 하니 디자인 변경은 어렵다 해도, 경우에 따라 출력하는 건 나쁘지 않을 듯 합니다. (+번외: 한위키 가로줄은 저것보다 단순하게 생긴 구버전이기에 새 것으로 바꾸어주었습니다.)
특집-KO 작품에서 '번역가: N/A' 문구 제거	N/A가 남은 이유는 번역가 항목을 지울 수 없기 때문이기에, SCP 베이스, 이야기 베이스에 span 처리 후 대문에서 `display: none;` 하여 없앴습니다. 위 두 문서의 편집이 필요합니다.
정보 항목 하단 여백 추가	정보 블록과 뉴스 블록은 거의 똑같음에도, 정보 항목은 하단 여백이 없습니다.
단어 수정	탬플릿 → 템플릿 (오타) / 가이드 허브 → 안내 허브 (문서명 변경)
(아직 미적용) 정보 블록의 안내항목 작가/번역가 표기 제거	시간이 지남에 따라 개정되어 원 저자가 의미 없어진 경우도 있고, 작성자 닉네임을 아는 건 큰 의미가 없는 듯 합니다.
`.news-title` 제목 강조 CSS 정정	원래 있었는데 복사 실수로 오류가 생긴 것 같습니다.
뉴스 내용 업데이트	IRC, 정신자→밈 개정 등은 3년이 지났으며 이젠 중요하지 않은 정보 같습니다. / 맨 아래 항목은 현 최고 관리자가 shfoakdls님인 것으로 오인될 수 있습니다. / CSS 정책 등 새 규정이 생겼다느니, 이젠 15세 이용가라느니 그런 내용이 필요합니다.
방랑자의 도서관 웹폰트 링크 하나 제거	Adobe Typekit에서 불러오는 글꼴은 전혀 사용되지 않습니다.
테마 정보 '시그마' 병기 제거	시그마-9이 영어 병기가 필요한 단어는 아닌 것 같습니다. 대부분의 테마나 여기에도 우리말 표기만 있고요.
하단의 '댓글 보기' 버튼 제거	이 버튼은 기본 카테고리 템플릿에 붙어있어 여기서도 예외가 아닌데, 대문 스레드는 동결되었으며 크게 중요한 내용도 없고, 이전 포스트는 페이지 하단의 '토론하기'를 통해 볼 수 있으므로 제거했습니다.
CSS 블록 하나로 통합	위 과정을 모두 거치고 남은 코드를 한 블록 안에 넣고 깔끔하게 정렬<할 예정>했습니다.

잠수함 패치가 되어버리거나, 이후 다시 수정할 일을 줄이기 위해 최대한 빠트리지 않고 정리했습니다. 개인적인 생각이지만, 얼마나 적용되느냐의 차이일 뿐 이중에서 딱히 거부될 것은 없어보입니다.

다 따져본 다음 포럼에 글 남기기 번거로우시곘지만, 겉으로 드러나보이는 부분이고 + 로딩 속도를 줄이기 위함이니 다양한 의견을 부탁드립니다. 감사합니다.

+ 각주 보기

기술제안 편집자

Denevola, 12 Jun 2021 07:54

1)	한국어 위키의 공식 GitHub 그룹을 지정하고	(비고)
2)	자주 사용되는 메타적 구성요소(테마, 정보모듈, colmod 등)의 CSS 코드와 웹폰트를 저장소에서 관리·호스팅	ACS, 등급 바 등은 창작물에 가깝고 편집이 제한되지 않으므로 부적합합니다. BHL은 역자이신 XCninety님께서 별도로 관리하고 계시기에 제외했습니다.

제2021K기지

Explicit sandbox