새로운 기능과 글 작성법 알림 ‹ 공지사항

새로운 기능과 글 작성법 알림

페이지 정보

루루아빠 6,243 45 7 2023.01.06 13:37

짧은주소

https://yadolee.com/notice/131 주소복사

평점

- 평점 : 5점 (5명 참여)

본문

📢새로운 기능과 글 작성법 알림

1. 2021년 1월 19일부터 새싹/Level 2(경험치 : 300) 이상인 회원은 에디터를 이용할 수 있으며 PC와 모바일 각각의 에디터는 멀티 이미지 업로드를 지원하고 특별히 PC상의 에디터는 드래그 앤 드롭(Drag and Drop)이 지원됩니다.

2. 에디터 바로 위 버튼들에 대한 설명입니다.
공유 : 퍼오기 가능한 공유 사이트를 본문에 게시합니다.
지도 : 지도 위치를 입력해 지도(구글, 네이버, 다음)를 본문에 게시합니다.
첨부파일 : 업로드 한 첨부파일을 본문에 게시합니다.
이미지태그 : 이미지 주소를 입력해 본문에 게시합니다.
비디오태그 : 비디오 주소를 입력해 본문에 게시합니다.
단, 상대 서버가 이미지나 비디오의 핫링크(공유)를 허용하지 않는 경우 본문에 나타나지 않습니다.

3. 에디터를 이용해 업로드되는 파일 중 gif 파일은 서버의 트래픽과 효율적인 저장 용량의 관리를 위해 mp4 파일로 자동 변환되며
gif 파일 업로드~~> 작성 완료 > 수정~~ > 작성 완료의 과정으로 이미지 태그가 동영상 태그로 자동 변환되고 업로드된 gif 파일은 서버 상에서 삭제됩니다.
만약 글 작성자가 위에 언급된 일련의 과정을 거치지 아니하고 일반적인 글 작성법인 gif 파일 업로드 > 작성 완료까지만 진행할 경우 본문에는 엑스박스(gif파일이 서버 상에서 삭제되어 존재하지 않음)로 보여짐으로 관리자 임의로 수정 > 작성완료 과정을 임의로 진행할 수 있음을 알려드립니다.

4. 특정 레벨 회원은 글 작성 시 첨부파일을 업로드할 수 있는 권한이 있으며 글 작성 메뉴 상단에 첨부파일 위치를 지정하여 에디터에서 부족했던 동영상 업로드를 위한 편의 기능을 이용할 수 있습니다.
- 상단 : 본문 보기 시 에디터에서 작성된 글보다 위에 보여짐(기본값)
- 하단 : 본문 보기 시 에디터에서 작성된 글 아래쪽에 보여짐(하단 라디오 버튼 선택 후 저장 시)
- 임의 : 본문 보기 시 임의의 위치에 지정된 대로 보여짐(임의 라디오 버튼 선택 후 에디터 툴바 바로 위쪽에 위치한 첨부파일 버튼을 눌러 첨부파일 번호를 입력한 후 확인 버튼을 클릭 및 터치하여 에디터 본문에 원하는 위치에 삽입한 후 저장 시)
※ 에디터 본문에 삽입되는 형식은 {파일:첨부파일 번호}임으로 {파일:1} 이와같은 형식으로 직접 입력하셔도 됩니다.

5. 회원의 비디오 사운드 환경 설정 값과 무관하게 HTML5 비디오를 muted된 상태로 재생되로록 하려면 비디오 태그에 muted 속성을 추가합니다.
- 방법1) 에디터 상의 소스 수정을 통해 글 작성자가 비디오 태그 내에 muted 속성을 수기로 입력합니다.
- 방법2) 비디오 태그 버튼을 이용할 경우 대소문자 구분없이M:를 수기로 입력 한 후 비디오 주소를 붙혀넣기 합니다.
ex) https://도메인.com/sample.mp4 비디오 파일을 묵음으로 처리해 보여주고자 할 경우
⇒ M:https://도메인.com/sample.mp4 으로 입력합니다.
💡소스 수정이 익숙치 않다면 비디오 태그 버튼을 이용해 주십시오.

