미디어위키 + FCKeditor

위키 문법은 HTML을 많이 알지 않아도 웹 컨텐츠를 만들 수 있도록 간소화한 "대체 문법 모음" 이라고 할 수 있다.

예를 들면 목록을 만들때 쓰이는 HTML 구문인

<ul>

</ul>

이 코드를 몰라도

위키에서는 한 줄 처음을 * 로 시작하면 같은 효과를 낼 수 있다던가 하는 것들이다. 어떤 사람에게는 위키를 시작할때부터, 그리고 누군가에게는 위키를 쓰면 쓸 수록 이런 점이 꽤나 편리하다는 걸 알게 된다.

하지만 새로운 문법을 배운다는 것은 그 자체로 부담스럽게 자칫 느낄 수 있는 부분이다. 그 중 몇가지만 생각한대로 되지 않는다던가 하면 새 문법을 배우는 건 급격한 스트레스가 된다. 이를테면 미디어위키에서 코드 인용등에 쓰이는

...

가 리스트(*, #) 등과 잘 못 어울린다던가, 엔터치면 바로 아래줄로 가길 원하는데 아예 두 줄이 띄워지는(단락이 아예 나눠지는) 결과가 된다던지 하면 흠칫 하고 얼어붙는 사람도 많을 것이다.

물론 사용자가 직접 위키를 뜯어고칠 수 있는 사람이라면 그런 걸 직관적으로 바꿔놓을 수도 있고, 오래 쓰다보면 그런 부분을 해결하는 팁 들을 발견하기 마련이다. 하지만, 그래도 역시 위키 문법에 익숙해지기위해 HTML과 완전히 단절하는 것은 쉽지 않다. 또 문법에 너무 신경쓰다가 내용을 자칫 놓쳐버리는 경우가 생긴다면, 그건 원래 위키가 원하는 바가 아니다. 이럴때는 역시 위지윅(WYSIWYG, 사용자가 작성하는 대로 알아서 내부적으로 HTML코드로 변환해주는) 편집기가 유용하다. 위지윅 편집기를 붙이면 부가적으로 아주 유용한 점이 있는데, 바로 다른 사이트의 HTML을 그대로 복사해서 붙여넣을 수 있다는 것이다. 위지윅 편집기가 없다면 HTML이 아닌 텍스트만 복사되기 때문에 이미지나, 포맷팅 정보는 사라지게 된다.

그래서 미디어위키가 무조건, 계속 좀 더 잘되길 바라는 마음에서 미디어위키에 FCKeditor 를 붙이는 방법, 그리고 간단한 사용법을 설명하겠삼. 정말 간만에 매뉴얼. 사실 오래전부터 계속 쓴다 쓴다 해놓고 못 써왔다는.. -_- 우선 FCKeditor 가 뭔지 헷갈리는 분들을 위해 말씀드리면, 바로 여기 진보불로그에도 달려있는데,

이 그림처럼 네모난 텍스트 입력창에 달라붙어 이런 저런 효과를 낼 수 있게 하고 그걸 알아서 HTML로 변환해주는 프로그램입니다. 사람들은 내부적으로 어떤 일이 일어나는지 알 필요 없이 그냥 편집을 하면 됩니다.

1. FCKeditor?? 뭐가 달라지는건데

직접 설치를 하기 보단 누가 설치를 해주면 그걸 활용할 사람이 더 많겠죠. 바로 설치로 들어가는 것은 흥미를 잃을 것 같으니 FCKeditor 를 설치했을때와 하지 않았을때의 차이를 먼저 살펴봅시다.

위 그림은 지각생 위키의 한 부분입니다. "편집"을 클릭해서 편집모드로 들어가 보겠습니다.

먼저 FCKeditor 가 설치되기 전에 위키 편집화면.

그냥 텍스트 박스안에 위키 문법으로 코딩된 위키 텍스트가 그대로 나옵니다. 지각생은 미디어위키를 어느 정도 써봤으므로 위키 문법을 그대로 쓰는데 별 거부감이 없지만, 위키를 안써보고 위 그림을 본 분 중에는 이미 토가 나오는 분이 계실지도 모른다는 생각이 드네요. -_-

다음 그림은 FCKeditor 를 달고 편집모드로 들어갔을때의 모습입니다.

어떠세요, 할만하죠? 위키 문법이 그대로 드러나지 않고 최종 결과물과 비슷한 형태의 내용을 직접 수정할 수 있게 해 줍니다. "어, 이정도면 나도 위키 쓰겠는데?" 그런 분들 계시겠네요. 자, 그럼 한번 설치를 해보죠.

2. 설치

준비물 : (당연한 말이지만 -_-) 이미 설치된 미디어위키, FTP 접속 도구 혹은 Editplus 등의 "FTP 원격 편집/저장이 가능한 에디터", FTP 서버 접속 계정 정보와 권한.

대안 : 위 준비물 중 어느 하나도 직접 할 수 없다면 대신해 줄 사람에게 밥 사줄 돈

역시 당연한 말이지만 처음에는 몰라도 나중에는 꼭 직접 해보는 깁니다. 예?

아, 그리고 미디어위키는 1.10 이상의 버전이 필요합니다. 현재 최신 버전은 1.13 (얼마전에 나왔어요~)

설치 방법 개요는 다음과 같습니다.

확장기능 구하기 : http://mediawiki.fckeditor.net/
FCKeditor : http://www.fckeditor.net/
설치 방법
1. 위 주소에서 FCKeditor 확장기능을 다운로드한다.
2. extensions 디렉토리 아래에 둔다
3. FCKeditor 를 다운받는다. (확장기능 말고 에디터 자체)
4. 다운받은 FCKeditor 를 "FCKeditor 확장기능" 디렉토리 아래에 있는 fckeditor 디렉토리에 압축을 푼다
5. LocalSettings.php에 다음 한줄을 추가해 활성화 한다. 끝이다 :)
  
  require_once("$IP/extensions/FCKeditor/FCKeditor.php");

