GPT로 글씨를 클릭하면 그 글씨를 복사해주는 HTML 코드짜기

글씨를 클릭하면 그 글씨가 복사되는 기능

위의 이미지와 같은 사이트, 다들 많이 사용하실 것 같다.

이모티콘이나 이모지 사이트를 즐겨찾기 해놓고, 필요할때마다 가서 누르면 복사되는.

그래서 즐겨찾기나 북마크 해놓고 자주 쓰는 그런 사이트 말이다.

그래서 궁금했다.

아니 저거 나도 해보고 싶은데.

웹 사이트는 못만들어도 (솔직히 이제 조금만 더 노력하면 만들 수 있을 것 같다. 도메인하나 파고 서버 파는 법만 배우면)

티스토리 블로그에서도 구현할 수 있지 않을까?

그래서 해봤다.

이건 GPT3.5 (무료) 만 있어도 할 수 있다!

그래서 만들어봤다. GPT를 활용해서. 우선 https://chat.openai.com/ 로 이동한다.

그리고 아래 이미지 처럼 프롬프터를 넣어주었다.

그럼 gpt가 코드를 쭉~ 읊어준다.

일단 이것만으로도 대박...

그럼 우측 상단을 눌러서 복사한 > 메모장 > 붙여넣고 > 다른이름으로 저장 > .html 확장자로 저장한다.

아래와 같이 html 파일로 저장되고 클릭하면 html 창이 뜬다.

실제로 이렇게 구현이 되었고. 클릭을 해보니 텍스트가 그대로 복사된다.

원하는 기능이 그대로 구현됨.
홀리 쓋....

그럼 이제 기능이 동작한다는 것을 확인했으니 진짜 블로그에 넣어볼까?

티스토리 블로그에 넣어봤다.

이런 것들을 통해 블로그 자체를 재미있는 곳?으로 만들어볼 생각이기 때문에.

블로그에서 구현되는게 우선이다.

 

괜찮은 서비스 수준으로 만들어지면

그때 가서 나중에 도메인이나 서버를 파던가 해야짘ㅋㅋㅋㅋㅋ

 

티스토리 에디터에서 html 블럭을 만들고

그 코드를 그대로 넣어주고

확인을 누르니깐 미리보기가 안된다. 뭐지...

일단 블로그 글을 발행! 일단 그냥 텍스트 같은데...

클릭해보니 된닼ㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋ

실제로 구글 검색창에 붙여넣기를 해보니 저 텍스트가 그대로 복사되었다.

와... 이게 되네....?

 

---

 

근데 뭔가 아쉽다.

버튼 모양이 있으면 더 누르고 싶을텐데.

버튼 css 를 짜달라고 했다.

 

위의 과정을 쭉 그대로 다시 해보고 (앞으로 위 과정은 이제 생략하고 설명할 예정)

html 파일을 만들어서 테스트 해보니 내가 원하는 결과물이 아니다.

난 저 글자 자체가 버튼이었으면 했는데.

그래서 다시 프롬프트를 입력. 그랬더니 원하는 결과물이 나온다.

이 또한 홀리..쓋... 된다 된다.

그리고 티스토리에서도 마찬가지로 잘 동작한다...

대박... 재미있는거 좀 많이 해봐야지

 

아쉬운 점은...

네이버 블로그나 노션 등에도 이런 기능을 직접 입혀보는 작업을 시도했으나,

아직까지 방법을 찾지 못했다.

html 코드를 만들어도 구현할만한 블로그 환경은 티스토리 밖에 없는 상황.

앞으로 이 작업은 티스토리해서 쭉~ 해봐야겠다!