HTML/CSS로 만드는 Apple 사이트

Flamozzi·2023년 8월 7일

Apple CSS front end html 프론트엔드

Y_FE (야놀자 테크스쿨)

목록 보기

1/2

DEMO 및 사이트 링크

제작한 클론 Apple 사이트 링크

실제 Apple 공식 사이트 링크

본 프로젝트는 야놀자 테크스쿨에서 진행되는 HTML/CSS 과제를 위한 Apple 공식 사이트 클론 프로젝트입니다.
저작권 등의 이유로 영상 및 이미지, 폰트가 다른 미디어 파일로 대체되거나 약간의 차이가 발생할 수 있습니다.

본 프로젝트는 모바일과 같은 다양한 브라우저 사이즈에 대한 대응은 현재 지원되지 않습니다. 3440x1440의 해상도를 기준으로 작업하였으니 참고해주시면 감사하겠습니다.

프로젝트 Info

프로젝트 목표

Y_FE ParkJisung(flamozzi) Apple 공식 사이트 클론

프로젝트 기간

2023년 07월 24일 ~ 2022년 07월 28일

실제 페이지와 다른(혹은 다를 수 있는) 점

세부 폰트 및 사이즈
모바일 웹 환경 등 브라우저 크기에 의한 동적 사이즈 변경 미고려
2번에 의한 레이아웃의 세부 사이즈
상단 뉴진스 아이폰 홍보 영상 (같은 뉴진스 ETA MV지만 다른 애플 공식 영상 사용)
Header Navi list의 드랍 다운 메뉴 느낌의 애니메이션 효과를 제거함

Section별 구현사항

favicon은 ico 파일의 화질 저하 및 캐싱에 의존하지 않기 위해 png 파일로 따로 지정
fixed 되어있는 header Nav List
Nav List와 같은 사이즈로 통일감을 주는 Trade In Banner Section
Apple 공식사이트의 경우 스크롤바를 default: none으로 가져가기 때문에 본 프로젝트에서도 스크롤바 기능은 유지하면서 눈에는 안보이게 처리함

header nav-list 드롭 다운 메뉴
실제 공식 사이트와 마찬가지로 Apple logo, Search, Bag icon을 제외한 나머지 Navi Item들이 hover될 경우 드롭다운 메뉴 활성화

hover되지 않은 default 상태의 header navi bar의 색상은 rgba(0, 0, 0, 0.8)이기 때문에 투명도를 가질 수 있음. 하지만, 각 nav list item을 통해 드롭 다운 메뉴 뿐만 아니라 header bar의 색상 또한 함께 변경하기 위해서는 css 만으로는 자식 요소가 부모 요소의 컨트롤을 할 수 없기 때문에 javascript를 사용하여 컨트롤
hover 활성화시 opacity를 컨트롤하여 rgba(0, 0, 0, 1) 색상으로 변경 및 mouseleave를 감지하여 원래 색상인 rgba(0, 0, 0, 0.8)로 변경 및 드롭다운 메뉴 비활성화 가능

Youtube Video Section

Youtube 영상을 Visual Section처럼 사용하기 위하여 javascript로 Youtube Iframe API를 비동기로 로드
각종 js 내부의 옵션 및 css 스타일 컨트롤을 통해 자연스럽게 반복재생 되는 Youtube Section 완성

Hero iPhone & Hero Macbook Section

각 제품에 대한 Hero Section
Hero Section 배경 이미지의 어두움의 정도에 따라 미세하게 font color를 조정하여 시인성을 높임
a 태그의 decoration 및 hover 옵션 조정
cursor pointer 옵션등을 통해 clickable한 section이라는 것을 명시

Products Grid Section

작은 Hero Section들을 감각적으로 2*3의 Grid Section으로 표현
Grid 내부의 Gap이 커지는 등의 버그를 픽스하기 위해 css 내부에서 calc()를 사용하여 세부 사이즈 조정
Hero Section과 마찬가지로 배경 이미지의 어두움으 정도에 따라 다른 font color 적용 및 clickable 옵션 적용

Apple tv + Section

Swiper를 사용하여 Apple tv+의 홍보 Section 완성

모바일과 같은 작은 화면의 동적 대응은 현재 지원하지 않기 때문에 현재는 위와 같은 옵션을 사용
pagination bullet 클릭시 loop가 작동 중지되는 버그를 픽스하기 위하여 disableOnInteraction 옵션을 false로 명시

