이번 글에서는 MVC패턴에서 뷰를 사용하는데 있어 고질적인 문제와 퍼블리싱을 끝낸 HTML파일을 어떻게하면 php파일로 변환하고 header와 footer, script의 그리드로 분할해 뷰로 사용할수 있는지에 대해 기술합니다.

목차

  • MVC패턴에서의 View의 문제점
  • 뷰의 box layout를 컴포넌트로 나누는 법
  • 프론트엔드를 더 쉽게 수정하는 방법

MVC패턴에서의 View의 문제점

기본적으로 MVC패턴이란 웹서비스를 Controller(컨트롤러), Model(데이터베이스), View(프론트앤드)로 나누어 관리하는 php 프레임워크 방법론을 뜻한다. 이러한 방식에는 프론트앤드, 백앤드, 데이터베이스로 나누어져 관리가 편리하고 컨트롤러라는 하나의 관제에서 데이터베이스와 백앤드 프로세스를 처리하여 뷰로 보내는 방식이므로 하나의 관제가 있다는 점에서 중앙통제화 되어있어 개발의 효율성이 올라간다는 장점이 분명 존재한다. 그러나 이러한 컴포넌트 방식으로 뷰 파일, 프론트앤드인 HTML파일을 이용하는데에는 여러가지 문제가 있다.

일단 HTML파일이 어떤 과정을 거쳐서 MVC패턴 프레임워크에 사용하는 View로 탄생하는지부터 알아보자.
enter image description here
일단 프론트앤드는 페이지별로 디자인 시안을 작성하는것으로 부터 시작된다. Adobe Photoshop이나 Adobe XD등의 Mookup 툴을 사용해 디자인 시안을 만들고 수행착오를 거쳐 수정에 수정을 거듭하고 나면 디자인 시안이 완성된다. 여기까지가 '웹 디자이너’의 영역이다. 이 이후로는 ‘웹 퍼블리셔’(프론트앤드 개발자) 의 영역으로 디자인 시안과 같이 HTML과 CSS와 같은 프론트엔드 언어와 Bootstrap, Jquery, Vue.js 등의 라이브러리와 자바스크립트 프레임워크를 이용해 실제 웹페이지인 HTML파일을 구현하며 웹브라우저별 지원기능과(Chrome, IE, Safari) 디바이스별 규격에 맞춰 반응형으로 웹페이지를 만들 것인지, 적응형 또는 정적인 형태(Static)로 만들것인지 결정한다.
HTML을 코딩하고 있는 모습이다
이러한 과정을 거쳐 Index.html파일과 asset/img, asset/js 와 같은 파일형태가 완성되었을때 퍼블리싱이 끝났다, 라고 표현한다.(물론 이후로도 클라이언트가 요구하는 끝없는 수정사항이 남아있겠지만…)
enter image description here
여기서부터 MVC패턴에서 뷰를 사용하는데 있어서 문제점이 발생하는데 MVC패턴에서 HTML파일을 뷰로 변환시켜 사용하기 위해서는 두가지 과정을 거쳐야 한다.(이 글은 php프레임워크인 Codeigniter를 기준으로 하고 있습니다) 첫번째로 모든 HTML파일의 확장자를 .php로 변환하는것과 (ci에서는 모든 뷰 파일의 첫글자는 대문자로 시작해야 한다, Codeigniter: ci) 두번째로 그렇게 변환한 php파일을 header, container, footer로 구분시키는것이다.

그렇게 나눠진 php파일들은 기존의 임시 텍스트는 삭제되고 모델->컨트롤러->뷰 의 과정을 통해 JqueryajaxVue.jsaxios등의 http통신을 통해 컨트롤러 단과 교신해 결과를 클라이언트 사이드(사용자가 보는 웹브라우저)에 출력한다. 모든 문제는 여기서 발생하는데 이렇게 가공된 뷰 파일은 오직 뷰만으로 사용하기에는 편리하고 쉽지만 HTML을 수정하거나 CSS를 변경하는등의 작업이 필요하게 될 경우 까다로운 상황이 발생하게 된다. 일단 첫번째로, 뷰 파일의 확장자가 .php 이므로 Bracket이나 Adobe Dreamweaver같은 핫로드(라이브) 편집을 위한 퍼블리싱 툴에서 사용할 수가 없다. 두번째로, 하나의 페이지가 하나의 파일이 아닌 header, container, footer등 여러개의 컴포넌트 파일로 구성되어있기에 편집기를 사용할 경우 정상적인 상태가 아닌 깨진 html을 사용할 수 밖에 없다.(Container.php를 불러온 모습)
enter image description here
따라서 만약 프론트앤드에 수정사항이 생겨 디자인을 바꾸어야하거나(배경색을 바꾸거나 폰트를 바꾸는 등 간단하지 않은 그리드를 변경하는 등의 구조적인 변경이 필요할 때) 새로운 컴포넌트를 만들어야 할때 뷰파일 자체에서 HTML마크업을 하지 못하고 HTML파일 수정 -> php파일로 변환 -> 컴포넌트 분할 -> 뷰파일 완성 이라는 과정을 거쳐야 하며 이 작업을 구조적인 HTML변경이나 디자인 변경이 필요할때마다 매번 해줘야 한다는 불편함이 있는것이다. 물론 Plain HTML에서 컴포넌트를 만든 후 HTML, CSS를 뷰 파일에 복사해 넣는 방법도 존재하지만 뷰 파일에 넣으려는 컴포넌트가 Plain HTML에서는 정상적으로 작동하다 뷰 파일에서 가서는 어떠한 CSS효과를 받아 생각과 다르게 작동할지도 모르고 이는 한두개의 컴포넌트에만 한정되는 이야기이지 전체적인 HTML 그리드 변경등의 수정이 필요할때는 뷰파일에서 바로 개발하지 못하고 초기HTML부터 다시 코딩해야 하는 것이다.

