고문서 서식 사용 설명서

이 샌드박스는 더이상 사용하실 수 없습니다.

후속 샌드박스로 이전해주시기 바랍니다.

샌드박스 2호기

샌드박스 3호기

새로운 샌드박스에 초안 페이지를 생성한 뒤, 이 페이지의 설정 → 페이지 소스에서 내용을 복사해 옮겨붙이시면 됩니다.
이전에 어려움이 있다면 포럼이나 대화방에서 운영진에게 문의하세요.


/*
    Powered on 2021/01/19 18:35:49
    [2021 Wikidot Theme]
    Created by wallowing
    Media Query edited by thd-glasses
    Header Image: https://pixabay.com/photos/a-straight-line-wood-pattern-1302812/
    CC BY-SA 3.0
*/
 
/* Header */
 
div#container-wrap {
    background: url(http://scpko.wikidot.com/local--files/theme:back-jan-fire/header) top left repeat-x;
}
 
#header h1 a span {
    font-size: 0px;
}
 
#header h1 a:before {
    content: "SCP 재단";
    color: #faf9f0;
    text-shadow: 3px 3px 5px #000;
}
 
#header h2 span {
    font-size:0px;
    padding: 4px;
}
 
#header h2:after {
    content: "기나긴 밤을 한 허리를 버혀내여";
    font-size: 13px;
    font-weight: 850;
    color: #ffffff;
    padding: 19px 0;
    text-shadow: 1px 1px 1px rgba(0,0,0,.8);
    white-space: pre;
}
 
#page-content {
  font-size: 0.9em;
}
 
/* blockquote */
 
blockquote {
    margin: 1;
    background: #ffffff;
}
 
blockquote p {
    padding: 1px;
    background: #ffffff;
    border-radius: 5px;
}
 
/* Small Mobile Media Query */
 @media (max-width: 385px) {
     #header {
         background-position: 5% 5.5em;
    }
     #header h1, #header h2 {
         margin-left: -webkit-calc(66px + 5%);
         margin-left: -moz-calc(66px + 5%);
         margin-left: calc(66px + 5%);
    }
}
/* Note Media Query */
 @media (min-width: 480px) and (max-width: 580px) {
     #header {
         background-position: 0.5em 4.5em;
         background-size: 66px 66px;
    }
     #header h1 a {
         font-size: 120%;
    }
     #header h1, #header h2 {
         margin-left: 80px;
    }
}
/* Mini Tablet Media Query */
 @media (min-width: 581px) and (max-width: 767px) {
     #header {
         background-position: 1em 4em;
         background-size: 77px 77px;
    }
     #header h1 a {
         font-size: 140%;
    }
     #header h1, #header h2 {
         margin-left: 93px;
    }
}
/* Tablet Media Query */
 @media (min-width: 768px) and (max-width: 979px) {
     #header {
         background-position: 1em 4em;
         background-size: 88px 88px;
    }
     #header h1 a {
         font-size: 160%;
    }
     #header h1, #header h2 {
         margin-left: 106px;
    }
}
ᅙᅳᆷ
조ᇰ ᅌᅥᆼ 져ᇰ ᅙᅳᆷ

이 문서는 고문서 서식 컴포넌트의 사용 설명서입니다. 이 컴포넌트를 이용하면 우횡서와 한문, 옛한글을 사용하는 고전 동아시아 문서를 모사할 수 있으며, 필요하다면 현대어 해석을 팝업 형태로 첨부할 수 있습니다.

사용법이 조금 복잡합니다. 아래 사용법을 잘 읽어주세요. order를 제외한 모든 인수들은 각기 선택적으로 사용할 수 있기 때문에 꼭 모든 것을 한번에 이해할 필요는 없습니다. 어렵다면 예시들을 따라해보시고, 잘 이해되지 않거나 오작동하는 부분은 thd-glassesthd-glasses에게 문의하세요.



1. 페이지 삽입하기

고문서 서식 컴포넌트는 모두 인클루드를 이용해 삽입합니다. 이하 설명에서 인클루드 파트 없이 제시되는 코드가 있다면 모두 이 파트에서 삽입한 인클루드 내부에 추가로 삽입해야 하는 코드들입니다. [[include ~]] 사이에 새 줄로 입력하면 순서 상관 없이 적용됩니다. 단락 끝마다 제시된 완전체 예시문을 참고하세요.

한 페이지를 가운데 정렬로 배치하려면, 다음 코드를 삽입하세요.

[[include :scpko:component:gomunseo-format
]]

두 페이지를 병렬로 배치하려면, 다음 코드를 삽입하세요. godisplay 는 두 페이지를 정해진 순서대로 정렬하면서 모바일 기기에선 병렬을 풀어줄 수 있도록 미리 설정된 flex 속성의 클래스입니다.

