글쓰기 에디터 사용안내

안녕하세요. 2023년 새해입니다.  올해도 건강하시고 모두들 복많이 받으시길 바랍니다.

지난 일년 여러 회원분들이 산행공지와 후기도 올려 주시고 그외 자유게시판등을 이용해 많은정보와 알찬 내용의 글들도 올려 주시는걸 보았습니다.

저희들이 이전에 공지나 후기등 글쓰기에 사용하던 에디터가 플래쉬 기능을 이용한 에디터였는데 오래된 기술이라 2020년말로 윈도우에서 플래쉬 기능은 지원이 중단 예정되어 있었습니다.

 

 

하여, 2020년 웹 개편 작업때 급히 새로 설치한 글쓰기 에디터가 CK Editor 인데 새로 설치하고 난후 지난 2년정도  지켜보니 아직도 많은분들이 사용하는데 기능을 몰라 사용을 못하시거나 사용하시더라도 기능을 충분히 편리하게 사용못하는 경우가 많은거 같습니다.

언제 좀더 편리하게 이용들 하실수 있게  사용 안내글을 올린다 하면서도 글이 길어질거 같아 엄두를 못내고 있다 오늘 게으름이 나서 아무거도 하기 싫길래 이때가 글 쓸수 있는 기회다 싶어 정리해 올려봅니다. ㅎ

설명 사진을 첨부하여 하나하나씩 단계별로 설명 드릴테니 해당사항에 따라 몇번만 따라 하시면 쉽게 많은 편리한 기능들을 이용하실수 있어니 많이들 이용하시길 바랍니다. ^^

 

 

1. 저번에 어떤회원분이 사진이나 후기영상을 올릴려고 아무리 해봐도 첨부가 안되어 못올린다는 글을 본적 있습니다.

기본적으로 대부분의 웹사이트는 동영상( 예: .mp4, .mov) 파일등은 첨부가 불가능하도록 설정되어 있습니다. 당연히 저희 웹사이트도 동영상 파일은 첨부가 안되도록 설정해 두었고요. 첫째 이유는 여러분들이 공지나 후기올릴때 첨부한 사진이나 영상은 전부 저희 웹사이트를 호스팅하는 회사 서버에 저장해 보관됩니다. 그런데 대부분 계약된  유료사용 서버용량에는 한도가 있어며 비상시를 대비한 서버 자료 백업시에도 서버에 들어있는 자료 용량이 너무크면 상당히 난감합니다. (2020년 6월까지의 산악회 웹사이트 모든 자료는 제가 서버로부터 백업해 보관하고 있습니다만 그이후로는 백업된 자료는 없습니다: 운영진에서 참고하시면 좋겠네요.)

둘째는 웹이 열리는데 동영상이나 고화질로 찍은 여러장의 사진등 첨부한 파일용량이 크면 해당웹페이가 열리는게 너무 느려지거나 과부하가 걸려 웹사이트가  안열리고 깨지는 이유이기도 합니다. 이러한 이유로  파일용량이 큰 동영상등은 아예 첨부가 안되고 후기등에 주로 첨부하시는 사진파일은( 예: .jpeg,  .png, 등) 한장당 2MB 로 제한되어 있습니다. 동영상은 주로 유투브에 업로드하여 링크를 걸어주는 방법으로 회원들끼리 공유하구요.

 

 

 

2.. 후기에 사진 첨부하는 방법  

위의 1번 사진 첨부 파일 용량 한도 2MB 때문에 의외로 많은 회원분들이 후기에 사진 첨부가 안되는 경우  사진 사이즈를 너무 자그마하게 잘라내는 방법으로 용량을 줄여 후기에 올리거나 아니면 사진 파일 용량을 300k 도 안되게 너무 줄여 화질이 떨어지는 경우도 많은거 같습니다. 저희 후기 게시판은 사진 용량 한도가 한장당 2MB 로 설정되어 있고 고화질 2MB 이상으로 찍어신 사진이라면 허용용량 2MB 정도로만 줄여도 컴퓨터 화면에 꽉찰 정도 사이즈이며  컴퓨터 스크린에는 아주 고화질로 나옵니다. 사진용량을 줄이는 방법은 윈도우 사진 편집기나 다른 앱으로도 쉽게 하실수 있어 사진파일 용량 줄이는 설명은 생략합니다.  간혹 Full HD 나 4K 영상작업을위해 고화질 원본이 필요하시다면 개인간 카톡이나 메신저를 이용해 전달하면 됩니다.

 

 

 

 

 

