Next.js로 리뉴얼한 syw.kr ⚡

이전보다 훨씬 빠르고, 더 강력해졌습니다

syw.kr을 처음 공개했을 때는 Remix 기반으로 구축해 깔끔한 SSR 구조를 최대한 활용했습니다.
하지만 사이트가 점점 확장되면서 더 높은 퍼포먼스, 더 단단한 SEO 구조,
그리고 더 유연한 아키텍처에 대한 필요성이 커졌습니다.

이번 리뉴얼에서는 syw.kr 전체를 Next.js(App Router) 기반으로 새롭게 구성했습니다.
결과는 명확합니다.
Remix 시절보다 모든 면에서 더 빨라지고, 더 강력해졌습니다.

🚀 왜 Next.js로 전환했을까?

1. 체감할 수 있는 속도 향상

• 페이지 전환이 거의 즉각적
• 스트리밍 렌더링으로 초기 화면이 빨리 뜸
• React Server Components로 HTML 자체가 가벼워짐

실제로 페이지를 이동해보면 '왜 이제서야 갈아탔지?'라는 생각이 들 정도였어요.

2. SEO가 훨씬 강력해짐 🔍

Next.js는 SEO 친화적인 구조를 기본 탑재하고 있습니다.

• 메타데이터 시스템
• OG/Twitter 카드 자동 최적화
• 서버 렌더링 기반 구조
• 더 빠른 LCP

검색 엔진 크롤러에게도, 사용자의 첫 로딩 속도에도 확실히 유리해졌습니다.

3. 확장성을 고려한 구조 💡

syw.kr은 단순한 개인 포트폴리오가 아닙니다.
여러 기능을 갖춘 작은 서비스 집합에 가깝습니다.

• FE 스쿨 📘
• 실시간 상담(채팅) 💬
• 블로그 ✍️
• 프로젝트 쇼케이스
• 방문 통계 Analytics 📊

Next.js는 이처럼 섹션이 다양한 사이트를 관리하기에 특히 적합합니다.
Server Actions, API Route, RSC를 각각 용도에 맞게 조합할 수 있어 개발 경험 자체가 매우 쾌적해졌습니다.

✨ 리뉴얼 후 달라진 점

✔ 체감 성능이 확실히 향상

초기 로딩 + 페이지 전환 모두 부드러워졌습니다.

✔ 코드 구조가 더 안정적

폴더 구조, 레이아웃, SEO, 컴포넌트 분리가 명확해졌습니다.

✔ 기능 추가가 쉬워짐

변경 범위가 줄어들고 유지보수 효율이 크게 올라갔습니다.

✔ 서버·클라이언트 분리가 자연스러워짐

RSC 기반으로 서버에서 처리할 수 있는 건 전부 서버에서 처리합니다.

🌱 syw.kr의 다음 목표

이번 Next.js 리뉴얼은 단순한 업데이트가 아니라,
앞으로 syw.kr이 더 성장하기 위한 기본 구조를 다잡는 과정이었습니다.

앞으로는:

• FE 스쿨 커리큘럼 확장
• 실시간 서비스 개선
• 프로젝트 가이드 보강
• 강의/블로그 편집 환경 고도화
• 개인 브랜딩 SEO 강화

이런 흐름으로 계속 발전시켜 나갈 예정입니다.

읽어주셔서 감사합니다 🙂
더 나은 syw.kr을 위해 계속 개선해 나가겠습니다.