비주얼 & 스타일

"빈 공간이 아까우니 뭐라도 채워주세요"가 가장 흔한 요구이자 가장 위험한 요구입니다. 여백은 남은 공간이 아니라 중요한 것을 돋보이게 만드는 도구입니다. 여백이 부족한 화면은 싸구려로 보입니다.

비전공자가 가장 먼저 헷갈리는 한 쌍입니다. "박스가 커지면 패딩, 박스끼리 멀어지면 마진"으로 외우세요. 개발자에게 "간격 좀 주세요"라고만 하면 어느 쪽인지 몰라 엉뚱한 결과가 나옵니다.

웹 폰트를 쓰면 파일 용량과 로딩 속도에 영향을 줍니다. 굵기를 5종류 넣으면 그만큼 무거워집니다. 실제로 쓰는 굵기만 골라서 개발에 전달하세요. 한글 폰트는 영문보다 파일이 훨씬 큽니다.

다 중요하다고 다 크게 만들면 아무것도 중요하지 않게 됩니다. 화면마다 "가장 중요한 것 하나"를 정하고 나머지를 그보다 약하게 만드는 게 원칙입니다.

스케일이 없으면 시안마다 15px, 16px, 17px이 섞여 나오고 개발자는 그걸 다 따라 만들어야 합니다. 6~8단계로 제한해두면 디자인도 개발도 훨씬 빨라집니다.

한글 본문은 글자 크기의 1.5~1.7배가 읽기 편합니다. 영문보다 살짝 넓게 잡는 게 좋습니다. 행간이 좁으면 답답하고, 너무 넓으면 줄이 흩어져 보입니다. 제목은 오히려 좁게(1.2~1.3) 잡습니다.

한글은 큰 제목일수록 자간을 살짝 좁히면(-2% 정도) 훨씬 단정해 보입니다. 반대로 아주 작은 글씨나 대문자 영문은 자간을 넓혀야 읽힙니다. 본문 자간은 건드리지 않는 게 안전합니다.

색은 단계별로 준비해야 합니다. 주색 하나만 정하면 호버·비활성·배경에 쓸 색이 없어서 개발자가 임의로 밝기를 조절합니다. 보통 한 색당 9~10단계를 만듭니다.

시맨틱 컬러는 사용자의 학습된 기대를 따라야 합니다. 브랜드 색이 빨강이라고 "성공" 메시지를 빨강으로 만들면 사용자는 실패한 줄 압니다.

본문은 4.5:1 이상, 큰 글씨는 3:1 이상이 접근성 최소 기준(WCAG AA)입니다. 회색 글씨가 세련돼 보인다고 연하게 만들면 밝은 야외에서 아예 안 보입니다. 공공 프로젝트는 이게 법적 검수 항목입니다.

색을 그대로 반전시키면 안 됩니다. 다크 모드에서는 순수한 검정(#000)보다 살짝 밝은 회색을 쓰고, 그림자 대신 밝기 차이로 층을 표현합니다. 결국 팔레트를 한 벌 더 만드는 일이므로 일정과 견적에 반영해야 합니다.

그림자를 아무렇게나 쓰면 화면이 지저분해집니다. 0/1/2/3 같은 단계를 정해두고 "카드는 1단계, 모달은 3단계"처럼 규칙으로 관리하세요. 다크 모드에서는 그림자가 잘 안 보여서 테두리나 밝기로 대체합니다.

값이 제각각이면 조잡해 보입니다. 4·8·12·999px(완전 둥근) 정도로 단계를 정해두세요. 그리고 박스 안에 박스가 있을 때는 안쪽 둥글기를 바깥보다 작게 해야 자연스럽습니다.

글자를 흐리게 만들 때 오퍼시티를 쓰면 대비가 무너집니다. 회색 글자가 필요하면 오퍼시티를 낮추지 말고 회색 자체를 색으로 지정하는 게 맞습니다. 오퍼시티는 배경 이미지 위 딤 처리 같은 데 쓰세요.

여러 세트를 섞으면 티가 확 납니다. 선 굵기가 다른 아이콘이 나란히 있으면 조잡해 보입니다. 프로젝트 시작할 때 세트 하나를 정하고, 없는 아이콘은 그 스타일에 맞춰 그리세요.

로고·아이콘은 반드시 SVG로 넘기세요. 사진은 JPG, 투명 배경이 필요한 이미지는 PNG입니다. 요즘은 WebP가 용량이 훨씬 작아서 사진에 많이 씁니다.

디자이너가 배수 이미지를 안 뽑아주면 개발자는 못 씁니다. 100×100으로 보여줄 이미지는 200×200(@2x)로 내보내야 고해상도 화면에서 선명합니다. 핸드오프 체크리스트에 반드시 넣으세요.