홈페이지에 올라간 영상이 200개를 넘는데 자막이 붙은 것은 하나도 없었다. 홍보영상, 뉴스에 나온 장면, 교가까지. 영상 아래에 내용을 텍스트로 적어둔 것은 있었다. 그런데 접근성 검수에서 그것으로는 안 된다고 걸렸고, 영상 하나하나에 사람이 자막을 받아 적을 수는 없었다. 결국 음성 인식으로 초안을 뽑고 손으로 다듬어 전부 붙였다. 그 과정에서 알게 된 것들을 정리한다. 자막 파일을 만드는 쪽과 웹에 붙이는 쪽 양...
Read MoreCSS 단위는 한동안 px, em, %, 인쇄용 pt 정도였다. 지금은 길이 단위만 세어도 마흔 개에 가깝다. rem이 들어오고, 뷰포트 단위가 들어오고, 그 뷰포트 단위가 다시 셋으로 갈라지고, 컨테이너 단위가 들어오고, 글꼴 단위마다 r 붙은 짝이 생겼다. 이걸 전부 외울 필요는 없다. 단위가 늘어난 방향은 하나다. "무엇을 기준으로 재는가"의 선택지가 늘어난 것이다. 기준을 알면 단위는 저절로 나온다. 단위는 기준으로 나뉜다 모...
Read More게시판 글쓰기 화면의 textarea는 늘 두 줄 높이로 시작한다. 세 줄째부터 스크롤바가 생기고, 사용자는 자기가 쓴 글의 윗부분을 못 보면서 계속 쓴다. 그래서 어느 프로젝트에나 이런 코드가 하나씩 있다. textarea.addEventListener('input', function () { this.style.height = 'auto'; this.style.height = this.scrollHeight + 'px'; }); 키를 누를 때마다 높이를 0으로 눌렀다가 scrollHeight만큼 다시 편다. 동작은 하지만...
Read More목록 화면 아래에는 대개 이런 줄이 붙어 있다. « ‹ 6 7 8 9 › ». 데스크톱에서는 이 줄이 아무 문제를 일으키지 않는다. 폭이 900px쯤 되니 번호 아홉 개에 이동 버튼 넷을 붙여도 여유롭다. 폰에서 같은 줄을 열면 사정이 달라진다. 그리고 대부분의 프로젝트가 같은 방식으로 이 문제를 처리한다 — 번호 개수를 줄인다. 데스크톱은 9개, 모바일은 4개. 이 타협을 오래 쓰다가 결국 버렸다. 번호를 줄이는 대신, 넘치면 가로로 ...
Read More서버에 접속해 cat /etc/os-release를 쳐본다. Rocky Linux 9.4가 나온다. 그래서 이 서버는 안전한가? 답할 수 없다. 버전 번호는 그 자체로 아무것도 말해주지 않는다. 9.4가 아직 지원되는지, 이미 다음 포인트 릴리스에 밀려났는지, 언제까지 보안 패치가 오는지 — 전부 밖에서 찾아봐야 아는 정보다. 이걸 매번 검색으로 해결하다 보면 결국 한 곳에 정착하게 된다. endoflife.date다. 먼저, 우리가 왜 이 걱정을 하게 됐나 E...
Read More메일 서명에 회사 로고를 넣기로 했다. 웹에서 하던 대로 data: URI로 이미지를 본문에 박아 넣으면 될 것 같았다. 외부 요청이 없으니 이미지 차단에도 안 걸릴 테고. 정확히 반대였다. 메일 클라이언트는 브라우저가 아니다 웹에서 data: URI는 요청 한 번을 아끼는 좋은 수단이다. 메일에서는 가장 나쁜 선택지다. 클라이언트 img src="data:image/png;base64,…" Gmail (웹·모바일)태그를 걷어낸다. 렌더되지 않는다 Outlook 데...
Read More선택 입력 위젯에 안내 문구를 한글로 넣었더니 중간에서 잘렸다. "메일주소 입력 후 쉼표 또는 엔터"라고 썼는데 화면에는 "메일주소 입력 후 쉼표 또"까지만 보인다. 영문으로 바꿔보면 멀쩡하다. 글자를 줄이면 또 멀쩡하다. CSS를 아무리 뒤져도 폭을 제한하는 규칙이 없다. 범인은 위젯이 인라인으로 박아넣는 한 줄이었다. // Choices.js — Input.setWidth() input.style.minWidth = (placeholder.length + 1) + 'ch'; 글자 ...
Read More배포를 하거나 데이터베이스를 손보는 동안, 사용자가 들어오면 곤란한 시간이 있다. 마이그레이션이 절반쯤 돌아간 상태에서 누가 글을 저장하면 어떻게 되는지는 아무도 알고 싶지 않다. 그래서 점검 페이지를 띄운다. 간단해 보이는 기능이다. 그런데 정작 필요한 순간에 점검 페이지 자체가 안 뜨는 일이 있다. 아래는 그 문제를 피하려고 만들어본 한 가지 방법이다. 정답이 하나인 영역은 아니어서, 갈림길마다 왜 그쪽을 골...
Read More사내 그룹웨어를 모바일 대응하고 나면 마지막 한 걸음이 남는다. 폰 홈 화면에 아이콘으로 올려서 앱처럼 쓰게 하는 것이다. 앱스토어에 올릴 것도 아니고, 네이티브 앱을 만들 것도 아니다. 사파리에서 공유 → 홈 화면에 추가만 하면 끝난다. 아이콘이 생기고, 탭하면 주소창 없이 전체화면으로 뜬다. 여기까지는 아무것도 안 해도 된다. 문제는 그다음이다. 링크를 한 번 눌렀더니 브라우저가 됐다 첫 화면은 분명 앱처럼 떴다....
Read More관리자 화면의 목록 표는 열이 많다. 프로젝트 목록 하나에도 구분·이름·업체·기간·진행률·담당·코드·등록일이 붙는다. 데스크톱에서는 아무 문제가 없다. 표는 원래 여러 값을 한눈에 늘어놓으라고 있는 물건이니까. 그런데 폰에서 열어보면 무너진다. 폭 393pt 안에 열 여덟 개를 넣을 방법은 없다. 가로 스크롤은 표를 포기하는 것이다 가장 손쉬운 답은 표를 그대로 두고 overflow-x:auto로 감싸는 것이다. 구현에 1분이 걸린...
Read More