자, 지각생의 매뉴얼은 언제나 막 시작하는 사람을 주 대상으로 하므로 먼저 개념부터 설명드립니다.

그림을 작게 그릴껄..-_- 나중에 업뎃할 맘이 생기면 작게 하죠. FCKeditor 라는 것은 미디어위키와는 별개의 프로그램입니다. 이걸 미디어위키를 쓰다가 편집모드로 갈때 불러들이게끔 중간 다리 역할을 하는 것이 "미디어위키의 fckeditor 확장기능" 이에요. 미디어위키에다가 이 확장기능을 설치한 후 그 안에다가 FCKeditor를 다운받아 알맞게 풀어주면 작동하게 됩니다. 이제 그 과정을 하나씩 봅시다.

1) 확장기능 구하기

http://mediawiki.fckeditor.net/ 로 갑니다.

아래로 내려보면 "Download It!" 이라는 단락이 나옵니다. 여기서 살짝 주의하세요. 이걸 보는 분이 스스로 미디어위키를 설치할 수 있고, 어느정도 어려움을 스스로 헤쳐 나갈 수 있는 자신감이 있으면 좋지만, 그렇지 못한 분들은 제가 제시하는 대로 하는 편이 성공률이 높아질 거라고 생각합니다. 이걸 쓰고 있는 2008년 8월의 상황에서는요.

빨간 동그라미 친 두 개의 링크를 클릭합니다. "download as ..." 는 미디어위키 확장기능을 다운받는 건데, tar.gz, zip 모두 요즘 대부분의 압축 프로그램이 잘 처리하니까 뭐든 상관없습니다. 클릭해서 다운 받고, 압축을 풀어 놓습니다. 그리고 "FCKeditor integration guide" 로 들어가세요.

아래 목차에서 "Download the editor" 를 클릭합니다.

빨간 원을 친 링크를 클릭해 다음 화면까지 옵니다. 그리고는 첫번째 혹은 세번째 것을 클릭해서 "FCKeditor" 를 다운 받습니다.

그냥 한 줄 링크 몇개 주면 될 걸, 제가 생각해도 오바같긴 하네요. 그래도 뭐랄까 바로 링크 하나 띡 주면
물고기 잡는법을 알려주는게 아니라 그냥 물고기 잡아주는 것 같잖아요? 여튼 전 이런 방식을 좋아합니다.
이렇게 한번 해보면 앞으로 쓰일 일이 있을거에요
그리고 여기까지 오는 도중에서 만난 설명들을, 영어가 되는 분은 읽고 이해해뒀다가 나중에 응용할 수도 있을거고.. 변명 그만. 다시 갑시다 ^^

