ⓒ Aelanna, Dr. Mackenzie's Sketchbook, 2011, CC BY-SA

SCP 재단의 표준 로고입니다. 

이 무지막지한 크기의 png 파일은 재단 본사의 디자인을 담당했던 아엘라나(Aelanna)의 작품입니다.

이 로고는 재단의 모토를 형상화 한 3가지 부분으로 나눌 수 있습니다^[각주:1].

첫째로, 내부의 세 방향에서 하나를 가리키는 화살표는 확보(Secure)를 뜻합니다.

둘째로, 화살표를 관통하는 굵은 원은 격리(Contain)를 뜻합니다.

셋째로, 로고 외곽을 둘러싸는 도형은 보호(Protect)를 뜻합니다.

기다리고 기다리던 엣씨판 1호가 발간되었습니다.

SCP 재단 뉴스레터를 표방하는 엣씨판은 다양한 사용자들이 참여하는 프로젝트로, 언제나 많은 분들의 참여를 바라고있습니다.

이번 뉴스레터에는 한국어 위키를 비롯한 SCP 재단에 관한 내외부적인 소식, 재단과 다른 커뮤니티간의 인터뷰, SCP 소개 등이 담겼습니다.

엣씨판 2호 제작 회의 역시 진행되고있으니, 참여를 원하시는 분은 본 티스토리 블로그, 네이버 블로그 등에 문의해주시면 감사하겠습니다.

번역: shfoakdls

자막: Dr Devan

원본: http://youtu.be/UBLIAasOfxk

만화와 애니메이션을 그리는 Coleman Surratt의 SCP-173에 관한 애니메이션입니다.

SCP 재단 중에서 거의 유일하다고 할 수 있는 애니메이션 팬 영상이며, 

이 동영상에 나오는 D계급 인원을 SCP - Containment Breach에서 오마주하기도 했습니다.

모바일 지원을 향한 몸부림 그러나...

초창기 시절의 SCP 재단은 그야말로 황무지나 다름없었습니다. 위키닷이라는 생소한 위키엔진에 대해서 잘 알고있던 사람이 없었고, 한국어 안내는 커녕 번역도 일일이 해내야했었던 시절이었습니다.

한국어 위키 사이트가 개설된 2012년도 이전부터 SCP 재단에 끊임없이 제기되어온 문제^{[각주:1][각주:2]}가 하나 있는데, 다름아닌 모바일 지원이었습니다. 그 당시만해도 모바일 홈페이지를 개발하여 새로이 만들어서, 기존 홈페이지로 연결하는 것이 대세였습니다. 그래서 사이트 개발 당시에 모바일 지원이라고하면 상당한 문제 중 하나였습니다.

하지만 위키닷에서는 그 어느것도 지원해주지 않았습니다. 위키닷에서 지원해주는 것은 오로지 CSS 편집 뿐. 그렇다고해서 CSS를 능수능란하게 다룰 수 있는 사람이 아니었던 저 역시 어떠한 수를 쓸 수 없었습니다. 자바스크립트까지는 아니더라도 HTML에 대해서 어느정도 편집이 되어야 가능한 일이 많았으니까요.

API

응용프로그램 프로그래밍 인터페이스_{Application Programming Interface}, 흔히 API로 줄여 부르는 것을 사용하여 모바일 홈페이지를 구축해보려는 노력도 있었습니다. 프로 계정에 한해서였지만, 사이트의 API 키를 위키닷에서 제공했으니까요.

결과만 말씀드리자면, 실패했습니다. 앞선 글에도 말했다시피 저는 프로그래밍을 할 줄 모르며, 프로그래밍을 한다고 해도 모바일 홈페이지의 서버 문제, 유지보수 문제 등 직면한 문제가 한두가지가 아니었기 때문입니다. 특히나 모바일에 전념할 수 있었던 환경이 제공되지 않았던 초창기에는 그런 여유가 더더욱 없었습니다.

사실을 말씀드리자면, 지금까지도 이걸 가지고 모바일 홈페이지를 만들 수 있을지는 미지수입니다.

모바일 어플리케이션

API를 어찌저찌하려는 시도를 포기하고나서 눈을 돌린 곳은 모바일 어플리케이션 부분이었습니다. 당시에는 웹앱 개념이 그리 널려있지 않아, 모바일 어플리케이션 하면 바로 마켓에서 다운받고 하는 그런 앱을 말하는 것이었습니다.

당연하겠지만 제가 안드로이드/iOS 등의 모바일 운영체제를 위한 프로그래밍이 가능할 리 없으므로, 외부에 부탁할 수 밖에 없었습니다. 그런 도중에 눈에 띈 것이 SCP 재단 데이터베이스를 가지고 만든 오프라인 앱이었습니다. 재단 콘텐츠를 한꺼번에 다운받아 인터넷에 연결하지 않아도 SCP를 볼 수 있는 앱이었죠.

