Photo by Steve Johnson on Unsplash안녕하세요. 스푼랩스 비글루 Client Team에서 프론트엔드 개발을 담당하고 있는 Drew(이서용)입니다. 비글루는 글로벌 숏폼 드라마 서비스로 다양한 콘텐츠를 쉽고 빠르게 즐길 수 있도록 iOS / Android 앱과 웹사이트에서 스트리밍 서비스를 제공하고 있습니다. 이번 글에서는 더 많은 사람들이 손쉽게 비글루 콘텐츠에 접근할 수 있도록 프론트엔드에서 서버리스 DB Neon을 이용해 간단한 커스텀 Short-URL을 구현하는 과정에 대해 다루었습니다.Short-URL 도입 계기기존 비글루 웹 서비스 콘텐츠 페이지 URL은 다음처럼 불필요하게 많은 정보를 노출하는 구조로 되어있어 가독성 및 보안 측면에서 적절하지 않았습니다.// 콘텐츠 URLex) www.video.com/ko/content/10001?season=10001&episode=1이에 비해 타 서비스 웹 URL의 경우 UUID 형태로 정보를 숨기거나 마케팅 용도로 읽을 수 있도록 만드는 등, 유연하게 여러 가지 형태의 URL을 사용하고 있었습니다.// UUID 형태의 타 서비스 콘텐츠 URLex) www.video.com/content/1523cb9c-f1ad-41f1-81bc-2be08c92d381// Semantic한 형태의 타 서비스 콘텐츠 URLex) www.play.com/ko/ep/41000110515_escape-with-boss-baby이를 보완하기 위해서는 실제 정보를 가진 원본 URL과 외부에 노출되는 URL의 구분이 필요하다는 사실을 알게 되었고, 자체적인 커스텀 Short-URL 도입을 검토하게 되었습니다.// 짧아진 Short-URLex) www.video.com/content/1fja491일반적으로 Short-URL은 다음 과정을 통해 구현됩니다.1. URL 단축먼저 원본 URL을 대체할 단축된 Short-URL을 생성합니다. Short-URL은 서로 충돌이 발생하지 않도록 crypto나 nanoid와 같은 난수 생성 패키지를 이용해 생성합니다. 생성된 URL은 이후 조회를 위해 서버 저장이 필요합니다.2. URL 조회이제 단축된 URL을 조회하여 실제 URL을 찾을 수 있도록 서버 요청을 구현합니다. 실제 URL로 단순히 Redirect 시킬 수도 있지만, Short-URL을 유지하면서 원본 URL 정보만 가져오고 싶다면 이를 API 요청을 통해 조회하도록 설정할 수도 있습니다.3. 추적 및 통계추가로 Short-URL 변환 시점에 클릭 수 등의 데이터를 수집하도록 설정할 수도 있습니다. 이는 기존 이벤트 트래킹 툴과 연동하면 보조적인 데이터로 활용이 가능합니다.이제 구체적인 구현 방법에 대해 살펴보겠습니다.Vercel Storage와 Neon가장 먼저 찾아보았던 것은 Short-URL을 저장하고 불러올 수 있는 DB 서버에 대한 구현 방법이었습니다. 현재 비글루 웹 서비스는 서버사이드 렌더링을 지원하는 React 프레임워크 Next.js를 이용해 개발되었고, Vercel을 통해 배포

