오픈데이 Openday TIL 6

이 글은 Today I Learn 시리즈의 108번째 기록입니다. (총 125개)

폰트를 쓴다고 적어 두고 어디서도 안 불러오고 있었다. 화면으로는 못 찾는 문제였다. 이참에 셔터 그림과 파비콘까지 첫인상에 걸리는 것들을 정리했다.

폰트를 안 싣고 있었는데 화면은 멀쩡했다

폰트 이름은 적어 뒀는데 파일을 어디서도 안 싣고 있었다. 그런데도 몇 달을 못 알아챘다.

폰트 이름을 적는 것은 요청이 아니라 선호 목록이다. 브라우저는 이미 쓸 수 있는 것 중에서 고를 뿐이고, 첫 번째가 없으면 조용히 다음 후보로 넘어간다. 없는 파일을 부르면 대개 오류가 뜨는데 폰트는 오류가 안 난다 — 어떤 컴퓨터에서든 글자는 보여야 하니까 그렇게 만들어져 있다.

문제는 만드는 쪽 컴퓨터에 그 폰트가 깔려 있었다는 것이다. 그러면 첫 번째 후보로 보이니 아무 이상이 없다. 남의 컴퓨터에서만 다른 글꼴로 떨어지는데, 그건 남의 화면이라 볼 수가 없다.

만드는 환경은 대개 사용자 환경보다 좋다. 폰트가 더 깔려 있고, 인터넷이 빠르고, 화면이 크고, 계정이 이미 붙어 있다. 그 차이만큼 문제가 안 보인다
조용히 대체되는 장치는 편의를 주는 대신 실패를 감춘다. 그런 자리는 화면이 아니라 코드로 확인해야 한다
흔한 이름일수록 위험하다. 흔한 폰트일수록 만드는 사람 컴퓨터에는 있을 확률이 높다

남의 서버에서 부를까 같이 실을까

폰트를 쓰는 길이 둘이었다.

폰트 CDN에서 부른다 — 한 줄이면 끝난다. 대신 그 서버가 느리거나 멈추면 우리 화면도 흔들리고, 방문자 정보가 그 서버로 간다
파일을 앱과 같이 배포한다 — 파일을 챙겨야 한다. 대신 우리 것 하나만 신경 쓰면 되고 밖으로 나가는 요청이 없다

같이 싣는 쪽으로 갔다. 폰트 하나 때문에 남의 서버에 의존할 이유가 없고, 이 앱은 개인 기록을 다루는 것이라 바깥으로 나가는 요청 자체를 줄이는 게 맞다.

「한 줄이면 된다」는 편의는 대개 의존을 사는 값이다. 그 의존이 무엇을 붙잡고 있는지 보고 나서 산다
개인 기록을 다루는 앱에서는 「밖으로 나가는 요청이 하나도 없다」가 그 자체로 기능이다

검은 선 그림을 흰 선으로 바꾸기

셔터에 얹을 그림이 검은 선에 흰 바탕이었다. 회색 셔터 위에 그대로 두면 그림 대신 흰 네모가 붙는다.

처음 떠올린 건 색 반전이었다. 해 보니 선은 하얘지는데 바탕이 검게 변해 이번엔 검은 네모다. 반전은 모든 픽셀을 뒤집으므로 바탕도 같이 뒤집힌다.

필요한 건 「선만 남기고 바탕을 없애는 것」이었다. 색이 아니라 투명도의 문제였다. 밝기를 그대로 투명도로 옮기니 흰 바탕은 완전히 투명해지고 검은 선만 남았다.

원하는 결과를 한 축에서 못 만들면 그게 실은 다른 축의 문제인지 본다. 「색을 바꾼다」로 안 되던 게 「보이고 안 보이고」로는 됐다
「어느 값보다 어두우면 선, 밝으면 바탕」처럼 잘랐으면 손으로 그린 선의 흐린 가장자리가 통째로 사라져 계단이 진다. 중간값을 버리는 순간 경계가 딱딱해진다
이건 그림만의 얘기가 아니다. 연속된 것을 둘로 가르는 처리는 어디서든 가장자리를 잃는다

파비콘을 작게 줄이니 체크가 안 보였다

파비콘을 앱에서 쓰는 색 두 개로 만들었다. 갈색 바탕에 빨간 체크다. 색이 확실히 다르니 괜찮을 줄 알았는데, 작게 줄이니 체크가 거의 안 보였다.

갈색과 빨강은 색상이 다르고 밝기가 비슷하다. 크게 보면 면적이 있어 색상만으로도 갈리는데, 작아지면 면적이 사라지고 경계만 남는다. 경계를 만드는 건 밝기다.

