코딩 하나도 모르는 코린이가 HEXACO 성격 테스트 홈페이지 만든 이야기 feat. GPT

 

아이디어 탄생

HEXACO 성격 테스트 웹사이트를 만들기로 한 계기는 많은 사람들이 자신의 성격을 더 깊이 이해하고 싶어한다는 점에서 시작되었다. HEXACO 모델은 정직-겸손, 감정성, 외향성, 우호성, 성실성, 경험에 대한 개방성이라는 6가지 주요 성격 특성을 평가하는 데 중점을 둔다. 이를 바탕으로 누구나 쉽게 접근할 수 있는 온라인 테스트를 제공하면 많은 사람들에게 도움이 될 것이라는 생각에서 프로젝트가 시작되었다.

 

https://hexacotest.site/

HEXACO 성격 테스트 | HEXACO Personality Test

 

 

 

 

기획 단계

웹사이트의 기획은 사용자 경험을 최우선으로 고려하는 것에서 출발했다. 웹사이트의 구조는 다음과 같이 설정되었다:
1. 메인 페이지: HEXACO 모델과 성격 테스트에 대한 간단한 소개와 시작 버튼.
2. 테스트 페이지: 각 성격 특성에 대한 질문이 제시되고, 사용자는 각 질문에 대해 응답을 선택한다.
3. 결과 페이지: 테스트가 끝난 후 사용자가 각 성격 특성에 대한 점수를 시각적으로 확인할 수 있도록 그래프와 함께 결과를 제공한다.
4. 추천 페이지: 사용자의 성격 특성에 맞는 유명인의 캐리커쳐를 보여준다. 이 캐리커쳐는 GPT를 통해 생성된 것들이다.

 

디자인

웹사이트의 디자인은 직관적이고 깔끔하게 유지하는 것을 목표로 했다. 배경은 부드러운 색상을 사용하고, 각 성격 특성을 나타내는 색상을 사용해 사용자들이 쉽게 구분할 수 있도록 했다. 폰트와 레이아웃은 사용자들이 쉽게 읽고 반응할 수 있도록 심플하고 현대적인 스타일을 채택했다. 또한, 결과 페이지에서는 각 성격 특성에 맞는 유명인의 캐리커쳐를 추천하여 사용자들이 더 재미있고 흥미롭게 자신의 결과를 받아볼 수 있도록 했다.

 

개발 단계

초기 설정

먼저 HTML, CSS, JavaScript를 사용해 웹사이트의 기본 구조를 잡았다. HTML은 웹페이지의 뼈대를 구성하고, CSS는 스타일을 정의하며, JavaScript는 사용자 인터랙션과 데이터 처리를 담당했다.

 

질문 로드 및 표시

테스트 페이지에서 각 질문을 동적으로 로드하고 표시하기 위해 JavaScript를 사용했다. 질문은 JSON 형식으로 저장되어 있었고, 페이지 로드 시 이를 불러와 사용자에게 표시했다. 사용자가 각 질문에 응답할 때마다 선택한 답변이 저장되도록 구현했다.

페이지 네비게이션

 

테스트는 여러 페이지에 걸쳐 진행되도록 설정되었다. 사용자가 '다음' 버튼을 클릭하면 다음 질문 세트가 표시되며, 모든 질문에 답변을 완료하면 결과 페이지로 이동하도록 했다.

 

결과 계산 및 표시

결과 페이지에서는 사용자가 선택한 답변을 바탕으로 각 성격 특성의 점수를 계산했다. 이를 시각적으로 나타내기 위해 차트를 사용했으며, 각 특성에 대한 설명과 함께 점수를 제공했다. 이를 통해 사용자는 자신의 성격을 한눈에 이해할 수 있게 되었다.

 

유명인 캐리커쳐 추천

특히, 사용자의 성격 특성에 맞는 유명인의 캐리커쳐를 추천하는 기능이 추가되었다. 이 캐리커쳐들은 GPT를 통해 생성된 것으로, 각 성격 특성에 맞는 유명인들을 선정하여 재미있는 이미지로 표현되었다. 예를 들어, 외향성이 높은 사용자는 활발하고 사교적인 유명인의 캐리커쳐를 볼 수 있고, 성실성이 높은 사용자는 책임감 있고 신뢰할 수 있는 인물의 캐리커쳐를 볼 수 있었다.

 

테스트 및 개선

웹사이트가 완성된 후에는 다양한 사용자들로부터 피드백을 받았다. 이를 바탕으로 몇 가지 중요한 개선 사항을 반영했다:
-질문의 명확성: 일부 질문이 모호하다는 피드백이 있어 더 명확하게 수정했다.
-디자인 조정: 사용자가 더 쉽게 사용할 수 있도록 버튼 크기와 색상을 조정했다.
-성능 최적화: 로딩 속도를 개선하기 위해 코드 최적화와 이미지 압축을 수행했다.

 

론칭 및 운영

모든 준비가 완료된 후, 웹사이트는 정식으로 론칭되었다. 사용자들은 자신이 어떤 성격 특성을 가지고 있는지 알아볼 수 있었고, 이를 통해 자신을 더 잘 이해하고 타인과의 관계를 개선하는 데 도움을 받았다. 특히, 성격 특성에 맞는 유명인의 캐리커쳐를 보는 재미로 사용자들은 테스트를 더 흥미롭게 느꼈다.

 

 

모든 코드는 VISUAL STUDIO CODE로 실행했고, GPT는 처음부터 끝까지 모든 코드를 제공했다.

 

코드를 하나도 모르는 상황에서 만든 사이트가 이정도라니 대단할 따름이다.

 

https://hexacotest.site/

HEXACO 성격 테스트 | HEXACO Personality Test