GPS 데이터를 워드프레스 메타 데이터로 저장

디지털카메라¹로 사진을 촬영하면 사진 촬영 위치 정보가 함께 저장되는데, EXIF 필드 중 ‘GPS tags’로 분류되는 필드에 저장됩니다. 물론 기기가 위치 정보를 읽기 위한 사용자의 GPS 설정이 선행되어야 합니다.

EXIF GPS Tags

EXIF GPS tags 필드는 다음과 같이 4가지입니다.

• GPSLatitude: 위도
• GPSLatitudeRef: North(N, 북위, 양수), South(S, 남위, 음수)
• GPSLongitude: 경도
• GPSLongitudeRef: East(E, 동경, 양수), West(W, 서경, 음수)

위의 EXIF 필드 이름(Tag Name)은 ‘규격’으로 정해진 것이며, 워드프레스와 관련이 없습니다. 또, 남위 기준 위도라면 ‘음수’, 서경 기준 경도라면 ‘음수’로 처리해야 위도와 경도 데이터에 맞는 위치 정보를 얻을 수 있습니다.

사진과 관련된 EXIF 등의 외부 정보는 이 정도로 간략하게 정리하며, 이해하지 않아도 됩니다. 예제 과정에서 결과를 보고 대략 알 수 있으며, 깊은 이해는 필요하지 않습니다. 또, 필자는 이와 관련한 전문 지식이 없고 위치 정보를 워드프레스에서 활용하는 핵심만 추출하여 전달함을 미리 알립니다.² 머뭇거릴 필요 없이 바로 위치 정보를 워드프레스에 추가해봅니다.

워드프레스의 원본 이미지 메타 데이터 처리

앞에서 제공한 사진파일은 모두 ‘사진 촬영 위치’ 정보를 포함하고 있습니다. 워드프레스가 기본으로 그 정보를 메타 데이터로 저장하지 않기에 연습장 페이지에 그 데이터가 나오지 않았다는 것뿐입니다. 위치 정보를 가진 사진파일을 워드프레스에 저장하기 위해서는 사용자가 (원본) 이미지를 올릴 때 어떤 과정에서 이미지의 정보를 읽는지 먼저 알아야 합니다. 그러나, 워드프레스의 거의 모든 실행 흐름은 ‘워드프레스 훅’에 의존한다고 봐도 문제가 없으므로 그 훅을 사용하거나 모른다면 찾는 것이 먼저입니다. 물론, 예제에서는 필자가 안내하므로 그 과정이 필요하지 않습니다.

다음의 안내는 실제 예제 구성의 과정이므로 혹시 지금까지 따라 했다면 계속 이어가야 합니다.

• 테마 루트 inc/image-functions.php 파일을 엽니다.
• 맨 끝에 다음의 코드를 추가하고 저장합니다.

/* 이미지 올릴 때 EXIF GPS 정보가 있다면 추가 */
add_filter( 'wp_read_image_metadata', 'add_photo_exif_geotags', 10, 3 );
function add_photo_exif_geotags( $meta, $file, $sourceImageType ) {
    $exif = @exif_read_data( $file );
    // 위도
    if ( !empty( $exif['GPSLatitude'] ) ) {
        $meta['latitude'] = $exif['GPSLatitude'];
    }
    if ( !empty( $exif['GPSLatitudeRef'] ) ) {
        $meta['latitude_ref'] = trim( $exif['GPSLatitudeRef'] );
    }
    // 경도
    if (!empty( $exif['GPSLongitude']) ) {
        $meta['longitude'] = $exif['GPSLongitude'];
    }
    if ( !empty( $exif['GPSLongitudeRef'] ) ) {
        $meta['longitude_ref'] = trim( $exif['GPSLongitudeRef'] );
    }

    return $meta;
}

코드는 워드프레스에 원본 이미지를 등록할 때 GPS 정보가 있다면 이미지의 메타 데이터에 추가한다는 것으로 2번 줄의 wp_read_image_metadata 필터 훅이 핵심입니다. 4번 줄의 exif_read_data PHP 함수로 EXIF 데이터를 추출하여 $meta 변수(인자)의 배열에 지정한 키의 데이터로 생성합니다.

코드에 나오는 $meta 변수의 배열 키 latitude, longitude 등은 앞에서 안내한 EXIF 규격 필드가 아니므로 사용자가 원하는 것으로 등록하면 됩니다.

이 코드의 결과를 보면 이해를 더할 수 있습니다. 다음 순서로 진행합니다.

• 관리페이지 미디어 라이브러리 목록에서 존재하는 모든 이미지 파일을 삭제합니다.
• 다시, 제공한 사진파일 3개를 모두 올립니다.
• 연습장 페이지에서 결과를 확인합니다. (연습장 파일에 지난 과정의 코드가 있어야 합니다.)

연습장 페이지를 새고 고쳐 결과를 확인하면 페이지 아래에 추가된 GPS 데이터를 볼 수 있습니다. 다음은 제목이 ‘달나라 여행’인 이미지의 GPS 데이터입니다.

[latitude] => Array
    (
        [0] => 66/1
        [1] => 13/1
        [2] => 90999/1709
    )

[latitude_ref] => N
[longitude] => Array
    (
        [0] => 156/1
        [1] => 16/1
        [2] => 165/16
    )

[longitude_ref] => W

데이터를 보면 어떤 형식으로 GPS 메타 데이터가 워드프레스에 추가되는지 짐작할 수 있는데, 한마디로 ‘분수’의 배열 데이터로 저장된 것입니다. 각 배열 데이터는 순서대로 ‘도, 분, 초’를 의미합니다.

