회원정보

레이어닫기

★★[신입회원 필독] 게시판 사진 등록 및 에디터 사용 방법 (15-10-01)★★

팝코넷 | 10-01 11:08 | 조회수 : 34,579 | 추천 : 25




►팝코 게시판(사진, 동영상) 등록 방법 안내

아래는 게시판 사진 등록 방법에 대한 설명입니다. 내용이 다소 길더라도 팝코를 처음 이용하시는 분은 아래 두 가지 방법을 반드시 정독해주세요.
등록 방법 A (HTML을 이용해 글과 소스를 조합하여 등록하는 방법 - for 고급 사용자), 
등록 방법 B (에디터를 이용해 이미지를 미리 보면서 글과 함께 등록하는 방법 - for 초심자)
, 
그리고 동영상 삽입 방법까지 모두 읽어주시면 좋겠습니다.
막상 설명이 길어 다소 어려워 보이지만 다른 곳과 인터페이스가 비슷하며, 텍스트 화면에서 에이터로 전환이 가능하기 때문에
게시물을 등록하시다 보면 쉽게 익숙해질 수 있는 방법이라고 생각합니다.


 

A.첫번 째 방법 - HTML 형식으로 글과 사진 등록 및 동영상 삽입

A-1. 글을 작성하면서 이미지를 삽입할 곳에 커서를 위치시킨 후 파일 찾아보기를 클릭합니다.
*중앙 정렬 Tip: 게시물 중앙 정렬시에는 'HTML 사용' 이 체크된 상태에서 정렬을 원하는 시작 부분에 <center> 그리고 끝 부분에 </center>만 넣어주시면 됩니다.^^


 

A-2. 첨부할 이미지를 선택하고 ‘열기’를 클릭합니다. 이때 사진을 여러 장 연속으로 삽입할 경우 복수 선택 첨부가 가능합니다.


 

A-3. 이미지 첨부 과정 중 게시판을 자동 줄 바꿈 HTML 형식으로 바꿀 것인지를 물어보는 메시지 가 뜹니다.
‘확인’ 을 선택하면 'HTML 사용' 에 자동으로 체크가 되면서 사진이 소스로 삽입됩니다.
이미지 첨부 시 강제 HTML 형식으로 전환되는 것은 텍스트 만이 아닌 사진, 동영상 등을 소스로 첨부하기 좋은 통합 형태이기 때문입니다. 


A-4. 사진을 불러옴과 동시, 이미지가 삽입될 커서 위치에 이미지 소스가 삽입됩니다.
또한 이미지 소스의 끝에, 첨부될 이미지의 실제 파일 네임이 표기되도록 개선하여 이미지를 미리보기 하지 않아도, 
어떤 이미지가 어떤 위치에 등록되는지 확인이 가능하도록 했습니다.


*.게시물을 등록 완료 후에는 게시판 이미지 중복 네임을 방지하기 위해 등록된 이미지 파일 네임은 난수로 변경 됩니다.

A-5. 아래에 임시 첨부된 섬네일 삭제 시 본문에 삽입된 해당 이미지의 소스도 실시간으로 함께 삭제 됩니다.
반대로 본문의 이미지 소스를 삭제하고 게시물을 등록하게 되면 해당 섬네일 사진들이 함께 삭제 됩니다.


 

A-6. 사진 첨부와 글을 작성하면서 embed, iframe 등의 동영상 소스를 원하는 위치에 삽입할 수 있습니다.
*주의 : 동영상 삽입시 동영상 삽입 소스와 관계 없는 '<div></div>' 등의 소스를 삽입하면 사진 등록이나 게시판 전체에 영향을 줄 수 있습니다.



A-7. 글 작성과 사진 삽입이 끝났으면 작성 완료 버튼을 눌러 게시물을 등록 합니다. 또는 게시물 등록 전에 에디터 화면으로 전환하여 미리 보기를 한 후 최종 등록하셔도 됩니다. 

B.두 번째 방법 - 에디터로 사진과 글 등록

B-1. 처음부터 아예 에디터를 체크한 후에 게시물을 작성해나갈 수 도 있습니다.
에디터 방식은 사진 업로드 즉시 삽입된 이미지를 미리볼 수 있는 장점이 있어 초보자 분들께 유용한 작성 방법 입니다.
또한 위의 A 방식의 HTML 형식으로 게시물 작성을 마친 후 게시물 등록 전 에디터 사용에 체크를 하게 되면
현재 내가 작성한 글과 사진 이미지의 구성을 미리 볼 수 있는 에디터 화면으로 전환할 수 있습니다.


*.여기서 HTML 형식 게시판과 에디터 형태 게시판을 두 번 이상 왔다 갔다 하시면 소스 나 게시물의 뷰가 본인 의도와는 다르게 변경 될 수 있으니 주의 해주세요.

B-2. 에디터 화면에서의 사진과 글 작성 방법 또한 A의 HTML 형식과 동일합니다. (위 첫번 째 방법 A-1 ~ A-5 과정과 동일)
이미지 파일을 불러 올 시 커서 위치에 이미지가 삽입되고, 아래 섬네일을 삭제하게 되면 본문에 삽입된 해당 이미지가 함께 삭제됩니다.
또한 본문의 이미지를 삭제후 등록하게 되면 삭제된 본문 이미지에 해당하는 섬네일도 함께 삭제 됩니다. 

