xe게시판에 외부이미지 가져와서 썸네일 만드는 팁

안녕하세요! 우기블로그입니다.

 

오늘 부터 XE 홈페이지를 제작하면서 궁금했던 부분들을 하나씩 올려보려고 합니다. 우선 XE 게시판 기능에서 외부 이미지로 썸네일을 생성하는 부분이 있습니다. 제 경우 웹호스팅을 한달에 500원짜리로 운영하고 있습니다. 카페 24에서 제일 저렴한 녀석으로 시작한거죠. 그래서 홈페이지를 제작하면서 마음껏 이미지를 업로드하기가 어렵습니다. 용량이 부족하고 트래픽 역시 용량이 작기 때문에 외부 이미지를 불러와서 글을 작성할 때마다 이미지를 추가시켜 주고 있습니다.

 

 

 

외부 이미지를 불러온다는 뜻은 제가 사용하는 서버(카페24)에 이미지를 업로드 해서 사람들에게 보여주는게 아니라 다른 이미지 저장 사이트에서 이미지를 가져와서 제 글을 보는 사람에게 보여주는 것입니다. 예를 들어 제가 사용하고 있는 피카사웹 사이트입니다.

 

 

 

 

  # 피카사에 접속하기  

 

현재 피카사는 구글에서 운영하고 있고, 구글 플러스와 통합되어 있습니다. 하지만 자세히 살펴 보시면 피카사웹은 여전히 살아 있습니다. 피카사웹에 마음껏 이미지를 업로드 시키고, 거기서 링크 주소를 가져와서 게시판에 붙여넣기 해주면 게시판에서는 썸네일로 생성되도록 만드는 것이 오늘 제 글의 요지입니다.

 

 

 

일단 피카사웹으로 가서 계정을 만드셔야겠죠. 계정을 만드는 과정은 생략하겠습니다. 사실 지금도 만들어지는지는 모르겠습니다. 구글플러스랑 통합되다보니..... 저는 예전에 만든 계정이 있어서 그걸 사용하고 있습니다. (* 꼭 피카사가 아니더라도 무료 이미지 업로드 사이트는 외국에 뒤져보면 여러개가 있는 것을 알고 있습니다.)

 

 

피카사 웹앨범에 들어가면 일단 구글 플러스로 이동하지만 살짝 풍성메시지가 상단에 뜨는데 예전 피카사 웹앨범으로 돌아갈거냐고 묻습니다. 그러면 이동하겠다고 눌러주면 피카사 웹앨범에 접속할 수 있습니다.

 

 

---

 

 

  #  피카사웹에 사진 업로드 및 이미지 링크 주소가져오기  

 

업로드를 누르고 앨범명을 적고, 원하는 사진을 업로드 시킵니다.

 

 

 

 

 

 

 

 

 

업로드가 끝나고 확인을 누르고, 업로드된 사진을 클릭하면 위의 그림과 같이 오른쪽에 메뉴가 뜹니다. 사진에 링크하기인데, 이미지 임베드 부분을 복사할 것입니다. 아래에 있는 이미지만(링크 없음)을 체크 하신 후 이미지 임베드 부분의 코드를 복사합니다. (* 크기 선택은 사진 크기를 선택하는 것입니다. 원하시는 사이즈를 미리 선택하세요)

 

 

 

 

 

---

 

  # 게시판에 사진 링크 붙여넣기  

 

먼저 결과를 보여드리면 아래와 같습니다. 메인에 게시물 추출해서 나오는 화면입니다. 썸네일이 잘 나오죠? 모든 이미지들이 외부(피카사웹)에서 끌어온 이미지 파일의 썸네일들입니다. 이렇게 썸네일을 추출하게 하려면  게시판 기본설정에서 요약이라는 기능을 이용해야 합니다.

 

 

 

 

 

제가 Xe에서 사용하는 게시판모듈은 스케치북 게시판입니다. 수많은 기능들과 옵션들이 있어서 많이들 사용하시는 게시판이죠? 일단 스케치북 게시판의 하단에 있는 설정을 누릅니다.

 

 

 

 

게시판 관리화면에서 게시판 정보라는 탭이 활성화 되어 있습니다. 기본 밑에 있는 고급이라는 곳을 찾아가면 됩니다. 

 

 

 

 

 

고급에서 요약이라는 것이 왼쪽에 있는데, 이걸 누르고 추가 버튼을 눌러주면 오른쪽으로 넘어갑니다. 번호, 제목, 닉네임, 등록일, 조회 수, 요약 이렇게 설정이 되면 됩니다.

 

 

 

그 다음 저장한 후 게시판에 다시 돌아가서 글을 작성하고, 원하는 이미지 주소 코드를 아래 보시는 이미지 단추를 누르면 이미지 속성이 뜨는데(표 옆에 있죠?) 이미지 정보 아래 URL에 붙여넣기 해줍니다. 여기서 중요한 것 한가지는 https라는 주소로 시작하는데, http로 고쳐줍니다. s를 지워주세요. https:// 상태로는 요약이 안되어서 썸네일 생성이 안되더군요.

 

 

 

 

 

 

 

 

확인을 누른 후 게시물을 저장해 줍니다. 그 다음 확인을 해주면 정상적으로 썸네일이 추출되어서 아래와 같이(이 게시판은 웹진형으로 설정되어 있는 게시판입니다. ^^) 썸네일 사진이 멋지게 표현됩니다.

 

 

 

 

별거 아니게 간단하죠? 조금 귀찮은 과정이지만, 외부 파일을 끌어와서 할 수 있으니 호스팅 비용도 아끼고 좋을 것이라 판단이 됩니다. 또 여기서 좀더 응용해서 구글에서 이미지를 검색한 후 원하는 이미지를 클릭하고, 이미지가 나오면 이미지 위에서 마우스 오른쪽 클릭하여 속성을 선택하고, 속성에서 이미지의 주소를 복사하고, 아까와 마찬가지로 게시판에서 그림 아이콘을 눌러 URL을 붙여넣기해 주면 그것 역시 썸네일로 추출됩니다. 이 방법의 단점은 어느날 이미지가 엑박으로 뜰 수 있다는 점입니다. 왜냐하면 내가 복사해온 주소의 주인이 그 이미지를 지웠거나 다른데로 이동시켰을 시에 일어나는 일이지요. 홈피를 오래 운영하려면 이렇게 아무 이미지나 끌어오는것 보다 이미지 저장소에 올려서 링크를 가져오는게 더욱 안정적이라 생각이 듭니다.

 

 

설명이 길었네요. 최대한 자세히 설명하려고 하느라 ^^ .... 여하튼 도움이 되었나요?