글쓰기 에디터 사용안내
안녕하세요. 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> :</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년정도 그냥 조용히 지켜보니 많은분들이 익숙하지 않아 여러기능들을 사용 못하고 계시는거 같아 부득이 다시 이용안내 올리는점 양해 바랍니다.
야생화 향연의 꿈
- ?
-
보해님, 지가 이걸로 밥 벌어 먹고 사는 사람인데... responsiveness까지 엄지척입니다!
-
와, 이 어마무시한 많은 정보를 매뉴얼 쓰듯이 정성 드려 작성해 주셨네요. 보해님, 정성과 수고에 감사드립니다.
사실, 저는 후기를 올릴 때 사진을 꼭 Resize해서 용량을 줄어서 올립니다. 우리가 올리는 모든 데이이터들이 써버에 차곡차곡 싸여가고 있다는 것을 알기에 그 부하를 조금이라도 덜 주려고요.
그런데, 고백하자면 가끔 Cheating할 때도 없지 않아 있어요. 바로 어제 자게판에 <야생화의 꿈>이라는 게시글을 올릴 때가 그 한 예죠. 보통 집에서 글을 올릴때는 개인 PC를 쓰기에 거기에 Paint라는 앱을 써서 사진 파일을 일일이 down size 하고 난 후에 사진들을 올리는데, 어제는 직장 컴퓨터로 써야 했는데 그 컴퓨터에는 사진 파일 resize하는 엡이 없는데다 또 시간도 없기도 해서, 휴대폰 사진을 리싸이즈 않고 막바로 올렸어요. 그랬더니 역시나 사진 용량이 커서 글을 클릭하면 사진 업로드가 시간이 많이 걸리더라고요.
유툽에 올릴 때 처럼, 용량 큰 사진이라도 웹페이지에서 자동적으로 리싸이즈하는 기능이 있으면 좋겠지만 불행히도우리 웹싸이트에 그런 기능이 없는 관계로 사진을 올리시는 분들은 조금은 수고를해 주셔하 하는 게 저희 현실입니다.
보해님, 글을 보면서 저부터 반성하겠습니다. 조금만 기다려서 집에 와서 글을 올려도 되는데 성질 급한 제가 굳이 직장에서 글을 올리는 만행(?)을 저지르게 됐네요. 그외에 많은 정보들이 여러 회원님들께 유용했으면 좋겠네요. 다시 한 번 안내글 감사합니다.
-
이런 정보는 많이 올릴 수록 지식창고가 풍성해지니 얼마나 좋습니까 ? 그저 보해님의 지식나눔에 감읍할 따름입니다.
-
?
상세한 정보도 정보지만,
보해님의 뜨거운 산악회에 대한 애정을 느끼게 하네요...
감사합니다
-
와~우 글 쓰시느라 많은 시간을 보내셨겠지요 유익한 지식창고가 올해에는 더욱 많은 사진과 후기에 쓰여질듯 합니다 감~사합니다 ~~
-
음악 좋네요. 감사요
-
사실 베이 산악회 가입한후 한글타자가 조금 늘었어요. ㅎ
그전에는 한글타자 할일이 별로없다 산악회 글쓸때 한글 타이핑 연습한다 생각하고 합니다. 다만 가끔은 글이 길어 읽기는 성가실 겁니다.
10분짜리 후기 영상 하나 만들려해도 영상정리하고 편집하고 업로드 하다보면 4-5 시간이 금방 가버리는데 이번처럼 긴글이라도 2시간이내에 완성될 정도로 한글타자에 장족의 발전이 ㅋㅋ
사진이야 클립핑하여 첨부하면 금방이구요.
Anyways, 별거 아닌데 감사말씀 주셔서 저도 감사합니다.
올해는 더 많은 회원분들이 다양한 공지도 올리시고 후기도 올리시고 시간낭비라 생각말고 글을통해 활발히 소통도 하시길. 바랍니다.
안할거면 상관없지만 이왕 참여해 등산 캠핑 하실거면 시간이 허락하는 한도내에서라도 조금더 적극적으로 참여하시고 소통하시면 미처 모르던 새로운것들도 커뮤니케이션을 통해 알게되고 자기개발에도 도움이 된다는 개똥철학을 펼쳐봅니다. ㅎ
-
보해님께서 너무 잘 정리해 주신듯합니다. 최고입니다.
게시판 기능 자체에서 유튭이나 구글맵 링크하면 자동으로 HTML embed code를 넣어주면 더없이 좋겠지만 그래도 수동으로 source를 컨트롤 할수 있다는데 처음에는 환호(?) 했었습니다.
-
그러게요. ㅎ
근데 무료 배포라 돈은 안되지만 빅터님이 에디터에 HTML 을 자동으로 Embed 할수 있는 버튼 하나 만들어 버리세요.
-
유투브 하나 올려봅니다. 요즘 이러고 삽니다.
-
아고나, 망고가 산책 안 데리고 간다고 비싼 소파 쿠션을 다 물어 뜯어놨네요. 가방끈이 짧은가, 본능 콘트롤이 좀 부족한가, 생기기는 멀쩡한데 응석이 심한 것 같네요. 늦나이에 어린 아이 간수하느라 수고가 많습니다. 응석이 안 고쳐지면 그거 다스려 주는 특수학교 좀 보내세요.
-
학교 갔는데 실업계 학교라 그런지 낙제 했심니다. ㅠ
소파쿠션이 아니고 지 집 쿠션입니다.
바깥에 나가도 가출도 안하고 집은 꼬박꼬박 찿아 옵니다. ㅎㅎ
-
그나마 기분 안 좋다고 화는 풀어야겠길래, 주인 거는 못 건들고 자기 거를 망쳐놨군요.
생각보다 똥 오줌은 가릴 줄 아는 스마트 한 녀셕이군요.
잘 하면 위급 상황에서 주인 목숨도 건질 수 있는 기특한 반련견일 수 있으니 잘 키우세요!!
글고, 인연 맺게 캠핑 때 한 번 뎁고 나오시죠.
우와~ 이런게 정말 귀찮고 어려운 일인데 다시한번 존경의 말씀 드립니다.
한땀한땀 정성이 베산에 넘치십니다...
계속 신입인척(능력은 사실 신입이지만^^) 하면서 정성어린 마음들을 계속 받기만 하고 있는데 정독한 내용 적용해서 2023년 올해는 글올려 보는 기회도 만들어보겠습니다. ㅎㅎ
건강과 행복이 베산을 사랑하시는 모든 분들께 항상 함께 하시길요~~~