kmj228.com

무엇을 만들었나

이렇게 정했습니다

• 페이지를 넘기지 않습니다

  작업물을 누르면 옆에서 상세가 열리고, 원래 화면은 그대로 남아 있습니다.
  뒤로 가기, Esc, 바깥 클릭 중 편한 방법으로 닫으면 됩니다.

• 주소로 바로 공유됩니다

  상세를 열면 주소도 함께 바뀌어서,
  그 주소를 보내면 받은 사람도 같은 상세를 바로 봅니다.

• 기본은 라이트, 원하면 다크

  처음에는 밝은 화면으로 열리고, 다크 모드를 고르면 다음에도 기억합니다.
  바꿀 때 색이 한 번에 튀지 않고 부드럽게 넘어갑니다.

• 한국어와 영어

  브라우저 언어에 맞춰 열리고,
  하단에서 언제든 바꿀 수 있습니다.

• 휴대폰에서도

  화면 크기에 맞춰 배치가 바뀌고,
  터치 기기에서는 잉크 효과를 빼서 가볍게 보여줍니다.

• 아무것도 추적하지 않습니다

  방문자 분석 도구, 광고, 쿠키 배너가 없습니다.
  글꼴과 아이콘까지 직접 올려 두어서, 외부 서비스를 하나도 부르지 않습니다.

잉크

• 마우스를 따라 잉크가 번집니다

  WebGL로 직접 만들었습니다. 잉크가 지나간 자리는 반대 테마로 보입니다.
  라이트와 다크의 색을 정확히 반대로 맞춰서, 잉크 아래 글자와 선도 함께 뒤집힙니다.

• 아무리 길게 그려도

  방울을 하나씩 계산하지 않고 농도를 한 장의 화면에 쌓아서,
  길게 그려도 먼저 그린 잉크가 갑자기 사라지지 않습니다.

• 자연스럽게 마릅니다

  근처에 다시 그리면 마르던 잉크가 되살아나고,
  마를 때 작은 방울이 남지 않게 다듬었습니다.

• 내용을 가리지 않습니다

  작업물 카드와 기술 태그 위에는 번지지 않고,
  하단 버튼으로 언제든 끌 수 있습니다.

빠르게

• 누르기 전에 준비합니다

  작업물에 마우스를 올리면 상세 내용과 사진, 글꼴을 미리 받아 둡니다.
  누르는 순간 바로 열립니다.

• 필요한 만큼만 받습니다

  사진은 WebP로, 화면 크기에 맞는 크기로 받습니다.
  글꼴도 쓰는 글자만 나눠서 받습니다.

• 첫 화면이 깜빡이지 않습니다

  테마는 화면을 그리기 전에 정하고, 제목은 글꼴이 준비된 뒤에 보여줍니다.
  열자마자 색이 바뀌거나 글자가 튀지 않습니다.

• 안 보이는 곳은 쉽니다

  상세를 열어 둔 동안이나 다른 탭을 보는 동안에는 잉크를 멈춰서,
  보이지 않는 곳에 자원을 쓰지 않습니다.

안전하게

• 공개할 파일만 내보냅니다

  서버는 정해 둔 공개 파일만 보내고,
  숨김 파일이나 서버 코드는 주소를 알아도 열리지 않습니다.

• 허락한 코드만 실행됩니다

  서버가 페이지마다 스크립트의 지문(해시)을 계산해 보안 정책(CSP)에 넣습니다.
  누군가 코드를 끼워 넣어도 브라우저가 실행하지 않습니다.

• 보안 헤더를 붙입니다

  다른 사이트 안에 몰래 넣어 누르게 하는 공격(클릭재킹)과
  주소 정보가 새어 나가는 것을 막는 헤더를 모든 응답에 붙입니다.

• 서버를 밖에 드러내지 않았습니다

  Cloudflare Tunnel로만 연결해서
  서버의 IP와 포트를 외부에 열어 두지 않습니다.

누구나 쓸 수 있게

• 키보드만으로도

  모든 버튼과 링크를 키보드로 쓸 수 있고, 지금 어디에 있는지 테두리로 보입니다.
  상세를 열면 초점이 상세로 옮겨 가고, 닫으면 원래 자리로 돌아옵니다.

• 화면 낭독기로도

  아이콘만 있는 버튼에도 이름을 붙이고, 사진에는 설명을 달았습니다.
  상세가 열려 있는 동안 뒤 화면은 읽히지 않게 막습니다.

• 움직임을 줄일 수 있습니다

  시스템에서 ‘동작 줄이기’를 켜 두면
  등장 효과와 잉크를 끕니다.

기술