자, 이제 다운 받은 걸 압축을 풀고요, 아까 받은 "미디어위키 확장기능" 안의 "fckeditor" 라는 디렉토리 안에 놓습니다.
아까의 "확장기능" 압축을 풀면 extensions 라는 폴더가 생겨 있을 것이고, 안으로 들어가 보면 FCKeditor 라는 디렉토리가 달랑 들어있습니다.
다시 또 안으로 들어가면 이제야 뭔가 파일들이 좀 있는데 그중에 'fckeditor'라는 디렉토리(소문자입니다)가 있습니다.
바로 거기에 지금 막 다운 받은 "FCKeditor" 본체를 풀어 넣는 것입니다.

여기까지 됐으면 이제 서버에 올릴 차례입니다.
"FTP 접속 프로그램을 실행합니다. (파일질라 Filezilla 추천 : 검색해보시길)
서버에 접속하고, 디렉토리를 위키가 설치된 곳으로 이동합니다. 그리고 PC에 있는 "extensions"디렉토리를 끌어다 서버쪽으로 놓습니다.
서버쪽 파일 목록에서 extensions 디렉토리 안에 FCKeditor 라는 (대소문자 섞인) 디렉토리가 잘 복사됐는지 확인하세요.

이제 올린 FCKeditor 를 미디어위키가 사용하도록 활성화 시키면 설치는 끝납니다.
FTP 프로그램으로 다시 위키가 설치된 곳으로 오면 LocalSettings.php 라는 파일이 있습니다. 이걸 내려받아 편집기로 열고 다음 한 줄을 추가하세요.

require_once("$IP/extensions/FCKeditor/FCKeditor.php");

추가했으면 파일을 저장하고 다시 FTP 프로그램을 이용해 원래 있던 곳에 올립니다. 과감히 덮어쓰고, 이제 웹 브라우저를 열어 위키로 가보세요.
"편집" 링크를 클릭하면 평소보다 늦게 1초 정도 지나서 편집 화면이 뜰겁니다. FCKeditor와 함께.

3. 활용 팁

FCKeditor 혹은 다른 위지윅 에디터를 대부분 써보셨을테니 그 자체는 특별히 얘기할게 없고, 위키 문법과 몇가지 연관성을.

* 단락 구분하기
위키 문법을 그냥 쓸때는 단락 제목을 등호로 묶어주면 됐습니다. 등호를 연달아 많이 쓸수록 하위 단락이 됐습니다. 예를 들면
= 단락 =
== 하위 단락 ==
== 하위 단락 두번째 ==
=== 두번째 하위 단락의 하위 단락 ===
== 하위 단락 세번째 ==
= 두번째 단락 =
...

이걸 "미디어위키+fckeditor"에서는 각 단락의 제목을 써 준뒤 아래 그림처럼 "Format" 을 클릭해서 Heading 1 부터 6까지를 지정해주면됩니다.
그럼 그부분부터 아래가 자동으로 단락 구분이 됩니다.

* 내부 / 외부 링크하기
위키 문법으로는 대괄호 [, ] 로 묶어주면 외부 링크가 되고 두개로 [[, ]] 묶어주면 다른 내부 페이지에 대한 링크가 됩니다.
이것만으로도 충분히 간단할 수 있는데, FCKeditor 를 설치한 후에는 추가적인 이점이 있습니다.
링크를 걸려고 할때 미리 비슷한 이름의 페이지들을 검색해서 제공하는 기능입니다.

바로 위 그림처럼 창이 뜨는데 "Link"에 연결하고 싶은 페이지 이름을 쓰다보면 그 아래 창에 비슷한 이름의 페이지를 자체 검색해서 보여줍니다.
즉, 내가 본문에 추가하려던 링크가 사실 "미디어위키 설정" 이라는 페이지로 가는 것이었다면 "미디어위키"를 쳤을때 자동으로 프로그램이 찾아내서 제시한, 저 목록 두번째의 것을
그냥 클릭해서 "OK"를 누르면 링크가 걸린다는 것이죠. 이렇게 하면 나중에 제목을 잃어버린 페이지를 발견할 수도 있고 오타도 줄일 수 있고 페이지들을 잘 관리할 수도 있고 좋은 점이 많네요.

일	월	화	수	목	금	토
					1	2
3	4	5	6	7	8	9
10	11	12	13	14	15	16
17	18	19	20	21	22	23
24	25	26	27	28	29	30