Footer의 Copyright 년도 자동 업데이트를 위해 js 사용
Logic적으로는 header의 드롭다운 메뉴와 비슷한 방식을 채용
css 스타일 조정을 통해 드롭다운 메뉴와는 전혀 다른 느낌으로 보일 수 있도록 함

과제 후기

iOS 개발만을 해오던 내게 웹 프론트 개발은 익숙하면서도 어색한 작업이었다.
기본적으로 UI 및 로직을 구성하는 기본적인 매커니즘은 유사했다. iOS 개발에 비해 웹 개발은 매우 자유로우면서도 한편으로는 숙련도의 탓인지 아직은 불안하다는 생각이 들기도 했다.
웹 개발의 경우 상당한 수준의 자유도를 준다. 단순히 문법적인 부분에서도 굉장히 자유도가 높으며, 라이브러리 사용에서도 Swift와는 비교도 안될정도로 많은 라이브러리와 웹 기술들이 존재한다. iOS를 개발하면서 주로 import하게 되는 라이브러리 혹은 패키지는 네트워크 처리를 위한 Alamofire, 이미지 처리를 위한 Kingfisher 등이 있으며 그 외에는 기본적으로 제공하는 라이브러리가 체계적으로 잘 되어있기 때문에 외부 라이브러리 의존도가 높지는 않다.
하지만 웹 개발의 경우 gsap, swiper, 각종 style 라이브러리 등 이런저런 라이브러리의 역할들이 매우 핵심적으로 작용한다. 여기서 자유로움을 느꼈지만, 아직까지는 머릿속에서 정리하려면 숙련도가 더 필요하겠다는 생각이 들었다.
또한 Swift의 경우 매우 엄격하게 타입 규칙을 적용하기 때문에 컴파일 타임에서 어지간한 오류를 모두 해결할 수 있다. 하지만, JS의 경우 타입이라는 개념 자체가 매우 약하거나 거의 없다. TypeScript로 가면 이 문제가 해결될 수 있을 거 같긴 하다.

이번 과제는 약간의 JS 로직을 제외하고는 거의 바닐라 HTML/CSS로 제작되었다. 실제 서비스를 개발하다보면 최신 기술들을 선별하여 작업하게 된다. 지금까지 사이드 프로젝트도 대부분 그렇다.
하지만 이번 기회를 통해 실제 서비스가 아닌, 정말 '학습' 목적의 개발을 한 듯한 기분이 든다.
바닐라로 깊게 공부해보는 경험이 분명 추후에 다양한 프레임워크를 사용하여 개발할 때 도움이 될 것이라고 생각한다.

리팩토링: Github PR 피드백 및 수정 사항

이하는 PR의 피드백을 기반으로 리팩토링한 수정 사항이다.

변수 선언 및 할당: var const let

아직은 JS 문법에 익숙하지 않아서 변수 선언을 할 때 가끔씩 var를 혼용해서 사용했었다. 하지만 개정 JS에서는 let 혹은 const를 사용하는 것을 권장한다. 내 JS 로직에서 해당 부분은 재할당 등이 필요하지 않기 때문에 const를 사용하면 된다. 따라서 다음과 같이 수정했다.

Swiper pagination bullets 위치 문제

리팩토링 전 내 코드에서는 swiper pagination bullet을 이미지와 겹치지 않게 만드려고 했지만, margin으로 처리하려고 해서 그런지 의도대로 잘 처리되지 않았다. 피드백에 따라 다음과 같이 padding 값을 통해 문제를 해결 및 적용을 완료하였다.

리팩토링 이전 내 작업물에서는 화면 크기를 줄였을때 다음과 같이 헤더 네비 메뉴의 글자 정렬이 깨지는 문제가 발생했다. 따라서 멘토님의 피드백에 따라 white-space: nowrap 속성을 통해 문제를 해결 하였다.

기타 사항

이외에도 header menu hover 애니메이션이라던지 디바이스 크기에 따른 반응형 로직이라던지.. 여러가지 수정하고 싶은 사항이 있었으나, 멘토님의 의견에 따라 이는 리액트로 추후에 반응형 웹앱을 만들어보며 해보면 더 좋을 거 같다고 말씀해주셔서 이는 이후의 과제로 남겨두려고 한다. 좋은 공부가 된 과제였다. 다음 과제에는 JS 로직을 더 적극적으로 사용해보고자 한다.