내 포트폴리오 웹사이트를 최적화한 방법
포트폴리오는 첫인상입니다. 로딩이 느리거나 구글 검색 결과에 나타나지 않는다면 기회를 놓치게 됩니다. 저는 속도, SEO, 그리고 유지보수를 위해 사이트를 최적화했습니다.
저의 접근 방식은 다음과 같습니다.
속도 및 성능
가벼운 스택을 선택하세요. Astro나 Next.js와 같은 정적 사이트 생성기(SSG)를 사용하세요. 이러한 도구들은 무거운 프레임워크보다 적은 양의 JavaScript를 전달합니다.
무거운 UI 라이브러리는 피하세요. 몇 킬로바이트라도 아끼기 위해 간단한 컴포넌트는 직접 만드세요.
폰트는 셀프 호스팅하세요. DNS 조회를 줄이기 위해 서드파티 CDN 사용을 피하세요. 레이아웃 시프트(layout shift)를 방지하려면 font-display: swap을 사용하세요.
모든 이미지를 최적화하세요.
- 이미지를 WebP 또는 AVIF로 변환하세요.
- 업로드하기 전에 이미지 크기를 조정하세요.
- 화면 아래쪽에 위치한 이미지에는
loading="lazy"를 사용하세요. - 레이아웃 시프트를 방지하기 위해
width와height속성을 추가하세요.
JavaScript를 관리하세요.
- 라우트를 코드 분할(code-split)하세요.
- 분석 도구와 같은 비핵심 스크립트는 지연(defer)시키세요.
- 번들 크기를 정기적으로 점검하세요.
SEO 및 구조
모든 페이지에 고유한 제목(title)과 메타 설명(meta description)을 사용하세요.
시맨틱 HTML을 사용하세요. 페이지당 하나의 H1을 사용하고 nav, main, footer와 같은 적절한 태그를 사용하세요.
Open Graph와 Twitter Card 태그를 추가하세요. 이렇게 하면 링크를 공유할 때 훨씬 보기 좋습니다.
sitemap.xml과 robots.txt를 포함하세요. 이는 검색 엔진이 사이트를 찾는 데 도움이 됩니다.
JSON-LD 구조화된 데이터를 사용하세요. 이를 통해 검색 엔진에 본인이 누구인지 정확히 알려줄 수 있습니다.
접근성과 SEO를 위해 이미지에 항상 alt 텍스트를 추가하세요.
유지보수 및 워크플로우
콘텐츠는 Markdown이나 간단한 JSON 파일로 작성하세요. 이렇게 하면 코드를 건드리지 않고도 프로젝트를 추가할 수 있습니다.
명령어 한 번으로 배포할 수 있도록 설정하세요. Vercel이나 Netlify를 사용하면 git push만으로 사이트가 즉시 업데이트됩니다.
의존성(dependencies)을 최소화하세요. 이는 나중에 발생할 수 있는 설치 문제를 방지합니다.
사이트를 테스트하세요. Google PageSpeed Insights나 Lighthouse를 사용하여 문제를 찾아 해결하세요.
저는 Next.js와 Vercel로 사이트를 구축했습니다. WebP 이미지, 고유한 메타데이터, 그리고 자동 배포 기능을 사용합니다. 이제 새로운 프로젝트를 추가하는 데 30초밖에 걸리지 않습니다.
기본에 집중하세요. 스택, 이미지, 마크업을 한 번 제대로 설정해 두면, 사이트는 계속해서 빠르고 관리하기 쉬운 상태를 유지할 것입니다.
포트폴리오 최적화에서 가장 큰 차이를 만든 것은 무엇인가요? 댓글로 알려주세요.