GeoIP를 사용하여 지루한 데이터를 더 나은 사용자 경험으로 변환

사람은 시각적인 동물입니다. 그들은 (고양이 비디오를 넘어서는) 예쁜 것을 보는 것을 좋아합니다. 나는 이것을 가능성이 있거나 그것을 즐기기 때문에 말하는 것이 아닙니다! 어렵고도 차가운 사실입니다. 점점 줄어들고 있는 주의 시간과 함께 응용 프로그램이 기능이나 품질이 아닌 외관(처음 3초)으로 판단되므로 안심하십시오. 앱에 대한 맞춤형 GUI 디자인에 비용을 지불할 여력이 없는 개발자라면 이것은 특히 치명적입니다. 앱이 아무리 훌륭하고 빠르며 혁신적이라도 "개발자가 디자인한" 것처럼 보이면 사람들은 기회조차 주지 않을 것입니다. 고맙게도 이 문제를 해결할 수 있는 방법이 있습니다.

시도되고 테스트된 오픈 소스 관리 템플릿을 사용하는 것이 의심할 여지 없이 좋은 시작입니다. 신뢰할 수 있는 데이터 주석 서비스를 사용하는 것만큼 좋습니다. 잘 알려지지 않은 또 다른 트릭은 IP 주소 및 브라우저 사용자 에이전트 식별자와 같은 둔한 데이터를 사용자에게 더 많은 정보를 제공할 뿐만 아니라 재미있고 보기 좋게 만드는 훨씬 더 흥미로운 데이터로 바꾸는 것입니다. 가장 좋은 점은 모든 앱에 추가할 수 있는 무료이며 간단한 기능입니다.

평범하고 지루하고 추한 방식

이론과 꾸며낸 상황에 시간을 낭비하는 대신 테이블에 사용자 작업 로그 데이터를 표시하는 거의 모든 웹 앱에 익숙한 시나리오를 살펴보겠습니다. 실제 데이터는 시스템마다 다르지만 일부 필드는 공통적이며 여기에는 IP 주소, 타임스탬프 및 사용자 에이전트 문자열이 포함됩니다. 테이블에 원시 데이터를 표시하는 것만으로도 매일 사용하는 것은 고사하고 아무도 보고 싶어하지 않는 추악한 재앙이 발생합니다. 아래 표와 같습니다. 디자인 자체를 제쳐두고; 데이터는 사람을 위해 조정 및 형식화되지 않았기 때문에 사용할 수 없습니다. 예를 들어, IP 주소는 사람들이 자주 기억하는 것이 아닙니다. 이것이 우리가 도메인 이름을 사용하는 주된 이유 중 하나입니다. 이와 같이 최종 사용자 테이블에 IP를 표시하는 것은 쓸모가 없습니다.

기다릴 수 없는 사람들을 위해 – 새롭고 개선된 표를 참조하십시오.

몇 가지 조정이 큰 도움이 됩니다.

먼저 ID 열을 잃습니다. 내부 데이터베이스 레코드 ID가 필요한 이유는 무엇입니까? 사용자에게 완전히 쓸모없는 데이터입니다. 그것은 귀중한 화면 공간을 차지하고 중요한 정보로부터 주의를 끕니다.

MySQL 타임스탬프 형식의 타임스탬프는 사람이 읽을 수 있지만 사용자 친화적이지 않습니다. UNIX 타임스탬프로 유지하고 표시하면 상황은 더욱 악화됩니다. 그러면 100% 읽을 수 없습니다. 다른 사용자(보통 위치에 따라 다름)는 시간, 날짜, 통화 및 숫자 데이터의 다른 형식을 선호합니다. 그 차이는 미묘하지만 존중되어야 합니다. 사용자는 그것을 감사합니다. 이벤트의 나이도 중요합니다. 최신 이벤트의 경우 "10분 전"과 같은 설명을 표시하는 것이 편리합니다. 이는 전체 타임스탬프를 표시할 필요 없이 최근 이벤트임을 나타냅니다. 이전 버전의 경우 전체 로컬 형식의 시간과 날짜를 표시합니다.

고맙게도 WordPress에는 모든 것을 처리하는 내장 기능이 있습니다. WP 관리자 – 설정 – 일반에 설정된 날짜 및 시간 형식을 사용하여 나머지 사이트의 형식에 맞게 타임스탬프를 조정하고 human_time_diff() 함수를 사용하여 사용자 친화적으로 만들 것입니다. 다음 코드는 MySQL 형식의 타임스탬프가 있다고 가정하지만 UNIX 타임스탬프에 있는 경우 첫 번째 줄을 제거합니다.

