레이아웃과 UI, 그리고 SEO

[ 이글은 2018년 05월 11일에 최종 수정되었습니다. ]
§

레이아웃의 역사

대략 20여년전에서 10여년전까지 어느 웹사이트의 레이아웃을 봐도 F layout 으로도 불렸던 레이아웃이 사용되었었습니다.

이런 모습을 F layout 이라고 불렀던 이유는, 위 그림에서 보듯이 메뉴나 navigation 이 모두 이 영어 알파벳 F 에 상응하는 위치에 놓여졌기 때문입니다. (상응하다 가 올바른 표현인지 잘 모르겠습니다. correspond to 라고 쓰고 싶은건데 이걸 한국어로 어떻게 표현해야 하는지… ㅎㅎㅎ)

영어나 한국어의 경우, 글을 왼쪽에서 부터 오른쪽으로 읽고, 거기에 맞춰서 사람의 눈도 이 왼쪽에서 오른쪽으로 보는 습관에 익숙해져 있기 때문에 이런 F layout 이 옳은 레이아웃이라는 생각을 갖게 되었던 것 입니다.

워드프레스의 출현

이런 통설을 바꾼게 워드프레스 블로그 레이아웃 입니다.

보시다시피 메뉴/navigation 을 모두 오른쪽에 몰아 넣은 모습입니다.

당시 워드프레스가 이런 레이아웃을 사용하게 된 이유는 두가지 였습니다.

  1. 블로그를 사용하는데 복잡한 메뉴가 필요 없다.
  2. 글을 읽고 싶은 것 뿐인데 메뉴가 왼쪽에 있으면 글을 읽는데 눈에 거슬린다.

이런 단순한 이유에서 워드프레스의 sidebar 는 항상 오른쪽에 위치하게 되었던 것 입니다.

그런데 시간이 지나며 의도치 않은 결과가 나타나기 시작했습니다. 왠지 구글링을 하면 항상 이 워드프레스 블로그에 있는 컨텐츠가 잘 노출이 되는 것 입니다.

한때는 구글이 워드프레스를 밀어주고 있다는 음모론이 돌기도 했습니다. 제로보드 게시판에서 어느 개발자 분이 이런 주장을 하는 글을 접하고 실소를 머금치 못했던 기억이 납니다. (대략 10년전쯤이라 그 게시글을 지금 찾기가 불가능 합니다.) 같은 미국회사라 도움을 주고 있다는거죠. 검색결과까지 나열해가며 꽤 구체적인 주장을 하셨던. ㅋㅋㅋ

아니, 구글도 자체 블로그 솔루션이 있는데 왜 워드프레스를 지원하냐구요? ㅋㅋㅋ

실상은 이랬습니다. 구글봇도 사람과 동일하게 문서를 왼쪽에서 오른쪽으로, 그리고 위에서 아래로 읽습니다. 그래서 F layout 형태의 문서를 구글봇이 읽을때는, 그 문서 내용과 전혀 관련 없는, Home, About Us, Contact Us 같은 메뉴가 먼저 읽히는거죠.

그리고 그 사이트의 메뉴가 방대하고 복잡할 수록 그 사이트의 컨텐츠에 관한 관련도는 더욱더 낮게 측정이 되고.

반면 워드프레스 블로그 레이아웃은 일단 컨텐츠 부터 먼저 구글봇이 읽게 됩니다. 오, 이런내용이야? 라며 구글봇은 즉각 그 문서의 내용을 수거하고 정리해서 관련도에 맞도록 DB 에 정리가 됩니다.

이래서 이상하리만큼 초창기 워드프레스 블로그의 SEO 가 다른 어느 사이트 보다도 월등히 우월했던 것 입니다.

의도하지 않았던 UI 의 편리성

사실 이 오른쪽에 메뉴/navigation 을 두는 레이아웃은 초창기 아무로 몰랐던 해톅까지 하나 존재했습니다. PC 로 웹사이트를 보는 경우, 거의 모든 사람들은 마우스를 오른쪽에 놓고 쓰고, 스크린에 마우스 커서도 오른쪽에 위치한 상태에서 웹문서를 보는데, 메뉴가 오른쪽에 있어, 방문자에게 의도하지 않은 편의성까지 제공하게 된 것 입니다.