6. 게시글과 댓글에 퍼오기 가능한 공유 사이트 가이드
지원 사이트 : 유튜브／비메오／데일리모션／네이버TV／카카오TV／페이스북／ted／slideshare／sendvid／youku／iqiyi / 사운드클라우드

💎동영상 버튼을 이용할 경우
공유 주소를 입력합니다.
세로가 긴 동영상은 대소문자 구분없이 V: 혹은 세로:를 수기로 입력 한 후 공유 주소를 입력합니다.
※회전 지원(유튜브만)
유튜브 오른쪽으로 회전하고자하는 세로가 긴 동영상은 대소문자 구분없이 VR: 혹은 세로오:를 수기로 입력 한 후 공유 주소를 입력합니다.
유튜브 왼쪽으로 회전하고자하는 세로가 긴 동영상은 대소문자 구분없이 VL: 혹은 세로왼:를 수기로 입력 한 후 공유 주소를 입력합니다.

💎에디터 상에서 수동으로 입력할 경우
동영상 → 중괄호를 이용해 {동영상:공유주소} 형식으로 입력합니다.
※회전 지원(유튜브만)
유뷰트 세로가 긴 동영상을 퍼올 때에는{세로동영상:공유주소}형식으로 입력합니다.
유튜브 오른쪽으로 회전하고자하는 세로가 긴 동영상은 {세로오동영상:공유주소} 형식으로 입력합니다.
유튜브 왼쪽으로 회전하고자하는 세로가 긴 동영상은 {세로왼동영상:공유주소} 형식으로 입력합니다.

💎유튜브 동영상 소유자가 다른 웹사이트에서 재생할 수 없도록 설정했을 경우
유튜브 내에서만 재생되도록 설정된 동영상을 그 동영상의 대표 이미지로 대체하고 그 동영상의 타겟 링크를 생성하도록 수정해 관련 내용을 게시글에 저장합니다.

💎연령 제한이 적용된 동영상으로 YouTube에서만 이용 가능한 경우
인증된 성인에게만 재생되도록 설정된 동영상을 그 동영상의 대표 이미지로 대체하고 그 동영상의 유튜브 타겟 링크를 생성하도록 수정해 관련 내용을 게시글에 저장합니다.

7. 공유된 외부 이미지 파일 및 외부 비디오 파일을 게시글 보기와 댓글에서 지원합니다.
► 확장자가 포함된 외부 미디어 파일 주소
- 이미지 파일 주소 → 중괄호를 이용해 {이미지:이미지 파일 주소} 혹은 {확장자가 포함된 이미지 파일 주소} 형식으로 입력합니다.
- 비디오 파일 주소 → 중괄호를 이용해 {비디오:비디오 파일 주소} 혹은 {확장자가 포함된 비디오 파일 주소} 형식으로 입력합니다.
► 확장자 미포함된 외부 미디어 파일 주소
- 이미지 파일 주소 → 중괄호를 이용해 {이미지:이미지 파일 주소} 형식으로만 입력합니다.
- 비디오 파일 주소 → 중괄호를 이용해 {비디오:이미지 주소} 형식으로만 입력합니다.
💡핫링크를 허용하는 외부 미디어를 올바르게 가져오기 위해 확장자 유무와 상관없이 이미지 파일이라면 {이미지:이미지 파일 주소}, 비디오 파일이라면 {비디오:비디오 파일 주소} 형식을 이용합니다.
💡핫링크가 지원되는 사이트 내의 이미지 파일이나 비디오 파일만을 가져와 그 형식에 맞게 보여주는 용도

8. 공유된 외부 이미지 파일 및 외부 비디오 파일을 게시글 작성 시 기록해 제어합니다.
- 이미지 파일 주소 → 대괄호를 이용해 [이미지:이미지 파일 주소] 형식으로 입력합니다.
- 비디오 파일 주소 → 대괄호를 이용해 [비디오:비디오 파일 주소] 형식으로 입력합니다.
💡게시글 작성 완료 시 사용자가 입력한 위 형식의 패턴은 삭제되고 각각의 이미지 태그, 비디오 태그로 게시글에 저장됩니다.
💡댓글 작성은 태그를 사용치 않도록 설정되었으므로 위 기능이 작동하지 않습니다.

