0
웹에이전시 전문 프리랜서 개발자 프리터코더입니다.
이번 챕터에서는 웹사이트 개발 과정 중 브랜드 스토리 페이지 만들기를 작업합니다.
<브랜드 스토리 페이지 만들기> 글은 웹에이전시의 의뢰를 받아서 프리터코더가 웹사이트를 개발하는 과정을 가상으로 보여주는 웹에이전시의 개발자들은 어떻게 일하나 시리즈 중 하나입니다.
1
이번에 만들 브랜드 스토리 페이지는 이렇게 생겼습니다.
단순한 html 구성입니다. 데이터를 구성할 만한 것이 없어요. 그래서 퍼블리셔분이 만들어주신 html을 붙이기만 합니다.
2
브랜드 스토리 본문 영역 퍼블리싱을 복사해서 /brand/story/_body.php 파일을 만듭니다.
3
레이아웃 파일을 /brand/story/index.php 로 만듭니다.
<?php
require_once($_SERVER["DOCUMENT_ROOT"] . "/inc/head.php");
require_once($_SERVER["DOCUMENT_ROOT"] . "/inc/body.php");
require_once($_SERVER["DOCUMENT_ROOT"] . "/inc/header.php");
require_once($_SERVER["DOCUMENT_ROOT"] . dirname($_SERVER["PHP_SELF"]) . "/_body.php");
require_once($_SERVER["DOCUMENT_ROOT"] . "/inc/footer.php");4
확인해 봐야죠. http://localhost:6500/brand/story 에 접속해 봅니다.
5
뭔가 이상합니다. 원본은 이렇게 생겼거든요.
6
이럴 때는 역시 인스펙터를 확인해 봅니다. 리소스가 없다는 404 오류가 잔뜩 보여집니다
7
당연합니다. 우리는 html을 복사했을 뿐, 이미지 파일을 서버에 넣어두지는 않았으니까요. 해당 이미지 brand-story11.jpg를 다운로드해서 로컬 서버 경로에 넣습니다.
8
리소스를 퍼블리셔 분께 받을 때 zip 으로 받으셨다고 해도 이미지가 안 나오기는 마찬가지일 겁니다. 퍼블리싱한 html 파일에는 /image/brand-story11.jpg 로 기재되어 있는데, 실제 파일은 /static/image/brand-story11.jpg 이거든요.
/brand/story/_body.php 파일에서 brand-story11.jpg 파일을 찾아봅니다. 없네요?
9
실은 sub.css 파일 안에 백그라운드로 숨겨져 있었습니다.
10
퍼블리셔 분이 만든 css 파일은 안건드는 것이 원칙입니다만, 이번 예시에서는 어쩔 수 없으므로 직접 수정하겠습니다.
11
실제로 퍼블리셔 분과 함께 일하는 경우라면, 퍼블리셔 분께 이미지 경로 변경 요청을 드리는 것이 맞지요. css 파일은 퍼블리셔 분이 관리하시는 것이고, 개발자가 변경한 것 외에 다른 변경을 하고 계실 수도 있기 때문입니다.
개발자가 임의로 css 파일을 수정했는데 퍼블리셔 분이 기존 버전의 다른 부분을 수정하신 경우, git 같은 버전 관리 시스템을 쓰지 않는 이상 개발자가 한 작업은 말짱 도루묵이 될 수도 있으니까요.
12
조금 전에 인스펙터에서 404 오류가 보여진 나머지 부분들은 모두 폰트였습니다. 폰트도 다 다운로드해서 넣어두겠습니다.
13
퍼블리셔 팁
이미지를 사용하실 때는 도메인을 제외하고/부터 시작하는 절대 경로를 기재 부탁드립니다.
http://miss420.net/image/brand.jpg대신에/image/brand.jpg로 넣어 주세요.
만약 도메인을 포함한 경로로 리소스 경로를 html 파일에 넣어두시면, 개발자가 (잘 보이니까) 주소를 변경하지 않고 넘어가는 경우가 많습니다. 이렇게 하면 이미지 경로가 서버를 가리키는 것이 아니라 "퍼블리싱을 올려둔 서버" 를 가리키게 되죠.
하지만 퍼블리셔 분들이 사용하시는 "퍼블리싱 서버" 는 말 그대로 퍼블리싱용이라서 프로젝트 구축이 종료되거나, 기타 사유로 인해 이미지가 삭제되거나 안보이는 순간이 있을 수 있습니다.
그렇게 되면 "개발사의 퍼블리싱 서버에서 이미지를 지웠는데 고객에게 납품한 제품에서 이미지가 나오지 않는다" 라는 치명적인 문제가 생기게 됩니다.현재 파일 위치에서 상대경로를 지정하시는 경우 URL 에 따라 리소스가 보여지기도 하고 안보여지기도 합니다. 따라서
../../image/brand.jpg대신/static/image/common/brand.jpg가 더 좋습니다.
14
퍼블리셔 팁
이미지 파일 경로는 가능하시다면 페이지의 경로와 일치하면 좋습니다. 예를 들어서/brand/story주소에서 사용되는 이미지AA.jpg는/image/brand/story/AA.jpg가 되는 거에요.
만약 여러 페이지에서 공통으로 사용되는 이미지라면/image/common폴더 안에 넣어주시면 됩니다.
서브 폴더 안에서만 사용되는 공통 이미지라면 서브 폴더 최상위에 넣어주세요. 예컨데 브랜드 소개 대메뉴 아래 [브랜드 스토리, 오시는 길] 2개의 서브메뉴가 있다고 할께요. 이 때 하나의 이미지가 [브랜드 스토리, 오시는 길] 두군데서 쓰인다면/image/brand폴더 안에 넣어주세요.
15
퍼블리셔 팁
개발자가 좋아하는 베스트 웨이 리소스 경로에 대한 최종 정리입니다.css :
/static/css/폴더 아래에 넣습니다. ex./static/css/font.css
직접 만드신 js :/static/js폴더 아래에 넣습니다. ex./static/js/ui.js
외부 자바스크립트 라이브러리 :static/js폴더 아래 서브 폴더를 만들고 넣습니다. ex./static/js/jQuery/jquery-3.2.1.min.js
공통 이미지 :/static/image/common폴더 아래에 넣습니다. ex./static/image/common/logo.png
서브 공통 이미지 :/static/image/{서브}폴더 아래에 넣습니다. ex./static/image/brand/about_brand.png
페이지 이미지 :/static/image/{서브}/{페이지명}폴더 아래에 넣습니다. ex./static/image/brand/story/history.png
폰트 :/static/font/폴더 아래 넣습니다. ex./static/font/NotoSansKR-Regular.woff이렇게 정리해 주시고
zip으로 묶어서 전달해 주시면, 개발자는 퍼블리셔 분께 받은zip파일만 압축을 풀어서 서버 디렉토리의/static폴더 안에 복사만 하면 됩니다.
퍼블리싱해 주신 html 내용 안의 경로도/static아래 동일한 규칙으로 맞추어져 있기 때문에, 단순히 html 만 복사하는 것만으로 모든 리소스가 다 로드됩니다.
16
끝난 줄 알았는데, 아직 안 끝났습니다.
인스펙터에서 miss 필터를 걸어봅니다.
17
도메인으로 지정된 이미지가 있네요. html 파일을 바꿔주고 이미지도 다운로드합니다.
<h2 class="subHead__title__h"><img src="/static/image/common/sub-tit1.png" alt="Brand"></h2><div class="story__img"><img src="/static/image/brand/story/brand-story22.jpg" alt=""></div>18
모두 200 정상 응답이 나왔습니다.
19
페이지도 잘 보입니다.
20
모든 파일을 다 정리하고 나니 폴더 구조가 이렇게 보입니다.
21
역시 끝날때까지 끝난 게 아닙니다. 리소스 관련 이슈는 모두 처리했지만, 링크 문제가 남아있습니다. 퍼블리싱에 도메인이 남아있네요.
22
사실 이런 문제는 흔한 것은 아닙니다. 이번 건은 제가 이미 완성된 미스사이공 사이트를 소스보기 한 다음 html 을 복사해와서 생긴 이슈인 것이고, 대부분의 경우 퍼블리셔 분들은 <a 태그에 절대 url 을 직접 넣지 않으십니다. 대신 <a href="#" 형태로 써 두시면 나중에 URL 이 결정되고 나서 개발자가 채워넣는 경우가 대부분이죠.
href 값이 # 라고 해도, 변경을 해야 하는 것은 마찬가지이므로 루트 상대 경로로 변경하겠습니다.
기획자 팁
미리 각 페이지별 URL을 지정해 주시고, 퍼블리셔분에게 해당 경로를 퍼블리싱하실 때 넣어달라고 이야기해 주세요.
퍼블리셔 팁
링크도 이미지와 마찬가지로/로 시작하는 루트 상대 경로로 지정해 주세요.
html파일 경로도 기획자 분이 지정해 주신 대로 폴더 구조를 잡아서 작업하시면 편하실 꺼에요.
