Skip to content
/ squid-game Public

An interactive web application inspired by the universe of the Netflix series "Squid Game". Users answer questions modeled after key scenes from the show, and their psychological choices are analyzed to determine their MBTI personality type.

2 stars 0 forks Branches Tags Activity
Star
Notifications You must be signed in to change notification settings

chrisjo-dev/squid-game

BranchesTags

Repository files navigation

πŸ¦‘ Squid Game Personality Test

notion_header

πŸ› οΈ Tech Stack

An interactive web application inspired by the universe of the Netflix series "Squid Game".

Users answer questions modeled after key scenes from the show, and their psychological choices are analyzed to determine their MBTI personality type.

The application supports both Korean and English to accommodate a global audience.


🎯 Project Background

As a job seeker with no prior professional experience, I initiated this project to gain hands-on experience in handling real user traffic and managing the entire process from planning to deployment.

Through this comprehensive endeavor, I successfully planned, developed, and operated the entire service, managing user traffic effectively.

This experience laid the foundation for all my subsequent professional competencies.

In 2021, the Netflix series "Squid Game" gained immense popularity worldwide, spawning various content and memes.

Inspired by this cultural phenomenon, I developed an interactive web application that allows users to experience the show's universe while exploring their personality types.

This project goes beyond simple fan content by analyzing users' psychological responses and linking them to MBTI personality types, aiming to provide both entertainment and self-understanding.


🌐 Demo Site

https://squid-games.site


πŸ§‘β€πŸ’» Target Users

  • Fans of the "Squid Game" series
  • Individuals interested in testing their psychological responses in high-pressure situations
  • Those curious about MBTI personality types

πŸ› οΈ Tech Stack & Implementation Details

This project integrates various technologies to go beyond a simple frontend implementation and support real-world service operations.

πŸ”§ Frontend

Vue.js, Nuxt.js, Vuex, Vue Router

  • Utilized a component-based architecture to enhance reusability and maintainability.
  • Implemented server-side rendering (SSR) to improve initial load speed and achieve SEO optimization.
  • Managed user progress and result data efficiently through centralized state management.
  • Enhanced user experience by implementing multilingual support and result page routing.

🎨 UI/UX & Styling

CSS3, Custom Animation

  • Applied responsive design to provide a consistent user experience across various devices.
  • Increased immersion by incorporating animation effects that reflect the tension of the drama.

🌐 Multilingual Support

i18n (nuxt-i18n)

  • Supported Korean and English using internationalization (i18n) modules, considering global user accessibility.

πŸš€ Deployment & Operations

AWS, Netlify, GitHub Actions

  • Provided fast deployment and stable service through static site hosting.
  • Built an automated build and deployment pipeline using GitHub Actions.

πŸ“Š Analytics & Monitoring

Google Analytics, Sentry

  • Derived service improvement directions by analyzing user behavior.
  • Detected and responded to issues in real-time through error monitoring.

βš™οΈ Installation & Execution

Install Dependencies

npm install

