퀴어플라이 미러사이트 소개

《QUEER, FLY》 (이하 퀴어플라이) 미러사이트를 소개합니다!

목적 #

이 사이트는 “모두가 읽을 수 있는 퀴어플라이"를 위해 만들어졌으며, 주소는 https://queer-fly.pages.dev입니다.

기존에도 퀴어플라이는 네이버 블로그에서 접할 수 있었습니다. 하지만, 네이버 블로그 특성상 UI가 불편하고 대체 텍스트 지원 등이 미흡해 접근성이 떨어진다는 느낌을 받았습니다.

이 사이트는 글을 읽는 분들의 접근성을 최우선으로 고려하여 운영될 예정입니다. 이를 위한 다양한 기능들을 지원함과 동시에, 기계번역(machine translation), 음성합성(text to speech; TTS) 기능이 원활히 작동할 수 있도록 웹 표준을 최대한 따르려 합니다.

메뉴 #

이 사이트의 메뉴는 다음과 같이 구성되어 있습니다.

홈페이지 #

로고를 클릭하면 이 사이트의 홈페이지로 이동합니다.

공지사항 #

QIS와 퀴어플라이와 관련된 공지사항을 모아놓은 공간입니다.

퀴어플라이 #

퀴어플라이를 읽는 곳입니다. PC화면에서는 화면 왼쪽에 목차가 표시되며, 모바일 화면에서는 화면 오른쪽 위 ... 버튼을 클릭하여 목차를 불러올 수 있습니다.

각 호는 https://queer-fly.pages.dev/docs/xxx-ho의 주소를 가지고 있으며 기여자들, 배포 소식, 목차를 확인할 수 있습니다.

최근 호에서 오래된 호의 순서로 배열되어 있으며 동일한 호 내에서는 퀴어플라이의 수록 순서를 따릅니다.

아래에서 설명할 랜덤 버튼을 통해 글을 둘러볼 수도 있고, 문서 맨 아래 메뉴를 통해 이전 글, 다음 글로 이동할 수 있습니다.

기여자들 #

퀴어플라이 기여자들의 기여 목록을 모아볼 수 있습니다. 퀴어플라이 기여자는 다음과 같이 구성되어 있습니다.

• 집필(author): 퀴어플라이에 글을 쓰신 분들의 목록입니다. 메뉴바에서 ‘기여자들-집필’을 클릭하거나 이 링크를 클릭하여 목록을 확인하실 수 있습니다. 각 인물의 이름을 클릭하면 어떤 글을 썼는 지 모아보실 수 있습니다.
• 편집(editor): 퀴어플라이의 편집장 목록입니다. 메뉴바에서 ‘기여자들-편집’을 클릭하거나 이 링크를 클릭하여 목록을 확인하실 수 있습니다. 각 인물의 이름을 클릭하면 편집을 맡았던 퀴어플라이들을 모아보실 수 있습니다.
• 도움(helper): 퀴어플라이에 도움을 준 사람들의 목록입니다. 여기서의 도움은 디자인, 홈페이지 운영 등 퀴어플라이 집필, 편집, 교열, 후원을 제외한 기여를 의미합니다. 메뉴바에서 ‘기여자들-도움’을 클릭하거나 이 링크를 클릭하여 목록을 확인하실 수 있습니다. 각 인물의 이름을 클릭하면 기여한 목록을 확인할 수 있습니다.
• 교열(reviewer): 퀴어플라이 글을 읽고 교열해주신 분들의 목록입니다. 메뉴바에서 ‘기여자들-교열’을 클릭하거나 이 링크를 클릭하여 목록을 확인하실 수 있습니다. 각 인물의 이름을 클릭하면 교열을 맡았던 퀴어플라이들을 모아보실 수 있습니다.
• 후원(supporter): 퀴어플라이가 운영될 수 있도록 후원해주신 분들의 목록입니다. 메뉴바에서 ‘기여자들-후원’을 클릭하거나 이 링크를 클릭하여 목록을 확인하실 수 있습니다. 각 인물의 이름을 클릭하면 후원해주셨던 퀴어플라이들을 모아보실 수 있습니다.

태그 #

상단 메뉴의 #태그를 클릭하시면 태그가 있는 글들을 모아볼 수 있습니다.

