여둘까 Office Layout 23

이 글은 여둘까 Office Layout 시리즈의 24번째 기록입니다. (총 25개)

오늘 한 일

안 쓰는 것 걷어내기
- 내보내기만 해 두고 아무도 부르지 않던 함수 40개, 마크업에 없는 CSS 클래스 4개, 화면에 없는 문구를 번역하던 사전 3줄을 지웠다
진입점(app.js) 쪼개기
- 716줄에서 381줄로. 내보내기 모달·파일 메뉴·화면 이동·창 단위 배선(단축키·패널·광고)을 네 모듈로 나눴다
- 나누고 보니 옛 분리에서 남은, 아무도 안 쓰는 import가 58개 있었다
아이콘만 있는 버튼에 이름표 붙이기
- 네모·원·다각형·화살표·글자 버튼과 색 견본, 벽 방향 버튼은 화면에 기호밖에 없어 낭독기가 ”▭“만 읽는다. 버튼마다 aria-label을 달고, 번역기가 title·placeholder와 함께 이것도 옮기게 했다
마크업에 흩어져 있던 인라인 스타일 24개를 스타일시트 클래스로 옮겼다
- 카카오 광고가 요구하는 한 개만 남았다. 되풀이되는 배치는 공용 클래스로 묶었다
- 패널을 보였다 감추는 것도 인라인 스타일 대신 hidden 속성으로 바꿨다
좁은 화면 대응
- 1099px 아래에서는 팔레트와 속성 패널을 도면 위로 덮는 서랍으로 돌렸다. 태블릿 768px에서 도면이 258px에서 768px로 넓어졌다
- 767px 아래에서는 편집을 접고 배치도 열어 보기와 PDF 묶기만 남겼다. 손가락 하나로 끌면 화면이 움직이고 둘이면 확대·축소된다
- 폰·태블릿·넓은 화면 세 폭을 회귀 검사에 넣고, 일부러 깨뜨려 검사가 잡는 것까지 확인했다
사용법 문서 스크린샷을 다시 찍었다. 내보내기 모달이 바뀌어 세 장이 갱신됐고 인쇄 28쪽은 그대로다

막힌 부분

팔레트에서 가구를 끌었는데 도면에 안 떨어졌다
- 원인: 서랍이 열려 있으면 그 뒤를 덮는 막이 도면을 가려서, 떨어뜨릴 자리가 막에 가로막힌다
- 해결: 팔레트에서 끌기 시작하는 순간 서랍을 먼저 닫는다
내보내기 모달에서 라디오 버튼이 글자 위에 떠 있었다
- 원인: 속성 패널 입력칸을 가로 100%로 채우는 규칙이 라디오·체크박스에도 걸려, 동그라미가 한 줄을 다 차지하고 글자가 아래로 밀렸다
- 해결: 라디오·체크박스만 폭을 제 크기로 돌려놨다. 이건 이번에 생긴 게 아니라 원래 그랬던 것이고, 옮기기 전후를 나란히 찍어 비교하다 보였다

떼어 낸 쪽이 아니라 남은 쪽이 깨졌다

진입점에서 화면 이동 부분을 모듈로 떼어 냈다. 옮긴 코드는 멀쩡했는데, 남은 쪽에서 그 안의 변수를 쓰고 있었다. 스페이스바를 누르고 있는지를 적어 두는 값인데, 범위 선택 쪽이 “지금 스페이스가 눌려 있으면 범위 선택 대신 화면 이동”이라고 판단할 때 그 값을 본다. 떼어 가면서 그 값도 같이 가 버려 남은 쪽에서는 없는 이름이 됐다.

FAIL · 범위 선택 왼→오른쪽(완전 포함) — 0개
콘솔 오류: ReferenceError: _spaceDown is not defined

화면상으로는 “드래그해도 아무것도 안 잡힌다”로만 보인다. 검사가 다섯 건 무더기로 떨어져서 바로 알았다.

해결: 모듈 경계를 넘나드는 값은 공용 상태에 둔다. 이 프로젝트에 이미 있던 규칙인데 이번 것을 빠뜨렸다
남은 규칙: 코드를 옮길 때는 옮긴 쪽만 보지 말고 남은 쪽에서 그 이름을 쓰는지 찾아본다

폰 안내 화면이 켜지질 않았다

폰에서 편집을 접고 안내 화면을 띄우기로 하고 규칙을 넣었는데, 화면을 390px로 줄여도 안내가 안 보이고 빈 도면만 나왔다.

규칙 자체는 맞았다. 순서가 문제였다. 기본 규칙(“안내는 평소에 숨김”)을 폰 규칙(“폰에서는 보임”)보다 뒤에 적어 두면, 같은 힘일 때 뒤에 적은 것이 이긴다. 폰에서도 계속 숨김이었다.

해결: 기본 규칙을 먼저, 조건부 규칙을 뒤에 적는다
남은 한계: 브라우저가 한 줄도 불평하지 않는다. 눈으로 보기 전까지는 통과처럼 보인다

다음에 할 일

실제 폰·태블릿에서 터치 조작을 확인한다. 손가락 하나로 끌기, 둘로 확대·축소, 서랍 여닫기까지. 지금은 코드가 지나가는 길만 확인한 상태다
폰에서 편집을 되살리자는 얘기가 나오면 터치 배치 방식부터 정한다. 지금 팔레트는 끌어다 놓기라 터치에서 먹지 않으니, 탭해서 화면 가운데 놓기 같은 다른 조작이 필요하다
로그스톤 샵 제품 목록에 여둘까가 아직 없다. 등록되면 변경 이력 공지 절차가 따라붙는다

Series: 여둘까 Office Layout