웹 프론트엔드를 구성하는 3가지 언어는
Html, CSS, JavaScript 입니다.
이 세 가지 언어를 인체에 비유하면
Html은 뼈대를, CSS는 피부를, JavaScript는 근육과 신경계를 담당한다고 할 수 있습니다.
오늘 분석할 프로덕트로
익숙하되 지나치게 복잡하지 않은 UI 디자인을 가졌으며 인터렉션이 매끄러운 서비스를 생각하다가
선정한 프로덕트는 바로 카카오 홈페이지입니다.
구체적인 서비스를 제공한다기보다는
카카오의 기술과 서비스를 안내하고
관련 보도자료를 업데이트하는 웹 페이지입니다.
https://www.kakaocorp.com/page/
Kakao
Connect Everything - 새로운 연결, 더 나은 세상
www.kakaocorp.com
Html
Html의 역할: 구조 만들기
- 콘텐츠의 레이아웃 제어
- 웹 페이지 디자인을 위한 구조 제공
- 모든 웹 페이지의 기본 빌딩 블록
카카오 홈페이지에 들어가면 다음과 같은 화면을 볼 수 있습니다.
구글 크롬을 이용하여 해당 페이지의 언어를 확인해보겠습니다.
크롬 창의 우측 상단에 위치한 햄버거 메뉴를 클릭하고
도구 더보기 -> 개발자 도구 를 클릭하여 개발자 도구 창을 열어보았습니다.
해당 창을 통해 카카오 홈 페이지의
DOCTYPE은 html인 것을 확인할 수 있습니다.
Html은 크게 웹 페이지의 정보를 포함하고 있는 <head> 부분과
화면에 직접 출력되는 부분인 <body>로 이뤄져 있습니다.
다음은 html의 <head> 부분을 삭제한 후 나타나는 화면입니다.
CSS가 사라져 hypertext만이 남아있는 것을 확인할 수 있습니다.
CSS
CSS의 역할: 웹사이트 스타일 지정
- 웹 페이지 요소에 스타일을 적용
- 웹 페이지를 반응형으로 만들기 위해 다양한 화면 크기를 대상으로 함
- 주로 웹 페이지의 모양과 느낌을 처리
카카오 웹 페이지의 CSS는
개발자 툴 중간의 styles를 보면 확인하실 수 있습니다.
해당 화면을 보면
font-size가 14px이며 line-height는 1.5인 것을 확인할 수 있습니다.
또한 font-family를 통해 해당 웹 페이지가 사용한 폰트를 찾을 수 있습니다.
이 외에도 CSS를 읽음으로써 배경 색과 마진 등의 디자인 요소를 파악할 수 있습니다.
또한, 개발자 도구 툴을 사용하여
Responsive Web의 특징에 따라
사용자의 기종마다 해당 화면이 어떻게 보일지,
원하는 기종과 가로/세로를 선택하며 확인할 수 있습니다.
카카오 웹 페이지의 경우 일정 수준으로 화면의 가로가 줄어들었을 때
화면 상단의 헤더가 귀여운 햄버거 아이콘으로 변하고
콘텐츠가 일렬로 나열되는 것을 확인할 수 있습니다.
JavaScript
JavaScript의 역할: 상호 작용 증가
- 웹 페이지에 상호 작용 추가
- 복잡한 기능 및 기능 처리
- 기능을 향상시키는 프로그래밍 코드
개발자 도구 창에서 Settings -> Preferences로 들어가
Debugger에 있는 Disable JavaScript를 클릭해보겠습니다.
Disable JavaScript를 했음에도 불구하고
웹 페이지 자체는 큰 변화가 없어 보였습니다.
하지만 해당 화면에서 다른 화면으로 연결되어 있는 버튼을 클릭하자
'이 페이지를 실행하려면 자바스크립트를 사용해야 합니다' 라는 문구와 함께
빈 페이지만 볼 수 있었습니다.
이외에도 상단의 헤더에서
달 모양 아이콘을 클릭하면 나이트 모드로 전환되던 화면이
Disable JavaScript하자 아이콘을 눌러도
아무 변화가 나타나지 않음을 확인할 수 있었습니다.
이를 통해 하나의 웹 페이지가 정상적으로 기능하기 위해서는
Html, CSS, JavaScript 모두가 완벽하게 구현되어야 함을 알 수 있었습니다.
'Daily JennPM' 카테고리의 다른 글
| [W7D3] 카카오의 Open API 살펴보기 - 코드스테이츠 PMB 11기 (0) | 2022.04.27 |
|---|---|
| [W7D2] 하이브리드 앱 / 네이티브 앱 / 모바일 웹 / 웹 앱 비교하기 - 코드스테이츠 PMB 11기 (0) | 2022.04.26 |
| [W6D4] Coursera에 대한 가설을 데이터로 증명해보자 - 코드스테이츠 PMB 11기 (0) | 2022.04.21 |
| [W6D3] 커리어리를 린 분석해보자 - 코드스테이츠 PMB 11기 (0) | 2022.04.20 |
| [W6D2] 미리캔버스의 핵심기능과 관련된 지표를 살표보자 (ft. GA) - 코드스테이츠 PMB 11기 (0) | 2022.04.19 |
