룸톤 Roomtone TIL 14

운영

비밀번호 재설정 메일은 돈이 들어서 링크를 손으로 보내기로 했다

출시 전에 로그인 화면에 「비밀번호를 잊으셨나요?」가 있어야 했다. 앞선 TIL 13에서 「쓰이기 시작하는 날은 출시일」이라며 미뤄 둔 그 기능이다. 흔히 보는 방식은 이메일을 넣으면 인증번호 메일이 자동으로 가는 것이다. 그런데 메일을 자동으로 보내려면 메일 발송 서비스가 필요하다.

• Cloudflare 메일 발송은 Workers 유료 요금제에서만 쓸 수 있다.
• 무료로 쓸 수 있는 발송 서비스도 있지만, 가입하고 도메인 인증(DNS 설정)을 하고 비밀 키를 관리해야 한다.

아직 회원이 거의 없는 단계에서, 한 달에 몇 번 있을까 말까 한 일에 돈이나 설정을 먼저 들일 이유가 없었다. 그래서 회원이 지원 메일로 알려 오면 운영자가 관리 화면에서 1회용 재설정 링크를 만들어 보내는 방식으로 했다.

• 자주 일어나지 않는 일은 자동화보다 사람 손이 싸다. 요청이 늘어 손이 버거워지는 때가 자동 발송으로 넘어갈 때다.
• 사람이 보내는 링크라도 새면 남이 비밀번호를 바꿀 수 있다. 그래서 24시간 동안 한 번만 쓰이게 수명을 짧게 했다.
• 자동이 아니라는 걸 숨기지 않는다. 로그인 화면 안내에 「지원 메일로 알려 주면 링크를 보내 드린다」고 그대로 적었다. 버튼을 눌렀는데 아무 메일도 안 오는 것보다 낫다.

CSS

작은 영문을 큰 글자 너비에 맞추려면 글자를 한 자씩 떼어야 했다

스토어 그래픽 이미지의 명판에는 큰 「룸톤」 아래 작은 「ROOMTONE」이 있다. 작은 영문을 「룸톤」과 같은 너비로, 양 끝이 딱 맞게 벌려 달라고 했다. 머릿속에 있던 건 양 끝 맞춤(space-between — 상자 안의 요소들을 첫 요소는 왼쪽 끝, 마지막 요소는 오른쪽 끝에 붙이고 사이를 고르게 나누는 배치)이었다.

그런데 이 규칙은 글자에 바로 먹지 않는다. 양 끝 맞춤은 상자 안에 놓인 「요소들」을 벌리는 규칙이라, 「ROOMTONE」이라는 글자 한 덩어리는 요소 하나로 취급돼 벌어질 게 없다.

• 글자 간격(letter-spacing — 글자와 글자 사이를 일정하게 넓히는 속성)을 늘리는 방법도 있다. 하지만 마지막 글자 뒤에도 간격이 붙어 오른쪽 끝이 안 맞고, 너비에 맞는 값을 손으로 찾아야 하며, 글꼴이나 크기가 바뀌면 다시 틀어진다.
• 결국 R·O·O·M·T·O·N·E를 글자마다 따로 감싸고(span — 글자 일부를 묶는 인라인 요소), 너비를 정한 상자(div — 영역을 나누는 블록 요소)로 묶은 다음 그 상자에 양 끝 맞춤을 걸었다. 영어 명판의 「MUSIC FOR SPACES」도 같은 방식이다.

대신 치르는 값도 있다.

• 문구를 고치려면 한 글자씩 고쳐야 한다. 긴 문장에는 못 쓴다.
• 웹 페이지라면 복사하거나 화면 낭독기가 읽을 때 글자가 떨어져 나갈 수 있다. 이번 명판은 이미지로 굳혀 내보내는 것이라 괜찮았다.

「두 글자 줄의 너비를 맞춰 달라」는 한 줄짜리 요청도, 화면에서는 글자를 조각내는 구조로 바뀐다. 짧은 로고·명판 같은 곳에만 쓰는 방식이다.

Series: Today I Learn