이미지(사진) 올리기 및 화면에 해당 이미지 표시 방법

- 일반 게시물(나눔방 및 문서타입의 게시물)의 경우 -

사진이나 이미지를 첨부하여 올리실 때 알아두면 매우 편리한 웹상식입니다.

이미지(사진) 올리기(업로드) 및 화면에 이미지 표시 방법

사용자 권한에 따라 글쓰기가 가능한 곳에서는 댓글을 제외하고는 이미지 파일 등 첨부파일의 업로드가 다음과 같은 조건하에서 가능합니다.

이미지 파일 타입은 확장명이 jpg jpeg gif png 만 허용합니다.
첨부할 모든 파일은 반드시 영문을 사용해야 하며, 파일 이름간 공백을 사용을 피해주십시요. 공백은 언더스코어(_)나 하이픈(-)을 이용하여 공백없이 파일이름을 정확히 표기해주십시요.
이미지 파일은 여러개를 올릴 수도 있으나 한번에 5MB 까지만 허용합니다.
이미지 파일의 가로가 500 픽셀을 넘으면 자동으로 500 픽셀로 리사이즈를 합니다. 이미지의 사이즈를 리사이징하는 이유는 사용자가 이 보다 큰 사이즈의 사진을 업로드할 경우 웹화면이 오른쪽으로 늘어나 보기가 안좋아지는 것을 방지하기 위함입니다.
이미지 파일의 세로가 1000 픽셀을 넘으면 자동으로 1000 픽셀로 리사이즈를 합니다.(세로의 경우는 세로 사이즈가 긴 도표 등과 같은 이미지를 첨부할 경우를 고려하여 1000 픽셀로 제한했습니다.

이런 기능으로 인해, 해상도가 높은 디지털 카메라를 이용해서 찍은 사진도 별도의 사진 크기나 파일 사이즈를 편집하지 않고 직접 올리셔도 서버에서 알아서 조정을 하므로, 편리하게 사진을 올릴 수 있습니다.

이미지를 첨부하고 나면, 글을 올리기 전에 이미지는 이미 웹서버의 files 라는 폴더에 저장됩니다. 그러므로, 글을 쓰실때 다음과 같은 간단한 HTML 코드를 삽입하여 주시면, 첨부한 그림이 글 내용에 표시됩니다.

[codefilter_code]$m[1][/codefilter_code]

참고로 img 란 HTML에서 널리 사용하는 이미지 태그이며, src 를 이용하여 이미지의 위치를 표시해줍니다. 모든 첨부파일은 files 라는 폴더에 저장되므로, files 앞과 뒤에 / 하고, 내가 첨부한 파일명을 써주시면 간단합니다.

가로가 500 픽셀이 넘는 이미지를 자동으로 500으로 줄여주므로, 사용자가 이미지를 편집하는 부담을 갖지 않고, 웹에 보기좋게 표시될 것입니다.

아래 예를 들어 보았습니다.

옵션에 있는 "파일 첨부"에서 testing_image.jpg 란 파일을 첨부하고 이 페이지 내용에 끝부분에 다음과 같은 코드를 삽입하였습니다.

[codefilter_code]$m[1][/codefilter_code]

그랬더니 아래와 같은 멋진 이미지가 나옵니다. 원래 이 이미지 사이즈는 649X429 인데 리사이징이 자동으로 되었습니다. 충분히 이해하시겠죠? 원래 사이즈가 실제로 줄어 서버에 저장되므로 원본 파일을 잘 보관하도록 하십시요.

이 과정을 간단한 동영상으로 준비했습니다. 더 쉽게 이해하실 수 있을 것으로 생각됩니다.

첨부한 이미지(사진)파일을 게시물에 표시하는 방법 (동영상 데모)

- 사진방 (일반 게시물과 달리 이미지 모듈을 이용한 게시물) -

사진방의 자료들은 향후 본당내 각종 출판에 유용한 자료로 이용될 수 있습니다. 그러한 목적으로 활용하기 위해 해상도가 높은 원본을 보존하고, 동시에 웹 이미지 갤러리로서의 역할에 충실하기 위해 마련된 것입니다. 기존 게시물과는 작동원리와 사용용도가 다른 점이 있습니다.

우선 사진방에 이미지(또는 사진)을 올리고자 할 경우 다음과 같습니다. 일반 등록자가 사진 자료를 올릴 경우, 왼쪽 사용자 링크 메뉴에서 "새글 작성"을 클릭합니다. 그리고 "이미지" 링크를 클릭하여 이미지를 업로드할 수 있습니다.

이 경우는 우선 이미지 갤러리를 잘 선택해야 합니다. 갤러리는 운영자 이상의 레벨 권한이 있는 분들이 자유롭게 만들 수 있습니다. 만약 원하는 갤러리가 없으면 관리자에게 요청해주십시요. 갤러리는 기본적으로 년도별로 정리되어 있고, 해당연도내 각종 행사 이름으로 정리되어 있습니다. 성화나 기타 년도에 상관이 없는 이미지 파일은 년도별 갤러리 하단에 있는 적절한 갤러리를 선택하여 주십시요.

사진방 이미지를 업로드할 경우 일반 게시물과 달리 HTML 코드를 입력할 필요는 없습니다. 그리고 업로드한 사진의 해상도가 크더라도 원본을 서버에 보존하며, 웹디자인에 표현되기 적절한 중간 사이즈의 이미지와 작은 이미지(Thumbnail)이 시스템에 의해 자동으로 생성됩니다.

원하면 사진밑에 간략한 설명을 달아놓아도 되며, 이는 옵션입니다. 참고로 일반 게시물의 경우 첨부된 파일은 모두 /files 라는 폴더에 저장되지만, 사진방을 통해 올라간 자료들은 /files/images 란 폴더로 올라갑니다.

사진방과 일반 게시물의 이미지 업로드와의 중요한 차이는 사진방은 이미지를 전문적으로 업로드하기 위한 환경을 제공하고 있다는 점이며, 일반 게시물은 이미지뿐만 아니라 각종 문서 등 다양한 파일을 업로드하여 다른 사용자와 공유함에 있습니다.

사진방내 이미지를 게시하면, 원본파일을 보존하지만, 그외 다른 게시물은 원본을 보존하지 않고, 중간사이즈로 웹디자인에 맞게끔 줄여서 업로드합니다. 사진방내 게시물은 특별한 HTML 코드를 사용하지 않으나, 일반 게시물은 반드시 위에서 언급한 식대로 HTML 코드로 적절한 곳에 이미지를 표현해주어야 정상적으로 이미지가 보입니다.

이러한 환경이 처음엔 좀 부자연스러울 수 있으나 조금만 써보시면, 나름대로 익숙해질 것으로 생각됩니다.

따라서 행사 등 중요한 사진자료나 성화나 그림을 업로드하고 싶은 경우, 사진방에 올릴 것을 추천합니다. 그러나 사진는 보조자료이고, 나눔방(게시판)이나 문서에 글이 중요하고 이미지는 부차적인 것이라면, 사진방을 이용하지 않고, 일반 게시물에 사진을 업로드하고 원하는 영역에 HTML 로 이미지를 표현해주시길 바랍니다.

그외 행사를 전문적으로 맡아 여러장의 사진을 찍고, 올리는 봉사자님들을 위해 이미지를 벌크로 올릴 수 있는 기능이 있습니다. 이 기능은 아래의 링크에 자세히 설명해놓았습니다.

사진을 벌크로 올리는 방법: http://www.sjkoreancatholic.org/node/5380