여둘까 Office Layout 25

여둘까 Office Layout 바로가기 ↗

오늘 한 일

• 터치에서 한 번 누른 것이 두 번 처리되던 것을 고쳤다
• 손가락에서는 탭이 배치를, 길게 누르기가 프리셋 편집을 맡게 했다
• 서랍에 들어간 광고를 서랍이 처음 열릴 때 다시 요청하게 했다
• 팔레트 안내 문구를 마우스용과 손가락용으로 갈랐다
• 회귀 검사에 「터치로 한 번 찍으면 점도 하나」를 넣었다

---

막힌 부분

• 검사가 점을 두 개로 세서 고친 것이 안 고쳐진 줄 알았다
  • 원인: 거리 재기의 첫 점은 점 하나와 「시작 위치」 글자를 같이 남기는데, 둘 다 임시 표시라 같은 이름으로 세고 있었다
  • 해결: 원만 세게 바꿨다

손가락을 떼면 두 번 불린다

태블릿에서 축척 보정을 하려고 도면을 한 번 눌렀더니 곧바로 실제 거리를 입력하라고 물었다. 두 점을 찍어야 하는 기능인데 한 번에 두 점이 찍힌 것이다.

터치 화면에서 손가락을 떼면 Konva(캔버스 그리기 라이브러리)가 tap을 올리고, 브라우저가 옛 마우스용 코드도 돌아가라고 합성 click을 하나 더 보낸다. 두 이름을 함께 듣고 있었으니 한 번 누른 것이 두 번 처리됐다.

// 터치에서는 tap 뒤에 합성 click이 따라온다 — 한 번 누른 것이 두 번 처리되지 않게 거른다
let _lastTapAt = 0;
function bindTap(node, fn) {
  node.on("tap", (e) => { _lastTapAt = Date.now(); fn(e); });
  node.on("click", (e) => { if (Date.now() - _lastTapAt < 800) return; fn(e); });
}

• 해결: "click tap"으로 함께 듣던 자리를 전부 이 거름망으로 바꿨다. 마우스에는 tap이 없어 걸리지 않는다
• 확인: 거름망만 도로 빼고 검사를 돌리니 5건이 깨졌다

팔레트에서 가구를 끌어낼 수가 없다

태블릿은 편집까지 받아 주기로 한 화면인데, 정작 가구를 놓을 방법이 없었다. 팔레트에서 도면으로 끌어다 놓는 것이 유일한 배치 방법인데 이 끌어다 놓기는 브라우저가 마우스용으로 둔 기능이라 손가락으로는 시작조차 되지 않는다.

• 해결: 손가락에서는 탭이 화면 가운데에 배치하고, 길게 누르기(550ms)가 프리셋 편집을 연다. 놓은 것은 골라 둬서 바로 끌어 옮길 수 있다(가구를 끄는 것은 터치에서도 된다)
• 목록을 굴리려고 손가락을 움직인 경우(10px 넘게)는 배치하지 않는다
• 손가락을 떼면 합성 click이 따라와 편집창이 뒤이어 열리므로, 배치한 뒤 다음 click 한 번을 버린다
• 마우스 동작은 그대로 두고, 팔레트 안내 문구만 기기에 맞는 쪽이 보이게 했다

서랍에 들어간 광고가 안 뜬다

광고는 팔레트 아래에 있는데, 좁은 화면에서 팔레트가 서랍이 되면서 시작할 때 화면 밖에 있게 됐다. 애드핏은 한 번도 화면에 들어온 적 없는 자리를 채우지 않아 서랍을 열어도 빈 칸으로 남았다.

• 해결: 팔레트 서랍을 처음 열 때 광고 자리를 새로 만들고 로더를 다시 부른다
• 남은 한계: 광고는 로컬에서 아예 뜨지 않아 이 수정은 배포본에서만 확인된다

---

다음에 할 일

• 고친 것을 태블릿에서 다시 확인한다. 축척 보정 두 점 찍기, 팔레트 탭 배치와 길게 누르기, 서랍 속 광고
• 폰에서도 편집을 열지 정한다. 터치 배치 방식은 이번에 정했으니 남은 건 열지 말지의 판단이다
• 로그스톤 샵 제품 목록 등록은 태블릿 확인 뒤로 미뤄져 있다. 등록되면 변경 이력 공지 절차가 따라붙는다

---

Series: 여둘까 Office Layout

---

Suggested Posts