여둘까 Office Layout TIL 7

되돌리면 보조책상만 뒤집혔다

그룹으로 묶은 책상 세트를 -90도 돌렸다가 실행취소를 누르면, 0도로 돌아와야 할 세트 중 보조책상만 거울처럼 뒤집혀 있었다. 출입문으로 해 보면 멀쩡했다. 회전을 여러 번 반복하면 묶어 둔 도형들이 서로 조금씩 어긋나며 풀어지기도 했다.

원인은 하나였다. 화면에 그려진 상태와 앱이 적어 둔 상태가 달랐다.

도형을 돌리면 캔버스 라이브러리(Konva)가 회전·크기·반전을 한 덩어리로 계산해 다시 써넣는다. 이때 “좌우반전 + 0도”가 “상하반전 + 180도”처럼 다른 표현으로 바뀌는 경우가 있다. 화면에 보이는 모습은 똑같아서 그 순간에는 아무도 모른다. 그런데 앱은 회전값만 받아 적고 반전 방향은 예전 값을 들고 있었다. 되돌리기는 적어 둔 값으로 다시 그리니, 그때 다른 그림이 나온다. 좌우 대칭인 출입문은 티가 안 났고, 위아래가 다른 보조책상만 뒤집혀 보였다.

풀어지던 것도 같은 결이다. 회전값을 정수로 반올림해 적고 있어서, 되돌릴 때마다 0.몇 도씩 어긋났다. 앞선 TIL 6에서 단위를 다루며 정리한 것 — 보여 주려고 반올림한 값을 저장하면 안 된다 — 과 같은 함정이다.

라이브러리가 상태를 고쳐 쓸 수 있는 자리에서는, 넣은 값을 기억해 두지 말고 결과를 통째로 다시 읽어야 한다.

---

파일을 더블클릭하면 이 웹앱이 열릴까

배치 파일 확장자를 .ol로 바꾸면서, 이 파일을 더블클릭하면 여둘까가 바로 열리게 할 수 있냐고 물었다.

웹페이지는 그 자체로는 운영체제의 파일 연결을 가져갈 수 없다. 방법은 하나다. 앱을 PWA(웹앱을 컴퓨터에 프로그램처럼 설치하는 방식)로 만들어 “이 확장자는 내가 연다”고 선언해 두고, 사용자가 브라우저에서 앱을 한 번 설치하는 것이다. 그것도 크롬 계열 브라우저에서만 된다.

“웹으로 되냐”는 질문의 답이 “설치하면 된다”인 경우다. 그럼 질문이 바뀐다 — 쓰는 사람에게 설치를 한 번 시킬 만큼 가치가 있나. 이 도구를 쓰는 사람은 대개 링크로 들어와 한두 번 쓰고 나간다. 설치까지 요구할 이유가 약해서 이번엔 하지 않았다.

아이콘만은 다르다. 윈도우에서는 레지스트리(윈도우가 설정을 모아 두는 저장소)에 확장자를 등록하면, 앱을 설치하지 않아도 .ol 파일에 전용 아이콘을 붙일 수 있다. 관리자 권한도 필요 없다. 더블클릭하면 여전히 “연결 프로그램 선택”이 뜨지만, 파일 탐색기에서 배치 파일이 한눈에 구별된다.

---

작은 아이콘은 같은 그림을 줄이면 안 된다

아이콘은 이미 있는 링크 공유용 이미지의 여둘까 마크로 만들기로 했다. 그런데 256px에서 멀쩡하던 마크가 32px에서는 뭉개지고 16px에서는 얼룩이 됐다.

그래서 크기마다 담는 양을 다르게 했다.

• 64px 이상은 여백을 두고 마크 전체를 담는다
• 32·48px은 마크를 더 당겨 타일을 꽉 채운다
• 16px은 아예 단순한 모양(테두리 원과 십자)으로 새로 그린다

아이콘 파일(.ico) 하나에 여러 크기가 들어 있는 이유가 이것이었다. 큰 그림 하나를 여섯 크기로 줄이라는 게 아니라, 크기마다 그 크기에서 읽히는 그림을 따로 담으라는 것이다. 작아질수록 덜어내야 알아볼 수 있다.

---

Series: Today I Learn