여둘까 Office Layout TIL 12
사용설명서를 만들자고 했다
도형 프리셋까지 붙이고 나니, 이것도 사용법을 설명하는 문서가 있으면 좋겠다 싶었다. 스크린샷까지 넣어서 PPT처럼 넘겨 보는 문서로 만들 수 있냐고 물었다.
사람이 찍은 스크린샷은 찍는 순간부터 낡는다
설명서에 그림을 넣으면 보통 화면을 캡처해 붙인다. 그 순간 문서는 제품과 떨어지고, 툴바가 한 번만 바뀌어도 문서는 조용히 틀린 말을 하게 된다. 다시 스물몇 장을 찍어야 하니 실제로는 갱신되지 않는다.
그래서 스크린샷을 사람이 찍지 않기로 했다. 이미 앱을 자동으로 눌러 보는 점검 도구가 있으니, 거기에 설명용 순서를 하나 더 태우면 그림이 나온다. 이 결정이 얼마나 컸는지는 같은 날 바로 드러났다 — 저녁에 화면을 아이콘 중심으로 바꿨고, 설명서 그림 24장이 명령 한 번에 새 화면으로 다시 찍혔다.
갱신이 사람 일로 남아 있는 문서는 결국 갱신되지 않는다. 문서를 만드는 게 아니라 제품에서 뽑아내게 해 두면 그 비용이 사라진다.
PPT 파일 대신 인쇄를 택했다
PPT처럼 보고 싶다고 했지만, 실제 .pptx 파일을 만드는 대신 웹 페이지 한 장을 슬라이드처럼 넘기게 하고, 인쇄하면 슬라이드 한 장이 A4 한 쪽이 되게 맞췄다. 브라우저의 인쇄 기능이 그대로 PDF 배포본을 만든다.
파일 형식을 하나 더 지원한다는 건 그걸 만드는 장치를 하나 더 오래 유지한다는 뜻이다. 이미 있는 길(인쇄)로 같은 결과가 나오면 그쪽이 싸다.
빨간 상자가 엉뚱한 데를 가리키고 있었다
설명서를 넘겨 보다가 20번 슬라이드의 1번 표시가 「내 도형」이 아니라 그 아래 「통로 폭 기준(참고)」에 가 있는 걸 봤다.
강조할 자리를 “팔레트의 마지막 제목”처럼 위치로 잡아 뒀기 때문이었다. 팔레트 아래에 참고표가 붙자 마지막 제목이 그쪽으로 바뀌었다. 그 자리에 고정 이름표를 붙이고 이름으로 부르게 바꿨다.
화면은 자란다. 위치로 가리키면 당장은 맞고 나중에 조용히 틀린다. 이름으로 가리키면 화면이 바뀌어도 따라온다. 강조 상자를 그림에 그려 넣지 않고 좌표로 얹게 한 것도 같은 이유다 — 그림을 다시 찍어도 강조가 따라온다.
샵으로 옮기겠다고 하자 문서의 조건이 바뀌었다
설명서를 로그스톤 샵(logstone.net) 쪽으로 옮기고 싶다고 했다. 앱과 다른 사이트에 올라가게 되니, 폴더 하나를 통째로 복사하면 되게 만들어야 했다. 위 폴더의 아이콘을 빌려 쓰지 않고 자기 파일을 갖고, 앱으로 돌아가는 링크는 전체 주소로 적고, 바깥에서 불러오는 것이 없게 했다. 도움말 버튼도 앞으로는 이 문서로 바로 가게 했다.
샵은 폴더를 1MB 아래로 넘겨 달라고 했다. 그림 24장이 PNG로 3.8MB였다. 보통은 “찍고 → 변환하고 → 원본을 지우는” 단계를 하나 더 붙이는데, 찍는 도구가 이미 WebP(용량이 작은 웹용 이미지 형식)로 찍을 수 있었다. 찍는 단계에서 형식만 바꾸니 변환 단계 없이 1MB 아래로 내려갔다.
새 단계를 붙이기 전에 앞 단계가 그 일을 이미 할 수 있는지 먼저 본다. 과정이 길어지는 건 대개 이걸 안 봐서다.
영어 버전을 위해 화면부터 바꿨다
샵에 올리려면 영어가 필요했다. 영어 버전을 만들고, 아이콘만으로 뜻이 통하는 버튼은 글자를 떼고, 위·아래·좌·우 같은 방향 버튼은 마름모로 배치해 달라고 했다.
아이콘 먼저, 번역은 나중
순서를 물어보길래 아이콘 정리를 먼저 하기로 했다. 버튼마다 붙은 글자는 화면만 좁히는 게 아니라, 언어를 늘릴 때 전부 번역해야 하는 문자열이 된다. 아이콘이 뜻을 지고 있으면 번역할 것 자체가 줄어든다. 순서를 바꿨다면 같은 문자열을 두 번 손댔을 것이다.
방향 버튼도 같은 이득이다. 네 개를 가로로 늘어놓으면 어느 게 어느 방향인지 글자를 읽어야 알지만, 마름모로 두면 배치가 곧 방향이라 글자도 번역도 필요 없다.
툴팁은 hover가 있는 곳에서만 존재한다
글자를 뗀 버튼은 툴팁(마우스를 올리면 뜨는 작은 설명)으로 뜻을 알린다. 그런데 툴팁은 hover — 마우스 포인터를 버튼 위에 올려 둔 상태 — 가 있어야 뜬다. 태블릿 같은 터치 화면에는 hover가 없어서, 툴팁만 남기면 그 버튼이 무엇인지 알 방법이 사라진다.
그래서 마우스가 있는 환경에서만 글자를 감추고, 터치 화면에서는 라벨을 그대로 보여 준다. 화면 크기가 아니라 입력 방식으로 갈라야 한다.
언어는 브라우저를 따르되, 고른 쪽이 이긴다
영어·한국어 전환 방식은 처음 방문할 때 브라우저 언어를 따르고, 한 번 바꾸면 그 선택을 기억하게 했다. 한국에서 영어 브라우저를 쓰는 사람도, 반대도 있으니 자동 감지는 출발점일 뿐이다.
남의 파일은 이번에도 그 프로젝트에만
영어와 함께 새로 넣은 「내 도형」(직접 그린 모양을 팔레트에 저장하는 기능)도, 남이 보낸 파일에 담겨 온 것은 그 프로젝트에서만 보이게 했다. 앞선 TIL 6에서 정한 원칙 — 파일을 여는 건 남의 데이터를 들이는 일이라 내 환경을 바꾸게 두지 않는다 — 을 새 기능에도 그대로 적용한 것이다.