brunch

You can make anything
by writing

C.S.Lewis

by 프루스트 Aug 08. 2022

애증의 멜론티켓 메인 웹페이지 프론트엔드 분석

[코드스테이츠 PMB 13기] 프론트엔드 탐색하기 

들어가며

앱이 있지만 웹이 더 익숙한 사이트가 있다. 나에게는 티켓팅 사이트가 그렇다. 중학생 때부터 피 튀기는 티켓팅의 세계에 뛰어든 탓일까 나는 요즘도 앱 보다 웹으로 티켓팅 한다. 티켓팅 하면 대표적으로 인터파크 티켓, 옥션티켓, 멜론 티켓이 떠오른다. 라뗴는 옥션 티켓이 대세였는데 요즘은 인터파크 티켓과 멜론 티켓이 강세인 듯하다. 두 사이트를 비교하니 사용자 인터페이스(UI)적으로 멜론 티켓이 더 깔끔하다는 인상을 받았다. 왜 애증의 멜론 티켓인가? 예매 페이지 접속 시 대기순서가 81436번째면 속이 타들어간다. 멜론 티켓 메인 웹페이지의 프론트엔드를 분석해본다.




W7D1. 프론트엔드 탐색하기

분석해보고 싶은 웹 기반 서비스를 하나 선택해, 해당 서비스의 랜딩 페이지 내용을 다음과 같이 나누어 분석해 봅니다.


오늘의 프로덕트

: 멜론티켓


1. 화면의 구성 요소가 어떻게 배치되어 있는지 구조를 정리해 분석해 봅니다.(HTML 요소)


- 먼저, 프론트엔드는 웹 프로그래밍의 한 분야로 웹에서 눈에 보이는 부분을 말한다. 웹 사이트 메인화면처럼 사용자가 마주 보는 인터페이스를 의미한다.


- 웹사이트 구조에는 크게 HTML, CSS, 자바스크립트(JavaScript)가 있으며 웹사이트 구조와 인간의 신체와 비교하면 다음과 같다고 한다.

자료 : 코드스테이츠 자료 재가공

- HTML은 뼈대에 해당하며, CSS는 피부 및 외형에 해당한다. 자바스크립트는 근육, 신경계에 해당한다고 한다. 즉, HTML은 웹페이지의 기반이 되는 뼈대가 되고 CSS는 색상 등 디자인이 되고, 자바스크립트는 웹 페이지의 상호작용을 가능하게 한다.


- 멜론티켓 메인 웹페이지는 다음과 같이 크게 8등분으로 나눌 수 있다고 생각했다.
①번 영역 : 화면 최상단 페이지 상단 메뉴 / ②번 영역 : 상단 공연 링크 파트 / ③번 영역 : 공연 추천 링크 파트 / ④번 영역 : 화면 우측 배너 파트 / ⑤영역 : 화면 중단 배너 파트 / ⑥영역 : 화면 중단 파트 / ⑦영역 : 화면 하단 추천공연 링크 파트 / ⑧영역 : 화면 최하단 공지 및 정보 고지 파트


- 웹문서의 본문은 크게는 아래와 같이 헤드와 바디로 구성된다고 한다.

자료 : 코딩타임 블로그, [HTML 기초 강의] ③ HTML 문서 구조 및 태그


- 아래는 멜론티켓 웹페이지의 헤드에 해당하는 부분이다. 사이트 이름을 불꽃 티켓이라고 바꾸고, 검색창에 있는 회색 글씨를 불꽃나무의 브런치로 바꿔보았다.


- 아래는 멜론티켓 웹페이지의 바디에 해당하는 부분이다. HTML에서 div는 분할(Division)의 약자로, 레이아웃을 나누는데 주로 쓰인다. 레이아웃을 여러 개로 나눠놓았다는 것을 알 수 있다.


2. 각 구성 요소가 어떠한 모양을 하고 있는지 스타일을 정리해 분석해 봅니다.(CSS 요소)


- 크롬 개발자 도구(F12)에서 셀렉트 버튼을 클릭하면 웹페이지 각 요소들의 상세정보를 볼 수 있다. 특히 서체 및 색상까지 확인할 수 있다.



- 위 사진은 웹페이지 상단 공연 링크 파트이다. 공연 제목은 맑은 고딕, 검정(#000000)으로 작성됐다. 공연 소개는 맑은 고딕 회색(#888888)으로 작성됐다. 콘트라스트(Contrast)가 서체 크기를 말하는 것 같은데 정확하게는 알 수 없었다.

- 위 사진은 순서대로 화면 중단 파트와 화면 하단 추천공연 링크 파트다. 단독판매 강조는 돋움체, 백그라운드를 멜론 티켓 상징 색인 형광 녹색(#41D26B)으로 표현했으며, 하단 추천공연 링크 파트의 공연 제목은 돋움체, 진회색(#333333)으로 표현했다.


3. 각 구성 요소가 가지고 있는 특정한 동작이 무엇인지를 정리해 분석해 봅니다.(JavaScript 요소) (단, 기능 중 '다른 페이지로 연결'은 제외합니다.)


- 멜론 티켓 메인 웹페이지는 다른 페이지로의 연결이 대부분이었다. 이에 따라 다른 페이지의 연결 이외에 다른 자바스크립트 요소를 볼 수 있는 멜론 티켓 로그인 페이지에 들어갔다. 스크립트(script)에 해당하는 부분이 특정한 동작을 할 수 있는 자바스크립트 요소이다.


마치며

개발자 도구는 어쩌다 키를 잘못 눌러서(F12) 들어가거나 웹페이지에 사용된 고해상도 이미지를 다운로드할 때 사용한 경험이 있다. 그렇지만 이렇게 하나하나 눌러보면서 지워보기도 하고, 내용을 바꿔보기도 한 적은 처음이다.

분석 웹페이지를 선정하는 과정에서 여러 페이지에 들어가 보기도 했는데 개발자 도구에 주의해야 할 사항을 적어놓은 곳도 있어서 마치 비밀 페이지를 본 듯한 기분이었다(그래도 오픈 소스니까 공개돼도 되는 내용일 듯하다). 어떤 페이지는 코드가 아주 복잡하게 구성돼 있기도 하고 또 어떤 페이지는 간단하게 코드가 구성돼 있기도 했다.

갑자기 생각해보니 티켓팅 때 서버가 터지면 사이트의 일부분만 나오거나 이미지가 사라진 채 글자만 나올 때가 있었다. 이번 과제를 하면서 헤드를 삭제했을 때 나오는 화면이었다.

HTML, CSS, 자바스크립트라는 용어를 갓 배운 나에게는 오늘 과제인 개발자 도구 탐색이 어려운 일이었지만 스스로 학습해본다면 개발자 도구를 뜯어보는 맛도 있지 않을까.


참고자료

- 웹알못을 위한 HTML 기초와 <head>, <body> 태그, 티스토리 어썸가이, https://connecteddots.tistory.com/27

- [HTML 기초 강의] ③ HTML 문서 구조 및 태그, 네이버블로그 코딩타임, 2019.01.02., https://m.blog.naver.com/PostView.naver?isHttpsRedirect=true&blogId=mathesis_time&logNo=221429261515

매거진의 이전글 코로나는 제주 관광객 수에 얼마나 영향을 미쳤을까?
브런치는 최신 브라우저에 최적화 되어있습니다. IE chrome safari