[웹에이전시 개발] 메뉴 소개 화면 뜯어보기

프리터코더·2023년 7월 18일

0

웹에이전시 전문 프리랜서 개발자 프리터코더입니다.

이번 챕터에서는 웹사이트 개발 과정 중 메뉴 소개 화면 뜯어보기를 작업합니다.

<메뉴 소개 화면 뜯어보기> 글은 웹에이전시의 의뢰를 받아서 프리터코더가 웹사이트를 개발하는 과정을 가상으로 보여주는 웹에이전시의 개발자들은 어떻게 일하나 시리즈 중 하나입니다.


1

메뉴 소개 화면은 다음처럼 생겼습니다.
047

2

구조를 조금 분해해 볼께요.
페이지 소개 : 미스 사이공의 메뉴를 소개한다고 적혀 있습니다.
048

기획자 팁
페이지 소개 화면이 모든 카테고리에 공통인지, 아니면 각 카테고리마다 다른 화면이 나와야 하는지 설명이 필요합니다.

만약 모든 카테고리에 공통이라면 html 에 하드코딩을 해도 괜찮을 것 같습니다.

3

카테고리 : 쌀국수, 식사, 사이드로 카테고리가 나누어집니다.
049

기획자 팁
정확한 명칭이 필요합니다. 저는 임의로 카테고리라고 이름 붙였는데, 사실 기획서에는 정확한 명칭이 기재되어 있을 꺼에요.
한 번 명칭이 정해졌으면 모든 기획서에 같은 단어를 사용해 주세요.
명칭은 가능하면 "영어"로 해 주세요. 개발자가 다루는 코드는 영어로 작성되기 때문에, 한글로 작성할 경우 한글=>영어로 바꾸는 과정에서 같은 한글을 다른 영어 단어로 쓰는 일이 가끔 생기거든요.
만약 영어 명칭을 쓰기 어렵다면, 한글로 작성해 주시고 매핑 표를 만들어 주시면 좋습니다. 예를 들어 "분류 : (영어 - category)" 정도로만 기재해 주시면 개념의 혼선이 적어집니다.

기획자 팁
하나의 메뉴가 하나의 카테고리에만 속하는지, 아니면 여러 카테고리에 속할 수 있는지 명시적으로 알려주세요. 예를 들어 "카테고리" 는 하나의 메뉴에 하나의 카테고리가 있지만, "태그" 기능이 있다면 하나의 메뉴에 다수의 태그가 있을 수 있는 식입니다.
이는 데이터베이스 설계에 영향을 미치기 때문에, 반드시 개발 전 확정이 필요합니다.
메뉴가 하나의 카테고리에 속한다면 상대적으로 개발이 쉽습니다. 백오피스 화면도 단순해지지요.
메뉴가 다중 카테고리에 속할 수 있다면 상대적으로 개발이 복잡합니다. 백오피스 화면에서도 고려해야 할 요소가 많아집니다.

개인적으로는 굳이 음식 메뉴에 다중 카테고리가 있을 필요가 있는지 의문입니다. 하나로 충분하지 않나요?

4

베스트 메뉴 : 카테고리별 베스트 메뉴를 소개합니다.
050

기획자 팁
페이지 소개와 동일합니다. 베스트 메뉴가 모든 카테고리에 공통인지, 아니면 각 카테고리마다 다른 화면이 나와야 하는지 기재해 주세요.

기획자 팁
베스트 메뉴는 카테고리당 무조건 1개인지 기재해 주셔야 합니다. 1개라면 위의 형태대로 보이면 되지만, 없을 수도 있다면 없을 때는 베스트 메뉴 부분이 안보인다거나 하는 처리를 해야 하거든요.
2개 이상이 될 수도 있다면 슬라이더를 사용하는지, 슬라이더를 사용할 때는 어떤 형태로 총 몇개까지 슬라이딩이 가능한지도 지정이 필요합니다.

기획자 팁
백오피스 기획이 필요합니다.
메뉴 같은 경우 높은 확률로 백오피스가 있을 겁니다. 백오피스에서 메뉴 도 등록하고, 베스트 메뉴인지도 지정하겠죠.
이 때 백오피스 기획서도 필요하고, 백오피스 기획서 몇 페이지에 기재되어 있는지도 꼭 필요합니다.
백오피스 기획서에 베스트 메뉴 지정 방법을 알려주세요.

5

중단 마퀴 : 그냥 흘러갑니다.

051

굉장히 오랫만에 보는 마퀴 태그네요. 2000년대 초반에 유행하던 방식입니다. 옆으로 흘러갑니다.

기획자 팁
꼭 필요한지 고민해 보세요.
마퀴 태그에 들어갈 내용 확정이 필요합니다.

6

메뉴 목록 : 해당 카테고리에 해당하는 메뉴가 나옵니다.
052

기획자 팁
백오피스 기획이 필요합니다.
메뉴 등록, 수정, 삭제, 카테고리 지정 방법, 메뉴 정렬 순서 등의 값 설정 기능 등이 필요합니다.

7

하단 마퀴 : 푸터 위에서 그냥 흘러갑니다.
051

꼭 필요한지 진지하게 고민해 보세요. 두번 세번 더 생각하세요.


개발 요청은 프리터 코더 소개를 읽어보시고, 이메일 로 부탁드립니다.

profile
일용직 개발자. freetercoder@gmail.com

0개의 댓글