지금 보고 있는 이 사이트다. 템플릿이 아니라 작은 제품으로 만들고 관리하는 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를 저장하는 대신 해싱하는 작은 서버리스 함수가 센다. 그래서 쿠키나 개인 데이터가 없다.
왜 중요한가
이 사이트는 나머지 프로젝트들이 어떻게 만들어지는지 보여주는 작동하는 예시이기도 하다 — 성능, 프라이버시를 존중하는 애널리틱스, 다국어 지원, 접근성을 모두 한곳에서 뜯어볼 수 있다. 저장소가 공개되어 있으니, 코드를 이 설명과 대조해볼 수 있다.