[[div class="godisplay"]]

[[include :scpko:component:gomunseo-format
|order=1
]]

[[include :scpko:component:gomunseo-format
|order=2
]]

[[/div]]

order는 삽입하는 페이지마다 순서대로 자연수를 입력하세요. 이는 여러 개의 godisplay 컨테이너에 걸쳐서도 이어집니다. 같은 숫자를 두 번 사용하지 마세요. 이후 파트에서 더 자세히 설명할 것입니다.

둘 이상의 페이지를 연속으로 배치한다면 여러 개의 godisplay 컨테이너에 두 페이지씩 나눠 넣어주세요. order를 정확히 입력했다면 하나의 컨테이너에 몰아넣어도 순서는 정상적으로 배치되지만, 페이지간 간격이나 마지막 페이지의 정렬 문제 등이 제대로 처리되지 않습니다.

만약 병렬 배치로 나열하던 페이지가 홀수 개로 끝났다면, 마지막 페이지만 혼자 가운데 정렬인 것보단 윗 페이지들의 배열에 맞춰서 오른쪽에 놓이는 것이 더 보기 좋겠죠. 이럴 땐 마지막 페이지를 다음 코드처럼 삽입하세요.

[[div class="godisplay single"]]

[[include :scpko:component:gomunseo-format
|order=n
]]

[[/div]]
~~~~

내부 코드에서 =float를 사용하기 때문에, 아래 요소들이 넘쳐들어오지 않도록 물결표 구분선을 사용합니다. n은 문서 내에 삽입된 모든 고문서 페이지 중에서 해당 페이지의 순서입니다. 5번째 고문서 페이지라면 5를 입력하세요. 이하 설명에서 order=n으로 기입된 경우는 따로 설명이 없어도 모두 이 방식을 따릅니다.




2. 순서와 팝업, 제목 설정하기

|popup=0/1
|order=n
|title=(직접 입력)

popup은 고문서 본문의 가로쓰기본과 현대어 해석을 자동으로 정렬해주는 주해 팝업창을 활성화시킬지 여부를 정하는 인수입니다. 기본값이 1(켬)이므로 popup 인수를 아예 선언하지 않으면 자동으로 주해 버튼이 삽입됩니다. 내용이 충분히 간단하거나 해석을 따로 입력하지 않아서 팝업창을 사용하지 않고 싶다면 popup=0으로 선언해주시면 됩니다. 각 페이지마다 따로 적용되므로 개별로 선택할 수 있습니다.

order는 앞서 설명드렸듯이 페이지의 순서를 선언하는 인수입니다. 이로써 영향을 받는 기능은 크게 셋인데, 하나는 godisplay 컨테이너 안에서의 정렬 순서를 결정하는 것, 하나는 popup으로 활성화된 주해 팝업 버튼에 순서별로 숫자를 입력하는 것, 마지막으로 각 주해 팝업창의 주소를 각 페이지에 연결해주는 것입니다. 두 페이지의 order 값을 동일하게 기입할 경우 두 페이지가 동일한 팝업창을 띄우는 오류가 발생하므로 반드시 순서에 따라서 각기 다른 값으로 입력해주세요.

title은 팝업창에 표시될 해당 페이지의 제목입니다. 본문 페이지상에는 표시되지 않으며, 팝업에서만 표시됩니다. 전적으로 선택 사항이며, 입력하지 않으면 아예 표시되지 않고 넘어갑니다. popup=1인 상태에서 이용하세요.




3-1. 주 텍스트 입력하기 (기본편)

|a1=
|a2=
|a3=
|a4=
 ⋮
|f13=
|f14=
|f15=

a1부터 f15까지의 인수는 페이지에 표시되는 6열 15행의 주 텍스트 칸 90개를 채울 내용을 입력합니다. 아무것도 입력하지 않으면 당연히 빈 페이지로 출력되고, 일부만 골라서 기입하면 그 칸에만 내용이 입력됩니다. 페이지마다 90칸을 다 채울 일이 더 드물 것입니다.

추천하는 사용 방법은 입력하고자 하는 텍스트를 15자 이하의 문장들로 나누어 a~f열에 각각 기입하는 것입니다. 중세국어에는 띄어쓰기가 존재하지 않았다는 점에 유의하세요.

아래 접기에 예시 삼아서 시조 한 편을 인용해보았습니다. orderpopup, title과 주 텍스트의 삽입 방법이 모두 사용되었습니다.




3-2. 주 텍스트 입력하기 (한자, 옛한글, 첨자, 볼드체 편)

