Gravatar - 사용자의 아바타와 프로필을 불러오기

웹 애플리케이션을 만들때, 굳이 DB에 회원의 아바타나 프로필을 저장할 필요가 없다면(대부분 개인정보를 수집하기를 원할테지만...), 미리 입력되어 있는 해당 인물의 정보를 불러들여 가입시 회원정보를 입력하는 수고를 덜게 할 수 있는 애플리케이션들이 있습니다. 외국 웹 애플리케이션에서는 이를 연동하여 제작되는 것들을 종종 확인할 수 있습니다.

Gravatar 소개

그라바타(Gravatar - Globally Recognized Avatar)는 이메일주소를 기반으로 사용자의 프로필과 아바타를 등록해두고 필요에 따라 불러들여 매번 각각의 애플리케이션마다 이를 작성해야 하는 노고를 줄여주는 애플리케이션이다. 매일 80억건 이상의 아바타 이미지가 그라바타에 의해 서비스되고 있으며, WordPress, github, DISQUS, stackoverflow 등과 같은 유명 애플리케이션 및 사이트에서 사용되고 있으며, 이를 무료로 제공하고 있다.

HOME

Gravatar

DOC

개발자리소스

아래와 같은 아이콘들을 댓글 작성이나 프로필란에서 본 적이 있다면 이미 그라바타가 적용된 애플리케이션을 사용해 본 적이 있는 것이다.

그라바타에서는 등록된 아바타와 프로필을 불러들여 사용할 수 있게 URL을 제공하고 있으며, 이는 HTML을 작성할 수 있는 곳이면 어디든지 호출할 수 있다.

그라바타 사용상의 이점

사이트 관리자 및 개발자는 :

• 조금의 노력을 기울이면 그라바타를 쉽게 추가할 수 있다.
• 아바타를 관리하기 위한 추가적인 플러그인을 마련할 필요가 없다.
• 사이트에 댓글을 다는 사용자가 그라바타를 사용한다면, 계정 및 이미지를 관리할 필요가 없다.

사용자는 :

• 방문하는 모든 사이트에 프로필이나 아바타를 등록할 필요가 없어진다.
• 그라바타의 이미지만 수정하면 이와 연결된 그라바타를 사용하는 모든 애플리케이션 및 사이트에 반영된다.
• 여러개의 메일계정을 그라바타에 연결하고 각각의 메일계정에 보여지는 아바타를 다르게 설정하는 것이 가능하다.

Gravatar URL

그라바타 홈페이지에서 회원 가입후 아바타를 등록하고 간단히 프로필을 작성했다면, 이미지와 프로필 데이터를 요청하는데 필요한 URL을 생성해 이를 호출할 수 있다.

그라바타의 API는 인증을 요구하지 않는 간단한 HTTP GET 요청을 기반으로 한다. 아래에서 설명하지 않는 다양한 옵션과 코드사용법등은 개발자리소스 문서를 참고하자.

해시 생성

그라바타의 모든 URL들은 이메일주소의 해시(Hash)^[각주:1] 값에 기초를 두고 있다. 이미지와 프로필 둘다 이메일 해시 값으로 접속하고, 이 값은 시스템 안의 신원(identity)을 식별하는 기본 방법이다. 일관되고 정확한 해시를 보장하기 위해 아래의 단계를 거쳐 해시를 생성하도록 한다.

아래에선 PHP의 md5() 를 이용해 해시를 생성하고 있으나, 웹상에서 검색해보면 md5 Hash Generator와 같은 해시생성기들이 있으니 프로그래밍적으로 접근할 것이 아니라면 이를 이용하도록 하자.

1. 이메일 주소의 앞과 뒤에 공백을 제거한다.
2. 모든 문자를 강제로 소문자로 만든다.
3. 최종 문자열은 md5 해시 값이다.

예를 들면, "MyEmailAddress@example.com " 과 같이 이메일 주소 뒤쪽에 공백을 입력했을때의 해시 값과 이를 제거한 해시 값이 다르기 때문에 md5() 를 실행하기 전에 공백을 제거해야 한다. 아래에선 PHP를 이용한 검증방법이고 자바스크립트에서는 md5()를 기본적으로 제공하지 않아 따로 플러그인을 사용해야 한다.

echo md5( "MyEmailAddress@example.com " ); //  공백이 있을때의 예 "f9879d71855b5ff21e4963273a886bfc"

$email = trim( "MyEmailAddress@example.com " );  // 공백 제거 "MyEmailAddress@example.com"
$email = strtolower( $email );  //  소문자로 "myemailaddress@example.com"
echo md5( $email );  // 해시생성 "0bc83cb571cd1c50ba6f3e8a78ef1346"

이를 한줄로 결합하면 아래와 같은 코드가 된다.

echo md5( strtolower( trim( "MyEmailAddress@example.com " ) ) );