안녕하세요. 비브로스 프론트엔드 개발자 박서영입니다.혹시 네이버에서 ‘아기 토’, ‘38도’와 같은 건강 키워드를 검색했을 때, 검색 결과에서 똑닥닷컴을 발견한 적 있으실까요? 불과 1년 전만 해도 똑닥닷컴의 커뮤니티 페이지들은 네이버와 구글 검색 결과에 노출되지 않았습니다. 그러나 최근 검색엔진 최적화 작업을 통해 똑닥닷컴 전반의 검색 노출 성과를 개선하였는데요. 그 결과, 네이버 월 노출 수는 약 2만 건에서 1,000만 건으로, 구글 월 노출 수는 7천 건에서 90만 건으로 증가하였습니다.이번 글에서는 검색엔진 최적화 작업을 진행하며 알게 된 지식을 공유하고, 도움이 될 만한 문서 및 개발 도구들도 같이 소개해 드리겠습니다.SEO(Search Engine Optimization, 검색엔진 최적화)란 검색엔진 결과 페이지(SERP)에서 더 높은 순위를 차지할 수 있도록 하는 전략과 기법을 의미합니다. 그러나 처음 웹페이지를 만들면 상위 노출은 고사하고 검색 결과에 노출되지 않는 경험을 하게 됩니다. 이는 소유한 페이지가 검색엔진에 의해 크롤링(crawling) 및 인덱싱(indexing)되는 과정이 필요하기 때문입니다.크롤링이란 크롤러라는 봇이 웹페이지를 수집하는 행위를 말합니다. 크롤러는 페이지의 링크를 따라가며 다른 페이지로 이동하며, 주기적으로 재방문해서 최신콘텐츠를 반영합니다.인덱싱이란 수집한 데이터들을 데이터 베이스 저장하고 색인하는 행위를 의미합니다. 검색엔진은 페이지의 메타데이터, 콘텐츠, URL 등의 정보를 저장하여, 특정 키워드를 검색했을 때 검색 결과를 빠르게 제공합니다.네이버 서치 어드바이저와 구글 서치 콘솔에 도메인을 등록해 검색엔진에 크롤링을 요청할 수 있습니다. 그리고 페이지의 크롤링 상태, 노출 수, 클릭 수 등 다양한 검색 데이터를 확인할 수 있습니다.검색 결과에서 긴급히 삭제해야 하는 페이지는 단일 URL(path)로 검색 엔진에 제외 요청을 할 수 있습니다네이버는 [네이버 웹마스터 도구] → [요청] → [웹페이지 검색 제외] 에서, 구글은 [구글 서치 콘솔] → [삭제] 에서 설정할 수 있습니다.은 페이지 목록을 XML 형식으로 나열하여 책의 목차처럼 작동합니다. 이를 통해 검색엔진 크롤러에 크롤링해야 할 URL뿐만 아니라 최종 업데이트 시기, 업데이트 빈도, 페이지의 우선순위 등의 추가 정보를 전달할 수 있습니다.사이트맵은 파일당 최대 50,000개의 URL 또는 50MB까지만 지원하므로, 이를 초과하면 여러 사이트맵으로 분할하고 인덱스 사이트맵을 활용하는 것이 좋습니다. 그리고 파일에 사이트맵 위치를 명시하면 검색 엔진 크롤러가 더 효율적으로 탐색할 수 있습니다:파일은 검색엔진 크롤러에 어떤 페이지에 접근할 수 있고, 어떤 페이지는 비공개인지 알려주는 역할을 합니다. 모든 페이지를 허용하고 일부만 막는 블랙리스트 방식이나 모든 페이지를 막고 일부만 허용하는 화이트리스트 방식 등을 적용할 수 있습니다.설정 후에는 구글 서치 콘솔과 네이버 서치 어드바이저에서 robots.txt 수집 상태를 검증하는

주요내용24년의 12월 소식에서는 다음과 같은 유용한 정보들을 만나보실 수 있습니다.State of Frontend 2024The Software House에서 발표한 프런트엔드 개발 설문 보고서입니다. 사용 기술, 개발 경험, 트렌드 등을 다루며, 중간중간 설문 결과에 대한 업계 전문가들의 인사이트가 정리되어 있어 흥미롭게 읽을 수 있습니다.Web AI: Client Side Machine Learning구글은 2024년 10월 18일, 웹 브라우저에서 클라이언트 측 기계학습 모델을 활용하는 개발자들을 위한 첫 번째 Web AI Summit을 개최했습니다Vercel Makes Changes to Next.js To Simplify Self-Hosting지난 10월 열렸던 Next.js 콘퍼런스에서, Next.js 15는 self-hosting을 위한 새로운 핵심 지원과 문서를 제공하며, 새로운 캐시 API도 곧 출시될 예정임을 밝혔고, Vercel의 프로덕트 VP인 Lee Robinson은 이에 맞춰 Self-Hosting Next.js라는 튜토리얼 영상을 공개했습니다.2024 당근 테크 밋업지난 10월 7일 열렸던 당근 테크 밋업의 모든 세션들이 공개 되었습니다.>> FE News 24년 12월 소식 보러가기 ◎ FE News란? 네이버 FE 엔지니어들이 엄선한 양질의 FE 및 주요한 기술 소식들을 큐레이션해 공유하는 것을 목표로 하며, 이를 통해 국내 개발자들에게 지식 공유에 대한 가치 인식과 성장에 도움을 주고자 하는 기술소식 공유 프로젝트 입니다.매월 첫째 주 수요일, 월 1회 발행 되고 있으니 많은 관심 부탁드립니다.▷ 구독하기

