'Dev Tips'에 해당되는 글 11건

안녕하세요. 제임스 입니다. 

나도 모르게 내 사진이 인터넷에서 돌아 다니는 경우가 종종 있습니다. 

내 개인 사진일 수도 있지만 내가 찍은 정말 멋진 사진이 동의 없이 차용되어 사용되고 있는 경우도 있을 수 있는데요. 이때 인터넷 상에서 돌아 다니는 내 사진을 찾는 유용한 방법 한가지 소개 드립니다. 

물론 이 방법은 포털 사이트에서 검색 되는 경우에만 찾을 수 있습니다. 

예를 들어 페이스북이나 각종 SNS 등을 통해 유포된 경우 포털 사이트에서 검색에 걸리지 않기 때문에 찾을 수 없습니다. 

■ 인터넷에 돌아다니는 내 사진 찾기

▶ google.com 으로 접속

구글 접속 후 우측 상단에 Images 라는 버튼이 보입니다. 

위 Images 버튼을 클릭 합니다. 

▶ Search By Images 버튼 이용하기

검색창 내에 있는 사진기 모양 버튼이 바로 이미지로 검색하기 버튼입니다. 

이 버튼을 클릭 합니다. 

또는 검색 결과 화면에서도 최상단에 검색 바가 있는데... 

이 안에도 동일하게 이미지로 검색 버튼이 있습니다. 

찾고자 하는 이미지의 인터넷 상 URL 을 알고 있을 경우 Paste image URL 탭을 통하여 검색 하실 수 있습니다. 

찾고자 하는 이미지의 인터넷 상 URL 을 모른다면 위와 같이 Upload an image 탭을 통해 검색 할 수 있습니다.

아래 파일 선택 버튼을 클릭하여 PC 에 저장되어 있는 이미지를 업로드 하면 검색 할 수 있습니다.  

저는 위와 같이 티스토리 이미지를 준비 했습니다. 

좌측에 있는 이미지는 원본이미지의 파일명만 바꿔서 준비한 테스트 이미지 입니다. 

▶ 이미지 검색 결과

이미지 검색 결과는 위와 같습니다. 

위 이미지 상에서는 보이지 않지만, naver 등의 타 포털 사이트의 글들도 모두 검색 되어 나옵니다. 

즉, 구글 검색으로 조회가 되는 모든 사이트는 검색이 된다고 생각하면 됩니다. 

혹, 검색 조건에 이미지 파일명도 들어 가는것은 아닐까 하는 생각에 파일명을 변경 해봤습니다.

다행히 이미지 파일명은 검색 결과에 아무런 영향을 주지 않습니다. 

검색 실행 결과 원본 이미지를 이용하여 검색한 결과와 동일한 검색 결과를 리턴 합니다. 

타인의 이미지를 무단으로 사용하는것은 범죄 입니다. 

사실 크게 문제 삼을 만한 것이 아닐수도 있지만, 사적인 사진들이 나도 모르게 돌아 다닌다고 생각하면 정말 아찔합니다. 

구글 이미지 검색을 통해 피해를 최소화 하는데 도움을 받을 수 있지만, 반대로 타인의 사진이나 이미지를 무단 도용하는 경우 처벌 받을 수 있으니 조심해야 하겠습니다. 

▼ 도움이 되셨다면 로그인이 필요 없는 ▼

▼ 하트 클릭 한번 부탁 드립니다 ▼

감사합니다 :D

갤럭시 S9, S9 플러스 를 PC 에 연결하여 사용 하는 방법에 대해 알아 보겠습니다. 

갤럭시 S9 뿐만 아니라 거의 대부분의 안드로이드 단말을 처음 구입 했을 경우 개발자 옵션이 비활성화 되어 있습니다. 이 경우 휴대폰을 PC USB 를 이용하여 연결하더라도 데이터 접근이 안됩니다. 

그래서 개발자 옵션을 활성화 시켜 줘야 합니다. 

▶ 개발자 옵션 활성화 하기 

설정 > 휴대전화 정보 > 소프트웨어 정보 > 빌드번호 (연속 클릭) > 개발자 모드 활성화 알림 확인 되면 완료

