Flutter) Flutter 와 SEO에 관한 이슈

 

안녕하세요 Gyeony입니다!

Flutter 2.0 버전이 정식 릴리즈 한지도 벌써 5달이 다되어가고 있어요! 아직도 부족함이 많고 회사일이 생각보다 바쁘게 돌아가 시간은 많이 없지만 하나씩 정리해나가 보도록 하겠습니다. 

이번 글에서는 Flutter와 SEO에 대해서 다루어 보도록 하겠습니다. 

 

Flutter 2.0 릴리즈 당시 사람들은 Flutter Web에 대해서 기대감을 품고 있었어요 모바일에서 보여주던 혁신적인 퍼포먼스를 웹에서도 잘 보여준다면 프론트 시장에서 영향력이 엄청나게 커질테니까요 ㅎㅎ 크로스 플랫폼 모바일 시장에서는 react native를 잘 따라가고 있고 웹마저 react나 vue 등을 따라가 준다면 정말 플러터로 프론트 정복이 가능할수도 있지 않나! 라는 부푼 꿈을 잠시 꿔보았습니다.

 

실제로 플러터 웹 즉 Hummingbird는 모바일에서와 마찬가지로 준수한 성능을 보여줬어요 하지만 사람들이 금방 '아,, 이거 못쓰겠구나,,'라고 느꼇던 이유가 있습니다.  바로 SEO와 관련된 이슈가 있었거든요! 그럼 이 SEO가 무엇이길래 사람들이 돌아섰을지 Hummingbird는 정말 못쓸 기술인지에 대해 알아보도록 하겠습니다.

 

SEO란?

Search Engine Optimization의 약자이며 번역하면 '검색 엔진 최적화'입니다.

이 정도 설명만 들어도 이미 눈치채신 분들도 있겠지만 바로 검색에 불리하다는 단점이 있었던 것입니다.

Flutter는 SPA(Single Page Application)입니다. 우리가 작성하는 Flutter 코드는 JacaScript로 컴파일되어 index.html에 적용되고 DOM(Document Object Model)의 조작을 통해 화면에 렌더링 되는것입니다! 자 벌써 모르는 단어가 약자가 두개나 나왔습니다.

SPA는 무엇이고 DOM은 무엇일까요?

 

SPA란?

Single Page Application의 약자로 최근 웹개발은 SPA를 빼놓고는 설명할 수 없게 되었습니다. 과거에는 페이지 하나에 해당하는 데이터가 아주 작았기때문에 매 순간 페이지의 모든 데이터를 보내주어도 부담이 없었습니다. 하지만 시간이 지나며 한 페이지의 용량이 커지게 되었고 매번 데이터를 보내주는것은 부담으로 다가왔습니다. 이러한 현상때문에 등장한것이 바로 SPA입니다. 자바스크립트 데이터를 최초에 로드하고 스크롤이나 클릭등의 액션이 일어났을때 화면의 일부분만을 변경시켜 실제로 화면 전체가 변한것처럼 보이게 하는것입니다. 

이에따른 방식으로 CSR, SSR이 있지만 본문에서는 다루지 않겠습니다 ㅎㅎ

 

DOM이란?

Document Object Model의 약자로 HTML, XML 문서의 프로그래밍 API이다! 라고는 하는데 평소에 앱만을 주로 다루는 저같은 사람에게는 어려운 설명이긴 했습니다..ㅠ 하지만 이해한 나름대로 정리를 해볼테니 참고로만 읽어주세요! JavaScript와 HTML은 DOM이 아니지만 이 파일들로 인해 일어 나는것은 DOM이라고 합니다. 예시로는 크롬 개발자도구에서 보이는 HTML파일은 우리가 작성한 HTML이 아닌 이미 약간의 차이점을 가지는 DOM이라는 것이지요 DOM은 Javascript 객체들의 트리구조를 가지며 JavaScript의 작업이 일어나는 공간이기도 합니다!

 

다시 SEO에 대한 설명으로 돌아오겠습니다! 결론적으로 Hummingbird에도 HTML파일이 존재하고 META 태그를 추가할 수 있지만 그뿐이라는 겁니다! 많은 크롤링 봇들은 JacaScript를 읽기를 어려워하고 HTML을 주로 읽습니다.(Google에서 JavaScript도 인식을 한다고는 했으나 구글을 제외한 검색엔진들도 많기 때문에 아직 불리한것은 명확합니다 ㅜ)

단편적인 예시를 들어보자면 지금 제가 글을 쓰고 있는 블로그도 하나의 예시가 될 수 있습니다. 저는 이 블로그에 다양한 글을 게시하고 사람들은 구글 혹은 네이버 등 검색엔진에 원하는 정보를 검색해 제 블로그에 들어오게 됩니다. 하지만 검색엔진에 잡히지 않는다면 어떨까요? 저 혹은 누군가가 자신의 블로그에 아무리 양질의 글을 올린다고 해도 아무도 그곳에 좋은 글이 있다는것을 알 수 없습니다. 뿐만 아니라 블로그로 수익을 창출하는 사람들에겐 더욱 불리하겠죠?

검색엔진이 필요하지 않은 개발자 포트폴리오 라던지 개인이 사용하는 웹사이트라면 문제가 없지만 대부분의경우 검색엔진에 노출되지 않았을때 좋을건 없다고 생각해요,, 앞으로 이러한 이슈들이 어떻게 해결될지 궁금하기도 합니다! Hummingbird에 흥미가 있기도 하고 포트폴리오를 한번 만들어보는건 괜찮을수도 있겠네요 ㅎㅎ