9. 게시글과 댓글에서 특정 사이트 자동링크(재생)를 지원합니다.
지원 사이트 : 인스타그램, 트위터, 페이스북

💎사용법
- 인스타그램 : 공유주소 → 중괄호를 이용해 {공유주소} 형식으로 입력합니다.
- 트위터 : 공유주소 → 중괄호를 이용해 {공유주소} 형식으로 입력합니다.
- 페이스북 : 공유주소 → 중괄호를 이용해 {공유주소} 형식으로 입력합니다.
- 틱톡: 공유주소 → 중괄호를 이용해 {공유주소} 형식으로 입력합니다.

10. 유튜브 백그라운드 뮤직을 지원합니다.
- 유튜브 영상을 숨기고 배경음으로 플레이합니다.(모바일은 자동 재생 불가)
- 유튜브 단일 영상과 유튜브 플레이리스트(Playlist) 모두 지원합니다.
- 회원 레벨 10부터 이용 가능합니다.

11. 유튜브 트랙 타임라인을 지원합니다.
- 트랙으로 나누어진 유튜브 동영상을 "00:00:00(제목)" 형식으로 쉼표(,)로 나누어 저장해 사용자가 원하는 트랙으로 타임 점프할 수 있도록 합니다.
- 시간은 초 or 분:초 or 시:분:초의 형식이어야 합니다.
- 회원 레벨 10부터 이용 가능합니다.

