티스토리 블로그에 다국어 지원 기능을 추가해 보자!!! AI를 활용한 코딩 방법

안녕하세요 실장맨 입니다.

오늘은 AI시대를 살아가면서 저는 또 어떤것을 활용하고 있는지 작성해보는 시간입니다.

어떤분 블로그를 들어가보니 우측상단에 다국어 지원 해주는 것이 있더군요

와우

 

정말 정보화 시대를 살아가는데 아는게 힘이라는것을 많이 느낌니다.

 

1. 저는 구글 API접속을 쉽게 하기 위해 5000만 인구인 한국에만 블로그를 오픈하는것은 현명하지 않다고 생각했었어요

그래서 영어 번역분도 있어야 한다 생각해서 하나씩 추가로 작성을 하고 있었죠 ㅋ

 

https://siljjangman.tistory.com/39#google_vignette 

How to apply for an Indonesian Visa (2025 Guide)

 

https://siljjangman.tistory.com/19

인도네시아 비자 신청 완벽 가이드! (E-Visa, 도착비자) (2025년 작성)

 

 

그래서 기존에 위에서 보시는바와같이 영어 한국어 버번으로 2개를 따로 작성했었던거예요 ㅠ.ㅠ

아 이런 귀찮게 이렇게 했었다니 ㅋㅋㅋ

 

2. 아~! GPT는 언제나 화이팅이 넘치지만 아직은 능동적이지는 않아요 ㅋ

기존에 이부분에 대해 협의를 했었는데 다국어 지원 기능을 이야기해주지 ㅋㅋㅋㅋㅋㅋ

무조건 좋다고만 하니 ㅋ

 

암튼 이렇게 하나씩 배워가는거겠죠 아직은 렙업을 할 구간이 많이 남았다는거겠죠 ^^

 

3. 처음에는 명칭도 몰라서 캡쳐해서 이미지를 GPT에 오렸습니다.

그리고 내가 원하는 티스토리 상단 언어 번역 기능 넣는 방법을 문의 했구요

 2가지 방법을 알려줬어요

방법 1. 구글 번역 위젝 삽입 방법

방법 2. 자체 커스텀 HTML - JS 활용

추가적으로 구글에 검색해 보았더니 서비스지원 싸이트들이 있더군요

사용료가 발생하는 유료가 많았었어요

 

4. 구글위젯 사용이 저한테는 적합할것 같아서 그걸로 하기로 정했습니다.

 

5. 그렇게 하고 결정하면 단계별 설명을 해줘요

근대 이 불친절한 GPT는 어디에 넣어야 하는지 상세하게 알려주지는 않아요 ㅋ

추가적으로 하나씩 알아간것 차례로 기입해 볼께요

 

단계 1

블로그 꾸미기 -> 스킨편집으로 들어가야 합니다.

티스토리 블로그 관리페이지에 들어가면 있어요

 

 

단계 2

우측에 HTML 편집 버튼 누르고 들어 갑니다.

무서운 문구가 나오는데 우리는 해야하니 내가 알아서 할게 라는 내용으로 YES 클릭 ㅋ

 

 

 

단계 3

제가 올린것을 그대로 사용하지는 마세요

무료버전으로라도 GPT사용하셔서 맞는것으로 쓰세요 

문제생기면 책임 못져요 ㅎ

저는 아래 내용의 코드가 올라온거 해당부위칸에 넣었습니다. 

body 에 넣어야 해서 몇번 문제 있었어요

head 인지 body인지 알려주릴 안아서요 ㅎ

 

 

캡쳐해서 GPT에 물어봐도 좋아요

몇번째 줄에 넣어야 하는지도 알려줘요

 

단계 4

몇번의 디버깅후 아래와 같이 완료는 했습니다.

우측 상단 오른쪽에 보시면 언어 선택할수 있게 나왔어요

영어, 불어, 일어, 중국어 등  지원해 주더라구요

 

 

디자인적인 부분을 저는 많이 신경을 아직은 못쓰는 편이라

이정도만해도 우선은 만족합니다. ㅋㅋ

어제보다 하나더 배워가고 있어요 

감사합니다.

 

행복한 하루 되세요 ^^