제품운영 중
이 웹사이트
Squarespace에서 옮겨 와 같은 도메인에 Next.js 앱으로 다시 만든 개인 사이트예요. 네 가지 언어를 지원해요.
Next.js · TypeScript · Payload CMS · Postgres · next-intl · Tailwind CSS · Vercel
문제
Squarespace 사이트에서는 프로젝트가 두 단계 깊숙이 묻혀 있었고, 아무것도 말해 주지 않는 상투적인 문구로 작업을 설명하고 있었어요. 네 가지 언어를 동시에 정직하게 지원할 방법도 없었고요. 모든 페이지가 존재하지 않는 번역을 암시하고 있었어요.
해결
Payload를 CMS로, Postgres를 데이터베이스로 사용하는 Next.js 앱을 Vercel에 배포했어요. 글 하나하나가 네 가지 언어를 모두 담은 문서 하나로 되어 있고, 아직 번역되지 않은 내용은 사이트가 깨지는 대신 영어로 표시돼요. 페이지는 미리 렌더링하고 제가 게시할 때 새로고침해서, 서드파티 스크립트 없이도 사이트가 빠르게 유지돼요.
- 맡은 일
- 디자인, 개발, 콘텐츠 구조 설계를 맡았어요.
- 배경
- Squarespace에서 다시 만든 개인 사이트예요.
- 기간
- 2026
결과
4
하나의 콘텐츠 모델에서 제공하는 네 가지 언어와 정직한 hreflang
0
공개 사이트의 서드파티 스크립트
예전 사이트는 Squarespace 템플릿이었어요. 시작하기는 빠르지만 키워 가기는 어려웠죠. 프로젝트는 두 번 클릭해야 나왔고, 모든 내용이 한 언어로만 되어 있었으며, 수정할 때마다 다른 사람이 만든 에디터 안에서 작업해야 했어요.
새 사이트는 TypeScript와 Next.js, React Server Components로 만들고 Tailwind CSS로 스타일을 입혔어요. 글, 그림, 사진, 동영상, 프로젝트는 모두 Postgres 위의 Payload CMS에 들어 있어서 휴대폰으로도 뭐든 수정할 수 있어요. next-intl이 모든 페이지를 영어, 일본어, 터키어, 한국어로 제공해요.
Vercel에서 돌아가고 주소도 muratodesu.com 그대로라서, 예전 페이지로 향하는 링크도 여전히 어딘가로 연결돼요. 움직임은 대부분 CSS로 처리했고, 기기에서 움직임 줄이기를 요청한 사람에게는 가만히 있어요.