HTML 레이아웃의 역할, 기본 사용법과 레이아웃의 최적화

HTML 레이아웃

웹 페이지 레이아웃은 구조와 디자인으로 결정하며, 주로 데스크탑과 모바일용으로 나뉩니다. 레이아웃 최적화 중CLS(Cumulative Layout Shift)는 페이지 로딩 중 콘텐츠 이동을 측정하여 사용자 경험을 평가합니다. 낮은 CLS 점수는 광고 클릭 오류와 수익 손실을 초래할 수 있으며, 최적화를 통해 기본적인 적합성은 확보할 수 있습니다. 레이아웃 최적화는 코드 수정과 광고, 이미지 배치 조정을 통해 이루어집니다

레이아웃은 웹 페이지를 구성하는 요소 중에서 구조와 디자인 부분을 담당하는 중요한 요소입니다. 레이아웃의 기본 설정에 의해 웹 페이지의 기본적인 색상과 방향이 정해지게 됩니다. 웹 페이지의 사용 목적에 따라 다양한 레이아웃이 존재하고 시중에서 무료, 유료로 사용 가능한 레이아웃들이 많이 있습니다.

대부분은 사용 목적에 따라 디자인적인 측면을 고려하기도 하고 기능적 측면을 고려하기도 합니다. 이번에 정리해야 할 부분은 그런 디자인과 기능적인 측면보다 처음 레이아웃을 구성할 때 기본적으로 알고 설정해야 하는 부분과 레이아웃의 최적화 부분을 정리해 볼까 합니다. 아래는 레이아웃의 기본적인 종류와 요소의 내용입니다. 너무 깊게 들어가면 복잡해지고 어려워지기 때문에 간단한 부분의 소개 차원에서 참고하시면 됩니다.

레이아웃의 종류

레이아웃은 크게 일반 데스크용 레이아웃과 모바일용 레이아웃으로 구분되지만, 요즘은 각각의 레이아웃이 하나로 통합되어 반응형 레이아웃을 주로 사용하게 됩니다.

• 박스형태의 레이아웃
• 반응형 레이아웃

레이아웃의 구정요소

블록 레이아웃(Block Layout)

다른 요소 아래에 하나씩 블록을 이루며 형성되는 레이아웃의 요소를 블록요소라고 하며 대표적인 블록 요소는div, p, h1, section 등이 있습니다.

인라인 레이아웃(Inline Layout)

레이아웃 요소중 서로 나란히 배치 되는 요소를 인라인 요소라고 하며 대표적인 요소는 span, a, img 등의 요소가 인라인 요소입니다.

레이아웃은 순차적 흐름(일반 흐름 normal flow)의 형태로 진행하지만, 좀 더 복잡한 레이아웃을 구성하기 위해 몇 가지 방법으로 흐름을 변경할 수도 있습니다. 이때 중요한 것은 서로의 흐름을 방해하지 않는 것입니다.

블록,인라인 설정

• display: block: 블록 요소는 항상 새로운 줄에서 시작하고, 가로 방향으로 가능한 모든 너비를 차지합니다.
• display: inline: 인라인 요소는 콘텐츠 만큼의 너비만 차지하며, 같은 줄에 나란히 배치됩니다.
• display: inline-block: 인라인 요소처럼 한 줄에 나란히 배치되지만, 블록 요소처럼 너비와 높이를 지정할 수 있습니다.
• display: flex: 부모 요소를 플렉스 컨테이너로 만들어 자식 요소들을 배치합니다.
• display: grid: 부모 요소를 그리드 컨테이너로 만들어 자식 요소들을 행과 열로 배치합니다
• display: none: 요소를 화면에 표시하지 않고, 문서 흐름에서 완전히 제거합니다.

display 속성을 이용해서 항목의 요소를 black요소에서 inline요소로 서로 변경이 가능합니다.

레이아웃의 평가

HTML 레이아웃의 요소의 설명은 위에 소개한 것 말고도 많이 있으며 위에 내용은 가장 기본적인 요소만 소개해 드린 것입니다. 그 외에도 많은 기능을 가진 요소들이 있습니다. 이러한 요소들을 조합해서 다양한 형태의 HTML 페이지를 구성하고 디자인하게 됩니다. 그러나 이러한 요소들이 잘못 설정하거나 충돌을 일으키게 되면, 검색 엔진 최적화 상황 중 가장 중요하게 생각하는 CLS(Cumulative Layout Shift)에 문제를 일으키게 됩니다.

CLS(Cumulative Layout Shift, 누적 레이아웃 이동)

웹 페이지가 로딩 중 사용자 의도와는 상관없이 콘텐츠가 이동하는 것을 측정하는 지표입니다. CLS는 사용자 경험에 중요한 요소로, 페이지 콘텐츠가 불안정하게 이동하면 사용자가 잘못된 요소를 클릭하거나 읽기 어려워지는 등의 문제가 발생합니다.

CLS(Cumulative Layout Shift, 누적 레이아웃 이동)

