이 웹사이트는 이렇게 만들었습니다.

조직으로 Apple 개발자 등록을 하면 Apple이 회사 웹사이트를 확인합니다. 그래서 제대로 된 웹사이트는 우선순위가 높았습니다. 이 사이트를 어떻게 만들었는지 소개합니다.

기술 스택

• Next.js(App Router).
• Cloudflare Workers에서 실행하고, OpenNext adapter를 씁니다.
• next-intl로 다국어를 지원합니다.
• Tailwind CSS로 스타일을 입힙니다.

이 사이트도, 각 앱의 사이트도 모두 같은 구성입니다. 방식이 하나면 기억할 것도, 고장 날 곳도 적습니다.

첫날부터 3개 언어

사이트는 영어, 번체 중국어, 간체 중국어로 시작했습니다. 영어에는 접두사가 없고(/blog), 다른 언어에는 있습니다(/zh-Hant/blog). 모든 문구는 언어마다 하나의 JSON 파일에 넣고, 컴포넌트에 직접 쓰지 않습니다. 나중에 언어를 추가할 때는 파일 하나만 늘리면 됩니다.

나중에 정말 그런지 확인하려고 일본어와 한국어를 추가했습니다. 언어마다 파일 하나가 늘었고, 사이트의 다른 부분과 어울리는 둥근 글꼴을 골랐습니다.

데이터베이스도, CMS도 없음

블로그 글은 코드 안의 평범한 파일입니다. 글을 쓰려면 파일을 하나 추가하고 배포하면 끝입니다. 혼자 운영한다면 어떤 CMS보다 간단하고, 해킹당하거나 비용을 낼 일도 없습니다.

(거의) 코드 없는 방문 분석

어떤 글이 읽히는지 알고 싶어서, Cloudflare의 태그 매니저인 Zaraz를 통해 Google Analytics 4를 씁니다. GA4 설정은 코드가 아니라 Cloudflare 대시보드에 있어서, 다시 배포하지 않아도 바꿀 수 있습니다.

두 가지 뜻밖의 일

1. Zaraz가 나타나지 않았다. Zaraz는 원래 모든 페이지에 스크립트를 알아서 넣어야 합니다. 그런데 제 사이트에서는 그러지 않았습니다. 페이지를 Worker가 만들고 있었고, 스크립트는 한 번도 추가되지 않았습니다. 해결책은 페이지 head에 한 줄을 넣는 것이었습니다:<script src="/cdn-cgi/zaraz/i.js">. 이제 모든 페이지에서 불러옵니다.

2. 쿠키 창이 페이지 전체를 막았다. EU와 영국 방문자에게는 방문 분석이 작동하기 전에 동의를 받아야 합니다. Zaraz에도 동의 창이 있지만, 페이지 전체를 덮고, 제 디자인과 어울리지 않으며, 언어도 페이지가 아니라 브라우저를 따릅니다. 그래서 페이지 하단에 작은 배너를 직접 만들고, 사이트의 모든 언어로 제공했습니다. 선택은 여전히 Zaraz가 저장하고, 사이트는 질문만 합니다. 그리고 "거부"도 "동의"만큼 쉽습니다.

두 문제 모두 사이트를 공개한 뒤에야 드러났습니다. 교훈: 문서를 읽었다면, 실제 환경에서 꼭 테스트하세요.

비용

Workers 유료 플랜은 월 5달러이고, 제 모든 사이트를 감당합니다. 도메인은 첫해 1달러였습니다.

단순하고, 저렴하고, 빠릅니다. 작은 회사의 웹사이트에 필요한 건 그게 전부입니다.