💻 프로젝트 소개

이전 단계에서 작성한 체크리스트 중 하나인 프로그램 설계 단계를 완료했다면 프로젝트를 소개하는 README.md 파일이 존재할테니 이 과정을 생각해도 되겠지만, 이 프로젝트는 README.md 작성은 커녕 설계조차 제대로 안 된 채로 시작된 엉망진창인 프로젝트라 이 글을 시리즈 두 번째 글로 쓰게되었다.

버거킹 주문 사이트를 만드는 프로젝트는 원래 3D그래픽을 활용해 버거에 들어가는 재료들을 눈으로 확인해 드래그, 클릭 등으로 재료를 추가, 제거 할 수 있는 역동적이고 재미있는 기능 활용해 버거를 주문할 수 있도록 하는 사이트를 만드는 프로젝트였다.

하지만 핵심인 이 부분까지는 가지도 못하고 주문 사이트를 대충 흉내내는 것에 그쳤다. 아래는 제작한 버거킹 주문 사이트의 동작영상이다.

🎞️ 프로젝트 동작 영상

📝 구현 기능 목록

• Home 화면에 진입시 버거킹 로고를 활용한 애니메이션이 재생되도록 구현.

• Home 화면에서 화면을 드래그하면 섹션이 위 아래로 드래그 되도록 구현.

• header 에 커서를 올리면 header가 흰 색으로, header내부 아이콘들이 검은 색으로 변하도록 구현.

• 사용자의 위치정보를 가져오도록 구현.

• resize 이벤트 발생 시, 화면사이즈에 맞게 배경사진 사이즈를 바꿔줌

• 새로고침 이벤트 발생 시, 섹션 페이지가 1번 페이지로 드래그 되도록 구현.

• 화면 좌측 상단의 메뉴 아이콘을 클릭할 시 메뉴 아이콘의 모양이 상태에 따라 ☰, X 로 변하는 애니메이션이 재생되도록 구현.

• 메뉴 아이콘을 클릭할 시 상태에 맞게 메뉴가 열리고 닫히도록 구현.

• 메뉴가 열린 상태에서 이동할 메뉴를 클릭하면 해당 메뉴로 이동하도록 구현.

• Menu 화면에서 드래그로 회전하는 다각형 구현

• Restaurants 화면에서 위치 정보를 통해 사용자를 중심으로 버거킹 매장을 보여주는 지도를 보여주는 기능을 구현.

📁 디렉토리

✍ 글을 마치며

이번 글에서는 이 프로젝트에서 존재하지 않았던 프로젝트 설계 단계의 공백으로 인해 코드와 프로젝트를 이해하기 어려움을 대비해 간단히 프로젝트를 소개하는 시간을 가졌다.
다음 글에서는 이번에 작성한 구현 기능 목록 을 바탕으로 각각의 기능을 구현한 코드들을 살펴보고 반성하는 시간을 본격적으로 가져보겠다.