분류 전체보기 5

동적 렌더링을 통해 싱글페이지 어플리케이션(SPA) 의 SEO 를 관리하는법

싱글페이지 어플리케이션(SPA) 은 뛰어난 사용자 경험과 빠른 전환 속도를 제공하지만, 검색엔진 최적화(SEO) 측면에서는 여러 제약이 따릅니다. 특히 Google, Bing 등의 검색 엔진 크롤러는 자바스크립트를 완벽하게 처리하지 못하거나, 처리하더라도 상당한 시간이 소요될 수 있어 초기 HTML이 빈 상태로 노출되는 문제가 발생합니다. 이를 해결하는 대표적인 방식 중 하나가 동적 렌더링 입니다. 이 글에서는 동적 렌더링의 개념과 구현 방식에 대해 알아보고, 예제를 통해 실제로 어떻게 동작하는지 살펴보겠습니다. 왜 SPA 는 SEO 에 불리할까?SPA는 자바스크립트를 통해 클라이언트에서 콘텐츠를 렌더링합니다. 이는 사용자에게는 빠르고 부드러운 경험을 주지만, 검색 엔진 크롤러는 다음과 같은 문제를 겪습..

인프라 2025.08.02

신뢰받는 추첨 시스템을 만드는 방법 (with drand)

추천시스템은 의도적으로 특정 결과를 유도하거나 왜곡할 수 있다는 의심을 받기 쉽습니다. 그렇다면 이러한 불신과 조작 논란을 원천적으로 차단하려면, 시스템은 어떻게 설계되어야 할까요? 로또 사례로 살펴보는 추첨 시스템의 한계이해를 돕기 위해 로또 추첨 방식을 예로 들어보겠습니다. 로또는 매주 토요일 저녁, 생방송을 통해 추첨이 진행됩니다. 프랑스 A사에서 제작한 공인 추첨 기계를 사용하여, 공기 압력으로 공을 섞고 튀어나오는 순서대로 번호 6개와 보너스 번호 1개를 추출합니다. 이 모든 과정은 외부 입회자들의 감독 아래, KBS를 통해 생중계됩니다. 이처럼 절차적으로는 매우 공정하고 투명해 보이지만, 근본적인 한계가 있습니다 1. 완전한 무작위성에 대한 신뢰 부족물리적 방식은 외관상 무작위처럼 보이지만,..

시스템 설계 2025.07.17

AWS Lightsail 을 이용한 워드프레스 구축 및 서브 디렉토리를 루트로 설정하는법

워드프레스 클라우드를 이용해 도메인을 세팅할 때, 서브 디렉토리 구조로 설정할 수 없는 점이 아쉬움으로 남습니다. 서브 디렉토리 구조란, 예를 들어 https://example.com/blog 같은 형태로 워드프레스의 루트 주소를 설정하는 것을 의미합니다. 이 경우, 우리는 워드프레스를 직접 서비스하여 이러한 구조를 설정할 수 있습니다. 그러나, 이 작업은 여러 가지 복잡한 설정을 요구할 수 있습니다. 예를 들어, 웹 서버와 도메인 관리, 파일 경로 설정 등 여러 단계를 거쳐야 하므로, 경험이 부족한 사용자에게는 어려운 작업이 될 수 있습니다. 하지만 AWS와 같은 클라우드 서비스를 사용하면 이러한 설정을 더 간편하게 할 수 있습니다. AWS에서는 다양한 설정을 자동으로 처리해주는 서비스가 제공되므로, ..

인프라 2025.07.15

하나의 도메인으로 Framer 와 Blog 연결 시키는 방법 2 (with Cloudfront)

이전에 Cloudflare 를 이용해서 Framer 와 Inblog 를 연결하는 글을 적었습니다. 하지만, Cloudflare 로 두 서비스를 연결하기 위해서는 네임서버를 Cloudflare 로 이전해야하는 문제가 있었습니다. 이 문제는 이미 서비스가 활성화된 곳에서는 쉽게 결정하기 어려운 문제입니다. 그래서 이번엔 AWS 의 Cloudfront 를 이용해서 두 서비스를 연결하는 방법을 가져왔습니다. AWS Cloudfront 가 뭐에요? AWS Cloudfront 는 Amazon Web Services 에서 제공하는 콘텐츠 전송 네트워크(CDN) 서비스입니다. 이 서비스가 해줄 수 있는 일에 대해서 간략히 나열해보면 다음과 같습니다. CDN 서비스: 사용자와 가까운 엣지 서버에서 콘텐츠를 전달하여 지연..

인프라 2025.07.03

하나의 도메인으로 Framer 와 Blog 연결 시키는 방법 (with Framer, Inblog, Cloudflare)

해당 글은, Inblog 의 가이드 문서를 참고하여 작성하였습니다. 웹서비스를 만들다 보면, 하나의 도메인 아래에 여러 사이트를 연결해야 할 때가 종종 있습니다. 예를 들어:메인 페이지는 Framer 로 만든 랜딩 페이지/blog 는 blog 서비스(wordpress, ghost, inblog 등등)사용자에게는 example.com이라는 하나의 도메인에서 모든 콘텐츠가 제공되는 것처럼 보이기 때문에 사용자 경험(UX)이 좋아지고, SEO(검색 엔진 최적화) 측면에서도 유리합니다. 하지만, 이러한 구현은 여러 문제에 직면하게 됩니다. Framer 의 custom domain 은 proxy 연결을 지원하지 않는다.대부분의 블로그 서비스는 서브 디렉토리 구조를 허용하지 않는다. 그렇다면 방법이 없는걸까?여러..

인프라 2025.06.28