3. 동영상을 YouTube 를 이용해 다른회원분들과 공유하는 방법

위번 1번과 같은 이유로 동영상을 직접 글쓰기에 첨부할수 없어 YouiTube 나 Vemeo 등에 업로드하고 글쓰기에 해당 URL 을 링크해주는 방법으로 다른회원분들과 후기 영상등을 공유합니다. 그런데 가끔 해당영상의 유투버 주소나 또는, 구글지도, Alltrail 맵 등의 웹주소를  카피해 올렸는데 모바일 에서는 올려주신 URL 을 아무리 클릭해도 안열리는 경우들이 제법 있는걸로 보입니다. 이유는 저희가 무료 사용중인 XpressEnginre 웹 구동 시스템은  데스크탑이나 랩탑등에서는 https:: 로 시작하는 URL 을 자동인식해 따로 링크를 안걸어도 링크가 걸립니다. 다만  저희 웹사이트 모바일 버전이  제가  무료로 사용 가능한걸 찿다보니  Handy XE 를 설치하게 되었는데  에디트를 이용해 해당 URL 링크를 꼭 걸어 주셔야만 링크가 걸립니다.

모바일에서도 링크가 걸리게  영상이나 지도, Alltrail Map 등 URL 주소 링크를 거는 방법은 아래와 같습니다.

유투버를 예로 설명합니다.

Step1. 

 

Step2

 

Step 3

열린 링크창에서 타킷, 고급 탭은 새창으로 열지 다른 옵션으로 열지등을  설정해주는것으로 원하시면 설정하셔도 되고 그대로 두시고 확인 버튼만 누르시면 모바일에서도 볼수있게  링크가 걸리게 됩니다.

 

 

 

 

 

 

4. 유투버 동영상이나 구글지도를 링크거는대신 직접 Embed (본문에 붙여넣기) 하는방법

공지나 후기영상, 지도등을 올리실때 URL 주소를 그냥 링크만 걸어주셔도 다른 회원분이 클릭하여 연결할수 있습니다만 이왕이면 아래 그림과 같이 Embed (붙여넣기) 해주시면 클릭도 더많고 보기도 좋고 이용자도 편리합니다 ㅎㅎ

 

URL 만 링크건 대신 HTML을 이용해 본문에 Embed (붙여넣기) 한 예

*다만 , 2년전 Youtube, Google Map, Vemeo, Alltrail 등 모든 외부 소스에서  저희 CK 에디터에 불러와 붙여넣기가 가능하도록 설정해놓고 테스트 돌려보니 가끔 연결이 깨지는 현상이 나타나 회원들이 공지와 후기에 제일 많이 이용하는 구글 지도와 유투버만 정회원 이상이면 가능하도록 설정되어 있습니다. (단 웹 관리 권한을 가지신 분들은 이러한 제약을 받지않고 모든 외부소스를 불러와 붙여넣기가 가능하도록 설정되어 있습니다)

 

Step 1

Embed (붙여넣기) 할 유투버 영상에서 아래와 같이 Share 를 선택합니다

 

 

Step 2

Share 를 선택하면  새창이 열리고 아래 그림과 같이 Embed 를 선택합니다

 

 

Step 3

Embed 를 선택하시면 새로운 창이 열리며 복사할수 있는 HTML 이 생성됩니다. 이걸 카피하여 저희 웹사이트 에디터에서 소스 버튼을 이용해 복사해 넣어시면 됩니다 ^^

 

 

Step 4

유투브에서 카피해온 HTML 을 글쓰기 에디터에서 소스 버튼을 이용해 Paste 합니다.

 

 

Step 5

HTML 을 복사해 넣어신후 다시 소스 버튼을 클릭하시면 아래와 같이 유투버 화면이 Embed 되는걸 보실수 있습니다.

 

 

 

 

 

 

 

5. 공지에 많이 사용하는 구글지도를  Embed (붙여넣기 하는 방법)