설정 아이콘을 선택합니다.

설정화면 내 최하단에 있는 휴대전화 정보 를 선택 합니다. 

소프트웨어 정보를 클릭 합니다.

빌드번호를 연속해서 클릭 합니다. 

클릭 횟수에 따라 개발 설정 진행 단계 정보가 노출 됩니다. 

개발자 모드가 실행 되면 위와 같이 Toast 알림이 표시 됩니다.

▶ USB 디버깅 설정하기 

PC 에 휴대폰을 연결하여 데이터를 직접 전송하거나 안드로이드 앱 개발을 위해 USB 디버깅 설정이 필요 한경우 아래와 같이 진행 하시면 됩니다.

설정 화면에 노출되는 개발자 옵션 클릭

스크롤을 내리다 보면 USB 디버깅이 비활성화 되어 있는 것을 확인 하실 수 있습니다. 

위와 같이 클릭 하여 화성화 시키면 사용 준비 완료!

삼성 갤릭시 S9 + 를 기준으로 설명을 드렸지만 거의 대부분의 안드로이드 단말은 비슷한 방식으로 개발자 모드를 활성화 시키고 USB 디버깅을 실행하여 PC 에 연결할 수 있습니다. 

▼ 도움이 되셨다면 로그인이 필요 없는 ▼

▼ 하트 클릭 한번 부탁 드립니다 ▼

감사합니다 :D

웹 개발을 할때 적용하는 순서는 보통 아래와 같습니다. 

로컬 서버 > 개발 서버 > 테스트 서버 (만약 운영하고 있다면) > 운영 서버 Deploy

물론 개발 환경에 따라 로컬 서버를 사용하지 않고 바로 개발이나 테스트 서버에 적용하여 개발을 하는 경우도 있습니다. 실제 모 카드사에서 사용하고 있는 프레임워크에서는 로컬 서버 운영이 불가능하여 코드 작성만 로컬 PC 에서 하고 소스는 개발서버에 올려서 확인 하고 있습니다. 

그런 특별한 케이스를 제외하고는 보통 로컬 서버 설정을 하여 개발을 많이 하고 있습니다. 

개발한 웹 프로그램을 로컬 서버에서 돌려 보려고 하는데 아래와 같은 오류가 발생한다면 어떻게 해야 할까요? 

Project facet Java version 1.8 is not supported.

Java 버전 1.8이 지원되지 않는다는 이야기 인데요. 해결방법을 알아 보겠습니다. 

웹 프로그램을 실행시켜 보기 위해 Run on server 를 클릭 하였지만... 위와 같은 오류가 보입니다. 

해결방법은 두가지가 있습니다. 

하나는 Project Facet 의 Java Version 을 1.7 로 맞춰 주거나 또는 JRE 8 및 Apache Tomcat 8 으로 모든 설정을 바꾸는 방법이 있습니다. 

어떤 방법을 사용해도 문제 없지만 이번 포스팅에서는 상위 버전으로 맞추는 방법을 알아 보겠습니다. 

프로젝트 우클릭 후 Properties 를 선택 합니다. 

좌측 목록에서 Project Facets 를 찾아 선택하면 Java 의 version 정보가 보입니다. 

지금 제가 실행하고자 하는 프로젝트의 자바가 1.8 인것으로 확인 되었습니다. 

우측 탭에서 Runtimes > New 를 선택 합니다. 

Apache Tomcat 8.0 을 선택 합니다. 

Tomcat은 8.x 버전이 설치 되어 있는 root 디렉토리를 찾아서 선택하면 됩니다. 

저는 이미 8.0.51 버전의 톰캣이 설치 되어 있어 디렉토리를 바로 지정 했지만 없으신 분들은 아래 링크를 따라가셔서 다운 받으시고 원하시는 위치에 압축 해제 하시면 됩니다. 

☞ Apache Tomcat 8.x 받으러 가기 (클릭)

두번째로  Installed JREs... 를 클릭 합니다. 

설치되어 있는 JRE 목록이 나오는데요... 