이렇게 생성된 해시 값을 이용해 아래의 이미지 요청을 실습해보자.

Gravatar 이미지 요청

기본 요청

그라바타 이미지는 <img> 태그를 사용하여 일반적인 이미지처럼 요청할 수 있다. 특정 사용자의 이미지를 얻으려면 이메일 해시를 계산해야 한다(위에서 설명했다).

가장 기본적인 이미지 요청 URL은 다음과 같다.

http://www.gravatar.com/avatar/HASH

위의 HASH 부분에 md5() 를 통해 얻어낸 해시 값을 붙여 넣으면 된다(필자의 이메일주소 해시값을 예로). 이를 브라우저 주소창에 입력해도 된다.

http://www.gravatar.com/avatar/04b828795157ecfab4594b7765d9cf84

img 태그를 사용한 최종 결과물은 아래와 같다.

<img src="http://www.gravatar.com/avatar/04b828795157ecfab4594b7765d9cf84" />

만일 파일확장자가 필요하다면 URL 주소에 .jpg 를 추가해도 된다.

<img src="http://www.gravatar.com/avatar/04b828795157ecfab4594b7765d9cf84.jpg" />

이미지 크기 조정

기본적으로, 이미지의 크기는 가로 80px 세로 80px 이다. 그라바타는 s= 혹은 size= 매개변수와 하나의 픽셀 크기를 지정하여 요청할 수 있다.

http://www.gravatar.com/avatar/04b828795157ecfab4594b7765d9cf84?s=200

이미지의 크기는 1px 에서 2048px 사이의 어떤 값을 사용해도 되지만, 많은 유저들이 저해상도 이미지들을 사용하며, 더 큰 크기를 요청하면 픽셀/낮은 품질(pixelation/low-quality) 이미지를 얻을 수 있다.

기본(default) 이미지 설정

그라바타 이미지와 이메일 주소가 매칭되지 않으면 무슨 일이 일어날까? 기본적으로 보여지는 이미지는 아래와 같다.

만일 자신만의 기본 이미지를 제공하고 싶다면(로고나 재밌는 얼굴등등), d= 혹은 default= 매개변수와 URL을 제공하면 된다. URL은 정확히 전송되기 위해 URL을 인코딩해야 한다(00000000은 없는 해시값을 테스트하기 위해).

<img style="vertical-align: bottom" src="http://www.gravatar.com/avatar/0000000000000000?d=http%3A%2F%2Ficon.daumcdn.net%2Fw%2Ficon%2F1312%2F19%2F152729032.png" />

다음로고를 기본 이미지로 설정해 보았다.

웹상에서 URL Decoder/Encoder와 같은 인코딩 사이트들을 발견할 수 있으니 이를 이용해도 된다.

PHP에서 URL-encode 문자열은 아래처럼 사용할 수 있다.

echo urlencode( 'http://example.com/images/avatar.jpg' );

기본 이미지를 포함했을때 관련 이미지가 없는 경우는, 그라바타는 자동적으로 이미지를 제공한다. 기본 이미지 URL은 몇가지 조건이 있다.

1. 공개적으로 사용할 수 있어야 한다( 즉, 로컬서버나 방화벽 뒤에 있는 개발 환경등이 아니어야 한다). 기본 이미지가 악의적인 내용을 방지하기 위해 보안 검색을 통과해야 한다.
2. 표준 포트인 80과 443에서 HTTP 혹은 HTTPS 를 통해 접속할 수 있어야 한다.
3. 인식할수 있는 이미지 확장자를 가지고 있어야 한다(jpg, jpeg, gif, png).
4. 쿼리 문자열을 포함할 수 없다(만일 포함한다면 무시할것이다).

자신의 이미지를 지정하는 것에 더하여, 그라바타는 기본값으로 사용할 수 있는 내장 옵션을 가지고 있다. 요청된 이메일 해시와 테마 이미지를 생성하는데 사용하는 작업의 대부분은 고유 이메일 주소이다. 이 옵션들을 사용하여 하나의 이미지가 요청하면 d= 매개변수의 값으로 아래와 같은 키워드들을 사용할 수 있다.

<img src="http://www.gravatar.com/avatar/04b828795157ecfab4594b7765d9cf84?d=mm" />

• 404 : 이메일 해시와 연관된게 없을 경우, 어떠한 이미지도 불러오지 않으며 대신에 HTTP 404(File Not Found)를 반환한다.
• mm(미스터리맨) : 간단한 사람 스타일의 윤곽
• identicon : 이메일 해시에 따라 기하학적인 패턴 (이메일 해시값마다 변화함)
• monsterid : 다른 색상, 얼굴 등으로 생성된 괴물
• wavatar : 서로 다른 특징과 배경으로 얼굴을 생성
• retro : 8비트의 아케이드 스타일의 픽셀화된 얼굴 모양을 생성
• blank : 투명 PNG 이미지

