Softonic

Markdown 이미지 생성기

단계 1 / 3
다음

Markdown의 이미지 구문, ![alt](src "title"), 은 틀리기 쉽습니다. 괄호를 빠뜨리거나, alt 텍스트를 잊거나, 링크 구문과 혼동하면 문서에 깨진 자리표시자가 렌더링됩니다. 이 생성기는 이미지 URL, alt 텍스트, 선택적 title, 선택적 링크 대상을 받아 인라인과 참조 스타일 Markdown을 모두 내보내므로, 문서에 맞는 것을 붙여 넣을 수 있습니다.

Markdown 이미지 구문을 생성하는 방법

  1. 1

    이미지 URL 붙여넣기

    절대 URL(https://...) 또는 상대 경로(/images/hero.png).

  2. 2

    alt 텍스트 작성

    이미지가 보여 주는 것을 한 문장으로. 접근성을 위해 필수입니다.

  3. 3

    title 추가(선택)

    대부분의 렌더러에서 마우스를 올리면 표시됩니다.

  4. 4

    링크로 감싸기(선택)

    URL을 지정해 이미지를 클릭할 수 있게 만드세요.

  5. 5

    스니펫 복사

    인라인 `![alt](src)` 또는 참조 스타일 `![alt][ref]` 출력을 얻습니다.

네 가지 구문 형태

인라인, title 없음:

![제품 대표 이미지](/images/hero.png)

인라인, title 있음:

![대표 이미지](/images/hero.png "2026년 10월에 촬영한 대표 이미지")

클릭 가능한 이미지(링크로 감싼 이미지):

[![대표 이미지](/images/hero.png)](https://example.com/buy)

참조 스타일(긴 URL을 단락 밖에 둠):

![대표 이미지][hero]

[hero]: /images/hero.png "2026년 10월에 촬영한 대표 이미지"

alt 텍스트가 중요하다

  • 접근성. 스크린 리더가 alt 텍스트를 읽어 줍니다. alt가 비어 있으면 시각 장애가 있는 사용자에게 이미지는 사실상 보이지 않습니다.
  • SEO. 검색 엔진은 alt 텍스트로 이미지 내용을 이해합니다. alt가 없으면 이미지 검색 유입이 줄어듭니다.
  • 우아한 폴백. 이미지가 로드되지 않으면 사용자가 보는 것은 alt 텍스트입니다.

좋은 alt 텍스트와 나쁜 alt 텍스트

의도 좋은 alt 나쁜 alt
제품 사진 “나무 책상 위의 빨간 세라믹 머그, 손잡이는 왼쪽” “머그 이미지”
스크린샷 “이메일, 비밀번호, SSO 버튼이 있는 로그인 페이지” “screenshot.png”
장식용 ""(순수 장식에는 빈 alt) “장식 이미지”
인포그래픽 “막대 차트: 매출이 2023년 10억 원에서 2026년 30억 원으로 증가” “막대 차트”

함정

  • alt를 “~의 이미지”로 시작하지 마세요, 스크린 리더가 이미 이미지라고 알립니다.
  • 절대 경로와 상대 경로. 상대 경로는 문서가 해당 폴더 밖에서 렌더링될 때(예: GitHub 미리보기) 깨집니다. 확실하지 않으면 절대 경로를 쓰세요.
  • URL의 공백은 URL 인코딩이 필요합니다. 공백 대신 %20을 쓰지 않으면 이미지가 로드되지 않습니다.

자주 묻는 질문

순수 Markdown에서는 안 됩니다. 대부분의 렌더러(GFM, Docusaurus, MkDocs)는 크기 지정을 위해 원시 HTML로 폴백합니다, <img src="..." width="400" alt="...">. 일부 방언은 ![alt](url =400x)를 지원하지만 보편적이지 않습니다.

alt는 스크린 리더가 읽어 주고 이미지가 실패하면 표시되는 텍스트입니다. title은 마우스를 올렸을 때 나타나는 툴팁으로, 보통 선택 사항이며 터치 기기에서는 무시됩니다.

이미지가 여러 번 나타날 때, 또는 URL이 길어 단락이 어수선해질 때입니다. 참조 스타일은 본문을 읽기 쉽게 유지하고 URL 변경을 한 번의 편집으로 끝냅니다.

네, 링크 안에 이미지를 중첩하는 것([![alt](img)](url))은 표준 CommonMark입니다. 렌더링 결과는 <img>를 감싸는 하이퍼링크입니다.

관련 도구

보색 찾기

어떤 입력에 대해서도 보색을 찾습니다. HSL 반대 색, 분할 보색 쌍, 그리고 접근성 있는 조합 제안을 반환합니다.

Webpack 설정 생성기

순수 JavaScript, React, Vue용 webpack 5 webpack.config.js를 만드세요. TypeScript, Babel, CSS 또는 Sass, 이미지, HtmlWebpackPlugin, 개발 서버, npm install 명령까지 함께 제공합니다.

텍스트 파일 인코딩 변환기

깨진 문자를 고치기 위해 텍스트를 UTF-8, UTF-16, Latin-1, Windows-1252 등 여러 인코딩 사이에서 변환하세요.

XML 포매터

일관된 들여쓰기로 XML 문서를 정렬 출력하고, 정확한 줄 번호로 적격성 오류를 잡아냅니다.

색상 혼합기

두 HEX 색상을 2-20개의 균등한 색상 견본으로 섞습니다. 양 끝 색상을 포함해 각 중간 색상을 대문자 HEX 코드로 확인하세요.

Protocol Buffers 디코더

hex, Base64, Base64URL, 텍스트 또는 파일의 Protobuf 와이어 형식 바이트를 브라우저에서 디코딩하고 정확한 필드 후보를 확인한 뒤 비공개 보고서로 내보냅니다.

이 도구는 다른 언어로도 제공됩니다