웹프로그래밍 입문

1. 웹에 대한 공부를 시작하게 된 동기.. "실행력"의 부족

고등학교 때부터 공부보다는 IT활동에 관심이 많았습니다. 그 때의 활동을 통해서 입학사정관제로 대학도 가게 되었구요. 꾀 괜찮은 성과들이 나왔지만 정말 아쉬웠던 점이 있었습니다. 바로 '실행력'이었습니다.

당시에 제가 교내 동아리 겸 창업팀(같은 동급생, 후배 들끼리 소소하게ㅎ)을 꾸려 학교폭력 방지를 위한 모바일 앱 서비스를 기획하여 여러 창업경진대회, 창업지원프로그램에 참여했습니다. 그때까지만(2011~12) 해도 '학교폭력'이란 주제는 정말 '핫' 했습니다. 뉴스나 각종 TV프로그램에도 '학교폭력'이란 주제로 많은 콘텐츠를 만들었었구요. 그래서 그런지 저희 아이템이 상대적으로 사업계획서나 UI디자인 등이 실제와 같이 잘 되어있었기에 많은 대회에서 좋은 성적을 기록했습니다.

하지만 딱 거기까지였습니다. (좋은 대회에서 좋은 성적) 지원금도 받고 상도 적지 않게 받았지만, 아이템의 '사업화'가 1도 되지 않았습니다. 고등학생들끼리 팀을 꾸리다보니 실무 경험, 실제 서비스 개발 및 론칭 경험 등이 부족했습니다. 이 중 가장 뼈저리게 느꼈던 것은 실제 서비스를 개발 할 수 있는 '개발자들의 부재'였습니다. 아무런 인맥도 없고 인프라가 없던 저희로서는 그런 인력을 구할 수 있는 능력에 한계가 있었죠.

이런 경험 이후 20살 1년을 흥청망청 놀고 군입대를 했습니다. 군대 안에서 정말 하고싶은 것, 하루 종일 잡고 있어도 조금 질리긴해도 다음날 또 하고 싶은 일을 생각하다보니 결국에는 IT 분야였습니다. 무엇보다 이 분야에서 기획자가 되든, 디자이너가 되든, 개발자가 되든 간에, 직접 간단한 서비스라도 만들 수 있을정도의 능력이 되어야 살아남을 수 있다는 판단이 섰습니다. 그래서 개발이란 분야를 꼭 배워야 겠다는 판단이 섰고, 최종적으로 고등학교때부터 조금이라도 직간접적으로 보고 듣고 배워본 '웹' 이란 분야를 선택했습니다. 

2. 첫 번째 목표: 사이트 하나를 만들어보자.

첫 번째 목표는 사이트를 하나 만들어보는 겁니다. 단, 워드프레스나 제로보드 등과 같은 엔진을 일절 사용하지 않아야합니다. Html, css, javascript 를 이용하여 프론트엔드를 찍어내고, 현재공부하고 있는 파이썬 웹 프레임 워크인 장고를 이용하여 서버단을 짤 생각입니다. (직접 '손코딩_프론트엔드 + 웹 프레임워크_서버' 를 통해 개발하는 것이 전제 조건)

* 장고를 공부하면서 꾀 편하다고 생각하는 점 (장고의 장점)

1. 첫번째로 초보자도 쉽게 배울 수 있는 python을 기반으로 한다는 점.

2. 인증, 가입, 관리 등과 같이 거의 대부분의 사이트들에서 사용하는 기능들이 기본모듈로 제공된다는 점! (정말 매력적임)

3. 장고의 ORM계층(Object-Relational Mapping): Model.py를 통해 파이썬에서 사용하는 자료형들을 그대로 사용가능하며, Table에 정확히 어떤 type의 field로 저장되는지 신경쓰지 않아도 됨. -> 입문자분들에게 참 편한 점이 아닐까..하는 생각이듭니다.

4. 모듈화구성과 모듈(app)의 독립성: Django는 사이트의 기반이 되는 프로젝트(Sitebase)와 특정 기능을 수행하는 모듈(App)들이 상호 독립적입니다. 각 모듈마다 models.py, views.py 파일을 통해 효율적인고 독립적인 관리가 가능할 뿐만 아니라, urls.py를 새로 만들어 개발자의 마음가는대로 상호보완이 가능함. 또한 별도의 템플릿 디렉토리를 통해 css나 html 등의 static 파일들도 관리가 용이함.

