여둘까 Office Layout 19
오늘 한 일
- 도형 프리셋 — 임의 모양을 그려서 팔레트에 두기
- 다각형 그리기 추가. 꼭짓점을 차례로 클릭하고 첫 점을 다시 누르면 닫힌다
- 그린 도형을 이름 붙여 팔레트 「내 도형」에 저장하고, 다음부터 끌어다 쓴다
- 꼭짓점은 바깥 상자 기준 0~1 비율로 저장해서, 크기·회전·반전이 네모·원과 똑같이 먹는다
- 남이 보낸 파일에 담겨 온 도형은 그 프로젝트에서만 보이고 내 팔레트를 바꾸지 않는다(프리셋과 같은 규칙)
- 그림으로 보는 사용법 28장
- 스크린샷은 사람이 찍지 않는다. 기존 자동 점검 도구가 앱을 실제로 조작하며 24장을 뜬다
- 강조 표시는 이미지에 그리지 않고, 찍을 때 기록한 좌표를 화면에서 얹는다
- 인쇄하면 슬라이드 한 장이 A4 한 쪽이 되어 PDF 배포본이 그대로 나온다
- 툴바 ❓ 도움말이 이 문서를 연다. 내용이 겹치던 옛 도움말 모달은 걷어냈다
- 아이콘 중심 UI
- 뜻이 통하는 버튼은 글자를 떼고 툴팁으로 옮겼다. 터치 화면에서는 라벨을 그대로 남긴다
- 방의 벽 네 면을 마름모로 배치했다. 겹침 순서도 화살표로 바꿨다
- 이유: 번역할 문자열 수 자체가 줄어 영어 버전 비용이 내려간다
- 영어 버전
- 첫 방문은 브라우저 언어를 따르고, 툴바에서 바꾸면 그 선택을 기억한다
- 저장 파일에는 늘 한국어 원문이 들어가 어느 언어로 만든 파일이든 서로 열린다
- 평은 한국에서만 쓰는 단위라 영어에서는 ft²로 바꿔 보여 준다
- 사용설명서도 영문 원고 28장과 영어 화면 스크린샷을 따로 갖췄다
- 로그스톤 샵과 배포처 확정
- 사용설명서를
logstone.net/office-layout/guide/에 올리기로 하고 앱 링크를 그 주소로 바꿨다 - 샵이 폴더를 그대로 복사해 서빙하므로, 옮겨도 깨지지 않게 폴더를 자립시켰다(자체 아이콘·절대 링크·외부 호출 없음)
- 사용설명서를
막힌 부분
강조 상자가 엉뚱한 곳을 짚었다
설명서에서 「내 도형」 자리를 가리켜야 하는데, 빨간 상자가 그 아래 참고표에 가 있었다. 짚을 자리를 “팔레트의 마지막 제목”이라고 위치로 잡아 뒀기 때문이다. 팔레트 아래에 참고표가 붙자 마지막 제목이 그쪽으로 바뀌었다.
화면은 자란다. 위치로 가리키면 당장은 되고 나중에 조용히 어긋난다.
- 해결: 그 제목에 고정 이름표를 붙이고 이름으로 부르게 했다. 위치는 변하고 이름은 안 변한다
언어가 정해지기 전에 팔레트가 한 번 그려졌다
영어로 열었는데 가구 이름은 다 영어인데 분류 이름만 어색했다. 「Desks」로 나와야 할 분류가 물건 이름과 같은 「Desk」로 나왔다.
팔레트를 그리는 코드가 파일을 읽어들이는 순간 한 번 실행되는데, 그 시점에는 아직 언어가 정해지지 않아 한국어로 그려졌다. 그 뒤 화면 전체를 훑어 번역하는 단계가 「책상」을 물건 이름 사전으로 옮긴 것이다. 분류와 물건이 같은 낱말이라 생긴 충돌이었다.
- 해결: 언어 결정을 화면이 처음 그려지기 전으로 당기고, 분류 이름은 접두사를 붙인 별도 키로 갈랐다
- 남은 규칙: 언어처럼 화면 전체에 걸리는 값은 첫 렌더보다 먼저 정해져 있어야 한다
번역문을 그대로 저장하면 원문이 사라진다
이름칸을 번역해 보여 주기로 하니 새 문제가 생겼다. 영어로 보는 중에 그 칸의 값을 그대로 저장하면, 손대지 않았어도 「방」이 「Room」으로 덮인다. 파일에 영어 이름이 들어가면 한국어로 열었을 때 그대로 영어로 남는다.
- 해결: 입력값이 번역문과 같으면 손대지 않은 것으로 보고 원문을 유지한다. 프리셋 편집 모달도 같은 처리
- 원칙: 데이터에는 원문, 화면에만 번역. 이 경계를 지키면 파일 호환성이 언어와 무관해진다
문자열 200여 개에 표시를 다는 대신 화면을 훑기로 했다
한국어만 있던 앱을 영어까지 늘리려면 화면 문자열마다 번역 표시를 달아야 한다. 세어 보니 HTML에만 200개가 넘었다.
두 가지 결정으로 그 작업을 줄였다. 사전의 키를 새로 짓지 않고 한국어 원문 그대로 쓰고, 표시를 다는 대신 화면을 훑어 텍스트와 툴팁을 옮긴다. 사전에서 빠진 문장은 한국어가 그대로 나오므로, 빠뜨려도 화면이 비지 않는다.
- 판단: 번역 누락이 빈 화면이 아니라 원문 노출로 끝나는 구조를 골랐다. 완성도를 나중에 채울 수 있다
설명서 용량이 조건을 넘겼다
샵은 폴더 용량을 1MB 아래로 요구했다. PNG 24장이 3.8MB였는데, 변환 단계를 새로 만들지 않고 촬영 자체를 WebP로 바꿔 0.96MB로 내렸다.
그런데 영문판이 붙으면서 48장 1.8MB가 됐다. 한 언어 기준으로 맞춘 조건이라 다시 협의가 필요하다.
- 남은 한계: 품질을 더 낮추면 1.3MB선까지 내려간다. 줄일지 그대로 갈지는 샵 회신 대기
다음에 할 일
- 샵이 설명서를 올리면 앱의 도움말 링크 확인 — 올라가기 전까지는 그 주소가 404다
- 설명서 용량(두 언어 1.8MB) 유지 여부 회신 받기
- 실제 브라우저에서 인쇄 미리보기로 PDF 배포본 모양 확인
- 파일 선택창 저장은 자동 검사로 안 덮이므로 사람이 확인