0.5를 내놓은지도 얼마 안 됐는데 틈나는대로 작업을 해서 기어이ㅜ 0.6까지 왔습니다.

 

 

https://xetown.com/1564278

 

1. 먼저 양해의 말씀

- 사이즈 조절과 좌측 정렬에 대한 요구가 적지 않았습니다. 애드온 설정에서 옵션을 제공하는 것도 방법이지만 고심 끝에 커스터마이징 용도로 별도의 css 파일을 제공하기로 했습니다.

- 근데 이게 쉬운 일이 아니었습니다. 스타일 커스터마이징을 준비하다보니 그동안 미디어 하나하나 추가할 때마다 얼마나 주먹구구식으로 작업을 해왔는지가 눈에 보이더라구요.ㅜ

- 코드가 복잡해서 좀 고민이 됐는데, 기존 버전과 불화감을 최소화하려면 이전의 임베디드 요소에 div를 하나 더 감싸줘야 간편하게 접근할 수 있겠다는 결론이었습니다.

- 그런데 바로 이 때문에 혼란스러운 상황이 예상되기도 합니다. 요소 배치 방식과 기본 스타일이 바뀌면서 이전에 입력하셨을 콘텐츠들에 부정적인 영향을 줄 수 있기 때문이죠.

- (새로 다운로드 받는 분들은 상관 없겠지만) 그래서 이번 판올림은 신중하게 고려해주셨으면 합니다.

- 1) 예전 글들에 들어가서 아이프레임을 지웠다가 다시 임베딩을 하는 등 글 수정을 해야 할 수도 있고, 2) (꼼수긴 하지만) 기존 글의 원활한 로딩을 위해 별도로 스크립트를 짜셔야 할 수도 있거든요. ... 이런저런 방법들이 생각나긴 하는데, 역시 개별 문서들에 대한 직접 수정 말고는 뾰족한 대안은 잘 떠오르지 않네요ㅜ

- 어떤 상황이 펼쳐질지 미리 가늠해보고 싶으시다면 제 사이트에 들어가서 개발자 도구로 한번 살펴보셔도 좋을 것 같아요. (사이트 홍보 아님요) 여깁니다 :) https://dev.aporia.blog/board_fKje44/category/35668

 

 

2. 스타일 커스터마이징은 어떻게 하는가?

- 암튼 0.6.0에서는 스타일 커스터마이징을 좀 더 안정적으로 하실 수 있겠습니다.

- 콘텐츠들의 최대 넓이를 제한하고, 좌정렬, 중앙정렬, 우정렬할 수 있습니다.

- 그동안 애드온의 코드를 직접 수정하셨을 텐데요. 이번부터 제공되는 custom.css 파일을 통해 좀 더 간편하게 접근이 가능합니다.

예) 가로사이즈를 640으로 고정하려면? custom.css 파일 안에 다음과 같이 기입합니다.

.media_embed_wrapper {
    max-width: 640px;
}

 

예) 중앙 정렬을 하고 싶다면? (이번 버전부터는 좌측 정렬이 기본이에요!) custom.css 파일 안에 다음과 같이 기입합니다.

.media_embed_wrapper {
    margin: 0 auto; text-align: center;
}

 

- 일단 이번에 배포하는 자료에는 가로 최대 넓이 640px, 가운데 정렬로 설정된 커스텀 파일을 동봉했습니다.

- 이 안의 내용을 지우시면 미디어 콘텐츠들은 가로 100%, 좌측 정렬됩니다.

 

 

3. 그런데 왜 별도 파일인가?

- css 파일로 커스터마이징하는 것을 꺼리실 분도 있을 줄 압니다. 그냥 애드온 설정에 넣어주면 더 편하긴 하죠. 저 역시 그렇게 시도해봤습니다.

- 실제로 본문 읽기 화면에서는 애드온 설정값이 잘 먹었습니다. 근데 문제는 글쓰기 화면이었어요.

- CK에디터에서는 인라인으로 처리되는 style 태그의 내용을 인식을 못하더라구요. (그걸 하려면 별도의 플러그인을 설치해야 하는데, 굳이...) 다만 css 파일 형태가 되어야 인식이 가능했죠ㅜ

