웹에이전시의 개발자들은 어떻게 일하나

이 글은 웹 에이전시에서 일하는 기획자, 디자이너, 퍼블리셔, 주니어 개발자들에게 "웹개발자가 웹에이전시 업무를 하는 방식"을 보여주기 위한 시리즈입니다.기획자, 개발자, 디자이너는 같이 일합니다. 그러나 사람들은 시각적으로 명확한 다른 사람의 작업에 비해 개발자의 작

개발 회사라고 해도 기업의 성격은 다양합니다. 웹에이전시도 있고, 서비스 기업도 있고, SI 도 있고, 솔루션 회사도 있습니다.수많은 개발사 중에서 웹에이전시를 이야기하는 이유는 웹 에이전시의 업무가 다른 개발사에 비해 상대적으로 단순하고 명확하기 때문입니다.웹에이전시

예시 사이트를 찾기 위해 gdweb 을 뒤져봤습니다. 예쁜 사이트들이 꽤나 많더군요.그런데 디자인이 특이한 사이트는 예시로 적절하지 않을 것 같아서 부지런히 클릭하던 끝에 미스사이공 이라는 비교적 평범한 구성을 가진 사이트를 하나 찾았습니다. 그래서 이 사이트를 개발하

작업에 들어가기 전에 먼저 해야 하는 일은 "기획서를 확인하는" 일입니다. 최소한 내가 뭘 해야 하는 지는 알아야 하기 때문입니다.기획서는 파워포인트로 전달되는 경우도 있고, 피그마나 XD 등으로 전달되는 경우도 있습니다. 어느 방법이든 간에 내용만 전달되면 되니까 양

웹 사이트를 만들 때 개별 페이지보다 선행되어야 하는 일들이 있습니다. 대표적인 것이 퍼블리싱 분해하기입니다.html 은 head와 body로 구성됩니다. head 는 html 문서의 메타 정보 (인코딩, 제목, 사용할 css 와 js) 를 담는 공간이고, body 는

단순히 퍼블리싱된 html 파일을 복사하는 정도라면 특별한 일은 아닙니다. 그런데 사실 헤드에는 정적 리소스들이 포함되어 있습니다. css, js, 이미지 파일들이 그 주인공입니다.개발자는 이런 정적 리소스를 하나씩 보고, 웹서버의 위치로 일일이 리소스 파일을 복사하고

헤드 분리를 테스트할 차례입니다. test.php 파일을 만들어서 head 파일을 불러 옵니다.로컬 서버를 시작합니다. 로컬이라는 건 개발자 컴퓨터를 말해요. 그러니까 개발자 컴퓨터에 서버를 띄우는 겁니다.브라우저에서 로컬 주소를 엽니다. F12 를 눌러서 개발자 도구

일반적인 웹사이트는 "헤더", "본문", "푸터" 로 이루어지는 경우가 많습니다. 헤더는 로고와 메뉴 등이 들어갑니다.001본문은 컨텐츠가 들어가는 영역입니다.008푸터는 회사 정보 등 공통의 정보를 나타내는 데 사용됩니다.009헤더, 푸터 부분은 거의 대부분의 페이지

헤더를 분리하고 구현하기 전에 체크해야 할 사항이 있습니다. 바로 백오피스에 메뉴 관리 기능이 존재하는지 여부입니다.완전히 html 로만 이루어져 있는 사이트가 아니라면, 대부분의 웹사이트는 "데이터"를 관리합니다. 데이터라고 해서 대단한 것은 아니고, 일반적으로 볼

모든 웹 페이지는 각자의 주소(URL) 이 있습니다. 미스사이공 사이트를 예로 들어보면 메인 페이지는 http://www.miss420.net, 브랜드 스토리는 http://www.miss420.net/sub/story.html 이런 식입니다.기획자

