rlidea.app 을 새 앱으로 갈아 끼운 날

rlidea.app 을 새 앱으로 바꿔 올렸다.

지금까지 rlidea.app 은 글과 도구 소개만 있는 정적 사이트였다. 가입도 없고 개인정보도 받지 않았다. 도구를 팔려면 계정과 결제가 있어야 하고, 그러려면 사이트 밑바닥을 갈아야 했다. 미뤄 두던 그 일을 하루 날을 잡아 끝냈다. 미리 만들어두었던 보일러플레이트 덕분이다.

한 일이 많아서 순서대로 적어 둔다.

서버 앞단

먼저 옛 사이트의 이력을 새 앱 저장소에 합쳤다. 트리는 새 앱 그대로 두고, 옛 커밋들만 한 번 품었다. 주소는 그대로인데 내용이 통째로 바뀌는 전환이라, 나중에 「이 페이지가 언제부터 이랬나」를 거슬러 올라갈 길은 남겨 두고 싶었다.

옛 사이트가 쓰던 그림 주소도 같은 경로로 옮겼다. OG 이미지나 스크린샷처럼 바깥에서 이미 걸어 둔 주소가 깨지면 안 되니까.

nginx 는 새 판으로 바꿨다. www 는 맨 도메인으로, http 는 https 로 넘긴다. 그런데 http 를 통째로 넘겨 버리면 인증서 갱신이 쓰는 확인 경로까지 넘어가 버린다. 그래서 리다이렉트를 location / 안으로 넣고, 전환 당일에 certbot renew --dry-run 으로 갱신이 실제로 도는지 확인했다.

Cloudflare 의 SSL 모드는 Full (strict) 로 올렸다. 그동안은 Cloudflare 와 서버 사이의 인증서를 따지지 않는 모드였다. 그리고 서버의 80·443 포트는 Cloudflare 를 거쳐 온 요청만 받게 막았다.

HSTS 는 5분(max-age=300)으로 시작했다. 한 번 길게 걸면 문제가 생겨도 방문자 브라우저에서 되돌릴 수 없다. 일주일쯤 로그를 지켜본 뒤 늘릴 생각이다.

약관

정적 사이트 시절의 개인정보처리방침에는 「가입을 받지 않는다 · 개인정보를 수집하지 않는다」고 적혀 있었다. 이제 그 문장이 거짓이 된다. 이용약관, 개인정보 처리방침, 마케팅 수신 동의를 새로 썼다.

쓰다 보니 정해야 할 것이 줄줄이 나왔다.

개인정보 보호책임자 이름은 실명으로 적어야 한다. 의무다.
구글 로그인을 하면 구글이 토큰을 준다. 로그인 뒤에 그걸 다시 쓰는 곳이 없어서 저장하지 않기로 하고, 이미 저장된 값도 지웠다.
탈퇴하면 그 자리에서 익명화하고 개인 정보는 지운다. 구매 기록만 법이 정한 5년을 남긴다.

쓰는 내내 무엇을 받을지보다 무엇을 안 받을지를 더 오래 고민했다.

2단계 인증

계정이 생기니 2단계 인증도 붙였다. 「내 계정」에서 인증 앱(TOTP)을 연결하고 끊을 수 있고, 메일 코드도 켜고 끌 수 있다.

시험해 보다가 두 군데에서 걸렸다.

하나는 인증 앱에 서비스 이름이 「Weaver2」로 뜨는 것이었다. 이 앱이 올라앉은 보일러플레이트의 이름이다. 발급자 이름을 설정으로 빼서 RLidea 로 바꿨다. 이미 연결해 둔 항목은 인증 앱에서 이름을 못 고쳐서 한 번 끊고 다시 연결해야 했다.

다른 하나는 마지막 남은 인증 수단을 끌 수 없게 막아 둔 규칙이었다. 인증 앱을 다시 연결하려고 끄려니, 메일 코드를 먼저 켜야 앱을 끌 수 있고, 다시 연결한 뒤엔 메일 코드를 또 꺼야 했다. 끄자마자 바로 켤 건데 이렇게까지 돌아가야 하나 싶었다.

그래서 마지막 수단이라도 코드로 본인임을 확인하면 끌 수 있게 바꾸고, 꺼지는 순간 알림 메일이 가게 했다. 남이 껐다면 메일로 바로 알 수 있다.

관리자 대시보드는 관리자에게만 열었다. 일반 사용자는 고른 언어의 「내 계정」으로 간다. 나중에 서비스가 늘면 사용자용 대시보드가 필요해질지도 모르지만, 지금 필요한 건 내 계정 화면 하나였다.

번역이 없는 글

영어 블로그에 들어가 보니 비어 있었다. 글이 전부 한국어라서다.

처음엔 영어판을 쓰면 되겠다고 생각했다. 그러다 언어를 스무 개쯤 늘리면 어떻게 하나 싶었다. 글 하나에 스무 벌을 다 갖추는 건 못 할 일이다.

그래서 번역이 없을 땐 대신 보여 주기로 했다. 그 언어판이 있으면 그걸, 없으면 영어판, 그것도 없으면 원문을 보인다. 링크는 대신 보여 주는 판의 진짜 주소로 건다. 검색엔진에 알리는 hreflang 과 사이트맵에는 실제로 있는 번역만 올린다.

그리고 여는 글 두 편, 「만들고 싶은 것을 만들며 먹고살 수 있을까」와 「십 년 넘게 쓴 Skitch 대신 DrawMark 를 만든 이유」는 영어판을 따로 만들었다.

아이콘

메인을 보다가 도구 아이콘 크기가 고르지 않은 게 눈에 들어왔다. DrawMark 만 유독 컸다.

재 보니 DrawMark 확정 아이콘은 여백 없이 꽉 찬 그림이었고, 다른 아이콘은 둘레에 투명한 여백이 있었다. 같은 크기를 줘도 보이는 크기가 16px 쯤 달랐다. DrawMark 를 줄이고 여백을 줘서 맞췄다.

보는 김에 리데아폼 아이콘의 색도 바꿨다. 녹색이라 DrawMark 의 짙은 초록과 나란히 놓이니 헷갈렸다. 리데아폼 사이트가 이미 쓰는 책상 회녹색 바탕에 흰 종이와 붉은 도장을 얹었다. 아이콘이 그 사이트의 얼굴이 되게 하고 싶었다.

실수 하나

리데아폼 사이트에 새 아이콘을 배포할 때, 로컬 저장소가 GitHub 보다 뒤처져 있는 걸 모르고 배포 명령부터 돌렸다. 1~2분 동안 사이트가 며칠 전 판으로 돌아가 있었다.

push 가 거절되면서 알아챘다. GitHub 판 위로 다시 얹어 배포하니 돌아왔다. 그 바람에 써 두고 올리지 않았던 글 하나가 같이 공개됐는데, 어차피 올릴 글이라 그대로 두었다.

다른 저장소에 배포할 땐 원격과 먼저 맞춰야 한다. 알던 건데 또 밟았다.

남은 것

HSTS 기간을 늘리는 것, 일주일 동안 로그를 지켜보는 것, 유료로 팔기 전에 사업자 등록을 하는 것이 남았다. 블로그 글도 파일에서 DB 로 옮겨 관리 화면에서 쓰게 할 생각이다.

밑바닥을 갈았으니 이제 그 위에 얹을 차례다.