우당콱쿠콰콱! 첫 웹페이지 제작 일기

 

3-1학기 때 '웹 프로그래밍'란 강의를 수강했다.

 

'웹 프로그래밍'에선

'네x버'와 '다X'같은 웹 사이트를 만드는 방법에 대해서 배운다.

 

정확히는 웹 사이트를 만들 때 쓰이는 도구/재료에 대해서 배운다.

우리가 카레를 만들 때
당근, 카레 가루, 고기가 필요하고

또 이 재료를 어떻게 손질하고, 조리하는지 그 방법에 대해 알아야 하듯이

웹페이지를 만들 땐

HTML(당근), CSS(카레가루), JavaScript(고기: 비계)란 재료(언어)가 필요하고,
위의 3개의 재료(언어)를 다루는 방법을 배운다.

 

'웹 프로그래밍'은 위에 나열한 방법들을 알려주는 강의였다.

 

난이도가 워낙 쉬워서 즐겁게 강의를 듣던 중

하루는 수업에서 '나만의 웹사이트 만들기'가 과제로 주어졌다.

실제로 이용자가 사용할 사이트가 아니라
단순히 보여주기 용으로 만드는 웹 사이트 페이지

한 개만 만들면 됐던 거라 만드는 게 어렵진 않았다.

 

 

내가 만든 웹 사이트 페이지

 

내가 과제로 만든 사이트는 위의 사진과 같다.
만드는 과정이 재밌어서 시간 가는 줄도 모르고 만들었다.

 

"나 웹 페이지 쪽으로 가야 하는 거 아니야?!

너무 재밌기도 하고 나 쫌 하잖아!"

 

칠 수 있는 설레발이란 설레발은 모두 치며 재밌어하고 있을 때

갑자기 큰 장애물이 나타났다.

'웹 프로그래밍' 강의를 듣던 당시

나는 '서버 관리'란 수업을 듣고 있었다.

 

해당 수업을 진행하는 교수님께서

과제로 본인의 홈페이지를 제출하라고 하셨다.

 

마침 나는 '웹 프로그래밍' 과제를 하면서 만들어 놓은 홈페이지가 있어서
이걸 제출하면 좋겠다라는 꼼수를 생각하던 중

교수님이 추가사항 하나를 덧붙이셨다.

"사용자가 아이디와 비밀번호를 입력해서

로그인이 가능하도록 구현하세요"

 

즉 홈페이지에서 로그인이 가능하도록 하라는 이야기였다.

이렇게 되면 내 입장에선 난이도가 확 올라간다.

 

"로그인 구현하는 게 뭐 어려운 일이라고?"

 

나도 처음엔 그렇게 생각했다.

그런데 찾아보니 쉽지 않았다.

로그인 기능을 구현하는 방법엔 2가지가 있었다.

mysql + php를 이용해서 로그인을 구현할 수 있고

javascript만을 이용해서 임시방편용으로 로그인을 구현할 수도 있었다.

 

이게 무슨 소린가 하면

나는 카레(홈페이지)를 만들기 위해

'웹 프로그래밍' 강의에서 HTML(당근), CSS(카레가루), JavaScript(비계)

이렇게 총 3개의 카레 재료 다루는 방법을 배웠었다.

 

그런데 갑자기 카레(홈페이지)에 

소고기(mysql + php = 로그인 기능)를 추가하라고 한 거다.

 

나는 당근(HTML), 카레가루(CSS), 비계(JavaScript)를 조리해서 카레 만드는 방법은 배웠어도

소고기(mysql + php = 로그인 기능)를 손질해서 카레를 만드는  방법은 배우진 못했다.

물론 카레를 만들 때 꼭 소고기(mysql, php)를 이용할 필요는 없다.

소고기 대신 비계(javascript)를 이용해서 만들 수도 있었다.
감히 개발 언어의 최강자인 javascript를 비계에 비유해서 정말 미안하지만

그때 당시 나에게 javascript 선택지는 비계 선택과 같았다.

 

어떤 고기를 사용해서 만들든 카레(로그인 기능이 있는 웹사이트)는 카레였다.

문제가 있다면 비계를 사용해서 만들면 고기 식감이 좋지 않다는 것이다. = 임시방편용일 뿐이라는 것.

그렇다고 mysql과 php로 구현하자니,

즉 소고기를 이용하자니 나는 mysql과 php는 한 번도 다뤄본 적이 없었다.

javascipt에 대한 내 이해도는

이제 막 게임을 켜고,

튜토리얼 단계를 거치고 있는

초보 중에서도 왕 초보 수준이라

이것도 다뤄본 적이 없다고 해도 과언이 아니다.

고민 끝에 손이라도 대봤던 javascript(비계)로 로그인 기능을 구현했고,

그렇게 땜방 10번은 한 거 같은 댐 하나(웹페이지)를 만들어냈다.

 

 

만들었던 사이트의 코드 링크를 정리한 글을 올리며 마무리하고자 한다.

 

* css와 javascript 파일을 별도로 분리하지 않고 합쳐서 만들었다.

'서버관리' 기말고사 시험 문제 중에 내가 만든 홈페이지를 빠르게 올려야 하는 문제가 있어서

파일을 여러개로 분산하는 것보단 최소한으로 만들어 놓는 게

시험 시간 단축에 용이하다고 판단해 파일 분리를 하지 않았다. 

 

참고로 '서버관리' 과목은 시험 문제를 미리 알려주는 과목이었기에

시험에 맞게 파일을 준비할 수 있었다.

 

 

https://studywithowl.tistory.com/127

[HTML+JVS] HTML과 JVS로 홈페이지 및 로그인 기능 구현