색을 고를 때 팔레트에서 「다른 색」을 고르면 큰 자리에서만 맞다. 작은 자리는 명도 차이로 골라야 한다
앱에서 쓰는 색이라고 해서 작은 자리에도 맞는 건 아니다. 같은 팔레트 안에서 명도가 벌어지는 조합을 따로 찾아야 했다

확인하는 방법도 정해졌다.

후보를 실제 들어갈 크기로 그려서 나란히 놓고 고른다. 크게 볼 때는 넷 다 괜찮았고 16px에서 둘이 뭉개졌다
밝은 배경과 어두운 배경 양쪽에 올려서 본다. 아이콘은 두 곳 모두에 놓이는데 한쪽에서만 보고 고르면 반은 틀린다
미리보기는 작게 바로 그리지 말고 크게 그려서 줄인다. 작게 바로 그리면 없는 계단이 생겨서 실제와 다르게 보인다

받은 그림을 벡터로 다시 그렸다가 되돌렸다

셔터에 붙일 그림을 받고 처음에는 선을 따서 벡터로 다시 그렸다. 크기를 키워도 안 뭉개지고 색도 마음대로 줄 수 있으니 그쪽이 낫다고 봤다.

그림을 준 쪽에서 원본을 그대로 써 보라는 말이 왔다. 둘을 나란히 놓으니 차이가 보였다. 다시 그린 것은 선이 균일하고 굵기가 일정했다. 원본은 선이 떨리고 굵기가 들쭉날쭉했다.

그 떨림이 그 그림의 인상이었다. 균일하게 만든 순간 다른 그림이 되어 있었다.

기술적인 장점을 세는 동안 무엇을 잃는지는 안 세고 있었다. 얻는 것은 목록으로 적히고 잃는 것은 안 적힌다
「더 나은 방식」이라는 말에는 무엇을 기준으로 나은지가 빠져 있다. 확대해도 안 뭉개지는 게 기준이면 벡터가 낫고, 그 사람 손이 남는 게 기준이면 원본이 낫다

그리는 사람이 따로 있으면 그 손을 지우지 않는다

이걸 규칙으로 적어 뒀다. 그림을 다루기 편하게 바꾸는 것과 그림을 다시 그리는 것은 다른 일이다.

밝기를 투명도로 바꾸는 건 앞엣것이다 — 선의 모양은 그대로고 보이는 방식만 바뀐다. 벡터로 다시 그리는 건 뒤엣것이다.

남이 만든 것을 다룰 때는 어느 쪽인지 먼저 가른다. 경계가 흐리면 물어본다
물어볼 수 있는 사이면 물어보는 게 제일 싸다. 이날은 물어보기 전에 다시 그렸다가 되돌렸다

쉬는 날 CLOSED 팻말을 안 만들기로 했다

쉬는 날에 CLOSED 팻말을 띄우고 「그래도 열기」를 남길 생각이었다. 그만뒀다.

막을 생각이 없는 팻말은 한 번 더 누르게 하는 장치일 뿐이다. 대체근무나 주말 출근이 드물지 않은 일이라, 그 한 번이 쓸 때마다 걸린다.

무언가를 보여주기로 할 때 「이게 무엇을 바꾸나」를 묻는다. 아무것도 안 바꾸면 그건 안내가 아니라 단계다
정보를 주는 것과 길을 막는 것은 다르다. 막을 생각이 없으면 정보만 주고 길은 열어 둔다

결정 하나가 다른 결정을 같이 닫는다

팻말을 안 만들기로 하자 보류해 두었던 공휴일 처리도 같이 닫혔다. 「오늘이 공휴일인가」를 물을 곳이 그 팻말뿐이었기 때문이다.

미뤄 둔 결정이 왜 미뤄져 있는지를 적어 두면 이런 게 보인다. 공휴일을 미뤄 둔 이유가 「쉬는 날 화면 때문에 필요하다」였는데, 그 화면이 없어지니 이유째 사라졌다
이유 없이 「나중에」라고만 적어 둔 항목은 영원히 남는다. 없어질 기회를 못 알아보기 때문이다

범위가 넓은 요청은 먼저 가른다

남이 봐도 괜찮은 퀄리티로 올려 보기로 했다. 어디부터 손대야 할지가 먼저 문제였다.

두 무더기로 갈랐다.

코드만 봐도 확실한 것 — 폰트가 안 실린 것, 파비콘이 없는 것, 공유 카드가 없는 것
화면을 봐야 아는 것 — 여백, 색, 정렬, 첫인상

앞엣것을 먼저 하고 뒤엣것은 보는 사람에게 넘겼다.

화면을 못 보는 쪽이 여백을 짐작해 고치기 시작하면 고친 만큼 어긋난다. 짐작으로 고친 것은 되돌리기도 어렵다
넓은 요청은 그대로 받으면 어디서 끝나는지 모른다. 확실한 것부터 걷어내면 남은 것이 무엇을 물어봐야 하는지로 좁아진다

Series: Today I Learn