뷰의 box layout를 컴포넌트로 나누는 법

enter image description here
MVC패턴에서의 뷰는 기본적으로 header, container, footer의 세가지 구조를 가지며 그 형태는 위 그림과 같다. Header.php에서 heaer태그 전부와 body를 연 후 header컴포넌트를 작성한다. Container.php에서는 container컴포넌트를 작성하고 있으며 Footer.php에서는 footer컴포넌트를 작성한 후 body태그를 닫고 있다. 위와같이 여는 body태그는 header에, 닫는 body태그는 footer에 넣는것이 효율적이다

enter image description here
여기서 만약 Container안에서 Subscribe라는 컴포넌트를 넣으려고 하면 위와 같은 형태가 되는데 이를 코드로 구현한다면 아래와 같이 된다.

function  category_list($category, $request)
{

$this->load->model('Post_model');
$post_all  =  $this->Post_model->post_require_category_paging($db_req);
$post  =  $this->Post_model->post_require_category($db_req);

$this->load->view('Header',  $data);
$this->load->view('Container_top',  array('post_all'=>$post_all,  'post'=>$post));
$this->load->view('Subscribe');
$this->load->view('Container_bottom');
$this->load->view('Footer');

}

Container안에 Subscribe컴포넌트를 넣기 위해서는 Conatiner 뷰파일을 Top과 Bottom으로 나눠야하는 것이다. 그리서 필자는 후에는 하나의 컴포넌트를 반으로 나누는것이 아닌 뷰 파일 내부에서 if문을 주어 컴포넌트를 컨트롤러 단에서 '불러오지’않고 뷰 파일 내부에 컴포넌트 자체를 생성시키는 방식을 사용하게 되는데, 이는 MVC패턴의 장점을 잘 활용하는 것이 아니다.

function  category_list($category, $request)
{

$this->load->model('Post_model');
$post_all  =  $this->Post_model->post_require_category_paging($db_req);
$post  =  $this->Post_model->post_require_category($db_req);

$this->load->view('Header',  $data);
$this->load->view('Container_items',  
	array(
	'post_all'=>$post_all,
	'post'=>$post,
	'item'=>"Subscribe"
	)
);
$this->load->view('Footer');

}

MVC패턴의 장점은 웹서비스를 프론트엔드, 백엔드, 데이터베이스 로 나누어 컨트롤러에서 모든 프로세스를 관리하는것인데 백엔드(컨트롤러)에 들어가야할 프로세스가 프론트엔드(뷰)에도 들어가게 되면 중앙통제형인 MVC패턴의 ci를 사용하는데 있어 효율성이 떨어지게 된다.(프로세스를 컨트롤러 단에서만 조작하는것이 아닌 뷰 단에도 코딩해야되는 상황이 발생하기 때문) 또한, 어떤 방법을 쓰던간에 결과적으로는 기존의 HTML파일을 조각내어 만든 뷰 파일이기 때문에 HTML의 수정이 어렵다는 문제는 그대로 남아있다.

프론트엔드를 더 쉽게 수정하는 방법

그래서 어떻게 하면 뷰 단을 조금이라도 더 편리하게 사용할 수 있을까 방법을 생각해보던 도중 외주를 할때 만들었던 For Designer, For Developer라는 방법이 생각났다. 이 방법은 클라이언트의 요구에 따라 만들어낸 방법인데 임시 텍스트가 들어있는 버전의 파일 하나, Vue.js를 적용한 백앤드 개발자를 위한 버전의 파일 하나로 두 버전의 파일을 제작하는 방법인데 이에서 착상한 방법으로 개발용 파일에 주석으로 절취선을 만드는 것 이었다.