*정렬 Tip: 전체 정렬 시에는 Ctrl+A전체 선택하여 해당 정렬 버튼을 누르시면 됩니다. 
또한 이미지만 정렬 시, 이미지 자체를 선택하지 마시고 이미지 앞 또는 뒤로 커서를 위치한 뒤에 정렬 버튼을 눌러주세요.
글과 이미지를 따로 정렬하실 때는 글과 이미지 사이를 반드시 ‘앤터’ 로 확실한 구분을 해주세요. 


 

B-3. 에디터로 작성시 주로 사용하시게 될 기능 버튼 설명 입니다. '플래시' 버튼은 Embed 소스로 삽입되는 자료, 'iframe' 버튼은 iframe 소스로 삽입되는 자료에 해당합니다.


 

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



B-5. 모든 편집 작업이 끝났으면 오른쪽 하단의 '작성 완료' 를 클릭하여 게시물을 등록합니다.

C.에디터 화면에서 동영상 삽입하기

이번에는 에디터 화면에서 동영상을 삽입하는 방법 입니다.


►C-1. HTML 소스를 이용한 고급 사용자 
HTML을 어느 정도 이해하고 있는 고급 사용자의 경우 에디터 화면에서 '소스' 기능 버튼을 클릭하면
HTML 소스 화면으로 전환되며 동영상을 삽입할 곳에 동영상 전체 소스 코드를 삽입하면 됩니다.
그리고 나서 '소스' 버튼을 다시 클릭하면 에디터 화면으로 다시 전환되고 동영상 삽입 소스 위치에 동영상 플레이 BOX가 삽입됩니다. 






►C-2. 일반 사용자 
일반 초심자의 경우, 또는 소스 코드 삽입에 의해 잘 안되는 경우
에디터의 iframe 기능 버튼으로 글과 사진 중간 중간 커서 위치에 유투브 및 비메오 사이트 등의 동영상을 삽입할 수 있습니다.

►C-2-1. iframe 기능 버튼을 이용하여 동영상을 삽입할 경우 iframe 속성에 삽입해야 할 소스 코드는 아래를 참고하시기 바랍니다.
유투브의 경우 공유 및 소스 코드를 클릭하면 아래와 같이 iframe 소스가 공개됩니다.

이 때 iframe 에 삽입할 동영상 URL 주소, 그리고 적절한 동영상의 가로x세로 픽셀 만 있으면 됩니다.

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


 

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


 

►C-2-4.아래와 같이 iframe Box로 동영상이 해당 위치에 삽입되면 제대로 플레이가 되는지 미리보기 버튼을 클릭해봅니다.
그리고 화면에서 동영상이 제대로 플레이 되면 문제 없이 동영상이 삽입된 것입니다.



 

<게시물 등록 시 주의사항 정리>
 

1.HTML 작성 방법과 에디터 화면을 여러번 전환을 반복하게 되면, 게시물 소스와 편집이 작성자 의도와는 다르게 구성 될 수 있기 때문에
아래와 같은 3가지 방법으로 등록해주시는 것이 좋습니다.

방법1).HTML 형식으로 글과 사진 삽입 및 편집 후 ‘작성 완료’ (사진이나 외부 소스 삽입 없이 글만 등록할 경우 HTML 전환이 필요 없습니다.)
방법2).HTML 형식으로 글과 사진 작성 -> 에디터 화면 전환 후 미리 보기 및 최종 편집 후 ‘작성 완료’
방법3).처음부터 에디터 형식으로 전환하여 글과 사진 편집 후 ‘작성 완료’

2.이미지 파일 명은 될 수 있으면 영어, 숫자,  '-' , '_',  등의 조합으로 사용하도록 합니다.
     '햏', 'ㅎ ㅏ', '?'. '*&*^', '|', 'ㅑ', 'ㅐ' 등의 너무 무의미한 문자가 포함된 파일 네임은 EXIF 정보 미 출력 등 기타 오류가 있을 수 있습니다.

3.사진과 글 사이는 'Shift+Enter' 보다 최대한 '앤터(Enter)' 를 활용하여 확실하게 구분을 해주시는 것이 좋습니다.

4.글쓰기 창을 열고 최종 등록하기 까지 두어시간 이내로 마치는 것이 좋습니다.(임시 등록 섬네일이 깨지지 않는 시간은 여섯시간 까지 세팅이 되어있긴 합니다.^^)

5. 게시판 시스템이 완전히 달라지기 때문에 신규 게시판 적용 이전에 작성한 게시물 수정 시 본문 이미지가 깨질 경우엔 이미지들을 모두 새롭게 등록해주셔야 합니다.


기존의 방식에서 일부 변경된 부분이 있기 때문에 변경된 게시판 사용 방법에 대해 처음에는 다소 어색한 부분이 발생될 수 있습니다.
하지만 앞으로를 위해 에러 발생을 최소화 하기 위한 근본적인 방책 이었기 때문에 불편하시더라도 이에 익숙해지셨으면 합니다.
또한 이 방법이, HTML 작성과 에디터 화면의 전환 미리보기, 그리고 글과 사진의 배치와 편집 등에 있어 장점이 많다고 생각합니다.
사용하시다가 에러가 발생되는 경우, 에러 발생에 대해 신고를 해주시면 최대한 빠르게 수정할 수 있도록 노력하겠습니다.


*오류 신고하기 -> 
https://www.popco.net/zboard/zboard.php?category=1&id=com_propose


감사드립니다. ^^

접기 덧글 34 접기
SNS 로그인

이전글 다음글 목록

맨위로

이전이전 20 21 22 23 24 다음 다음