공지를 올리실때 지도 URL 이나 좌표대신 구글 지도를 직접 Embed 해주시면 사용자가 보기에도 좋고 ㅎ 클릭하여 이용하기에도 편리합니다.

구글지도를 Embed 한 예

 

 

 

 

 

구글지도 불러오기 하는 방법

 

Step1

구글맵에서 Embed 할 장소를 검색후 화면 제일 왼쪽 상단의 가로줄 세개를 클릭 합니다.

 

 

Step 2

위의 가로줄 세개를 클릭하시고  Share or Embed 라는 옵션을 선택합니다.

 

 

Step 3

share or embed map 을 선택하시면 새로운 창이 열리고 링크만 거는 send link 와 지도를 .Embed 하는 옵션중 Embed a Map 을 선택 . 사이즈는 Medium 이 적당하구요.

그다음에 Embed 할수 있게 생성된 HTML 주소를 copy 합니다 ( COPY HTML 클릭)

 

 

Step 4.

다음에 글쓰기 에디트 창에 와서 복사된 HTML을 소스 버튼을 이용하여 본문에 넣습니다.

소스버튼을 클릭하시면 HTML 로 변환되어 보이며 원하시는 곳에 구글 지도에서 Copy 해온 HTML 을 복사해 넣어시면 됩니다. 여기서 <p>&nbsp:</p> 로 보이는것들은 한줄 띄우라는 HTML 명령어이며 대강 원하시는곳에 명령어 아래에 대강 복사해 넣고 다시 소스 버튼을 눌러 HTML 이 아닌상태에서 수정 하셔도 됩니다.

 

 

 

Step 5

Copy 한 HTML 을 복사해 넣은후 다시 소스버튼을 누르시면 아래와 같이 구글지도가 Embed 된게 보입니다.

 

 

 

 

 

* 위와 같이 하면 Embed (붙여넣기) 는 완성 되었지만 아래는 알아두면  편리한 추가사항 입니다.

이장님과 드니로님이 공지올리실때 편리하게  지도나 주차장 모습등을 항상 Embed 해주시는거 같네요. . 다만, 한가지 팁을 더 드리자면 아래의  HTML 을 이용하시면 이용자의 사용기기 (예: 스마트폰, 랩탑, 데스크탑, 테블릿등) 의 화면에 딱맞게 자동으로 크기가 조정되는 요령이 있습니다.

보통 구글 지도를 Medium 사이즈로 Copy해 와서 Embed 하면 모든 기기에서 구글에서 Medium 사이즈로 지정된 사이즈 ( 높이 450 픽셀, 넓이 600 픽셀) 로만 보입니다. 화면이 큰 데스크탑에서는 조금 작은편이고 대부분 스마트폰에서는 화면보다 커서 넘쳐 보입니다. Copy 한 HTML 을 지정된 픽셀 사이즈 대신 HTML 한군데만 아래와 같이 수정해주시면 어떤 기기의 화면에서던지 자동으로 화면 사이즈에 딱맞게 보일수 있도록 할수 있습니다.

Medium 사이즈로 Copy 해온 HTML 을 복사해 넣어보면  아래 그림처럼 " width="600" height="450" 이라는 명령어가 보입니다.  여기서 넓이 600 대신 99% 라고 바꾸면 모든 기기의 화면 크기 상관없이 화면 크기에  99% 딱 맞게 보이게 하라는 명령어 입니다.

" width="99%" height="450"  요렇게 넣어 주시면 됩니다.  단 숫자 600 만 99% 로 바꾸고  "등 모든다른 글자나 부호등은 그대로 두셔야 컴퓨터가 인식합니다.  해보시면 재미있을 겁니다 ㅎ 

 

Extra Step

 

 

제가 이번 회기에 운영진도 아니고 웹 관리자도 아니면서 글쓰기 에디터 이용방법을 설명 드리는게 조금 주제 넘는거 같아 글을 쓰기가 좀 망설여 졌던게 사실입니다. 그런데 에디터를 어떤 연유로 제가 설치하게 되었고  새로 설치후 사용방법을  간단하게 한번  설명 올린적은 있는데 지난 2년정도 그냥 조용히 지켜보니 많은분들이 익숙하지 않아 여러기능들을 사용 못하고 계시는거 같아 부득이 다시 이용안내 올리는점 양해 바랍니다.