안내서: 워크 스킨 만들기 FAQ

Archive FAQ > 안내서: 워크 스킨 만들기

여는 말

본 튜토리얼은 Archive of Our Own – AO3 (우리만의 아카이브)에 작품 페이지 스킨을 만들 수 있는 방법을 단계별로 안내합니다. 튜토리얼을 모두 따를 때 쯤이면 여러분은 CSS를 이용해 형식을 설정하고 자신만의 작품 스킨을 갖게 되며 원하는 작품에 그 스킨을 적용할 수 있게 됩니다.

본 튜토리얼은 다음을 전제로 가정합니다:

AO3에 작품을 등록한 과거 경험이 있습니다. 만약 이제껏 작품 등록을 해본 적 없으시다면, 작품 등록과 편집 FAQ 를 참고하시거나 지침서: 작품 등록하기의 각 단계를 따라해 보십시오.
CSS에 대한 기본 지식이 있습니다. CSS에 대한 간략한 소개가 필요하시다면, W3School의 CSS 지침서 로 기본을 배울 수 있습니다.
아카이브를 기본 스킨으로 접속하고 있습니다 (Archive 2.0). 만약 커스텀 된 스킨을 사용하고 계신다면, 지침서의 설명과 회원님의 화면 구성이 다를 수 있습니다.

워크 스킨이 무엇인지 확실치 않으시거나 기존의 스킨을 작품에 적용하고 싶으신 경우, 워크 스킨과 아카이브 인터페이스(화면구성) FAQ를 참고해 주십시오.

Create New Skin (새 스킨 만들기) 양식을 찾는 법

시작하기에 앞서, Skins (스킨들) 화면으로 찾아가야 합니다:

로그인 후 대시보드로 이동하기 위해선 "Hi, (회원님)!" 를 선택한하고 메뉴의 "My Dashboard" (내 대시보드)를 선택하거나, 프로필 이미지를 선택하십시오.
화면 옆 또는 모바일의 경우 맨 위에 있는 메뉴에 있는 "Skins" 를 선택하십시오.

그 후 My Site Skins (내 사이트 스킨들) 화면으로 이동되며, 그곳에서 회원님의 맞춤 스킨 목록과 회워님의 모든 맞춤 스킨과 공용 스킨을 편집할 수 있는 접속 버튼들을 보실 수 있습니다. 사이트 스킨과 작품 스킨의 차이를 알고 싶으신 경우, 스킨이란 무엇인가?를 참조해 주세요.

이번 지침서의 과정에서는 새 작품 스킨 만들것이니, "My Work Skins" (내 작품 스킨) 메뉴 선택한 후, "Create Work Skin" (작품 스킨 만들기)를 선택해 작품 스킨 만들기 양식 화면을 열어주세요.

새 작품 스킨 설정하기

CSS를 이용해 새 작품 스킨을 만들기 위해 필수적으로 입력해야 할 항목들은 Type (형식), Title (제목), 그리고 CSS 문항입니다. 그 외는 다 선택사항입니다만, 이 지침서에서는 모든 항목을 훑어보겠습니다.

모든 항목들은 제출한 이후에도 되돌아가 수정이 가능합니다 ( 작품 스킨 편집하기 를 참고해주세요).

