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>를 감싸는 하이퍼링크입니다.

관련 도구

ASCII 표 참조

NUL, LF, DEL 같은 제어 문자를 포함해 모든 문자에 대한 10진수, 16진수, 8진수, 2진수, HTML 숫자 문자 참조를 담은 0부터 127까지의 전체 ASCII 표.

HTML 문자 참조

HTML 엔티티의 검색 가능한 목록, 각 엔티티의 이름 및 숫자 코드, 그리고 특수 문자 및 기호에 대한 1클릭 복사 기능을 제공합니다.

키보드 단축키 참고표

macOS, Windows, Linux에서 VS Code, Chrome, GNU Readline을 쓰는 Bash의 문서화된 기본 단축키를 검색합니다.

보색 찾기

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

색상 틴트 생성기

기준 색의 밝은 틴트를 생성합니다. 디자인 시스템 토큰, 배경, 호버 상태를 위한 3-20단계 스케일.

이메일 검증기

이메일 주소를 검증합니다. RFC 5322 구문 검사, 실시간 MX 레코드 조회, 그리고 로컬 파트, 도메인, 길이 정보를 제공합니다. 이메일은 전송되지 않습니다.

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