사실 용량이 지나치게 많다는 것만 빼면 그리 나쁜 선택은 아니었다고 생각했습니다. 곧바로 개발자인 Mykhailo Radzievskyi에게 메일을 보내었고, 긍정적인 답변을 받고선 제가 필요한 부분을 번역해주었습니다. 그래서 생겨난 앱이 SCP 재단 DB kr nn5n 입니다.

개발 당시의 어플리케이션 로고

이 앱은 문제점이 하나 있었습니다. 다름아니라 실시간 업데이트가 되지 않아 업데이트는 개발자의 마음에 달린 것이라는 점이었습니다. 어느정도 필요한 부분만큼 수정을 해야하는데, 이 개발자는 외국인인데다 한국어 위키가 사소한 것까지 요구할 만큼의 관계도 되지 않았고, 그래서도 안되는 것이었습니다.

모바일을 향한 집념은 끊이지 않고

당연하다면 당연하겠지만, 어플리케이션 개발이 되고 나서도 계속해서 모바일 홈페이지에 매달렸습니다. 그러나 어떤 방법을 쓰더라도 매번 모바일 지원에 대해서는 요원하기만 했습니다.

변화가 일어난 것은 2013년 11월이었습니다. 위키닷 공식 블로그에 어떤 소식이 올라왔습니다. 부트스트랩을 적용하고, 이를 위해 HTML을 수정할 수 있다는 이야기였습니다. 이 소식 하나로 인해서 한국어 위키 사이트의 모바일 지원 계획은 다시 재개되었습니다.

반응형 웹 디자인에서 해답을 찾다

한국어 위키의 모바일 지원에 대한 키워드는 다름아닌 '반응형 웹 디자인_{Responsive Web Design}'이었습니다.

기존의 모바일 홈페이지가 PC 버전의 홈페이지를 각각 따로 구축하여 서로 연결하여 관리한다면, 반응형 웹 디자인은 그럴 필요 없이 하나의 HTML 문서만으로도 여러 디바이스에 대응하여 디자인이 바뀌는 것을 말합니다.

반응형 웹 디자인에 대해서 어느정도 개념만 알고 있었지만, 실질적으로 적용하기 위해서는 어느정도 CSS를 능숙하게 다루는 능력이 필요했습니다. 개인적으로 많은 자료를 통해서 CSS에 대한 본격적인 도전을 시작했죠.

반응형 웹 디자인에서 필요한 요소는 여러가지가 있지만, 대표적인 것은 뷰포트, 미디어 쿼리, 유동형 이미지라고 할 수 있습니다.

뷰포트

가장 기초적인 뷰포트는 아래와 같이 정의할 수 있습니다.

메타 태그를 추가함으로써 디바이스에서 홈페이지를 보는 시점을 각 디바이스의 가로폭으로 정의합니다. 위키닷은 메타 태그 편집 기능을 제공하고, 이 중에 viewport 값을 가진 name을 추가할 수 있었습니다.

미디어 쿼리

미디어 쿼리는 디바이스에서 보이는 폭과 높이를 정해서 특정 범위 내에서 나타나는 CSS를 다르게 나타내는 역할을 합니다.

쉽게 말해서 화면이 작아지거나 커질 때 마다 미디어 쿼리를 지정해두면 다른 CSS가 나타납니다. 손이 많이 가고 극단적인 경우지만, 모바일 기기에서 접속하면 아예 다른 테마로 바꿔버릴 수도 있습니다.

괄호₍₎ 안에 들어가는 속성에는 max-width, min-width, max-height, min-height 값 등이 들어갈 수 있고, 값에는 주로 픽셀 단위가 들어갑니다. 미디어 쿼리의 속성과 값을 정의하는 부분으로, 반응형 웹 디자인을 위해서는 가로폭의 최댓값과 최솟값을 지정해 연산자 and로 범위를 지정할 수 있습니다.

미디어타입은 표시될 미디어의 유형을 정하는 것입니다. 여기서는 전체에 적용되어야 하므로, 생략합니다.

중괄호_{} 안에 들어가는 선택자, 속성, 값은 해당 범위에 적용할 CSS 코드를 적용하면 됩니다. 따라서 미디어 쿼리는 미디어 쿼리의 중괄호와 CSS 코드의 중괄호,즉 두 개의 중괄호로 이루어져 있다는 사실에 유의한다면 코딩할 때에 실수를 줄일 수 있을 것입니다.

한국어 위키에 적용한 미디어 쿼리는 총 6개로, 각각 479px 이하, 480px~580px, 581px~767px, 768px~979px, 980px~1399px, 1400px 이상으로 범위를 정했습니다. 이는 패트릭 그래디_{Patrick Grady}의 스크린 경계치에 대한 글^[각주:3]을 참조하였습니다.

유동형 이미지

비단 이미지만이 해당되는 사항은 아니겠지만, 대표적인 경우가 이미지이기에 제목을 이렇게 정했습니다.

