[티스토리] 댓글 아바타(프로필 이미지)를 바꿔보자

기본 아바타 변경하기

기본 아바타는 뭐지?

티스토리는 기본적으로 로그인 없이 댓글 작성이 가능하다. 

그런경우 이 블로그처럼 댓글 옆에 자동으로 프로필 이미지가 랜덤하게 나타난다. 

 

예시를 보자.

 

 

이렇게 기본 프로필 랜덤 이미지가 나타난다. 

총 8가지로, 이번에는 이 이미지를 내 입맛에 맞게 바꾸는 포스팅이다. 

 

우선 대체 이미지를 찾아보자

속성을 확인하고 대체 이미지로 갈아끼우기 위한 작업을 시작해보자. 

가장 흔한 이미지 파일은 친숙한 JPG 또는 JPEG 이겠지만

앞으로 그런 이미지는 될 수 있다면 지양하자.

이런 녀석들은 확대하면 모자이크처럼 깨지는 녀석들이다. 

잡설은 여기까지 하고

속성을 어떻게 알아?

크롬이나 엣지나... (아니 설마 익스플로러 쓰는사람은 없겠지.....) 

기본적으로 화면에서 'F12' 키를 눌러보면 개발자 툴이라는게 생겨난다. 

주로 창 오른쪽에 생기는데, 뭐 복잡해 보이지만 많은걸 알 필요는 없다. 

 

나는 크롬을 주로 사용하는데 한쪽은 로그아웃을 할 필요가 있어서 이번에는 MS의 엣지를 사용했지만 동일하다. 

이런 이미지가 나타나는데

상단을 살펴보면 기본적으로 요소, 콘솔, 네트워크, 성능.... 이딴게 있다. 다 필요 없다. (브라우저마다 조금씩 다르다)

 

거기 제일 왼쪽을 보면 아이콘이 보인다. 

 

 

이놈이 크롬 아이콘이고

 

 

이놈이 MS Edge 아이콘이다.

 

 

클릭하고 창에 가져다대면 뭐가 확확 번쩍거리지만 신경 쓰지말고 그림을 클릭해보자

 

그럼 이렇게 뭐가 나오고, 오른쪽에 복잡한 소스코드에서 이녀석이 뭔지 찾아준다. 

그중에 주목해야 하는 부분은 

 

<img src="https://t1.daumcdn.net/tistory_admin/blog/admin/profile_default_07.png" class="avatar lazyload" alt="" data-src="https://t1.daumcdn.net/tistory_admin/blog/admin/profile_default_07.png" style="width: 60px; height: 60px; opacity: 1;">

 

저짝 제일 앞에 보면 profile_default_07.png 요딴 말이 있다.

수십개를 만들어서 확인해봐도 저 이미지는 00 ~ 07까지 딱 8개만 있는 것으로 보인다. 

 

그럼 찾을건 다 찾았다. 

PNG라는 확장자 그림인데, 이녀석은 확대를 해도 깨지지 않는 이미지 즉 '백터' 이미지다. 

그게 뭐냐고? 보실분들은 아래 더보기(접은글)를 보자.

1. 포터블 네트워크 그래픽스(Portable Network Graphics; PNG)는 비손실 그래픽 파일 포맷의 하나이다. 

2. 특허 문제가 얽힌 GIF 포맷의 문제를 해결하고 개선하기 위해서 고안되었다. 

3. PNG는 공식적으로는 "핑"(/pɪŋ/)이라고 읽지만, 대부분은 "피엔지"라고 영어 철자 그대로 읽는다.
4. PNG 포맷은 컬러 팔레트 화상과 그레이스케일 화상, 그리고 풀 컬러 화상 방식을 모두 지원한다.

5. 그러나 인터넷 상의 이미지 표시를 염두에 두고 개발되었기 때문에 CMYK 등의 색 공간은 지원하지 않는다.
6. 파일 확장자는 PNG 또는 png를 쓰며, MIME 타입은 image/png으로 적는다.
...... 라고 위키에 적혀있다. 

여튼 이건 배경을 없엘 수 있고 화질이 깨지지 않는 특징이 있다. 

자 그럼 중요한건 'profile_default_00' 이었으니 다음 준비를 하자.

 

그럼 프로필 이미지를 찾아야지?

물론 금손분들은 직접 그릴수도 있다.

MS의 파워포인트(Power Point)를 이용하면 png 파일을 다른이름으로 저장시켜 얻을 수 있다. 

(금손은 역시 부럽다.)

 

하지만 나같은 똥손 아저씨는 뭘 하느냐? .....검색한다. 

이리저리 확인해보니까 png 파일 뿐만 아니라