최근 프론트엔드 개발에서 사실상의 표준으로 자리매김 하는 기술이 있습니다. 바로 SSR, Server Side Rendering인데요. Next.js를 비롯한 다양한 프레임워크에서 SSR을 손쉽게 구축할 수 있는 솔루션을 제공하고 있습니다. 토스 또한 SSR을 도입하여 많은 사용자에게 빠르고 안정적인 경험을 제공하려고 노력하고 있는데요.오늘은 SSR 아키텍처 운영을 위해 반드시 알아두어야 할, SSR 서버의 최적화와 관련된 이야기를 해보려 합니다. 최적화를 통해 토스는 서비스 운영에 필요한 SSR 서버의 수를 절감하여 비용을 개선할 수 있었습니다.SSR은 Server Side Rendering의 약자로, 화면의 렌더링이 서버에서 이루어지는 아키텍처를 의미합니다. 사전적인 의미는 이러하지만 일반적으로 현대의 SSR은 “첫 HTML 렌더링을 서버에서 처리하고, 이후의 렌더링 사이클은 클라이언트에서 처리”하는 하이브리드 형태의 SSR을 가리킵니다. Next.js, Astro 등의 현대적인 웹 프레임워크는 기본적으로 제공하는 아키텍처입니다. Static Site Generation이나 Dynamic SSR처럼 다양한 방식이 있습니다.SSR은 “첫 HTML 렌더링을 서버에서 처리”하기 때문에, 사용자의 화면에 컨텐츠가 그려지는데 걸리는 시간(FCP, First Contentful Paint)가 더 짧습니다. 토스는 이전에 CSR(Client Side Rendering) 아키텍처를 사용하고 있었는데요. 사용자의 화면에 JavaScript 번들이 모두 다운로드된 다음 첫 렌더링을 실행하면서 인증, 데이터 요청 등의 과정을 거치다보니 화면이 렌더링되는 시간이 상대적으로 길었습니다.이때 SSR 아키텍처를 도입하게 되면서, 인증과 데이터 처리의 첫 과정이 서버에서 먼저 모두 이루어진 다음 사용자는 완성된 HTML을 받아보면서 로딩 속도를 상당히 감축할 수 있었습니다.하지만 공짜 점심은 없죠. SSR을 도입하면 SSR 서버를 구축해야 합니다. Static Serving으로 처리가 가능한 CSR 아키텍처에서는 별도의 로직을 구현하는 서버를 만들 필요가 없습니다. 요청자가 요청한 위치의 파일을 돌려주기만 하면 됩니다. 하지만 SSR은 요청에서 필요한 정보를 파악하고, 적절한 페이지 파일을 가져와 렌더링을 처리한 후, 완성된 HTML과 JS 번들을 돌려주어야 합니다. 다행히 토스에서 사용하는 Next.js는 SSR 서버 구축을 아주 쉽게 할 수 있도록 도와줍니다. 토스 앱의 동작에 필요한 몇몇 미들웨어와 라우팅 로직을 커스텀 서버에 구현하는 정도로 마무리할 수 있었으니까요.그러나 서비스의 성장에 따라 SSR 서버로 유입되는 트래픽이 늘어나면서, 서버의 숫자도 상당히 늘어나게 되었습니다. 또한 SSR 아키텍처의 빠른 로딩이라는 이점을 위해 SSR을 도입하는 서비스의 숫자도 점점 늘어났습니다. 이에 따라 SSR 서버의 숫자가 관리하기 어려울 만큼 많아졌고, 이들의 숫자를 줄여야 한다는 문제 의식이 발생합니다. 트래픽을 줄일 수는 없기 때문에, 같은 트래픽에서 서버의