Angular SEO 문제점 해결하기

한국에서는 SEO에 관해 그리 중점을 두지 않는것 같지만 그래도 혹시 필요 하실까 해서 써 봅니다. 

기존에 angular 앱같은 경우는 모듈화 편리한 라우팅으로 뜨거운 관심을 받았는데요. Ecommerce나 블로깅 사이트 들은 angular를 쓰고 싶어도 seo 문제 때문에 쓰기가 까다로웠습니다. (구글과 같은 검색엔진으로 검색을 해도 나오지 않습니다. 무조건이라고는 하지 않겠습니다. 다만 크롤러가 연속되는 링크를 타도 컨텐츠에 접근이 힘들다는 점입니다). Angular는 복잡한 로직이 요구 되는 모듈에 개발을 맡기고 react나 앱 내부에서 라우팅을 요구하지 않는 프레임워크들로 갈아 페이지를 뛰우거 부분적으로만 웹앱을 뛰우는 형태가 해결책으로 많이들 씁니다. 구글 클라우드 콘솔 페이지 같은 경우는 angular로 만들어 져있죠. 사용자들이 주로 정보를 주고 받는 쪽은 angular가 어울리지 않지만 에디터나 컨텐츠 관리 하는 admin에는 개발의 효율성을 위해 아주 적합합니다. 

single page app이란 말그대로 페이지 하나만 로드가 되고 그 한페이지 안에서 템플릿을 바꾸어 가면서 라우팅이 서버를 거치지 않고 클라이언트에서 컨텐츠가 바뀌는 것입니다. 해당 앱이 무겁다면 당연히 첫 화면을 로딩하는데 오래 걸려서 여러가지 기법들이 나왔지만 추천하지 않는 추세로 가고 있습니다.(lazy loading, timeout 등등). 그 아무리 번쩍 번쩍 거리는 사이트를 만들었 다고 한들 검색 엔진에서 검색을 할 수 없다면 죽은 페이지나 다름이 없죠. SEO는 사이트의 수익과 직결 된다고 봐도 무방합니다. 

그렇다고 기존의 웹개발처럼 서버쪽에 모든것을 맡기자니 front end와 back end를 구분지어 개발하기 힘들어 지고 테스트 또한 힘들어 집니다. 모듈화라는 장점을 얻어 가면서 SEO의 장점을 얻을 수 있는 방안은 싱글 페이지 앱을 여러개를 둔다는것입니다. 예를 들어 유저가 주로 글을 읽는 부분의 컨텐츠는 기존의 웹개발 형식으로 개발하되 글을 적는 툴이나 review를 적는툴, 쪽지를 보내거나 사진을 올려서 크기를 조절하는 부분은 angular로 모듈화를 시킵니다. 그렇다 하면 핵심이 되는 툴 부분은 모듈화가 되어 있고 유지 보수 측면에서는 해당 single page 앱만 보면 되므로 관리가 훨씬 수월 해집니다. 

100% single page 로 개발을 하는 측면이 훨씬 쉽고 유지 하기도 쉽지만 단점으로 꼽히는것이 첫 페이지 로딩 시간이 기존의 방식보다 많이 걸린다는 것입니다. 제가 정의 하는것이지만 페이지(route) 수가 4장을 넘기지 않고 SEO에 중점을 두지 않고 URL을 따라 사용자들이 알아서 찾아 오는 사이트(gmail, dropbox, 등등)라면 single page app이 적합 합니다. 

새로운 기술들이 무조건 좋은것은 아니죠. 상황에 맞게 적제 적소에 맞추어서 디자인을 하신다면 엄청난 시너지 효과를 누리실수 있으실 겁니다. anugular만 이제 3년이 접어 들게 개발을 해왔는데요. 혹시나 angular와 비슷한 single page app기반의 framework에 관심이 있으시고 어떤 부분이 단점인지 모르시는 분들을 위해 부족하지만 이렇게 적어 봅니다. 

참고로 react나 polymer 같은 경우는 component 형태로 개발이 되어집니다.