svg (이것도 확대시 화질이 깨지지 않는 '백터'이미지...)

확장자도 사용이 가능했다. 

그럼 

 

https://www.flaticon.com/kr/

무료 아이콘 및 스티커 - 수백만 종의 다운로드가 가능한 리소스

위 사이트에 회원가입을 하여 찾거나

 

https://icons8.com/icons

Download 1,324,600 free icons (SVG, PNG)

이런 페이지에서 찾아오면 된다. 

 

 

https://icon-icons.com/

Free Icons PNG, ICO, ICNS and SVG

나는 바로 위에서 찾아왔다.

물론 라이센스 문제가 있을 수 있으니 확인 후 별도 표기를 해야 할 수도 있다. 

참고로 나는 위쪽을 사용한다. (거의 저작권자 표시가 필요하긴 하다.)

 

그럼 사진 8장을 골라오자.

그리고 저장해둘때엔 될 수 있으면 이름을 통일하고 뒤에 숫자로0~8 이런식으로 하는게 좋다. 

 

아이콘을 골라왔다. 어떤거냐고?

더보기를 누르면 나타난다. 이미지 원본은 너무 크다. 

출처: https://icon-icons.com/ko/pack/xmas-giveaway-:)/1736

반드시 출처로 저작권 표시를 하자. 

그럼 바꿔야지?

우선 파일을 올려두어야 한다. 

이 페이지에서 링크를 따도 상관 없겠지만, 내가 어느날 그냥 이 글을 지우면 

안녕히 가시기 때문에 블로그 관리 페이지에 들어가자.

블로그 관리 페이지에서 '스킨편집' 클릭

 

우측상단에 'html편집' 클릭

 

다시 우측 상단에 파일 업로드 클릭

 

제일 하단에 '+추가' 클릭

 

파일을 찾아서 열기 클릭(ctrl이나 shift를 눌러서 한번에 선택이 가능하다)

 

마지막으로 

우측상단 '적용'을 일단 누르자

그럼 파일을 등록하는건 끝났다. 

 

다음은 CSS 적용이다. 

업로드된 파일을 찾아보면 대충 

이런식으로 나타나는데 그 위에 마우스커서를 두고 '우클릭' 을 해보면

다른건 다 필요 없고 '링크주소 복사'를 클릭한다. 

 

아무런 변화가 없지만 

텍스트창에 붙여넣기를 해보면

https://tistory1.daumcdn.net/tistory/6722565/skin/images/Avatar-1.svg 

이런식으로 웹 주소가 나타난다. 이 고유주소는 각각 사용자마다 다르기때문에 위에 내용을 붙여넣으면 안된다.

 

자. 1번을 복사했는데 나머지는 숫자만 다르게 파일이름을 저장해둔 이유가 있다. 

 

이제 상단의 CSS를 눌러보자

 

음. 또 뭔가 엄청난 글자들이 엄청나게 많지만, 제일 아래로 일단 다 내리자. 

 

까먹지 않도록 제일 밑으로 내리면 복사해둔 웹 주소 하나를 붙여넣기 해두자.

 

그 다음은 아래 코드를 복사한다. 

/* 댓글 아바타 치환 */

[src*='profile_default_00'],
[style*='profile_default_00'] {
  background-image: url('링크주소1');
  content: url('링크주소1');
}

[src*='profile_default_01'],
[style*='profile_default_01'] {
  background-image: url('링크주소2');
  content: url('링크주소2');
}

[src*='profile_default_02'],
[style*='profile_default_02'] {
  background-image: url('링크주소3');
  content: url('링크주소3');
}

[src*='profile_default_03'],
[style*='profile_default_03'] {
  background-image: url('링크주소4');
  content: url('링크주소4');
}

[src*='profile_default_04'],
[style*='profile_default_04'] {
  background-image: url('링크주소5');
  content: url('링크주소5');
}

[src*='profile_default_05'],
[style*='profile_default_05'] {
  background-image: url('링크주소6');
  content: url('링크주소6');
}

[src*='profile_default_06'],
[style*='profile_default_06'] {
  background-image: url('링크주소7');
  content: url('링크주소7');
}

[src*='profile_default_07'],
[style*='profile_default_07'] {
  background-image: url('링크주소8');
  content: url('링크주소8');
}

총 8개의 이미지를 각각 저렇게 괄호() 안에 따옴표'' 안에 넣자. 

주의할점은 따옴표가 꼭! 필요하다.

 

그럼 위에 복사해두었던 따로노는 링크 주소는 지워주고

우측상단 '적용'을 눌러주면 끝난다. 

 

끝!