레이아웃 최적화와 CLS 최적화가 중요한 이유는 광고를 노출로 해서 수익을 내는 블로그와 사이트에 의도하지 않은 광고 클릭과 노출에 문제가 되기 때문입니다. 즉, CLS 점수가 낮다는 것은 광고 수익률과 연관성을 배제할 수 없다는 의미로 해석할수 있습니다.

그럼 왜 CLS 점수가 중요하며 수익률과 연관이 있는지에 대한 근거입니다. 수익형 블로그나 사이트가 아닌 경우에는 이 부분이 중요한 요소가 아닐 수도 있습니다. 조금 화면이 이탈하는 현상이 발생한다고 해서 크게 문제가 되지 않습니다. 단순히 잘못 누르면 다시 가면 됩니다.

그러나 수익형 블로그나 사이트(광고를 노출해서 수익을 창출하는 경우)문제가 심각해집니다. 사용자가 의도하지 않게 잘못 광고를 클릭하거나 이탈로 인해 광고의 노출이 발생할 경우 금전적인 문제가 발생하기 때문입니다. 광고를 통해 수익을 얻는 기업은 광고를 올린 사이트와 블로그의 문제로 자신들이 손실을 감당해야 하기 때문입니다.

따라서 광고를 노출해서 수익을 창출하는 블로그나 사이트는 레이아웃의 최적화가 기본이며, 무조건 해야 하는 작업입니다. 이 작업이 진행되지 않으면 나머지 항목도 다 연동이 됩니다. 아무리 고품질의 글을 작성하거나 사이트의 방문자가 많아도 CLS 점수에서 적합성이 판단되지 않으면 광고 수익에 손실이 불가피한게 현실적 문제입니다.

자신이 운영하는 블로그나 사이트의 상태를 체크하고 레이아웃을 수정하여 적합한 사이트와 블로그로 인정받아야 노력의 대가를 받을 수 있습니다. 간단한 방법으로 측정이 가능하며, 아래 사이트에서 측정하시면 됩니다. 성능 기타 다른 항목은 차후 수정해도 되지만, CLS는 무조건 적합성 범위에 들어가야 합니다.

PageSpeed Insights

레이아웃의 최적화

레이아웃을 최적화해서 검색 엔진 최적화 CLS 측정 시 적합성 범위에 들어가는 방법은 일반인들이 작업하기에는 조금 문제가 있습니다. 코드를 수정하고 측정해야 하면, 측정한 값에서 발생하는 문제를 파악해서 다시 수정 작업을 반복해야 합니다. 그러나 일반적으로 이런 작업은 코드에 대한 지식뿐만 아니라 지루하고 반복적이며 변수가 너무 많기 때문에 쉽지는 않습니다.

그렇다고 일반적인 방법으로 불가능한 것은 아닙니다. 굳이 코드를 수정하고 하는 복잡한 과정을 하지 않아도 간단한 방법으로는 최고의 최적화는 불가능하겠지만 적합성에는 들어갈 수 있기 때문입니다. 그 방법은 광고의 배치와 이미지의 활용입니다.

코드의 수정 작업 없이 광고를 글 상단과 첫 화면 메인에 노출하는 것은 CLS에 가장 치명적이며 레이아웃의 최적화에 가장 부정적인 요소로 작용하게 됩니다. 최상의 노출 자리에 광고를 노출시켜 늘어나는 수익보다 더 많은 손실이 발생하게 됩니다. 광고의 노출은 되도록 첫 화면 상단과 메인에 노출시키지 않는 것만으로도 상당한 효과를 볼 수 있습니다.

CLS 최적화 측정 수치

검색과 노출에 부정적 요소가 되더라도 CLS 성능을 만족시키려면 고정 이미지를 활용해서 첫 화면에 노출시키는 방법입니다. 이 방법은 약간의 효과는 있지만 손실과 이익을 따지면 큰 효과는 없다고 봅니다. 최상의 방법은 코드를 수정해서 최적화를 진행하는 것이 중요하며, 코드 수정이 불가능한 상황이라면 위의 방법을 이용해 효과를 노려볼 수도 있습니다.

레이아웃의 최적화는 디자인과 기능에서의 활용성에 대한 최적화 이전에 CLS 성능에 만족한 최적화가 먼저 진행되어야 하며, 그 최적화는 10번의 테스트 중 7번은 최상의 점수를 얻거나 적합성 범위에 들어가야 합니다. 많은 변수와 조건에 따라 틀어지는 레이아웃 최적화는 쉽지 않은 작업이지만 반드시 진행해야 하는 작업입니다. 그리고 한번 레이아웃의 최적화를 진행하고 완료하게 되면 차후에는 운영하는 과정에서 추가로 수정하거나 신경을 쓸 일은 거의 없습니다.

한번 수정해서 완료하면 상황에 따라 변동성이 발생하면 안되면 코드 수정이 아닌 다른 이유로 CLS 측정값에 편차가 발생하지 않아야 레이아웃 최적화가 완료됬다고 판단할수 잇습니다.