이노자일 사이트를 만들면서 첫 화면의 속도를 꾸준히 확인했습니다. 방문자가 내용을 읽기도 전에 기다리게 만들고 싶지 않았고, 검색 결과에도 속도가 영향을 줄 수 있었기 때문입니다.
개발하는 동안에는 특별히 느리다는 느낌이 없었습니다. 화면은 바로 열렸고, 글자와 이미지도 자연스럽게 보였습니다. 그런데 실제 이용 환경에 가깝게 측정하니 결과가 기대보다 낮았습니다.
처음에는 이미지나 화면 효과를 의심했습니다. 보통 사이트가 느리다고 하면 가장 먼저 떠올리는 부분이기 때문입니다. 하나씩 살펴본 뒤에야 첫 화면을 붙잡고 있던 것이 한글 글꼴이라는 사실을 알게 됐습니다.
작업하는 컴퓨터에서는 빨라 보였습니다
사이트를 만드는 컴퓨터는 이미 여러 파일을 받아 둔 상태인 경우가 많습니다. 인터넷 연결도 비교적 안정적입니다. 같은 화면을 반복해서 확인하다 보면 브라우저가 필요한 파일을 기억하고 있어서 실제보다 빠르게 보이기도 합니다.
처음 방문한 사람의 상황은 다릅니다. 휴대전화로 접속할 수도 있고, 이동 중일 수도 있습니다. 화면에 필요한 파일을 처음부터 받아야 합니다. 만드는 사람의 컴퓨터에서 괜찮았다는 경험만으로 방문자의 기다림을 판단하기 어려운 이유입니다.
속도 측정 결과를 항목별로 살펴보니 화면이 나타나기 전에 여러 글꼴 파일을 기다리고 있었습니다. 각각의 파일은 아주 크지 않았지만, 여러 번 나눠 요청하면서 첫 문장을 보여 주는 시점이 늦어졌습니다.
사용자에게는 빈 화면이 오래 보일 정도는 아니었습니다. 글자가 잠시 늦게 자리를 잡는 정도였습니다. 기능도 모두 정상이라 눈으로만 확인했다면 지나치기 쉬운 문제였습니다.
한글 글꼴은 생각보다 많은 글자를 담고 있습니다
영문은 비교적 적은 수의 문자로 대부분의 문장을 표현할 수 있습니다. 한글은 사용 가능한 글자의 수가 훨씬 많습니다. 한글 글꼴 파일이 커지기 쉬운 이유입니다.
웹에서는 이 부담을 줄이기 위해 글자를 여러 묶음으로 나누기도 합니다. 방문한 화면에 필요한 묶음만 내려받는 방식입니다. 합리적인 방법이지만, 한 화면에서 서로 다른 묶음의 글자를 사용하면 작은 파일을 여러 번 요청하게 됩니다.
이노자일 사이트도 처음에는 이런 방식을 사용했습니다. 일반적인 설정이었고 화면에도 문제가 없었습니다. 실제 측정에서는 그 요청들이 모여 첫 화면을 늦추고 있었습니다. 널리 쓰이는 방식도 사이트의 문장과 구조에 따라 결과가 달라질 수 있다는 것을 확인한 순간이었습니다.
사이트에서 자주 쓰는 글자를 따로 담았습니다
첫 화면과 주요 안내 문구에는 사용하는 글자가 어느 정도 정해져 있었습니다. 그래서 사이트에 실제로 쓰이는 글자를 모아 가벼운 글꼴 파일을 만들었습니다. 방문자가 처음 받는 파일에는 우선 필요한 글자만 담았습니다.
글꼴 요청이 줄자 첫 화면이 준비되는 시점도 앞당겨졌습니다. 다만 여기서 끝내면 다른 문제가 생깁니다. 나중에 새로운 문구를 추가했는데 가벼운 파일에 그 글자가 없다면, 일부 글자만 다른 모양으로 보일 수 있습니다.
이를 막기 위해 화면에서 사용하는 글자와 글꼴 파일의 내용을 확인하는 절차를 함께 두었습니다. 새로운 문장을 추가할 때 빠진 글자가 있는지 알 수 있게 했습니다.
이후 인사이트 기능을 붙이면서 조건이 다시 달라졌습니다. 글의 내용은 매번 바뀌기 때문에 앞으로 사용될 모든 글자를 미리 정할 수 없었습니다. 주요 화면에서는 가벼운 글꼴을 먼저 사용하고, 긴 글에 필요한 전체 글꼴은 첫 화면이 나타난 뒤 불러오도록 순서를 조정했습니다.
하나의 방법을 모든 화면에 그대로 적용하기보다, 방문자가 처음 보는 화면과 긴 글을 읽는 화면의 성격을 나눠서 처리한 셈입니다.
점수보다 먼저 달라진 것은 기다리는 시간이었습니다
조정한 뒤 속도 측정 결과가 좋아졌고, 같은 글꼴 구조를 쓰던 다른 화면도 함께 개선됐습니다. 점수가 오른 것은 확인하기 쉬운 결과였지만, 실제로 중요했던 변화는 방문자가 첫 내용을 더 빨리 볼 수 있게 된 점이었습니다.
성능 점수는 측정할 때마다 조금씩 달라질 수 있습니다. 인터넷 상태와 측정 환경도 영향을 줍니다. 그래서 한 번의 숫자만으로 사이트 전체를 판단하기는 어렵습니다. 대신 어느 항목에서 시간이 오래 걸리는지, 변경 전과 후에 같은 조건에서 차이가 나는지를 살펴보는 데 유용했습니다.
이 경험을 통해 속도 개선에서는 파일 크기와 함께 불러오는 순서도 중요하다는 것을 알게 됐습니다. 첫 화면에 꼭 필요한 것과 나중에 받아도 되는 것을 나누고, 실제 이용 순서에 맞춰 조정했습니다.
새 기능을 붙이면 속도도 다시 확인했습니다
사이트는 공개한 뒤에도 바뀝니다. 새로운 이미지가 들어오고, 외부 예약 도구가 연결되고, 방문자 분석 기능이 추가되기도 합니다. 각각은 필요한 기능이지만 첫 화면에서 함께 불러오면 속도에 영향을 줄 수 있습니다.
그래서 한 번 좋은 결과가 나온 것을 완료로 보지는 않았습니다. 변화가 큰 작업 뒤에는 주요 화면을 다시 측정했습니다. 숫자가 내려갔다면 코드부터 고치기 전에 어떤 항목이 달라졌는지 확인했습니다.
글쓰기 기능을 추가한 뒤 속도가 다시 내려갔을 때도 같은 방식으로 접근했습니다. 원인을 먼저 찾으니 필요한 부분만 조정할 수 있었고, 잘 작동하는 다른 기능까지 건드릴 필요가 없었습니다.
사이트 제작 제안에서 속도를 바라보는 방식도 달랐습니다
사이트 제작 제안서에는 종종 ‘빠른 속도’나 ‘최적화’라는 표현이 들어갑니다. 말만으로는 어느 범위까지 포함되는지 알기 어렵습니다. 실제 진행에서는 언제, 어떤 화면을, 어떤 환경에서 확인하는지가 더 구체적인 기준이 됐습니다.
공개 전에 주요 화면을 측정하는지, 새 기능을 추가한 뒤에도 다시 확인하는지, 결과가 낮을 때 원인을 설명하고 변경 전후를 비교하는지가 운영 과정에서 차이를 만들었습니다. 이미지 압축처럼 한 번의 작업으로 끝나는 경우도 있지만, 외부 도구와 글꼴처럼 화면의 불러오는 순서까지 살펴야 하는 경우도 있었습니다.
모든 소개 페이지가 같은 수준의 성능 작업을 필요로 하지는 않습니다. 방문자가 많지 않고 짧게 사용할 페이지라면 기본적인 이미지 정리만으로 충분할 수 있습니다. 검색 유입이 중요하거나 문의와 예약으로 이어지는 사이트라면 첫 화면의 기다림을 정기적으로 살펴볼 이유가 커집니다.
제안서에서 성능이라는 한 단어를 볼 때, 작업 항목뿐 아니라 확인 시점과 기준이 함께 적혀 있는지를 보게 된 이유입니다.
화면이 보이는 것과 잘 도착하는 것은 달랐습니다
글꼴 문제는 작은 기술 문제처럼 보였습니다. 하지만 이 일을 겪으며 사이트의 품질에는 화면의 모양만으로 확인하기 어려운 부분이 많다는 것을 다시 알게 됐습니다.
버튼이 고장 나면 바로 알아차릴 수 있습니다. 화면이 조금 늦게 나타나는 경우에는 별다른 오류가 보이지 않습니다. 방문자는 이유를 알려주지 않은 채 기다리거나 떠납니다.
그래서 이노자일 사이트에서는 눈으로 보는 확인과 측정 결과를 함께 사용하고 있습니다. 점수 자체를 목표로 삼기보다, 방문자가 필요한 내용을 불편 없이 볼 수 있는지 확인하는 자료로 사용합니다.
앞으로 이미지와 콘텐츠가 늘어나면 속도는 다시 달라질 수 있습니다. 그때도 화면을 보며 짐작하기보다 실제 결과를 확인하고, 가장 오래 걸리는 부분부터 살펴볼 생각입니다.