랜딩페이지를 모두 이미지(통이미지)로 구성해도 괜찮을까?

기업에서 랜딩페이지를 개편하는 업무는 굉장히 오랜 시간이 들어갑니다. 기획자가 사이트 기획 전, 타겟과 메시지, 소구포인트 등을 찾아야 하고, 그다음에 랜딩페이지의 기획안을 만들죠. 그 후 디자이너가 랜딩페이지를 디자인한 뒤 개발자가 구현하고 QA 후 배포가 대부분 진행되는 업무 프로세스입니다.

 

하지만 빠른 랜딩페이지 배포를 위해서 모든 요소를 이미지로 구성하는 경우가 있습니다. 즉, 랜딩페이지 자체를 통 이미지로 구현해서 구축하는 방식입니다. 해당 방법은 아래와 같은 편의성을 제공합니다.

 

• 개발자의 업무 리소스를 절약하여 빠른 배포가 가능합니다.
• 디자인과 실제 구현된 웹페이지의 차이를 없앨 수 있습니다.

 

개발자들은 대체로 업무가 밀려있는 경우가 있습니다. 그러다 보니, 웹 페이지 배포에 시간이 걸리기 마련이죠. 게다가 피그마(Figma) 등으로 구현한 디자인이 랜딩페이지로 구현되면서 약간의 차이가 발생하기도 합니다. 이런 부분은 디자이너에겐 굉장히 애민한 부분입니다.

 

하지만 통이미지로 랜딩페이지를 구현할 경우, 위 문제를 모두 해결할 수 있기 때문에 빠른 배포에 많이들 사용하는 방법입니다. 그렇다면 통이미지 랜딩페이지는 SEO에서 좋은 방법일까요?

 

SEO의 기본 사항 : 검색엔진 봇(Bot)은 코드만 볼 수 있습니다.

SEO에서 가장 기본적인 사항은 웹페이지를 검색엔진의 봇이 읽을 수 있어야 합니다. 그리고 검색엔진 봇은 사람이 아니며, 눈도 없습니다. 미적 감각 또한 존재하지 않죠. 검색엔진 봇에게 우리의 페이지는 단순한 '코드 덩어리'일뿐입니다.

 

그렇다면 통이미지와 일반적인 랜딩페이지의 차이는 어떨까요?

 

검색엔진이 바라보는 통이미지의 구조

 

 

만약 위와 같은 랜딩페이지 섹션이 있다고 가정해 봅시다. 하지만 해당 섹션은 코드로 구성된 것이 아닌 통이미지를 삽입했다고 보죠. 그렇다면 검색엔진 봇이 바라보는 섹션은 아래와 같습니다.

 

<img src="/strength_section.png" alt="mkt52_strength"/>

 

랜딩페이지에 들어간 유려한 디자인과 열심히 작성한 문구들이 단순히 img 태그 하나로 보이게 됩니다. 그래도 alt 태그가 있기 때문에 검색 엔진은 해당 이미지가 mkt52의 강점이라는 것은 파악할 수 있죠.

 

검색엔진이 바라보는 코드화된 랜딩페이지의 구조

 

반대로 동일한 섹션을 코드로 구성했다고 생각해 보죠. 해당 섹션의 코드는 아래와 같을 겁니다. 아래 코드는 위의 이미지 중 첫 번째 카드에 대한 코드입니다. html 코드이며, css코드는 제외하였습니다.

 

<template>
    <div class="card">
        <div class="content">
            <h2 class="heading_in_card">
                모든 마케팅 지식을 확인해보세요.
            </h2>
            <div class="mkt52_strength">
                <div><span>MKT52에서는 당신이 궁금한 모든 마케팅 정보를 찾을 수 있습니다.<div class="_p"></div>그리고 상상하는 모든 마케팅 방식에 대한 장단점을 찾을 수 있죠.</span></div>
            </div>
        </div>
        <div class="rectangle-11564795-web-brainstorm-layer-text-view-icon">
        </div>
    </div>
</template>

 

 

여기서 볼 경우, 검색엔진은 두 가지를 알 수 있습니다. 

1. heading2의 내용은 모든 마케팅 지식을 확인해 보세요.라는 점
2. 하위 구조로 있는 내용은  MKT52에서는 당신이 궁금한 모든 마케팅 정보를... 이란 내용이 있다는 점

만약 MKT52의 도메인 전문성이 마케팅과 일치한다면, 해당 내용이 충분히 유효하다고 판단할 수 있습니다. 그리고 해당 카드에서 중요한 부분은 heading2로서 마케팅 지식에 대해서 강조하고 있는 것도 검색엔진이 알 수 있겠네요.

검색엔진이 웹페이지의 텍스트를 인지했기 때문에 관련해서 사용한 "마케팅 지식"이라는 키워드에 웹페이지를 노출시킬 가능성도 있죠.

 

그렇다면 통이미지 랜딩페이지는 구성하면 안 되는 건가요?

통이미지 랜딩페이지는 절대 구성하면 안 되는 것은 아닙니다. 해당 방식의 장점은 "속도"입니다. 빠르게 프로모션을 진행하거나 단기간만 진행되는 프로모션이라면 통이미지로 구성하는 것도 좋은 방법입니다.

 

우선 단기간 진행되는 프로모션일 경우, 프로모션 기간 이후 유입은 크게 도움이 되지 않습니다. 그렇기 때문에 단기간 진행되는 프로모션은 검색엔진이 페이지를 크롤링하고, 인덱싱과 랭킹이 주어지는 기간을 기다리기보다, 우선 배포해서 기존 회원 및 홈페이지 방문자를 프로모션 페이지로 유인하는 게 더 좋은 방법이 될 수 있습니다.

 

장기간 프로모션이나 고정적인 랜딩페이지여도 우선 통이미지로 빠르게 배포한 뒤, 코드로 구성하는 페이지로 바꾸는 것도 좋은 방법입니다. 이 경우, 랜딩페이지 배포의 속도를 높이고 이후에는 검색 엔진에 노출될 수 있도록 환경을 구성해 줄 수 있죠.

 

 

 

시간적 여유가 있다면, 코드로 페이지를 구성하는 것이 좋습니다. 그리고 가장 좋은 것은 가급적이면 대부분을 코드로 구성하는 것이죠. 하지만 시간이 없거나, 굳이 랜딩페이지가 검색 엔진에 노출될 필요가 없다면 통이미지로 빠르게 구성하는 것도 좋은 방식입니다.