디자인 페이지가 좋아 보이는 이유 — 홈페이지 디자인의 7가지 원칙과 체크리스트

웹페이지의 대부분은 글자입니다. 글꼴 선택, 크기 위계, 줄 간격, 자간만 제대로 잡아도 디자인의 절반 이상이 해결됩니다. 제목·부제·본문·캡션의 크기 차이가 명확해야 시선이 자연스럽게 흐르고, 본문 줄 간격은 글자 크기의 1.5~1.7배가 읽기 편합니다. 한 줄의 길이는 한글 기준 35~45자를 넘지 않도록 최대 너비를 제한합니다.

글꼴은 두 종류를 넘지 않는 것이 안전합니다. 제목용 하나, 본문용 하나. 개성이 필요하다면 제목 글꼴에서 만들고 본문은 가독성 위주로 고릅니다. 모두가 쓰는 기본 글꼴만 사용하면 어디서 본 듯한 인상을 주기 쉬우므로, 브랜드 성격에 맞는 글꼴을 하나 정해 일관되게 쓰는 것이 차별화의 출발점입니다.

아마추어 디자인의 가장 흔한 문제는 여백 부족입니다. 빈 공간이 아깝다고 요소를 채우면 모든 것이 똑같이 중요해 보이고, 결국 아무것도 눈에 들어오지 않습니다. 여백은 요소를 묶고 나누는 역할을 합니다. 관련 있는 것은 가깝게, 관련 없는 것은 멀게. 이 간단한 규칙이 레이아웃의 대부분을 결정합니다.

여백에는 체계가 필요합니다. 4px 또는 8px의 배수로 간격 단위를 정하고 그 단위만 사용하면 페이지 전체에 리듬이 생깁니다. 섹션 사이는 크게, 섹션 안의 요소 사이는 중간, 텍스트 줄 사이는 작게. 이 세 단계의 차이가 뚜렷할수록 페이지가 정돈되어 보입니다.

좋은 디자인 페이지는 색이 적습니다. 배경색, 본문 텍스트색, 보조 텍스트색, 강조색(포인트) 하나. 여기에 성공·오류 같은 상태색 정도면 충분합니다. 강조색은 버튼, 링크, 핵심 숫자처럼 '눌러야 하거나 봐야 하는 것'에만 씁니다. 강조색이 여기저기 쓰이면 강조가 사라집니다.

색은 이름을 붙여 관리해야 합니다. '이 파란색'이 아니라 '주요 강조색', '배경 카드색'처럼 역할 이름으로 정의하고 코드에서도 그 이름으로 사용하면 나중에 색을 바꾸거나 다크 모드를 추가할 때 한 곳만 수정하면 됩니다. 색상값을 페이지 곳곳에 직접 적어두면 일관성이 금방 무너집니다.

최근 유행하는 흰 배경에 보라·남색 그라데이션 조합은 AI 생성 디자인의 전형으로 인식되기 시작했습니다. 브랜드와 무관하게 유행을 따르면 오히려 개성이 사라집니다.

요소들이 보이지 않는 선에 맞춰 정렬되어 있을 때 사람은 '정돈되었다'고 느낍니다. 12칸 그리드가 표준이지만 핵심은 칸 수가 아니라 '모든 요소가 같은 기준선에 맞는가'입니다. 제목의 왼쪽 끝과 본문의 왼쪽 끝, 이미지의 위쪽 끝과 옆 텍스트의 위쪽 끝이 맞는지 확인하세요.

그리드를 의도적으로 깨는 것은 고급 기법입니다. 한 요소만 그리드 밖으로 살짝 빼서 시선을 끌거나, 이미지를 가장자리까지 확장하는 식입니다. 하지만 이는 나머지가 완벽히 정렬되어 있을 때만 '의도'로 읽힙니다. 기본 정렬이 흐트러진 상태에서 깨면 그냥 실수로 보입니다.

스크롤에 따라 요소가 나타나고, 숫자가 올라가고, 카드가 마우스를 따라 기울어지는 효과는 잘 쓰면 페이지에 생동감을 주지만 남용하면 산만하고 느립니다. 기준은 '이 움직임이 정보를 전달하거나 관계를 설명하는가'입니다. 페이지 로드 시 콘텐츠가 순서대로 나타나는 것은 읽는 순서를 안내하므로 의미가 있습니다. 모든 요소가 튀어오르고 회전하는 것은 의미가 없습니다.

모션의 지속 시간은 0.2~0.6초 안에서, 가속·감속 곡선(easing)을 적용해 자연스럽게 만듭니다. 그리고 '움직임 줄이기'를 켠 사용자에게는 모션을 비활성화하는 접근성 배려도 필요합니다.

악수하는 정장 차림의 스톡 사진, 노트북 앞에서 웃는 모델 사진은 페이지를 즉시 '어디서 본 것'으로 만듭니다. 실제 작업물, 실제 제품 화면, 실제 공간, 실제 팀의 사진이 훨씬 강합니다. 사진 품질이 낮다면 차라리 사진을 줄이고 타이포그래피와 여백으로 승부하는 것이 낫습니다.

아이콘도 마찬가지입니다. 모든 항목 옆에 아이콘을 붙이는 것은 아마추어 디자인의 특징 중 하나입니다. 아이콘은 텍스트만으로 구분이 어려울 때, 또는 반복 스캔이 필요한 목록에서만 씁니다. 그리고 모든 것을 둥근 카드 박스에 넣는 것도 피하세요. 박스는 구분이 정말 필요한 곳에만, 나머지는 여백과 선으로 나눕니다.

버튼의 모서리 둥글기, 그림자 강도, 링크 색, 제목 크기가 페이지마다 다르면 아무리 개별 요소가 예뻐도 전체가 어설퍼 보입니다. 반대로 개별 요소가 평범해도 일관되면 완성도가 높아 보입니다. 디자인 시스템이란 거창한 것이 아니라 '이 사이트에서 버튼은 이렇게 생겼다'는 규칙을 정하고 예외 없이 지키는 것입니다.

디자인 시안을 받았을 때 다음 항목을 확인하면 비전문가도 핵심 문제를 잡아낼 수 있습니다.

디자인 페이지가 좋아 보이는 이유는 재능이 아니라 원칙의 누적입니다. 타이포그래피, 여백, 색, 그리드, 모션, 이미지, 일관성. 이 일곱 가지를 지키면 평범한 콘텐츠도 신뢰감 있게 보이고, 어기면 화려한 효과도 어설퍼 보입니다. Legit Company는 홈페이지를 만들 때 이 원칙을 기준으로 유행이 아닌 브랜드에 맞는 방향 하나를 정해 끝까지 밀고 갑니다. 이 사이트 자체가 그 결과물입니다.