[페이지 분석] 맥스무비 분석

 

 

팀별 프로젝트로 맥스무비라는 사이트를 분석하고, 해당 내용에 대해 발표한 영상을 첨부하였다.

 

 

 

 

아래 링크는 로그인 페이지 분석 관련하여 팀원 정동걸님께 제공 받은 자료이다.

 

https://curse-crocus-fd5.notion.site/000dea6adb3548688c8baf78eb6cd7e7

로그인 사이트 정리

 

 

아래 파일은 해당 프로젝트의 발표자료의 첨부이다.

분석과제 발표자료_널뛰기.pdf

7.60MB

 

 

각 페이지 별 내용을 텍스트로 정리해보면 아래와 같다.

[2]
분석시 브라우저는 크롬, 엣지를 활용, 분석에 대한 자료는 노션, drow io, 텍스트 파일으로 공유

[4]
홈 화면의 구조는 간략하게 레이아웃만 크게 정리하였다.
상단 부분은 header와 nav로 로고, 검색창, 카테고리 등을 포함하고 있으며, article태그로 강조하는 게시물을 최상단에 위치되어있다.
하단부분은 article 두개를 담은 section태그와 foorter의 내용을 담고있는 두개의 div로 구성

[5]
반응형 사이트기에 미디어쿼리로 지정한 스크린사이즈 미만이게 된다면,
display속성을 변경하여 보여야할 내용들을 구분해서, 모바일 화면의 구조로 컴포넌트가 재정렬됨.

div태그와 section태그로 모바일 홈의 상단인 부분을 구분, 아래로 article두개를 정렬하여 화면을 구성하고 있다.

[14]
맥스무비에 대한 가설 정리.
맥스무비는 MPA인가?
MPA는 멀티 페이지 애플리케이션의 약자이고, SPA와 상반되게 탭 하나를 이동할때마다 새로운 html을 받아와 페이지를 이동하는 웹 페이지 구성방식.
그에 대한 근거로, 맥스무비는 앞서 언급한 디스플레이의 none, block설정 변경을 제외하고는 모두 페이지 전환으로 구성되어있다는 것

[15]
다음 가설 맥스무비는 SSG인가?

SSG는 스테틱 사이트 제네레이션의 약자로 직역하면 정적 사이트 생성.
SSG는 SSR과 유사하게 사용자가 아닌 서버측에서 렌더링을 요청하는 방식.
하지만 렌더링 요청시 파일을 생성하는 SSR과 다르게, 서버에 건내줄 파일을 미리 만들어두고 서버가 렌더링을 요청하면 바로 건네준다.
정리해보았을때, SSG는 파일을 미리 다 만들어두므로 바뀔 일이 거의 없는 페이지에 적합.

추측 근거는 맥스무비의 소스를 확인하던 중 webpack제이솝이라는 키워드를 마주했다는 것이다.
제이솝은 각기 다른 도메인에 상주하는 서버로부터 데이터를 요청하기 위해 사용하는 웹팩 라이브러리 중 하나이다.
맥스무비가 빅데이터를 다루며 기존 데이터의 변화 없이 데이터에 추가만 이루어진다는 점에서 SSR과 SSG중 후자에 더 가깝다고 예상하였다.

webpack은 오픈 소스 자바스크립트 모듈 번들러로, 여러개로 나누어져 있는 파일들을 하나의 자바스크립트 코드로 압축하고 최적화하는 역할을 한다.
이 모듈 번들러는 로딩에 대한 네트워크 비용을 줄일 수 있다는것과, 가독성과 유지보수가 쉽다는 점, 최신 자바스크립트 문법을 지원하지 않는 브라우저에서 사용할 수 있는 코드로 쉽게 변환시켜 준다는 장점이 있다.
허나 수 많은 자바스크립트 파일이 하나의 파일로 묶이기에 초기 로딩 속도가 커질 수 있다는 단점이 있다.

chunks는 이런 단점을 보완하기 위한 개념중의 하나로, 하나의 번들 파일을 효과적으로 다루기 위해 여러가지의 파일로 다시 나누는 개념.
런타임(애플리케이션이 실행될)때 사용되는 코드들만 chunk로 분류하고, 나머지 내용은 모듈들에 대한 내용들만 남기게 되는데, 이렇게 되면 실제로 계속 변하는 코드를 담고있는 파일의 크기는 상대적으로 감소하며,  런타임 코드는 변함이 없기 때문에 캐시가 적용돼서 애플리케이션이 조금 더 빠르게 동작할 수 있게된다.

[16]
다음 가설은 맥스무비는 스타일 컴포넌트를 활용한다?
스타일 컴포넌트는 요즘 트렌드인 CSS-in-js라이브러리이다.
웹페이지를 html,CSS,JS파일로 분류하는게 아니라, 여러개의 컴포넌트를 분리하고 각 컴포넌트에 html,CSS,JS파일을 때려박는 패턴이라고 정리된다. 코드를 확인해보면 각 컴포넌트별로 id를 지정하고 있는 모습이 확인 가능하다.

[17]
div와 section에 속해있는 article을 활용하여 전체를 구조를 구성하고 있다.
특이한 점은 로그인 폼을 10개의 리스트로 구성하고 있다는 것과 푸터를 div만으로 구성했다는 것이다.

[18]
section은 주제별로 요소를 그룹화할때 사용합니다. article은 독립적으로 사용될 수 있는 주제를 정의할때 사용한다.
맥스무비의 경우 <article>태그를 활용하여 로그인 폼의 내용인 <ul>과 footer의 내용을 담고 있는<div>를 한 번 둘러싸주고, 이 부분을 <section>태그로 한번 더 감싸준다.

[19]
로그인결과의 처리에 대한 내용
<form>태그를 사용하지 않고 <button>타입으로 정의하는 것을 보아 이벤트 리스너를 활용해 관리하고 있다는 것 추측 가능하다.

[24]
input type=“hidden”에 관한 설명. hidden은 사용자에게는 보이지 않는 숨겨진 입력 필드를 정의하는데, 숨겨진 입력 필드는 폼 제출 시 사용자가 변경해서는 안되는 데이터를 함께 보낼 때 유용하게 사용된다.
이 개념을 활용하여 여러 정보들을 은닉하여 반환하는 것을 확인 할 수 있다.

[28]
멜론은 넷퍼넬이라는 솔루션을 사용한다. 이때, 솔루션은 수요자의 요구에 맞춘 소프트웨어, 혹은 그 소프트웨어를 개발함으로써 문제를 해결하는 일을 의미한다.
넷퍼넬은 웹 상의 대기열이라고 할 수 있는데, 서버의 폭주를 제한하는 역할을 한다.

[31]
자동스크롤은 비로그인 상태에서 사이트를 이용하다 로그인을 해야만 하는 상황에 마주했을때, 로그인 페이지로 넘어오기 직전의 페이지 정보와 스크롤 위치를 history객체로 기억해서 로그인 완료시에 이 위치로 돌아오는 기능이다.
타 사이트들에서는 로그인 페이지 구조를 주로 div태그를 활용해 구성하였으나 맥스무비에서는 이와 달리<ul>태그로 구성하고 있다.
그 외 특이사항으로 반응형 웹, 적응형 웹 중 맥스무비는 반응형 웹에 해당한다는 것이다.

 

 

---