우리가 클론코딩할 미스사이공 헤더는 이렇게 생겼습니다.001일반적으로 "헤더"에는 로고와 GNB가 들어갑니다. 헤더도 공통적으로 사용되는 영역이니까 /inc/header.php 파일에 퍼블리싱해 주신 html 코드를 넣습니다.007미스사이공 사이트 헤더 html은 이렇

푸터는 대부분의 경우 고정입니다. 아주 가끔 사업자 변경 등으로 인해서 주소가 바뀌거나 연락처가 바뀌는 케이스가 있기는 한데 드뭅니다. 그래서 대부분의 경우는 고정으로 개발합니다. /inc/footer.php 파일을 만듭니다. 015 footer.php 파일이 ``

헤더와 푸터까지 분리하고 나면 퍼블리셔 분들은 테스트 코드 구조가 좀 이상하다는 것을 느끼실 수 있을 겁니다. 일반적으로 퍼블리셔 분들은 태그 열고 닫는 것에 약간 강박같은 것이 있는데, 푸터 코드에서 닫아주니까 여는 코드만 있고 닫는 코드가 없거든요. 그래서 여는

이번에 만들 브랜드 스토리 페이지는 이렇게 생겼습니다. 020 단순한 html 구성입니다. 데이터를 구성할 만한 것이 없어요. 그래서 퍼블리셔분이 만들어주신 html을 붙이기만 합니다. 브랜드 스토리 본문 영역 퍼블리싱을 복사해서 /brand/story/_body.

퍼블리싱된 화면을 먼저 보겠습니다. 031 일단 퍼블리싱을 붙이고, 레이아웃 파일을 만들겠습니다. 퍼블리싱 페이지를 /brand/location/_body.php 파일에 복사합니다. 032 레이아웃 파일도 만들어야죠. /brand/location/index.php

퍼블리셔 분이 전달해 주신 html 파일에서 지도는 그냥 이미지로 들어가 있습니다. 034 하지만 실제로는 지도는 움직이기도 하고, 축소/확대도 가능해야 합니다. 그러기 위해서는 지도 API를 연동해야 하죠. 보통 우리나라에서는 지도 API 를 연동할 때 카카오 지도

퍼블리싱 내용 중 이미지 부분을 주석 처리합니다. 042 카카오 지도 API 라이브러리를 호출합니다. 지도에 위치를 나타내기 위해서는 위도와 경도 좌표가 필요합니다. 원칙상으로는 카카오 rest api 를 호출해서 구할 수 있기는 한데, 번거로우니까 웹에 있는 툴을

오시는 길 페이지의 마지막 작업입니다. 브랜드 스토리와 동일하게 링크를 절대 경로로 바꿔줍니다. > 기획자 팁 > 해당 정보가 정확한지 확인해 주세요. 주소, 대표번호, 팩스 등은 퍼블리셔 분이 기획자 분께 확인하셔서 제대로 된 정보를 넣어주셨을 것이라고 생각합니다.

메뉴 소개 화면은 다음처럼 생겼습니다.047구조를 조금 분해해 볼께요.페이지 소개 : 미스 사이공의 메뉴를 소개한다고 적혀 있습니다.048기획자 팁페이지 소개 화면이 모든 카테고리에 공통인지, 아니면 각 카테고리마다 다른 화면이 나와야 하는지 설명이 필요합니다.만약

데이터베이스 스키마를 만들어 보겠습니다. 스키마라는 건 데이터를 어떻게 저장할 지 미리 정해놓는 겁니다. 엑셀 문서에 헤더를 정한다고 생각하시면 쉽습니다. 게시판에는 제목하고 내용이 있어야 한다.. 이런거요. 053 게시판 스키마 설계를 하면 이렇게 됩니다. 054

카테고리 테이블을 설계하기 전에, 이 테이블이 반드시 필요한지부터 고민합니다. 미스사이공같은 프렌차이즈 음식점에서 카테고리가 늘어나는 일은 거의 없습니다. 게다가 줄어들거나 이름이 변경될 가능성도 아주아주 희박합니다. 이미 그 명칭으로 여러 곳에 홍보가 되었을 테니까요