랜덤 #

상단 메뉴의 주사위 모양의 로고를 클릭하면 랜덤하게 선택된 퀴어플라이의 글을 읽으실 수 있습니다.

검색 #

상단 메뉴의 검색창을 활용해 퀴어플라이의 글들을 찾아 읽을 수 있습니다. Ctrl + /키로 활성화하고 방향키와 엔터키로 검색된 글로 이동할 수 있습니다.

Github #

이 사이트의 소스코드는 모두 공개되어 있으며, Github 로고를 클릭하면 사이트의 소스코드가 관리되고 있는 Github 저장소로 이동합니다¹. 사이트의 소스코드를 수정하면 Cloudflare Pages를 통해 자동으로 배포됩니다.

네이버 블로그 #

퀴어플라이 네이버 블로그로 이동합니다.

트위터 공유 #

현재 보고있는 게시물을 트위터에 공유할 수 있습니다. 주소를 직접 복사하는 것은 트위터 한글 URL 처리 문제로 권장하지 않습니다.

다크 모드 #

사이트는 기본적으로 사용자가 다크모드(dark mode)를 활성화한 경우 어두운 색상으로, 그렇지 않은 경우 밝은 색상으로 제공됩니다. 해/달 로고를 클릭하여 수동으로 전환할 수 있습니다. 이제 밤에도 퀴어플라이를 즐길 수 있습니다!

기능 #

마크다운 문법 #

본 사이트는 hugo를 통해 마크다운을 웹페이지로 변환하고 있습니다. 마크다운 문법, HTML 문법 등을 혼용하여 게시물을 작성할 수 있습니다.

내부 링크 #

대부분의 기여자, 게시물 등에는 내부 링크(internal link)가 달려있습니다. 클릭하면 항목으로 이동할 수 있습니다.

외부 미디어 인용 #

다음과 같은 외부 미디어 인용을 지원합니다.

유튜브 #

유튜브의 영상 인용을 지원합니다.

트위터 #

트위터의 트윗 인용을 지원합니다.

🌈<QUEER, FLY> 31호 '사고'가 블로그에 업로드되었습니다! 지금 블로그에서 확인해보세요!🌈https://t.co/WW6EN0n88l

— Queer In SNU (큐이즈) (@QueerInSNU) May 7, 2022

Gist 코드 #

Github Gist를 통한 코드 인용을 지원합니다.

기타 #

이 외에도, iframe을 사용하는 대부분의 외부 미디어를 인용할 수 있습니다.

Open Graph #

Open Graph 프로토콜을 활용해 페이지 외부 인용시 미리보기를 지원합니다.

참고: 미리보기 이미지는 파이썬 코드로 생성되고 있습니다.

사용자화 #

CSS, JavaScript를 활용한 사용자화(customization)를 지원합니다.

예를 들어, 퀴어플라이 31호 - 사고 - 사고의 영역에서는 카카오톡 대화를 다음과 같이 구현하였습니다.

<link rel="stylesheet" type="text/css" href="/css/message.css">
<div class="imessage kakao">
  <p class="from-them from-them-kakao">살ㄹ려주ㅕ</p>
  <p class="from-me from-me-kakao">왜? 일이 많아?</p>
  <p class="from-them from-them-kakao">오늘은 집에 가고 싶은데 잠들었다가는 스물네 시간 뒤에 깰 것 같아서 무서워…</p>
</div>

본문 내에서는 다음과 같이 변환됩니다.

hugo shortcodes를 활용한 사용자화 또한 가능합니다.

예를 들어, 다음과 같이 인용문을 작성할 수 있습니다.

{{% quote "원생" %}}
동방에서 마라샹궈 드실 분
{{% /quote %}}

{{% quote %}}
님 인생이나 마라드세요
{{% /quote %}}

본문 내에서는 다음과 같이 변환됩니다.

기여하기 #

• 홈페이지 운영에 기여하고 싶으신 분들은 dev.queerinsnu@gmail.com으로 연락주세요!
• 퀴어플라이에 참여하고 싶으신 분들은 queerinsnu@hotmail.com으로 연락주세요!
• 실례가 되지 않는다면 사이트 관리자에게 아이스크림 하나만 사주세요