오픈데이 Openday 6

오늘 한 일

• 쉬는 날 CLOSED 팻말은 안 만들기로 정했다
  • 원래는 주말에 팻말을 띄우고 「그래도 열기」를 남길 생각이었다
  • 팻말은 아무것도 막지 못한다. 어차피 넘어갈 것이라 한 번 더 누르게 할 뿐인데, 대체근무·주말 출근이 드물지 않아 그 한 번이 매번 걸린다
  • 근무 요일이 하는 일은 이월 날짜 계산뿐으로 확정했다. 그러자 공휴일 처리도 같이 닫혔다 — 팻말이 없으니 「오늘이 공휴일인가」를 물을 곳이 사라졌다
• 폰트를 같이 배포하게 했다
  • 화면에 쓴다고 적어 두고 어디서도 안 불러오고 있었다. 깔린 사람에게만 보이고 나머지는 시스템 폰트로 떨어져서, 사람마다 다른 화면을 보고 있었다
  • 외부에서 부르지 않고 파일을 같이 실었다. 폰트 하나 때문에 남의 서버에 의존할 이유가 없다
• 파비콘을 만들었다
  • 실제 탭 크기(16px)로 후보 넷을 그려 놓고 골랐다. 크게 보면 다 괜찮은데 작게 줄이면 반이 뭉개진다
• 링크 공유 카드(og image)를 만들었다
  • 링크로 주고받는 앱인데 주소를 보내면 아무것도 안 떴다
  • 앱 색을 그대로 써서 열었을 때와 같은 인상이 되게 했다. 왼쪽에 이름, 오른쪽에 업무판 — 위 두 줄에만 도장이 찍혀 있어 「하는 중인 하루」로 보인다
• 셔터에 강아지를 붙였다
  • 받은 그림이다. 셔터가 내려와 있을 때 CLOSED 팻말 위에 뜬다
  • 실제 가게 셔터에 스프레이로 그린 낙서처럼 보이게 흰 선으로 바꿨다

---

막힌 부분

쓴다고 적어 두고 안 싣고 있었다

화면 퀄리티를 올리자는 이야기가 나와서 코드를 훑다가 찾았다. 스타일 파일 첫 줄에 이 폰트를 쓴다고 적어 두고, 그 폰트를 어디서도 안 불러오고 있었다.

font-family: 'Noto Sans KR', system-ui, sans-serif;

이렇게 적으면 그 폰트가 깔린 사람에게만 보이고, 없으면 뒤에 적힌 것으로 떨어진다. 그러니까 지금까지 사람마다 다른 화면을 보고 있었던 셈이다. 간격과 굵기를 그 폰트에 맞춰 잡아 왔으니 떨어진 쪽에서는 맞춰 온 여백이 다 어긋난다.

• 해결: 폰트 파일을 앱과 같이 배포하고 불러오게 했다
• 이건 화면을 봐서는 못 찾는다. 만든 사람 컴퓨터에는 그 폰트가 깔려 있으니까
• 「쓴다고 적은 것」과 「실제로 쓰이는 것」이 다를 수 있다는 걸 이름만 보고는 알 수 없다

원본 그림을 그대로 얹으면 흰 네모가 생긴다

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

색을 뒤집어 봤더니 이번엔 반대가 됐다. 선은 하얘지는데 바탕이 검게 변해서 검은 네모가 된다.

• 해결: 밝기를 그대로 투명도로 바꿨다. 어두운 픽셀은 진하게, 흰 바탕은 완전히 투명하게
• 이 방식은 선 경계의 회색이 그대로 살아서 계단이 안 생긴다
• 색을 다루는 문제로 보였는데 실은 「무엇을 안 보이게 할까」의 문제였다

다시 그렸다가 되돌렸다

처음에는 선을 따서 다시 그렸다 — 크기를 키워도 안 뭉개지고 색도 자유로우니 그게 나아 보였다. 그런데 원본을 그대로 살리지 못했다. 원본 파일을 그대로 놓고 둘을 나란히 보니 차이가 드러났다.

• 다시 그린 것은 선이 균일하고 깔끔하다

• 원본은 선이 떨리고 굵기가 들쭉날쭉하다. 그게 그 그림의 인상이었다

• 해결: 원본 파일을 그대로 쓰고, 다시 그린 것은 걷어냈다

• 「기술적으로 나은 것」이 「그 그림」은 아니었다. 그리는 사람이 따로 있으면 그 손을 지우지 않는 쪽이 맞다

파비콘이 16px에서 안 읽혔다

갈색 바탕에 빨간 체크로 만들었다. 앱에서 쓰는 색 두 개를 그대로 가져온 것이라 문제없다고 봤다.

작게 줄여 보니 체크가 거의 안 보였다. 두 색의 밝기가 붙어 있어서 나란히 두면 형태가 안 갈린다. 크게 볼 때는 안 보이던 문제다.

• 해결: 후보 넷을 실제 탭 크기(16·24·32px)로 그려 놓고 골랐다. 밝은 탭과 어두운 탭 배경 양쪽에 올려서
• 같은 색을 쓴다고 아무 조합이나 되는 게 아니다. 색을 고를 때는 명도 차이를 따로 봐야 한다
• 작은 자리에 들어갈 것은 작게 그려 봐야 안다. 크게 보고 고르면 반은 틀린다

---

다음에 할 일

• 모바일 화면 재설계 — 가로로 미끄러지는 방 이동, 마우스를 올려야 보이는 표시, 넓은 광고 자리 모두 손가락 화면을 전제하지 않았다. 줄이는 게 아니라 다시 짜야 한다
• 이월 사슬을 날짜가 바뀐 뒤에 실제로 확인하기
• 사람들에게 열기 전 구글 확인 절차 — 소유한 도메인이 필요하다
• 이모지를 정해진 것 중에 고르는 대신 자유롭게 넣거나 아예 빼게 하기
• 언어와 날짜 표기 방식 통일

---

Series: 오픈데이 Openday

---

Suggested Posts