[개발노트] 웹페이지 제작 프로젝트_기획

2023년 2학년 1학기 <표준웹페이지개발> 과목에서 진행한 웹페이지 제작 기말프로젝트의 회고록.
 

2023년 7월 11일 velog 최초 작성

 

 
 

프로젝트명: 노동로그
최종 결과물 링크: https://ebee1205.github.io/Nodong-log/_

팀 박쥐피플; 고예경, 조은비
제작 기간 | 배포일: 2023.05.10~06.12
서비스 목표: 개인 농장 홈페이지, 정보제공/판매 페이지 제공
사용 툴: HTML, CSS, JavaScript, bootstrap

 
 

👥 팀 빌딩

팀 빌딩은 너무 수월하게 진행되었다. 예경님은 전년도 학기에 진행한 **팀 세미나 프로젝트(- 링크참조)**에서 만나 이번에도 어김없이 프로젝트를 함께 하게 되었다. 지난 세미나와 첫 웹 프로젝트 모두 예경님이 조장으로 진행했었는데, 이번 프로젝트에서는 단 2명으로 이루어진 팀이었기 때문에 명확한 팀 리더 없이 역할을 분담하여 프로젝트를 진행하였다.

역할 분담

🙍‍ 고예경: 주제 기획 및 피드백, 일정 관리, 회의 진행 등 프로젝트 매니징, 와이어프레임 및 레이아웃 기획, 컨텐츠 제작 및 입력, 기말 최종 발표

🙍‍ 조은비: 기획 로드맵 제시, 기술 검토, 기술 구현 방향 제시 및 피드백, 프로토타입 제작, 중간 기획 발표

 
팀원 자랑을 해보자면...
예경님은 디자인 교양 팀 프로젝트에서 처음 만났는데, 5-8명 정도의 규모 있는 팀의 조장이었다. 이후 세미나 프로젝트에서 내가 예경님 팀의 조원으로 간택되면서 계속 같이 팀을 해왔다. 회의 진행이 매우매우매우매우 깔끔하고 꼭 필요한 이야기만 하는게 마음에 쏙 들었는데 카리스마 넘치고 말도 잘함. 최고. 프로그래밍 능력이 특출나게 뛰어난 편은 아니지만 매니징&커뮤니케이션에 센스가 넘친다.
팀 프로젝트에서 상호소통이 가장 중요하다고 생각하는데, 이 분은 기본적으로 척하면 척 알아듣는 편이지만... 무엇보다 상호 간 이해한 바를 확인하는 과정에 매우 적극적이다.
기본 능력치도 좋은데 회의 잘하고 피드백 빠르고 발표 잘하고 성실하고 거기다가 소통까지 잘된다? 이만한 사람이 없음... 계속 저랑 팀플해주셔야해요,
 

🛠 기획 과정

1. 주제 잡기

기획 초기에는 다양한 주제를 고려했다. 주제의 조건은 '팀원과의 공통점'을 바탕을 할 것. 우리는 3가지 정도의 여유 주제를 잡고 시작했다. 이전의 팀프로젝트로 '영화 추천 아카이빙 사이트'를 개발한 경험이 있었기 때문에 이번 프로젝트는 색다른 주제를 선택하기를 희망했다.

 
처음에는 '상디의 올 블루 - 특이한 바다생물 아카이브' 를 기획했으나, 기술 검토 중 발견된 문제사항(템플릿 선정 참고)으로 주제를 변경하였다.
 

고려한 주제 선정 조건

