0
웹에이전시 전문 프리랜서 개발자 프리터코더입니다.
이번 챕터에서는 웹사이트 개발 과정 중 본문 영역 잡기를 작업합니다.
<본문 영역 잡기> 글은 웹에이전시의 의뢰를 받아서 프리터코더가 웹사이트를 개발하는 과정을 가상으로 보여주는 웹에이전시의 개발자들은 어떻게 일하나 시리즈 중 하나입니다.
1
헤더와 푸터까지 분리하고 나면 퍼블리셔 분들은 테스트 코드 구조가 좀 이상하다는 것을 느끼실 수 있을 겁니다. 일반적으로 퍼블리셔 분들은 태그 열고 닫는 것에 약간 강박같은 것이 있는데, 푸터 코드에서 닫아주니까 여는 코드만 있고 닫는 코드가 없거든요.
2
그래서 여는 코드도 분리해 보기로 합니다. inc/body.php 파일을 만듭니다.
body.php 파일이나 footer.php 파일은 여는 태그와 닫는 태그만 있으므로 이상해 보일 수도 있지만, 사실상 이 두개의 파일 내용은 고정이기 때문에 다시는 볼 일이 없습니다. 정작 본문 파일은 태그의 열고 닫는 부분이 맞을 테니까요.
3
이제 테스트 코드는 이렇게 변합니다.
<?php
require_once("/inc/head.php");
require_once("/inc/body.php");
require_once("/inc/header.php");
require_once("/inc/footer.php");4
서버 코드는 변경되었지만, 결과물은 전혀 변하지 않았습니다.
5
기획자 팁
개발자들은 이런 식으로 내부 구조를 계속 바꿔가면서 코드를 개선합니다. 물론 결과물에는 아무런 영향을 미치지 않지만요.
그러니까 결과물상으로는 변한 게 없다고, 아무것도 안하고 놀았네.. 라고 생각하지 않아 주셨으면 좋겠어요.
6
이렇게 구조를 잡아두면 모든 페이지에서 "본문" 영역만 반복해서 개발하면 됩니다. 개발도 쉬워지고 본 수가 많아질 수록 손이 적게 가므로 속도도 빨라집니다.
이런 구조를 흔히 "레이아웃" 이라고 부릅니다.
7
퍼블리셔 팁
wrap구조는 동일하게 맞춰주세요.
만약 각 페이지마다body이후 페이지를 감싸는 코드가 다르다면 이렇게 따로 분리할 수가 없어요. 예를 들어 어느 페이지는id="wrap"이고 다른 페이지는id="content"이런 식으로 구성하면 매 페이지마다body를 따로 작성해야 합니다.