먼저 데이터베이스를 만들겠습니다. 엑셀 파일을 하나 만든다고 생각하시면 됩니다. 메뉴 테이블은 카테고리에 비해 상대적으로 복잡합니다. 관리해야 할 항목이 몇 개 있어요. 먼저 필요한 항목들을 기획서를 바탕으로 정리해 봅니다. 열 이름 | 열 영어 이름 | 타입 |

메뉴 소개 기능은 백오피스가 꼭 필요할 것 같습니다. 메뉴 이름은 잘 변하지 않는다고 해도 메뉴 설명이나 이미지가 변경되거나, 메뉴 자체를 추가하거나 제거하는 기능은 있어야 하니까요. 실무에서는 어느정도 경험치가 있는 개발자 혹은 개발사의 경우 백오피스 시스템 자체는

백오피스라고는 해도, 너무 디자인이 볼품없으면 곤란하겠죠. 그렇다고 해서 바쁜 디자이너와 퍼블리셔의 리소스를 사용하면서 백오피스도 디자인해달라고 하는 것은 난감할 수 있습니다. 따라서 백오피스는 기획자와 개발자만 투입해서 만드는 방식으로 진행해 보겠습니다. 디자인 능력

백오피스는 로그인이 반드시 필요합니다. URL 만 알면 아무나 접속해서 데이터를 막 고치면 안되니까요. SBAdmin2 템플릿에서 제공하는 로그인 화면을 수정해서 심플한 모양의 로그인 폼을 만들어 보겠습니다. 구체적으로는 ID 와 비밀번호만 입력받을 수 있는 아주 간

로그인 폼에서 로그인 버튼을 누르면 ID와 비밀번호가 서버로 전달되어야 합니다. 이 값을 서버가 받아서 로그인을 처리해야 하니까요. HTML 에서 서버로 값을 전달하기 위해서는 `` 태그로 전달할 내용을 감싸야 합니다. > 퍼블리셔팁 > 데이터를 입력하는 항목은 f

백오피스 로그인 처리를 위해 가장 먼저 생각해야 하는 건 관리자 계정 데이터베이스 사용 여부입니다. 데이터베이스를 사용하면 관리자 계정을 여러 개 만들 수 있고, 각 계정별로 권한을 따로 부여할 수도 있습니다. 반면 권한관리까지 포함된 계정관리는 조금 더 개발하기 번

백오피스 헤더를 만들어 보겠습니다. 처음 SB Admin 2 의 테이블 화면을 가져와서 서버 코드로 붙여넣습니다. 079 화면은 이렇게 보여집니다. 078 검색창, 알림, 메시지는 필요없으니까 지우겠습니다. 먼저 브라우저 검사기를 통해 해당 html 부분을 찾습니다

사용자 웹사이트와 동일하게 백오피스도 분해합니다. login 과 menu_item html 을 비교해서 head 코드가 동일한지 확인합니다. 090 똑같은 것 같네요. /backoffice/inc/head.php 로 분리합니다. 091 왼쪽 사이드바도 분리하겠습니다

로그아웃을 클릭했을 때 실제 로그아웃을 처리할 페이지를 만듭니다. 로그아웃 이후 다시 로그인 페이지로 이동하는지 확인합니다.

백오피스 메뉴 관리 목록 기능을 만듭니다. 기존 사이드바는 샘플로 여러가지 예시가 있는 버전이므로 먼저 사이드바를 정리하겠습니다. 기존 사이드바는 아래처럼 생겼습니다. 092 sidebar.php 파일을 변경해서 메뉴 관리 항목만 남겨둡니다. 105 104 SB A

백오피스 메뉴 생성 화면을 만들 차례입니다. 아쉽게도 SB Admin 2 에는 상세 항목 관리 화면은 미리 준비되어 있지 않으므로, 직접 만들어야 합니다. /backoffice/menuitem 폴더를 복사해서 /backoffice/menuitem/create 폴더로

