<텀블벅(tumblbug)>으로 Front end 이해하기 (Web) _코드스테이츠 PMB 11기| W7D1
선정 product: 텀블벅(tumblbug)
오늘도 어김없이 시작된 product 고민. 예전에도 언급한 부분이지만 지금은 배움의 과정이기에 최대한 다양한 서비스를 접하고 분석해 보고자 매번 다른 product를 선정하고자 노력하고 있다. 이제 7주차 쯤 되니 정말... 탈탈탈 다 털었다. 더군다나 이번 과제는 "웹"이 주제라 더더욱.. 난감했다. 그렇게 아무 생각 없이 쌓여있던 메일함을 정리하고 둘러보던 중 발견한..! 빛 같은 메일 하나를 발견했다🌟
매일 메일함에 쌓이는 메일의 양을 생각하면... 정말 많은 페이지를 거쳐갔다ㅋㅋㅋ 무려 3월 15일의 메일!ㅋㅋㅋ 내가 애정하고 사랑하는 <모퉁이 뜨개방>이라는 웹툰의 작가님의 게시글에 대한 알림이었다. 이번 과제와는 관련 없는 내용이지만 최근 <모퉁이 뜨개방> 게임이 출시되기도 했고, 웹툰도 너무 따스한 내용이라 항상 마음이 가는 콘텐츠이다. 자연스레 메일에 눈길이 가서 열어보았고, 이를 명분 삼아 오늘의 product는 "텀블벅(tumblbug)"으로 정했다.
텀블벅은 크라우드 펀딩을 위한 플랫폼으로, (내 기억이 맞다면) App 서비스를 비교적 늦게 출시했다. 경쟁사로 인식되는 와디즈(Wadiz)의 경우 웹과 앱 서비스를 거의 동시에 런칭했다고 보이는 반면, 더 널리 퍼져있던 텀블벅은 웹에 집중했다. 즉, 지금은 앱도 출시했지만, 웹을 오랫동안 유지한 product이기에! 웹 기반 서비스라 내 맘대로 간주해서 이번 과제를 진행하고자 한다:)
텀블벅(tumblbug)의 랜딩 페이지
이전의 랜딩 페이지 분석 과제 글에서 다룬 것처럼 "랜딩 페이지"를 먼저 정의하고 본격적으로 분석(?)을 시작하고자 한다. 이번 과제에서 내가 정의 내린 텀블벅의 랜딩 페이지는, "메인 홈페이지(Web)"이다. 포털에 '텀블벅'을 입력했을 때, 혹은 유저들이 URL을 직접 입력했을 때 당도할 수 있는 페이지로, 현재 진행 중인 다양한 프로모션과 프로젝트들이 노출되어 있다.
[코드스테이츠 PMB 11기] Front-end
과제 랜딩 페이지 분석 애플뮤직 https://www.apple.com/kr/apple-music/ 나는 평소에 음악 듣는 것을 아주...
blog.naver.com
과제 수행을 위해 +a로 공부(?)한 동기님의 글:) 동기님의 과제를 보고 어깨 너머로 배운 HTML, CSS, JS에 대한 지식을 바탕으로 과제...ㄱㄱ...
HEAD
우선 분석을 위해 살포시 열어본 코드 창... 생각보다 간결해 보인다-는 착각이다. 여기저기 붙어있는 ▶ 표시는 엄청난 양의 코드를 접어놓은 것(?). 조심스레 하나하나 뜯어보자:)
랜딩 페이지 코드의 최상단에 위치한 부분부터 html에 대한 정보를 엿볼 수 있다. <!DOCTYPE html>을 통해 아래의 코드가 html로 작성되었다는 것을 알 수 있다. 바로 아래에는 html의 언어 정보가 한국어라는 것을 나타내며, 본격적으로 <head> 아래에 html 내용이 담겨있다.
HTML
viewport: 반응형 웹이라는 것을 알 수 있는 코드. content의 내용을 보니 디바이스에 맞춰 화면을 적용시키라는 의미로... 추정 가능..
format-detection:자동 링크를 방지하고자 하는 코드로, 숫자를 전화번호로 자동 인식하는 경우를 막기 위한 코드이다. 뒤의 telephone=no라는 것을 통해 이를 허용하지 않는다는 것을 알 수 있다.
naver-site-verification: 검색 결과 네이버 포털 검색창에 노출되기 위한 html 코드로, head에 포함될 경우 네이버 검색 결과에 사이트 노출이 가능하다.
apple-mobile-web-app-title, application-name: Mobile 환경에서 나타나는 product의 이름을 나타내는 html 코드
CSS
apple-touch-icon, icon: 반응형 웹이기 때문에 Mobile 환경에서도, Web 환경에서도 나타낼 수 있는 이미지를 칭하는 코드로 보인다.. css라는 확장자는 없지만, (스승님의 말씀에 따르면) 별도의 파일로 저장하지 않는다면 확장자명이 붙지 않는다고 한다:)
그리고 마지막 부분에 숨겨져 있던 style 부분. 무심코 js라 생각하고 넘어갈 뻔했지만, 의심스러워서 코드를 지워보니 오른쪽 사진 같이 변한 걸 보고 CSS 코드라는 것을 알게 되었다. CSS를 지우니 html에 포함된 텍스트와 이미지만 남아있는 부분.. 뭔가 옛날의 인터넷처럼 과거로 시간 여행이라도 한 듯하다.
JS (Javascript)
dns-prefetch: 조사(?) 결과 웹 페이지의 반응 속도를 빠르게 해 주는 코드인 것으로 추정된다. 뭔가의 동작! 이니까 js이지 않을까?
아래에 이어지는 코드들은 친절하게도. js 확장자나 /javascript라고 붙어져 있다. 간간히 google tag manager나 analytics, statics, amplitude가 붙어있는 걸 보니, 아마 트래킹을 위함인 것 같다. (오... 이런 식으로 데이터 수집을 하는구나...)
BODY
이제 본격적으로 살펴보는 body! head가 대략적인 내용이었다면, body는 내가 web 상에서 확인할 수 있는 대부분의 내용이라 생각하면 편할 것 같다.
body 부분에는 head에서 보이지 않던 div라는 용어가 자주 보인다. 하위에 id와 class가 존재하고 주로 ▶로 엮여있다. div는 html에서 특정 영역이나 구획을 정의하는 개념으로, 일종의 컨테이너 역할을 한다. 하위에는 하나의 id와 여러 개의 class로 구성되며, id명은 중복될 수 없다. id끼리는 동일한 레벨이기에 id 하위에 id를 만들 수는 없다. (class는 가능)
이처럼 하위에 하위에 하위에... 하위의 class에 웹 페이지의 섹션 별 코드를 또 다른 div로 설계했으며, 해당 div에서도 또 하위의 하위의.... 가 반복된다. 우리 눈엔 단순해 보이는 웹 페이지일지라도 역시 수면 아래에는 복잡하고 세밀한 코드가 숨겨져 있다.
HTML
오른쪽 코드 창에 '카테고리', '홈', '인기', '신규', '마감 임박', '공개 예정' 등이라는 텍스트가 보일 것이다. 텀블벅의 홈페이지에서 내비게이션 바를 담당하는 영역으로, html로 텍스트를 구성한 후 폰트 등의 요소를 가미한 것으로 파악된다.
배너 영역 아래에 배치되어 있는 시리즈 영역 또한 마찬가지이다. 여러 프로젝트를 묶어 하나의 테마 시리즈로 구성하여 보여주는 부분도, 시리즈 명을 html 코드(text)로 작성하여 유저들에게 보여준다.
CSS
앞선 head에서 살펴본 내용처럼 (현재 내 수준에서는) style이라는 이름이 붙은 코드가 CSS를 의미하는 것으로 추정했다. class 중 style이라는 이름이 붙은 하위의 코드 중 width, height 등 사이즈에 관련된 내용이 첨부되어 있어 CSS라 생각했으며, 해당 코드를 지우니 로고가 사라진 모습을 볼 수 있다.
또한 CSS나 style이라는 이름이 붙어있진 않지만, 배너 컨테이너 아래 div 코드로 CSS가 적용되어 있었다. picture라는 <>로 이루어진 부분을 지우니 이미지가 사라졌고, 해당 div를 다 지우니 아무런 text, link 연결 등도 남아있지 않았다.
JS (Javascript)
자바스크립트에 관한 내용은 head와 마찬가지로 /javascript라 표현된 부분으로 파악 가능했으며, react-view를 통해 반응형 페이지라는 것을 다시 한번 알 수 있었다.
하위의 하위의 코드를 파고 들어가다 보니.... js나 /javascript가 붙진 않았지만 자바스크립트로 작동하는 부분을 찾을 수 있었다. 해당 영역은 일정 시간이 지나면 자동으로 배너가 변하는 형태의 애니메이션(?)이 작동하고 있었으며, 4개의 이미지가 번갈아가며 등장했다. 배너가 바뀔 때마다 오른쪽 코드 창에 파란색으로 하이라이트 된 부분이 바뀌는 것을 통해 js 요소가 가미되었다는 것을 알 수 있었다. 정확히 어떤 코드가 js인지는 현재 내 수준에서 파악할 수 없었지만😂 초보 치고 훌륭한 발견이라고 스스로 합리화해 본다...
↓배너가 바뀔 때마다 코드가 변하는? 영상↓
해당 코드의 하위에는 각 배너가 연결되는 페이지가 포함되어 있는 듯하다. 그리고 배너 섹션의 class 중 HeroBanner__SwiperContainer-sc-1yaondm-0 bxKoeg swiper-container swiper-container-initialized swiper-container-horizontal swiper-container-pointer-events라는 이름을 가진 부분이 있었는데, 해당 부분에서 swiper-container 이라는 단어를 통해 js가 작동하는 영역이 아닐까-라는... 나의 추측.. 예상.. 생각.. 오류.. 그 무언가... 정확하게 swipe 동작이 발생하는 js 코드를 찾고 싶었는데 그것은 나의 욕심..이었나 보다...ㅎ
+ 나는 division(영역)과 swipe를 나타내는 js가 별도로 존재할 것이라 생각해서 코드를 뜯어봤는데, 이게 합쳐진 코드도 있는 걸까? div로 묶인 코드 중 하나를 지우니 배너 영역 자체가 사라졌다. 나머지 div는 각 배너 콘텐츠에 대한 코드였으며, 내가 지운 div는 하위 class나 별... 달리 분리해서 지울 수 있는 게 없었다. 뭐 너무 깊이 알려고 하지 말자(?)
html? CSS? Javascript? 아무튼. 코드를 살펴봤는데요↗
학습하고 과제를 해도 잘 모르겠지만 이걸 통해 개발자와 잘 소통할 수 있다고 합니다!
이상입니다! (뿌듯-!)
이번 과제에서는 주현영 기자가 된 느낌이다. 뭐...를 한 건지 모르겠다.ㅋㅋㅋ 데이터와 개발과 관련된 모듈로 넘어오니 나의 과제들도 힘이 많이 빠진 듯 하다. 최선을 다해(라고 하기엔 양심 아야!) 생각하고 고민하기에도 힘이 좀 부치기도 하다ㅠㅜ 어려운 내용인 만큼 여러 번 보고, 더 찾아보고 있긴 하지만 정말 어디까지는 알아도 되고, 어디까지는 몰라도 되는지 모르겠다! 일단 오늘의 과제는 여기서 마무리하고! 좀 더 공부하는 시간을 가져보고자 한다:)
fin.