Type (필수항목): 스킨 화면에서 "Create Work Skin" 버튼을 눌렀다면 "Work Skin" (작품 스킨)이 기본으로 선택 됩니다.
Title (필수항목): 이후에 만들 다른 스킨들과 구별하기 위해서 지금 만들려는 스킨에 개별적인 이름을 붙여주세요. 스킨 이름들은 독창적이어야 하며 저희는 회원명을 포함하는 방법을 추천합니다 (e.g. "Homestuck Skin (회원명)").
Description: 새 스킨은 무엇을 할 것인가요? 특별히 정해진 주제가 있나요? 공개 사이트 스킨 또는 공개 작품 스킨을 참고해 스킨 설명에 대한 예시를 볼 수 있습니다.
Upload a preview: 이 메뉴에서는 작업한 CSS 스타일로 만들어진 스킨의 화면캡쳐를 미리보기 용으로 등록할 수 있습니다. 제작한 작품 스킨을 사용하기 시작한 뒤 메뉴로 돌아와 추가할 수 있습니다.
Apply to make public: 이 항목은 더 이상 사용되지 않습니다. 개인 제작의 커스텀 스킨은 현재로서 공개되지 않으며, 이 칸에 체크해도 개인스킨은 다른이에게 공개되지 않습니다.
CSS: 새 작품 스킨 만들기 양식의 마지막 항목은 제작한 CSS를 입력하는 칸입니다. 다음 몇 개의 섹션에서, 작품의 새로운 스킨을 변경하는 CSS에 대해 설명해드리겠습니다.

상단에서 "Use Wizard" (마법사 사용하기)라는 버튼을 확인할 수 있습니다. 이 버튼은 Site Skin Wizard (사이트 스킨 마법사)로 연결되며, 아깝게도 사이트 스킨 제작시에만 이용이 가능합니다 (스킨 마법사란 무엇이죠?)

걱정하지 마세요—이 지침서를 따라하시면 금세 작품 스킨의 마법사가 되실겁니다!

CSS 사용하기

안전을 위해 AO3에서는 제한된 CSS의 코드와 집합만을 사용할 수 있습니다. 그 외의 코드들은 회원님이 작업 저장을 누른 이후 삭제됩니다.

CSS 필드 상단의 파란색 물음표 ?을 눌러서 다음의 사용가능한 CSS 코드 목록을 확인할 수 있습니다. 폰트, 컬러, URL주소, 그 외 기타 등등 대한 정보를 위해서는 스킨 제작시 어떤 CSS 코드와 태그를 사용할 수 있나요? 페이지를 참고해 주세요.

CSS 입력하기

이 항목에는 작품에 적용될 스타일을 정하는 CSS를 입력합니다. 자유롭게 자체적인 CSS 코드를 입력하시거나 다음 예시 태그를 사용하셔도 됩니다.

다음의 HTML을 가진 작품이라고 가정해 봅시다:

  
<p>빌리에게,</p>
<p>너에게 쓴 편지야. 부디 네가 <em>엄청</em> 좋아하길 바란다.</p>
<p>진심을 담아,</p>
<p>아델라이드</p>

다른 작품 스킨이 적용되지 않은 경우, 이상의 텍스트는 AO3의 기본 스타일 형식으로 보여집니다.

기본 스킨에 따른 예시의 텍스트: 산세리프 폰트, 검정색

만약 텍스트를 아래의 이미지처럼 손글씨 폰트로 구현하고 싶다면, CSS를 이용해서 직접 형식을 제작해야 합니다.

'코믹 산즈 MS' 폰트로 구현된 텍스트, 가는 검정 테두르기, 테와 문단 사이에 여백 존재. '아델라이드'는 약간 크고 붉은색. 단어 '엄청'은 밑줄 두개 포함.

첫째로, 텍스트에 가는 테를 둘러주고, 폰트를 바꾸고, 그 후 폰트 사이즈를 크게 합시다. 이러기 위해서는 다음의 코드를 작품 스킨의 CSS 항목에 입력해주세요::

  
#workskin .letter {
border: 1px solid;
padding: 15px;
font-size: 1.1em;
font-family: "Comic Sans MS", cursive, sans-serif;
}

그 다음으로, 사인("아델라이드")에 특별한 모습을 주기 위한 코드를 CSS 항목에 추가합시다. 다음의 CSS 코드를 입력하면 폰트 사이즈가 좀 더 커지고 사인을 빨간색으로 변경됩니다:

  
#workskin .signature {
font-size: 1.2em;
color: red;
}

