imdevman.com

콘셉트

먼저 보이는 것은 문장입니다. 제목이 관심을 붙잡고, 그 관심이 머무는 동안 유화의 물감 점이 걷히며 이미지와 이야기가 드러납니다. 점묘화는 내용을 꾸미는 배경이 아니라, 아직 선택하지 않은 이야기를 담아 두는 베일입니다.

머무름에서 시작하는 공개

빠르게 스크롤할 때는 문장만 남습니다. 제목에 마우스나 키보드 포커스를 잠시 두거나, 스크롤을 멈추고 화면 중앙의 문장에 머무르면 그 주제만 공개됩니다. 제목을 누르면 기다리지 않고 펼칠 수 있습니다. 공개는 제목에서 시작해 주변으로 번지고, 한 번 읽기 시작한 내용은 창 크기나 언어를 바꾸거나 상세 페이지에서 돌아와도 같은 탭에서는 다시 가리지 않습니다. 나란히 놓인 제목은 포인터·포커스·누르기로 선택합니다. 눈을 추적하지 않으며, 열어 본 주제만 탭 안에 기억하고 외부로 전송하지 않습니다.

그리는 방법

• 페이지의 배경·테두리·이미지·글자를 캔버스 한 장에 다시 그립니다(페이지 래스터).
• WebGL2 셰이더가 그 래스터를 회전과 위치가 서로 다른 지터 그리드 세 겹의 타원형 물감 점으로 칠합니다.
• 점의 색은 그 아래 평균색(밉맵)에서 가져와 채도와 명도를 흔듭니다. 일부 점은 그림자에서는 울트라마린·보라, 중간 톤에서는 로즈·주황, 밝은 곳에서는 하늘색·라벤더·살구색으로 바뀝니다.
• 점마다 왼쪽 위에서 빛이 드는 임파스토 음영과 붓결을 넣고, 바탕에는 리넨 캔버스 결을 깝니다.
• 화면과 위아래 여백만 덮는 WebGL 캔버스 한 장을 스크롤과 공개 동작에 맞춰 그립니다. 캔버스가 문서와 함께 스크롤되므로 한 프레임이 늦어도 그림과 페이지가 어긋나지 않습니다. 공개한 자리는 마스크에 남깁니다.

문장에 집중하는 움직임

• 히어로의 점묘화가 잔잔하게 흐르고, 열린 밤하늘에서는 은하가 회전하고 성운과 별이 서로 다른 깊이에서 움직입니다. 마우스에 따라 시차가 생기며 별빛과 간헐적인 유성이 더해집니다. 나머지 점묘화는 읽는 동안 가만히 머뭅니다.
• 우주 움직임은 버튼으로 멈추거나 다시 재생할 수 있습니다. 움직임 줄이기 설정에서는 정지 화면을 유지합니다.
• 관심을 보인 제목에서 물감이 걷히며 해당 이야기만 드러납니다.
• 제목과 버튼은 제자리를 지켜 읽거나 누르기 편합니다. 페이지를 옮긴 뒤에도 바로 조작할 수 있습니다.

손가락과 키보드

휴대폰에서는 읽고 싶은 문장에서 스크롤을 멈추거나 제목을 눌러 내용을 펼칩니다. 키보드로는 제목에 포커스를 두거나 Enter·Space로 즉시 열 수 있습니다. 숨겨진 내용은 클릭이나 키보드 이동의 대상이 되지 않으며, 제목 버튼이 펼침 상태를 스크린 리더에 알립니다. ‘모두 펼치기’로 한 번에 읽을 수도 있습니다.

움직임 줄이기 설정에서는 관심을 감지한 뒤 애니메이션 없이 공개합니다. JavaScript나 WebGL을 쓸 수 없으면 모든 내용을 바로 보여 줍니다. 상세 페이지까지 찾아온 독자는 이미 이야기를 선택했으므로, 이미지와 본문은 처음부터 선명하게 읽을 수 있습니다.

성능

사이트는 Astro로 만든 정적 파일이고 Cloudflare 엣지에서 무료로 서빙됩니다. 페이지 래스터는 레이아웃·폰트·이미지가 바뀔 때 갱신하며, 네트워크 로딩이 제목 조작을 막지 않습니다. 우주는 화면에 보이는 동안 최대 초당 30번 그리며, 성운과 은하 이미지를 재사용합니다. 화면 밖·비활성 탭에서는 우주 렌더링이 멈추고, 나머지 베일은 스크롤과 공개 동작 때만 그립니다. 점묘화의 프레임이 느려지면 해상도를 한 단계씩 낮춥니다.