이미지는 매우 크지만, 화면이 작아지면 그만큼 이미지가 옆으로 튀어나가게 됩니다. 그렇다면 과연 그것이 올바른 방향일까요?

현재까지도 수많은 홈페이지의 텍스트, 표, 이미지, 광고, 비디오 등이 옆으로 삐져나오는 사이트가 많습니다. 반응형 웹 디자인에 있어서 가장 큰 적이라고 할 수 있는 부분이죠.

이렇듯 옆으로 튀어나가는 주요 항목에 대한 처리가 반응형 웹 디자인의 마무리단계라고 할 수 있습니다.

가장 대표적인 이미지 처리 방식은 다음과 같습니다.

이는 모든 이미지의 최댓값을 강제로 지정하여, 이미지가 스크린의 가로폭 이상으로 늘어나는 것을 방지합니다. 그러나 이렇게되면 이미지가 가로만 줄어들어서 세로로 길쭉하게 늘어날 가능성이 있습니다. 이를 방지하기 위해서는 CSS로 높이를 다시금 정의할 필요가 있습니다.

이렇게하면 이미지는 처리가 됩니다.

성공적인 모바일 지원, 하지만 또다른 문제

결과적으로 반응형 웹 디자인을 이용한 SCP 재단 한국어 위키의 모바일 지원은 성공했습니다. 심지어 태블릿과 와이드모니터까지 지원하는 훌륭한 홈페이지가 되었습니다.

하지만 그에 따른 문제점 역시 따라오게 되었죠.

위키닷의 유료 계정 문제

매년 10월 즈음이 되면 한국어 위키는 고민에 빠집니다. 왜냐하면 SCP 재단을 호스팅하는 위키닷의 유료 계정 만료 기간이 다가오기 때문이지요.

기본적으로 사이트의 관리자는 QAZ135(Acidfrog)님입니다. 초창기 SCP 재단이라는 사이트를 생성하고, 그 생성한 사이트의 안내를 번역하시는 등 기본 구조를 짜는 데 가장 많은 역할을 하신 분이라고해도 과언이 아닙니다.

그러나 현실적으로 위키닷 무료 계정으로는 도저히 재단을 운영할 수 없었습니다. 300MB라는 극히 적은 양의 용량은 1000개가 넘어갈 재단 콘텐츠에 맞지 않았으니까요.

2012년 사이트가 개설되고, 2013년 10월이 되었을 때 한국어 위키는 중대한 갈림길에 서게 됩니다.

2013년 당시 위키닷 계정 안내 페이지

현실적으로 위키 사이트를 운영하기 위해서는 기본계정이 아닌, 프로 라이트 계정이 필요합니다. 조금 과한 감이 있지만, 초창기 한국어 위키는 연 120 달러^[각주:1] 정도 가격의 프로 계정을 사용하고 있었죠.

이를 유지하기 위해서는 당연히 영리적 행위를 통해 수익을 얻었어야 했지만, 한국어 위키는 그러지 못했습니다. 첫째로는 개발자인 저(Devanos)는 사이트에 끼는 광고를 매우 싫어하기 때문이고, 두번째는 광고를 통해 영리적 목적의 수익을 내려는 것이 보이는 모 블로거 때문이었죠. 그래서 한국어 위키는 순수하게 관리자들의 기부제로 돌아갑니다.

2013년에는 서로 많은 일이 있었고 바빠지는 시기였습니다. 그래서인지 최고 관리자였던 QAZ135님이 본인의 관리 부족을 이유로 사임하시고, 이후 새 최고 관리자 투표를 통해 shfoakdls(노래마인)님이 새 최고 관리자가 되었습니다.

사이트를 이리저리 옮겨보면서 XE도 손대보고, 위키닷에도 블로그를 차려서 놔둘려고했는데, 역마살이라도 끼었는지 다시 위키닷을 떠나서 티스토리로 돌아오게 되는군요.

묵혀둔 블로그를 다시 꺼내게 된 이유에 대해서는 이 쪽을 참고해주시기 바랍니다.

티스토리 블로그를 운영했었던 제작년과는 달리 그동안 많은 일이 있었습니다. 재단은 어느샌가 디자인이 바뀌었고, 도메인도 공식으로 바꿈에 따라 SCP-KR이 SCP-KO로 바뀌게 되었습니다. 물론 그동안 저도 한국어 위키를 떠나있다가 다시 복귀했고요. 모든 일을 다 적기는 힘들겠지만, 가급적 빠짐없이 적어보도록 노력하겠습니다.

마지막으로, 사이트 디자인이 바뀌었습니다. 기존 사용하던 희망나눔 스킨은 유용했지만, 희망나눔 위젯 라이선스를 달 수 없어서 다른 스킨으로 교체했습니다.

좋은 스킨이 많고, 라이선스도 양호한게 많습니다. 근데 실제로 적용해보니 제 취향에 영 맞지 않더군요. 그래서 그냥 깔끔하게 티스토리 스킨 홈에 있는 Xenox 스킨을 사용하게 되었습니다.