지금 무엇이 들어 있는지 세는 법

고치기 전에 세어 둡니다. Inspector 패널은 캔버스에 무엇이 몇 개 있는지 보여 줍니다. 화면에서는 셀 수 없는 것을 숫자로 잡고, 조작이 실제로 먹혔는지도 여기서 갈립니다.

이 문서가 다루는 도구는 블록 에디터 입니다 — 제목·이미지·표·그래프를 세로로 쌓아 상세페이지를 만들고 PNG 나 HTML 파일로 내려받습니다. 옆에 열어 두고 따라 하시면 빠릅니다. 다른 도구는 도구 목록에 있습니다.

눈으로 세지 말고 패널로 세십시오

섹션이 열 개쯤 쌓이면 화면에서 세는 것이 부정확해집니다. 스크롤을 오르내리다 보면 방금 넣은 여백이 하나인지 둘인지 헷갈립니다.

오른쪽 패널 맨 위에는 탭이 셋 있습니다. 그중 마지막 탭을 누르면 지금 캔버스에 무엇이 몇 개 있는지가 한 화면에 나옵니다. 탭에는 글자가 없고 아이콘만 있으니, 마우스를 올려 Inspector 라고 뜨는 것을 확인하면 됩니다.

가장 위 「개요」에 이런 항목이 나옵니다.

마지막 줄이 특히 쓸모 있습니다. 갭은 아무것도 그리지 않기 때문에 화면에서 세기가 가장 어려운 블록입니다. 간격과 정렬에서 다룬 「눈에 안 보이는 빈 블록이 껴 있는 경우」를 여기서 숫자로 잡습니다.

예를 들어 섹션 두 개짜리 캔버스에서 「Gap 4」가 나오면 갭이 넷이라는 뜻입니다. 새 섹션에는 처음부터 위아래 여백이 들어 있으므로 이 숫자는 대개 섹션 수의 배수에서 출발합니다. 거기서 벗어나면 내가 넣은 것이거나, 넣은 줄 몰랐던 것입니다.

이 패널의 두 번째 쓸모입니다. 조작 전후로 숫자를 비교하면 됩니다.

아무 일도 안 일어날 때에서 다뤘듯이 블록 추가는 아무것도 선택돼 있지 않으면 실행되지 않습니다. 그런데 화면만 봐서는 「안 붙었다」와 「붙었는데 안 보이는 곳에 있다」가 구분되지 않습니다.

이럴 때 순서가 이렇습니다.

이 집계는 패널을 열어 둔 채로 바로 다시 셉니다. 블록을 넣으면 그 자리에서 숫자가 올라가고, 작업물을 바꾸면 그 작업물의 숫자로 바뀝니다.

그래서 조작하면서 옆에 켜 두는 쓰임이 가장 편합니다. 「지금 눌린 게 맞나」를 매번 숫자로 확인할 수 있습니다.

이 둘은 원인도 처방도 다릅니다. 앞의 것은 선택을 다시 하고, 뒤의 것은 스크롤을 올려 봐야 합니다. 숫자를 보지 않으면 이 구분이 안 됩니다.

「텍스트 구성」에는 Heading 과 Body 가 각각 몇 개인지 나옵니다.

여기서 읽을 수 있는 것이 있습니다.

상세페이지처럼 위에서 아래로 한 번에 읽히는 결과물에서는 이 비율이 곧 읽는 리듬이 됩니다. 무엇을 어디에 쓰는지는 블록 종류와 고르는 법에 정리해 뒀습니다.

가장 아래에 지금 쓰인 색이 몇 종인지와 색 값이 나옵니다.

이게 왜 필요한가. 색은 하나씩 고르다 보면 저절로 늘어납니다. 여기서 조금 어둡게, 저기서 조금 밝게 하다 보면 「비슷한데 다른 회색」이 대여섯 종 쌓입니다. 화면에서는 티가 안 나고, 팔레트를 세면 바로 보입니다.

실무 요령은 이렇습니다.

색 종류가 예상보다 많으면 비슷한 것들을 하나로 합칩니다.
팔레트에 뜬 색 값을 그대로 복사해 색상 대비 검사기에 넣어 봅니다. 글자색과 배경색의 대비가 기준에 못 미치면 통과하는 가장 가까운 색을 대신 알려 줍니다.

이 사이트의 링크 색도 그런 식으로 골랐습니다. 소개에 그 과정이 적혀 있습니다.

이미지로 내보내면 섹션 하나가 파일 하나가 됩니다. 즉 「섹션」 숫자가 곧 내려받을 파일 개수입니다.

내보내기 직전에 이 숫자를 확인하면 두 가지를 미리 압니다.

내보내는 방법 자체는 이미지로 내보내기에 있습니다.