HTML, CSS, JS만 사용해서 Mbti 테스트 만들기 - ChatGPT, Claude, netlify, 카카오 애드핏

평소에 mbti 테스트를 좋아해서 한번쯤 만들어 보고 싶었는데 마침 유튜브 알고리즘에서 다음 영상 두개를 보여줬다.

https://youtu.be/ai5YcT8Ws80?si=FBIKdL4XG64GEWFD

https://youtu.be/Ftu-27ikvgI?si=mzlFEahIfIHYNykT

 

MBTI 테스트는 주로 HTML, CSS, JS만 사용해서 만들었고, 나는 화면쪽 코드는 안해본지 오래여서 AI의 도움을 받아서 만들었다.

 

첫번째 영상에서는 AI로 기획, 디자인, 개발을 진행하는 방법을 알려줬는데 나는 사실 MBTI 테스트를 많이 해봐서 기획은 필요 없었고 주제만 정했다. 평소 동물의 숲 게임을 좋아했어서 동물의 숲 주민을 추천해주는 MBTI 테스트를 만들기로 정했고, 정한 주제로 가져가야 하는 분위기와 디자인 특징을 ChatGPT에게 질문했다.

 

그러고 Claude로 넘어가서 캐릭터 기반의 MBTI 테스트를 만들어 달라고 요청했고, GPT의 답변을 복사해서 해당 내용을 토대로 디자인을 개선해 달라고 요청했다.

Claude는 처음 사용해봤는데 이렇게 화면 예시까지 보여줘서 너무 신기했다. Claude도 무료는 질문을 많이 할 수 없어서 처음 만들어진 테스트 화면을 보고 수정할 곳을 찾아서 수정을 요청하고, 간단한 부분은 내가 작업하면서 수정해나갔다.

 

화면이 얼추 완성된 것 같아서 결과화면 이미지를 작업했다. 이미지 작업은 미리캔버스에서 진행했다.

동물의 숲 이미지들을 찾아서 넣고, MBTI에 맞는 설명을 작성해줬다. 이름은 추후에 받아서 넣을거여서 비워뒀다.

근데 내가 처음 해봐서 그런지 모르겠는데...이미지에 이름넣는게 제일 힘들었다ㅠㅠ

 

아무튼 어찌저찌 코드 작성은 완성을 했고 다음은 배포였다.

배포는 netlify에서 무료로 배포할 수 있어서 github에 코드를 올리고 netlify에 해당 코드를 배포했다.

배포를 하고, 친구들에게 테스트를 부탁했는데 내 폰이 안드로이드여서 몰랐는데...ios는 또 다른 영역이였다...ㅎ

그래서 계속 반복해서 수정하고 테스트를 부탁했고, 공유하기는 카카오톡 공유하기로 정하고, 이미지 저장은 꾹 눌러서 저장하는 방식으로 변경했다.

그러고 이왕 하는거 제대로 해보고 싶어서 광고도 넣었다. 광고는 카카오 공유하기를 넣은 김에 카카오 애드핏을 사용해서 넣어줬다. 승인은 5일정도? 걸렸고, 승인이 나고 링크를 여기저기 뿌렸다ㅎㅎㅎ아직 많은 사람이 하지는 않았지만 그래도 조금씩 사람들이 해보고 있어서 좀 뿌듯하다ㅎㅎㅎ

 

그리고 해보실 분들이 있다면 두번째 영상이 꿀팁이 많으니까 보고 참고하면 좋을 것 같다.

 

화면쪽 코드는 안해본지 오래였는데 재미있네 싶다가도 이래서 안했지 라는 생각이 공존했던 것 같다ㅎㅎ

그래도 이번에는 코드가 있어서 다음에는 주제만 잘 정하면 금방 만들 수 있을 것 같다!

내가 만든 동숲 주민 MBTI 테스트ㅎㅎ

https://animal-crossing-mbti.netlify.app/

동물의 숲 MBTI 테스트

결과는 여기에서 확인할 수 있습니다!

https://blog.naver.com/dudu__55/223591691665

동물의 숲 주민 mbti 테스트~!