SCP 위키 사이트 개발일지 3

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

초창기 시절의 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에 대한 본격적인 도전을 시작했죠.

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

뷰포트

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

<meta name="viewport" content="width=device-width, initial-scale=1.0"/>

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

미디어 쿼리

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

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

@media 미디어타입 연산자 (속성: 값) { CSS 코드 }

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

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

@media (속성1: 값1) and (속성2: 값2) { CSS 코드 }

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

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

유동형 이미지

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

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

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

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

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

img { max-width: 100%; }

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

img { max-width: 100%; height: auto; }

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

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

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

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

1. Mobile site version [본문으로]
2. Wikidot: The Mobile Version [본문으로]
3. Re-thinking Breakpoints in Responsive Design [본문으로]