3. 현재까지의 공부들.. (실습)

■ 예스인테리어 메인화면 (html5, css3, 포토샵-로고&메인배너 디자인) _프론트엔드

-> 아버지의 사업자인 예스인테리어를 예제 모델로 하여 개발한 메인화면

 

가장 최근에 한 실습입니다. 일단 첫번째 목표인 '웹 사이트 개발'의 모델로 실내 인테리어 업무 홍보 및 견적접수 페이지(예스인테리어)를 만들어볼 생각이었습니다. 책이나 인터넷을 통한 공부가 좀 질리던 시점에, 그동안 배운 것을 실습 및 복습할 겸 예스인테리어의 메인화면만 간단하게 만들어 보았습니다. 

-> 예제 소스 혹시 다른분들께 도움이 될까 싶어 소스공유해봅니당.

* css

    
* { padding: 0; margin: 0; }
li, ul { list-style: none; }
a { text-decoration: none; }
body { font-family: "맑은 고딕";}

/* ***************************** header ***************************** */
.header_wrap {
  width: 100%;
  box-sizing: border-box;
  box-shadow: 2px 0 15px 2px #dedede;
}
header { width: 1080px; margin: 0 auto; padding: 10px 0; }
header:after { content: ""; display: block; clear: both; }

.logo { width: 30%; float: left; }

.log_nav { width: 70%; float: right; margin-top: 10px; }
.log_nav span {
  text-align: right;
  color: #555;
  float: right;
  margin-right: 10px;
}
.log_nav a { color: #555; letter-spacing: -1px; font-size: 14px; }
.log_nav a:hover { color: #888; }

.main_nav { width: 70%; float: right; margin-top: 10px; }
.main_nav ul { float: right; margin-right: 10px; }
.main_nav ul li { float: left; margin-left: 20px; }
.main_nav a {
  color: black;
  font-size: 18px;
  font-weight: bold;
  letter-spacing: -1px;
}
.main_nav a:hover { color: #f19100; }
/* *************************** end header *************************** */

.main_banner {
  background-image: url("../img/mainbanner.jpg");
  width: 1080px;
  height: 500px;
  margin-right: auto;
  margin-left: auto;
  margin-top: 20px;
  border: 7px solid #f19100;
  box-sizing: border-box;
}

/* ***************************** article ***************************** */
.main_article1 {
  width: 1080px;
  margin-right: auto;
  margin-left: auto;
  margin-top: 40px;
}
.main_article1:after { content: ""; display: block; clear: both; }
.main_article1 h2 {
  border-left: 8px solid #f19100;
  padding-left: 10px;
  letter-spacing: -1px;
  color: #2f2f2f;
  margin-bottom: 10px;
  margin-left: 10px;
}
.college_box {
  width: 340px;
  margin: 10px;
  float: left;
  border: 1px solid #dddddd;
  box-sizing: border-box;
}
.college_img { width: 100%; height: 200px; overflow: hidden;  }
.college_box img {
  width: 100%;
  height: auto;
  border: none;
  vertical-align: top;
}
.college_box a { color: black; }
.college_box h1 {
  font-size: 20px;
  padding: 10px;
}
.college_box p {
  margin-top: -10px;
  font-size: 15px;
  padding: 10px;
}
/* *************************** end article *************************** */

/* ***************************** footer ***************************** */
.footer_wrap {
  width: 100%;
  min-width: 1080px;
  height: 120px;
  background: #f19100;
  margin-top: 20px;
}
footer { width: 1080px; margin: 0 auto; }
.footer_box { width: 50%; float: left; padding: 5px; box-sizing: border-box; }
.footer_box p {
  padding-top: 5px;
  font-size: 14px;
  color: white;
  letter-spacing: -1px;
}
.footer_box:nth-child(2) p:first-child { padding-top: 15px; }
.footer_logo { margin: 5px; }

/* *************************** end footer *************************** */

만들어 보면서 확실히 느낀 것이, 3~4달 전에 비해서 floating box들의 구조적인 배치나 css 선택자 활용 등에 대한 이해도가 좀 업그레이드 된 것 같습니다.  

다음 포스팅땐 지금가지 해 온 백 엔드 스터디에 관한 포스팅 하겠습니다. 시간이 없어서 급하게 포스팅 하느라 오탈자나 두서가 없는 경우가 있을 수 있는데 죄송합니다.. ㅠ 다음번엔 더 깔끔하게 포스팅 하겠습니다!