한자와 옛한글의 입력 방법은 위와 똑같습니다. a1부터 f15까지 90개 칸 중 원하는 곳에 원하는 텍스트를 입력하면 됩니다. 한자는 cwTeXFangSong 폰트를, 옛한글은 나눔바른고딕 옛한글 폰트를 사용하고 있습니다.

옛한글 사용시 주의 사항이 몇가지 있습니다.

  • 당연하게도 위키닷에는 옛한글 입력기가 따로 없습니다. 옛한글은 다른 툴에서 입력한 뒤 복사해오셔야 합니다. 한글과컴퓨터 소프트웨어나 인터넷 옛한글 입력기 등을 사용하세요.
  • 중세 한국어를 입력하거나 인용해올 때 성조 기호가 포함된 경우 깨질 수 있습니다. 이는 해당 기호가 문자 왼편에 와야 하는데 프로그램적으로는 문자 오른편에 후행하여 결합되도록 만들어진 것이 컴포넌트 구조와 충돌하는 탓입니다. 성조를 입력하고 싶다면 가운데점(·)과 콜론(:) 기호로 대체해주시기 바라며, 이 경우에도 한 칸에 입력되는 문자수가 늘어서 정렬이 어그러진다는 점을 미리 알려드립니다. 가급적 성조 표기는 그냥 무시하고 제거하는 걸 추천드립니다.

중세 국어 사료들을 보면 한자 아래에 작게 한글 병음을 적어둔 것을 볼 수 있습니다. 이런 경우 아래첨자(,, ,,)를 이용하면 자동으로 이런 용례에 맞는 모습으로 적용됩니다. 그리고 주 텍스트 칸에 볼드체(** **)를 입력할 경우 자동으로 글자 크기가 늘어나 단락 제목에 어울리는 글자로 변합니다. 이 안내서 맨 위에 표지 삼아 걸어둔 훈민정음 페이지에서도 둘 모두를 확인할 수 있습니다.

아래 접기는 아까 예시와 같은 시조를 중세국어 버전으로 입력해본 예시입니다. 한자, 옛한글, 첨자의 적용 모습을 모두 확인해보실 수 있습니다.




4. 주 텍스트 해석본 입력하기

아시다시피 한문과 중세국어는 어렵습니다. 이건 당장 글을 써야 하는 작가들에게도 고난이지만, 독자들에겐 더더욱 심각한 문제입니다. 아무리 보기에 기깔나고 그럴싸한 중세국어 고문서를 만들어 들이민다고 해도 읽을 수 없다면 독자들에게 유의미한 정보를 전달할 수가 없습니다. 그래서 이 컴포넌트는 주해 팝업창에 현대어 해석을 입력할 수 있도록 만들어졌습니다.

|a=(a열 텍스트 해석)
|b=(b열 텍스트 해석)
 ⋮
|f=(f열 텍스트 해석)

드디어 한 줄을 한 줄 그대로 입력해도 되는 부분에 도달했네요. 숨통이 좀 트입니다. 이 부분은 더 복잡하게 설명할 것도 없기 때문에 시조 예시부터 바로 보여드리겠습니다.




5. 보조 텍스트 입력하기

고문서 페이지 예시들을 잘 보면 90개의 주 텍스트 칸 말고도 열 사이마다 좁은 공간이 벌려져있는 것이 보일 겁니다. 여기는 비워두면 정보량이 많고 낯선 중세국어 문서의 숨통을 터주는 역할을 하기도 하지만, 작은 글씨로 추가 사항을 기입할 수도 있습니다. 방법은 아래와 같습니다.

|comment1=(보조 텍스트 1 내용)
|comment10=(보조 텍스트 1 해석)
 ⋮
|comment6=(보조 텍스트 6 내용)
|comment60=(보조 텍스트 6 해석)

comment1부터 comment6까지 입력한 내용은 각각 페이지에 직접 표출되며, comment10부터 comment60까지 입력한 내용은 그 현대어 해석본으로 주해 팝업창에만 나타납니다. 둘은 각각 독립적이므로 한 쪽만 선택해서 사용해도 무방합니다.

이곳에는 옛한글 텍스트의 한문 버전을 넣는다거나, 편저자주와 같은 보조적인 텍스트를 따로 넣는 식으로 활용할 수 있습니다. 채우면 겉보기에 몹시 그럴싸해지는 효과가 있습니다. 단, 지나치면 공간이 너무 꽉 차보이거나 아예 포맷이 깨질 수도 있으니 적절히 활용합시다. 아래는 역시 태산가를 이용한 예시입니다.




6. 각주 입력하기

각주는 조금 복잡합니다. 다른 인수들과 달리 내가 어떤 칸에 몇번 각주를 삽입할지와 각주 내용을 각각 따로 입력해줘야 합니다. 이 둘은 꼭 세트로 입력해야 합니다. 예를 들어 a1 칸에 첫 번째 각주를 입력하고 싶다면 필요한 코드는 다음과 같습니다.

