마크다운과 HTML이 뒤섞여 이미지가 로드되지 않음

[mattdm (Matthew Miller)]

Fedora 프로젝트 토론 사이트의 커뮤니티 블로그에서 작성된 게시글의 일부입니다:

<p>여러분의 생각을 알려주세요. 이제 검색 엔진 필드가 추가되었으니 이 페이지를 홈페이지로 사용하시겠습니까? 더 개선할 수 있는 방법에 대해 어떻게 생각하시나요?</p> ![](upload://na9g3dGvhEU753JEnGrz8xER4XS.png)<p class="has-text-align-center">또는</p> ![](upload://def2zSzNAJtyuOorvTI2eV7rGW1.png)<p>더 자세히 보고 싶으시면 <a href="https://discussion.fedoraproject.org/t/how-do-you-feel-about-the-new-design-of-start-fedoraproject-org-page/28689">Figma 초안</a>을 확인해 보세요. </p>

마크다운 이미지 줄이 실제로는 새 줄부터 시작하지 않는다는 점을 알아차리셨나요? 이로 인해 이미지가 표시되지 않습니다. 메시지를 편집하여 각 ![] 앞에 개행을 추가하면 이미지가 올바르게 표시됩니다.

이를 수정하기 위해 설정에서 변경할 수 있는 부분이 있을까요? 아니면 이 플러그인의 버그인가요?

[angus (Angus McLeod)]

안녕하세요 @mattdm,

공개된 상태라면, 원본 WP 게시물과 발췌문이 포함된 Discourse 게시물의 링크를 공유해 주실 수 있을까요?

WP Discourse 플러그인은 기본적으로 WP 게시물에서 발견되는 HTML을 그대로 Discourse로 전달하고, Discourse가 이를 Discourse 게시물에 포함되도록 처리합니다. 따라서 Discourse에서 Wordpress 게시물의 스니펫으로 HTML이 어떻게 표시되는지는 두 가지 요소에 달려 있습니다.

1. Wordpress에서 HTML의 원래 구조 (예시)
2. Discourse의 마크다운 파서가 Discourse 게시물 표시를 위해 HTML을 어떻게 파싱하는지 (예시).

따라서 이는 기본적으로 WP Discourse나 Discourse 자체의 영역 밖에 있는 Wordpress HTML 구조 관련 질문이거나, HTML 파서가 어떻게 동작해야 하는지에 대한 의견의 영역일 가능성이 높습니다. 물론 이 부분에서 명확한 개선이 가능한 경우도 있습니다.

그럼에도 불구하고, 여기에서 파싱 관련 세부 사항을 살펴보는 것이 유용할 때가 있습니다. 따라서 WP 게시물의 HTML 구조에 대해 더 자세한 정보가 있으시다면 공유해 주시면 추가로 조사해 보겠습니다

[simonk (Simon King)]

저는 이 Discourse 게시글에서 비슷한 문제를 겪었습니다. 이 게시글은 RSS 폴링 플러그인(WordPress 플러그인이 아닙니다)에 의해 생성되었습니다:

Network Operators Deploy Over 100,000 Cambium Networks CBRS Fixed Wireless...

첫 번째 줄의 ™는 실제로 HTML <img> 태그였으며, RSS 플러그인은 이를 올바르게 가져왔습니다. 그러나 Discourse가 “이미지의 로컬 복사본 다운로드” 단계를 수행할 때 게시글이 깨졌습니다:

[simonk (Simon King)]

@mattdm의 문제도 같은 것 같네요:

Would you use this as your homepage?

[angus (Angus McLeod)]

@simonk 유용한 조사 감사합니다. 두 분 모두 사이트 설정의 비활성화된 이미지 다운로드 도메인에 WP 도메인을 입력하여 이 문제를 해결할 수 있습니다.

이 문제를 더 깊이 파고들고 싶으시다면, 예를 들어 이를 자동화 방식으로 처리하려는 경우라면, @mattdm님의 경우와 님의 경우 사이의 차이가 그 복잡성을 보여줍니다. @mattdm님은 브라우저가 HTML <p> 및 <img> 요소를 처리하는 방식이 마크다운에서 줄바꿈으로 이어지기를 기대하는 반면, 님은 거의(완전히는 아니지만) 반대, 즉 이미지가 원래 HTML의 기존 <img>와 동일한 크기로 인라인으로 계속 표시되기를 기대하고 계십니다.

이 문제의 해당 측면에 대해 더 자세히 알아보려면, 다음과 같은 기존 게시물을 참고할 수 있습니다.

HTML로 감싸인 이미지의 마크다운 렌더링 문제

Sorry for the multiple posts in this topic, but the issue also affects images in posts that are created through our Zendesk plugin when the sync comments from zendesk setting is enabled. The difficulty with this case is that it’s not possible to know the source of the images before hand, so the workaround of adding the image src to the disabled image download domains setting will not work. Is there any way we could just prevent remote images from being downloaded to local if the image tag is wr…

[mattdm (Matthew Miller)]

@simonk 감사합니다 – 네, 정확히 그렇습니다.

@angus

둘 다 사이트 설정의 disabled image download domains 에 각자의 WP 도메인을 입력하면 이 문제를 해결할 수 있습니다.

@angus, 이렇게 하면 어떤 결과가 되나요? 이미지가 전혀 표시되지 않나요, 아니면 워드프레스 사이트의 원본 이미지로 링크가 연결되나요?

[mattdm (Matthew Miller)]

@angus

그는 브라우저가 HTML의 <p>와 <img> 요소를 처리하는 방식이 마크다운에서 줄바꿈 형태로 이어지기를 기대하는 반면, 당신은 거의(완전히는 아니지만) 반대, 즉 이미지가 기존 HTML의 기존 <img>와 동일한 크기로 인라인으로 표시되기를 기대하고 있습니다.

그러나 마크다운이 렌더링되지 않고 원본 마크다운으로 표시되는 것은 _절대 옳을 수 없다_는 점에는 모두 동의할 수 있을 것입니다. 특히 해당 마크다운이 _플러그인에 의해 생성된 것이라면요. 제가 무언가를 놓치고 있는 건가요?"}

[angus (Angus McLeod)]

@mattdm

이미지가 전혀 없는 건가요, 아니면 워드프레스 사이트의 원본 이미지에 크로스링크가 걸리는 건가요?

이미지는 원본으로 핫링크됩니다.

@mattdm

마크다운을 렌더링하지 않고 원본 그대로 표시

죄송합니다, 무슨 말씀이신지 이해가 안 됩니다. 줄바꿈에 대한 우려였나요? 게시된 버전(즉, 편집이 아닌 읽기 모드)에 마크다운 원본이 그대로 포함되어 있고, 그게 문제라는 말씀인가요?

@mattdm

마크다운은 _플러그인이 생성한 것입니다

플러그인은 단순히 원본 HTML만 전송합니다. 마크다운은 포스트가 디스코스에서 처리될 때 생성됩니다.

disabled image download domains 설정을 시도해 보고 어떻게 되는지 확인해 보세요.

[mattdm (Matthew Miller)]

@angus

미안하지만, 제가 혼란스러워요. 줄바꿈에 대한 우려였나요? 게시된 버전(즉, 편집이 아닌 읽기 모드)에 원시 마크다운이 포함되어 있다는 것이 문제라는 말씀인가요?

줄바꿈이 없어서, Discourse가 페이지를 사용자에게(편집자가 아닌) 표시할 때, ![](upload://def2zSzNAJtyuOorvTI2eV7rGW1.png)가 있는 위치에 이미지가 표시되는 대신, 해당 텍스트가 그대로 표시됩니다. 실제로 이미지가 표시되려면, 자동 게시된 후 사람이 개입하여 각 이미지 인스턴스 앞에 줄바꿈을 추가하도록 게시물을 편집해야 합니다.

[mattdm (Matthew Miller)]

@angus

비활성화된 이미지 다운로드 도메인을 시도해 보고 결과를 확인해 보세요.

그렇게 할 수는 있지만, 이미지가 다운로드되기를 _더 선호_합니다. 다른 사이트가 다운되거나 블로그가 변경되는 등의 상황에서 유용한 기능이기 때문입니다. 그리고 현재 호스팅 용량 한계에 가까이 있는 상황이 아니므로 공간에 대해 걱정하지 않습니다.

[angus (Angus McLeod)]

아, 알겠습니다. 설명해 주셔서 감사합니다. 솔직히 말씀드리면, 위에서 링크한 토픽에서 논의된 이유들 때문에 이 문제는 당분간 변하지 않을 가능성이 높습니다. 예를 들어

우리에게 중요한 것은 콘텐츠의 무결성을 유지하는 것이므로, 줄바꿈 솔루션은 아마도 도입되지 않을 것입니다.

문제는 귀하가 설명하는 문제를 자동으로 수정하려고 하면 오히려 다른 문제가 발생할 수 있다는 점입니다. 현재 이 문제에 대한 해결책은 disabled image download domains 사이트 설정에 워드프레스 도메인을 추가하는 것입니다.

수정 이 부분에 대해 작은 제안을 하나 올렸지만, 이는 추측에 기반한 것이며 현재 이 문제에 대한 해결책은 워드프레스 도메인에 대한 이미지 다운로드를 비활성화하는 것임을 다시 한번 강조합니다.

HTML로 감싸인 이미지의 마크다운 렌더링 문제

이 문제가 다시 발생했습니다 그냥 생각나는 대로 말씀드리는 건데, 여기 있는 까다로운 문제(즉, HTML을 마크다운으로 변환하는 과정)를 우회할 수 있을지 궁금합니다. 다시 한번 정리해 보겠습니다(이 문제를 헤아리는 데 도움이 되기 위해). Discourse는 게시물 콘텐츠 생성을 위해 HTML 가져오기를 지원합니다(예: WP Discourse에서 가져온 HTML). 특정 컨텍스트에서는 사용자가 원래 HTML의 무결성이 정확히 유지되기를 기대합니다. 여기서 '무결성’은 적어도 두 가지 측면이 있습니다: 콘텐츠가 렌더링되는 방식, 예: 줄바꿈 미디어가 호스팅되는 위치, 예: 깨진 이미지를 방지하거나 보안상의 우려를 해결하기 위해 이미지를 로컬로 다운로드하는 것 HTML을 마크다운으로 변환하는 과정은 첫 번째 유형의 무결성에 문제를 일으킬 수 있지만, 현재 두 번째 유형의 무결성을 확보하는 데 필요합니다. 따라서 특정 가져온 게시물의 경우, 가져온 H…

[mattdm (Matthew Miller)]

여기서 근본적인 부분이 전혀 이해가 되지 않습니다. 현재 동작 방식으로는 콘텐츠의 무결성이 어떻게 유지되고 있는 건가요? 분명히 유지되고 있지 않습니다.

HTML을 마크다운으로 교체하는 것이라면, 올바르게 렌더링되는 마크다운으로 교체하는 것이… 유일한 정답이라고 생각합니다.

워드프레스 측에서 특별한 작업을 하고 있는 것도 아닙니다. 그냥 일반적인 블록 에디터와 사람들이 워드프레스의 일반적인 방식으로 이미지를 추가하는 것뿐이죠.

일단 “이미지 다운로드 비활성화” 설정을 사용해 도움이 되는지 확인해 보겠습니다. 하지만 이게 그냥 잘 동작해 주는 것이 훨씬, 훨씬 좋겠습니다.

[angus (Angus McLeod)]

@mattdm

HTML을 마크다운으로 대체한다면, 올바르게 렌더링되는 마크다운으로 대체하는 것이… 유일한 정답인 것 같습니다.

말씀하시는 뜻을 이해하며, 그것이 이상적이지 않다는 것은 아닙니다. 하지만 마크다운 기반 토론 엔진을 완벽한 HTML 렌더링 엔진으로 만드는 것은 쉬운 일이 아닙니다. 개별 사례가 겉보기에는 단순해 보일지라도(예: 단순히 새 줄을 추가하는 것)요.

Discourse에서 블로그 포스트의 전체 HTML을 렌더링할 수 있는 것은 좋은 기능이지만, 결국 마크다운 형식의 토론에 초점을 맞춘 시스템에서 하나의 기능일 뿐입니다.

제가 링크한 토론을 데이비드의 최근 게시물을 포함하여 따라가 보시면, 여기서 취할 수 있는 몇 가지 가능한 방향이 있음을 보실 수 있습니다. 그중 하나가 성공할 수 있으며, 이 특정 사례를 해결할 것입니다. 더 쉬운 해결책이 있었다면, 저는 확실히 Discourse에 PR을 만들어 이를 해결했을 것입니다.

이미지 다운로드를 비활성화하는 데 문제가 있으시면 알려주세요. 그 부분도 함께 해결하겠습니다. 기술적 측면에서 실행 가능한 진행 경로를 찾으면 알려드리겠습니다.

[mattdm (Matthew Miller)]

감사합니다! 정말 감사드립니다!

설정을 업데이트했고, 어떻게 작동하는지 보고하겠습니다.