[mini-project] Yoga Responsive Website Re-design

📌 프로젝트 개요

실존하는 요가 스튜디오의 웹사이트를 벤치마킹하여 Redesign을 하였습니다. 그리고 반응형으로도 제작하여 사용자가 다양한 방식으로 접근을 할 수 있도록 하였습니다.

* 이 프로젝트는 상업적 용도가 아닙니다.

 

프로젝트 명: 요가원 반응형 웹사이트 리뉴얼

개발 기간: 2024-06-25 ~ 2024-08-04

목적: HTML5, CSS3을 사용하여 반응형 웹사이트를 제작하면서 경험을 쌓는 것과 동적인 부분을 JavaScript만을 사용하여 구현을 함으로써 언어에 대한 이해도와 경험을 쌓기 위함입니다.

사용 기술: HTML5, CSS3, JavaScript, VS Code, Git & GitHub, GitHub Pages

---

🧩 구현 기능

기능명	상세 설명
원페이지 반응형	하나의 페이지에 PC, 태블릿, 모바일 너비에 맞춤 반응형 개발
메뉴 고정	상단에 menu를 고정하여 스크롤 다운을 해도 상시 보임
토글 기능	- 768px 이하에서 메뉴 버튼이 토글 형태로 바뀐다. - 그룹 스케쥴(시간표) 섹션을 접었다 폈다 할 수 있다. - classList.toggle() 사용.
섹션 이동	메뉴를 클릭하면 해당 섹션으로 부드럽게 이동함
이미지 모달창	- 실내 사진을 클릭하면 이미지 모달창으로 보다 이미지를 크게 볼 수 있음. - 모달창이 나타났을 때 스크롤 기능 막기. - document.body.style.overflow 사용, addEventListener("touchmove") 사용.

---

💜 GitHub 저장소 & 데모

🔗 GitHub Repository

🚀 데모 사이트 보러가기

---

📁 디렉토리 구조

📂 YOGA/
├── index.html         // 메인 웹페이지
├── img/               // 정적 이미지 모음
├── js/                // 동적 기능 자바스크립트
│   ├── modal.js 
│   ├── moveSection.js 
│   ├── scheduleToggleBtn.js 
│   ├── toggleBtn.js 
│   └── topBtn.js
├── style/              // 스타일(CSS)+미디어쿼리
│   ├── about.css
│   ├── classContent.css
│   ├── classType.css
│   ├── components.css
│   ├── contact.css
│   ├── faq.css
│   ├── footer.css
│   ├── history.css
│   ├── home.css
│   ├── modal.css
│   ├── navBar.css
│   ├── reset.css
│   ├── schedule.css
│   ├── studioGallery.css
│   └── topBtn.css

---

🧱 설계 구조 설명

• 섹션별로 css 구분
  • about, classContent, classType, components, navBar, ... 등 각 섹션별로 css를 구분함.
  • 이유는 미디어쿼리를 작성하고 유지보수에 각각 구분하는 것이 좋을 거 같다고 생각했기 때문.
• 동적 기능별 자바스크립트 구분
  • modal, moveSection, scheduleToggleBtn, ... 등 각 자바스크립트로 구현해야하는 기능마다 파일을 생성하여 구분함.
  • 이유는 css와 마찬가지로 유지보수에 각각 구분하여 두는 것이 좋을 거 같다고 생각했기 때문.

---

📋 주요 기능 설명

• 미디어 쿼리를 사용하여 브라우져 화면의 너비마다 보여지는 모습이 다르게 제작.
  • media screen and (max: ...px) {}
• 메뉴 버튼을 클릭하면 해당 섹션으로 이동하는 기능.
  • forEach()문, offsetTop(), scrollTo() 사용.
• 모바일 화면에서는 토글 버튼과 메뉴로 대체함.
  • classList.toggle() 사용.
• 수업 시간표가 적힌 부분을 토글 기능을 넣어 시간표를 접었다 폈다 할 수 있는 기능을 추가함.
  • classList.toggle() 사용.
• 갤러리의 이미지를 클릭하면 모달창이 화면에 출력되는 기능.
  • forEach()문, addEventListener("click") 사용.
• 모달창에 뜨는 이미지는 사용자가 선택한 이미지의 src 속성 값을 추출하여 모달창에 뜨는 이미지에 값을 주어 출력되는 기능.
  • modalImg.src = galleryImg.src 이런식으로 사용.
• 모달창이 떴을 경우 마우스 스크롤하는 기능과 터치하여 움직이는 기능을 방지하는 기능을 추가함.
  • document.body.style.overflow 사용, addEventListener("touchmove") 사용.

---

🐞 문제 해결 & 트러블슈팅

✅ 이슈 1 - 브라우저 너비별 요소들의 배치가 틀어짐. 

• 문제: 미디어 쿼리의 순서를 화면 크기가 작은 순부터 큰 순으로 작성한 결과 각 요소들의 배치가 틀어짐.
• 원인: 미디어 쿼리의 작선 순서.
• 해결: 큰 순부터 작은 순으로 코드 작성을 진행.

---

✅ 이슈 2 - 모바일로 접속 시 스크롤 방지가 안됨.

문제: 모바일에서 웹사이트로 접속 후, 이미지 모달창이 열렸을 때 스크롤 방지가 되어야하는데 에러 메시지가 뜸.

원인: 함수 호출 방식과 컨텍스트가 잘못 되었다.

해결: 

// 변경 전
document.body.addEventListener('touchmove', e.preventDefault(), false);

// 변경 후
document.body.addEventListener('touchmove', preventDeafultHandlr(), false);

function prevnetDefaultHandlr(e) {
	e.preventDefault();
}

---

✍ 느낀 점 / 회고

• Query 라이브러리만 사용하여 동적인 부분을 구현을 하다가 순수 자바스크립트로 동적인 부분을 구현을 하려고 하니 어려움을 겪었다. 예를 들어서 jQuery에서는 class를 추가하는 것을 toggleClass를 사용하면 되지만 순수 자바스크립트에서는 classList 속성에 .toggle() 메서드를 사용해야 했다. 이렇듯 완전히 다르기 때문에 공부가 많이 필요하다고 느꼈다.
• JavaScript 문법을 더 공부해야겠다고 느꼈다. forEach문을 봤던 기억이 있었지만 어떻게 사용하는지 까먹었었다. 그리고 이외 다른 반복문은 전혀 모르고 있었다. 그나마 React를 학원에서 배울 때 .map() 함수를 자주 사용해서 반복문에 대해 조금 익숙해졌다고 생각을 했다. 하지만 순수 자바스크립트로만 구현을 하려고 했을 때 문법을 잘 모르니 어려움을 겪었다.

---