function wpr_format_timestamp( $timestamp ) {
  // convert MySQL timestamp to UNIX timestamp
  $timestamp = strtotime( $timestamp );
  
  if ( current_time( 'timestamp' ) - $timestamp > DAY_IN_SECONDS * 1) {
    // our event is older than a day
    // we'll show full timestamp formatted as per WP settings
    $out  = date( get_option( 'date_format', $timestamp );
    $out .= ' @ ' . get_option( 'time_format' ), $timestamp );
  } else {
    // timestamp is not older than a day
    // we'll show a message like "2 hours ago"
    $out  = human_time_diff( $timestamp, current_time( 'timestamp' ) );
    $out .=  ' ago';
  }
  
  return $out;
}

하루보다 오래된 날짜에 대해 "인간 차이" 형식을 표시하려면 DAY_IN_SECOND 상수에 원하는 일 수를 곱하세요.

지루한 IP 데이터를 사용하여 GeoIP로 "와우" 효과 얻기

수많은 서비스가 IP를 국가, 주, 도시, 시간대, 통화 정보 및 ISP 세부 정보가 포함된 사람이 읽을 수 있는 지리 데이터(탐색하려는 경우 20개의 geoIP 서비스를 비교함)로 변환합니다. 모두 원격 API와 다운로드 가능한 데이터베이스의 두 가지 범주로 나뉩니다. geoIP 데이터가 매일 변경되기 때문에 대부분의 프로젝트에서 API가 훨씬 더 나은 선택입니다. 서비스는 가격, 사용 용이성 및 반환된 데이터의 정확성 면에서 다양합니다. 수년간 다양한 서비스를 사용한 후 지난 2년간 저는 IP Geolocation을 사용해 왔습니다. 매월 최대 50,000개의 API 요청이 있는 소규모 프로젝트의 경우 서비스가 완전 무료입니다. 모든 프로젝트, 특히 테스트를 위한 훌륭하고 위험 없는 제안입니다.

API를 사용하는 것은 쉽습니다. 계정에 등록하고(신용카드 또는 이와 유사한 말도 안되는 소리가 필요하지 않음) 계정 페이지에서 API 키를 가져온 다음 IP 및 API 키가 포함된 API URL을 호출하기만 하면 결과를 얻을 수 있습니다. 코드(WordPress 전용)에서는 아래 코드와 비슷합니다. PHP를 사용하지 않는 경우 IP Geolocation에 사용할 수 있는 6개의 SDK가 있으므로 프로젝트에 적합한 것을 찾을 수 있습니다. 또한 대규모 프로젝트를 위해 다운로드 가능한 데이터베이스를 제공합니다. 자세한 내용은 그들에게 문의하십시오.

function wpr_get_ip_info( $ip ) {
  $endpoint = 'https://api.ipgeolocation.io/ipgeo';
  
  // grab the API key from https://app.ipgeolocation.io/
  // if needed register for a free account, no credit card info needed
  $api_key = 'PUT-YOUR-API-KEY-HERE';
  
  $params = array('apiKey' => $api_key, 'ip' => $ip, 'fields' => 'city,country_name,country_flag');
  $url = $endpoint . '?' . http_build_query($params, '', '&');

  $response = wp_remote_request( $url );
  
  if (is_wp_error($response)) {
    return $response;
  }
  
  if (wp_remote_retrieve_response_code($response) != 200) {
    return new WP_Error('geoip_bad_response', 'Response code ' . wp_remote_retrieve_response_code($response));
  }
  
  $body = wp_remote_retrieve_body($response);
  
  if (empty($body)) {
    return new WP_Error('geoip_bad_response', 'Empty body.');
  }
  
  $body = json_decode($body, true);
  
  // returned variable is an array with following fields: ip, country_name, country_flag, city
  return $body;
}

API는 IP를 기반으로 무려 26개의 정보를 반환합니다. 귀하의 IP로 테스트하십시오. 그 모든 것을 표시하는 것은 너무 많아서 일반적으로 국가 이름, 국기 및 도시를 선택합니다. 충분한 데이터와 플래그가 멋진 시각적 터치를 추가합니다. 요청은 대역폭을 절약하기 위해 이 세 가지 변수만 반환합니다. 모든 필드가 필요한 경우 $params 의 fields 배열 키를 비워 두십시오. 국가 플래그 이미지는 IP Geolocation에서 직접 핫링크될 수 있어 매우 편리합니다. 로컬 IP의 경우 많이 표시할 수 없으므로 해당 시나리오를 고려해야 합니다. 로컬 IP의 경우 응답 코드 423과 함께 WP_Error 가 발생합니다.

