1. View Transitions API를 주목하는 이유SPA(Single Page Application)는 빠른 전환과 데이터 중심의 UI에 강점이 있지만, 페이지 전환이 지나치게 갑작스럽거나 "툭" 끊기는 느낌을 줄 수 있습니다. 지금까지는 이런 부분을 CSS opacity, transform, 또는 JavaScript로 수작업 애니메이션을 구현해 해결해 왔죠.하지만 다음과 같은 문제점이 있었습니다.구성 요소가 바뀌는 구조에서 애니메이션이 어렵고관리도 복잡하고성능도 보장되지 않습니다.그래서 등장한 것이 바로 View Transitions API입니다.CSS/JS 수작업 애니메이션의 번거로움을 해결SPA 구조에서 전환 흐름을 부드럽게 연결브라우저가 상태 전환 전/후의 시각 요소를 감지하고 자동으로 애..

대규모 언어 모델(LLM)을 기반으로 애플리케이션을 개발하기 위한 첫걸음들어가며최근 AI 개발이나 LLM(Large Language Model)을 활용한 서비스 개발이 급속히 증가하면서 팀과제나 학습에서 개인적으로 관심을 갖게된 기술중 하나가 바로 LangChain입니다 이번 글에서는 LangChain의 개념과 활용 방법, 그리고 왜 AI 개발에 LangChain이 유용한지 가볍게 알아보려 합니다.랭체인(LangChain)이란?LangChain은 다양한 언어 모델을 쉽게 연결하여 자연어 처리를 기반으로 하는 애플리케이션을 구축할 수 있게 도와주는 도구입니다. 간단히 말하면, 여러 가지 도구나 API, 데이터베이스 등을 언어 모델과 쉽게 결합하여 더욱 강력하고 유용한 AI 서비스를 만들 수 있도록 지원하는..

들어가며Next.js 환경의 프론트엔드 프로젝트 경험을 되돌아보며, 사전에 좀 더 깊게 고려했으면 좋았을 보안 관련 내용들을 알아보고 정리해 보려 합니다. XSS 공격⬇️ 설명XSS 공격은 가장 흔한 공격 중 하나로 입력 필드나 URL 파라미터 등을 통해 스크립트를 코드에 삽입하고 다른 사용자의 브라우저에서 해당 스크립트가 실행되도록 만드는 공격입니다. 쿠키 탈취, 하이재킹 등 심각한 문제로 이루어질 수 있습니다.XSS 유형을 아래처럼 3가지로 나눌 수 있습니다.Reflected XSS악성 스크립트를 URL 파라미터나 다른 입력값에 포함해 사용자에게 전달하고, 사용자가 이 악성 스크립트가 포함된 URL을 클릭하거나 폼을 제출하면 서버가 해당 스크립트를 응답 페이지에 그대로 포함해 사용자의 브라우저에서 실..

들어가며요즘 유행인 MCP에 대해 소개합니다. MCP (모델 컨텍스트 프로토콜) 이란?MCP(Model Context Protocol)는 AI 모델이 외부 데이터 소스 및 도구와 안전하게 통합될 수 있도록 하는 개방형 프로토콜입니다.AI 시스템이 단순히 텍스트를 생성하는 것을 넘어 필요한 정보를 실시간으로 가져오고 다른 소프트웨어나 데이터 시스템과 협업할 수 있도록 지원하여 AI 모델의 성능과 실제 활용도를 높이는 데 기여합니다.Anthropic에서 오픈 소스로 공개한 이 기술은 AI 모델이 다양한 데이터 소스 및 도구에 표준화된 방식으로 연결될 수 있도록 지원하며, AI 생태계에서 'USB-C 포트'와 같은 역할을 수행합니다.https://www.anthropic.com/news/model-contex..

