서핏의 백스테이지 뜯어보기
[코드스테이츠 PMB 12] 매일 성장하는 사람들의 커리어플랫폼, 서핏
부트캠프를 수강하면서 우연한 기회로 내 글이 외부에 노출되게 되었다. 바로 서핏. 다양한 분야의 글들이 있어서 크롬의 첫 화면으로 설정해두었다. 매일 자정이면 새로운 글들이 추가가 되는데, 세상에는 공부할 내용이 참 많다고 느꼈다. 오늘의 과제인 웹 기반 서비스의 랜딩 페이지를 분석을 서핏의 랜딩 페이지(메인 페이지)를 대상으로 진행해보고자 한다.
1. 화면의 구성 요소들은 어떻게 배치되어 있는가 (HTML요소)
HTML이란?
- 신체로 치자면 뼈대, 신체 골격의 역할을 수행
- 웹에서 웹 페이지 디자인 구조를 만들고 컨텐츠의 레이아웃 만듦
- 문서 중간에 클릭하면 다른 문서로 이동되게 서로 연결해주는 역할
각 페이지의 '개발자 도구'에서 html을 살펴볼 수 있다. (원한다면 모바일 버전으로도 확인 가능하다) 오늘은 웹 페이지 기준, 전체 화면 기준으로 보려고 한다. 우선 랜딩페이지를 이등분 하면 head와 body로 나눠서 볼 수 있다.
그 중에서도 head를 뜯어보면 좌측의 global menu와 우측의 sub menu로 구분되어 있는 것을 확인할 수 있다. 이 menu단위도 더 세분화할 수 있는데, 좌측의 로고와 세부 메뉴, 우측에도 세부 메뉴와 어카운트로 구분해볼 수 있다.
body를 뜯어보면 크게 이등분해서 볼 수 있다. 전체화면 기준 좌측이 nav area, 우측이 content area다. 만약 화면을 조금 줄이게 되면 nav가 상단으로, content가 하단에 위치하는 걸 볼 수 있다.
서핏의 가장 핵심 자산인 콘텐츠들은 각 카드가 item으로 구성되어 item의 head, footer로 이등분해서 볼 수 있다.
더 뜯어보면 image, title, text, tag, channel info로 한개의 아이템이 구성되어 있는 것을 확인할 수 있다. 어떤 식으로 노출시킬지에 대해서도 서핏에서 고민이 많았을 것으로 생각된다. 최근에는 콘텐츠 영역 내에 채용 공고 및 서비스 광고 노출 페이지가 늘어가면서 비즈니스 모델에 대하여 고민하고 있다는 흔적을 느낄 수 있었다.
2. 각 구성요소들이 어떠한 모양을 하고 있는지 스타일 정리 (CSS요소)
CSS란?
- 신체로 치자면 피부, 외형으로 비유 가능
- 웹에서 스타일과 보이는 요소 개발할때 사용
- 화면이 어떻게 보일지, 구조, 색상, 디자인을 다루는 언어
- html자체로는 한계가 있어서, 디자인 전용 언어를 만드는 역할
css도 개발자 도구에서 확인할 수 있다. 수 많은 영역 중 바디 영역의 css를 살펴보자면 아래와 같다. 커서를 가져다대면 체크박스가 노출되면서 on/off를 해볼 수 있는데 폰트의 크기, 두께, 줄 간격 등이 바뀌는 걸 실시간으로 확인해볼 수 있다.
심심하면 클릭해보자. 물론 개발자 도구에서 :93. 각 구성 요소들이 가지고 있는 특정 동작이 무엇인지 정리 (Javascript)
JS(Javascript)란?
- 웹 개발에서 처음부터 많이 쓰인 언어
- 신체로 치자면 근육, 신경계. 혈액순환 처럼 웹페이지의 상호작용 담당
- html, css에서 개발된 기능을 서로 유기적으로 연결해줌
자바스크립으를 찾기 위해선 개발자 도구 속 <script> 를 찾아야 한다. 하지만 이동하는 형태는 찾지 못해서 아쉬웠다. 현재 버전과 호스트, 제이슨 파일만 알 수 있는걸까..? 이부분에 관해서는 의문이 든다.
마지막으로 숨겨진 서핏의 코드를 올린다. 사실 이거 때문에 서핏을 이번 주제로 고른건 비밀! 저 링크를 눌러보게 되는건 인간의 본능이라고 생각한다.
#코드스테이츠 #PM부트캠프
