반응형 MBTI2 [HTML, Javascript] 심리테스트 공유하기 기능 구현하기 ⚡️문제점 보통 심리테스트 같은 컨텐츠의 꽃은 이용자들이 본인의 결과를 공유하기를 통해 사용자 수를 점점 넓혀가는 것이라 생각한다. 테스트 결과창에 add this를 통해 SNS로 링크를 공유하는 것은 해결했지만 막상 공유를 하게되면 결과창에 대한 페이지를 공유하는 것이 아니라 메타태크의 이미지가 공유가 되었다. ⚡️해결 방법 처음에 방법들을 찾아보았을 땐 결과별로 페이지 html를 다르게 하여 결과에 따라 다른 페이지에 이동하도록 하면 해당 결과를 바로 공유할 수 있다는 방법과 라이브러리 html2canvas를 통해 캡쳐본을 만들어서 공유할 수 있다는 방법을 보았다. 하지만 이 방법들을 통한 컨텐츠 공유하기에 대한 자세한 정보가 없어 다른 방식으로 해결해 보기로 했다. 위에 있는 메타태그 이미지를 결과.. 2021. 9. 25. [HTML, CSS, Javascript] 롤 심리테스트 만들기 https://lolpersonalitytest.netlify.app/ 롤 심리테스트 리그 오브 레전드를 플레이하며 겪는 상황들로, 협곡에서 알아보는 나의 심리를 추측하는 테스트입니다. lolpersonalitytest.netlify.app 한창 mbti 심리테스트가 유행했을 때 나도 한번 만들어봐야지 하는 마음이 있었다. 어플도 다 만들고 시간이 남아 내가 자주하는 게임으로 심리 테스트를 만들어보았다. 서버는 netlify, 광고는 카카오 애드핏, 공유하기는 Add this를 사용했다. 기본 로직은 mbti 스타일이 아니라 질문마다 하나의 점수로 적립해서 결과를 뽑아내는 간단한 방식을 사용했다. 질문은 16가지로 프로그래스바와 이미지, 버튼 3개로 구성되어있다. 버튼을 클릭 시 버튼마다 0점, 1점, .. 2021. 9. 23. 반응형 이전 1 다음
오픈 채팅