설치 목록에 없으므로 Add 를 클릭하여 추가를 합니다. 

jre8 이 없으신 경우 아래 링크를 통해 설치를 받으시면 됩니다. 

☞ Server JRE 8 다운로드 받으러 가기 (클릭)

각자의 PC 환경에 맞게 다운을 받으시면 됩니다. 

저는 Windows x64 로 다운을 받아 압축을 풀었습니다. 

JRE 8 이 설치된 (압축을 풀어 둔 root directory) 를 선택 하시고 JRE 명을 입력 후 Finish 를 클릭합니다. 

지정한 이름으로 JRE 가 등록된 것을 확인 할 수 있습니다. 

등록한 JRE 를 선택 하여 OK 를 클릭 합니다. 

JRE: 의 드롭다운 리스트에서 등록한 이름의 JRE 를 찾아 선택후 Finish 를 클릭합니다. 

Runtimes 탭 아래 Apache Tomcat v8.0 이 등록 되었습니다. 

Apply 를 클릭 후 OK 버튼을 클릭 해줍니다. 

여기까지가 개발하는 웹 프로젝트의 설정 방법입니다. 

이제 서버에도 작업을 해줘야 합니다. 

Servers 프로젝트를 우클릭 하여 Properties 를 선택 합니다. 

Project Facets > Runtimes 탭을 선택하면 Apache Tomcat v7.0 이 선택되어져 있습니다. 

Apache Tomcat v8.0 을 선택해주고 Apply 를 클릭 그리고 다시 OK 를 클릭하여 설정을 종료 합니다. 

이제 다시 Run On Sever 를 선택하여 웹 프로젝트를 실행 시킵니다. 

Tomcat v8.0 으로 잘 잡혀 있습니다. 

이제 Finish 를 선택하여 웹 프로젝트를 실행 하시면 됩니다. 

▼ 도움이 되셨다면 로그인이 필요 없는 ▼

▼ 하트 클릭 한번 부탁 드립니다 ▼

감사합니다 :D

이클립스에서 JRE System Library unbound 오류 발생 한 경우 아래와 같은 순서로 해결 가능합니다. 

▶ Java Build Path 수정 하러 가기

첫번째 방법: Project > Properties 순으로 이동

두번째 방법: 작업중인 project 우클릭 > Build Path > Configure Build Path 순으로 이동

▶ JRE System Library unbound 오류 수정

좌측 목록에서 Java Build Path 항목을 선택 시 우측에 네가지 탭이 보입니다. 

여기서 Libraries 탭을 선택 하면 

JRE System Library [jre 버전 정보] (unbound) 라는 상태가 보입니다. 

이것을 수정해야 하니 우측 화면상에서 Add Library 를 선택 합니다. 

Add Library 를 선택 시 위와 같이 Library Type 선택 하는 팝업이 뜹니다. 

JRE System Library 를 선택 후 Next 를 클릭해 줍니다. 

JRE의 build path 를 선택 하는 화면입니다. 

Alernate JRE > installed JREs... 를 클릭하면 설치된 JRE 항목이 아래 이미지와 같이 검색됩니다. 

저의 경우 하나 밖에 없어서 바로 선택 후 적용했지만 만약 여러개의 JRE 가 설치 되어 있으시다면 원하는 Java 버전을 선택 하시면 됩니다. 

원하는 JRE 를 선택 등록이 정상적으로 처리 되면 위와 같이 JRE System Library 가 두개가 됩니다. 

자세히 보시면 하나는 unbound 상태 입니다. 해당 JRE 를 선택 후 Remove 버튼을 클릭하여 삭제 합니다. 

이제 좀전에 등록한 JRE 만 남기고 깨끗이 정리 되었습니다. 

프로젝트 내 많은 오류 메세지들이 해결 되었을 거예요 ^^

▼ 도움이 되셨다면 로그인이 필요 없는 ▼

▼ 하트 클릭 한번 부탁 드립니다 ▼

감사합니다 :D

안녕하세요. 제임스 입니다. 

티스토리 블로그를 하나 더 만들어서 포스팅을 하려는데 이미지 업로드를 하려고 하니 

