Nike Website Clone - 프론트엔드 클론 프로젝트

프로젝트 개요

air는 나이키 공식 웹사이트를 최대한 원본과 유사하게 재현한 프론트엔드 클론 프로젝트입니다.

실제 서비스 수준의 UI/UX를 HTML과 CSS만으로 구현하며, 다양한 페이지 레이아웃과 반응형 디자인을 통해 프론트엔드 기초 역량을 강화하는 것을 목표로 합니다.

핵심 가치

• 🎨 픽셀 퍼펙트 구현: 원본 디자인을 최대한 정확하게 재현
• 📱 반응형 웹 디자인: 다양한 화면 크기에 대응하는 레이아웃
• 🔗 페이지 간 연결: 실제 쇼핑몰처럼 자연스러운 페이지 흐름
• 🤝 체계적인 협업: Git Flow 기반 브랜치 전략 및 코드 리뷰

주요 기능

1. 메인 웰컴 페이지

• 나이키 브랜드 이미지를 강조한 히어로 섹션
• 주요 상품 카테고리 및 프로모션 배너
• 반응형 레이아웃으로 모바일 대응

2. 상품 리스트 페이지

• 그리드 레이아웃 기반 상품 목록 표시
• 필터링 및 정렬 UI 구현
• 상품 카드 호버 효과 및 인터랙션

3. 상품 상세 페이지

• 상품 이미지 갤러리 및 확대 기능
• 사이즈 선택 및 수량 조절 UI
• 장바구니 추가 버튼 및 구매 플로우 연결

4. 로그인 페이지

• 이메일/비밀번호 입력 폼
• 소셜 로그인 버튼 (UI만 구현)
• 회원가입 페이지 연결

5. 비회원 결제 페이지

• 배송지 정보 입력 폼
• 결제 수단 선택 UI
• 주문 요약 및 최종 결제 버튼

6. 공통 컴포넌트

• Header: 로고, 네비게이션 메뉴, 검색창, 장바구니 아이콘
• Footer: 회사 정보, 고객 지원, SNS 링크

사용 기술

Frontend

• 언어: HTML5, CSS3
• 레이아웃: Flexbox, CSS Grid
• 반응형: Media Query

Tools & Collaboration

• Version Control: Git, GitHub
• Deployment: GitHub Pages
• Communication: Discord, 일일 회의

담당 역할

이 프로젝트에서 저는 팀원으로서 다음과 같은 역할을 수행했습니다:

상품 상세 페이지 개발

• HTML 구조 설계: 상품 이미지, 정보, 옵션 선택 영역 마크업
• CSS 스타일링:
  • 상품 이미지 갤러리 레이아웃 (Grid 활용)
  • 사이즈 선택 버튼 인터랙티브 UI
  • 수량 조절 컴포넌트 스타일링
  • 장바구니/구매 버튼 호버 효과
• 반응형 구현: 모바일 화면에서 이미지와 정보 영역 수직 배치

페이지 연결 및 통합

• 상품 리스트에서 상세 페이지로 이동하는 링크 설정
• 장바구니 버튼 클릭 시 결제 페이지 연결
• 공통 Header/Footer 통합 및 일관성 유지

코드 품질 관리

• HTML/CSS 코드 리팩토링 및 구조 정리
• 불필요한 중복 스타일 제거
• 클래스명 및 ID 네이밍 컨벤션 정리

트러블슈팅

문제 1: .idea 설정 충돌 이슈

문제 상황: main 브랜치에 IntelliJ IDEA 설정 폴더(.idea/)가 포함되어 푸시되면서 팀원 간 설정 충돌 발생

해결 과정:

1. .gitignore 파일에 .idea/ 디렉토리 추가
2. Git 캐시에서 .idea/ 폴더 제거
3. 팀원들에게 최신 .gitignore 기준으로 재 pull 요청

결과: 개발 환경 설정 충돌 해결 및 불필요한 파일 추적 방지

문제 2: width: 100vw로 인한 가로 스크롤 이슈

문제 상황: 모든 페이지 하단에 불필요한 가로 스크롤바가 생성되어 사용자 경험 저하

해결 과정:

1. 브라우저 개발자 도구로 스크롤 원인 추적
2. reset.css의 body { width: 100vw; } 속성 발견
3. 100vw는 스크롤바 너비를 포함하여 뷰포트를 초과함을 확인
4. width: 100vw; 속성 제거 후 정상 작동 확인

결과: 가로 스크롤 문제 완전 해결 및 팀 전체 학습 효과

문제 3: 상품 이미지 갤러리 레이아웃 깨짐

문제 상황: 상품 상세 페이지의 이미지 갤러리가 특정 화면 크기에서 레이아웃이 틀어지는 현상

해결 과정:

1. Flexbox에서 CSS Grid로 레이아웃 방식 변경
2. grid-template-columns로 반응형 컬럼 수 조정
3. 미디어 쿼리로 모바일/태블릿/데스크톱 브레이크포인트 설정

결과: 모든 화면 크기에서 일관된 갤러리 레이아웃 제공

성과 및 배운 점

기술적 성과

• HTML 시맨틱 태그를 활용한 구조적이고 의미 있는 마크업
• CSS Grid와 Flexbox를 활용한 정교한 레이아웃 구성
• 반응형 웹 디자인 원칙에 따른 다양한 화면 크기 대응

협업 및 커뮤니케이션

• Git과 GitHub를 활용한 효과적인 버전 관리 및 협업
• Discord를 통한 원활한 팀 내 커뮤니케이션
• 일일 회의를 통한 진행 상황 공유 및 문제 해결

문제 해결 능력

• 트러블슈팅 과정을 통한 문제 분석 및 해결 능력 강화
• 코드 품질 향상을 위한 지속적인 리팩토링 경험
• 다양한 브라우저 및 디바이스에서의 호환성 테스트 경험

결론

air 프로젝트는 단순한 클론 코딩을 넘어, 실제 서비스에 버금가는 품질의 웹사이트를 제작하는 도전이었습니다. 픽셀 퍼펙트 구현, 반응형 웹 디자인, 페이지 간 자연스러운 연결, 그리고 Git Flow 기반의 체계적인 협업 과정을 통해 프론트엔드 개발자로서의 역량을 한층 더 강화할 수 있었습니다.

앞으로도 이러한 경험을 바탕으로 더 나은 개발자가 되기 위해 지속적으로 학습하고 성장해 나가겠습니다.