캔버스 펜툴을 일러스트레이터처럼, 그리고 사이트의 잔손질

오늘은 잔손질의 날

새 기능을 크게 짓기보다, 손에 걸리던 것들을 하나씩 다듬었다. 캔버스 편집기, 블로그, 첫 화면 카피, 그리고 파비콘까지.

캔버스 펜툴 — 일러스트레이터처럼

가장 공들인 곳이다. 펜툴이 기존 도형과 따로 놀던 걸 붙였다. 이제 선택한 패스 위에서 이렇게 된다.

• 선분을 클릭하면 모양을 유지한 채 앵커가 추가되고
• 앵커를 클릭하면 지워지고
• 열린 끝점을 클릭하면 이어서 그릴 수 있고
• Alt로 한쪽 핸들을 떼거나, 뾰족한 점에 곡선 핸들을 새로 뽑는다

면이 없는 얇은 선은 픽셀을 정확히 맞혀야만 잡혔는데, 근처만 눌러도 잡히도록 클릭 판정을 기하 계산으로 바꿨다. 도형을 그리고 나면 곧바로 앵커가 떠서 바로 다듬을 수 있다.

PDF가 버벅이던 이유

PDF를 올리면 화면이 버벅이고, 편집 중 마우스가 안 떼지는 일이 있었다. 원인은 두 가지였다. 빈 곳을 누를 때마다 캔버스 전체를 다시 그리면서 PDF 뷰어가 통째로 다시 로딩됐고, 드래그 중 커서가 PDF(내장 뷰어) 위를 지나면 그 안쪽이 '마우스 뗌' 신호를 삼켰다.

PDF는 '열기'를 누를 때만 펼치도록 지연 로딩으로 바꾸고, 드래그하는 동안에는 내장 뷰어가 이벤트를 못 삼키게 막았다. 두 증상이 같이 사라졌다.

노드는 기본 사각형으로

둥근 모서리가 기본이었는데, 각진 사각형으로 바꿨다. 대신 일러스트레이터처럼, 노드를 선택하면 좌상단에 점이 하나 떠서 그걸 끌어 모서리 둥글기를 조절한다. 기본은 사각형, 원하면 둥글게. 단축키도 손봤다 — 레이어 순서는 Alt+대괄호, 새 카드는 Alt+N, 링크 상자는 Alt+L.

블로그 썸네일이 안 뜨던 진짜 이유

"어제 썸네일을 올렸다"는데 화면엔 없었다. 파보니 문제가 둘 겹쳐 있었다. 하나는 그 이미지 파일이 서버에 실제로는 저장되지 않은 유령이었고(주소만 DB에 남아 404), 다른 하나는 블로그 화면에 애초에 썸네일을 그리는 코드가 없었다. 파일이 멀쩡했어도 안 보였을 것이다.

커버를 새로 만들어 올리고, 목록과 본문에 커버가 보이도록 했다. 글과 글 사이를 오가는 '이전 글 / 다음 글' 버튼도 그동안 없어서 같이 넣었다.

파일도 노드로 — 끌어다 놓기

오후엔 캔버스에 파일을 붙이는 일을 마저 했다. 그동안 이미지와 PDF만 되던 걸, 이제 어떤 파일이든 올릴 수 있다. 파일을 캔버스 위로 끌어다 놓으면(드래그앤드롭) 그 자리에 노드가 생기고, 레일의 파일 버튼으로도 추가된다. 노드에는 파일 이름과 내려받기 버튼이 나란히 붙어서, 자료를 한 캔버스에 모아두고 바로 다운로드할 수 있다. 한 번에 10MB까지.

겸사겸사 '이미지 정리' 화면도 손봤다. 이제 이미지뿐 아니라 올라온 모든 파일을 한곳에서 보고, 어디에도 쓰이지 않는 '고아 파일'은 표시해 두고 한 번에 지운다. 이름도 '파일 정리'로 바꿨다. 아무 파일이나 받게 되니 보안도 한 겹 더 — 업로드 폴더에서는 코드가 실행되지 못하게 막고, 실행 가능한 확장자는 저장 단계에서 무력화했다.

그리고 첫 화면의 카드가 좁은 폰에서 화면 밖으로 삐져나오던 것도 잡았다. 긴 프로젝트 제목이 카드를 못 줄어들게 붙잡고 있던 게 원인이었다.

자잘한 정리

첫 화면 카피를 다듬고, 카드에는 진행 중인 프로젝트 목록을 띄웠다. 푸터와 소제목의 줄바꿈 같은 사소한 것들도 함께 손봤다.

파비콘은 지금 것(눈송이에 펜촉)이 브랜드 색과도 어긋나 있어서, codex로 시안을 스물네 개 뽑아 고르는 중이다. 눈송이+펜의 정공법부터, 낙관 도장과 '서' 모노그램 같은 한국 소설가다운 방향까지 펼쳐 봤다.

그리고 다른 컴퓨터에서도 이 사이트를 관리할 수 있도록, 관리자 페이지에 home 스킬을 바로 내려받는 버튼을 달았다.

남은 한 단계

오늘 바꾼 것 대부분은 코드라서, FTP로 올려야 실제 사이트에 반영된다. 글과 이미지는 API로 바로 들어가지만, 화면을 바꾸는 일은 아직 손으로 올리는 한 단계가 남아 있다. 그 한 단계를 없애는 것이 다음 숙제다.