메뉴 생성 기능을 추가합니다. 잘 동작하는지 확인합니다. 메뉴 생성 데이터를 입력해 봅니다. 121 데이터베이스에 잘 입력되었는지 체크해 봅니다. 122 메뉴 목록에서도 잘 나오는지 크로스 체크가 필요합니다. 123 개발 요청은 freetercoder@gmail

백오피스 메뉴 수정은 다행히도 처음부터 만들 필요는 없습니다. 메뉴 생성 화면을 복사해서 수정하면 되거든요. 대신 수정 화면은 기존의 데이터를 바인딩해야 하기 때문에 생성 화면보다는 조금 더 손이 많이 가고 실수할 여지가 높습니다. backoffice/menuitem

다시 수정 화면으로 돌아와서, 수정은 기존의 데이터를 보여줘야 하므로 데이터를 불러오는 코드를 작성합니다. 이름 필드를 불러온 값으로 채워넣습니다. 설명도 채워넣습니다. 이미지의 경우 기존에 첨부된 이미지를 보여줍니다. 카테고리도 기존에 선택한 카테고리가 기본으

내친 김에 메뉴를 수정 저장하는 코드도 작성해 봅니다. 이미지는 새로운 이미지를 첨부했을 때만 변경합니다. 수정이 잘 되는지 확인해 봅니다. 129 > 기획자 팁 > 이미지를 첨부했을 때 이미지가 잘 바뀌는지도 테스트하고, 이미지를 첨부하지 않았을 때 기존 이미지

백오피스 메뉴 수정 기능을 만들었으니 목록에서 잘 나오는지도 재차 확인이 필요합니다. 130 아쉽지만 잘 안나옵니다. "쌀국수" 카테고리는 잘 나오는데, "식사" 카테고리는 잘 안나오는 것 같습니다. 원인이 뭔지 찾아봅니다. 다행히도 오류가 발생한 파일명과 줄번호

백오피스 메뉴 삭제 기능을 만들어야 합니다. 다만 기능 구현 전에 확인해야 하는 점이 있는데, 바로 삭제 기능을 어디에 만들 것인지 여부입니다. 일반적으로 삭제 기능은 1.) 목록에서 바로 삭제를 구현하거나 2.) 수정 화면에서 삭제 버튼을 따로 두는 방식 둘 중 하나

기획자 분께 급한 연락이 옵니다. 깜박하고 메뉴 정렬 항목, 사용 여부를 지정하지 않았다는 내용입니다. 메뉴 정렬 항목이란, 사용자 웹사이트에서 봤을 때 각 메뉴가 어떤 순서로 나오는지 지정하는 것입니다. 만약 직접 메뉴 순서를 등록하지 않는다면 기준으로 정할만한 열

처음 만들 때와는 다르게 메뉴 생성 기능이 있기 때문에 메뉴 생성 기능부터 만들어 보겠습니다. 순서와 사용 여부 항목을 입력할 수 있도록 변경합니다. 143 순서는 숫자만 입력 가능하도록 type="number" min="1" step="1" 로 고정해 둡니다. 생

백오피스 메뉴 수정 기능에 정렬 순서, 사용 여부를 추가하기 위해 생성 기능을 복사해서 수정합니다. 151 잘 바뀌었는지 확인합니다. 150 개발 요청은 freetercoder@gmail.com 으로 연락 부탁드립니다.

메뉴 목록에서 정렬 순서를 볼 수 있는 것이 편하실 꺼에요. 따라서 목록 화면도 변경합니다. > 기획자 팁 > 가끔 정렬 순서 같은 것을 드래그 앤 드랍으로 구현해 달라는 분들이 계시는데, 우리 그러지 말아요. 꼭 필요하지 않은 편의점 기능을 구현하기 위해 너무 시간