사용자 에이전트 문자열은 풍부한 데이터를 숨깁니다.

사용자 에이전트 문자열은 방대하며 사람이 직접 소비하기 위한 것이 아닙니다. 제정신이 아닌 인간은 그 혼란에 표시된 모든 데이터를 필요로 하거나 원하지 않습니다. 데스크톱 컴퓨터, 전화 또는 그 사이에 사용되는 장치 유형이 필요합니다. 그런 다음 OS – Windows, Mac 또는 기타 모든 것; 그리고 아마도 사용된 브라우저: Chrome, Safari, Internet Explorer 및 Firefox. 이는 데이터에 더 많은 구조를 부여하고 필터링 및 분할에 유용한 세 가지 추가 정보로 데이터를 분리합니다.

나는 (나보다 똑똑한) 다른 사람들이 만든 것을 사용하는 것을 적극 옹호합니다. 따라서 우리는 사용자 에이전트 문자열을 구문 분석하기 위해 바로 사용할 수 있고 전투 테스트를 거쳐 잘 유지 관리되는 라이브러리를 사용할 것입니다. GitHub의 WhereBrowser로 이동하여 PHP 버전을 가져옵니다. PHP 환경 설정에 따라 Composer 패키지로 설치할 수 있습니다. 지침은 위의 링크에 있거나 PHP의 독립 실행형 부분입니다. 두 번째 그룹에 있는 경우 bootstrap.php 파일을 포함하면 준비가 완료됩니다.

타임스탬프와 IP 개선에 따라 필요한 코드의 양이 최소화되므로, WhereBrowser가 무거운 작업을 처리합니다.

function wpr_get_browser_info( $user_agent ) {
  // assuming you don't use Composer, manually include WhichBrowser
  require_once 'whichBrowser-lib/bootstrap.php';
  
  // parse the user agent string
  $browser = new WhichBrowser\Parser( $user_agent );
  
  // grab the type and then the subtype
  // see WhichBrowser for more info
  $tmp = $browser->getType();
  $tmp = explode( ':', $tmp );
  $result['type'] = $tmp[0];
  
  // and the OS and browser name
  $result['os'] = $browser->os->name;
  $result['browser'] = $browser->browser->name;
  
  return $result;
}

저장된 사용자 에이전트 문자열을 wpr_get_browser_info() 함수에 전달하면 OS 이름, 브라우저 이름 및 장치 유형을 다시 얻을 수 있습니다. 원시 사용자 에이전트 문자열 대신 테이블에 넣으십시오.

새롭고 향상된 테이블

우리의 새 테이블을 보십시오. 우리는 동일한 데이터로 작업했지만 인간을 위해 적절하게 형식을 지정하고 처리했습니다!

타임스탬프	국가	도시	브라우저	OS	장치	행동
20분 전	독일	베를린	파이어폭스	우분투	데스크탑	로그인
14시간 전	미국	필라델피아	인터넷 익스플로러	창	데스크탑	로그인
2018년 9월 7일 오후 10시 03분	라트비아	리가	원정 여행	iOS	이동하는	비밀번호 초기화
2018년 9월 2일 오후 2시 12분	미국	노스 베르겐	파이어폭스	OS X	데스크탑	로그 아웃
2018년 9월 2일 오후 12시 33분	해당 없음	해당 없음	크롬	창	데스크탑	로그인 실패

얼마나 끔찍했는지 알기 위해 오래된 테이블을 다시 한 번 살펴보십시오. 디자인은 그대로 유지된다는 점을 염두에 두십시오! 우리는 글꼴, 색상 또는 시각적인 모든 것을 조정하지 않고 데이터만 조정했습니다! 게다가, 겨우 몇 줄의 코드로.

우리는 무엇을 배웠습니까?

우리는 "개발자가 디자인한" GUI가 종종 보거나 사용하는 것이 즐겁지 않다는 것을 배웠습니다. 언뜻보기에 앱이 쓰레기처럼 보이면 우리가 들인 다른 모든 위대하고 힘든 노력은 헛된 것입니다. 저는 디자이너와는 거리가 멀고 GUI 디자인에 대한 조언을 드릴 수 없지만 지난 몇 년 동안 지루한 데이터를 흥미롭고 사용자 친화적으로 보이게 만드는 방법을 배웠습니다. IP Geolocation, WhereBrowser 및 이와 유사한 도구를 사용하면 몇 줄의 코드로 군중에서 눈에 띄는 데 도움이 될 수 있습니다. 따라서 사용하십시오!