1. 나만의 심리테스트/MBTI 테스트 만들기 - 화면 설계 및 시작 페이지 작성

글 작성자: 똥폴베.

프로젝트 생성 및 디렉토리 구성

자 심리테스트 만들기를 본격적으로 시작해보자. 가장 먼저 프로젝트를 생성하자. 필자는 GUIDE라는 이름의 프로젝트를 생성하였고 위와 같이 디렉토리를 구성하였다.

GUIDE

index.html
script.js
style.css

이름	설명
index.html	메인 페이지
script.js	페이지에서 기능을 동작하게 하기 위한 자바스크립트 파일
style.css	페이지를 꾸미기 위한 css파일

사실 아주 간단한 프로젝트기 때문에 따로 파일을 분리할 필요가 뭐가 있겠냐고 생각할 수 도 있지만.

필자는 깔끔한 것을 좋아하기 때문에 코드양이 적더라도 분리하였다.

<!DOCTYPE html>
<html lang="ko">
<head>
    <link rel="stylesheet" href="style.css">
    <title>나만의 심리테스트 - 가이드</title>
</head>
<body>
    
    <script src="script.js"></script>
</body>
</html>

기본적인 html의 소스코드다.

설명할 것도 딱히 없지만, 굳이 설명하자면 link 태그를 통해 style.css 파일을 불러오고 script 태그를 통해 script.js 파일을 로드한다.

화면 설계

나만의 심리테스트는 SPA(Single Page Application)으로 개발할 것이다.

SPA(Single Page Application)

SPA(Single Page Application)이란?
페이지의 전환 없이(새로고침 없이) 현재 페이지에서 동적으로 어플리케이션이 동작하는 것을 일컫는다.

응? 페이지가 하나인데 어떻게 시작, 문제, 결과 페이지를 구성하냐구...?? 동작 원리는 다음과 같다.

하나의 페이지에 위와 같이 시작 페이지, 문제 페이지, 결과 페이지를 몽땅 넣어준다.

그리고 시작 페이지에선 아래 그림과 같이 문제 페이지와 결과 페이지를 숨긴다.

자.. 이제 감이오는가? 마찬가지로 문제 페이지일 때는 문제 페이지를 보여주고 나머지는 숨김 처리,

결과 페이지일 때는 결과 페이지를 보여주고 나머지는 숨김 처리를 해서 마치 하나의 페이지에서 여러 개의 페이지로 전환하는 것처럼 보여준다.

그러면 코드를 아래와 같이 입력해보자.

<!DOCTYPE html>
<html lang="ko">
<head>
    <link rel="stylesheet" href="style.css">
    <title>나만의 심리테스트 - 가이드</title>
</head>
<body>
    <!-- 시작 페이지 -->
    <div id="start-page">
        <h1>나만의 심리테스트 - 가이드</h1>
        <button>시작하기</button>
    </div>

    <!-- 문제 페이지 -->
    <div id="main-page">
        <h1>문제</h1>
        <h2>문제 설명</h2>
        <button>선택 1</button>
        <button>선택 2</button>
        <button>선택 3</button>
        <button>선택 4</button>
    </div>

    <!-- 결과 페이지 -->
    <div id="result-page">
        <h1>결과</h1>
        <h2>결과 설명</h2>
    </div>

    <script src="script.js"></script>
</body>
</html>

시작 페이지, 문제 페이지, 결과 페이지를 각각 div태그로 묶어서 구성했다.

결과는 위와 같다. 위 결과에서 테스트를 시작하면 시작페이지만 보여야 하므로

style.css 파일에 다음과 같은 속성을 추가한다.

#start-page {
    
}

#main-page {
    display: none;
}

#result-page {
    display: none;
}

#는 해당하는 id를 지칭하는 태그다. id가 main-page와 result-page에 display: none 속성을 줌으로써 페이지를 숨겼다.

마무리

아무리 강좌용 테스트 프로젝트라고 하지만 그래도 보기도 좋은 떡이 맛도 좋은 법.

배경색을 검은색, 글자색을 흰색으로 변경하여 센치함을 주고 정렬을 가운데 정렬로 바꾸어보자.

body {
    background-color: black;
    color: white;
}

#start-page {
    text-align: center;
    margin: 0 auto;
}

#main-page {
    text-align: center;
    display: none;
}

#result-page {
    text-align: center;
    display: none;
}

페이지와 컨텐츠를 구성하는 건 각자의 몫이니 프로젝트를 진행하면서 어떤 테스트를 만들면 좋을지 생각해보자!

'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
0. 나만의 심리테스트/MBTI 테스트 만들기 - 서론 (0)	2022.04.23

1. 나만의 심리테스트/MBTI 테스트 만들기 - 화면 설계 및 시작 페이지 작성

프로젝트 생성 및 디렉토리 구성

화면 설계

SPA(Single Page Application)

마무리

'Development > Web' 카테고리의 다른 글

댓글

이 글 공유하기

티스토리툴바

프로젝트 생성 및 디렉토리 구성

화면 설계

SPA(Single Page Application)

마무리

'Development > Web' 카테고리의 다른 글

댓글

이 글 공유하기

다른 글

[Ubuntu] Let's Encrypt를 통해 HTTPS(SSL) 무료로 구축하기

SPA(Single Page Application), MPA(Multi Page Application)

[React] Create React App 을 이용해서 React 설치

0. 나만의 심리테스트/MBTI 테스트 만들기 - 서론

티스토리툴바