마지막으로, 중요 표시된 단어(“엄청”)에 밑줄을 추가하기 위해서 최종 CSS 코드를 입력해주세요:

  
#workskin em {
border-bottom: 3px double;
}

당신의 CSS 항목은 이제 세 가지의 다른 스타일을 위한 CSS 코드들을 포함하고 있습니다:

  
#workskin .letter {
border: 1px solid;
padding: 15px;
font-size: 1.1em;
font-family: "Comic Sans MS", cursive, sans-serif;
}
#workskin .signature {
font-size: 1.2em;
color: red;
}
#workskin em {
border-bottom: 3px double;
}

다음의 W3 학교의 CSS 참고사항 페이지는 작품에 사용하기 유용한 CSS 코드들을 추천해줍니다.

또한 다양한 스타일 예시를 위해 공개된 작품 스킨들 페이지도 참고해 주세요.

주의: 사용하고 싶은 CSS 코드들 (e.g. .letter, .signature, 그리고 em 태그들)#workskin은 아이디 밑에 입력하셔야지만 선택한 작품에 적용됩니다: 요약 밑과 "Top" (Translation) 버튼 위에 모든 코드와 태그들. 만약 #workskin id 밑에 입력하는 것을 잊을 경우에는 전체 코드을 제출할 때 자동으로 저희가 입력합니다.

새 작품 스킨 저장하기

입력한 CSS태그들을 검토한 뒤 만족하셨으면 "Submit"(제출하기) 버튼을 선택해 만들어진 작품 스킨을 저장하세요. 직접 작품 각각에 스킨 적용을 선택하실 때까지는 작품에 적용되지 않습니다. (작품 스킨 적용하기 에서 짚고 넘어가겠습니다).

"제출하기"를 선택한 즉시 저희가 지원하지 않는 코드를 제거하고 모든 태그들이 #workskin id 아래에 입력되었는지를 확인합니다.

새 작품 스킨 편집하기

새 작품 스킨을 제출한 직후에는 코드를 검토할 수 있으며 "Edit" (편집) 버튼을 눌러 필요한 수정사항을 입력할 수 있습니다.

작품 스킨 적용하기

작품 스킨을 새로 만드셨습니다—이제 AO3에 등록된 어떤 본인 작품에든 스킨을 적용할 수 있습니다. 다음은 주의하실 점들 입니다:

하나의 작품에는 하나의 스킨만 적용할 수 있습니다.
하나의 스킨은 여러 개의 작품에 적용될 수 있습니다.
만약 스킨을 삭제하시면, 그 스킨이 적용되어있던 모든 작품에서 그 스킨의 스타일링이 사라집니다.
만약 작품이 공동 저자가 있을 경우에는 다른 공동 저자가 자신의 스킨을 그 작품에 적용할 수 있습니다.

어떤 작품에 새로운 포맷을 적용하고 싶을 경우엔 작품의 Edit Work (작품 편집하기) 페이지로 가십시오. 방법을 모를 경우엔 어떻게 작품을 편집하나요? 페이지를 참고해주세요.

작품 편집하기 페이지의 Associations (관련 사항들) 부분에서 "Select Work Skin" (작품 스킨 선택하기) 목록을 찾아 원하는 스킨을 고르세요 .

만약 제작한 작품 스킨의 CSS가 작품에 이미 내포된 코드들로 존재할 경우 (<p> 또는 <em> 등등의 태그들), 다음 단계를 넘기고 작품 저장과 검토하기 단계로 넘어가주세요. 예를 들어서 작품내의 모든 이탤릭 폰트 문장에 밑줄을 치고 싶을 경우, 다음의 CSS를 포함한 작품 스킨을 적용하면 이하 <em> 태그들로 표시된 문장에 자동으로 밑줄이 추가됩니다 :

  
#workskin em {
border-bottom: 3px double;
}

작품 내의 HTML에 CSS 선별코드 사용하기

