[도쿠위키] 이미지 처리하기

사용환경

  • 운영체제 : CentOS 5.5 Final
  • 커널버전 : Linux 2.6.18-194.26.1.el5 i686 GNU/Linux
  • 아파치버전 : httpd-2.2.3-43.el5.centos.3
  • PHP버전 : php-5.1.6-27.el5_5.3
  • 도쿠위키버전 : dokuwiki-2010-11-07 “Anteater

연관포스트

  1. [도쿠위키] 도쿠위키 설치
  2. [도쿠위키] 문서생성
  3. [도쿠위키] 연습용 위키생성 및 템플릿 변경
  4. [도쿠위키] 단계별 헤드라인
  5. [도쿠위키] 문자처리 및 리스트 사용
  6. [도쿠위키] 링크 만들기
  7. [도쿠위키] 네임스페이스의 이해

01. 시작하기 전에…

각종 보고서나 매뉴얼을 작성하다보면 글자만 주루륵 나열하는 것보다는 이미지가 들어가는 것이 아무래도 이해도면에서는 엄청난 차이가 납니다. 그래서 저도 블로그에 포스팅을 할 때 최대한 이미지를 많이 넣어서 이해를 높일 수 있도록 노력하고는 있습니다. 도쿠위키에 이미지를 넣는 법은 그다지 어렵진 않습니다. 만약에 html을 사용해본 경험이 있으시다면 어렵지 않게 이미지를 자유자재로 다룰 수 있을 것입니다.

02. 이미지 업로드 및 삽입

문서에 이미지를 넣기 위해서는 일단 업로드를 해야합니다. 물론 위키 내의 이미지말고 외부의 이미지도 문서에 넣을 수 있지만 왠만하면 위키 내의 이미지를 넣는 것이 안정적입니다. 아무래도 다른 서버의 이미지라면 언제 없어질지 모르기 때문입니다.

문서를 작성하는 페이지에서 액자모양의 버튼을 클릭하면 이미지나 파일들을 업로드할 수 있는 창이 켜집니다.

기본적으로 작성 중인 문서의 네임스페이스로 업로드를 하려고 합니다. 하지만 절대적인 것은 아니라서 미디어파일(이미지나 파일)은 자체적인 네임스페이스로 관리를 할 수 있습니다. 실질적으로 각 문서의 내용은 {INSTALL_PATH}/data/pages 디렉토리에 저장이되고, 문서가 아닌 미디어파일은 {INSTALL_PATH}/data/media 디렉토리에 보관됩니다. 저장되는 위치가 다르기 때문에 미디어파일만의 네임스페이스로 관리를 해도 무방합니다.

하지만, 아무래도 각 이미지나 파일들이 문서와 무관하게 위치하는 것이 아니기때문에 기본적으로 문서의 네임스페이스와 동일하게 위치하도록 업로드를 하는 것이 편합니다.

단일 파일업로드

하나의 파일만을 업로드하는 방법입니다. 딱히 방법이랄 것은 없고… 일반적인 블로그나 게시판에서 사용하는 방법과 동일합니다. 파일선택 버튼을 눌러서 나오는 창에서 업로드할 파일을 선택한 뒤에 업로드 버튼을 눌러주시면 됩니다.

만약에 미디어파일을 업로드할 때에 네임스페이스를 추가/변경하고 싶다면, 위 처럼 (선택 사항)에 : (콜론)으로 시작하는 네임스페이스 명을 넣어주면 됩니다. 위의 경우에는 :sample 네임스페이스의 하위인 bgimage라는 네임스페이스에 선택한 파일을 업로드하라는 것입니다. 파일명도 변경하고 싶다면 변경하시면 됩니다.

위 처럼 업로드가 성공했습니다. 문서에 삽입하기 위해서는 이미지를 클릭하면 됩니다.

이미지를 클릭하면 아래처럼 문서에 자동으로 이미지를 삽입하는 코드가 작성됩니다.

문서를 저장하면 이미지가 문서 내에 삽입됩니다. 하지만, 사이즈가 1920×1080이므로 문서에서 차지하는 크기가 너무 크군요… 사이즈가 조정이 되므로 걱정하지 않으셔도 됩니다. 뒤에서 설명하도록 하겠습니다.

다중 파일업로드

이제는 여러 개의 파일을 한꺼번에 업로드하는 것을 해보도록 하겠습니다. 미디어 파일을 업로드하는 창에서 아래 손가락으로 표시된 이미지를 클릭하면 아래처럼 다중파일을 업로드할 수 있는 플래시 업로더가 실행됩니다.