최신 버전의 Flash 플레이어를 설치 하라고 합니다...

이미 설치 해서 사용하고 있는데도 불구하고 말이죠...

이건 브라우저에 Flash 설치가 필요 한 경우가 아닙니다. 

티스토리 사이트별 설정을 진행 해야 합니다. (왜냐구요? 이미 원 티스토리 사이트에서는 아래와 같이 이미지 업로드가 잘되고 있거든요 ^^)

그러면 어떻게 하는지 알아 보겠습니다. 

1. 새로운 티스토리 포스팅 중 이미지 업로드를 위해 포터 업로더를 실행 합니다. 

이때 아래와 같은 내용으로 오류가 발생 합니다. 

Flash 설치 후에도 동작하지 않을 시 어쩌구 저쩌구 하라는 내용 신경 쓰지 마세요 ^^

2. 포토 업로더 URL 주소 창 왼쪽에 있는 ⓘ 아이콘을 클릭 하면 아래와 같은 창이 나타 납니다. 

여기서 사이트 설정을 클릭해 줍니다. 

3. 해당 티스토리 사이트에 대한 설정 창에 진입 하게 됩니다. 

Flash 를 찾아 요청(기본값) 으로 선택된 것을 허용 으로 변경해주고 창을 닫습니다.

4. 설정 창을 닫으면 화면이 리로드 되면서 아래와 같이 이미지 업로드를 할 수 있는 상태로 변경 됩니다. 

잘 쓰고 있었는데 새 티스토리 사이트 만들었더니 포토 업로더가 안된다!!!

그렇다면 위와 같은 방법으로 해결이 가능합니다. 

참 쉽죠? ^^

▼ 도움이 되셨다면 로그인이 필요 없는 ▼

▼ 하트 클릭 한번 부탁 드립니다 ▼

감사합니다 :D

안녕하세요. 제임스 입니다. 

추석이 아주 길었습니다. 즐거운 시간이 될것이라는 기대감과는 다른게 육아로 지친 몸을 이끌고 집으로 돌아 왔습니다 :D

역시 육아는쉬운일이 아닙니다 ^^;

어머니라는 이름이 얼마나 위대한 단어인지 새삼 느끼게 됩니다. 

일전에 온라인에서 합성 사진 만들기에 관해 포스팅 한 적이 있습니다.

http://jamesdreaming.tistory.com/64

이와 비슷한 사이트를 하나 더 찾아서 소개 드리고자 합니다. 

Photo Funia 라는 사이트 입니다. 링크는 아래 참조 하세요 :)

http://photofunia.com/

이 사이트에서도 내 사진을 사이트에서 제공하는 프레임에 합성하는 방식으로 이미지를 만들어 낼 수 있습니다. 

또한 원하는 텍스트를 입력하여 뽑아 내는 방식도 있는데요, 지금부터 정리해 보겠습니다. 

■ 합성 사진 만들기

여기서 제공하는 이미지중 미화 100달러에 원하는 이미지를 넣는 것이 있더군요. 

그래서 저는 또다시 14개월된 공주 사진을 이용하여 저만의 100달러 이미지를 만들어 보겠습니다. 

우선 완성본 부터 올려 봅니다 :) 

그럴듯 하죠? 

방법은 아래와 같습니다. 

1. 100 Dollars 라는 이미지를 찾습니다.

2. Choose photo 를 클릭합니다.

3. 사진이 있는 윈도우 창을 열어 둔 상태이면 드래그 앤 드롭으로 (끌어오기) 추가 할 수 있으며 그렇지 않다면 아래 Upload from PC 를 클릭하여 가져 오거나 카메라 또는 온라인에서 가져오기 등이 가능합니다. 

저는 PC 에 사진을 저장해 두었으므로 바로 끌어오기로 사진을 추가 했습니다. 

4. 제가 선택한 사진이 업로드 되고 원하는 부분을 선택 하는 모습닙니다. 

사각형 꼭지점을 클릭하여 움직여서 원하는 부분을 맞추시면 됩니다. 