• 컨텐츠를 채우기 쉬울 것. '영화 추천 아카이빙 사이트'에서 직접 리뷰를 작성했었는데, 기술 프로젝트에서 컨텐츠를 채우는 것에 시간을 과하게 투자하는 것은 비효율적. 이미 작성된 내용을 옮길 수 있도록 하자.
• 아카이빙 웹사이트가 아닐 것. 하드 코딩된 사이트를 제작하기에는 아카이빙 웹사이트가 수월하겠으나, 좀 더 인터랙티브한 사이트를 만들기 위해서는 아카이빙 보다는 기존의 웹사이트들 중 하나를 래퍼런스로 하여 독특한 컨셉으로 컨텐츠를 채우는 것이 차별화에 좋을 것.
• 카테고리를 명확히 나눌 수 있을 것. 목적이 명확하지 않은 주제는 기획을 어렵게 만든다. 컨셉은 독특하게 하되, 주제를 처음 접하는 사람들이 한 번에 기획 목적을 받아들일 수 있게 만들 것. 그리고 '카테고리를 명확하게 나눌 수 있는가?'는 명확한 주제와 목적의 결과로, '명확성'에 대한 지표를 명시적으로 확인할 수 있는 조건으로 생각함.

 
 
따라서 최종적으로 결정된 주제는 팀의 공통점인 경영 게임 중 '스타듀밸리를 컨셉으로 하여, 실제로 플레이한 농장 노동 농장의 쇼핑 웹사이트 노동로그를 제작하는 것으로 결정되었다.
노동로그 - 노동농장 쇼핑 카탈로그 의 기획은 이렇게 시작했다.

 
 

2. 카테고리 분류

 
주제가 확정된 이후 세부 내용들을 구체화하기 위해 카테고리 분류를 시작했다. 본인은 스타듀밸리를 플레이한 경험이 없기 때문에, 실제 유저인 예경님이 카테고리 기획을 전적으로 담당하기로 계획했다.
나는 이 단계에서 이용자와 개발자의 입장에서 해당 카테고리가 와닿는가? 이해가 되는가? 와 제작하기 용이한가? 를 기준으로 피드백을 드렸다.

 
 
기획 단계는 괜히 있는 것이 아니다... 이전 프로젝트에서

1. 무엇을 (=카테고리)
2. 어떻게 (=레이아웃으로) 만들 것인가

 
를 결정하는 것이 중요하다는 것을 실감했다.
어지간히 간단한 페이지가 아닌 이상 이 두 가지가 결정되지 않으면 제작 단계에서 끝없는 수정과 회의... 재수정과 제작... 회의... 를 거듭하면서 의미없는 시간을 보내게 된다... 
 
따라서 노동로그 프로젝트에서는 인게임 상점 페이지를 참고하여 카테고리를 보다 명확히 분류하고 작성하였고, 이해를 돕기 위해 간단한 예시를 함께 첨부할 수 있도록했다. 이후 카테고리 분류는 메뉴트리 설계와 각 페이지에서 사용할 템플릿 섹션을 나누는 부분에서 유효하게 고려되었다.
 
 

3. 래퍼런스 서치

래퍼런스 서치는 프로젝트 진행을 위해 거의 필수적으로 거치게 되었고, 전 단계에 걸쳐 유용하게 이용하였다. 다양한 사이트들을 둘러보며 웹페이지의 윤곽을 잡아나갔으며, 명확한 목업을 만들기 전 설명을 위한 참고 자료로 사용되었다.

 
래퍼런스로는 정육각, 빙그레, 마켓컬리 페이지를 주로 참고하였다.
정육각과 빙그레의 경우 전체 메뉴 구성과 페이지 분리 및 전환 방법 - 탭 전환의 주 래퍼런스로 이용되었다.

 
 
특히 마켓컬리는 잘된 UX/UI의 예시로, 상품 페이지의 구성과 디자인 측면에서 많은 영감을 받았다.
 

 
 

4. 템플릿 선정

템플릿 선정은 템플릿 기술 검토 > 템플릿 선정의 순서로 이루어졌다.
먼저 12개의 템플릿을 하나씩 살펴보면서 아래 내용들에 대해 메모하고, 노션으로 공유하였다.

어떤 요소들이 들어있는가어떤 디자인인가최종적으로 어떤 주제에 적합한가

 
이 과정은 모두 함께 참여했고, 각자 눈여겨 본 템플릿을 실시간으로 확인해보며 의견을 교환했다.
사실 템플릿 기술 검토 단계는 처음 주제를 선정하는 과정에서 함께 진행하였는데, 주제를 다시 정한 이후에 템플릿을 재선정하는 관정에서는 해당 메모들을 바탕으로 보다 수월하게 템플릿을 선정할 수 있었다.
 

 
그래서 최종적으로 선정한 템플릿은 6번 템플릿.