아래의 이미지를 보면, 네임스페이스를 입력하는 부분과 다수의 파일을 업로드할 수 있는 업로더가 실행됩니다.

업로더의 찾기버튼을 누르면, 여러 개의 파일을 올릴 수 있는 파일선택 창이 나옵니다. 해당 창에서 업로드할 파일들을 선택하면, 아래처럼 업로드할 파일들의 목록이 출력됩니다.

이제 목록이 출력되면 업로드할 준비가 되었습니다. 만약에 하위 네임스페이로 업로드를 하려면 네임스페이스 칸에 :bgimage2와 같은 하위 네임스페이스명을 넣어줍니다. 위의 그림에 출력된 네임스페이스 칸에는 :sample이 기본적으로 입력된 상태로 업로더가 실행되므로 하위 네임스페이스에 업로드를 하려면 :bgimage2라는 하위 네임스페이스명을 추가로 넣어주면 됩니다.

위 처럼 한 번에 업로드가 성공했습니다. 사실 매뉴얼과 같은 문서를 작성할 때는 abc_01.png, abc_02.png, … 와 같이 같은 파일명에 숫자만 다른 경우가 많으므로 이렇게 한 번에 업로드를 하고서, 문서 창에서 숫자만 조금씩 바꿔서 문서에 넣으면 편리하게 편집할 수 있습니다.

03. 이미지 크기조정

위 처럼 그냥 문서에 넣으면, 크기가 너무 커서 한 눈에 들어오지 않습니다. 그러므로 크기를 조정할 필요가 있습니다. 저의 경우에는 가로폭을 600을 기준으로 삼는 편입니다. 가로폭이 600pixel이 넘어버리면 한 눈에 들어오지도 않고 출력했을 시에도 A4용지에 적당하게 출력됩니다. 600pixel이 넘지 않으면 그냥 넣어둡니다.

{{<span style="color: #0000ff;"><strong>:sample:bgimage:</strong></span><strong><span style="color: #ff0000;">01660_necoast_1920x1080.jpg</span></strong>|}}

위의 위키문법은 가장 처음에 단일 업로더로 위키에 넣은 이미지의 코드입니다. 위의 코드에서 파란색으로 표시된 부분은 이미지가 저장된 네임스페이스의 경로입니다. 그리고 빨간색으로 표시된 부분은 이미지의 파일명입니다. 네임스페이스만 보면 저장경로를 확인할 수 있는데, 위의 이미지의 경우에는 {INSTALL_PATH}/data/media/sample/bgimage 디렉토리 내에 해당 파일이 저장되어 있습니다.

이제는 가로폭 600pixel을 기준으로 비율대로 축소하도록 하겠습니다. 파일명 뒤에 ?600을 추가로 입력해줍니다.

{{<span style="color: #0000ff;"><strong>:sample:bgimage:</strong></span><span style="color: #ff0000;"><strong>01660_necoast_1920x1080.jpg</strong></span><span style="color: #008000;"><strong>?600</strong></span>|}}

위에서 녹색으로 입력한 ?600부분이 가로폭 크기를 축소하는 코드입니다. 세로 사이즈는 가로폭과 비례로 줄어들게 됩니다. 실제로 저의 경우에는 가로폭만 조정하고 다른 크기는 조정할 일이 없더군요… 그래도 사용할 일이 있을지도 모르므로 알아보도록 하겠습니다.

{{<strong><span style="color: #0000ff;">:sample:bgimage</span>:</strong><span style="color: #ff0000;"><strong>01660_necoast_1920x1080.jpg</strong></span><span style="color: #008000;"><strong>?600x200</strong></span>|}}

x를 이용해서 가로와 세로의 크기를 200으로 조정해봤습니다.

희한하게도 사이즈가 강제로 600×200으로 줄어들긴 했습니다만… 문제는 이미지가 조금 잘리는 면이 있습니다.(이유는 정확하겐 모르겠습니다.)

04. 외부이미지 삽입

서버에 업로드한 이미지말고도 기존에 인터넷 상에 위치한 이미지도 문서에 삽입이 가능합니다.

이미지주소 알아내기

문서에 이미지를 삽입하기 위해서는 http://로 시작하는 이미지의 주소를 먼저 알아내야 합니다. 삽입할 이미지를 오른쪽 마우스로 클릭하면 이미지의 주소를 쉽게 알아낼 수 있습니다.