5. 제가 원하는 부분을 선택 완료 후 Crop (잘라내기) 를 클릭하시면 다음으로 넘어 갑니다.

6. 선택한 이미지 확인 및 GO 를 클릭하여 이미지 합성을 시작합니다.

7. 합성 결과 화면에서 이미지를 확인 하시고 우상단의 Download 를 클릭하여 가장 큰 사이즈의 이미지를 다운 받으시거나 좌측 하단의 Download 아래 Large / Regular / Small 을 직접 선택 하셔서 이미지 사이즈를 선택 하셔도 됩니다. 

다운로드 된 이미지를 원하시는 곳에 사용하시면 됩니다 :)

간단하죠?

나만의 미화 100달러 뿐 아니라 많은 합성 이미지들이 있으니 잘 사용하시면 좋을 것 같습니다. 

■ 이미지에 텍스트 넣기

특정 이미지에 원하는 텍스트를 넣는 기능도 제공하고 있습니다. 

모든 이미지에서 가능한것은 아니구요. 아래와 같이 이미지 상에 Text 라는 문구가 있는 경우에 입력 가능합니다. 

사진 합성과는 다르게 이미지를 입력 하는 것이 아니라 텍스트만 입력 하면 됩니다. 

저는 Hello! 라는 문구를 입력하고 제공되는 Background 이미지 중 세번째 것을 선택 후 GO 를 클릭 했습니다.

Hello! 라는 문구가 아래와 이미지와 같이 프린트 되어 나와 있습니다. 

이미지 다운 받는 방법은 사진 합성과 동일 합니다. 

이 사이트에서도 재미 있는 많은 사진 합성도 가능하고 텍스트 입력도 가능하여 나만의 이미지를 만드는데 좋을 것 같습니다. 

절대 저작권법 따위 신경쓰지 않고 내 블로그를 내 사이트를 가꾸어 갈 수 있는 또 하나의 팁이었습니다. 

▼ 도움이 되셨다면 로그인이 필요 없는 ▼

▼ 하트 클릭 한번 부탁 드립니다 ▼

감사합니다 :D

안녕하세요.  제임스 입니다. 

블로그나 SNS 또는 카페 그외 어떤 작업을 하든 상관 없이 이미지를 참 많이 사용하게 되는데요. 

이미지 잘못 사용하면 저작권법에 위배 되어 잘못하면 정말 험한꼴(?)을 당하는 경우도 있다고 합니다. 

그렇다면 나만의 합성 사진을 만들수 있다면 어떨까요? 

나는 포토샵 따윈 할줄 몰라!!!

이런 분들 많으실 꺼예요. 

그런 분들을 위해 이번 포스팅을 준비 했습니다. 

원하는 이미지를 이용하여 다양한 합성 이미지를 만들어 주는 무료 사이트가 있어 소개해 드립니다. 

Loonapix 라는 사이트 입니다

http://www.loonapix.com/

참고로 저는 이 사이트 및 몇개의 다른 합성 이미지 만들어 주는 사이트를 이용하여 셀프 돌영상 제작시 사용했습니다.

제 딸 사진을 이용하여 사용 방법을 알려 드리겠습니다. 

원본 이미지 입니다. 

제 딸이지만 참 이쁩니다 ^^

원하는 합성 사진을 선택 합니다. 

사진 선택을 클릭 합니다.

From Disk 에서 또는 Web 에 저장 하고 계사다면 From Web 을 선택 하시면 되겠죠? 

저는 로컬 피씨에 저장된 이미지를 사용하여 From disk 에서 Browse 버튼을 클릭 했습니다. 

이미지 선택을 위한 윈도우 창이 뜨면 저 위의 제 딸 사진을 선택 했습니다. 

그러면 이미지 업로드를 시작합니다. 

이미지에서 사용할 영역을 지정 하는데요. 저는 최대한 크기를 키웠습니다. 

격자 무늬가 처음 이미지보다 넓게 포진했죠? 

이상태로 Create Image 를 클릭 합니다. 

이렇게 이쁜 합성 사진이 바로 나옵니다 

완성이죠 ^^

