개요

<aside> ⚪ 해당 문서는 멋쟁이 사자처럼 프론트엔드 스쿨 4기 ****“Vanilla 프로젝트를 위한 가이드라인”입니다.

Vanilla 프로젝트는 HTML / CSS 그리고 Javascript 등 웹의 기본 기술인 웹 표준을 활용하여 진행하고 협업을 위해 Git과 Github을 사용해주세요. 프로젝트 진행을 위해선 5 ~ 6인이 한 팀으로 구성되며 각 팀은 아래 2가지 디자인 시안 중 1개의 시안을 선택하여 진행합니다.

디자인 시안 1 : 마켓칼리

마켓칼리

디자인 시안 2 : TAING

TAING

</aside>

<aside> 🔴 디자인 시안 선택

• [x] 첫 회의를 통해 TAING으로 결정. </aside>

프로젝트 진행 시 준수사항

프로젝트 요구사항을 분석해 구현하기 위한 가이드를 잘 참고해 진행해보세요.

<aside> ⚪ 웹 표준 마크업 & 스타일링

• 적절한 헤딩 사용 및 시맨틱 마크업에 신경써 주세요. 예 - 버튼 기능을 하는 UI를 마크업 할 때 <div> 등 의미없는 요소를 사용하지 마세요. 다만 <div> 요소를 사용하지 말라는 의미가 아닙니다.
• 유효성 검증을 통해 문법 오류가 발생하지 않도록 구현해야 합니다.

The W3C Markup Validation Service

• 페이지 단위로 구현해주세요. (컴포넌트 단위 구현은 React 프로젝트에서 진행됩니다)
• 스타일 작성 시, Sass 등 프리프로세서 기술을 자유롭게 사용하셔도 좋습니다. (선택사항)
• 네이밍 컨벤션은 BEM 방식을 사용해 주세요. (선택사항) </aside>

<aside> 🔴 웹 표준 마크업 & 스타일링

• [ ] 시도하긴함 적절한 헤딩 사용 및 시맨틱 마크업 <보완필요>
• [ ] 시도하긴함 유효성 검증 <보완필요>
• [x] 페이지 단위로 구현
• [x] 네이밍 컨벤션 BEM 방식 채택 </aside>

<aside> 📄 웹 접근성

• 이미지의 경우, 대체 텍스트 제공이 필요합니다.

• 마우스로 조작할 수 있는 기능은 키보드로도 접근 및 조작이 가능해야 합니다.

• 폼 컨트롤은 식별 가능한 레이블이 필요합니다. (시각적으로 표현되지 않더라도 스크린 리더가 읽을 수 있게 처리해야 합니다)

• 명도대비는 최소 4.5대 1을 준수해야 합니다. (24px, 18px Bold인 경우, 최소 3대 1까지 허용 → 참고)

• 좀 더 상세한 웹접근성 가이드 라인 및 체크리스트는 사람인에서 공개한 정보를 참고해 주세요.

  소개 | 사람인 웹 접근성 교육

</aside>

<aside> 🔴 웹 접근성 이미지의 경우, 대체 텍스트 제공

• [x] 이미지의 경우, 대체 텍스트 제공 <보완필요>
• [ ] **시도**마우스로 조작할 수 있는 기능은 키보드로도 접근 및 조작이 가능 <보완필요>
• [ ] 폼 컨트롤은 식별 가능한 레이블이 필요(스크린 리더가 읽게) <보완필요>
• [ ] 명도대비는 최소 4.5대 1을 준수 <보완필요>
• [x] 웹접근성 체크리스트
  • [x] 제작 완료
  • [ ] 반영 완료 <보완필요> </aside>

<aside> 📄 웹 프로그래밍

• 처음 제공해드린 data.json에 추가적으로 데이터를 모델링하여 주세요.

• 코드의 일관성, 가독성, 함수 분리, 폴더 구조 설계, 코드 품질 등을 기준으로 세부적인 평가가 이루어 집니다.

• json-server를 사용하여 서버를 구동 하며 해당 사이트에서 제공된 API 명세서를 따릅니다.

  GitHub - typicode/json-server: Get a full fake REST API with zero coding in less than 30 seconds (seriously)

• README.md 파일은 꼭 작성해주세요. 팀원 소개와 프로젝트의 소개 등 자유롭게 작성해주시면 됩니다.

• 가능하다면 함수 중심으로 프로그래밍 하여 개발해주세요. </aside>

<aside> 🔴 웹 프로그래밍

• [x] 처음 제공해드린 data.json에 추가적으로 데이터를 모델링하여 주세요.
• [ ] 시도 코드의 일관성, 가독성, 함수 분리, 폴더 구조 설계, 코드 품질
• [x] json-server를 사용하여 서버를 구동 하며 해당 사이트에서 제공된 API 명세서를 따릅니다.
• [x] README.md 파일은 꼭 작성해주세요. 팀원 소개와 프로젝트의 소개 등 자유롭게 작성해주시면 됩니다.
• [ ] 시도 가능하다면 함수 중심으로 프로그래밍 하여 개발해주세요. </aside>

<aside> 📄 메인 페이지 요구사항

• swiper.js를 사용해주세요.
  • 각 슬라이드를 데이터로 받아 동적으로 렌더링 되도록 만들어주세요.
  • 슬라이드의 prev, next 버튼도 구현해주세요.
  • 키보드 키로도 작동되도록 구현해주세요.
• localStorage를 사용하여 “시청 중인 컨텐츠 / 최근 본 항목”의 UI를 구성해주세요.
• “마이크로 애니메이션”이 필요하다면 추가해주세요.
• “회원가입 기능”을 구현해주세요.
  • 최소한 이메일, 비밀번호 입력 필드(input), 제출 버튼(button)을 가지도록 구성해주세요.
• 이메일과 비밀번호의 유효성을 확인합니다.
  • 이메일 조건 : 최소 @, . 포함
  • 비밀번호 조건 : 8자 이상 입력
  • 이메일과 비밀번호가 모두 입력되어 있고, 조건을 만족해야 제출 버튼이 활성화 되도록 구현해주세요.
• 회원가입을 통해 사용자(user)를 생성하고 관리합니다. </aside>

<aside> 🔴 메인페이지 요구사항은 백로그에 있음

</aside>