1. HTML 뜯어보기
<HEAD>
HTML의 구조는 크게 <html>태그로 감싸져있고, 그 안에 <head>와 <body>태그로 감싸져 있다. 일반적으로 <head>안의 태그들은 사용자가 웹 브라우저에 접속했을 때 보이지는 않는다. 유일하게 표시되는 부분은 <title>이다. <title> 안에 적힌 텍스트가 탭 제목으로 표시된다.
<head> 태그에는 <title>태그 외에도 <meta>와 <script>가 있다. <meta> 태그에는 charset 인코딩이나 검색 엔진 최적화 (SEO)를 위한 discription, name 속성과 같은 데이터 정보가 담긴다. <script>태그와 <style> 태그를 사용해 js와 css 파일을 연결한다. 메인 html 파일에 css와 js를 함께 작성할 수도 있지만, 코드가 길고 복잡해지기 때문에 링크로 연결해 사용한다.
<body>
문서의 몸통이라고 생각하면 된다. HTML 문서의 텍스트, 하이퍼링크, 이미지, 리스트 등과 같은 모든 콘텐츠를 포함하는 영역을 정의한다.
아래 사진은 집꾸미기 홈페이지에 접속했을 때 가장 처음 보이는 화면이다. 집꾸미기의 랜딩 화면을 개발자 도구로 살펴봤다. 모두 div 박스로 싸져있었다. 페이지가 연결되는 부분이 아이콘인 경우에는 img 태그 속성을 사용하고, 텍스트인 경우에는 a 태그를 사용해 페이지가 이동될 수 있도록 설정된 걸 볼 수 있었다.
메인 화면 (상단배너 영역 + nav 영역 + 메인 배너 영역)
아래는 비슷한 구조로 이뤄져있어서 첫 화면에 보이는 부분만 분석했다.
(1번) 배너 div
(2번)
크게 로 div와 nav div로 나눠져있었다. nav div는 또 다시 메뉴부분과 right 부분으로 나눠져있었다. 카테고리 안에 메뉴는 ul, li 태그로 감싸져있었다.
(3번) 배너 이미지 슬라이드 쇼가 div로 묶여있었다.
(4번) text 부분과 아이콘 영역으로 나눠져있었다. [이웃집들이] [베스트] [투데이특가] [공간별사진]은 span 태그를 사용해 수평으로 나열되도록 했다.
푸터
푸터(Footer) 섹션은 문서로 치면 꼬리말 영역이다. 사용자가 탐색 과정에서 확인하지 못한 내용을 다시 한 번 확인할 수 있도록 도와주는 역할을 한다.
<footer> 태그를 사용하지 않고 div 태그를 사용한 걸 볼 수 있었다. 다른 페이지로 이동하는 부분은 a태그로, 텍스트 부분은 p 태그로 묶여있었다.
2. CSS 뜯어보기
웹 페이지의 기본 뼈대를 세우는 html 마크업를 하고 나면, CSS를 설정해 스타일을 준다. 세부적인 css를 개발자 도구로 뜯어볼 수는 없지만, 대략적으로 알 수 있다.
모든 태그 (*)
*은 모든 태그를 지정할 때 쓴다. margin과 padding 을 0으로 주어 각각의 자식 태그에서 설정할 수 있도록 했다.
div 태그
모든 div 태그는 display block으로 설정했다. 요소를 block으로 표시해 요소 앞뒤로 줄바꿈이 될 수 있도록 설정했다. div 태그는 block 요소로 이뤄져있지만, 자식에서 세부 정렬을 설정하기 위해 명시한 것으로 보인다.
body
폰트는 'Spoqa Han Sans를 사용했고, 폰트 사이즈는 14px를 기본으로 설정한 것을 알 수 있었다. 폰트의 색은 완전한 검정 (#111)이 아닌 #333를 사용했다. 눈의 피로도를 줄이고 가독성을 위한 것으로 생각된다.
3. JS
JS 웹 페이지의 활력을 주는 역할을 한다. JS를 작성할 때 콘솔에 로그로 표시되는 걸 보면 어떤 동작이 잘못됐는지, 혹은 잘 동작하고 있는지 알 수 있다. 그래서 한번 확인하기 위해 콘솔창을 켰는데, 이렇게 구인공고가 떠있었다. 개발자도구를 열었다는 것은 보통 클론 코딩을 할 때 열어보는데 그걸 노리고 구인공고를 심어둔게 아닐까 하는 생각이 들었다.
대부분의 움직이는 동작에는 js가 적용이 되어 있다. 이외에도 수 많은 동작들이 있겠지만, 몇 개만 뜯어보고자 한다.
1. 풀다운 메뉴
위의 html 구조에서 카테고리의 메뉴는 ul 태그를 사용했음을 확인할 수 있었다. 첫번째 사진과 같이 원래 ul 태그의 기본 설정은 아주 못생겼다. css 설정만으로도 풀다운 메뉴를 설정할 수 있지만, 마우스 hover를 했을 때와 여러 설정을 하기 위해서는 js로 사용하지 않았을까 하는 생각이 들었다.
2. 메인 배너 롤링
메인 배너가 자동으로 돌아가는 걸 볼 수 있다. 다음 이미지로 넘어가는 시간과 전환 효과를 js로 설정할 수 있다.
3. 리스트 반복
집꾸미기 best 30 제품의 리스트를 보여준다. 1위부터 30위까지 같은 구조가 반복된다. for each문으로 하나의 구조를 30개 반복해 설정했을 것으로 추측된다.
클론 코딩을 몇번 해봤지만 코딩을 해보지 않고 뜯어보려니 어디서 부터 해야할지 감이 잡히지 않아 글을 작성하는데 오래 걸렸다. html 마크업을 직접 해보다가 너무 오래 시간이 걸릴 것 같아 전체적인 구조를 살펴보고 핵심 기능만 분석해보았다.
'IT 이야기 > 내가 PM이라면' 카테고리의 다른 글
| API가 도대체 뭔데? - API 쉽게 이해하기 (0) | 2022.03.10 |
|---|---|
| 앱의 형태 쉽게 이해하기 - 모바일 웹, 웹 앱, 하이브리드 앱, 네이티브 앱 (0) | 2022.03.08 |
| 데이트립을 린 분석 방법론으로 살펴보기 (0) | 2022.02.28 |
| 고객 분석 도구 GA 알아보기 (0) | 2022.02.27 |
| 마켓컬리 사례로 프로덕트의 개발적인 측면 살펴보기 (0) | 2022.02.24 |