12. 해시태그(#)를 지원합니다.
- 해시태그는 해시기호(#) 없이 쉼표, 탭키, 엔터키를 이용해 입력하고 더블 클릭, 더블 탭을 이용해 수정할 수 있으며 드래그 앤 드롭으로 순서를 변경할 수 있습니다.
- 수정 모드 시 쉼표(콤마)는 구분자 역할로서 쉼표(콤마) 앞•뒤의 모든 공백을 제거하고 태그와 태그로 나누어 저장합니다.

13. 게시글 추천
- 글 게시자는 추천 링크가 작동하지 않으며 내 게시글은 추천이 불가함을 안내합니다.
- 회원에게 이미 추천한 게시글임을 알 수 있도록 본문에 추천한 게시글임을 안내합니다.

14. 게시글 스크랩
- 게시글을 스크랩 했다면 스크랩한 게시글임을 안내합니다.
- 게시글 스크랩시 추가 대화창을 생성하지 않습니다.

15. 게시글 별점평가
- 글 게시자는 별점평가가 보이지 않습니다.
- 별점을 평가했다면 본문에 별점평가가 보이지 않습니다.

16. 회원 프로필 사진 갱신시 사용자 쿠키와 상관없이 변경해 보여 줍니다.
※ 너무 빠른 갱신시 프로필 이미지가 삭제될 수 있음을 주의하십시오

💡동영상이란 퍼오기 가능한 공유 사이트에서 제공하는 확장자 없는 아이프레임(iframe) URL 소스

https://도메인주소/watch?v=g2FC_Jc0BA1
https://도메인주소/g2FC_Jc0BA1
https://도메인주소/watch?v=g2FC_Jc0BA1&list=R0gPFC_JcABAO

💡비디오란 mp4, webm과 같이 확장자가 존재하거나 존재하지 않는 파일 자체의 URL 소스

https://도메인주소/example.mp4
https://도메인주소/example.webm

📌2021년 1월 26일 에디터와 gif 파일의 업로드에 대한 안내
📌2021년 4월 21일 틱톡 공유 추가
📌2021년 4월 25일 첨부파일 업로드에 기능 추가
📌2021년 5월 7일 에디터를 통해 업로드된 gif 파일은 추가적인 글 수정 작업 없이 mp4 파일로 바로 변환되어 저장됨
📌2021년 5월 7일 에디터 동영상 파일 업로드 기능 추가(포스터 이미지는 공란이면 자동 생성)
📌2021년 5월 7일 오디오가 포함된 동영상은 글 작성 시 서버 상에 기록되고 글 보기 시 동영상 내 스피커 아이콘을 통해 소리 제어 가능
📌2021년 5월 9일 에디터를 통해 드래그 앤 드롭된 동영상 재생 지원
📌2021년 5월 12일 에디터를 통해 쉽게 외부 이미지를 등록하도록 이미지태그 버튼 추가
📌2021년 5월 16일 컨트롤(Ctrl)+엔터키(Enter) 단축키로 글, 댓글 작성 지원
📌2021년 11월 24일 10레벨 이상 회원 글작성 시 백그라운드 유튜브 사운드 재생 지원
📌2021년 12월 7일 공유된 외부 이미지 파일 및 외부 비디오 파일을 게시글에 기록해 제어
📌2022년 3월 26일 사운드 포함된 HTML5 비디오 파일을 muted 되도록 제어
📌2022년 3월 29일 세로가 긴 동영상을 퍼올 때 비율(aspect ratio)에 맞도록 재생 추가
📌2022년 4월 2일 글 작성 시 HTML5 비디오 파일 묵음 처리 방법 소개
📌2022년 4월 13일 게시글 보기 시 HTML5 비디오 파일을 키보드 m 키로 mute, unmute 하는 토글 기능 추가(모바일 제외)

📌2022년 5월 1일 게시글 보기 시 유튜브 공유 비디오를 회전해서 볼 수 있도록 지원

📌2022년 10월 29일 게시글, 댓글 작성 시 핫링크가 허용된 외부 미디어 파일의 확장자가 없더라도 지원

📌2022년 11월 9일 유튜브 동영상 소유자가 다른 웹사이트에서 재생할 수 없도록 설정했을 경우 게시글을 수정해 저장
📌2022년 11월 15일 연령 제한이 적용된 유튜브 동영상으로 YouTube에서만 이용 가능한 경우 게시글을 수정해 저장

📌2022년 11월 17일 사운드클라우드 짧은 주소(https://on.soundclound.com/고유 아이디) 공유 지원/span>
📌2022년 11월 27일 글 작성 시 해시태그를 드래그 앤 드롭(Drag and Drop)으로 순서를 변경할 수 있도록 수정

📌2022년 12월 25일 글 작성 시 해시태그 기능 업그레이드

📌2023년 1월 6일 음악 감상용 유튜브 동영상의 타임라인 지원

끌어올림｜2023.01.06 13:37｜횟수 22 회

공지사항 새로운 기능 사용법 알림 글 작성법

댓글45｜5

내사랑 2023.01.07 00:08

유튜브 내에서만 이용 가능한 트랙 점프 기능인 줄 알았는데

축하합니다. 행운의 85경험치를 획득하였습니다.

하늘구장 2023.01.06 20:16

유튜브 타임 점프 기능 마음에 들어요

내사랑 2022.12.25 14:03

태그가 컬러풀하네요
성탄절 선물 같은 느낌이에요
멋져요 굿굿~ 굿

하늘구장 2022.12.25 11:25

태그 입력이 아주 많이 좋아졌네요
아주 멋져요 tagify를 이용하신 거죠?

루루아빠 글쓴이 @하늘구장 2022.12.25 18:36

네 맞습니다.
Tagify 기능이 훌륭해 변경해 놓았습니다.
한번 적용해 보세요.

랩퍼투혼 2022.12.03 14:30

이 공지가 모든 공지를 다 흝어보았는데

가장 중요하고 필요한 공지입니다

사용편의를 높여주는 영역이니 스크랩하셔서

함께 자주 보아요~~ 웹에디터에 대해서 다른 사이트에서 우리가 사용했던 방식하고

다른법이 있을 수 있고 그런 노화후가 들어있는 최적화된 <공지문서>같습니다~~

만약 이해가 안되신다면....사이트를 이용하면서 웹개념을 경험하다보면

조금씩 시야가 넓어질것입니다 ....저도 먼 소린지 완벽한 이해가 되지않습니다 ㅎ

ㄴ 개발자들이 좋아하는 방식과 일반이용자들이 좋아하는 방식은 다르기에

ㄴ 개발자들 시각과 일반이용자 시각에서의 이해법이 개발방향이 될 것입니다 (설명서 없이도 조립할 수 있는 복잡한퍼즐)

ㄴ 상세한 개발변경 사항이라 일반인들에겐 외계어로 인식됩니다 ㅋ

ㄴ 그래도 이해할려고 노력하다보면 조금씩 눈이 트이고 귀가 열린다는게 포인트

정성어린 설명 ㄳ

ㄴ 에디터 파싱 극대화되는게 저는 좋습니다 // 편리지상주의 ㅋ (이건 아마 대형플랫폼에서 경쟁사업체들을 견제하는

의미에서 안하는거 같습니다 못하는게 아니라....그래서 커뮤니티들이 신경쓰면 좋은 영역

하늘구장 2022.11.27 09:00

태그 순서를 바꿀 수 있다면 좋겠다 싶었던 적이 정말 많았었는데
아주 멋진 기능이네요

루루아빠 글쓴이 @하늘구장 2022.11.27 11:04

SortableJS를 이용했습니다.

https://inpa.tistory.com/entry/%EB%93%9C%EB%9E%98%EA%B7%B8-%EC%95%A4-%EB%93%9C%EB%A1%AD-Drag-Drop-%EA%B8%B0%EB%8A%A5


const columns = document.querySelectorAll(".column");

columns.forEach((column) => {
  new Sortable(column, {
    group: "shared",
    animation: 150,
    ghostClass: "blue-background-class"
  });
});

https://github.com/SortableJS/Sortable


Sortable.create(el, {
	group: "localStorage-example",
	store: {
		/**
		 * Get the order of elements. Called once during initialization.
		 * @param  {Sortable} sortable
		 * @returns {Array}
		 */
		get: function (sortable) {
			var order = localStorage.getItem(sortable.options.group.name);
			return order ? order.split('|') : [];
		},

		/**
		 * Save the order of elements. Called onEnd (when the item is dropped).
		 * @param {Sortable} sortable
		 */
		set: function (sortable) {
			var order = sortable.toArray();
			localStorage.setItem(sortable.options.group.name, order.join('|'));
		}
	}
})

위 두 링크를 참조해 보세요.

SortableJS를 이용했습니다.

https://inpa.tistory.com/entry/%EB%93%9C%EB%9E%98%EA%B7%B8-%EC%95%A4-%EB%93%9C%EB%A1%AD-Drag-Drop-%EA%B8%B0%EB%8A%A5
{code:js}
const columns = document.querySelectorAll(".column");
 
columns.forEach((column) => {
    new Sortable(column, {
        group: "shared",
        animation: 150,
        ghostClass: "blue-background-class"
    });
});
{/code}
https://github.com/SortableJS/Sortable
{code:js}
Sortable.create(el, {
	group: "localStorage-example",
	store: {
		/**
		 * Get the order of elements. Called once during initialization.
		 * @param   {Sortable}  sortable
		 * @returns {Array}
		 */
		get: function (sortable) {
			var order = localStorage.getItem(sortable.options.group.name);
			return order ? order.split('|') : [];
		},

/**
		 * Save the order of elements. Called onEnd (when the item is dropped).
		 * @param {Sortable}  sortable
		 */
		set: function (sortable) {
			var order = sortable.toArray();
			localStorage.setItem(sortable.options.group.name, order.join('|'));
		}
	}
})
{/code}위 두 링크를 참조해 보세요.

하늘구장 @루루아빠 2022.11.27 13:48

참고해서 완수해 볼께요
고맙습니다 ^^

내사랑 @루루아빠 2022.11.28 00:14

복잡해 보이지만 화이팅!!!!

로딩 중입니다...

마지막 페이지입니다.

읽어 들일 페이지가 더 이상 없습니다.

댓글 더 보기

새로운 기능과 글 작성법 알림

페이지 정보

짧은주소

평점

본문

추천인 7

댓글45｜5

내사랑님의 댓글

하늘구장님의 댓글

내사랑님의 댓글

하늘구장님의 댓글

루루아빠님의 댓글

랩퍼투혼님의 댓글

하늘구장님의 댓글

루루아빠님의 댓글

하늘구장님의 댓글

내사랑님의 댓글