5분이면 프로처럼 보이는 수정들

5분밖에 안 걸리는데 효과는 비례 이상인 것들이 있어. 항상 하는 것들을 정리해볼게 — 적은 노력에 큰 임팩트, "주말 프로젝트 같아 보이는 것"과 "뭘 하는지 아는 사람이 만든 것"을 나누는 차이.

제대로 된 파비콘 추가

"미완성" 티를 제일 크게 내는 건 탭에 뜨는 기본 브라우저 아이콘이야. 사이트가 아무리 예쁘게 디자인됐어도, 파비콘이 없으면 초안처럼 느껴져.

로고 (아니면 글자 하나라도) 가져와서 파비콘 생성기에 돌리고 파일을 추가해. 2분이면 사이트가 확실히 더 제대로 된 것처럼 보여.

SVG 최적화

SVG 아이콘이나 일러스트레이션을 쓰고 있다면, 에디터 메타데이터, 불필요한 요소, 중복 속성으로 부풀어 있을 확률이 높아.

디자인 도구에서 내보낸 전형적인 SVG가 15KB일 수 있어. 최적화하면 3KB야. 같은 시각적 결과에 데이터는 80% 적어.

SVG를 최적화 도구에 돌리고 원본을 교체해. 페이지 로딩이 빨라지고 아무도 차이를 모를 거야.

CSS와 JavaScript 최소화

개발 중에 코드에는 주석, 공백, 설명적인 변수명이 있어. 가독성엔 좋지.

프로덕션에선? 다 빼. 최소화(Minification)가 브라우저에 필요 없는 것들을 제거해서 파일 크기를 30-60% 줄여.

대부분의 빌드 도구가 자동으로 해. 근데 빌드 단계 없이 간단한 사이트나 원본 파일로 작업하고 있다면, 빠른 코드 최소화 도구로 처리하면 돼.

OpenGraph 이미지 수정

사이트 URL을 슬랙, 트위터, 아이메시지에서 공유해봐. 뭐가 뜨지?

빈 미리보기나 랜덤 스크린샷이면, OpenGraph 이미지가 없는 거야. 누가 네 링크를 공유할 때 나타나는 이미지야.

사이트 이름이랑 간단한 설명이 들어간 1200x630 이미지를 만들어. HTML head에 설정해. 5분이면 모든 공유 링크가 망가진 것 대신 의도된 것처럼 보여.

커스텀 에러 페이지 설정

사이트에서 깨진 링크를 눌러봐. 어떻게 돼?

기본 서버 에러 페이지나 빈 화면이면 고쳐. 홈페이지로 돌아가는 링크가 있는 커스텀 404 페이지는 10분이면 만들 수 있고, 죽은 링크로 들어온 방문자를 살려.

간단하게: "이 페이지는 없어. 여기 있는 페이지들은 이거야."

이미지 압축 (또)

응, 이미 했다는 거 알아. 근데 지난주에 추가한 이미지도 압축했어? 클라이언트가 4MB PNG로 메일 보낸 로고는?

이미지 압축은 한 번 하고 끝나는 작업이 아니야. 새 이미지마다 같은 처리가 필요해. 자꾸 건너뛰고 있다면 워크플로에 넣어 — 업로드 전에 압축, 매번.

로딩 상태 추가

페이지가 데이터를 가져오거나 무거운 콘텐츠를 로드하면, 기다리는 동안 뭔가를 보여줘. 스피너. 스켈레톤 스크린. "로딩 중..." 텍스트라도.

2초 동안 빈 페이지는 고장난 것 같아. 2초 동안 스피너가 있는 페이지는 정상적으로 느껴져. 같은 대기 시간, 완전히 다른 경험이야.

모바일 뷰 확인

폰으로 네 사이트를 열어봐. 진짜로 봐. 버튼 눌러봐. 폼 작성해봐.

반응형이 예쁜 사이트에서 "제출" 버튼이 모바일 키보드 뒤에 반쯤 숨겨진 걸 본 적 있어. 실제 폰에서 아무도 테스트 안 해서 못 잡은 거야.

---

완성도는 완벽함이 아니야. "이거 뭔가 좀 이상한데"라고 느끼게 하는 것들을 없애는 거야. 파비콘, 최적화된 에셋, 깔끔한 에러 페이지, 괜찮은 모바일 경험. 어느 하나도 5분 이상 안 걸리고, 전부 합치면 모든 게 의도된 것처럼 느껴져.