마우스가 오늘쪽에 놓여있고, 커서도 오른쪽에 위치하니, 오른쪽 메뉴를 누르는 경우 더 편안함을 느끼는거죠.

이런 단순한 이유들때문에 메뉴를 오른쪽에 두는 레이아웃을 선택했던 워드프레스는 사용자가 급격하게 늘어났고 (사이트 활성화가 잘 되니까 너도나도 워드프레스를 사용하기 시작한거죠. 거기에 생각하지도 못했던 UI 혜택까지!!) 오픈소스를 유지했던 워드프레스는 사용자들이 기여하기 시작한 테마나 플러그인 덕분에 지금 현재는 인터넷을 지배하는 강력한 CMS 도구로 발전하게 되었습니다.

물론 지금은 초창기 이런 SEO 에서 워드프레스가 누리던 혜택이 많이 상소된 상태 입니다. 그 이유는 다른 솔루션들, 웹사이트 들도 워드프레스에 대한 연구를 하고, SEO 를 치밀하고 과학적으로 접근해 이런 클래식한 워드프레스 레이아웃이 주는 SEO 잇점을 모두 따라 잡거나, 경우에 따라서는 뛰어넘었기 때문입니다.

SB Nation 은 이런 레이아웃 하나로 미국의 거대 스포츠 미디어 회사인 ESPN 을 인터넷에서 안드로메다로 관광을 보내기도 했습니다. (ESPN 은 케이블 TV 에서 거의 모든 스포츠 중계를 하는 스포츠 미디어 회사고, 당연히 인터넷에서도 스포츠 관련 컨텐츠는 자신들이 독점하다시피 할거란 예측이 처참하게 무너진 케이스)

http://www.sbnation.com/longform/2016/2/10/10937414/the-gyms-of-holmes-county

상황이 어떻게 돌아가는건지, 왜 인터넷에서 ESPN 이 SB Nation 에게 처참하게 발리고 있는지 상황판단을 하고 정신을 차려 사이트 구축을 다시하긴 했는데,

그대로 SB Nation 의 레이아웃을 답습한 현재 모습

http://www.espn.com/espn/feature/story/_/id/19143486/the-story-how-owner-mark-davis-moved-raiders-las-vegas

함정은, 무려 10여년이란 세월이 흐른후에야 ESPN 이 정신을 차렸다는.

ESPN 이 무슨일이 벌어지고 있는지 파악도 못하고 있는사이에 소규모 웹사이트로 시작한 SB Nation 은 스포츠 컨텐츠 관련 분야에서 엄청난 규모로 성장해 버렸고 독보적인 존재가 되었습니다.

이런글을 쓰는 이유는, 거의 대부분의 한국 웹사이트나 개발자 분들이 SEO 에 관련해 이런 기본적인 이해력도 갖추지 못하고 있기 때문입니다.

단순히 ‘워드프레스를 쓰면 좋다더라.’ ‘우리도 워드프레스로 사이트를 개편해야겠다.’ 라는 생각만 갖고 있을 뿐, 왜 워드프레스를 사용하는게 좋은지, 그 이유조차도 모르고, 워드프레스가 주는 잇점을 모두 뜯어 고쳐서 버려버립니다.

한글 url 주소 (Permalinks) 도 사용안하고, 메뉴는 왼쪽에 가져다 붙이고….

아니, 이런 이유때문에 워드프레스를 쓰는건데, 그걸 다 버려버리면 뭐 어쩌자는? OTL

“빅맥은 햄버거 패티가 두장 들어가 있어. 그래서 빅백이 좋아.”

그리고 빅맥을 구입해서는 일단 고기패티부터 빼버리고 먹는것과 똑같은 겁니다.

이게 주입식 교육의 폐해일까요?

스스로 사고하고 WHY? 라는 질문을 던질 수 있는 인재들은 대한민국에서 성공할 수 없어서 일까요?

그 원인도 모르겠고 해결책도 없어 보입니다. 단지 속이 답답할 따름입니다.

관련글: https://hackya.com/kr/seo-에-도움이-되는-디자인/


hackya 는

Attorney, front-end developer, digital media artist, WordPress enthusiast, & a father of 4 wonderful children.

카테고리:

Ω