기계가 만든 것처럼 보이는 습관을 걷어내고, 브랜드는 남겼습니다

요즘은 웹페이지를 한 번만 봐도 “AI로 만들었구나” 하는 느낌이 드는 경우가 많습니다. 내용이 나빠서가 아니라, 같은 습관이 여러 사이트에서 똑같이 반복되기 때문입니다.

우리 사이트도 예외가 아니었습니다. 그래서 lightoflife.work를 처음부터 다시 훑으며 그런 습관을 하나씩 찾아 고쳤습니다. 점검에는 공개된 디자인 점검 도구 Hallmark(github.com/Nutlope/hallmark)의 기준을 썼습니다.

무엇을 “티”라고 봤나요

Hallmark는 기계가 만든 페이지에서 자주 보이는 패턴을 항목으로 정리해 둡니다. 우리 사이트에서 실제로 걸린 것은 이런 것들이었습니다.

• 제목 위에 붙는 작은 영문 안내 문구(아이브로우). “WHY WE BUILD”, “OUR PRINCIPLE”처럼 제목이 이미 하는 말을 한 번 더 합니다.
• 자간을 넓힌 작은 대문자 라벨. 10~12px 글자를 대문자로 쓰고 간격을 벌린 것입니다.
• 가운뎃점으로 이어 붙인 나열(“A · B · C”)과 버튼 문구 끝에 붙인 화살표(“문의하기 →”).
• 그라디언트로 칠한 제목 글자.
• 화면 전체에 깔린, 내용 없이 번지는 빛 덩어리.
• 마우스를 올리면 이미지가 커지는 효과.
• 어떤 속성이 바뀌는지 정하지 않은 transition-all.

숫자로 보면 이렇습니다

아이브로우는 빌드된 22개 페이지에서 66개가 나왔습니다. 1차로 정리한 뒤 4개, 2차에서 0개가 됐습니다. 대문자 라벨과 가운뎃점 나열, 붙은 화살표는 모두 0개가 됐습니다.

정적 검사의 FAIL은 337개에서 75개, 다시 49개로 줄었습니다. 남은 것의 대부분은 외부 CSS 파일을 읽지 못해 생기는 오탐이라, 실제로 고칠 거리는 아니었습니다.

소스가 아니라 화면에서 다시 봤습니다

코드만 보고 고치면 놓치는 것이 있습니다. 그래서 실제 브라우저로 페이지를 열어 화면 기준으로 한 번 더 검사했습니다. 이 검사에서 FAIL은 12개에서 2개로 줄었습니다.

화면 검사에서 새로 보인 문제도 있었습니다. 서브페이지 첫 화면에 글 덩어리가 다섯 개나 쌓여 있었고, 같은 문장이 답과 리드에서 두 번 반복됐습니다. 상태 배지의 글자 대비는 4.24:1로 기준인 4.5:1에 못 미쳤고, 문의 폼 입력칸은 테두리가 거의 보이지 않았습니다. 모두 고쳤습니다.

일부러 남긴 것

걸렸다고 전부 지우지는 않았습니다. 이유가 있는 것은 남겼습니다.

• 성경 구절 표기의 en dash(마태복음 5:14⁠–⁠16). 구절 범위를 적는 관례라 그대로 뒀습니다.
• 홈 첫 화면의 빛줄기. LIGHT OF LIFE라는 이름이 말하는 장면이라, 페이지마다 깔리던 빛 번짐은 지우고 이 한 곳에만 남겼습니다.

습관은 고치고, 브랜드는 남긴다. 이번 정리의 기준은 이 한 줄이었습니다.

다음에도 같은 기준으로

한 번 고쳐도 새 페이지를 만들 때 같은 습관이 다시 들어오기 쉽습니다. 그래서 같은 검사를 다음 수정 때도 다시 돌릴 수 있게 남겨 두었습니다. 새 글을 올릴 때도 이 기준을 통과하는지 먼저 확인합니다.