강제로 이미지 기본값 설정

특별한 이유로 강제로 기본 이미지가 항상 보여지길 원한다면 f= 혹은 forcedefault= 매개변수 와 값을 y 로 설정한다.

<img src="http://www.gravatar.com/avatar/04b828795157ecfab4594b7765d9cf84?f=y" />

이미지 등급

그라바타는 유저들이 특정 대상에 적합한지 자신의 이미지의 등급을 매기는 것을 허용한다. 기본적으로 더 높은 등급으로 보여지게 지정하지 않은 경우 G등급의 이미지로 표시된다. r= 혹은 rating= 매개변수를 사용하여, 아래와 같은 값을 사용하여 등급을 지정할 수 있다.

• g : 모든 웹사이트에 표시하기에 적합한 등급
• pg : 무례한 제스처, 도발적으로 옷을 입거나 가벼운 폭력성을 뛴 등급
• r : 거친 욕설, 격렬한 폭력, 과도한 노출, 또는 나쁜 약물 사용과 같은 것을 포함할 수 있는 등급
• x : 하드 코어 섹스 이미지 또는 매우 불안한(?) 폭력을 포함할 수 있는 등급

아래의 이미지들은 G 혹은 PG 등급의 예이다.

<img src="http://www.gravatar.com/avatar/04b828795157ecfab4594b7765d9cf84?r=pg" />

매개변수 결합

위에서 설명한 매개변수들을 결합하여 사용할 수 있다. 예를 들면, 아래의 URL은 200px * 200px 의 그라바타 등급 G 혹은 PG 이며, 이메일 해시가 일치하지 않는 다면 보여질 404 응답을 설정하고 있다.

<img src="http://www.gravatar.com/avatar/04b828795157ecfab4594b7765d9cf84?s=200&r=pg&d=404" />

보안 요청

SSL(HTTPS)을 통해 제공되는 페이지에 그라바타를 표시하는 경우, 그라바타를 SSL을 통해 서비스할 수 있다. 반면에 대부분의 브라우저에서 성가신 보안 경고를 접할 수 있다. SSL을 통해 그라바타를 제공하려면 아래와 같이 URL을 시작하면 된다.

https://secure.gravatar.com/...

프로필 요청

기본 요청

사용자가 선택적으로 자신의 그라바타에 계정에 다양한 프로필 정보를 연결할 수 있다. 이 정보는 이미지 요청의 과정과 유사하게 오픈된 접속이다.

간단한 프로필 링크는 아래처럼 사용한다.

http://www.gravatar.com/HASH

HASH 는 사용자의 이메일 해시이다. 이 요청은 자동적으로 사용자의 사용자이름 기반(username-based)의 URL로 리다이렉트(각자의 언어지원) 되며, 아래의 예시와 같다(주소를 자세히보면 이미지 요청때완 달리 /avatar/ 부분이 빠져있다).

http://www.gravatar.com/04b828795157ecfab4594b7765d9cf84 --> http://en.gravatar.com/beau

링크로 연결 테스트 : 흉내쟁이 프로필

주의해야할 중요한 점은, 프로필 요청은 계정에서 기본 주소의 해시만 해결할 수 있다. 사용자는 하나의 계정에 여러 개의 주소를 가질 수 있기 때문에 그라바타 이미지 요청의 결과가 같은 해시에 대한 프로필 요청을 하지 않을 수 있다. (An important point to note is that profile requests will only resolve for the hash of the primary address on an account. Users may have multiple addresses on a single account, so while a Gravatar image request may return a result, a profile request for the same hash may not.)

데이터 형식

프로필 데이터는 단순한 프로그래밍방식으로 접속하기 위해 다른 데이터 포맷을 요청할 수 있다. 아래와 같은 포맷을 지원한다.

• JSON
• XML
• PHP
• VCF/vCard

QR 코드의 이용

QR 코드를 삽입하여 프로필 페이지로의 이동을 도울 수 있다. QR 코드의 기본값은 80px * 80px 이다.

기본 프로필 페이지에 .qr을 추가하면 된다.

http://www.gravatar.com/04b828795157ecfab4594b7765d9cf84.qr

이를 이용해 링크를 만들거나 아래와 같이 이미지 형식으로 표시할 수 있다.

<img src="http://www.gravatar.com/04b828795157ecfab4594b7765d9cf84.qr" />

이미지 요청과 같이 s= 혹은 size= 매개변수와 하나의 픽셀값으로 QR 코드의 크기를 설정할 수 있다.

http://www.gravatar.com/04b828795157ecfab4594b7765d9cf84.qr?s=200

1. 해시(Hash)는 임의의 데이터를 짧게 함축하여 유일한 데이터로 만들어진 것이다. 이를 이용해 검색이나 기타 비교구문에 이용하여 다른 파일과의 독립성을 유지한다. [본문으로]