들어가며'KWCAG 2.2 개정'에 새로 추가된 9개 중 지난 2월에 게재한 6개의 항목(https://tech.pxd.co.kr/post/KWCAG-2-2-업데이트-항목의-구체적인-사례-271) 외에 나머지 3개 항목에 대해 추가 게재합니다. 업데이트 항목 중 9개 중 3개의 구체적인 사례 7.2.2. 찾기 쉬운 도움 정보 준수 사례 1 : 최소한 하나의 도움 정보는 해당 페이지에서 동일한 상대적인 순서대로 제공 7.3.3. 접근 가능한 인증 오류 사례 1 : 인증 과정을 인지 기능 테스트에만 의존한 경우 오류버스를 알아야 인증 가능기억해야 인증 가능 준수 사례 1 : 인증 과정은 인지 기능 테스트에만 의존하지 않은 경우 준수 준수 사례 2 : 인증 과정은 인지 기능 테스트에만 의존하지 않은..

들어가며요즘 가장 핫한 키워드 중 하나인 바이브 코딩(Vibe Coding). 디자인 파일만 주면 코딩이 뚝딱 완성된다는 이야기가 들려오면서 프론트엔드 개발자들의 관심을 끌고 있습니다. 하지만 실제로 업무에 적용하려고 하면 과연 어느 정도까지 신뢰할 수 있을까요? 이번 글에서는 저희 내부 프로젝트에서 Next.js + TypeScript + Cursor + Figma MCP 환경으로 바이브 코딩을 실전 적용해 본 경험을 공유하고자 합니다.바이브 코딩이 무엇인지에 대한 개념이 궁금하신 분은 이전 포스팅을 먼저 참고해주세요. 바이브 코딩을 해보게 된 배경바이브 코딩을 제대로 해보고 싶다는 생각은 있었지만 규모가 큰 프로젝트에서 감히 엄두가 나지 않았는데, 내부 프로젝트로 간단하게 마이크로 인터렉션 정도가 있..

들어가며이전 포스트에서 PWA를 활용해 네이티브 앱 못지않은 사용자 경험을 웹에서 구현할 수 있다는 이야기를 했었습니다. 특히 그 중심에 있는 기능 중 하나가 바로 웹 푸시 알림인데요. 이번 포스트에서는 실제 프로젝트에서 직접 구현해 본 웹 푸시 기능을 Next.js 14 App Router 환경 + FCM(Firebase Cloud Messaging)을 중심으로 풀어보려고 합니다.저는 처음엔 단순히 공부 차원에서 시작했는데, 운 좋게도 이어진 프로젝트에서 웹 푸시 기능이 요구되면서 실무에 적용할 기회까지 생겼습니다. 이론만 알았다면 그냥 흘려보냈을 내용들을 실제 API 통신과 서비스워커 등록 등 다양한 과정 속에서 직접 다뤄보면서 제대로 체득할 수 있었고, 웹이 정말 많은 영역에서 네이티브 앱을 대체할..

들어가며최근 SKT의 해킹 사건으로 유심에 대해 관심이 생겨서 찾아보았습니다. 유심(USIM)은 단순한 칩이 아니다대부분의 사람들은 유심을 단순히 전화번호 저장용 칩 정도로 생각하지만, 실제로는 통신망 인증, 암호화, 위치 정보, 인증 수단 등 다방면에 관여하는 보안 디바이스입니다. 유심에는 뭐가 들어있지?유심 내부에는 가입자 정보를 인증하고 통신을 가능하게 하는 핵심 데이터가 저장돼 있습니다.IMSI (국제 이동 가입자 식별번호): 가입자를 식별하는 고유 번호. (유저 ID 역할)Ki (개인 인증키): 이동통신사만 알고 있는 비밀 키로, IMSI와 함께 기지국에서 인증에 사용됨.전화번호, 통신사 정보SMS/MMS 설정 정보, 일부 주소록eSIM은 동일한 개념을 칩 내장형 소프트웨어 형태로 구현한 것...

들어가며URL을 입력하고 엔터키를 누르면 눈앞에는 웹페이지가 순식간에 보입니다. 이 짧고도 간단한 행위 뒤에 브라우저에서는 어떤 일이 펼쳐지고 있을까요?거의 매일같이 웹을 탐색하는 우리지만 사실 그 내부에서는 어떤 복잡한 일이 벌어지고 있는지 생각해 볼 기회는 많지 않았던 것 같습니다. 이번 글에서는 그다지 관심 가지지 않았던 브라우저의 바쁜 일상에 대해서 간단히 알아보고 프런트 엔드 개발과 사용자 경험 측면에서도 생각해 볼 부분은 없는지 알아보고자 합니다. 브라우저가 웹페이지를 표시하는 과정웹사이트를 사용자에게 보여주는 일련의 과정을 위해 브라우저 안에서는 실제로 복잡하고 다양한 작업이 수행됩니다. 프런트 시점에서 단계별로 살펴보겠습니다.1. 요청사용자가 주소를 입력하면 HTTP 통신을 통해 브라우저는..

들어가며지난해 12월, 진행 중인 여러 프로젝트가 웹 접근성 준수를 요구하는 프로젝트였습니다.2021년에 그룹 차원에서 웹 접근성 전사 교육을 진행한 적이 있으나, 그 이후 약 4년이 경과했고 당시 사용한 자료는 ‘한국형 웹 콘텐츠 접근성 지침 2.1’을 기준으로 한 것이었습니다.이로 인해 2.2 기준의 내용으로 업데이트하여 사내 교육의 일환으로 웹 접근성에 대한 내용을 정리하고 온라인으로 교육한 내용 중 파트별 웹 접근성 체크리스트를 공유하고자 합니다. 웹 접근성이란?대부분 이미 익숙하겠지만, 먼저 웹 접근성이 무엇인지 간단히 살펴보겠습니다.월드 와이드 웹을 창시한 팀 버너스리는 웹이란 장애에 구애 없이 모든 사람이 손쉽게 정보를 공유할 수 있는 공간이라고 정의하였습니다.월드 와이드 웹을 창시한 팀 버..

들어가며현대 웹 개발에서 CSS는 단순한 스타일링 도구를 넘어 사용자 경험(UX)과 개발 효율성을 높이는 중요한 역할을 합니다. 특히 최근 도입된 CSS Subgrid와 Container Queries는 복잡한 디자인 요구사항을 간결하고 유연하게 해결할 수 있도록 돕는 최신 기능입니다.하지만 처음 접하면 기존 Grid/Flexbox, Media Queries와 뭐가 다른지 헷갈릴 수 있습니다. 이번 글에서는 Subgrid와 Container Queries가 기존 방식과 어떻게 다른지, 어떤 장점이 있는지 비교해 보겠습니다. 1. CSS Subgrid: 부모-자식 레이아웃의 일관성1.1 기존 Grid/Flexbox와의 차이 기존 Grid/FlexboxSubgrid부모와 자식의 레이아웃이 서로 독립적부모의 ..

들어가며최근 실시간 알림 등 양방향 통신이 필요한 기능에 대한 관심이 많아지면서 자연스럽게 WebSocket에 관심을 갖게 되었습니다. 특히 WebSocket을 좀 더 쉽게 구현할 수 있게 해주는 Socket.IO라는 라이브러리를 알게 되어 공유해 보고자 합니다.WebSocket과 Socket.IOWebSocket 이란?WebSocket은 클라이언트와 서버 간의 양방향 통신을 가능하게 하는 프로토콜입니다. 기존의 HTTP 통신이 클라이언트의 요청에 서버가 응답하는 단방향 통신이었다면, WebSocket은 연결이 수립된 후에는 양쪽에서 자유롭게 데이터를 주고받을 수 있습니다.Socket.IO란?Socket.IO는 WebSocket을 기반으로 하되, 더욱 다양한 기능을 제공하는 라이브러리입니다. 주요 특징은..