이번에는 실제 웹 서비스를 하나 골라서 재사용 컴퍼넌트는 어떤 게 있는지, 레이아웃은 어떻게 분리되어 있는지 알아보려고 합니다.
1. 재사용 컴퍼넌트 & 레이아웃
그렇다면 재사용 컴퍼넌트는 무엇이고, 레이아웃은 무엇일까요?
재사용 컴포넌트
서비스 전반에 계속적으로 등장하는 UI.
스타일이나 기능은 같지만 데이터나 이미지만 달라짐.
->말 그대로 재사용되는 UI 조각.
레이아웃
화면 전체 구조를 정의하는 틀.
헤더(Header), 사이드바(Sidebar), 메인 콘텐츠(Main), 푸터(Footer) 등.
->웹 페이지의 전체적인 틀과 구조(뼈대).
2. 웹 서비스 선정
저는 "핀비츠(Finviz)"라고 하는 웹사이트를 골라보았습니다.
🔗핀비츠(Finviz)
해외 주식 차트를 한 눈에 볼 수 있는 사이트라 많은 사람들이 이용하는 사이트인데요. 아래 이미지를 보시면 아마 익숙하실거라 생각합니다!
(아래 이미지는 S&P 500 기업들을 모아둔 MAP 입니다.)
메인 화면은 아래와 같습니다.
3. 컴포넌트와 레이아웃 알아보기
우선 레이아웃으로 웹사이트 전체적인 틀을 한 번 알아보았습니다.
로고, 네비게이션 바, 하단 이렇게 3가지를 살펴보았습니다.
가장 먼저 위 사진은 Header 레이아웃 요소(로고)입니다. 모든 페이지에 공통적으로 존재하며 홈화면으로 이동할 수 있도록 합니다.
다음은 네비게이션 바 레이아웃 요소입니다. 로고와 마찬가지로 사이트에 공통적으로 존재합니다.
그 중에서도 Home 버튼을 보면 nav라고 적혀있는 것을 확인할 수 있었습니다! is-active, is-first 라고 적혀있는 것은 순서대로 현재 활성화되어 있고, 메뉴 중에서 첫번째 요소라는 뜻이라고 합니다.
핀비츠 사이트는 사이드바가 존재하지 않기 때문에 마지막으로 footer 요소에 대해서 찾아보았습니다. 커서를 가져가니 footer라고 적혀있는 것을 볼 수 있었습니다. 이 또한 모든 페이지 하단에 공통적으로 존재하며 저작권, 하단 정보 등의 내용을 보여줍니다.
이제 재사용 컴포넌트에 대해 알아보도록 하겠습니다.
먼저 특정 주식 시장의 전체적인 흐름을 보여주는 주가 지수들에 대한 차트를 보면, 상단에 차트 preview 요소가 재사용되고 있는 것을 볼 수 있습니다. 클릭했을 때 뜨는 상세 차트 내용 또한 같은 틀이지만 데이터만 달라지는 것을 확인할 수 있었습니다.
주가 지수 차트 뿐 아니라 개별 종목에 대한 차트 또한 같은 틀을 가져가되, 상세 데이터(차트 등)만 달라지는 것을 확인할 수 있었습니다.
이 외에도 네트워크 탭을 클릭하면 웹사이트와 서버가 주고받은 네트워크 요청들을 볼 수 있습니다. 어떤 요청이 오갔는지, 응답에 성공했는지, 요청이 얼마나 걸렸는지 등의 정보를 확인할 수 있습니다.
(~사실 이 부분은 아직 공부가 많이 필요할 것 같습니다! 봐도 잘 모르겠더라구요 ㅎㅎ..~)
4. 알아두면 좋을 HTML 태그
개발자 도구를 통해 이것저것 확인해보았는데요,
찾아보니 a, div, strong, span, p, h1 등 앞에 붙는 알파벳들이 달라지는 것을 보았습니다. 궁금해서 찾아보니 html 태그라고 하여 제가 찾아본 사이트에서 등장한 태그들 위주로 정리를 해보았습니다!
1주차 교안 참고 내용으로 첨부되어 있는 블로그에 예시와 함께 잘 설명되어 있네요!
🔗HTML 기초 태그 및 css 지식
| 태그 | 의미 / 역할 | 쓰임새 |
|---|---|---|
<div> | division (구역 나누기) | 레이아웃과 박스 구조를 만들 때 가장 많이 씀 |
<span> | 작은 구간(인라인 영역) | 텍스트 중 일부만 스타일 줄 때 (ex. 글자색 바꾸기) |
<p> | paragraph (문단) | 본문 텍스트 문단 |
<h1> ~ <h6> | heading (제목) | 글의 제목. h1이 가장 큰 제목, h6이 가장 작은 제목 |
<a> | anchor (링크) | 다른 페이지/위치로 이동하는 링크 |
<td> | table data | 표의 한 칸(셀) |
<tr> | table row | 표의 한 행(줄) |
<canvas> | 캔버스 | 차트, 그래프, 그림 등을 그릴 때 |
<strong> | 중요 표시 | 글씨를 강조 (보통 굵게 나옴, 의미상 "중요") |
<b> | bold | 단순히 글자를 굵게 (의미는 없음) |
<small> | 작은 글씨 | 보조 텍스트나 부가 정보 표시 |