예제에서는 GPS 데이터를 싱글 이미지 포스트 페이지와 ‘발자국’ 페이지(타입 page 포스트)에 구글 지도를 사용하여 표시할 것입니다. 그러나, 이 분수 배열 데이터를 그대로 구글 지도에서 사용할 수 없으므로 다른 포맷으로 변환해야 합니다.

GPS 메타 데이터 포맷의 변환

먼저, 보통의 위도와 경도를 포함한 GPS 정보(좌표) 포맷은 다음처럼 2가지입니다.

• 도/분/초 포맷 (Degrees/Minute/Second): 예) 37° 33’58.87″N, 126° 58’40.63″E
• 십진수 포맷 (Decimal Degrees): 예) 37.6658609, 127.0317674

예제는 ‘십진수 포맷’으로 GPS 데이터를 사용할 것입니다. 이때 ‘언제’ 데이터 포맷을 변경할 것인가를 고려해야 하는데, 앞에서 사용한 wp_read_image_metadata 훅 단계에서 변환하여 저장합니다. 다음 안내에 따라 진행합니다.

• 앞에서 테마 루트 inc/image-functions.php 파일에 추가한 코드를 다음 코드로 대체합니다.

/* 이미지 올릴 때 EXIF GPS 정보가 있다면 추가 */
add_filter( 'wp_read_image_metadata', 'add_photo_exif_geotags', 10, 3 );
function add_photo_exif_geotags( $meta, $file, $sourceImageType ) {
    $exif = @exif_read_data( $file );
    // 위도
    if ( !empty( $exif['GPSLatitude'] ) ) {
        $meta_array['latitude_array'] = $exif['GPSLatitude'];
        $meta['latitude'] = wp_exif_frac2dec( $meta_array['latitude_array'][0] ) +
                            wp_exif_frac2dec( $meta_array['latitude_array'][1] ) / 60 +
                            wp_exif_frac2dec( $meta_array['latitude_array'][2] ) / 3600;
    }
    if ( !empty( $exif['GPSLatitudeRef'] ) ) {
        $meta['latitude_ref'] = trim( $exif['GPSLatitudeRef'] );
    }
    // 경도
    if (!empty( $exif['GPSLongitude']) ) {
        $meta_array['longitude_array'] = $exif['GPSLongitude'];
        $meta['longitude'] = wp_exif_frac2dec( $meta_array['longitude_array'][0] ) +
                            wp_exif_frac2dec( $meta_array['longitude_array'][1] ) / 60 +
                            wp_exif_frac2dec( $meta_array['longitude_array'][2] ) / 3600;
    }
    if ( !empty( $exif['GPSLongitudeRef'] ) ) {
        $meta['longitude_ref'] = trim( $exif['GPSLongitudeRef'] );
    }

    return $meta;
}

• 관리페이지 미디어 라이브러리 목록의 모든 이미지를 삭제하고, 제공한 이미지 파일 3개를 다시 업로드합니다.
• 연습장 페이지를 새로 고쳐 결과를 확인합니다.

연습장 페이지에서 제목이 ‘달나라 여행’인 이미지의 GPS 관련 메타 데이터만 나열하면 다음과 같을 것이며, 결과 데이터에 관한 것은 더 안내할 필요가 없을 만큼 간결합니다.

[latitude] => 66.231457480008
[latitude_ref] => N
[longitude] => 156.26953125
[longitude_ref] => W

대체하여 추가한 코드는, 7번 줄로 원본 이미지의 GPS 위도 데이터를 임시 변수에 넣고, 8~10번 줄에서 각 데이터를 워드프레스 wp_exif_frac2dec 함수를 사용하여 십진수로 변환한 후, 다시 ‘분’ 데이터는 60으로, ‘초’ 데이터는 3600으로 나눈 다음, 3개의 값을 모두 더하여 $meta 변수 배열 데이터로 생성한 것입니다.

GPS에 관한 간략한 일반 내용을 안내할 때 S(South, 남위), W(West, 서경)일 경우 ‘음수’로 표기해야 올바른 위치 정보를 표현할 수 있다고 했습니다. wp_read_image_metadata 훅 단계에서 방향 정보의 값 ‘S’, ‘W’를 조건으로 음의 기호(-)를 추가하여 저장하는 것을 생각할 수도 있지만, 나중에 구글 지도를 이용하여 싱글 이미지 포스트 페이지에 사진 촬영 위치 정보를 표시할 때 테마 파일에 직접 조건을 사용하여 음의 기호를 추가한 후 지도 마커를 출력합니다.

또, 예제 전체에서 이미지 포스트의 원본 이미지 GPS 메타 데이터에는 음의 기호를 포함하여 저장하지 않습니다. 다음 장부터 이어서 나오는 워드프레스 이미지 처리 과정의 다른 훅을 사용하여 이미지 포스트의 이미지 메타 데이터(_wp_attachment_metadata 필드)가 아닌 이미지 포스트의 새로운 메타 데이터 필드(커스텀 필드^{Custom Fields})를 추가하여 다른 데이터와 함께 위치 정보를 음의 기호가 포함된 데이터로 저장하여 지도 출력에 활용합니다.

다음 링크로 이번 장에서 변경한 inc/image-functions.php 파일을 남깁니다. 지난번과 마찬가지로 테마 루트에 덮어쓰세요.