[웹앱 + GAS] 3강. 웹 앱에 생명 불어넣기(CSS, JVS기초)

1.강의 목표

CSS의 역할이 HTML파일을 디자인하는 것임을 이해하고 간단한CSS 작업을 수행할 수 있다.
Java Script의 역할이 웹페이지와 사용자 간 상호작용 및 동적 움직임 구현임을 이해하고 간단한 Java Script 작업을 수행할 수 있다.
바이브 코딩을 이용해 CSS, Java Script(JVS) 작업을 조금 더 쉽게 할 수 있다.

2.준비물

:구글 계정, 인터넷 연결된 컴퓨터(모바일은 안 됨)

3. 들어가며

지난 2강에서 우리는 웹앱의 얼굴 뼈대를 만들고 세상에 공개하는 데 성공하였다. 하지만 아직 글자만 덩그러니 있는, 휑한 상태라 할 수 있다. 오늘 강의에서는 여기에 여러가지 디자인 및 동적 요소를 추가하는 작업을 하려고 한다.

먼저 지금까지 작업한 결과물과 앞으로 만들고자 하는 페이지를 다시 한 번 보여드리면 다음과 같다.

<목표 상태>

<현재까지의 결과물>

4. CSS 작업

index.html 파일의 <style></style> 태그에 css 코드를 작성하려고 한다. 이는 바탕 색, 글자 크기, 글자체, 버튼의 디자인 등을 결정하는 코드인데 배우는 데 며칠 소요될 정도로 다소 시간이 걸리는 작업이다.

이 부분은 바이브 코딩을 활용해 보자. Google AI Studio에 접속하여 아래와 같이 명령어를 작성하자.

나는 지금 구글 앱스스크립트를 이용해 웹 앱을 만들고 있어. html파일의 <style> 태그를 이용해 아래와 같이 디자인하려 해.

흰 바탕 / 주 색상 : 검정+베이지(#ece5d0) / 간혹 포인트가 되는 글자 색상 : 네이비(#1c4587)

이와 같이 원하는 디자인을 최대한 구체적으로 입력한다. 특히 우리 작업에는 버튼과 드롭다운까지 있으므로 이들의 디자인도 구체적으로 명시해줘도 좋을 것이다.

나의 경우에는 아래와 같은 결과가 나왔다. 아래 코드를 모두 복사하여 html파일의 <style>과 </style> 사이에 입력하자.

<!DOCTYPE html>
<html>
  <head>
    <base target="_top">
    <title> 수학 성장 현황 조회 </title>
    <meta name = "viewport" content = "width=device-width, initial-scale=1.0">
    <style>
      body {
  background-color: #f4f4f4; /* 아주 연한 회색 배경 */
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  display: flex; justify-content: center; padding: 20px;
}
.container {
  width: 100%; max-width: 500px;
  background-color: white; /* 흰색 바탕 */
  padding: 30px; border-radius: 12px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.1); /* 그림자 */
}
h1 {
  color: #1c4587; /* 포인트 블루 */
  text-align: center; font-size: 1.6em; line-height: 1.4;
  margin-top: 0;
}
.form-group { margin-bottom: 20px; }
label { font-weight: bold; margin-bottom: 8px; display: block; color: #333; }

/* select와 input, button 태그를 모두 비슷하게 꾸며줍니다 */
select, input[type="password"], button {
  width: 100%; padding: 12px;
  border: 1px solid #ccc; border-radius: 8px;
  font-size: 1em; box-sizing: border-box;
}
button {
  background-color: #1c4587; /* 포인트 블루 */
  color: white; font-weight: bold;
  cursor: pointer; border: none;
  transition: background-color 0.2s;
}
button:hover { background-color: #153569; }
.student-info {
  display: flex; justify-content: space-between;
  background-color: #ece5d0; /* 베이지 */
  padding: 15px; border-radius: 8px;
  margin-top: 20px;
}
    </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>개념</div>
    <div>문제해결</div>
    <div>추론</div>

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

이제 저장하고, 수정 배포한 후 웹앱을 조회해 보면 원하던 화면이 뜨는 것을 볼 수 있다.

5. JVS 작업

‘번호’ 드롭다운은 아직 비어 있는 것을 볼 수 있다. 1부터 30까지의 번호를 하나하나 입력하는 것은 너무 힘든 작업이다. 자바 스크립트를 이용해 “네가 알아서 1부터 30까지 번호 목록을 만들어 채워 넣어”라고 지시할 것이다. (코딩을 조금 해 보신 분들이라면 이것이 반복문임을 알아차렸을 것이다.)

먼저, 자바스크립트를 모르는 상태에서 한글로 알고리즘을 짜 보면 아래와 같다.

웹페이지의 시각적 요소를 모두 띄운 후 아래 작업을 실시한다.

'번호'에 해당하는 드롭다운 메뉴를 찾아 numberSelect라고 이름붙인다. 

i = 1로 둔다.
<option> 꼬리표를 하나 만든다.   ------(*)
방금 만든 꼬리표에 숫자 i를 적어 넣는다.
완성된 꼬리표를 '번호' 드롭다운 즉,numberSelect에 집어넣는다.
i를 1 증가시킨다.   -----(**)

(*)에서 (**)까지의 과정을 30번 반복한다.

어려워도 조금만 참고 끝까지 가 보자. 정 어려우면 이 작업도 나중에 바이브 코딩으로 하면 된다. 하지만 바이브 코딩을 하더라도, 어느 정도 원리를 이해하고 바이브 코딩을 해야 막연함을 덜하다. 그래서 자바스크립트를 어느 정도 설명드리는 것이다.

방금 만든 한글 알고리즘을 모두 자바스크립트 언어로 바꾸면 아래와 같다. 아래 내용을 </body> 바로 다음에 붙여넣자.

<!-- </body> 태그 바로 위에 붙여넣기 -->
<script>
  // 이 코드는 페이지가 모두 로딩된 후에 실행하라는 안전장치입니다.
  document.addEventListener('DOMContentLoaded', function() {

    // 1. '번호' 드롭다운 메뉴를 찾는다.
    const numberSelect = document.getElementById('number-select');

    // 2. 1부터 30까지 반복하는 반복문 구현
    for (let i = 1; i <= 30; i++) {
      // 3. 반복할 때마다, 새로운 <option> 꼬리표를 하나씩 만든다.
      const option = document.createElement('option');

      // 4. 만든 꼬리표에 숫자(i)를 적어 넣는다.
      option.value = i;
      option.textContent = i;

      // 5. 완성된 꼬리표를 '번호' 드롭다운 안에 집어넣는다.
      numberSelect.appendChild(option);
    }
  });
</script>

이제 저장, 수정배포하면 아래와 같이 번호 드롭다운이 정상적으로 작동함을 볼 수 있다.