웹사이트를 만들 때 반드시 고려할 항목 중 하나가 검색엔진 최적화(Search Engine Optimization, 이하 ‘SEO’)라는 건 누구나 아는 사실이다. 아무리 멋지고 유익한 콘텐츠가 가득 담긴 사이트가 있다 한들 세상에 알려지지 않으면 없는 거나 다름없기 때문이다. 그렇지만 막상 어디서부터 어떻게 적용할까 하는 문제는 생각만큼 그렇게 간단하고 쉬운 문제는 아닌 듯하다.
디자이너가 웹 사이트를 기획할 때 고려되어야 하는 필수 조건이기도 하다. 흔히들 쉽게 프로토타입으로 접근하려 하지만 숙련된 디자이너라면 이미 많은 경험을 통해 SEO를 고려한 치밀한 디자인 과정으로 접근한다.
아래는 Sparkle 앱에도 검색엔진 최적화를 위한 모든 준비가 되어있는 것을 알 수 있다. 디자인 과정을 거친 뒤 최종적으로 검색에 어떻게 노출되어야 효과적인지를 고려하여 설정하게끔 정리되어 있다. 하나하나 살펴보면서 알아보도록 하자.
사이트 설정(Site Setting)
이 섹션에는 웹 사이트 주소 및 웹 사이트 언어가 포함된다. 이 주소는 검색 엔진 및 공유에 중요한 정보이다.
검색 엔진은 검색자의 언어와 일치하는 페이지를 찾으므로 웹 사이트를 여러 언어로 번역하는 경우 여기에 각각의 추가 언어를 추가할 수 있다. 그러면 특정 언어로 사이트의 각 페이지에 주석을 달 수 있다. 여러분의 사이트가 지원하는 다른 언어의 해당 페이지, 추가된 각 언어에 대해 기본 링크 또는 공통 사항을 모든 페이지 주소에 표시해야 한다.
웹 사이트를 완성한 후 첫 번째 단계는 검색 엔진을 통해 검색하는 것으로 요청하도록 인덱싱을 시작할 수 있도록 하는 것이다. 여기에서 주요 검색 엔진의 웹 마스터 섹션에서 제공하는 코드를 복사/붙여넣기 할 수 있다.
검색 엔진(Search Engine)
검색 엔진은 소위 “sitemap.xml”이라는 파일을 사용할 수 있다. 이 파일은 검색 엔진 bot에게 사용 가능한 파일이 무엇인지 정확하게 알려주는 파일이다. 웹 사이트에서 이것은 로봇이 볼 수 있는 것과 볼 수 없는 것을 알려주는 “robots.txt” 파일과 짝을 이룬다. 이 설정 창은 Sparkle이 파일을 생성하도록 지시한다. 그러면 파일을 “인덱싱”된 페이지를 세부적으로 제어할 수 있다. 색인 생성(검색 가능) 및 “아카이브”(나중에 사용하기 위해 저장됨)를 검색 엔진에서 검색한다.
사이트 아이콘
파비콘(favicon)이라고도 하는 웹 사이트 아이콘은 사이트와 연결되어 다른 위치에 표시되는 이미지이다. 브라우저에 따라 다르며, 예를 들어 Safari는 주소 표시 줄, 웹 사이트 주소 옆 및 기록 메뉴에서 페이지 제목 옆에 표시한다. Google 크롬은 페이지 제목 옆의 브라우저 탭에 표시한다. 모바일 사파리는 새 탭 페이지의 최근 웹 사이트 그리드에 표시한다.
필요한 모든 크기로 조정될 단일 정사각형 이미지를 선택하거나 각 아이콘을 선택하여 개별 아이콘을 제어할 수 있다.
또한 Safari는 고정 탭과 MacBook Pro Touch Bar에 대한 특정 아이콘을 지원한다. 이 아이콘은 마스크로 사용되며 SVG 형식의 벡터 파일이어야 한다. 설정 페이지에서는 고정된 탭과 터치 막대에서 SVG가 어떻게 보이는지 정확하게 미리 볼 수 있다.
웹 브라우저는 일반적으로 웹 사이트 아이콘이 자주 변경되지 않는다고 가정하므로 매우 오랫동안 아이콘을 유지(캐시)한다. 이런 이유로 Sparkle의 실시간 미리 보기 서비스는 웹 사이트 아이콘을 표시하지 않는다. 웹 사이트 아이콘을 변경하면 브라우저의 웹 사이트 아이콘 캐시를 지워야 한다. 돌아오는 사이트 방문자는 브라우저의 아이콘 캐시가 만료된 후에 새 아이콘을 볼 수 있다. 이 아이콘 캐시는 만료되거나 수개월 후에 나타날 수 있다.
이미지
이 설정 창을 사용하면 생성된 이미지가 지원해야 하는 화면을 선택할 수 있다. @2x는 최신 휴대전화 및 태블릿과 같이 모든 iPhone 4 이상, @3x는 iPhone 6+, 6s+ 및 7+와 같은 휴대전화에서 사용할 수 있는 매우 높은 해상도이다.
@2x 및 @3x asset을 생성하면 더 큰 이미지와 방문자가 사용하는 네트워크 대역폭을 희생시키면서 웹 사이트가 더욱 생생해진다. 사이트를 볼 때 이미지를 전송한다.
WebP 형식 옵션은 Sparkle의 추가 이미지를 생성하는 WebP 형식의 이미지 압축 포맷을 사이트에 각 이미지, 현재 Chrome 및 모바일 Chrome에서 지원된다.
Sparkle은 최신 브라우저가 적절한 해상도 이미지만 다운로드하도록 페이지 코드를 생성하므로 디스크 또는 웹 호스트는 사이트가 매우 클 수 있으며 일부 이미지만 일부 방문자가 사용한다.
추가 이미지 크기 및 형식은 웹 사이트 게시 시간 및 웹 사이트 디스크의 크기에만 영향을 미치며 실제로 사이트 방문자가 페이지를 다운로드할 시간은 이미지 품질, 속도 또는 둘 다를 향상시킨다.
공유(Sharing)
이 창에서 기본 체크 박스를 활성화하면 주요 소셜 네트워크에서 공유하는 데 필요한 OpenGraph 메타 데이터를 생성할 수 있다. Facebook, Linkedin, Pinterest 및 텔레그램, 슬랙 등의 인앱 공유가 가능하며, 여러분의 사이트가 트위터와 호환되도록 몇 가지 추가 메타 태그가 페이지에 추가된다.
이 설정을 사용하면 각 페이지의 페이지 설정에 선택적으로 공유의 표지 이미지가 될 이미지를 포함할 수 있으며, “카드”. 예를 들어 페이지 설정과 해당 Facebook 카드가 있다. (페이스북 개체 디버거 테스트)
Google 애널리틱스
Google 애널리틱스 계정이 있는 경우 애널리틱스 제어판에 있는 식별자를 입력하여 웹 사이트에서 사용자 추적을 활성화할 수 있다. 방문자 프로필 옵션을 사용하면 방문자 식별 정보가 수집되는 익명 모드 또는 추적 모드에서 GA를 실행할 수 있다. 후자는 개인 정보 보호 동의/쿠키 법에 영향을 미친다.
“개인 정보 정책 추가”는 Google의 개인 정보 취급 방침이 포함된 텍스트 요소를 생성하며 Google 웹 로그 분석 사용자는 사이트에 추가하기로 동의하게 되는 것이다.
자세한 내용은 Google 웹 로그 분석 문서를 참조하자 : http://www.google.com/analytics/
지역 비즈니스
이 패널에 입력된 정보는 사이트 방문자가 직접 볼 수는 없으며 “구조화된 데이터”로 저장된다. 검색 엔진이 읽고 로컬 검색 결과에서 검색 순위를 향상시키는 데 도움이 되며, 검색 엔진에 웹 사이트의 “카드” 요약이 표시되어 검색 결과에서 눈에 띄는 경우도 있다.
기타
텍스트 안티 에일리어싱(Anti-Aliasing)은 브라우저에 텍스트가 표시되는 방식에 영향을 미치지만 모바일 장치에서는 지원하지 않는다. Color/subpixel – 안티 에일리어싱은 작은 글꼴 크기에서 가독성을 향상 시키지만 Grayscale은 안티 에일리어싱 된 텍스트보다 더 화려해 보인다. 이 효과는 특히 어두운 배경에 밝은 텍스트(예: 검은색에 흰색)에서 확인할 수 있다. Color/subpixel – 안티 에일리어싱은 일반적으로 애니메이션과 호환되지 않으므로 애니메이션이 있는 페이지는 Color/subpixel – 안티 에일리어싱을 사용하여 과장된 텍스트에서 시각적으로 변경된다. Grayscale 애니메이션이 있는 얇은 텍스트, 애니메이션의 지속 시간, 그리고 과장된 텍스트로 되돌아간다. 이것은 바람직하지 않으므로 Sparkle의 기본값은 Grayscale 텍스트 안티 에일리어싱이 이상적이다.
텍스트 프레임을 벗어나는 텍스트를 숨기면 Sparkle의 레이아웃이 캔버스 편집에 가능한 한 정확하고 가능한 한 가깝게 유지된다.
스크롤이 필요하지 않은 페이지에도 항상 볼 수 있는 세로 스크롤 막대를 추가하면 페이지가 가로로 튀는 것을 방지할 수 있다. 혼합된 길이의 페이지 간에 전환할 때, 이 옵션은 시스템에 수직 스크롤 막대가 있는 경우에만 표시되며 터치 포인팅 장치가 있는 경우에는 그렇지 않다.