바로 구분화된 php 뷰파일에서 HTML마크업 작업을 하지 않는 가장 큰 이유는 CSS의 코딩이 어렵기 때문이다. 컴포넌트 형식으로 나누었다면 편집하고 있는 뷰 파일에 어떤 CSS효과가 적용되어있는지도 모를뿐더러 전체적인 그림을 그리기 어렵기 때문에 HTML부터 다시 마크업을 하는 것인데 어쨌든 HTML을 뷰로 만들어 사용하기 위해서는 .php로 확장자 변경 -> 컴포넌트와 그리드 기준으로 분할 이라는 작업을 거쳐야 할텐데, 어짜피 거쳐야 할 과정이라면 조금이라도 빠르게 해보자 라는 생각에서 나온 방법으로 기존의 HTML을 만들때 사용할 컴포넌트 마다 주석으로 절취선을 그어서 컴포넌트 뷰파일로 분할해야 할때 더욱 보기 쉽고 빠르게 분할할 수 있도록 만드는 방법이다.

<!DOCTYPE  html>
<html  lang="en"  dir="ltr">
<head>
<link  rel="stylesheet"  href="/public/asset/css/header.css?ver=4">
<link  rel="stylesheet"  href="/public/asset/css/util.css?ver=2">
<link  href="https://fonts.googleapis.com/css?family=Open+Sans:300"  rel="stylesheet">
<link  href="https://fonts.googleapis.com/icon?family=Material+Icons"rel="stylesheet">
<link  rel="stylesheet"  href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css"  integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS"  crossorigin="anonymous">
<link  rel="stylesheet"  href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script  src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js"  integrity="sha384-B0UglyR+jN6CkvvICOB2joaf5I4l3gm9GU6Hc1og6Ls7i6U/mkkaduKaBhlAXv9k"  crossorigin="anonymous"></script>
<script  src="https://code.jquery.com/jquery-3.3.1.slim.min.js"  integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo"  crossorigin="anonymous"></script>
<script  src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js"  integrity="sha384-wHAiFfRlMFy6i5SRaxvfOCifBUQy1xHdJ/yoi7FRNXMRBu5WHdZYu1hA6ZOblgut"  crossorigin="anonymous"></script>
<meta  charset="utf-8">
<title>CodingPack</title>
</head>
<body>

<!-- Header -->
<div  class="header">
<div  class="header-item-grid">
<span  class="logo-header"  onclick="location.href='/' ">
<img  src="/public/asset/img/logo_codingpack_white.png"  class="logo-img">
<span  class="codingpack-title">CodingPack</span>
</span>
<div  class="menu-bar">
<span  class="utill-menu menu"  onclick="location.href='/util' ">Util</span>
<span  class="study-menu menu"  onclick="location.href='/study' ">Study</span>
<span  class="community-menu menu"  onclick="location.href='/community' ">Community</span>
<span  class="login-menu menu"><strong>Login</strong></span>
<span  class="register-menu menu"><strong>Register</strong></span>
</div>
</div>
</div>
<!-- Header -->

<!-- Container -->
<div  class="containter">
<span  class="page-rute">Home/Util</span>
<div  class="row">
<div  class="menus col-sm-3">
<div  class="list-group container-menu">
<!-- Component: button -->
<button  type="button"  class="list-group-item list-group-item-action active">
CodingPack
</button>
<!-- Component: button -->
</div>
</div>
<div  class="container-content col-sm-9">
<!-- Component: package -->
<div  class="package-box">
<div  class="package-content">
<p  class="package-box-title">Designer</p>
<p  class="package-box-text">웹디자이너 위한 유틸 팩입니다.</p>
</div>
<div  class="box-download">
<span  class="dw-icon">Dw</span>
</div>
</div>
<!-- Component: package -->
</div>
</div>
</div>
<!-- Container -->

<!-- Footer -->
<div  class="footer">
<div  class="footer-item-grid">
<h3  class="footer-title">CodingPack</h3>
<div  class="footer-main">
<p>Copyright © 2012-2018 CodingPack. All rights reserved.</p>
</div>
</div>
</div>
<!-- Footer -->
</body>
</html>

이렇게 사용할 컴포넌트를 주석으로 나눈 상태에서 마크업 작업을 하게 되면 코드의 가독성도 올라가고 뷰파일로 변환하는 과정에 있어서 더 쉽게 컴포넌트들의 코드 범위를 알 수 있게되어 작업의 효율성이 상승한다.

결과적으로 이 방법은 HTML을 더 쉽게 뷰파일로 만드는 과정일 뿐이지 근본적인 문제를 해결하는 방법은 아니다. 비록 다른 Codeigniter외의 다른 MVC패턴의 php프레임워크를 사용해본적이 없어서 모르겠지만 뷰파일을 HTML을 나눠서 사용하는 이상은 디자인의 수정이 어렵다는 문제는 지속될거같다. 여러개의 뷰 파일을 마크업을 하는 동안만 하나의 파일형태로 합쳐주는 플러그인이 에디터에 출시된다면 이러한 문제는 해결될 수 있지 않을까 하는 생각을 해본다.