저의 경우에는 도쿠위키의 로고를 선택했습니다. 이미지 주소는 http://www.dokuwiki.org/_media/wiki:dokuwiki-128.png입니다.

이미지 삽입

이제 페이지 편집을 눌러서 아래처럼 내용을 입력합니다. { (중괄호) 두 개로 이미지 주소를 묶어줍니다.

{{<strong>http://www.dokuwiki.org/_media/wiki:dokuwiki-128.png}</strong>}

그럼 아래처럼 외부의 이미지가 위키 내에 삽입이 됩니다. 사이즈 변경은 위와 마찬가지로 ?(물음표)와 숫자를 이용해서 사이즈도 변경이 가능합니다.

05. 캡션 삽입

캡션(Caption)은 이미지의 설명을 적어둔 것입니다. 이미지 경로 뒤의 |(Vertical Bar)를 입력하고 그 뒤에 내용을 넣어주면 됩니다.

{{:sample:bgimage:01660_necoast_1920x1080.jpg?600|<span style="color: #0000ff;"><strong>본 이미지는 아름다운 풍경입니다.</strong></span>}}

캡션은 이미지에 마우스를 올려놓으면 아래처럼 툴팁으로 표시가 됩니다.

06. 이미지 링크 삽입

HTML과 같이 이미지로 링크를 적용할 수 있습니다. 방법은 조금 복잡하긴 하지만 어렵진 않습니다. 링크와 이미지를 결합하는 방식입니다.

[[http://dokuwiki.org/|<span style="color: #0000ff;"><strong>{{http://www.dokuwiki.org/_media/wiki:dokuwiki-128.png|캡션}}</strong></span>]]

위 처럼 링크의 텍스트 부분에  이미지를 넣는 것입니다. 앞에서 설명한 링크를 정확하게 이해하셨고, 이미지를 삽입하는 걸 정확하게 이해하셨다면 아마 어렵지 않으실 것입니다.

참고) 이미지 링크의 제한

이미지 링크를 사용하는 것은 gif, jpeg(jpg), png로 제한된다고 합니다. 테스트는 해보지 않았지만 사실 나머지 포멧은 웹브라우저에서 잘 사용하지 않으므로 크게 무리는 없을 것 같습니다.

07. 이미지 정렬

음… 포스팅을 작성하면서 이런 문법이 있었는지 저도 알았지만, 정렬과 관련된 부분입니다.(솔직히… 잘 쓰진 않습니다;;ㅋㅋ) 핵심은 {{ 중괄호와 공백(space)를 이용하는 방법입니다. 아래를 참고해서 공백을 어디에 삽입하는지 확인하시면 됩니다.(공백은 ㅁ으로 표시했습니다.)

<strong>왼쪽정렬</strong> : {{:sample:bgimage:01660_necoast_1920x1080.jpg?300ㅁ}}
<strong>가운데정렬</strong> : {{ㅁ:sample:bgimage:01660_necoast_1920x1080.jpg?300ㅁ}}
<strong>오른쪽정렬</strong> : {{ㅁ:sample:bgimage:01660_necoast_1920x1080.jpg?300}}

위의 코드를 전부 집어넣어 저장을 하면 아래처럼 출력이 됩니다.

사실 저는 잘 사용하진 않네요;;

08. 마치면서

위키나 블로그에서 문서를 작성하면서 이미지를 캡쳐하거나 만들어서 넣는 작업은 상당히 더디고 어려운 작업입니다.(손이 너무 많이 가거든요…) 그래도 글을 작성한 뒤에 검토를 하다보면 이미지가 있는 것이 훨씬 보기가 좋더군요…(이해도의 문제를 떠나서 그냥 보기에)

사실 설명이 부족해도 캡쳐나 이미지를 이용하면 부족한 설명을 보충할 수 있어서 현재의 저의 부족한 작문실력을 매꾸고 있는 중입니다. 그리고 읽으시는 분들이 심심하지도 않도록요…ㅋ

앞으로 몇 개만 포스팅하면 도쿠위키와 관련된 포스팅은 대강 마무리가 될 것 같습니다.(사실 한국어로 번역된 문서가 있으므로 해당 문서만 읽으셔도 도쿠위키를 사용하시는 데에는 크게 어려움이 없을 것입니다.)

09. 참고문서

  1. http://www.dokuwiki.org/ko:syntax