큰 카테고리 분류를 위한 페이지 분류가 되어 있다.세부 카테고리 구현을 위한 섹션(sevices, portfolio, about, etc ...)가 있다.디자인이 깔끔하며 디자인의 큰 변경없이 사용할 수 있다.

최종적으로 ... 쇼핑 카탈로그를 구현하기에 적합한 레이아웃을 가지고 있다.

 
추가적으로, '탭 기능' 을 구현하기 위해 보다 구체적인 검토를 거쳤는데, 이 과정에서 기존의 주제인 '올 블루 - 특이 바다생물 아카이빙'을 구현하기 위한 템플릿이 수정한 코드가 제대로 동작하지 않는 오류를 발견했다.
따라서 6번 템플릿이 다른 템플릿들에 비해 구조가 단순하여 새로운 코드를 끼워넣기 매우 효율적이라는 점이 선택 기준이 되기도 했다.
 
 

5. 메뉴 트리 기획

 
메뉴 트리 기획은 상당히 길고 복잡한 단계를 거쳤다. 최대한 정확하고 효율적인 커뮤니케이션을 위해 그림을 그리고, 카테고리를 글로 정리하여 분류하고 교차 검증을 통해 의견을 구체적으로 확인하는 등의 단계적인 절차를 여러번 거쳐 완성하였다.

대부분의 회의는 온라인으로 이루어졌다. 채팅과 노션을 주로 이용한 온라인 베이스의 프로젝트였음에도 '커뮤니케이션 미스' 가 일어나지 않았다.
 
만약 완전히 이해되지 않은 것이 있을 경우 '내가 이해한 바'를 명시화하여 그림/글/프로토타입 등으로 꼭 공유하였고, 맞는지 무조건 확인했다. 제대로 이해되었다/전달되었다 라고 생각되는 경우에도 빠른 시간 내에 프로토타이핑을 하여 결과물을 확인, 피드백을 공유하였다. 

 
중요사항이 있는 경우에는 상대가 제대로 이해했는지, 목표하고 있는 바가 무엇인지, 방향이 동일한지 확답을 받은 후 진행했다.
수정사항과 각종 이슈들은 즉각적으로 보고하고, 노션 <개발일지> 란 등을 이용하여 단계적으로 메모해두었다.
 

위의 캡처는 메뉴트리 기획 단계에서 주요 문제였던 판매/구매 페이지 구분 관련 이슈 를 담은 내용이다.
 
초기 기획 단계에서는 상점 페이지를 그대로 옮기는 것을 목표로 했기 때문에 게임 플레이어 입장에서 '상품 구매'와 '상품 판매' 페이지를 구성했다. 다만 이 부분이 웹 페이지로 옮겨오며 게임을 플레이 하지 않은 유저에게 주체가 굉장히 모호하게 받아들여져 카테고리 분류의 이해에 어려움을 겪는 경우가 생겼다.
따라서 최종적으로는 '상품 정보'와 '판매'로 메뉴를 구분하여 모호함을 해소했다. 이 과정에서 교차 검증하며 피드백하는 커뮤니케이션 방법이 효율적으로 작용했던 것 같다.

 
 

6. 텍스트 기반 와이어 프레임 기획

 
해당 프로젝트는 템플릿을 활용하기 때문에 이미 기본 UI가 어느정도 고정되어 있었다. 또한 시간적 여유가 많지 않아 와이어프레임 이미지 대신 텍스트 형태로 설계를 진행하였다.
 
노션의 콜아웃 기능을 활용하여 각 페이지를 쪼개고, 페이지 별로 들어갈 내용들을 블럭 단위로 입력했다. 각 블럭의 내용과 활용할 템플릿 섹션을 대응시켜 기록하였다. 세부 항목으로는 입력될 컨텐츠와 고려해야 할 사항들을 작성하였다.
이렇게 계획된 내용을 바탕으로 프로토타이핑을 진행했다.
 
제작 포스팅에서 계속 ...