0. 나만의 심리테스트/MBTI 테스트 만들기 - 서론
시작하기 앞서..
친구들끼리 MBTI 테스트 혹은 심리테스트를 웹페이지에서 진행하고,
결과물을 공유해서 서로의 성향을 비교해 재미를 느껴본 경험은 다들 한 번쯤 있을 것이다.
예시) 코인 투자 성향 심리 테스트
https://cjwoov-invesetment-type.netlify.app/
글을 쓰게된 계기도 나도 그런 테스트를 한 번 만들어보고 싶었고 경험을 공유하면 좋을 것 같아서 글을 남긴다.
사전 지식
해당 과정은 HTML, CSS, JavaScript 언어를 사용한다.
HTML, CSS, JavaScript에 대한 많은 지식도 필요 없으며 아주 기본적인 개념만 알고 있으면 된다.
그렇게 어렵게 만들지 않을 것이기 때문에...
준비물
Visual Studio Code
: 소스코드 작성을 위한 에디터, 따로 사용하고 있는 에디터가 있으면 그 에디터를 사용하면 된다.
다운로드: https://code.visualstudio.com/
Visual Studio Code - Code Editing. Redefined
Visual Studio Code is a code editor redefined and optimized for building and debugging modern web and cloud applications. Visual Studio Code is free and available on your favorite platform - Linux, macOS, and Windows.
code.visualstudio.com
목차
'나만의 심리테스트 만들기' 과정의 목표는 심리테스트를 만들고 배포하여,
최종적으로 SNS(카카오톡)에 공유하고 광고(카카오애드핏)까지 달아 수익을 창출해보자이다.
따라서 다음과 같이 목차를 구성했다.
1. 화면 설계 및 시작페이지 작성
2. 기능 추가 및 문제페이지 작성
3. 데이터 입력 및 결과페이지 작성
4. 배포 & SNS 공유 기능 만들기
5. 광고(카카오애드핏) 적용 - 수익 창출

차근차근 달려보자 :)
'Development > Web' 카테고리의 다른 글
[Ubuntu] 워드프레스(Wordpress), LAMP(Linux, Apache, MySQL, PHP) 스택 설치 (0) | 2023.10.16 |
---|---|
[Ubuntu] Let's Encrypt를 통해 HTTPS(SSL) 무료로 구축하기 (0) | 2023.10.16 |
SPA(Single Page Application), MPA(Multi Page Application) (2) | 2022.11.20 |
[React] Create React App 을 이용해서 React 설치 (0) | 2022.11.20 |
1. 나만의 심리테스트/MBTI 테스트 만들기 - 화면 설계 및 시작 페이지 작성 (2) | 2022.04.24 |
댓글
이 글 공유하기
다른 글
-
[Ubuntu] Let's Encrypt를 통해 HTTPS(SSL) 무료로 구축하기
[Ubuntu] Let's Encrypt를 통해 HTTPS(SSL) 무료로 구축하기
2023.10.16 -
SPA(Single Page Application), MPA(Multi Page Application)
SPA(Single Page Application), MPA(Multi Page Application)
2022.11.20 -
[React] Create React App 을 이용해서 React 설치
[React] Create React App 을 이용해서 React 설치
2022.11.20 -
1. 나만의 심리테스트/MBTI 테스트 만들기 - 화면 설계 및 시작 페이지 작성
1. 나만의 심리테스트/MBTI 테스트 만들기 - 화면 설계 및 시작 페이지 작성
2022.04.24