이런 사진 합성 외에도 여러가지 기능들을 제공하고 있으니 차근차근 둘러 보시면서 나만의 이쁜 합성 사진을 만들어 보시는건 어떨까요? 

오늘 소개 드린 사이트는 참 재미있고 이쁜 합성 사진을 쉽게 만들 수 있는 사이트 입니다. 

물론 이렇게 나만의 사진을 이용하여 만들게 되면 저작권 등의 문제가 생길일은 전혀 없겠죠? 

잘 사용하셔서 나만의 이쁜 이미지 만드시길 바랍니다. 

▼ 도움이 되셨다면 로그인이 필요 없는 ▼

▼ 하트 클릭 한번 부탁 드립니다 ▼

감사합니다 :D

안녕하세요. 제임스 입니다. 

어제 저녁까지 잘 쓰고 있던 티스토리 포토업로더가 갑자기 안됩니다. 

제가 주로 사용하는 브라우저는 크롬 브라우저 입니다. 

Daum 포토업로더는 Flash Player 10 에 최적화 되어 있습니다. 최신 버전의 Flash를 선치하신 후 다시 시도해주세요.

라고 나오며 사진업로드를 할 수 없는 상태가 되었습니다. 

그래서 해결책을 찾았습니다. 

자세히보기 를 클릭 해봐도 제대로된 가이드도 없습니다. 

도움이 전혀 되지 않네요. 

해결방법은 크롬 설정에서 플래시 관련 부분을 수정하는 겁니다. 

지금부터 설정 해보겠습니다. 

크롬 브라우저의 우측 상단 위와 같이 생긴 버튼을 클릭 합니다.

그러면 위와 같이 드롭다운 리스트가 나옵니다. 

아래쪽에 보이는 설정을 클릭합니다. 

가장 아래에 있는 고급을 클릭 합니다. 

콘텐츠 설정을 클릭 합니다. 

중간 쯤에 있는 Flash 를 선택하여 클릭합니다. 

사이트에서 Flash를 실행하도록 허용을 위와 같이 우측으로 이동시켜 활성화 시켜 줍니다. 

사이트에서 Flash 실행 여부를 차단 또는 허용 하는 설정을 여기서 할 수 있습니다. 

우리는 허용 부분의 추가버튼를 클릭하여 줍니다. 

나의 티스토리 블로그 주소를 입력 후 추가 버튼을 클릭합니다. 

그러면 위 이미지와 같이 허용 부분에 나의 티스토리 블로그 주소가 등록 된 것을 확인 할 수 있습니다. 

이제 다시 티스토리 블로그로 돌아가 사진올리기를 시도해봅니다. 

이전과 같이 잘 나옵니다. 

문제 해결이죠 :)

 잘 되던 것이 갑자기 이렇게 된 이유는 모르겠습니다. 

하지만 우리는 이 문제를 해결 할 수 있는 능력이 있죠!! :D

도움이 되는 포스팅이었으면 하네요. 

그럼 저는 20000!

■ 503 에러란?

웹페이지 503 에러는 "503 Service Unavailable"을 의미 합니다. 

이는 서버쪽 문제로 인하여 서비스가 현재 불가능한 상태를 의미 합니다. 

• 서버 접속자가 많아 서버 접속 불가 
• 접속은 하였으나 서버 응답을 받지 못하여 타임아웃 발생
• 서버내 애플리케이션의 문제로 웹상에서 요청한 서비스가 정상 처리되지 못한 경우

일반적으로 503 에러는 첫번째 이유로 많이 발생합니다.

서버 과부하 또는 서버 폭주라고도 하는 이유로 발생 하는 겁니다. 

이 메세지는 서버종류에 따라 또는 커스터마이징 상태에 따라 여러 다른 형태의 에러 메세지로 보실수 있습니다. 

• 503 Service Unavailable
• 503 Service Temporarily Unavailable
• Http/1.1 Service Unavailable
• HTTP Server Error 503
• Service Unavailable - DNS Failure
• 503 Error
• HTTP 503
• HTTP Error 503
• Error 503 Service Unavailable 