|a1foot=1
|a1note=(각주 1 내용 입력)

이렇게 입력하면 컴포넌트는 각각의 각주에 대해 두 가지 동작을 수행합니다. 우선 고문서 본 페이지의 지정된 칸에 실제 [[footnote]]를 마련하고 a1note의 내용을 입력합니다. 그러면 잘 아시다시피 하이퍼링크 걸린 작은 숫자 첨자와 문서 최하단의 각주 블록이 생기고, 숫자에 커서를 올리거나 터치하면 작은 호버링 창이 떠서 각주 내용을 읽을 수 있게 되죠. 클릭하면 각주 블록으로 이동시켜주고요.

다음은 좀 특이합니다. 주해 팝업창에서도 각주를 바로 읽을 수 있게 만들어주거든요. a1foot에 입력한 숫자가 마치 각주 기능처럼 해당 위치에 위첨자로 표시되고, a1note에 입력한 각주 내용은 팝업창 스크롤 맨 아래에 제공됩니다. 이렇게 해서 독자들은 주해 팝업창을 열든 닫든 수월하게 각주를 읽을 수 있게 됩니다.

각주를 여러개 넣고 싶다면 쌍을 이루는 인수들을 원하는 칸마다 넣으면 됩니다. 각주 번호는 페이지별이 아니라 문서 전체에 걸쳐 늘어나므로 그대로 이어서 늘려가세요. 예를 들어 첫 페이지의 b3 칸과 f15 칸, 둘째 페이지의 c4 칸에 각주를 넣고 싶다면 다음과 같은 코드를 쓸 수 있습니다.

[[include :scpko:component:gomunseo-format
|b3foot=1
|b3note=(각주 1 내용 입력)
|f15foot=2
|f15note=(각주 2 내용 입력)
]]

[[include :scpko:component:gomunseo-format
|c4foot=3
|c4note=(각주 3 내용 입력)
]]

자, 시조로 드는 예시도 이번이 마지막입니다. 각주 기능 쪽에 집중해서 볼 수 있게 이번엔 군더더기를 다시 싹 빼고 기본 텍스트에 각주만 붙여서 살펴보도록 하죠.








이제 고문서 서식 컴포넌트에 있는 기능을 모두 설명했습니다. 어떻게 써야 할지 감을 잡으셨다면 다행이지만, 실제 문서에 어떻게 적용될지 잘 모르겠다는 분들을 위해 좀 더 긴 예시를 준비해봤습니다. 훈민정음 언해의 서문 부분을 컴포넌트에 맞춰 작성해본건데요, 코드는 아래 접기에 있으니 참고하시면 좋겠습니다.


조ᇰ ᅌᅥᆼ 져ᇰ ᅙᅳᆷ
ᄂᆞᆫ글지ᅀᅳᆯ씨니御ᅌᅥᆼᄂᆞᆫ님금지ᅀᅳ샨그리라
은ᄀᆞᄅᆞ칠씨오民ᄋᆞᆫ百ᄇᆡᆨ셔ᇰ이오音ᅙᅳᆷ은소리니
져ᇰᅙᅳᆷ은百ᄇᆡᆨ셔ᇰᄀᆞᄅᆞ치시논正져ᇰᄒᆞᆫ소리라

國之語音異乎中國
ᄊᆞ 듀ᇰ
與文字不相流通
ᄍᆞᆼ ᄉᆞ ᄆᆞᆺ ᄒᆞᆯ ᄊᆡ
故愚民有所欲言
ᄎᆞ ᄇᆡᆨ 셔ᇰ5
호ᇙ
而終不得伸其情者多矣
ᄆᆞ ᄎᆞᆷ ᄠᅳ 6
ᄒᆞᇙ

予爲此憫然
ᄅᆞᆯ ᄒᆞ
新制二十八字
ᄍᆞᆼ ᄅᆞᆯ ᄆᆡᇰ ᄀᆞ
欲使人人易習
ᄅᆞᆷ ᄒᆡ ᅇᅧ ᄫᅵ
便於日用耳
ᄡᅮ 便 ᅙᅡᆫ
ᄒᆞ ᄒᆞᇙ ᄯᆞ 7


이 샌드박스는 더이상 사용하실 수 없습니다.

후속 샌드박스로 이전해주시기 바랍니다.

샌드박스 2호기

샌드박스 3호기

새로운 샌드박스에 초안 페이지를 생성한 뒤, 이 페이지의 설정 → 페이지 소스에서 내용을 복사해 옮겨붙이시면 됩니다.
이전에 어려움이 있다면 포럼이나 대화방에서 운영진에게 문의하세요.