만약 CSS 선별코드가 작품의 HTML과 일치하지 않다면, <div> 와 <span> 태그들, 분류들, 그리고 아이디를 작품 내의 마크업에 추가할 차례입니다. 작품 편집 페이지 내의 Work Text (작품 본문) 항목에서 작품의 마크업을 편집할 수 있습니다. "HTML" 버튼이 선택됐는지 확인해주세요.

만약 자체적인 CSS 코드를 자체 CSS 입력하기에 넣었다면, CSS 선별코드를 작품의 마크업에 추가해주세요. 그 외에는 이전의 예시를 이어가겠습니다.

이 예시에서는 다음의 마크업이 포함된 작품을 볼 수 있습니다:

  
<p>빌리에게,</p>
<p>너에게 쓴 편지야. 부디 네가 <em>엄청</em> 좋아하길 바란다.</p>
<p>진심을 담아,</p>
<p>아델라이드</p>

작품 스킨 예시의 세 스타일을 적용하기 위해서는 CSS 항목에 해당하는 HTML의 코드를 넣어줘야 합니다:

글자 형식을 적용하려면, 전체 문단을 작품 스킨에 언급한 .letter분류를 포함한 <div> 태그로 포장해주세요.
싸인의 형식을 적용하려면 작품 스킨의 .signature분류 코드를 마지막 문단 밑에 추가해주세요.
밑줄을 긋기 위해서는 작품 스킨의 em 선별 코드가 마크업 된 <em> 태그를 이미 활성화 하기 때문에 코드를 추가하지 않아도 됩니다.

수정된 마크업은 다음 모습이어야 합니다:

  
<div class="letter">
<p>빌리에게,</p>
<p>너에게 쓴 편지야. 부디 네가 <em>엄청</em> 좋아하길 바란다.</p>
<p>진심을 담아,</p>
<p class="signature">아델라이드</p>
</div>

작품 저장하기와 미리보기

"Preview" (미리보기) 버튼을 선택해 새롭게 꾸며진 작품을 등록 전 확인하거나, "Post Without Preview" (미리보기 없이 등록하기) 버튼을 선택해 곧바로 저장할 수 있습니다.

축하드립니다! 작품이 멋지게 꾸며졌습니다!

CSS 입력하기 와 CSS 코드와 작품 속 HTML 이용하기 의 예시를 따라하셨다면, 작품 폰트도 손글씨로 바뀌었을겁니다.

'Comic Sans MS' 폰트로 된 작품 텍스트, 검정 줄로 테두리, 그 사이에 여백있음. '아델라이드'는 살짝 크고 빨강색. '엄청'은 밑줄 두개.

만약 작품 스킨을 여러 개의 작품에 적용하고 싶다면, 어떻게 하면 여러 개의 작품을 한 번에 편집하나요? 페이지를 참고해 주세요. 반드시 각 작품의 HTML 항목에 작품 스킨의 CSS 코드 입력하기를 잊지 말아야 합니다.

작품 등록하기와 편집하기에 대한 더 많은 정보는 작품 등록과 편집 FAQ에서 찾으실 수 있습니다. 단계별로 따라하기 위해서는 튜토리얼: 작품 등록하기 페이지를 이용해 주세요.

제 질문에 대한 답이 여기에 없을 경우 어디에서 정보를 얻을 수 있나요?

웹사이트 스킨 및 퍼블릭 스킨을 등 스킨에 대한 더 많은 정보는 스킨 및 아카이브 인터페이스 FAQ페이지를 참조해 주세요. AO3에 대해 자주 묻는 질문에 대한 답변은 AO3 FAQ에서 찾으실 수 있습니다. 이용약관에 대한 질문은 이용약관 FAQ를 참조해 주세요. 확인된 문제점을 확인하시는 것도 권장합니다. 그 외의 도움이 필요할 경우, 지원 위원회에 문의해 주시기 바랍니다.

Archive of Our Own^beta