[웹앱 + GAS] 2강. 웹 앱의 얼굴 만들기

1.강의 목표

Code.gs(두뇌)와 index.html(얼굴)의 역할을 비유를 통해 명확히 이해한다.
웹앱의 모든 시각적 요소(버튼, 입력창 등)의 뼈대를 완성한다.
웹앱을 ‘배포’하여, 스마트폰으로도 접속 가능한 나만의 고유한 인터넷 주소를 생성하고 접속할 수 있다.

2.준비물

: 1강에서 작업했던 구글 스프레드시트와 앱스 스크립트 프로젝트

3. 들어가며

지난 시간에는 구글 앱스 스크립트를 이용해 HTML파일에 간단히 ‘안녕하세요’라는 글자를 남겨 보았다. 이번 시간에는 글자 뿐 아니라, 버튼이나 드롭다운 등 여러 시각적 요소를 넣어서 웹앱의 얼굴을 만들어 볼 것이다.

Code.gs파일과 index.html 파일의 역할을 복습해 보면 다음과 같다.

Code.gs : 웹 앱의 두뇌 역할. 웹앱에서 수행할 명령 모음.
index.html : 웹 앱의 얼굴 역할. url 링크를 통해 웹앱을 방문하였을 때 눈에 보이는 제목, 버튼, 글상자 등 모든 ‘외형’을 구성.

즉, Code.gs에서 명령을 내리고 이를 index.html에서 보여주는 것이라 하였다. 이번 시간에는 웹앱의 얼굴을 만들어 볼 것이므로, 주로 index.html 파일을 작업하게 될 것이다.

4. html 파일 구성

html파일의 기본 구성은 늘 아래와 같다. GAS에서 html파일을 열면 아래와 같이 기본으로 세팅되어 있다.

<!DOCTYPE html>
<html>
  <head>
    <base target="_top">
  </head>
  <body>
    
  </body>
</html>

4.1. html파일 구조

구조는 아래와 같다.

html 태그란?

작성중

head 태그란?

작성중

body 태그란?

작성중

4.2. head 태그 구성

아래와 같이 코드를 작성하자.

<!DOCTYPE html>
<html>
  <head>
    <base target="_top">
    <title> 수학 성장 현황 조회 </title>
    <meta name = "viewport" content = "width=device-width, initial-scale=1.0">
    <style></style>
  </head>
  <body>
    
  </body>
</html>

<코드 설명>

<title>.. : 웹앱의 창 제목
<meta name = … : 뷰포트(웹페이지가 사용자에게 보여지는 영역)의 크기를 조절하려 모바일 기기에서도 웹페이지가 잘 보이도록 설정하는 역할
<style> … : HTML 문서 내에서 글자, 배경색, 글꼴 등과 같은 스타일 정보를 정의하여 웹페이지를 꾸미는 역할

4.3. body 태그 구성

이제 웹앱의 진짜 얼굴에 해당하는 body 태그 부분을 작성해 보자. 먼저, 간단히 아래와 같이 제목, 텍스트, 입력폼, 버튼을 구성해 보려고 한다.

아래와 같이 body 태그에 제목, 텍스트, 입력폼, 버튼 요소를 넣어 준다.

<!DOCTYPE html>
<html>
  <head>
    <base target="_top">
    <title> 수학 성장 현황 조회 </title>
    <meta name = "viewport" content = "width=device-width, initial-scale=1.0">
    <style></style>
  </head>
  <body>
  <div class="container"> <!-- 전체를 감싸는 상자 -->
    <h1>수학 성장 현황 조회</h1>
    
    <div class="form-group">
      <label>반</label>
      <select> <!-- 버튼 대신 select 태그 사용 -->
        <option>1</option>
        <option>2</option>
        <option>3</option>
        <option>4</option>
      </select>
    </div>

    <div class="form-group">
       <label>번호</label>
       <select id="number-select"></select> <!-- 번호 드롭다운 (JS로 채울 예정) -->
    </div>

    <div class="form-group">
       <label>비밀번호</label>
       <input type="password" placeholder="비밀번호를 입력하세요">
    </div>

    <button>조회하기</button>
    <hr>
    
    <div class="student-info">
      <span>학번 : </span>
      <span>이름 : </span>
    </div>

  </div>
</body>
</html>

<코드 설명>