0
웹에이전시 전문 프리랜서 개발자 프리터코더입니다.
이번 챕터에서는 웹사이트 개발 과정 중 사용자사이트 메뉴 페이지 - 목록 만들기를 작업합니다.
<사용자사이트 메뉴 페이지 - 목록 만들기> 글은 웹에이전시의 의뢰를 받아서 프리터코더가 웹사이트를 개발하는 과정을 가상으로 보여주는 웹에이전시의 개발자들은 어떻게 일하나 시리즈 중 하나입니다.
1
사용자사이트 메뉴에서 목록을 가져와서 보여줍니다. 퍼블리싱된 목록은 ul 태그 안에 li 태그가 반복되는 형태입니다.
<ul class="menuLists static">
<li class="menuLists__item">
<div class="mainProdItem">
<div class="mainProdItem__img"><img src="/uploads/product/20221216961157.png" alt=""></div>
<div class="mainProdItem__desc">
<h4 class="mainProdItem__desc__tit">마라 쌀국수</h4>
<p class="mainProdItem__desc__con">진한 사골육수에 미스사이공 만의 비법소스 를 사용한 중독성 강한 마라쌀국수<br /></p>
<span class=""></span>
</div>
</div>
</li>2
목록을 데이터베이스에서 불러옵니다.
$menu_item_list = query("select * from menu_item where visible_yn='Y' and category_id = 'C001' order by sort_order asc");기획자 팁
목록을 가져오는 규칙도 미리 정해둬야 합니다.
예를 들어 1.) 사용여부가 "Y" 일 것, 2.) 카테고리가 "쌀국수" 일 것, 3.) 정렬 순서가 작은 것부터 먼저 나올 것. 같은 규칙입니다.대부분의 기획자 분들은 잘 해 주시지만 아직 경험이 부족한 기획자 분들께서 가끔 백오피스에 기획해 두었으니 알아서 만들어야 하는 게 아니냐고 말씀하시는 경우가 있어 혹시나 싶어 말씀드립니다.
기획서는 디자이너, 퍼블리셔, 개발자가 추론하게 작성되어서는 안됩니다. "해당 페이지만 보면 작업을 시작할 수 있는" 수준이어야 합니다.
3
퍼블리싱된 목록을 데이터베이스에서 가져온 데이터로 교체합니다.
퍼블리셔 팁
목록을 구성하실 때 자동으로 넓이에 따라 목록이 구성되도록 퍼블리싱해 주세요.
흔한 경우는 아닙니다만, 가끔 줄바꿈을 강제로 태그를 넣어야 하거나,ul태그를 닫고 다시ul태그를 여는 방식으로 퍼블리싱된 결과물을 볼 때가 있는데요.
이렇게 구성해도 개발은 할 수 있지만, 사실 조금 번거롭습니다.
게다가 이런 식으로 구성하면 디바이스의 가로 해상도에 따라 자동으로 한 줄에 나오는 갯수가 정해지는 것이 아니라 강제로 줄바꿈이 일어나므로 사용자에 따라서는 페이지가 정상적으로 보이지 않는 경우가 많아집니다.
4
베스트 메뉴일 때와 베스트 메뉴가 아닐 때 메뉴 항목 구성이 다르므로, 이에 대한 처리를 해 주겠습니다.
<?php if ($menu_item["best_menu_yn"] === "Y") : ?>
<span class="ribbon--best">Best Menu</span>
<?php else : ?>
<span class=""></span>
<?php endif ?>퍼블리셔 팁
반복되는 태그 중에 주의해야 하는 점이 있다면 미리 알려주세요.
예를 들어 베스트 메뉴라는 특정 조건에서만 특정 태그나 클래스가 들어가야 한다던가 하는 식입니다.개발자들은 반복되는 요소를 정리하면서 모든 html 태그를 꼼꼼하게 보는 경우는 생각보다 잘 없습니다. 그냥 비슷하겠거니 하고 통채로 지워버리고 개발 코드를 덧씌우거든요.
그래서 퍼블리싱이 미묘하게 변화하는 것을 개발에서 놓칠 가능성이 있으므로, 퍼블리셔 분께서 미리 "여기는 주의해야 한다" 라고 코멘트 해 주시면 베스트 퍼블리셔로 거듭나실 수 있습니다.
5
메뉴 목록이 잘 나오는지 체크합니다.
잘 나옵니다. 개발자는 왜 한번에 잘 나오는지 의문을 가집니다.