Run Development Server (http://localhost:3000)

npm run dev

Build for Production & Start Server

npm run build
npm run start

Generate Static Site

npm run generate

πŸ“… Development Period

  • November 2021 ~ December 2021
  • Continuously improving based on user feedback

πŸ“‘ Planning & Design


πŸ‘₯ Team & Roles

  • PO / Frontend & Backend Development: Chris Jo (@chrisjo-dev)
  • Planning: Jun Seo Noh
  • Design: Seung Hee Jin
  • Frontend Development: Su Jin Kim

πŸ“„ License

This project is licensed under the MIT License.





πŸ¦‘ μ˜€μ§•μ–΄κ²Œμž„ μ‹¬λ¦¬ν…ŒμŠ€νŠΈ

notion_header

πŸ› οΈ Tech Stack

λ„·ν”Œλ¦­μŠ€ λ“œλΌλ§ˆ 'μ˜€μ§•μ–΄ κ²Œμž„'의 세계관을 기반으둜 ν•œ μ‹¬λ¦¬ν…ŒμŠ€νŠΈ μ›Ή μ• ν”Œλ¦¬μΌ€μ΄μ…˜μž…λ‹ˆλ‹€. μ‚¬μš©μžλŠ” λ“œλΌλ§ˆμ˜ μ£Όμš” μž₯면을 λͺ¨ν‹°λΈŒλ‘œ κ΅¬μ„±λœ μ§ˆλ¬Έμ— μ‘λ‹΅ν•˜λ©°, κ·Έ 심리적 선택을 λ°”νƒ•μœΌλ‘œ MBTI 기반 성격 μœ ν˜•μ„ 뢄석받을 수 μžˆμŠ΅λ‹ˆλ‹€. ν•œκ΅­μ–΄μ™€ μ˜μ–΄λ₯Ό μ§€μ›ν•˜μ—¬ κΈ€λ‘œλ²Œ μ‚¬μš©μžλ“€λ„ μ°Έμ—¬ν•  수 μžˆλ„λ‘ μ„€κ³„λ˜μ—ˆμŠ΅λ‹ˆλ‹€.

🎯 ν”„λ‘œμ νŠΈ λ°°κ²½

싀무 κ²½ν—˜μ΄ μ „λ¬΄ν•œ μ·¨μ—… 쀀비생 μ‹œμ ˆ, μ‹€μ œ μ‚¬μš©μž νŠΈλž˜ν”½μ„ μ²˜λ¦¬ν•˜λ©° κΈ°νšλΆ€ν„° λ°°ν¬κΉŒμ§€ μ „ 과정을 직접 μˆ˜ν–‰ν•˜λŠ” κ²½ν—˜μ„ μŒ“κ³ μž 이 ν”„λ‘œμ νŠΈλ₯Ό μ‹œμž‘ν•˜μ˜€μŠ΅λ‹ˆλ‹€. μ΄λŸ¬ν•œ μ „ 과정을 톡해 μ„œλΉ„μŠ€ 전체λ₯Ό κΈ°νšΒ·κ°œλ°œΒ·μš΄μ˜ν•˜λ©° μ‚¬μš©μž νŠΈλž˜ν”½μ„ κ°λ‹Ήν•˜λŠ” ν”„λ‘œμ νŠΈλ₯Ό μ™„μ„±ν•˜μ˜€κ³ , 이 κ²½ν—˜μ€ μ΄ν›„μ˜ λͺ¨λ“  싀무 μ—­λŸ‰μ˜ 기반이 λ˜μ—ˆμŠ΅λ‹ˆλ‹€.

2021λ…„, λ„·ν”Œλ¦­μŠ€ λ“œλΌλ§ˆ **'μ˜€μ§•μ–΄ κ²Œμž„'**이 μ „ μ„Έκ³„μ μœΌλ‘œ 큰 인기λ₯Ό λŒλ©΄μ„œ λ‹€μ–‘ν•œ μ½˜ν…μΈ μ™€ 밈이 μƒμ„±λ˜μ—ˆμŠ΅λ‹ˆλ‹€. μ΄λŸ¬ν•œ 문화적 ν˜„μƒμ— μ˜κ°μ„ λ°›μ•„, μ‚¬μš©μžλ“€μ΄ λ“œλΌλ§ˆμ˜ 세계관을 μ²΄ν—˜ν•˜λ©΄μ„œ λ™μ‹œμ— μžμ‹ μ˜ 성격 μœ ν˜•μ„ 탐색할 수 μžˆλŠ” μΈν„°λž™ν‹°λΈŒν•œ μ›Ή μ• ν”Œλ¦¬μΌ€μ΄μ…˜μ„ κ°œλ°œν•˜κ²Œ λ˜μ—ˆμŠ΅λ‹ˆλ‹€.

이 ν”„λ‘œμ νŠΈλŠ” λ‹¨μˆœν•œ 팬 μ½˜ν…μΈ λ₯Ό λ„˜μ–΄, μ‚¬μš©μžμ˜ 심리적 λ°˜μ‘μ„ λΆ„μ„ν•˜κ³  이λ₯Ό MBTI 성격 μœ ν˜•κ³Ό μ—°κ²°ν•˜μ—¬ μ œκ³΅ν•¨μœΌλ‘œμ¨, μ—”ν„°ν…ŒμΈλ¨ΌνŠΈμ™€ 자기 이해λ₯Ό λ™μ‹œμ— μΆ”κ΅¬ν•˜λŠ” λͺ©μ μ„ 가지고 μžˆμŠ΅λ‹ˆλ‹€.

🌐 데λͺ¨ μ‚¬μ΄νŠΈ

https://squid-games.site

πŸ§‘β€πŸ’» λŒ€μƒ μ‚¬μš©μž

  • 'μ˜€μ§•μ–΄ κ²Œμž„' λ“œλΌλ§ˆλ₯Ό μ‹œμ²­ν•˜κ³  ν₯λ―Έλ₯Ό λŠλ‚€ λΆ„

  • κΈ΄λ°•ν•œ μƒν™©μ—μ„œμ˜ 심리 λ°˜μ‘μ„ ν…ŒμŠ€νŠΈν•΄λ³΄κ³  싢은 λΆ„

  • MBTI 성격 μœ ν˜•μ— 관심이 μžˆλŠ” λΆ„

πŸ› οΈ 기술 μŠ€νƒ 및 κ΅¬ν˜„ 상세

이 ν”„λ‘œμ νŠΈλŠ” λ‹¨μˆœν•œ ν”„λ‘ νŠΈμ—”λ“œ κ΅¬ν˜„μ„ λ„˜μ–΄, μ‹€μ œ μ„œλΉ„μŠ€ μš΄μ˜μ„ μœ„ν•œ λ‹€μ–‘ν•œ 기술 μš”μ†Œλ₯Ό ν†΅ν•©ν•˜μ—¬ κ°œλ°œλ˜μ—ˆμŠ΅λ‹ˆλ‹€.

πŸ”§ ν”„λ‘ νŠΈμ—”λ“œ

Vue.js, Nuxt.js, Vuex, Vue Router

  • μ»΄ν¬λ„ŒνŠΈ 기반 μ•„ν‚€ν…μ²˜λ₯Ό ν™œμš©ν•˜μ—¬ μž¬μ‚¬μš©μ„±κ³Ό μœ μ§€λ³΄μˆ˜μ„±μ„ λ†’μ˜€μŠ΅λ‹ˆλ‹€.
  • μ„œλ²„ μ‚¬μ΄λ“œ λ Œλ”λ§(SSR)을 톡해 초기 λ‘œλ”© 속도λ₯Ό κ°œμ„ ν•˜κ³ , SEO μ΅œμ ν™”λ₯Ό λ‹¬μ„±ν–ˆμŠ΅λ‹ˆλ‹€.
  • μƒνƒœ 관리λ₯Ό 톡해 μ‚¬μš©μž 진행 상황 및 κ²°κ³Ό 데이터λ₯Ό 효율적으둜 κ΄€λ¦¬ν–ˆμŠ΅λ‹ˆλ‹€.
  • λ‹€κ΅­μ–΄ 지원 및 κ²°κ³Ό νŽ˜μ΄μ§€ λΌμš°νŒ…μ„ κ΅¬ν˜„ν•˜μ—¬ μ‚¬μš©μž κ²½ν—˜μ„ ν–₯μƒμ‹œμΌ°μŠ΅λ‹ˆλ‹€.

🎨 UI/UX 및 μŠ€νƒ€μΌλ§

CSS3, Custom Animation

  • λ°˜μ‘ν˜• λ””μžμΈμ„ μ μš©ν•˜μ—¬ λ‹€μ–‘ν•œ λ””λ°”μ΄μŠ€μ—μ„œ μΌκ΄€λœ μ‚¬μš©μž κ²½ν—˜μ„ μ œκ³΅ν•©λ‹ˆλ‹€.
  • λ“œλΌλ§ˆμ˜ κΈ΄μž₯감을 λ°˜μ˜ν•œ μ• λ‹ˆλ©”μ΄μ…˜ 효과λ₯Ό 톡해 λͺ°μž…감을 λ†’μ˜€μŠ΅λ‹ˆλ‹€.

🌐 λ‹€κ΅­μ–΄ 지원

i18n (nuxt-i18n)

  • κ΅­μ œν™”(i18n) λͺ¨λ“ˆμ„ ν™œμš©ν•˜μ—¬ ν•œκ΅­μ–΄μ™€ μ˜μ–΄λ₯Ό μ§€μ›ν•˜λ©°, κΈ€λ‘œλ²Œ μ‚¬μš©μž 접근성을 κ³ λ €ν–ˆμŠ΅λ‹ˆλ‹€.

πŸš€ 배포 및 운영

AWS, Netlify, GitHub Actions

  • 정적 μ‚¬μ΄νŠΈ ν˜ΈμŠ€νŒ…μ„ 톡해 λΉ λ₯Έ 배포와 μ•ˆμ •μ μΈ μ„œλΉ„μŠ€λ₯Ό μ œκ³΅ν–ˆμŠ΅λ‹ˆλ‹€.
  • GitHub Actionsλ₯Ό ν™œμš©ν•˜μ—¬ μžλ™ν™”λœ λΉŒλ“œ 및 배포 νŒŒμ΄ν”„λΌμΈμ„ κ΅¬μΆ•ν–ˆμŠ΅λ‹ˆλ‹€.

πŸ“Š 뢄석 및 λͺ¨λ‹ˆν„°λ§

Google Analytics, Sentry

  • μ‚¬μš©μž 행동 뢄석을 톡해 μ„œλΉ„μŠ€ κ°œμ„  λ°©ν–₯을 λ„μΆœν–ˆμŠ΅λ‹ˆλ‹€.
  • μ—λŸ¬ λͺ¨λ‹ˆν„°λ§μ„ 톡해 μ‹€μ‹œκ°„μœΌλ‘œ 문제λ₯Ό κ°μ§€ν•˜κ³  λŒ€μ‘ν•  수 μžˆμ—ˆμŠ΅λ‹ˆλ‹€.

βš™οΈ μ„€μΉ˜ 및 μ‹€ν–‰ 방법

μ˜μ‘΄μ„± μ„€μΉ˜

npm install

개발 μ„œλ²„ μ‹€ν–‰ (http://localhost:3000)

npm run dev

ν”„λ‘œλ•μ…˜ λΉŒλ“œ 및 μ„œλ²„ μ‹€ν–‰

npm run build
npm run start

정적 μ‚¬μ΄νŠΈ 생성

npm run generate

πŸ“… 개발 κΈ°κ°„

  • 2021λ…„ 11μ›” ~ 2021λ…„ 12μ›”
  • μ‚¬μš©μž ν”Όλ“œλ°±μ„ λ°˜μ˜ν•˜μ—¬ μ§€μ†μ μœΌλ‘œ κ°œμ„  μ˜ˆμ •

πŸ“‘ 기획 및 섀계

πŸ‘₯ νŒ€ ꡬ성 및 μ—­ν• 

PO / ν”„λ‘ νŠΈμ—”λ“œ & λ°±μ—”λ“œ 개발: 쑰원상

기획: λ…Έμ€€μ„œ

λ””μžμΈ: μ§„μŠΉν¬

ν”„λ‘ νŠΈμ—”λ“œ 개발: κΉ€μˆ˜μ§„

πŸ“„ λΌμ΄μ„ μŠ€

이 ν”„λ‘œμ νŠΈλŠ” MIT λΌμ΄μ„ μŠ€λ₯Ό λ”°λ¦…λ‹ˆλ‹€.

Screen Shots

image image
image image image

About

An interactive web application inspired by the universe of the Netflix series "Squid Game". Users answer questions modeled after key scenes from the show, and their psychological choices are analyzed to determine their MBTI personality type.

Topics

netflix korean mbti mbti-personality squid-game squid-game-website mbti-test

Resources

Readme
Activity

Stars

2 stars

Watchers

1 watching

Forks

0 forks
Report repository

Releases

No releases published

Packages

No packages published

Contributors 2

  •  
  •  

Languages