1. 결과물 URL과 스크린샷

https://magicspell.netlify.app/ 

랜딩페이지

테스트 페이지

결과 페이지

결과 페이지 하단부

2. 자기소개

안녕하세요! 저는 방구석에서 노마드코더 유튜브를 켜고 말린 고구마 쩝쩝거리는 것을 좋아하는 중생입니다. 대학원에서 HCI라는 분야를 공부하고 있습니다. 분야 특성상 웹 개발이 자주 필요해서 노마드코더 덕을 톡톡히 보고 있답니다. 심리테스트를 전부터 만들어보고 싶었던 참에 귀여운 이벤트다 싶어 참가하게 되었습니다.

3. 서비스 소개

제목에서부터 알 수 있듯이 저는 해리포터 덕후입니다! 그래서 간단한 문항들에 응답하면 본인에게 어울리는 해리포터 마법 주문을 알 수 있는 테스트를 만들어 보았습니다. 아바다 케다브라처럼 무시무시한 주문들은 싹 걸러내고 아주 평화롭고 평온한 주문들만 모아두었어요. 주문에 대한 자세한 정보는 나무위키와 해리포터 위키를 참고하였습니다.

이스터에그가 숨어있습니다 🐣

우선 "처음부터 다시 하기"를 클릭하면 아래와 같은 확인창이 뜹니다.

404페이지도 조금은 특별합니다!

4. 개발 과정

개발 스택: React.js, Gatsby

레퍼런스 정리: https://github.com/jyoonsong/harry-potter-test

하루만에 다 만드셨다는 분들 보면 정말 대단하신 것 같아요. 저는 처음에 로직을 짤 때는 간단하다고 생각했는데 막상 개발하면서 보니 잘못 생각했던 것이나 실수하게 되는 부분이 많아 계획보다 오래 걸렸습니다. 사나흘 정도 저녁 내내 시간을 투자했어요. 니꼬쌤께 배운 대로 로직을 다 짠 후 코드를 정리하는 순서로 작업했는데, 정리하는 데도 만만찮은 시간이 소요됐습니다.

어려웠던 점 세 가지만 꼽자면 다음과 같습니다.

1) 토너먼트 형식이나 MBTI와 같이 분류기준 수가 딱 떨어지는 로직으로 디자인하지 않고, 그때그때 답변에 따라 해당되는 주문들의 점수를 올리는 점수제로 디자인하였습니다. 그러다보니 마지막에 동점자가 발생하면 일이 복잡해지는 상황이 발생하더군요 (...) 동점이 발생했을 때만 보여지는 추가 질문을 하나 만들어 해결했습니다.

2) 한 페이지에 들어가는 이미지와 애니메이션 수가 많은데요. 이미지 최적화를 하고 나니 로딩 속도가 개선되었습니다. 애니메이션의 경우 webkit 버전도 꼭 추가해주어야 하더군요. 특히 모바일 크롬이나 카카오톡 브라우저에서 애니메이션 버그가 있었는데, webkit 버전을 추가하고나니 사라졌습니다.

3) SNS에 공유할 때 보여지는 이미지를 연결시키는 데 꽤 긴 시간을 투자했습니다. 페이스북 디버거 나 카카오톡 OG 캐시 제거 기능이 큰 도움이 되었어요. 결과적으로는 아래와 같이 성공했습니다.

랜딩 페이지를 공유하면 아래와 같이 나옵니다.

결과 페이지를 공유하면 아래와 같이 결과 이미지가 공유됩니다.

5. 앞으로 계획

남은 투두는 다음과 같습니다.

• progress bar 추가
• 피드백 폼 붙여놓기
• 호크룩스 설명 써놓기 (질문 하나에 호크룩스가 등장하는데요, 호크룩스는 볼드모트가 영혼의 일부를 담아두는 물체입니다)

그외에도 피드백 언제나 환영입니다 🤩 그럼 다들 즐거운 코딩하셔요💜