워드프레스에서 이미지 업로드시 자동으로 워드프레스 이미지 alt 값을 자동으로 넣어주는 방법에 대해서 살펴봅니다.

워드프레스가 4.7로 업그레이드되면서 좋아진 점도 많지만 불편해진 점이 하나 있다.

그것은 이미지를 올릴 시 예전 버젼에서는 자동으로 alt 값을 올려주었던 기능이 삭제되면서 이미지 올릴 때 일일히 alt갑을 넣어야 한다.

SEO 때문에 가능하면 alt 값을 넣는데 4.7부터 자동으로 alt 값을 넣어주는 기능이 없어지면서 여간 불편한 게 아니다. 나처럼 이미지 파일 이름을 그대로 alt 값으로 사용하는 사람에게는 엄청 아쉬운 기능이다.

이는 특히 영화의 스크린 샷을 올릴때와 같이 수십장의 이미지를 동시에 올릴 때는 특히 불편하다. 일일히 at값을 일력해 주어야 하므로..

1. 워드프레스는 왜 이미지 업로딩 시 alt 값을 자동으로 삽입하지 않을까?

그러면 왜 워드프레스 4.7에서는 이미지 업로딩 시 이미지 alt 값을 자동으로 삽입되는 기능을 삭제한 것일까?

이에 대해서는 워드프레스 블로그에 올려진 Improving accessibility of image alternative text in 4.7 라는 글을 보면 그 힌트를 얻을 수 있다.

이 설명에 따르면 예전 버젼에서 자동으로 at 값을 넣어주는 기능은 ‘edbc4ef7.jpg’와 같이 무의미한 파일 이름인 경우에도 무조건 적용되다보니 alt 값이 이미지를 이해하는 데 전혀 도움이 안되는 경우가 많다.

이는 스크린 리더 기능을 사용하는 사람(아마 대부분 시각 장애인과 같은 장애인들일 것이다.)에게는 문장을 이해하는데 오히려 방해가 되기 때문에 4.7에서는 이 기능을 삭제했다고 한다.

그 결과 워드프레스 4.7부터는 이미지를 업로드하면 alt 값이 비어져서 나온다.

<img src="https://example.wordpress.org/wp-content/uploads/2017/01/edbc4ef7-1024x683.jpg" alt="" width="700" height="467" />
Code language: PHP (php)

미국에서 판매되는 기기는 장애인이 기기를 사용할 수 있도록 보완 장치(SW)를 해야한다는 accessibility관련 법이 있다. 이에 따라 핸드폰 등에는 시각 장애인이 화면에 나오는 내용을 알 수 있도록 읽어 주는 스크린 리더 기능이 의무적으로 적용되어 있다.

이 스크린 리더가 글을 읽어 줄 시 alt 값을 토대로 이미지에 대한 설명을 해주는데, 이 위에서 예를 든 것처럼 alt값이 정체 불명으로 이상하게 되어 있으면 오히려 내용을 이해하는데 방해가 되므로 설명을 넣어주려면 제대로 넣어라는 의미로 자동 삽입 기능을 빼것으로 추정된다.

장애인 접근성 측면에서 일견 이해가 되는 상황이긴 하다. 그리고 글을 올리는 사람은 장애인들도 그리고 서버 상황으로 이미지가 보이지 않을 시 설명해 줄 수 있도록 alt값을 제대로 넣어 주는것도 필요하다고 생각된다.

▽ iPad에서 상황을 음성으로 알려주는 talk back 기능을 설명하는 이미지,
이렇게 시각 장인들도 기기를 사용할 수 있도록 해주는 accessibility도 중요해지고 있고 법적으로도 그 규정이 강화되고 있다.

그렇지만 단순하게 기능 삭제만이 능사였을까 하는 아쉬움은 있다. alt 값에 대한 충분한 이해가 있고 글에 대해서 책임을 지려고 한다면 그리고 SEO의 중요성을 충분히 알고 있는 블로그 운영자라면 옵션으로라도 alt 값 자동 입력할 수 있도록 했다면 더 나은 결과가 나오지 않았을까하는 생각을 해 본다.

(냉정히 생각해 보면 그렇게 옵션을 주면 문제점은 이전과 똑 같이 해결되지 않을 것으로 판단할 수도 있겠다.)

실제로 글을 올리는 사이트 운영자 입장에서는 매우 불편하다. 아무리 취지가 좋아도 불편함을 토대로 진행되는 것이라면 환영받을 수 없다.

그러면 에전처럼 이미지 업로드 시 자동으로 alt 값이 삽입되도록 하는 방안은 없을까?
워드프레스는 사용하는 사람들이 많다보니 이에 대한 해결책을 제시하는 사람들이 이미 있다.

방법은 너무도 일반적인 관련 플러그인이 나와 있고 또는 functions.php 파일에서 function함수를 추가하는 방법이 소개되어 있다.

1. Automatic image ALT attributes 플러그인 적용

플러그인 적용 방식이야 너무 기초적이므로 플러그인 이름과 그 링크를 소개하는 것으로 정리하고자 한다.

이 플러인을 소개하는 Automatic image ALT attributes 라는 글을 참조하거나 워드프레스 관리자화면에서 플러그인 추가를 하면 된다.

2. 워드프레스 functions.php 파일에서 function함수를 추가 방법

플러그인이 속도를 저하시킨다는 인식이 강하다면 플러그인을 사용하지 않고 직접 functions.php 파일에서 function함수를 추가하는 방법이 있다.

functions.php 파일에서 아래 코드를 적용해보자
이 방식은 How to Auto Fill the Alt Tag When Inserting Images in WordPress 4.7 라는 글을 참조하여 소개한다.

add_filter( 'image_send_to_editor', 'wpdb_restore_alt_fallback', 10, 8 );
function wpdb_restore_alt_fallback( $html, $id, $caption, $title, $align, $url, $size, $alt ) {
    if ( empty( $alt ) ) {
        if ( ! empty( $caption ) {
            $alt = $caption;
        } else {        
            $alt = get_post_field( 'post_name', $id );
        }
    }
    return get_image_tag( $id, $alt, $title, $align, $size );
}
Code language: PHP (php)