지금 보고 있는 이 사이트다. 템플릿이 아니라 작은 제품으로 만들고 관리하는 Next.js 14 프로젝트다, 코드베이스가 공개되어 있어서 아래 내용은 모두 검증 가능하다. Lighthouse에서 데스크톱 99/100, 모바일 97/100 점수를 받았고, 접근성과 SEO는 100점이다.
무엇이 들어 있나
-
12개 언어: 이 사이트는 영어, 독일어, 스페인어, 프랑스어, 힌디어, 이탈리아어, 일본어, 한국어, 포르투갈어, 러시아어, 터키어, 중국어로 제공된다. 타입이 지정된 언어 컨텍스트와 번역 맵이 전환기를 구동하는데, 이 전환기는 선택을 기억하고 페이지의
lang속성을 업데이트해서 스크린 리더와 검색 엔진이 올바른 언어를 읽도록 한다. 연락 폼을 포함해 모든 문자열이 다 커버된다. -
빠르게 유지되는 파티클 배경: 커서를 따라오는 점들은 캔버스에 그려진다. 초기 버전은 마우스가 움직일 때마다 캔버스 위치를 측정해 끊임없이 레이아웃을 다시 계산하느라 버벅였다. 그 측정을 캐싱하니 끊김이 사라졌고, 파티클을 지연 로딩해서 첫 페인트에서 빼둔다, 데스크톱 점수를 99로 올린 건 대부분 이 덕분이다.
-
광고 차단기가 조용히 망가뜨리지 않는 애널리틱스: 서드파티 도메인에서 로드되는 애널리틱스 스크립트는 uBlock이나 Brave 같은 차단기에 조용히 버려져, 아무 경고 없이 이벤트의 20~40%를 잃는다. 애널리틱스를 사이트 자체 도메인을 통해 라우팅하면 데이터가 퍼스트파티로 온전하게 유지된다. Umami가 프라이버시 친화적인 통계를 처리하고, Google Tag Manager가 나머지를 맡는다.
-
제대로 된 SEO 기본기: 인물과 각 프로젝트에 대한 구조화 데이터, 모든 페이지의 12개 버전에 걸친 올바른 언어 태그, 번역본끼리 경쟁하지 않도록 하는 canonical URL, 그리고 프로젝트별로 생성되는 소셜 미리보기 카드.
-
접근성: 본문 건너뛰기 링크, 키보드 사용자를 위한 눈에 보이는 포커스 윤곽선, AA를 통과하는 텍스트 대비, 스크린 리더에서 숨긴 장식용 애니메이션, 그리고 스타일만 입힌 div가 아니라 제대로 탐색 가능한 마크업으로 만든 언어 메뉴.
-
콘텐츠는 그냥 Markdown: 프로젝트를 추가한다는 건 알맞은 언어 폴더에 Markdown 파일을 하나 넣는 것, 코드 변경 없이 다음 배포에 완전히 타입이 지정된 채로 나타난다. 페이지 조회수는 IP를 저장하는 대신 해싱하는 작은 서버리스 함수가 센다. 그래서 쿠키나 개인 데이터가 없다.
왜 중요한가
이 사이트는 나머지 프로젝트들이 어떻게 만들어지는지 보여주는 작동하는 예시이기도 하다, 성능, 프라이버시를 존중하는 애널리틱스, 다국어 지원, 접근성을 모두 한곳에서 뜯어볼 수 있다. 저장소가 공개되어 있으니, 코드를 이 설명과 대조해볼 수 있다.