디자인을 제대로 봤다고 할 수 있으려면

북마크에 「영감 사이트」가 백 개 누워 있어도, 막상 손을 대면 방향을 못 찾아요. 그런 수집은 안 한 것과 같아요. 좋은 디자인을 열고 한눈에 「예쁘다」고 말하고, 캡처하고, 닫는 건 관광객 행동이에요: 사진 찍고 공유하고, 가져간 건 없어요.

제대로 보려면 고정 순서로 분해하고, 층마다 질문 하나만 답하세요: 먼저 위계(주인공이 누구인가), 그다음 간격(padding에 규칙이 있는가), 그다음 색 세기(몇 가지, 역할은 어떻게), 마지막에 디테일(모서리·그림자·자중 각각 몇 단계). 큰 것에서 작은 것으로: 뼈대를 먼저, 피부는 나중.

그 네 단계 앞에 0단계: 눈 가늘게 뜨기가 있어요. 눈을 크게 뜨고 디테일을 보기 전에, 먼저 페이지 전체를 뭉개 한 번 보세요. 주·종과 그룹이 저절로 떠올라요. 이 레슨은 다섯 단계를 전부 그 자리에서 해 봐요.

그래픽 디자이너에게는 눈 가늘게 뜨기 테스트라는 오래된 기술이 있어요. 한쪽 눈을 감고 다른 쪽을 가늘게 떠서 화면을 봐요. 디테일이 뭉개지면 남는 건 면·명암·그룹뿐이고, 어떤 요소가 아직 튀는지·어떤 게 한 무리로 보이는지 한눈에 답이 나와요. About Face 4 17장은 이것을 위계와 관계를 검사하는 최우선 도구로 두고, 각도를 바꾸면 놓쳤던 레이아웃 문제를 자주 발견한다고도 해요.

눈 가늘게 뜨기는 무엇을 검사할까요? 같은 장이 답해요: 사람이 한 화면을 보면 무의식적으로 두 질문을 이어 물어요. 여기서 뭐가 중요한가? 이것들은 어떤 관계인가? 좋은 디자인은 질문이 끝나기 전에 답을 끝냅니다. 이 두 질문을 쉬운 말로 옮기면, 이번 레슨의 분해 구호가 돼요.

눈 가늘게 뜨기로 한 번, 눈을 뜨고 한 번 검증하세요. 답이 같으면 위계가 단단해요. 가늘게 뜰 때 시선이 머물 곳이 없고 그룹이 죽 뭉개지면, 눈을 뜨고 봐도 정교해도 소용없어요. 아래 투시 렌즈에 눈 가늘게 뜨기 뷰가 새로 들어갔어요. 그걸 먼저 켜 보세요.

아래 랜딩 페이지는 이번 편의 규칙으로 만들었어요: 주인공 하나, 8pt 간격, 주색 하나. 뷰를 바꿔, 같은 페이지가 네 층 분해에서 각각 어떻게 보이는지 보세요.