Front 관통 프로젝트: 영상 관리 프로그램

Github

개발 기간 2023/08/11 (1일)

개발 인원 2명

이영현 @olrlozl

프로젝트 목표

HTML, CSS, JavaScript 활용
CSS, Bootstrap으로 향상된 디자인 구현
UX, UI를 고려한 사이트를 구현하여 사용자 입장에서 편리하고 멋진 디자인 설계

프로젝트 요구사항

Wireframe Tool을 이용하여 구현할 웹 페이지 프로토타입 설계
SSAFIT 사이트 메인 페이지 및 메뉴
1. 메인 페이지 구성: 운동영상 정보의 다양한 화면 구성
2. 메뉴 구성: 사이트 주요 메뉴 구성
운동 영상에 대한 리뷰 관리 페이지
1. 리뷰 목록, 등록, 수정, 상세, 삭제
회원가입/로그인 메뉴
유저의 찜한 동영상, 팔로잉/팔로워 목록

사용 기술

HTML
CSS
Bootstrap

구현 과정

1. Prototype 제작

예시로 주어진 구현 화면을 보고 간략히 프로토타입을 제작했다. 특정 버튼을 누르면 보여 줄 화면을 화살표로 연결하여 와이어 프레임 방식으로 표현했다.

2. 개발 환경 조성

이번에도 Github 저장소를 만들어서 함께 작업했다. 각자 맡은 파일만 수정했고, 이후 충돌이 발생하더라도 VSCode에서는 충돌이 발생하면 대조할 수 있어 충돌이 발생해도 금방 해결할 수 있었다. 프로토타입을 기반으로 폴더와 파일 구조를 미리 만들어 두고, CDN을 활용해 부트스트랩을 가져와 개발을 시작했다.

3. 개발

요구하는 것들을 화면에 띄우는 것을 가장 우선으로 했다. 팀원은 리뷰 관련 페이지를 모두 만들고, 메인 페이지와 메뉴, 회원가입/로그인, 찜과 팔로우 화면은 내가 맡아서 했다. 각자 작업한 내용을 중간중간 합치고 확인하며 차근차근 개발을 진행했다.

느낀 점

처음 구현하고자 했던 화면과 흡사하게 만들어서 아주 뿌듯하다.

오랜만에 Bootstrap을 사용해서 처음엔 버전이 맞지 않아 제공되는 js가 작동하지 않았다. 조금 당황했지만 버전에 맞는 컴포넌트를 가져다 만들었다. -> Bootstrap 컴포넌트를 제공하는 사이트 URL을 보면 버전이 나타나는데, 이 버전을 변경하면 버전에 맞는 컴포넌트를 가져다 쓸 수 있다.

메뉴가 존재하는 <header>처럼 모든 페이지에 들어가는 요소의 경우, 모든 파일에 넣어야 했기 때문에 변경 사항이 한꺼번에 반영되지 않아 조금 불편했다. 리액트나 뷰 같은 개발 툴을 사용할 때는 꼭 컴포넌트 하나를 만들어서 개발해야겠다.

이 과정에서 팀원이 내가 못 보고 지나친 것들을 체크해 줘서 고마웠다. 서로 안 되는 부분이 있으면 활발히 의견을 말하며 크고 작은 문제점을 해결할 수 있었다.