- 그래서 불편을 끼치더라도, 커스터마이징을 제공하려면 css 파일을 통한 접근이 불가피하다고 생각했습니다.

 

 

4. 혹시 또 달라진 점은?

- 몇몇 미디어들을 새로 추가하기도 했지만 그중에서도 눈여겨보실 부분은 네이버와 다음의 vod와 라이브 영상을 임베딩할 수 있게 됐다는 겁니다.

- 영상 콘텐츠가 포함된 주소를 입력창에 텍스트 상태로 붙여넣으면 해당 주소에 포함된 vod나 라이브 영상이 들어가게 되는 거죠. 그 결과가 바로 다음과 같습니다ㅋ

- 다음 VOD : https://dev.aporia.blog/board_fKje44/37103

- 네이버 VOD : https://dev.aporia.blog/board_fKje44/36899

- 개인적으로 심혈을 기울였는데 ... 뭐 물론 그냥 혼자 오버하는 걸 수도 있기는 합니다.

 

 

5. 그럼 이만 줄입니다.

- 추신 : 자료 만드는 것만큼 소개글 쓰는 것도 힘드네요;;;;

윤삼

profile
아무래도 중급 초반 수준의 코딩 오타쿠인 것 같습니다.
  • profile
    방금 업데이트 해서 기존 콘텐츠 몇개 살펴봤는데 저는 특별히 문제가 되지는 않네요.
    트위터,인스타,유트브 정도의 컨텐츠가 작성되어 있습니다.
    업데이트 감사합니다. 수고 많으셨습니다.
  • profile profile
    휴, 다행이네요;;;
  • ?
    업데이트 후, 인스타그램, IMDb 에러메시지입니다.




    인스타그램

    embed.js?_=1645103723899:8 Uncaught Error: Minified exception occurred; use the non-minified dev environment for the full error message and additional helpful warnings.
    at m.exports (embed.js?_=1645103723899:8:102)
    at h (embed.js?_=1645103723899:6:2634)
    m.exports @ embed.js?_=1645103723899:8
    h @ embed.js?_=1645103723899:6
    postMessage (async)
    t @ e3303c0d1268.js:2
    (anonymous) @ e3303c0d1268.js:2
    f @ e3303c0d1268.js:13
    w @ e3303c0d1268.js:2
    e.mount @ e3303c0d1268.js:2
    (anonymous) @ e3303c0d1268.js:1
    c @ (index):22
    i @ (index):22
    r @ (index):22
    (anonymous) @ e3303c0d1268.js:212
    (index):51 Uncaught TypeError: Cannot read properties of undefined (reading 'push')
    at window.onerror ((index):51:29)
    window.onerror @ (index):51
    error (async)
    (anonymous) @ (index):50
    (anonymous) @ (index):128
    e3303c0d1268.js:154 ErrorUtils caught an error:

    Non-object thrown: undefined

    Subsequent non-fatal errors won't be logged; see https://fburl.com/debugjs.






    IMDb

    Error with Permissions-Policy header: Unrecognized feature: 'interest-cohort'.
    Error: no ad tag provided vast.js:1





    이 메시지는 에러는 아닌 것 같은데, 업데이트 이후 많이 뜨네요.

    DEPRECATED : xGetElementById() is deprecated in Rhymix. rhymix.min.js?20220217214521:11
  • ? profile
    사용상에 문제가 있으신가요? 임베딩이 안 되나요?
    임베딩이 되더라도 에러 메시지가 출력될 수도 있거든요.
    그리고 DEPRECATED는 xGetElementById 함수의 호환이 안 될 수 있다는 건데 크게 개의치는 않으셔도 될 듯합니다.
  • profile ?
    문제는 없습니다.
    업데이트 전에 비해 없던 에러메시지가 있어서, 도움이 될까 알려드렸습니다.
  • ? profile
    네, 이게 주로 아이프레임을 통해 외부 콘텐츠를 제공 받는 형태다보니 그쪽 페이지에서 자체적으로 오류를 뿜어내거나 통신 과정에서 부득이하게 오류가 발생할 때가 있습니다.
    그렇더라도 일반 사용자에게 불편함이 없다면 괜찮다고 봐도 무방할 것 같아요 :)
  • profile
    수고 많으셨어요~
    많은 분들의 가려움을 긁어주시는군요,... ^^
    감사합니다.
  • profile profile
    제가 좀 효자손입니다ㅋ 안마 의자 정도는 돼야 하는데, 품이 좀 들어요ㅋㅋ
  • profile

    유로 컨텐츠보다  더 좋은 윤삼님의 애드온
    유로자료들 제쳐두고 제 최애 NO.1 애장품입니다 ㅋㅋ

  • profile
    항상 감사하는 마음입니다
    고마우신 분이지요
    언제나 행운이 같이 할거라 봅니다
  • profile

    윤삼님
    썸네일 파일크기가 기존버전 대비 100kb에서 30kb로 줄어들었던데
    이 부분을 다시 100kb로 변경하고싶은데 어디를 고쳐야 할지 모르겠습니다 ㅜㅜ
    4시간 정도 php, js 파일 내에서 비교하며 찾아보다가 이대로는 쓰러질것 같아

    힌트라도 받고싶어서 문의드려요.ㅜㅠㅜ

  • profile profile
    어떤 썸네일 말씀이신가요? 유튜브?
  • profile profile
    네~ 유튜브가 바뀐것같더라구요
    27kb~30kb정도로 하향되었더라구요
  • profile profile

    그 전엔 최대 사이즈였는데, 과거 콘텐츠의 경우는 최대 사이즈 썸네일이 없어서 누락되는 버그가 있었어요.
    그래서 mqdefault.jpg로 파일을 바꿨거든요.
    _ckeditor.js의 유튜브 부분을 보시면 hqdefault.jpg를 mqdefault.jpg로 replace해주는 부분이 있을 겁니다.
    hqdefault이 좀 더 고화질이니 replace 부분을 삭제해보시는 것도 좋겠습니다.
    (근데 참고로 hqdefault는 4:3, mqdefault는 16:9 비율이에요)

  • profile profile
    아. 버그때문에 바꾸셨군요. 저는 용량크기가 커서 제한하신줄 알았어요
  • profile
    윤삼님 혹시 핀터레스트처럼 인스타그램은 섬네일 생성이 어려운 부분일까요?
  • profile profile
    네, 페이스북 개발자 페이지에서 사용자 전용 액세스 토큰을 얻으면 페이스북이나 인스타에서도 섬네일을 가져올 수는 있어요.
    그런데 그렇게 하려면, 1) 운영자들이 좀 수고로울 수 있고 2) 액세스 토큰이 노출이 안 되게 백엔드 처리(php에서 처리)를 해야 해서 여태껏 작업했던 것을 상당 부분 수정을 하긴 해야 합니다.
  • profile profile
    유튜브나 핀터레스트 부분이 완벽해서 인스타까지 손쉽게 섬네일이 지원 되었으면 좋았을텐데 쉬운일이 아니었군요. 얼마전 저작권 이미지 문제도 있고해서 가급적 자동 섬네일 기능으로 회피?해보려고 했는데 꼼수는 못쓰겠네요. ^^
  • profile profile
    윤삼님 제가 최근에 만든 사이트에서 인스타그램 임베드의 모양이 이상하게 나와서 문의 드립니다.

    다른 사이트는 정상적으로 출력 되는데 여기서는 왜 이렇게 나올까요?

    커스텀 css파일에서 640px으로 설정 된걸 혹시나 해서 100%로 풀어도 같은 증상입니다.

    특히 모바일로 보면 세로 사이즈가 훨씬 작게 출력 되네요. https://dal-ang.com/shop/693
  • profile profile

    /layouts/layaboveall/css/aboveall.normalize.css
    1585행에 있는 height: auto !important; 때문에 그런 것 같습니다.

    이 부분을 지우면 제대로 보일 텐데요.
    사용하시는 테마? 레이아웃?에서 의도한 스타일 지정이 제대로 구현되지 않을 수 있으니 그 점은 염두에 두셔야겠어요.

  • profile profile
    감사 합니다. 스킨문제였군요. 알려 주신 부분을 지우니 바로 해결 되었습니다!