백오피스까지 만들고 나서야 메뉴 웹사이트 코딩이 가능해졌습니다. 여러명이서 하나의 웹사이트를 나눠서 개발할 경우 한사람은 백오피스, 한사람은 사용자 웹사이트 이런식으로 나눠서 개발하기도 합니다만, 프리터코더에서는 무조건 한 사이트는 모두 전담하므로 우선 순위에 따라 개

웹에이전시 전문 프리랜서 개발자 프리터코더입니다. 이번 챕터에서는 웹사이트 개발 과정 중 사용자사이트 메뉴 퍼블리싱 붙이기를 작업합니다. 글은 웹에이전시의 의뢰를 받아서 프리터코더가 웹사이트를 개발하는 과정을 가상으로 보여주는 웹에이전시의 개발자들은 어떻게 일하나

웹에이전시 전문 프리랜서 개발자 프리터코더입니다. 이번 챕터에서는 웹사이트 개발 과정 중 사용자사이트 메뉴 - 베스트 메뉴 만들기를 작업합니다. 글은 웹에이전시의 의뢰를 받아서 프리터코더가 웹사이트를 개발하는 과정을 가상으로 보여주는 웹에이전시의 개발자들은 어떻게

웹에이전시 전문 프리랜서 개발자 프리터코더입니다. 이번 챕터에서는 웹사이트 개발 과정 중 사용자사이트 메뉴 페이지 - 목록 만들기를 작업합니다. 글은 웹에이전시의 의뢰를 받아서 프리터코더가 웹사이트를 개발하는 과정을 가상으로 보여주는 웹에이전시의 개발자들은 어떻게

웹에이전시 전문 프리랜서 개발자 프리터코더입니다. 이번 챕터에서는 웹사이트 개발 과정 중 사용자사이트 메뉴 URL 정리하기를 작업합니다. 글은 웹에이전시의 의뢰를 받아서 프리터코더가 웹사이트를 개발하는 과정을 가상으로 보여주는 웹에이전시의 개발자들은 어떻게 일하나

웹에이전시 전문 프리랜서 개발자 프리터코더입니다. 이번 챕터에서는 웹사이트 개발 과정 중 사용자사이트 메뉴 탭 처리하기를 작업합니다. 글은 웹에이전시의 의뢰를 받아서 프리터코더가 웹사이트를 개발하는 과정을 가상으로 보여주는 웹에이전시의 개발자들은 어떻게 일하나 시

0 웹에이전시 전문 프리랜서 개발자 프리터코더입니다. 이번 챕터에서는 웹사이트 개발 과정 중 사용자사이트 영문명 추가를 작업합니다. 글은 웹에이전시의 의뢰를 받아서 프리터코더가 웹사이트를 개발하는 과정을 가상으로 보여주는 웹에이전시의 개발자들은 어떻게 일하나 시리

0 웹에이전시 전문 프리랜서 개발자 프리터코더입니다. 이번 챕터에서는 웹사이트 개발 과정 중 매장찾기 기획 확인하기를 작업합니다. 글은 웹에이전시의 의뢰를 받아서 프리터코더가 웹사이트를 개발하는 과정을 가상으로 보여주는 웹에이전시의 개발자들은 어떻게 일하나 시리즈

0 웹에이전시 전문 프리랜서 개발자 프리터코더입니다. 이번 챕터에서는 웹사이트 개발 과정 중 백오피스 매장 데이터베이스 설계를 작업합니다. 글은 웹에이전시의 의뢰를 받아서 프리터코더가 웹사이트를 개발하는 과정을 가상으로 보여주는 웹에이전시의 개발자들은 어떻게 일하

0 웹에이전시 전문 프리랜서 개발자 프리터코더입니다. 이번 챕터에서는 웹사이트 개발 과정 중 백오피스 매장 목록 개발을 작업합니다. 글은 웹에이전시의 의뢰를 받아서 프리터코더가 웹사이트를 개발하는 과정을 가상으로 보여주는 웹에이전시의 개발자들은 어떻게 일하나 시리