on
MBTI 사이트 만들기(MBTI 곤충 테스트)
MBTI 사이트 만들기(MBTI 곤충 테스트)
728x90
안녕하세요 오늘은 저의 첫 사이트인 MBTI테스트 사이트의 제작 과정을 공유하고자 합니다.
MBTI 곤충 테스트
https://mbtibugs.netlify.app/
일단 시작하기에 앞서 다들 한 번씩 테스트해보고 오십쇼^^b
(mbti전문가가 아니기때문에 정확하진 않으니 재미로만 봐주세요!)
1. 참고 사이트
mbti사이트 제작을 하고싶은 분들께서 가장 궁금해하실 "난 왕초본데 도대체 어떻게 배포까지 하느냐?!"에 대한 물음을 한 번에 해결해줄 영상을 소개하겠습니다.
https://edu.goorm.io/lecture/25652/하루-10분-web-project-html-js-css로-나만의-mbti-사이트-만들기
제가 참고한 영상은 goorm(구름)이라는 사이트에 있는 판다코딩님의 강의였는데요.
사이트 제작시 필요한 이미지파일과 샘플페이지 git까지 모두 공유해주시고, 코드 하나하나 작성해주시기 때문에 몇시간만 투자하신다면 놀랄만큼 훌륭한 사이트를 제작하실 수 있습니다!
2. 제작 과정
일단 처음엔 위에서 공유해드린 판다코딩님의 영상을 보고 코드를 99%정도 일치하게 작성해두고,
이후 data.js의 내용(질문, 답변)과 테스트에 사용될 이미지, 사이트의 css를 제 스타일로 수정하였습니다.
mbti 특성 정리
사실...^^사이트 제작보다 더 곤욕을 치뤘던건 바로 mbti 특징을 공부하는 거 였는데요...☆
아무리 재미로 하는 사이트라곤 하지만 어느 정도는 말이 되는 테스트를 만들어야하기 때문에 mbti유형별 특징을 검색해가며 정리하고 공부했습니다!
그 다음으론
mbti 유형별 곤충 이미지
곤충을 그렸습니다.^.ㅠ~
이미 웹상엔 다양한 mbti 사이트가 있기때문에 이전에 나오지않은 특별한 주제로 만들어야 했는데요.
결국 전 '곤충을 귀엽게 그려보자!'라는 결론을 내렸습니다.
곤충을 선정할 때도 우여곡절(?)이 많았는데요. 그건 바로 사람들에게 유명하고 흔히 알만한 곤충이 16가지가 안되더라고요...mbti는 열여섯가진데! 곤충이 없잖아!!
사람들이 이걸 곤충으로 인정해줄까 싶은 것까지 어떻게든 끌어모아 열여섯의 곤충패밀리를 완성하게 되었다는 그런 이야기입니다 하하
처음엔 곤충이라 별로면 어떡하나 했는데 막상 그리고보니 너무 귀엽습니다...♥
3. 어려웠던 점
당연하게도 오류 찾는게 처음엔 너무 어려웠습니다.
분명 강의속 내용과 일치하게 썼음에도 오류가 생기곤 했는데 결론은 전부 '오타'였습니다
여러분은 절대! 급하게 따라적지 마시고, 코드가 제대로 작동하는지 중간중간 서버로 확인 하시길 바랄게요!
그리고 또 하나는 카카오톡으로 링크를 공유했을 때 나오는 '링크이미지'가 계속 변경이 안됐던 점!
알고보니 카카오톡 캐시때문이었습니다.
공유이미지 변경이 안되시는 분들은
https://developers.kakao.com/tool/clear/og
위의 사이트로 들어가셔서 로그인 한뒤 여러분 사이트의 URL을 초기화 시켜주시면 어느정도 시간이 흐른뒤 pc와 모바일에서 모두 이미지가 잘 변경된 걸 보실 수 있을겁니다!
4. 후기
1) 사이트 하나 만드는게 정말 쉽지 않다.
mbti 사이트는 페이지에 들어가는 내용도 적고 페이지수도 많지 않음에도 불구하고 꽤 복잡하다고 느껴졌는데 다른 사이트 제작은 얼마나 더 어렵고 복잡할지 벌써 긴장이 됩니다 하하
2) 부트스트랩과 깃허브 사용법을 알게 되었다.
아직까지 부트스트랩에 대해 잘 몰랐고, 무지하니 필요성도 못느끼는 상태였는데 이 사이트 제작에 절반은 부트스트랩 덕분에 완성됐다고 할 수 있을 정도로 정말 많은 도움이 됐습니다.
(해당 영상에선 부트스트랩 사용법만 알려줘서 깃허브는 제가 따로 공부했습니다)
3) 저절로 되는 코딩 공부
자바스크립트와 제이쿼리는 익숙하지 않은 나...
사이트를 제작하며 오류를 찾고, 내가 원하는 형태로 수정을 해가며 여기에 사용된 .js파일들을 계속 들여다보고 있으니 저절로 공부가 됐다.
이상 MBTI사이트 제작기였습니다!
다들 즐코하세요! 파이팅!
728x90
from http://cactus-code.tistory.com/24 by ccl(A) rewrite - 2021-10-12 00:27:22