여러 형태로 보여지기는 하지만 결국 모두 503 Service Unavailable 에러 입니다. 

Window 10, Mac OS, Linux 또는 휴대폰 등 인터넷 접속이 가능한 환경이라면 언제든지 503 오류를 받을 수 있습니다. 

만약 Microsoft IIS 웹서버를 운영하고 있다면 좀더 디테일한 오류 메세지를 받을 수 있습니다. 

HTTP Error 503.2 - Service Unavailable

400번대 에러와 500번대 에러는 발생 원인에 차이가 있으며 가장 자주 보는 오류번호대 입니다. 

자세히 공부 해 두면 개발시 많은 도움을 받을 수 있습니다. 

■ 구글 애널리틱스(Google Analytics) 란?

구글 애널리틱스는 사이트에 방문하는 방문자들에 대하여 나이, 접속시간, 방문후 머문시간, 이동 페이지 경로, 접속 국가 등의 방대한 데이터를 수집 분석 하는 역할을 해주는 도구로 사이트 운영에 엄청난 도움을 주는 도구 입니다. 

■ 티스토리에 구글 애널리틱스 연동하기

1. 구글 계정은 필수 이므로 꼭 생성하셔야 합니다. 

2. 구글 애널리틱스 오피셜 사이트로 이동 하여 우측상단 로그인을 클릭하여 구글 계정으로 로그인 합니다. 

구글 애널리틱스 오피셜 사이트로 이동 <<< 클릭 하여 이동하기

3. 구글 애널리틱스 가입하기를 클릭 하여 가입합니다. 

4. 새 계정정보를 입력 하고 추적ID 가져오기를 합니다. 

   이때 중요한건 웹사이트 URL 은 본인 사이트를 입력해야 합니다. 

   나머지는 편한데로 입력 하시면 됩니다. 

5. 데이터 공유 옵션은 전부 체크된 상태로 추적ID 가져오기 버튼을 클릭합니다. 

6. 서비스 약관 동의 절차 진행 합니다. 

7. 추적 ID 및 추적 코드를 가져옵니다. 

여기서 부터 두가지 옵션이 있습니다. 

8-1. 티스토리 플러그인 기능 이용하기 

첫번째는 티스토리에서 제공하고 있는 플러그인기능을 이용하여 구글 애널리틱스를 연결하는 방법입니다. 

이를 위해서는 7번 이미지에서 Option 1 추적ID 가 필요 합니다. 

추적ID 를 입력하고 저장하면 끝입니다. 

8-2. 추적 코드를 HTML 코드에 삽입하기 

두번째는 HTML/CSS 편집 기능을 이용하여 추적 코드를 직접 삽입하여 구글 애널리틱스에 연결하는 방법입니다. 

이를 위해서는 7번 이미지에서 Option 2 추적 코드가 필요 합니다. 

복사한 추적 코드를 HTML 코드에 삽입합니다. 

코드 삽입 위치와 관련해서 소스 최상단에 추가 하라던지, 또는 body 부에 추가 하라던지 하는 이야기 들이 많이 있는데요. 단지 구글 애널리틱스 연결만을 위한 거라면 위치는 어디라도 상관 없습니다. 

하지만 일반적으로 스크립트를 추가하는 위치는 <head> </head> 사이를 많이 사용하고 있으니 저는 위 이미지와 같이 <head> </head> 사이에 삽입했습니다. 

이렇게 하면 추적 코드 삽이도 완료 입니다. 

참고로 Google Search Console 등 다른 구글 서비스를 이용하기 위해서는 <head> 섹션에 추적 코드를 삽입하는것이 정석입니다. 

플러그인으로 입력 하는 경우 구글 웹마스터와 연동 할 수 없는 관계로 웹마스터를 사용할 계획이 있으신 분들의 경우 추적 코드를 HTML 소스에 삽입 하는 방식으로 구글 애널리틱스를 연동 하시기 바랍니다. 

Google Analytics (구글 애널리틱스)를 이용하여 사이트 관리를 더욱 효율적으로 하실수 있을 겁니다. 

각자 원하는 목표를 향하여 오늘도 화이팅 :)