POPCO.NET - Make your Digital Life

사용기와 강좌, 그리고 포토 에세이 등은 사진과 글이 다이나믹하게 전개되어야 하고 기본적으로 사진이 많이 첨부되는 경우가 많습니다.
기존의 경우 삽입 안된 사진이 있거나 수정 시 일부 사진 삭제 등의 액션이 가해질때
본인이 의도한 대로 글과 사진이 구성되지 않는 경우가 있었습니다.
안내 가이드가 있다 하더라도 실수나 에러가 발생될 가능성이 커지게 되는 것이죠.

이에 사용기,강좌,에세이는 에디터 사용 방법을 좀 다르게 변경해보았습니다.
가장 큰 변화는 파일 업로드와 동시에 본문의 마우스 커서 위치에 이미지가 삽입되는 것입니다.
1.파일 찾아보기 -> 2.업로드할 파일을 선택 후 열기 -> 3.해당 마우스 위치에 이미지 동시에 삽입


1.이미지 삽입 및 글 작성하기



기존에는 파일 업로드를 하고 섬네일에서 해당 위치에서 삽입을 클릭해야 이미지가 삽입됐었습니다.
하지만 현재는 사진을 불러오는 즉시 해당 마우스 커서에 이미지가 삽입이 되는 형태로 바뀌었습니다.

이미지를 여러장 동시에 올릴경우 파일명 순서 기준으로 여러장이 동시에 삽입됩니다.
이 때, 사진을 수십장씩 올리시면 간혹 업로드 중 깨짐이 발생할 수 있으니
글을 중간중간 작성하시면서 몇 장씩 사진을 올리시는 것을 추천해드립니다.
사진 사이 간격을 띄우실 때는 사진의 앞 커서 위치에서 원하는 띄움 간격 만큼 앤터를 눌러주시면 됩니다.




아울러 에디터에서 사진과 글 작성을 편하게 하기 위해 도구모음에 최대 화면 보기, iframe, 플래시 삽입 버튼을 적용했습니다.
'플래시' 버튼은 Embed 소스로 삽입되는 자료, iframe 버튼은 iframe 소스로 삽입되는 자료에 해당합니다.





최대 화면 보기 버튼을 클릭하게 되면 아래처럼 에디터 공간이 모니터에 꽉 차게 됩니다.
에디터 공간이 협소하여 다소 불편하시면 이 기능을 활용하시면 글 작성이 좀 더 도움이 됩니다.
버튼을 클릭하면 다시 원 상태로 작아집니다. 






2.사진 중간에 동영상 삽입하기

작성 중간에 유투브 및 비메오 사이트 등의 동영상을 삽입하는 방법 안내 입니다.
에디터에서 동영상 삽입은 iframe 버튼을 이용하면 되고 여기에 삽입해야 할 소스는 아래를 참고하면 됩니다.

유투브의 경우는 공유 및 소스 코드를 클릭하면 아래와 같이 iframe 소스가 공개됩니다.
이 때 iframe 에 삽입할 동영상 URL 주소, 그리고 적절한 동영상의 가로x세로 픽셀 만 있으면 됩니다.

비메오의 경우도 비슷합니다.
비메오 또한 iframe 에 들어갈 동영상 URL 주소, 그리고 iframe 에 입력할 가로x세로 픽셀만 있으면 됩니다.






이제 위의 동영상 소스를 이용하여 팝코 에디터에 동영상을 삽입해봅니다.
영상을 삽일 할 때는 동영상을 삽입할 위치로 커서를 옮기고 iframe 버튼을 클릭합니다.
그리고 iframe 속성 창에 위의 유투브나 비메오의 동영상 URL 주소, 그리고 너비x높이 픽셀을 입력, 정렬 등을 선택한 뒤 '예'를 클릭하면 됩니다.






아래와 같이 iframe Bos로 동영상이 해당 위치에 삽입되면 제대로 플레이가 되는지 미리보기 버튼을 클릭해봅니다.





아래처럼 미리보기 화면에서 동영상이 제대로 플레이 되면 문제 없이 동영상이 삽입된 것입니다.






<총정리>

*사용기/강좌/포토 에세이 에디터 사용방법 및 주의사항

1.사진 삽입을 원하는 곳에 마우스 커서를 위치한 후 파일 찾아보기 버튼을 클릭하여 사진 업로드 
  - 사진 업로드와 동시에 마우스 커서 위치에 사진이 자동으로 삽입됨 (한번에 여러장 삽입도 가능)

2.글을 작성하면서 해당 마우스 커서 위치에 사진을 추가로 계속 삽입 가능. 
3.동영상 삽입 시에는 동영상을 삽입할 위치에 커서를 위치한 후 iframe 버튼을 이용하여 해당 동영상 URL과 가로x세로 크기를 입력.
4.소스보기를 클릭하여 해당 위치를 찾아 동영상이나 소스 등을 삽입하는 방법도 있습니다.

주의)
-섬네일 이미지 삭제 시 본분에 삽입된 해당 이미지도 같이 삭제해주셔야 깨짐이 발생하지 않습니다.
-이미지가 너무 많을 경우 한꺼번에 수십장씩 올리면 이미지 업로드 중 간혹 깨짐이 발생 할 수 있으니 몇 장씩 올리면서 글을 작성해나갑니다.
-첫,둘째 이미지는 본문에서만 삭제가 가능합니다.

현재 게시판 시스템에서 글과 함께 사진이 많이 첨부되었을때
에러가 발생되지 않도록 하기 위한 최선의 방법을 강구해본 것입니다.
결국 파일 불러오기와 동시에 이미지가 삽입이 되기 때문에
글을 작성해나가면서 해당 위치에 들어갈 사진을 하나 둘씩 불러오는 방법으로 작성하시는 것이 좋을 듯 합니다.


기존처럼 파일은 올리고 본문에 첨부 안한 이미지가 있을 경우 최상단으로 올라가거나 하는 증상은 없을 겁니다.
일단 사용기,강좌,에세이는 위와 같은 새로운 방식으로 사용해보시구요.
혹시나 글 작성시 다른 오류가 발생될 시 그 내용을 알려주시면 감사하겠습니다.^^