Apple Developer 홈페이지 구조 살펴보기 | 코드스테이츠 PMB 13기
W7D1
프론트엔드 탐색하기
Apple Developer 랜딩페이지의 내용을 분석해봅시다.
- 화면의 구성 요소들을 이 어떻게 배치되어 있는지 구조를 정리해 분석해 봅니다.(HTML 요소)
- 각 구성요소들이 어떠한 모양을 하고 있는지 스타일을 정리해 분석해 봅니다.(CSS 요소)
- 각 구성요소들이 가지고 있는 특정한 동작이 무엇인지를 정리해 분석해 봅니다.(JavaScript 요소)
오늘 살펴볼 프로덕트로 Apple Developer 웹 페이지를 선택해봤습니다. 별다른 이유는 없고 북마크해둔 페이지들 중 구조가 제일 간단해보여서 골랐습니다. 선택한 페이지가 어떤 구조와 속성을 가지고 있는지 대략적으로 알아보도록 하겠습니다. 태그 정보는 그때그때 구글링을 통해 알아보았습니다. 🔍
1. 화면 구성요소의 배치
화면은 크게 탐색탭, 메인페이지, 하단 탭으로 구성되어 있습니다. 탐색탭 부분은 로고 아이콘과와 각 세부 카테고리로 이동할 수 있는 텍스트 아이콘으로 구성되어 있습니다. 그 아래 메인 바디에는 나중에 다시 언급하겠지만 5개의 섹션으로 구분되어있었습니다. 이슈의 중요도, 콘텐츠 내용의 특징에 따라 순서 및 크기가 구분되는 것으로 보입니다. 이미지 위주의 메인페이지를 지나면 하단에는 텍스트와 아이콘 위주의 세부 카테고리 영역이 보입니다. 영역은 아이콘과 텍스트로 이뤄진 상단과 텍스트 아이콘으로만 이뤄진 하단 부분으로 구분되고 있습니다.
(아래 이미지 참조) 탐색탭은 빨간색 박스 안에 들어있는 코드로 구현된 것을 확인할 수 있습니다. 그 위의 파란색 박스 안의 코드는 웹페이지 안에 해당되는 영역이 안 떠서 처음에는 당황했습니다. 그런데 코드 내용을 자세히 살펴보니 언어와 체크박스를 언급하고 있었습니다. 접속 초반에 언어 설정과 관련된 팝업창을 보여주도록 하는 것 같았습니다. 다시 탐색탭으로 돌아와서, 빨간색 박스 안의 코드를 자세히 살펴보면 global이 적힌 것을 볼 수 있습니다. 이를 통해 탐색 탭 영역은 어느 페이지에서도 동일하게 적용되는 양식임을 알 수 있습니다.
중간 메인 바디body는 1단과 2단이 섞여서 구성된 것을 볼 수 있습니다. 아래 사진과 같이 코드를 살펴보면 메인main 태그 안에 섹션 태그<section> </section>를 통해 영역을 구분한 것을 확인할 수 있습니다. main 태그 아래에는 aside 태그를 통해 부수적인 카테고리 탭을 구현하고 있습니다.
2. 화면 스타일링 요소
애플의 홈페이지는 글로벌 기업의 홈페이지답게(?) 매우 깔끔한 코드로 구성되어 있었습니다. CSS는 전부 외부 리소스를 불러와 적용하는 방식이었기 때문에, 구체적으로 어떤 서체를 어떤 사이즈와 간격으로 적용한 것인지는 알 수 없었습니다. 육안으로 살펴보면 텍스트의 경우 하나의 서체를 다양한 굵기와 크기로 적용해 깔끔한 분위기를 연출한 것을 확인할 수 있습니다. 웹사이트 서체로는 SF Pro KR이 적용된 것을 확인할 수 있었는데요, 찾아보니 맥에서 볼 경우 지원되는 서체라고 합니다.
텍스트 색상은 기본적으로 검정색이나 다른 페이지로 넘어가는 것을 암시하는 용도로 파란색을 사용하는 것을 확인할 수 있습니다.그 외에도 설정을 변경할 수 있는 부분에 대해서도 파란색 텍스트 또는 버튼으로 표시한 것을 확인할 수 있습니다. 이미지를 클릭하면 페이지가 넘어가는 것은 사용자가 직관적으로 받아들일 수 있지만 텍스트의 경우 사용자의 편의를 위해 시각적인 장치를 넣은 것이라고 생각합니다.
3. 화면 상호작용 요소
상호작용 요소라고 하니 맨 처음에는 '아이콘이나 이미지를 클릭하면 페이지 이동'만 떠올랐습니다. 그런데 좀 더 자세하게 보니 페이지가 넘어갈 수 있는 부분에 대해서는 텍스트 아래에 밑줄이 생기는 것을 볼 수 있었습니다. 이게 하이퍼링크처럼 마우스를 가져다대면 당연하게(?) 뜨는 건지 아니면 별도의 설정을 통해 티가 나게 하는 것인지는 모르겠지만 나름대로의 인터렉션 요소라고 생각해 포함해보았습니다.
+ head 안의 태그들 살펴보기
HTML의 두 영역인 head와 body 중 head안의 내용들은 실제 웹페이지 상에 구현되는 내용들은 아닙니다. 대신 메타데이터와 기본 환경설정에 대한 내용을 담고 있습니다. head안에 어떤 태그들이 들어있는지 대략적으로 살펴보겠습니다. (아래 이미지 확인) 이 글을 읽으시는 분들이라면 알고 계시겠지만 위에 적힌 내용들은 전부 body 태그 안에 들어있는 것들입니다.
정리하며
HTML의 모든 태그 지식을 까먹지 않고 계속 기억할 수 있다면 얼마나 좋을까..하는 생각이 들었습니다. 그리고 애플의 코드를 살펴보면서 잘 만들어진 스크립트가 읽기 얼마나 편한지 체감할 수 있었습니다. 티스토리 스킨 코드의 경우 모든 CSS요소가 그 안에 그대로 구현되어 있기 때문에 정말 더러운데 말입니다. 대신 그만큼 티스토리 스킨이 CSS, 자바스크립트 요소를 하나하나 대응시키면서 이해하기에 좋은 학습 재료인 것 같습니다. 언젠가는 날 잡고 웹페이지 구현 공부를 해보고 싶습니다. 제 꿈 중 하나가 나만의 홈페이지를 만드는 것이거든요. 그러면 오늘의 과제는 여기서 끝내도록 하겠습니다 😁
'부트 캠프 > 📓 Daily Tasks' 카테고리의 다른 글
| 카카오 Open API로 API의 기본을 알아보자! | 코드스테이츠 PMB 13기 (0) | 2022.08.10 |
|---|---|
| 웹과 앱의 종류와 특징을 알아보자 | 코드스테이츠 PMB 13기 (0) | 2022.08.10 |
| youpick = 🤍 유픽의 사업 단계와 전략 생각해보기 | 코드스테이츠 PMB 13기 (0) | 2022.08.06 |
| Bike Sharing Demand 데이터셋 파이썬으로 간단하게 살펴보기 | 코드스테이츠 PMB 13기 (0) | 2022.08.04 |
| 네이버웹툰의 핵심 지표를 GA를 통해 확인해보기 | 코드스테이츠 PMB 13기 (0) | 2022.08.03 |
